.webgl-content * {margin: 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:1001}

.webgl-content .logo, .progress {left: 50%; top: 60%; height: 100px; width: 600px;  z-index: 1020;}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
#wrapper .progress {left: 50%; top: 60%;  height: 100px; width: 600px; z-index: 1020}
#wrapper  .progress .empty {background: url('loadingBarEmpty.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block; 
-webkit-transition: width 0.4s;	transition: width 0.4s;}
#wrapper  .progress .full {background: url('loadingBarFull.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;
-webkit-transition: width 0.4s;	transition: width 0.4s;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
#wrapper .progress.Dark .empty { background-image: url('loadingBarEmpty.png'); }
#wrapper .progress.Dark .full { background-image: url('loadingBarFull.png'); }

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;} 
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;} 
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}


.loadingText{	
	position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	height: 30px;
	width: 320px;
	margin-top: 180px;
	text-align: center;
	font-size: 16px;
	font-family: Trajan Pro;
	font-weight: bold;
	color: white;	
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);  
	z-index: 1006;
}

body{
	overflow:hidden;
	height: 100%;	
}

#wrapper{
	position: absolute;
	top: 50%;
    left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(1);
	z-index: 1005;
}

.bg {
    /* The image used */
    background-image: url("frontpage_bg2.jpg");
	
	position: absolute;
    /* Full height */
    height: 100%;
	width: 100%;
	top: 0%;
	left: 0%;
	z-index: 1005;
	
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.titleio{
	display: flex;  
	position: absolute;
	justify-content: center; 
	align-items: center; 	
	top: 3%;
    left: 50%;	
	height: 149px;
    width: 600px;	
    transform: translate(-50%, 0);
	background-image: url('title2.png');
	background-repeat: no-repeat;
	z-index: 1011;
}

.login_menu{
	display: flex;	
	border-radius: 5px;
	border-style: solid;
	border-color: #81a25a;
	padding: 20px;
	position: absolute;
    height: 320px;
    width: 360px;	
    /*transform: translate(0, -50%);*/
    /*top: 50%;*/
    left: 0%;	
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1010;
}

.signup_menu{
	display: flex;	
	border-radius: 5px;
	border-style: solid;
	border-color: #81a25a;
	padding: 20px;
	position: absolute;
    height: 360px;
    width: 360px;	   
    left: 0%;	
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1010;
}

.changeLog{
	display: flex;	
	border-radius: 5px;
	border-style: solid;
	border-color: #81a25a;
	padding-top: 20px;	    
    width: 400px;	
	height: 360px;
   	flex-direction: column;
	overflow-y: scroll;
	background-color: rgb(25,25,25);
	z-index: 1012;
}

.changeLogBox{
	display: flex;		
    width: 400px;	
	height: 360px;	    	  
	flex-direction: column;		
	margin-bottom: 20px;
    top: 0%;
    left: 0%;		
	flex-direction: column;	
	z-index: 1011;
}

.terms, .privacy, .partners{
	display: flex;	
	border-radius: 5px;
	border-style: solid;
	border-color: #81a25a;
	padding: 20px;	
    height: 400px;
    width: 800px;	
   	flex-direction: column;
	overflow-y: scroll;
	background-color: rgb(25,25,25);
	z-index: 1012;
}

.termsBox, .privacyBox, .partnersBox{
	display: flex;	
	position: absolute;
    height: 400px;
    width: 800px;	
    transform: translate(-50%, -50%);
	align-items: center;
    top: 50%;
    left: 50%;	
	flex-direction: column;	
	z-index: 1012;
}

.botLink{
	padding: 20px;
	color: grey;
	cursor: pointer;
	font-decoration: underline;
	font-size: 16px;
}

.msg_box{
	display: flex;			
	position: absolute;
    height: 256px;
    width: 512px;	    
    top: 50%;
    left: 50%;		
	flex-direction: column;
	background-image: url('MsgBox.png');
	background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
	z-index: 1020;
}

.siteMsgIcon{
	width: 40px;
	height: 40px;	
	cursor: pointer;
	background-image: url('siteMsgIcon.png');
}

.siteMsgIcon:hover{
	background-image: url('siteMsgIconHover.png');
}

.discord-icon, .userrep-icon{
	display: flex;		
	height: 80px;
    width: 78px;
	top: 50%;
    left: 50%;		
	transform: scale(1);		
	z-index: 1010;
	-webkit-transition: transform 0.2s;
	transition: transform 0.2s;
}
.discord-icon:hover,.userrep-icon:hover{
	filter: brightness(110%);
	transform: scale(0.9);	
}

.discord-icon{	
	background-image: url('discord-icon.png');	
}

.userrep-icon{
	background-image: url('userreport_icon.png');	
}

.socials{
	display: flex;  
	position: absolute;
	right: 0%;
	top: 50%;
	flex-direction: column;
	/*border-radius: 5px;	
	border-style: solid;    
	border-color: #81a25a;	*/
    height: 160px;
    width: 80px;	    	
	transform: translate(0,-50%);
	background-color: rgba(0, 0, 0, 0.70);
	z-index: 1011;
}

.botLine{
	display: flex;  
	position: absolute;
	align-items: center;
	right: 50%;
	bottom: 0%;	
    height: 35px;
    width: 500px;	    	
	padding-left: 10px;
	padding-right: 10px;
	font-family: Tahoma;
	font-size: 18px;
	transform: translate(50%, 0%);
	background-color: rgba(0, 0, 0, 0.50);
	z-index: 1011;
}

.giveFeedback{
	display: flex;  	
	justify-content: center; 
	align-items: center; 
	color: white;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 25px;
	position: absolute;
    height: 80px;
    width: 300px;	  	
    top: 0%;
    right: 105%;			
	z-index: 1011;	
	animation-name: feedback;
	animation-duration: 2s;	
	animation-iteration-count: infinite;
}

/* Standard syntax */
@keyframes feedback {
  0%   {right: 100%;}
  50%  {right: 90%;}
  100%  {right: 100%;}  
}

.siteMsg{
	display: flex;  
	position: absolute;	
    width: 625px;	
	height: 180px;
	top: 50%;
	left: 50%;
	flex-direction: column;		
	background-color: rgba(0, 0, 0, 0.80);
	-webkit-transform: translate(-29vh,8vh) scale(1);
	-webkit-transform-origin: top left;
	border-radius: 5px;
	border-style: solid;
	border-color: #81a25a;		
	overflow-y: scroll;	
	z-index: 1011;
}

.siteMsgExpand{
	animation-name: expand;	
	animation-fill-mode: forwards;
	animation-duration: 0.5s;	
	animation-iteration-count: 1;
}

.siteMsgContract{	
	animation-name: contract;
	animation-direction: reverse;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;	
	animation-iteration-count: 1;
}

/* Standard syntax */
@keyframes expand {
  0%   {width: 180px; height: 50px; overflow: hidden;}  
  100%  {width: 625px; height: 180px; overflow-y: scroll;}  
}

/* Standard syntax */
@keyframes contract {
  0%   {width: 180px; height: 50px; overflow: hidden;}  
  100%  {width: 625px; height: 180px; overflow-y: scroll;}  
}

.rightBlock{
	display: flex;  		
	position: absolute;    
    width: 330px;	
	align-items: center;
	/*height: 520px;*/
    top: 20%;
    right: 15%;			
	flex-direction: column;		
	/*background-color: rgba(0, 0, 0, 0.70);*/
	z-index: 1011;
}

.gameInfo, .controlsInfo{
	display: flex;  	
    width: 400px;	
	flex-direction: column;		
	background-color: rgba(0, 0, 0, 0.80);
	border-radius: 5px;
	border-style: solid;
	border-color: #81a25a;
	z-index: 1011;
}

.controlsInfo{
	height: 210px;
}

.gameInfo{
	position: absolute;
	top: 50%;
    left: 50%;
	-webkit-transform: translate(30vh, -30vh) scale(1);
	-webkit-transform-origin: top left;
	height: 360px;
	overflow-y: scroll;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {    
  background: #2e2e2e;
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #f3b565; 
  border-radius: 10px;
  width: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffddb1; 
}

.rightBoxItem{
	width: 100%;
}

.rightBoxItemIcon{
	
}

.rightBoxItemTitle{
	display: flex;
	align-items: center; 
	color: #cea949;
	font-family: Trajan Pro;
	font-weight: bold;
	font-size: 20px;
	padding: 5px;
}

.rightBoxItemTitleBig{
	display: flex;
	align-items: center; 
	color: #cea949;
	font-family: Trajan Pro;
	font-weight: bold;
	font-size: 22px;
	padding: 5px;
}

.rightBoxItemBody{
	color: white;
	font-family: Tahoma;
	padding-left: 40px;
	padding-right: 40px;
	color: #81a25a;
	font-size: 18px;
	margin-bottom: 10px;
}

.text{
	padding-left: 10px;
}

.leftBox{
	display: flex;  		
	position: absolute;    
    width: 400px;	    	
    top: 50%;
    right: 50%;	
	-webkit-transform: translate(-30vh, -30vh) scale(1);
	-webkit-transform-origin: top right;
	flex-direction: column;	
	z-index: 1011;
}

.loginSignUpBox{
	display: flex;  	
	position: absolute;	
	margin-bottom: 20px;
    width: 400px;	    	
	height: 360px;
    top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -30vh);	
	-webkit-transform-origin: center top;
	flex-direction: column;	
	z-index: 1011;
}

.bottomBox{
	display: flex;  		
	position: absolute;    
    width: 728px;	
	bottom: 7%;
    left: 50%;		
	flex-direction: column;		
	align-items: center; 
	z-index: 1011;
}

#preroll{
	display: flex;  	
	position: absolute;    
	top: 50%;
	left: 50%;
	/*transform: translate(-50%,-50%);*/
}

