html, body{
  position: relative;
  margin: 0; padding: 0;
  overflow: hidden;
  width:100%; height:100%;
  background-color: black;
}

#root{
  position: relative;
  width:100%; height:100%;
}

#header{
  position: absolute; z-index: 10;
  top:0; left:0;
  display: none;
}

#timelaps{
  position: relative; z-index: 5;
  width:100%; height:100%;
  overflow: hidden;
  // border: 1px solid blue;

  video#timelapsvid {
    position: absolute;
    top: 0; left: 0;
    width:100%; height:100%;
    // source:not(.1080p){
    //   display:none;
    // }

    @media (min-aspect-ratio: 16/9) {
      height: 200%;
      top: -50%;
    }

    @media (max-aspect-ratio: 16/9) {
      width: 200%;
      left: -50%;
    }


  }

}

#mapout{
  position: absolute; z-index: 9;
  bottom:0; left:0; width:23.5%; margin:1% 0.5% 1% 1%; height:10%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

#mapin{
  position: absolute; z-index: 9;
  bottom:0; left:25%; width:23.5%; margin:1% 0.5% 1% 0.5%; height:10%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

#timeline{
  position: absolute; z-index: 9;
  bottom:0; right:0; width:48%; margin:1% 1% 1% 0.5%; padding:0.5%; height:8.3%;
  background-color: rgba(15, 15, 15, 0.8);
  border-radius: 2px;

  .vis-timeline{
    border:none;
  }
  .vis-time-axis,
  .vis-background, .vis-background.vis-horizontal, .vis-background.vis-vertical,
  .vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom{
    border:none;
  }
  .vis-text{
    color:#827f7f;
  }

  .vis-custom-time.videotime{
    background-color: #2781cc;
  }
}

#teaser{
  display:none;
  position:absolute; z-index: 50;
  top:0; left:0; width:100%; height:100%;
  background-color: #000;
  background-image: url(../assets/lagare.png);
  background-size: cover;
  background-repeat: no-repeat;
  .layer{
    position: absolute;
    width:100%; height:100%;
    top:0; left:0;
    background-color: rgba(0,0,0,0.7);
  }
  .popup{
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    width:20%; left:50%; top:45%; margin-left: -10%;
    border-radius: 4px;
    h1{
      color: #fff;
      text-align: center;
      font-family: monospace;
    }
  }
}

body.teasing{
  #teaser{display:block;}
  #timelaps, #timeline, #mapin, #mapout{display: none;}
}