@font-face {
  font-family: "Open Sans";
  src:
    local("open Sans"),
    url("fonts/OpenSans.ttf") format("opentype");
}
body {
  position: relative;
  font-family: "Open Sans";
  font-size: 0;
  padding: 0;
  margin: 0;
  background-color: #e9e3d9;
}
.oneColumn {
  display: grid;
  position: relative;
  grid-template-columns: 90vw;
  grid-row-gap: 0;
  margin: 5vw;
}
.oneColumn img, .oneColumn video {
  width: 90vw;
}
.oneColumn .open {
  position: absolute;
  bottom: calc(min(10%, 3vh));
  right: 10vw;
  font-size: 2vh;
}
.oneColumn .open:hover {
  background-color: #f1c8d6;
}
.twoColumns {
  display: grid;
  grid-template-columns: repeat(2, calc(85vw/2));
  grid-column-gap: 5vw;
  grid-row-gap: 0;
  margin: 5vw;
}
.twoColumns img, .twoColumns video {
  width: calc(85vw/2);
}
.threeColumns {
  display: grid;
  grid-template-columns: repeat(3, calc(80vw/3));
  grid-column-gap: 5vw;
  grid-row-gap: 0;
  margin: 5vw;
}
.threeColumns img, .threeColumns video {
  width: calc(80vw/3);
}
.fourColumns {
  display: grid;
  grid-template-columns: repeat(4, calc(75vw/4));
  grid-column-gap: 5vw;
  grid-row-gap: 0;
  margin: 5vw;
}
.fourColumns img, .fourColumns video {
  width: calc(75vw/4);
}
.item {
  overflow: hidden;
}
.item .open {
  cursor: pointer;
  border: 0.2vw solid black;
  border-radius: 5vh;
  padding: 1vh 2vh 1vh 2vh;
}
.item.hover:hover img {
  cursor: pointer;
  filter: grayscale(100%)
}
.lessBright .item:hover img {
  filter: brightness(0.5);
}
.start {
  text-align: center;
  padding-top: 4vh;
}
.start img {
  max-width: 90vw;
}
.end {
  text-align: center;
  margin-bottom: 10vh;
  overflow: hidden;
  height: 7.5vh;
}
.end img {
  height: 15vh;
}
.end img:hover {
  position: relative;
  top: -7.5vh;
}
.back {
  position: absolute;
  left: 5vw;
  top: 4vh;
}
.back a {
  display: block;
}
.back img {
  max-width: 5vw;
  max-height: 10vh;
}
.first {
  margin-top: 3vh;
}
.view {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: #1d1d33;
  display: grid;
  align-items: center;
  justify-content: center;
}
.view .close {
  position: absolute;
  right: 5vw;
  top: 5vh;
  cursor: pointer;
}
.view .close img {
  max-width: 5vw;
  max-height: 10vh;
}
.view .bigImage, .view .bigVideo {
  margin-bottom: 5vh;
  max-width: 100vw;
  max-height: 80vh;
}
.view .html {
  font-size: 2vh;
  color: #a2c0cc;
}
.view .html a {
  color: #a2c0cc;
}
.view .html a:hover {
  color: white;
}
.view .port {
  position: relative;
}
.view .footer {
  min-height: 3vh;
}
.view .left {
  position: absolute;
  bottom: 0;
  left: 5vw;
  cursor: pointer;
}
.view .left img {
  max-width: 5vw;
  max-height: 10vh;
}
.view .right {
  position: absolute;
  bottom: 0;
  right: 5vw;
  cursor: pointer;
}
.view .right img {
  max-width: 5vw;
  max-height: 10vh;
}
.hidden {
  display: none;
}
@media (orientation: portrait) {
  .start {
    padding-top: 5vh;
  }
  .back {
    top: 5vh;
  }
  .view .close img {
    max-width: 10vw;
  }
  .view .left img {
    max-width: 10vw;
  }
  .view .right img {
    max-width: 10vw;
  }
  .view .footer {
    min-height: 1.5vh;
  }
  .item .open {
    display: none;
  }
}