@font-face { font-family: 'Odin Rounded'; src: url("odinRounded-bold.otf"); font-weight: 400; font-style: normal; font-stretch: normal; unicode-range: U+0020-00FE; }

body { font-family: "Odin Rounded", sans-serif; background-color: #5B5B5B; line-height: 1; font-size: 17px !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding:0px; margin: 0px; }

.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; width:100%; height:100%; bottom: 0px; left: 0px; border: 0; }

#bg {
    position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    background: url('roadbg64.jpg') no-repeat center / contain; min-height:100%; width: 100%; height: 100%; background-size:cover;
    background-image: url('roadbg64.jpg');
}

#gameContainer {
  width: 100vw;
  height: 100vh;
  display: block;
}
 

div#loadingBox {
  width: 400px;
  height: 31px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* margin-top: -10px; */
  margin-left: -200px;
  text-align: center;
}

/* Progress bar */

div#bgBar {
  position: absolute;
  width: 400px;
  margin-left: -50%;
  left: 50%;
  height: 100%;
  display: inline-block;
  background: url('loading_bar_bg400.png') no-repeat right / cover;
}

div#progressBar {
  left: 50%;
  position: absolute;
  margin-left: -49%;
  margin-top: 3px;
  width: 0px;
  height: 73%;  
  display: inline-block;
  background: url('loading_bar400.png') no-repeat left / cover; 
}

#spinner {
  left: 0%;
  position: absolute;
  width: 20px; 
  margin-top: 4px;
  margin-left: 5px;
  /* height: 40px;   */
  z-index: 10;
}

.rotate {
  animation: rotate 0.75s infinite linear;
  -webkit-animation: rotate 0.75s infinite linear;
}
.paused {
  animation-play-state: paused;
}

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

@-webkit-keyframes loading-percent-final
{
    0%{content:'90';}
    10%{content:'91';}
    20%{content:'92';}
    30%{content:'93';}
    40%{content:'94';}50%{content:'95';}60%{content:'96';}70%{content:'97';}80%{content:'98';}90%{content:'99';}
    100%{content:'100';}
}
@keyframes loading-percent-final
{0%{content:'90';}10%{content:'91';}20%{content:'92';}30%{content:'93';}40%{content:'94';}50%{content:'95';}60%{content:'96';}70%{content:'97';}80%{content:'98';}90%{content:'99';}100%{content:'100';}}

@-webkit-keyframes loading-bar-final{0%{-webkit-width:90%;}100%{-webkit-width:100%;}}
@keyframes loading-bar-final{0%{width:90%;}100%{width:100%;}}


#loadingInfo {
  color: #ffffff;
  letter-spacing: 2px;
  left: 0%;
  position: absolute;
  width: 100%;
  font-family: "Odin Rounded", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  margin-top: 5px;
  display: block;
  z-index: 10;
}

#loadingPercent {
  color: #ffffff;
  letter-spacing: 2px;
  left: 0%;
  position: absolute;
  width: 100%;
  font-family: "Odin Rounded", sans-serif;
  text-transform: uppercase;
  text-align: right;
  font-size: 20px;
  margin-top: 5px;
  display: block;
  z-index: 10;
}

#loadingPercent.in-final-stage:before
{
    content:'90';
    -webkit-animation:loading-percent-final 10s linear;
    animation:loading-percent-final 10s linear;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}

#loadingPercent.in-final-stage:after
{
    content:'%';
}

#progressBar.in-final-stage
{
    -webkit-animation:loading-bar-final 10s linear;
    animation:loading-bar-final 10s linear;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}



#popup-howtoplay {
	display: none;
}

#popup-tipsandtricks {
	display: none;
}

#popup-shop {
	display: none;
}


#discord {	
	position: absolute;
	left: 50%;
	top: 8px;
	z-index: 3;
	margin-left: -100px;
}

#discordgd {	
	position: absolute;
	left: 50%;
	top: 8px;
	z-index: 3;
	margin-left: -100px;
}

#discord a img {
	border-radius: 6px;
}

#discordgd a img {
	border-radius: 6px;
}

#discord img {
	border-radius: 6px;
}
#discordgd img {
	border-radius: 6px;
}


.tshirtshop {
	font-size: 20px;
}


.webgl-content78 * {border: 0; margin: 0; padding: 0}
.webgl-content78 {position: absolute; width:100%; padding-left: 300px; height:100%; bottom: 0px; left: 0px; border: 0; }

#gameContainer78 {
  width: 100%;
  height: 100vh;
  display: block;
}