/* style/index.css */
@font-face {
  font-family: "din-1451-lt-pro-engschrift";
  src:
    url(https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),
    url(https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),
    url(https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
.tk-din-1451-lt-pro-engschrift {
  font-family: "din-1451-lt-pro-engschrift", sans-serif;
}
body {
  margin: 0;
  font-family: "din-1451-lt-pro-engschrift";
}
.U1 {
  background-color: #7dad4c;
}
.U2 {
  background-color: #da421e;
}
.U3 {
  background-color: #007a5b;
}
.U4 {
  background-color: #f0d722;
}
.U5 {
  background-color: #7e5330;
}
.U6 {
  background-color: #bdabcf;
}
.U7 {
  background-color: #528dba;
}
.U8 {
  background-color: #224f86;
}
.U9 {
  background-color: #f3791d;
}
.container {
  z-index: 0;
}
.scroller {
  scroll-snap-type: y mandatory;
  scroll-padding: 20vh;
  background-color: black;
}
.scroller section {
  scroll-snap-align: start;
  display: flex;
}
.s-U1 section:nth-child(2n) {
  background-color: #4c6dad;
}
.s-U2 section:nth-child(2n) {
  background-color: #4166ff;
}
.s-U3 section:nth-child(2n) {
  background-color: #7a005b;
}
.s-U4 section:nth-child(2n) {
  background-color: #22d7f0;
}
.s-U5 section:nth-child(2n) {
  background-color: #8fa9d9;
}
.s-U6 section:nth-child(2n) {
  background-color: #abcfbd;
}
.s-U7 section:nth-child(2n) {
  background-color: #db528d;
}
.s-U8 section:nth-child(2n) {
  background-color: #868622;
}
.s-U9 section:nth-child(2n) {
  background-color: #1d79f3;
}
.camera-info {
  margin-left: 65vw;
  margin-top: 4vh;
}
.header {
  z-index: 2;
  height: 20vh;
  width: 100vw;
  position: fixed;
  display: flex;
  background-color: black;
}
.line {
  position: absolute;
  z-index: 1;
  left: 50vw;
  width: 1vw;
  top: 22vh;
}
.portrait {
  margin-top: 3vh;
}
.landscape {
  margin-top: 13vh;
}
.first-img {
  margin-top: 33vh !important;
}
.segment-left {
  position: relative;
  left: 48vw;
  width: 3vw;
  height: 2vh;
  top: 40vh;
}
.text {
  font-size: 1.9em;
  position: absolute;
  left: 0;
  top: 0;
}
.segment-right .text {
  margin-left: 4vw;
}
.segment-right {
  position: relative;
  left: 50vw;
  width: 3vw;
  height: 2vh;
  top: 40vh;
}
.icons {
  margin-left: 2vw;
  margin-top: 14vh;
  cursor: pointer;
}
.image-right img,
.image-left img {
  max-width: 40vw;
  max-height: 75vh;
}
.image-right {
  position: relative;
  left: 3vw;
}
.image-left {
  position: relative;
  left: 53vw;
}
.section {
  width: 99.1vw;
  height: 80vh;
  background-color: whitesmoke;
}
.first-portrait {
  margin-top: 22vh !important;
}
.first-landscape {
  margin-top: 33vh !important;
}
@media only screen and (max-width: 600px) {
  .line {
    left: 1vw !important;
  }
  .segment-left {
    left: 2vw !important;
  }
  .segment-left .text {
    margin-left: 5vw !important;
  }
  .segment-right {
    left: 2vw !important;
  }
  .segment-right .text {
    margin-left: 5vw !important;
  }
  .landscape {
    max-width: 90vw !important;
  }
  .image-left {
    left: 2vw;
  }
  .portrait {
    max-width: 50vw !important;
    max-height: 50vh !important;
  }
  .first-portrait {
    margin-top: 33vh !important;
  }
  .image-right img,
  .image-left img {
    margin-top: 2vh;
  }
  .icons {
    margin-top: 11vh !important;
  }
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
  .segment-left .text {
    margin-left: -20vw !important;
  }
}