@font-face {
	font-family: 'Russo One';
	font-style: normal;
	font-weight: 400;
	src: local('Russo One'), local('RussoOne-Regular'), url(russo.woff) format('woff');
  }
  
  
  html, body {
	  width: 100%;
	  height: 100vh;
	  margin: 0;
	  font-family: 'Russo One';
	  cursor:url('../images/cursor.png'), auto;
	  overflow: hidden;
  }
 
  
  #canvasGame {
	  background: black;
	  position:fixed;
	  top:0;
	  left:0;
	  right:0;
	  margin:0 auto;	
	  z-index:0;
	  user-select: none;
  }
  
  #gameContainer {
	  display:none;
	  opacity:0;
	  
	  width:100%;
	  height:100%;
	  position:fixed;
	  top:0;
	  left:0;
	  right:0;
	  margin:0 auto;	
	  z-index:1;
  
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:default;
	pointer-events:none;
  }
  #gameContainer .darkness
  {
  z-index:1;
  position:absolute;
  width:100%;
  height:100%;
  }
  
  
  
  #gameContainer .status
  {
  position:relative;
  font-size:12px;
  margin:0 auto;
  margin-top:7px;
  width:25vw;
  height:1vw;
  z-index:10;
  }
  
  #gameContainer .status .experienceBar
  {
  width:100%;
  height:15px;
  font-weight:bold;
  border:1px solid white;
   background-color:white;
   font-size:13px;
   text-align:center;
   z-index:10;
  }
  
  #gameContainer .status .waterBar
  {
  margin:0 auto;
  margin-top:2px;
  width:100%;
  height:15px;
  font-weight:bold;
  border:1px solid white;
   background-color:white;
   font-size:12px;
   text-align:center;
   z-index:10;
  }
  
  #gameContainer .status .oxygenBar
  {
  margin:0 auto;
  margin-top:2px;
  width:100%;
  height:15px;
  font-weight:bold;
  border:1px solid white;
   background-color:white;
   font-size:12px;
   text-align:center;
   z-index:10;
  }

  #gameContainer .status .skillRight
  {
  margin:0 auto;
  margin-top:2px;
  margin-left:2px;
  width:100%;
  padding-bottom: 100%;
  font-weight:bold;
  background-color:white;
  font-size:12px;
  text-align:center;
  z-index:10;
  background-size:100% 100%;
  position: relative;
  pointer-events: auto;
  }

  
  #gameContainer .status .skillRightDescription
  {
  position: absolute;
  width:100%;
  margin-top:2px;
  background:white;
  padding:1px;
  font-size:13px;
  display:none;

  }



  #gameContainer .status .skillRight>.bar
  {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    text-align: center;
    font-size: 12px;
    background: rgba(0,0,0,0.8);
    height: 0%;
    /*text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;*/
  }

  #gameContainer .status .skillRight>.rclick
  {
    width:23%;
    height:28%;
    position: absolute;
    right:1px;
    bottom:1px;
    background-image: url('../images/rclick.png');
	  background-repeat: no-repeat;
    background-size: 100% 100%;
    display:none;
  }
  
  .guide
  {
	  left:50%;
	  position:fixed;
  height:25vh;
   z-index:10;
   transform: translate(-50%, 0%);
   top:0.5vh;
  }
  
  
  #gameContainer .status .youEat
  {
  width:100%;
  text-align:center;
  }
  
  #gameContainer .status .youEat img
  {
  height:1.6vw;
  }
  
  #gameContainer .leaderboard {
	  font-size:1.8vh;
	  position:absolute;
	  top:4px;
	  left:4px;
	  color:white;
	  /*width:11%;
	  height:26%;*/
	  background-image: url('../images/leaderboard.png');
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	  padding-top:4px;
	  opacity:0.9;
	  text-align:center;
	  z-index:10;
	  padding:5px;
  }
  
  
  #gameContainer .debugInfo {
	  font-size:0.55vw;
	  position:absolute;
	  top:4px;
	  right:4px;
	  color:black;
    z-index:10;
    text-align: right;
  }
  
    
  #gameContainer .spectators {
	  position:absolute;
	  bottom:8px;
	  left:8px;
	  color:black;
    z-index:10;
    text-align: right;
    display: none;
  }

  #gameContainer .spectators img{
    height:2.5vh;
    float:left;
  }

  #gameContainer .spectators .count{
    margin-left:0.3vh;
    font-size:2.5vh;
    float:left;
  }
  
  #gameContainer .endGame {
	  font-size:3vw;
	  position:absolute;
	  display:none;
	  left:0;
	  right:0;
	  margin:0 auto;	
	  text-align:center;
	  color:#272727;
	  z-index:2;
  }
  
  #gameContainer .endGame .btnPlayAgain{
  font-family: 'Russo One';
  font-size:2vw;
  background:#d600fd;
  padding:2px 5px 2px;
  border:none;
  display:none;
  opacity:0;
  pointer-events: auto;
  }
  
   #gameContainer .endGame .endGameTextBonus{
	/*color:#e5bb45; */
   }
  
    #gameContainer .endGame .btnPlayAgainBonus{
  font-family: 'Russo One';
  font-size:2vw;
  background:#e5bb45;
  padding:2px 5px 2px;
  border:none;
  display:none;
  opacity:0;
  pointer-events: auto;
  }
  
  #gameContainer .mobileControls {
    position:fixed;
    top:calc(100vh - 14vw - 1vh);
    left:0;	  
    z-index:10;
    width:100%;
	font-size:18px;
  }

  #gameContainer .mobileControls button{
    height:14vw;
    width:14vw;
    pointer-events: auto;
    border-radius:45vw;
    border:1px solid black;
    opacity:0.6;
    outline:none;
    background:rgb(211, 211, 211);
	font-size:18px;
  }
  
  #gameContainer .mobileControls button:active{
    opacity:1;
  }
  
  
  #gameContainer .mobileControls .zoom{
    position:fixed;
    top:0vw;
    right:0vw;
    width:6vw;
    height:6vw;
	font-size:18px;
  }
  
  
  
  
  
  
  #uiContainer {
	  width: 100%;
	  height: 100vh;
	  margin: 0;
  
  }
  
  #uiContainer .centerUi {
	  z-index:5;
	  width: 700px;
	  position: absolute;
	  top:40px;
	  left: calc(50% - 350px);
  }
  
  #uiContainer .gameStartBox {
  height:24px;
  border:1px solid black;
  
  }
  #uiContainer .gameStartBox .yourNameInput{
  font-family: 'Russo One';
  font-size:17px;
  background:white;
  height:100%;
  width: 45%;
  text-indent: 10px;
  padding:0px;
  border:none;
  float:left;
  }
  
  #uiContainer .gameStartBox .selectServer{
	  font-family: 'Russo One';
	  font-size:15px;
	  background:white;
	  height:100%;
	  width: calc(30% - 1px);
	  text-indent: 10px;
	  padding:0px;
	  border:none;
	  float:left;
	  border-left:1px solid #8f8f8f;
	  }
  
  #uiContainer .gameStartBox .btnStartGame{
  font-family: 'Russo One';
  font-size:20px;
  background:#d600fd;
  height:100%;
  padding:0px;
  width:calc(25% + 1px);
  border:none;
  float:left;
  }
  
  
  
  #uiContainer .name{
  font-family: 'Russo One';
  font-size:80px;
  width:100%;
  display: block;
  text-align: center;
  }
   
  #uiContainer .footer-right {
  font-family: 'Russo One';
  font-size:16px;
  position:fixed;
  right:0px;
  bottom:2px;
  z-index:1001;
  text-align:right;
  }
    
  #uiContainer .footer-right span{
  margin-right:8px;
  }
  
  #uiContainer .footer-left {
  font-family: 'Russo One';
  font-size:13px;
  position:fixed;
  left:3px;
  bottom:2px;
  z-index:1;
  background: rgba(255,255,255,0.4);
    border-radius: 3px;
    border: 1px solid black;
    padding: 2px;
	text-align:center;
  }
  
  #uiContainer .footer-left span{
  margin-left:3px;
  }
  
  #uiContainer .overlay{
	  background:black;
	  opacity:0.9;
	  width:100%;
	  height:100%;
	  position:fixed;
	  left:0;
	  top:0;
	  display:none;
	  z-index:500;
  }
  	
	#uiContainer .loginRegisterBox{
	display: inline-block;
	background:white;
	border-radius:6px;
	padding:6px;
	font-size:13px;
	position:fixed;
	left:50%;
	top:15%;
	transform: translate(-50%, -50%);
	display:none;
	z-index:501;
	}
	
	#uiContainer .loginRegisterBox input[type="text"],input[type="password"]{
	float:right;
	border:1px black solid;
	width:8vw;
	margin-left:0.1vw;
	}	
    
  #uiContainer .userBox{
	display: inline-block;
	background:white;
	border-radius:0.2vw;
	padding:6px;
	width:calc(100% - 14px);
	margin-top:7px;
	font-size:14px;
	position:relative;
	border:1px solid black;
  }
  
    #uiContainer .howToPlay{
	display: inline-block;
	background:white;
	border-radius:0.2vw;
	padding:4px;
	width:calc(98% - 8px);
	margin-left:calc(1%);
	margin-top:7px;
	font-size:15px;
	position:relative;
	border:1px solid black;
	text-align:center;
  }
 
  #uiContainer .userBox .info{
	font-size:15px;
  }
  
  #uiContainer .userBox .accountExperienceBar{
  width:calc(100% - 2px);
  height:15px;
  font-weight:bold;
  border:1px solid black;
  font-size:13px;
  text-align:center;
  }
  
  
    #uiContainer .loginButton{

	background-color:#ff5252;
	border:1px solid #000000;
	border-radius:0.2vw;
	font-size:14px;
	color:white;
	cursor:pointer;
	
  }
 
