@media only screen and (min-width: 0px){
body {
	background-color: #83b799;
	/*font-family: "Avenir Next W04", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family: Consolas,monaco,monospace;
	margin: 0;
	height: 100%;
	overflow: hidden;
	}
	
@media screen and (orientation:portrait) {
    .mobile{
		position: fixed	;
		width: 100%;
		height: 100%;
		z-index: 2500;
		background-color: #83b799;
		text-decoration: blink;
		font-family: Consolas,monaco,monospace;
		font-size: 40px;
		text-align:center;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
	}
	
	.innermobile{
	position: relative;
	height: 90%;
	width: 90%;
	background-color: #e2cd6d;
	border-width: 4px;
	margin: auto;
    
	box-shadow: grey 3px 3px 5px;
	border: 5px solid #272324;
	border-radius: 6px;
	display: inline-block;
		
	}
	
	#porimg{
		height: 400px;
		margin-top: 50;
		box-shadow: grey 3px 3px 5px;
		border: 5px solid #272324;
		border-radius: 6px;
		visibility: visible;
	}
}
	
@media only screen and (min-width: 1920px){
#bodies { 
    zoom: 180%;
}

 	
}

h1 a{
	z-index: 240;
	color: black;
	text-decoration: none;
	cursor: pointer;
 }

#topmenu{
	position: fixed;
	top: 95px;
	bottom: 10px;
	height: 40px;
	left: 1.2%;
	width: auto;
	right: 1%;
	background-color: #e2cd6d;
	z-index: 18;
	/*border-style: solid;
	border-width: 4px;
	border-color: #272324;*/
	border: 4px solid #272324;
	border-radius: 6px;
	box-shadow: grey 3px 1px 5px;

}

	
#topmenubutton{
	background-color: #83B799;
}
	
div.menü{
	position: fixed;
	z-index: 240;
	margin: 7 0 0 0;
	display:flex;
    justify-content: space-around;
	
	width: auto;
	/*background-color: black;*/
	left: 1.2%;
	right: 1%;
}


#quark a{
	margin-top: 0;
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-size: 14;
}

.menü button{
	width: 180;
}

.winbutton {
	float:left;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 11px;
	margin: 10px;
	background-color: #C2B28F;
	height: 25px;
	margin: 8px;
	border-radius: 6px;
	border: 0px solid;
	width: ;
}

button.winbutton:hover{
		  -webkit-transform: rotate(4deg);
transform: rotate(4deg);
}

div.sieger{
	height: 40px;
	width: 480px;
	background-color: #e2cd6d;
	border: 4px solid #272324;
	border-radius: 6px;
	margin: 0px auto;

	border-color: #272324;
	font-size: 18px;
	display:flex;
    justify-content: space-around;
	box-shadow: grey 3px 3px 5px;
}

#losen{
	margin-top: 0px;
	margin: 7px;
	box-shadow: grey 3px 3px 5px;
}
	
#losen button:hover{
	background-color:
}

button{
	height: 25px;
	width: 125px;
	background-color: #83b799;
	border-radius: 6px;
	border: 0px solid #272324;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
	font-family: Consolas,monaco,monospace;
	box-shadow: grey 3px 3px 5px;
	outline-color: #272324;
}



.menü button:hover{
	  -webkit-transform: rotate(4deg);
transform: rotate(4deg);
}

button.historie{
	margin-left: 100px;
	top: 500px;
	border-style: solid;
	border-width: 1px;
	z-index: 240;
	background-color: white;
}

select option{
	border: 0px solid;
	border-radiu: 6px;
}

.topselect{

	position: relative;
	margin-top: 23;
	z-index: 15;
	height: 25px;
	width: 180;
	background-color: #83b799;
	border-radius: 6px;
	border: 0px solid #272324;
    color: black;
    text-align: center;
    text-decoration: ;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
	font-family: Consolas,monaco,monospace;
	box-shadow: grey 2px 2px 3px;
	
}

