@font-face {
    font-family: 'NeuzeitGro';
    src: url('fonts/NeuzeitGro.woff') format('woff2');
    font-weight: normal;
    font-style: normal;
}

#element-title {
    position: fixed;
    bottom: 50%;
    left: 0px;
    z-index: 100;
    text-align: center;
    width: 100vw;
    color: #3399ff;
    font-size: 2.5em;
    font-family: 'NeuzeitGro', sans-serif;
    text-transform: uppercase;
    padding-bottom: 50px;
}

#popup-overlay {
    display: none;
    z-index: -100;
}

.overlay-bg {
    position: fixed;
    z-index: 150;
    left: 0;
    top:0;
    width: 100vw;
    height: 100vh;
    background-color: #D9D9D9;
    opacity: 66%;
}
@media only screen and (orientation: landscape) {
    #popup-inner {
        position: fixed;
        z-index: 200;
        left: 0;
        top:0;
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
    }

    #overlay-side-l { grid-area: 1 / 1 / 2 / 2;}

    #popup { 
        grid-area: 1 / 2 / 2 / 10;
    }
    #overlay-side-r { grid-area: 1 / 10 / 2 / 11;}

    #popup-padding {
        height: 100vh;
        width: 100%;
    }

    .side-button>img {
        width: 80%;
    }

    #popup-iframe {
        box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 15px;
    }
}

@media only screen and (orientation: portrait) {
    #popup-inner {
        position: fixed;
        z-index: 200;
        left: 0;
        top:0;
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(12, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
    }

    #overlay-side-l { 
        grid-area: 1 / 1 / 2 / 2;
        background-color: lightgray;
    }

    #popup {
        grid-area: 2 / 1 / 13 / 3; 
    }
    #overlay-side-r { 
        grid-area: 1 / 2 / 2 / 3;
        background-color: lightgray;
    }

    #popup-padding {
        height: 100vh;
        width: 100%;
    }
    .side-button>img {
        width: 20%;
    }

    #popup-iframe {
        box-shadow: none;
    }
}

#popup-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: white;    
}

.full-margin {
    /* transition: margin-top 2s ease 100; */
    margin-top: 100%;
}

iframe.no-margin{
    animation-duration: 1s;
    animation-name: shrink;
    animation-fill-mode: forwards ;
  }

@keyframes shrink {
    0%   {margin-top: 100%;}
    100% {margin-top: 0%;}
}

.side-button {
    width: 100%;
    text-align: center;
    font-size: 2em;
    padding: 20px 0px;
}


.visually-hidden {
    display: none;
  }
  
  #permissions-wrapper {
      display: none;
      position: fixed;
      top: 0;
      height: 100vh;
      width: 100vw;
      color: white;
      background-color: black;
      font-family: 'NeuzeitGro', sans-serif;
      padding: 10px;
  }
  
  .info {
      border: white 2px solid;
      margin: 30px 10px;
      padding: 10px;
  }
  
  .error-title {
      padding: 0 10px;
      font-size: 40px;
      display: flex;
      justify-content: center;
      font-family: 'NeuzeitGro', sans-serif;
  }
  
  #camera-error, #location-error {
    /* display: none; */
    font-size: 1em;
    font-family: 'NeuzeitGro', sans-serif;
  }
  
  #camera-links a {
      color: inherit;
  /*    font-size: 1.3em;*/
      line-height: 2em;
  }
  
  #location-links a {
      color: inherit;
  /*    font-size: 1.3em;*/
      line-height: 2em;
  }

  /* instructions */

  #instructions-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300
  }

  .scan-instructions {
    width: 100vw;
    height: 100vh;
    background: white;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}

.tap-instructions {
    width: 100vw;
    height: 100vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.marker-wrapper {
    align-self: stretch;
    height: 100;
    position: relative;
    padding: 20px;
}

.marker-img {
    width: 100;
    height: 100;
    top: 0px;
    position: absolute;
    padding: 20px;
}

.marker-img-l {
    left: 0px;
}

.marker-img-r {
    right: 0px;
}

.instruction-text {
    text-align: center;
    color: black;
    font-size: 1.25em;
    font-weight: 700;
    word-wrap: break-word;
    font-family: 'NeuzeitGro', sans-serif;
    padding: 0 100px;
}

.instruction-text-select {
    margin-top: 75px;
    color: #3399ff;
    font-size: 1.5em;
    font-weight: 700;
    word-wrap: break-word;
    font-family: 'NeuzeitGro', sans-serif;
    text-align: center;
    text-shadow: 1px 1px 2px #5d5d5d;
}

.cursor-image-blue {
    width: 100px;
    height: 100px;
}