.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%);}

.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;}

.matecocido-background{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
    background: #759b23
}

.top-image{
    position: absolute; 
    top: 10vh; 
    height:30vh; 
    transform: translate(-50%, 0%);
}

.game-title{
    position: absolute; 
    top: 50vh;
    left: 50vw; 
    transform: translate(-50%, -100%);
    color: #d3c211; 
    font-size: 7.5vh;
}

.game-version{
    position: absolute; 
    top: 0vh;
    left: 100vw; 
    transform: translate(-110%, 10%);
    color: #d3c211; 
    font-size: 4vh;
}

.loading-text{
    position: absolute; 
    top: 60vh;
    left: 50vw;
    transform: translate(-50%, -100%);
    color: #FFFFFF; 
    font-size: 5vh;
}

.bottom-image{
    position: absolute; 
    bottom: 5vh; 
    height: 8vh; 
    transform: translate(-50%, 0%);
}

.loader-bar{
    position: absolute; 
    top: 75vh;
    left: 50vw; 
    padding-top: 1vh;
    padding-right: 1vh;
    padding-bottom: 1vh;
    padding-left: 1vh;
    height: 3vh; 
    width: 50vw; 
    transform: translate(-50%, -100%);
    background: #9fb46f;
}

.loader-bar-fill{
    width: 0%; 
    height: 100%; 
    background: #FFFFFF;
}

.loader-bar-label{
    float:right;
    transform: translate(0px, -125%);
    color: #FFFFFF; 
    font-size: 5vh;
}

.loader {
    position: absolute; 
    top: 57.5vh;
    left: 60vw;
    transform: translate(-50%, -50%);

    width: 48px;
    height: 48px;
    display: inline-block;
    border: 4px solid #FFF;
    box-sizing: border-box;
    animation: fill 2s linear infinite alternate;
    color: #d3c211;
    border-radius: 0 0 4px 4px;
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid #FFF;
    width: 20px;
    height: 25px;
    border-radius: 0 4px 4px 0;
  }
  
  @keyframes fill {
    0% {
      box-shadow: 0 0  inset;
    }
    100% {
      box-shadow: 0 -48px inset;
    }
  }