@font-face {
  font-family: "FreeSansBold";
  src: url(FreeSansBold.otf)
  
}



.tekstivarv {
 color:rgba(255, 255, 255, 0.9);
 position: fixed;
 top: 7vh;
 left: 44vw;
 font-size: 1rem;
 letter-spacing: 2px;
 word-spacing: 10px;
}

.content2{
  position:relative;
  top:-2200px;
  mix-blend-mode: screen;
  size: cover;
  opacity: 10%;
  pointer-events: none;

}

.maapind {
  mix-blend-mode: soft-light;
  size:cover;
  width: 1920px;
  position:absolute;
  z-index: 1;
  opacity: 100%;
  pointer-events: none;
  top: -10vh;
}



body {
  font-family: "FreeSansBold";
  height: 30vh;
  overflow: hidden;
    background-image: url("background luhem.jpg");
    background-color: #734939;
    background-size: cover;
    background-size: auto;
   font-family:'freesansbold'
 
     }   

     .model-viewer{
      width: 400px;
      height: 400px;
      position: relative; 
      left: 62vw;
      bottom: -34vh;
      margin: 0px !important;
      padding: 0px;
      mix-blend-mode: hard-light;
      opacity: 80%;
    
      
      }

      .klassules{
        top: -100vh;

      }
      .model-viewerleft-container{
        width: 300px;
        height: 300px;
        position: relative; 
        z-index: 2;
        left: 30vw;
        bottom: -20vh;
        margin: 0px !important;
        padding: 0px;
        mix-blend-mode: hard-light;
      }

      .kolmasmudel{
        width: 500px;
        height: 500px;
        position: relative; 
        z-index: 2;
        left: 0vw;
        bottom: 200px;
        margin: 0px !important;
        padding: 0px;
        mix-blend-mode: hard-light;
        opacity:80%;
      
      }

      .neljasmudel{
        width: 500px;
        height: 500px;
        position: relative; 
        z-index: 2;
        left: 10vw;
        bottom: 200px;
        margin: 0px !important;
        padding: 0px;
        mix-blend-mode: hard-light;
      
      }

      .mees{
        width: 300px;
        height: 300px;
        position: relative; 
        z-index: 2;
        left: 50vw;
        top: -80vh;
        margin: 0px !important;
        padding: 0px;
        mix-blend-mode: hard-light;
      
      }





      .content {
        top:-174vh;
        position: relative;
        z-index: 3;
        size: cover;
        pointer-events: none;
        mix-blend-mode: overlay;
        
      
      }
      .content video {
        width: 100%;
        display: block;
        opacity: 40%;
        }

      
     .url {
        font-size: "32px";
        color: white;
        position: relative;
        z-index: 4;
        Left: 4vw;
        top: 4vh;
        text-decoration: underline;
      }   
      
      :not(:defined) > * {
        display: none;
      }
      
      
      
      .progress-bar.hide {
        visibility: hidden;
        transition: visibility 0.3s;
      }
      
      .update-bar {
        background-color: rgba(255, 255, 255, 0.9);
        width: 0%;
        height: 100%;
        border-radius: 25px;
        float: left;
        transition: width 0.3s;
      }
      
      #ar-button {
        background-image: url(ar_icon.png);
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 12px 50%;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        bottom: 16px;
        padding: 0px 16px 0px 40px;
        font-family: Roboto Regular, Helvetica Neue, sans-serif;
        font-size: 14px;
        color:#4285f4;
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
        border: 1px solid #DADCE0;
      }
      
      #ar-button:active {
        background-color: #E8EAED;
      }
      
      #ar-button:focus {
        outline: none;
      }
      
      #ar-button:focus-visible {
        outline: 1px solid #4285f4;
      }
      
      @keyframes circle {
        from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
        to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
      }
      
      @keyframes elongate {
        from { transform: translateX(100px); }
        to   { transform: translateX(-100px); }
      }
      
      model-viewer > #ar-prompt {
        position: absolute;
        left: 50%;
        bottom: 60px;
        animation: elongate 2s infinite ease-in-out alternate;
        display: none;
      }
      
      model-viewer[ar-status="session-started"] > #ar-prompt {
        display: block;
      }
      
      model-viewer > #ar-prompt > img {
        animation: circle 4s linear infinite;
      }