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; }