html,body,div,canvas { margin: 0; padding: 0; }

.userIdText{
  width: 100%;
  position: absolute; top: 50%;
  margin-top: 320px;
  margin-left: 0px;
  text-align: center;
  color: #D8BEAA;
}

.bg1{
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0; padding: 0;
	background: url(bg2.png) 0 0 no-repeat; 
  background-size: 100%;
}

.bg2{
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0; padding: 0;
	background: url(bg1.png) 0 0 no-repeat;
  background-size: 100%;
}

.bg3{
	position: absolute;
	width: 100%;
	height: 100%;
  margin: 0;
  padding: 0;
	background: white 0 0 no-repeat; background-size: 100%;
}

.p_wheel{
	position: absolute;
	margin: 0; padding: 0;

  width: 100%;
  height: 100%;
/*	top: 70%;
  left: 50%;
	transform: translate(-50%, -50%);*/
}

.wheel{
	/*animation:spin 1s linear infinite;*/
  width:25%!important;
  height:auto!important;
  margin-left: 47%;
  margin-top: 50%;
}

.loadingBox{
/*  width:25%!important;
  height:auto!important;*/
/*  margin-left: 47%;
  margin-top: 50%;*/
  width: 100%;
  position: absolute;

  margin-top: 3%;
  text-align: center;
}
  
.loadingInfo{
  color: #FF3E94FF;
  letter-spacing: 1px;
  position: absolute;
  width: 100%;
  font-family: "Monaco", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 30px;
  margin-top: 40%;
  top: 30px;
}

.bgBar{
  border-radius: 10px;
  position: absolute;
  width: 250px;
  margin-left: -140px;
  margin-top: 40%;
  left: 50%;
  height: 14px;

  display: block;
  background-color: black;
}

.progressBar{
  left: 50%;
  position: absolute;
  margin-left: -140px;
  margin-top: 40%;
  width: 0px;
  height: 7px;

  background: linear-gradient(to bottom, #FF3E94FF, white);
  border-radius: 50px 50px 0px 0px;
}

.progressBar2{
  left: 50%;
  position: absolute;
  margin-left: -140px;
  margin-top: 40%;
  top: 7px;
  width: 0px;
  height: 7px;
  background-color: #FF3E94FF;
  border-radius: 0px 0px 50px 50px;
}

.bgIMG{
  position: absolute; 
  margin-left: -150px;
  margin-top: 40%;
  top: -9px;
  width:270px;
  height: 31px;
}

#progress_bg{
  width:25%!important;
  height:auto!important;
  margin-left: 38%;
  margin-top: 50%;
}

#progress_fg{
  width:25%;
  height:auto;
  margin-left: 38%;
  margin-top: 50%;
}

#progress_bar{
  width:25%;
  height:auto;
  margin-left: 38%;
  margin-top: 50%;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#logo{
	position: absolute;
/*	top: 30%;
  left: 50%;*/

  width: 100%;
  height: 100%;

	/*transform: translate(-50%, -50%);*/
	margin: 0; padding: 0;
}

#bg{
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0; padding: 0;
	background: url(bg.png) 0 0 no-repeat; background-size: 100%;
}

#brd{
	position: absolute;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  user-select: none;
}

#edge_brd{
	position: absolute;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	user-select: none;
}

#l_disabled{
  position: absolute;
  top: 40%; left: -5%;
  user-select: none;
  width: 0px;
  content:url("s-p-l.png");
}

#r_disabled{
  position: absolute;
  top: 40%; left: 99%;
  user-select: none;
  width: 0px;
  content:url("s-p-r.png");
}

 #p_right{
	position: absolute;
	top: 40%; left: 99%;
	user-select: none;
  content:url("s-p-r.png");
}

#p_left{
	position: absolute;
	top: 40%; left: -5%;
	user-select: none;
  content:url("s-p-l.png");
}

#p_right:not(:active){
	animation: bounceIn .75s both;
}


#p_left:not(:active){
	animation: bounceIn .75s both;
}

.logo_in{
	animation: bounceIn .75s both;
  width:25%!important;
  height:auto!important;
  margin-left: 36%;
  margin-top: 8%;
}

/*.logo{
	animation: bounceIn .75s both;
  animation-iteration-count:infinite;

}*/

.logo_out{
	animation: bounceOut .75s both;
  width:25%!important;
  height:auto!important;
  margin-left: 36%;
  margin-top: 8%;
}

.hide{
	width: 0px;
}

#hide{
  display: none;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: scale3d(1.7, 1.7, 1.7);
  }

  20% {
    transform: scale3d(1, 1, 1);
  }

  40% {
    
    transform: scale3d(1.1, 1.1, 1.1);
  }

  60% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }

  80% {
    transform: scale3d(1,1,1);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}


/*@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}*/

@keyframes bounceOut {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    /*opacity: 0;*/
    transform: scale3d(1, 1, 1);
    /*transform: scale3d(.3, .3, .3);*/
  }

  20% {
  	transform: scale3d(.97, .97, .97);
    /*transform: scale3d(1.1, 1.1, 1.1);*/
  }

  40% {
  	transform: scale3d(1.03, 1.03, 1.03);
    /*transform: scale3d(.9, .9, .9);*/
  }

  60% {
    opacity: 1;
    transform: scale3d(.9, .9, .9);
    /*transform: scale3d(1.03, 1.03, 1.03);*/
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    transform: scale3d(0, 0, 0);
    /*transform: scale3d(1, 1, 1);*/
  }
}


.template .template-wrap { 
	position: absolute;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

/*.webgl-content * {border: 0; margin: 0; padding: 0}*/
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}




#game_container{
	width: 0px;
  height: 0px;
  -webkit-user-drag: none;
}




.webgl-content .logo, .progress  {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-user-drag: none; }