#changelog{
position:fixed;
left:5px;
top:5px;
width:250px;
max-height:550px;
overflow-y:auto;
font-size:12px;
z-index:5;
background: rgba(255,255,255,0.4);
border:1px solid black;
padding:2px;
line-height:14px;
}

  #shareContainer{
	  margin:0 auto;
	  text-align:center;
	  position:fixed;
	  bottom:2px;
	  width:100%;
	  
  }
  
  #loading{
  position:fixed;
  left:0%;
  top:0%;
  z-index:1000;
  width:100%;
  height:100%;
  background:#cc00ff;
  }
  
  #loading .loadingText{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  color:white;
  font-size:2vw;
  z-index:1000;
  text-align:center;
  }
  
  #kick{
	  position:fixed;
	  left:0%;
	  top:0%;
	  z-index:2000;
	  width:100%;
	  height:100%;
	  background:#c54545;
	  display:none;
	  }
	  
  #kick .kickText{
	  position:fixed;
	  left:50%;
	  top:50%;
	  transform: translate(-50%, -50%);
	  color:white;
	  font-size:1.3vw;
	  z-index:1000;
	  }
  
  #forceFullScreen{
	  position:fixed;
	  left:0%;
	  top:0%;
	  z-index:5000;
	  width:100%;
	  height:100%;
	  background:#3b5998;
	
	  }
	  
  #forceFullScreen .forceFullScreenText{
	  position:fixed;
	  left:50%;
	  top:50%;
	  transform: translate(-50%, -50%);
	  color:white;
	  font-size:1.3vw;
	  z-index:1000;
	  }
  
  
  #adsOwnerMsg {
	  position:fixed;
	  left:0.5vw;
	  top:0.5vw;
	  padding:0.5vw;
	  border-radius:0.2vw;
	  z-index:10000;
	  background-color:#ff3434;
	  width:25vw;
	  font-size:0.8vw;
	  display:none;
  }
  
  
  #adsOwnerMsg .title{
	  font-size:1.2vw;
  }
  
  #adsOwnerMsg .close{
	  position:absolute;
	  right:0.3vw;
	  top:0;
	  font-size:1.2vw;
	  cursor:pointer;
  }
  
  #adsOwnerMsg textarea{
	  resize: none;
	  width:calc(100% - 0.25vw);
	  font-size:0.7vw;
  }
  
  #uiContainer .gameplays{
	  width:200px;
	  border:1px solid black;
	  position:fixed;
	  right:0;
	  top:0;
	  /*opacity:0.9;*/
	  background:orange;
  }
  
  #uiContainer .gameplays .header{
	  font-size:15px;
	  text-align:center;
	  width:100%;
	  border-bottom:1px solid grey;
  }
  
  #uiContainer .gameplays .header .close{
	  position:absolute;
	  right:5px;
	  top:0;
	  cursor:pointer;
  }
  
  #uiContainer .gameplays .content{
	  text-align:center;
	  width:100%;
	  background:white;
  }
  
  #uiContainer .gameplays .content .ytAuthor{
	  width:100%;
	  font-size:13px;
	  color:white;
	  background:#ff0000;
  
  }
  
  #uiContainer .gameplays .content .video{
	  width:100%;
	  text-align:center;
	  line-height:0;
  }
  
  #uiContainer .gameplays .content .video img{
	  width:100%;
  }
	  
	  
	  