.roll{
    -moz-animation-name: roll;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    -o-animation-name: roll;
    -o-animation-duration: 4s;
    -o-animation-iteration-count: 1;
    -webkit-animation-name: roll;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
}

.boing{
	    -moz-animation-name: boing;
    -moz-animation-duration: 3.5s;
    -moz-animation-iteration-count: 1;
    -o-animation-name: boing;
    -o-animation-duration: 3.5s;
    -o-animation-iteration-count: 1;
    -webkit-animation-name: boing;
    -webkit-animation-duration: 3.5s;
    -webkit-animation-iteration-count: 1;
}

.babo{
	    -moz-animation-name: babo;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    -o-animation-name: babo;
    -o-animation-duration: 4s;
    -o-animation-iteration-count: 1;
    -webkit-animation-name: babo;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes babo {
from { -webkit-transform: rotate(0deg) rotatey(0deg)}
to   { -webkit-transform: rotate(360deg) rotatey(360deg)}
}

@-moz-keyframes babo {
from { -moz-transform: rotate(0deg) rotatey(0deg)}
to   { -moz-transform: rotate(360deg) rotatey(3600deg)}
}

@keyframes babo {
from { transform: rotate(0deg) rotatey(0deg)}
to   { transform: rotate(360deg) rotatey(360deg)}
}

@-webkit-keyframes boing {
from { -webkit-transform: rotatey(0deg) }
to   { -webkit-transform: rotatey(360deg) }
}

@-moz-keyframes boing {
from { -moz-transform: rotatey(0deg) }
to   { -moz-transform: rotatey(360deg) }
}

@keyframes boing {
from { transform: rotatey(0deg) }
to   { transform: rotatey(360deg) }
}

@-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to   { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to   { -moz-transform: rotate(360deg) }
}

@keyframes roll {
from { transform: rotate(0deg) }
to   { transform: rotate(360deg) }
}

.topselect:active{
	outline:0;
}

option{
	background-color: #eee;
	border: 4px solid #272324;
	border-color: black;
	font-family: Consolas,monaco,monospace;
}
#select0{
	float: left;
	margin-left: 10%;
	min-width: 200;
	width: auto;
	max-width: 300;
	overflow-x:scoll;
	
}

#select1{
	width: 200;
	float: right;
	margin-right: 10%;
}

#button1{
	margin-top: -20px;
	margin-left: 50px;
	box-shadow: grey 1px 1px 3px;
}


.next {
	height: 40px;
	width: 800px;
	background-color: #e2cd6d;
	border: 4px solid #272324;
	border-radius: 6px;
	border-color: #272324;
	margin: -10px auto -10;
	border-width: 4px;
	border-color: #272324;
	font-size: 18px;
	display:flex;
    justify-content: space-around;
	box-shadow: grey 3px 3px 5px;
}


.test{
	width: 50px;
	height: 500px;
	margin-left: 50%;
	top: 500px;
	border-style: solid;
	border-width: 1px;
	z-index: 200;
	background-color: white;
}

div.feld {
	float:left;
	width: 100px;
	height: 25px;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 0px;
	margin: 8px;
	background-color: #C2B28F;
 -moz-user-select: None;
 -webkit-user-select: None; 
 	border: 0px solid #272324;
	
	border-radius: 6px;
}

div.a{
	text-align: left;
}
div.b{
	text-align: right;
}

.subtext{
	text-align: center;
	margin-top: -25;
}

.einstellungen{
	position: fixed;
	left: 220;
	right: 220;
	bottom: 15;
	top: 230;
	height: auto;
	width: auto;
	background-color: #C2B28F;
	display:block;
    justify-content: space-around;
	border-color: #272324;
	box-shadow: grey 3px 3px 5px;
	background-color: #C2B28F;
	border: 4px solid #272324;
	border-radius: 6px;
	overflow-y: auto;
}

