/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */
@import  url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    margin: 0px;
    overflow: hidden;
}

#v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


.text {
    position: fixed;
    font-size: 175%;
    left: 43.5%;
    top: 65%;
    color: #fbae17;
    display: inline-block;
    margin-left: 14px;
  }



.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

.fullscreen-open {
    background-image: url('media/fullscreen_open.svg');
}

.fullscreen-close {
    background-image: url('media/fullscreen_close.svg');
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

body {
    text-align: center;
   
  }
  
  * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  
  /* The loader container */
  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    
    width: 200px;
    height: 100px;
    
    margin-top: -100px;
    margin-left: -100px;
    
    perspective: 1000px;
    transform-style: preserv3d;
  }
  
  .loader--reflect {
    margin-top: 0;
  }
  
  .loader--reflect:after {
    content: '';
    position: absolute;
    top: 0;
    left: -25%;
    
    width: 150%;
    height: 110%;
    
    background: linear-gradient(0deg, rgb(0, 0, 0), rgb(35, 35, 35) 20%, rgba(0, 0, 0, 0.3));
  }
  
  .preloader_div {
      position:fixed;
      width: 100%;
      height: 100%;
      background-color: #000000;
      z-index: 5;
  }
  /* The bar */
  .bar {
    position: absolute;
    bottom: 0;
    left: 0;
  
    width: 20px;
    height: 100px;
  
    background-color: #1e3f57;
    
    transform: scaleY(0);
    transform-style: preserve3d;
  
    animation: bar 3s cubic-bezier(.81,.04,.4,.7) infinite;
  }
  
  .bar:nth-child(2) {
    left: 20px;
    
    background-color: #264a63;
    
    animation-delay: 50ms;
  }
  
  .bar:nth-child(3) {
    left: 40px;
    
    background-color: #2d566f;
    
    animation-delay: 100ms;
  }
  
  .bar:nth-child(4) {
    left: 60px;
    
    background-color: #35617a;
    
    animation-delay: 150ms;
  }
  
  .bar:nth-child(5) {
    left: 80px;
    
    background-color: #3d6d86;
    
    animation-delay: 200ms;
  }
  
  .bar:nth-child(6) {
    left: 100px;
    
    background-color: #447892;
    
    animation-delay: 250ms;
  }
  
  .bar:nth-child(7) {
    left: 120px;
    
    background-color: #4c849e;
    
    animation-delay: 300ms;
  }
  
  .bar:nth-child(8) {
    left: 140px;
    
    background-color: #548fa9;
    
    animation-delay: 350ms;
  }
  
  .bar:nth-child(9) {
    left: 160px;
    
    background-color: #5c9bb5;
    
    animation-delay: 400ms;
  }
  
  .bar:nth-child(10) {
    left: 180px;
    
    background-color: #63a6c1;
    
    animation-delay: 450ms;
  }
  
  .loader--reflect .bar {
    animation-name: bar-reflect;
  }
  
  @keyframes bar {
    0% {
      transform: rotateZ(-180deg) rotateX(-360deg);
    }
    75%,100% {
      transform: rotateZ(0) rotateX(0);
    }
  }
  
  @keyframes bar-reflect {
    0% {
      transform: rotateZ(180deg) rotateX(360deg);
    }
    75%,100% {
      transform: rotateZ(0) rotateX(0);
    }
  }