#forceLandscape{
position:fixed;
z-index:10000;
width:100%;
height:100%;
background: black;
text-align:center;
display:none;
font-size:10vw;
color:white;
}

#forceLandscape i{
font-size:80vw;
margin-top:calc(50vh - 40vw);
}

#preroll {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

#centerDiv{
  padding:3px;
  display: inline-block;
  background:white;
  border-radius:3px;
  border:1px solid black;
  margin-top:20px;


}

#shareBtnFb{
	font-family: 'Russo One';
	font-size:14px;
	text-align:center;
background-color: #3b5998;
    border-radius: 3px;
    color: white;
    padding: 2px 5px 2px;
}


@media screen and (orientation:portrait) {
	#forceLandscape{
	display:inline;	
	}
}  
	  
	  
	  
  a{
	  text-decoration:none;
	  color:black;
  }
  
  a:visited{
	  text-decoration:none;
	  color:black;
  }
  
  input {
/*-webkit-appearance: none;
-moz-appearance: none;
appearance: none;*/
border-radius: 0;
}

select {
border-radius: 0;
}


@media (max-width:1135px) { 
	#divBottom{
		display:none;
		/*width:468px !important;
		height:60px !important;
		left:calc(50% - 234px) !important;*/
	}
}

/*
@media (max-width:860px) { 
	#adBottom{
		width:320px !important;
		height:50px !important;
		left:calc(50% - 160px) !important;
	}
}

@media (max-width:710px) { 
	#adBottom{
		display:none;
	}
}
 */
 
@media (max-width:1225px) { 
	#changelog{
	display:none;
  }
  .gameplays{
    display:none;
    }
}

@media (max-width:700px) { 
  .centerUi{
   left:0 !important;
   width:100% !important;
  }
}

@media (max-height:680px) { 
  #changelog{
	max-height:350px;
    }
}

@media (max-height:500px) { 
  #changelog{
	max-height:265px;
    }
}

@media (max-height:420px) { 
  #changelog{
    display:none;
    }
}

@media (max-height:480px) { 
	.footer-right{
	display:none;
  }
  
}

@media (max-height:662px) { 
	.centerUi{
	top:2px !important;
	}

	#uiContainer .name{
    font-size:32px;
    }
	
  #getonmobile{
display:none;
  }
}



@media (max-height:565px) { 
	#divBottom{
	display:none;
	}
}

@media (max-height:580px) and (max-width:1020px) { 
	.footer-left{
	display:none;
	}
}

@media (max-height:580px) and (max-width:1060px) { 
	.footer-right{
	display:none;
	}
}

@media (max-height:595px) { 

  	#newGame{
	display:none;
  }
 
}

@media (max-width:1220px) { 

  	#newGame{
	display:none;
  }
 
}