.set{
	margin-top: 30;
	margin-bottom: 30;
	margin-left: 40px;
	height: 50;
	width: 300;
	background-color: #e2cd6d;
	text-align: center;
	border: 0px solid;
	border-radius: 6px;
	box-shadow: grey 2px 2px 3px;
	background-color: #E4D8B4;
	border-color: #272324;
	border: 0px solid;
	border-radius: 6px;
}

.set p{

}

.setsel{
	height: 50;
	margin-top: 16;
	width: 205;
	border: 0px solid;
	border-radius: 6px;
	margin-left: 60px;
	background-color: #E2CD6D;
    color: black;
    
    text-decoration: ;
    display: inline-block;
    font-size: 16px;
 
	font-family: Consolas,monaco,monospace;
	box-shadow: grey 2px 2px 3px;
}

.settut{
	height: 50;
	margin-top: 16;
	width: 480;
	border: 0px solid;
	border-radius: 6px;
	margin-left: 60px;
	background-color: #E2CD6D;
    color: black;
    
    text-decoration: ;
    display: inline-block;
    font-size: 16px;
 
	font-family: Consolas,monaco,monospace;
	box-shadow: grey 2px 2px 3px;
}

.tut a, p{
	text-decoration: none;
	color: black;
	cursor: pointer;
}

#addpla{
	padding-left: 15px;
	padding-right: 15px;
}


.nächstesspiel{
	
	margin-left: 0px;
	margin-top: 70px;
	
	text-align: center;
	font-size: 30px;
}



div.nachricht {
	position: fixed;
    top: 150px;
	background-color: #C2B28F;
	width: 180px;
	border: 4px solid #272324;
	border-radius: 6px;
	text-align: center-left;
	right: 1.2%;
	z-index:240;
	padding-right: -10px;
	bottom: 10px;
	height: auto;
	border-color: #272324;
	box-shadow: grey 3px 3px 5px;
}

.anwesend {
	position: fixed;
	top: 150px;
	overflow-y: auto;
	background-color: #C2B28F;
	width: 180px;
	text-align: center-left;
	left: 1.2%;
	z-index:0;
	margin-left: 0px;
	bottom: 10px;
	height: auto;
	border-color: #272324;
	box-shadow: grey 3px 3px 5px;
	background-color: #C2B28F;
	border: 4px solid #272324;
	border-radius: 6px;
}

.anwesendhead{
	position: fixed;
	margin-left: 0px;
	margin-bottom: 10px;

	width: 125;
	height: 45;
	z-index: 1;
	background-image: linear-gradient(to bottom, #C2B28F 80%, transparent);
}

.anwesendtab{
	margin-top: 20px;
	margin-bottom: 13px;
	
}

#text{

margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
width: 150px;
height: calc(100% - 100px);
bottom: 10;
background-color: #E4D8B4;
border: none;
font-size: 18px;
resize: none;
background-color: #C2B28F;
}


#textgo{
	position: fixed;
	right: 30;
	bottom: 25px;
	width: 160px;
	background-color: #e2cd6d;
}

h3 {
	margin-top: 6px;
	margin-bottom: -10px;
	text-align: center;
}

#topspace {
	position: fixed;
	background-color: #83b799;
	width: 100%;
	top: 0;
	left: 0;
	height: 100px;
	z-index: 9;
	
}

#topline {
	position: fixed;
	margin-top: 0px;
	top: 10px;
	height: 70px;
	left: 1.2%;
	width: auto;
	right: 1%;
	background-color: #e2cd6d;
	z-index: 18;
	border: 4px solid #272324;
	border-radius: 6px;
	border-color: #272324;
	box-shadow: grey 3px 3px 5px;
}

#bordy {
	position: absolute;
	top: -3px;
	left: 5px;
	right: 5px;


}

