@media only screen and (orientation: portrait) {

  #container {
      width: 100vw;
      height: 100vh;
      margin: 0;
      position: absolute;
  }
    
  .group {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  #overlay1 {
    position: absolute;
    z-index: 10;
    width: 90%;
    height: 28%;
    left: 5%;
    top: 155.5%;
  }

  #overlay2 {
    position: absolute;
    z-index: 10;
    width: 60%;
    height: 40%;
    left: 20%;
    top: 102%;
    text-align: center;
  }

  #overlay3 {
    position: absolute;
    z-index: 10;
    width: 24%;
    height: 5%;
    left: 38%;
    top: 272%;
}

.caption {
  display: inline-block;
  text-align: center;
  font-size: 2.5em;
  margin: 0;
  padding: 4px 6px;
  border: 2px solid #000;
  background: #fff;
}

.zero {
    margin: 0;
}

.shift-l,
.shift-r {
    margin: -8px 0 0 0;
}

}

@media only screen and (orientation: landscape) {
  #container {
      width: 100vw;
      height: 100vh;
      margin: 0;
      position: absolute;
  }

  .group {
    float: left;
    width: 33%;
    height: 100%;
    overflow: hidden;
  }

  #overlay1 {
    position: absolute;
    z-index: 10;
    width: 45%;
    height: 41%;
    left: 44%;
    top: 54%;
}

  #overlay2 {
    position: absolute;
    z-index: 10;
    width: 13%;
    height: 36%;
    left: 43.5%;
    top: 5.5%;
    text-align: center;
}

  #overlay3 {
    position: absolute;
    z-index: 10;
    width: 7%;
    height: 4.5%;
    left: 5.5%;
    top: 57%;
}

.caption {
  display: inline-block;
  text-align: center;
  font-size: 1.2em;
  margin: 0;
  padding: 4px 6px;
  border: 2px solid #000;
  background: #fff;
}

.zero {
    margin: 0;
}

.shift-l {
    margin: 0 0 0 16px;
}

.shift-r {
    margin: 0 0 0 -8px;
}


}

* {
    box-sizing: border-box;
}

body {
	background-color: #000000;
	margin: 0;
}

.group img,
#overlay1 img,
#overlay2 img,
#overlay3 img {
    width: 100%;
    height: 100%;
}