HeHe-Centiped/www/public_html/css/styles.css

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; }
  #timelaps video#timelapsvid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    @media (min-aspect-ratio: 16 / 9) {
      #timelaps video#timelapsvid {
        height: 200%;
        top: -50%; } }
    @media (max-aspect-ratio: 16 / 9) {
      #timelaps video#timelapsvid {
        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; }
  #timeline .vis-timeline {
    border: none; }
  #timeline .vis-time-axis,
  #timeline .vis-background, #timeline .vis-background.vis-horizontal, #timeline .vis-background.vis-vertical,
  #timeline .vis-panel.vis-center, #timeline .vis-panel.vis-top, #timeline .vis-panel.vis-bottom {
    border: none; }
  #timeline .vis-text {
    color: #827f7f; }
  #timeline .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; }
  #teaser .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7); }
  #teaser .popup {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    width: 20%;
    left: 50%;
    top: 45%;
    margin-left: -10%;
    border-radius: 4px; }
    #teaser .popup h1 {
      color: #fff;
      text-align: center;
      font-family: monospace; }

body.teasing #teaser {
  display: block; }

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