#scrims-io_728x90{
	display: flex;  
	border-radius: 5px;
	padding: 5px;	
    height: 90px;
    width: 728px;				
	top: 100%;
	left: 50%;
	/*transform: translate(-50%,-100%);*/
	background-color: rgba(0, 0, 0, 0.47);
	z-index: 1010;
}
.move_to_top{
	top: 0% !important;
	left: 0% !important;
	/*transform: translate(550px,30px) !important;	*/
}
.move_to_center{
	top: 0% !important;
	left: 0% !important;
	/*transform: translate(200px,300px) !important;	*/
}
.noevents{
	pointer-events: none !important;
}

#scrims-io_300x250{
	display: flex;  
	border-radius: 5px;
	justify-content: center; 
	align-items: center; 
	padding: 5px;
	position: absolute;
    height: 260px;
    width: 320px;	
    -webkit-transform: translate(30vh,5vh) scale(1);
	-webkit-transform-origin: top left;
    top: 55%;
    left: 50%;
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1010;
}

a:link, a:visited{
	color: white;
	font-family: Tahoma;
	/*font-weight: bold;*/
	font-size: 16px;
	text-decoration: underline;
}

.Title{	
	text-align: left;
	font-size: 22px;
	font-family: Tahoma;
	color: white;	
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  
}