.border.dashed {
	position: fixed;
    left: 2%;
	right: 2%;
	text-align: center;
	background-color: #C2B28F;
	z-index: 10;
	width: auto;
	vertical-align: center;
	margin-top: 15px;
	border-radius: 6px;
}

.border
{
  position: absolute;
  left: 1%;
  width: 100%;
  height: 40px;
}
	
.dashed 
{
  background: 
    linear-gradient(90deg, #463F41 50%, transparent 50%),
    linear-gradient(0deg, #463F41 50%, transparent 50%),
    linear-gradient(90deg, #463F41 50%, transparent 50%),
    linear-gradient(0deg, #463F41 50%, transparent 50%);
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 15px 4px, 4px 15px, 15px 4px, 4px 15px;
  background-position: left top, right top, left bottom, left top;
  padding: 4px;
  animation: border-dance 40s infinite linear;
}
	
@keyframes border-dance 
{
  0%
  {
    background-position: left top, right top, right bottom, left bottom;
  }
  100% 
  {
    background-position: right top, right bottom, left bottom, left top;
  }
}
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 3px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #e2cd6d;
	margin-left: 5px;
	margin-right: 10;
	border: 1px solid #272324;
	border: 1px solid #272324;
	border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #cbb862;
}

/* When the checkbox is checked, add a #E86F68 background */
.container input:checked ~ .checkmark {
    background-color: #e86f68;
	
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
	
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
	
    top: 3px;
    width: 5px;
    height: 10px;

    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

::selection {
    background: #fff;
    color: #336699;
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background: #fff;
    color: #336699;
}
@media screen and (orientation:landscape) {
	.mobile{
		width: 0%;
		height: 0%;
		z-index:0;
		color: #83b799;
	}
	#porimg{
		visibility: hidden;
	}
	
div.gif {
    width: 480px;
    height: 238px;
	background-color:#83b799;
    /*background-image: url('/graphics/stop.gif');*/
	background: url(/graphics/stop.gif) no-repeat -9999px -9999px;
	background: url(/graphics/stop.gif) no-repeat -9999px -9999px,
		    url(/graphics/los.gif) no-repeat -9999px -9999px;
    background-size: 100%;
    background-position: center center;
	box-shadow: grey 3px 3px 5px;
	margin: -95 auto;
	border: 4px solid #272324;
	border-radius: 6px;
	border-width: 4px;
	border-color: #272324;
	cursor: grab;
}	
div.gif:hover{
    background-image: url('/graphics/los.gif');
	
}
div.gif:active{
	cursor: grabbing;
}



/*SNOW*/
/*
.winter-is-coming, .snow {
  z-index: 100;
  pointer-events: none;
}
.winter-is-coming {
  overflow: hidden;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  background: ;
  z-index: -1;
}
.snow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: falling linear infinite both;
  transform: translate3D(0, -100%, 0);
}
.snow--near {
  animation-duration: 10s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png');
  background-size: contain;
}
.snow--near + .snow--alt {
  animation-delay: 5s;
}
.snow--mid {
  animation-duration: 20s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
  background-size: contain;
}
.snow--mid + .snow--alt {
  animation-delay: 10s;
}
.snow--far {
  animation-duration: 30s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');
  background-size: contain;
}
.snow--far + .snow--alt {
  animation-delay: 15s;
}
@keyframes falling {
  0% {
    transform: translate3D(-7.5%, -100%, 0);
  }
  100% {
    transform: translate3D(7.5%, 100%, 0);
  }
}
*/

/* Buzz */
@-webkit-keyframes losen {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes losen {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
#losen{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);

  /*box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/
}
#losen:hover, #losen:focus, #losen:active {
  -webkit-animation-name: losen;
  animation-name: losen;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 4;
  animation-iteration-count: 4;
}



/*Komisches Popup von Luca*/

div.popup{
  height: 20px;
  width: 200px;
  background-color: #fff;
  color: #336699;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  margin: -6 auto 5;
  position: relation;
  border-style: 1px solid;
  border-color: #272324;
  border-radius: 6px;
  border-width: 4px;
  text-align: center;
  z-index: 900;
}

div.popup2{
  width: 480px;
  height: 238px;
  background-color: #E2CD6D;
  color: #336699;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  position: fixed;
  border-style: none;
  border-color: #272324;
  border-width: 4px;
  text-align: center;
  z-index: 99;
}

#gwunsch{
	margin-top: 10px;
	color: black;
	
}

#recaptcha{
	position: fixed;
	margin-left: 86px;
	margin-top:px;

}

textarea.kommi{
	font-size: 18px;
	resize: none;
	margin-left: 10;
	margin-right: 10;
	width: 460px;
	padding: 5 5 5 5;
	margin-top: 20px;
	height: 120;

	border: 1px solid #272324;
	border-radius: 6px;
		background-color: E4D8B4;
}

button.btn{
	margin-top: 20px;
}

p.wenig{
  text-align: center;
  vertical-align: middle;
}

a.tuer{
  color: #83b799;
  position:absolute; 
  bottom: 0px;
  right: 0px;
  text-decoration: none;
}

a.tuer.active{
	color: #83b799;
}

a.tuer:hover{
	cursor: help;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

h1{
	font-size: 36;
	text-align: center;
	margin-top: ;
	line-height: ;
}


.header{
	height: auto;
	width: 800px;
	background-color: #e2cd6d;

	margin: 40 auto;
	border-width: 4px;
	
	font-size: 22px;
	display:flex;
    justify-content: space-around;
	box-shadow: grey 3px 3px 5px;
	  border: 5px solid #272324;
  border-radius: 6px;
}

/*Hier entsteht eine neue Scrollbar!*/
.scrollbar {
	margin-left: 22px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow {
	min-height: 450px;
}

#wrapper {
	text-align: center;
	margin: auto;
}

#style-1::-webkit-scrollbar,
#style-2::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar,
#style-5::-webkit-scrollbar,
#style-6::-webkit-scrollbar,
#style-7::-webkit-scrollbar,
#style-8::-webkit-scrollbar,
#style-9::-webkit-scrollbar,
#style-10::-webkit-scrollbar,
#style-11::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}

/**  STYLE 1 */
#style-1::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

#style-1::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

/**  STYLE 2 */
#style-2::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

#style-2::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

/**  STYLE 3 */
#style-3::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
	background-color: #000000;
}

/**  STYLE 4 */
#style-4::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb {
	background-color: #000000;
	border: 2px solid #555555;
}

/**  STYLE 5 */
#style-5::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb {
	background-color: #0ae;
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                  color-stop(.5, rgba(255, 255, 255, .2)),
					          color-stop(.5, transparent), to(transparent));
}

/**  STYLE 6 */
#style-6::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb {
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}

/** STYLE 7 */
#style-7::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-7::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

/**  STYLE 8 */
#style-8::-webkit-scrollbar-track {
	border: 1px solid black;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb {
	background-color: #000000;	
}

/**  STYLE 9 */
#style-9::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb {
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}

/**  STYLE 10 */
#style-10::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #96A6BF, #63738C);
  box-shadow: inset 0 0 1px 1px #5C6670;
}

#style-10::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #eee;
  box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0,0,0,0.3)
}

#style-10::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(left, #8391A6, #536175);
}

/**  STYLE 11 */
#style-11::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  border: 1px solid #ccc;
}

#style-11::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #fff, #e4e4e4);
  border: 1px solid #aaa;
}

#style-11::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

#style-11::-webkit-scrollbar-thumb:active {
  background: linear-gradient(left, #22ADD4, #1E98BA);
}
}
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/





/*@media screen and (max-width: 1214px){
	body {
		background-color: #83b799;
		font-family: "Avenir Next W04", "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		
	.mobile{
		position: fixed;
		top:0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #83b799;
		z-index:10000;
		
	}
}*/