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

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

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

#pictures {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #pictures .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 100 ease-in-out; }
    #pictures .frame.current {
      opacity: 1; }

#timeline {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 0;
  width: 67%;
  margin: 1% 0 1% 32%;
  height: 3em;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px; }

#map {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 0;
  width: 30%;
  margin: 1%;
  height: 40%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px; }