.error{	
	display: flex; 	
	position: absolute;
    height: 30px;
    width: 320px;	
    transform: translate(-50%, 160px);
    top: 50%;
    left: 50%;	
	/*background-color: rgba(0, 0, 0, 0.47);*/
	z-index: 1010;
	
	text-align: left;
	font-size: 22px;
	font-family: Tahoma;
	color: #fff300;	
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  
}

.buttonLogin, .buttonMsg, .buttonCLClose{
	display: flex;
	justify-content: center; 
	align-items: center;
	font-size: 40px;
	font-weight: bold;
	font-family: Tahoma;	
	color: white;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  	
	background-image: url('button2_bright.png');
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
	height: 60px;
	width: 100%; 	
	border: 0 solid #b9b9b9;	
}

.buttonCLClose, .buttonMsg{		
	height: 43px;
	width: 128px; 
	font-size: 25px;					
}

.buttonMsg{		
	bottom: 10%;
	left: 50%;	
	position: absolute;	
	transform: translate(-50%, 0%);
}

.buttonLogin:hover , .buttonMsg:hover, .buttonCLClose:hover{
	background-image: url('button2_highlight.png');
}
.buttonLogin:active , .buttonMsg:active, .buttonCLClose:active{
	background-image: url('button2.png');
}

.msg_text{
	display: flex;	
	position: absolute;
	top: 15%;
	left: 50%;
	width: 80%;
	transform: translate(-50%, 0%);	
	color: white;	
	font-family: Tahoma;
	font-weight: bold;
	font-size: 16px;			
}

.close_cred{
	display: flex; 	
	justify-content: center; 	
	align-items: center; 
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 20px;
	color: white;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 16px;
	text-decoration: underline;
}

.inactive{	
	display: flex;
	justify-content: center; 
	align-items: center;
	font-size: 30px;
	font-weight: bold;
	font-family: Tahoma;	
	color: white;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  
	background-color: #98d395;
	background: linear-gradient(#767676, #424242);
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
	height: 60px;
	width: 100%; 	
	border: 0 solid #b9b9b9;	
}

.user-input {		
	box-sizing: border-box;	
    color: white;	
	font-size: 20px;
	font-family: Tahoma;	
	height: 40px;
	width: 100%;
	padding: 14px 8px;
	border-radius: 4px;
	border: 1px solid black;
	background-color: #424242FF;    
	outline: none;
	margin-top: 5px;
	margin-bottom: 10px;
    user-select: none;
}
.pass-input {		
	box-sizing: border-box;	
    color: white;	
	font-size: 20px;
	font-family: Tahoma;	
	height: 40px;
	width: 100%;
	padding: 14px 8px;
	border-radius: 4px;
	border: 1px solid black;;
	background-color: #424242FF;    	
	outline: none;
	margin-top: 5px;
	margin-bottom: 10px;	
    user-select: none;
}

.lds {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 60px;
  /*left:50%;
  transform: translate(-50%, 0);*/
}
.lds div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: lds 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

.opacity-zero{
	opacity: 0 !important;
}
.zindex-th{
	z-index: -100 !important;	
}