@font-face {
    font-family: 'AkzidenzGrotesk';
    src:  url('../_fonts/AkzidenzGrotesk-Bold.woff2') format('woff2')
  }

  @font-face {
    font-family: 'OptimaDisplay-light';
    src:  url('../_fonts/OptimaDisplay-Light.woff2') format('woff2')
  }

  @font-face {
    font-family: 'OptimaDisplay-roman';
    src:  url('../_fonts/OptimaDisplay-Roman.woff2') format('woff2')
  }



    body { height: 100vh; margin: 0; padding: 0; overflow: hidden; font-family:OptimaDisplay-roman; background: #000;}

    #inner-wrapper{ height: 80vh;}

    #video-assets{height: 100vh;  position: relative;}

    .mask  {
    -webkit-mask-image:url(../assets/mask-orb-video.png);
    -webkit-mask-position:center center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:cover;

    mask-image:url(../assets/mask-orb-video.png);
    mask-position:center center;
    mask-repeat:no-repeat;
    mask-size:cover;
  }
  #dialog {
    position: absolute;
    z-index: 5800;
    background: #000;
    color: #fff;
    display: none;
    height: 30vh;
    opacity: 0.9;
    top: 30vh;
    padding: 8vh;
    box-sizing: border-box;
    width: 80vw;
    left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;

  }





  #dialog #actions{ margin: auto; margin-top: 2vh; margin-bottom: 2vh;}
  #dialog { font-size: 40px;}
  #dialog .btn{cursor: pointer; display: inline-block; padding: 10px; margin: 10px; font-size: 40px; border: 1px #fff solid;}
  #game-tutorial { position: absolute; z-index: 1500; height: 100vh;  display: none; background: #000;}

  #overlay {display: none; position: absolute; z-index: 2500; height: 15vh; padding-top: 5vh; box-sizing: border-box;}
  #overlay #logo-game{ width: 50%; margin: auto;}
  #overlay #logo-brand{width: 40%; margin: auto; margin-bottom: 3vh;}
  #overlay img{display: block;}

  #game-play { position: absolute; z-index: 1000; height: 80vh;  display: none;}

  #video-game-complete {position: absolute;
      height: 100vh;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 4000;
}
#video-game-complete-content1, #video-game-complete-content2 {position: absolute;
    height: 80vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 4500;
    padding: 35% 10%;
    box-sizing: border-box;;
}
  #game-complete { position: absolute;
z-index: 2300;
height: 100vh;
display: none;
padding-top: 30vh;
color: #fff;
font-size: 3vh;

text-align: center;
width: 100%;
box-sizing: border-box;;
}

h1{line-height: 5vh;}



    #orb-container1 { position: absolute; top: 38%; left: 56%; z-index: 150; cursor: pointer;}
    #orb-container2 { position: absolute; top: 58%; left: 75%; z-index: 150;  cursor: pointer;}
    #orb-container3{ position: absolute; top: 76%;left: 45%; z-index: 150;   cursor: pointer;}
    #orb-container4 { position: absolute; top: 61%; left: 6%; z-index: 150;   cursor: pointer;}
    #orb-container5 { position: absolute;  top: 40%; left: 19%; z-index: 150;  cursor: pointer;}

    #highlight1, #highlight2, #highlight3, #highlight4, #highlight5 { position: absolute; top: 0;
      left: 0; z-index: 100; cursor: pointer;}
#video-orb1,#video-orb2,#video-orb3, #video-orb4, #video-orb5
{ position: absolute; top: 0;
 left: 0; z-index: 100; cursor: pointer;}

    .orb-highlight {display:none;}

    #instruction { position: absolute;
      top: 25%;
      width: 100%;
      font-size: 3vh;
      z-index: 130;
      color: #fff;
    }

    #instruction h1{ margin: 0; font-size:4vh;}


    #video-game-play {position: absolute; z-index: 0;}

    #scannedID {position: absolute; z-index: 0; display: none;}

    #dispense{ position: absolute; z-index: 4000; cursor: pointer; background: #ece2c9; left: 10px; top:10px; padding: 10px;}