body {
  overflow-y: hidden;
}

body.ended {
  overflow-y: auto;
}

.loading-screen {
  visibility: visible;
  width: 100%;
  height: 100%;
  padding: var(--body1) var(--body2);
  top: 0;
  left: 0;
  position: fixed;
  z-index: 10;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 1s linear;
}
.loading-screen .loading-bar {
  width: 100%;
  height: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.5s;
  margin-bottom: 0.25em;
}
.loading-screen .loading-bar.ended {
  transform: scaleX(0);
  transform-origin: 100% 0;
  transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.loading-screen .loading-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  color: white;
  font: 1.1em "Grotesk";
  overflow: hidden;
}
.loading-screen .loading-info .info1.ended, .loading-screen .loading-info #loading-number.ended {
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1);
}

.loading-screen.ended {
  opacity: 0;
}

.loading-screen.remove {
  visibility: hidden;
  width: 0;
  height: 0;
}

.big-text {
  flex-direction: column;
  height: calc(100vh - 2.68em - 1em);
}
.big-text .__full-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.big-text .__full-text svg {
  margin: 0 0 0.85vw 0;
}
.big-text .__small-text {
  visibility: hidden;
  width: 0;
  height: 0;
}

.intro {
  display: flex;
  align-items: center;
  margin: 10em 0 0 0;
  width: 100%;
  font: 1em "Grotesk";
}
.intro .pictures {
  align-self: flex-start;
  height: 35em;
  position: relative;
  width: 50%;
  padding: 0 2.5em 0 2.5em;
}
.intro .pictures .drag-text {
  visibility: hidden;
  width: 0;
  height: 0;
}
.intro .pictures img {
  position: absolute;
  transition: 0.7s all cubic-bezier(0.85, 0, 0.15, 1);
  filter: grayscale(90%);
  transform-origin: center;
  -webkit-clip-path: inset(15% 15% 15% 15%);
          clip-path: inset(15% 15% 15% 15%);
}
.intro .pictures img:hover {
  transform: scale(1.15);
  -webkit-clip-path: inset(0% 0% 0% 0%);
          clip-path: inset(0% 0% 0% 0%);
  filter: grayscale(0%);
}
.intro .pictures #__1 {
  left: 38%;
  top: 53%;
  width: 17.5em;
}
.intro .pictures #__2 {
  left: 55%;
  top: 10%;
  width: 17em;
}
.intro .pictures #__3 {
  left: 40%;
  top: 35%;
  width: 20em;
}
.intro .pictures #__4 {
  left: 11%;
  top: 63%;
  width: 23em;
}
.intro .pictures #__5 {
  left: 55%;
  top: 52%;
  width: 21em;
}
.intro .pictures #__6 {
  left: -5%;
  top: 45%;
  width: 20.5em;
}
.intro .pictures #__7 {
  left: 65%;
  top: 33%;
  width: 19em;
}
.intro .pictures #__8 {
  left: 25%;
  top: 7%;
  width: 23em;
}
.intro .pictures #__9 {
  left: 17%;
  top: 32%;
  width: 19.5em;
}
.intro .pictures #__10 {
  left: 3%;
  top: 15%;
  width: 19em;
}
.intro .intro-text {
  width: 50%;
  padding: 0 5em 0 5em;
}
.intro .intro-text p:nth-child(1) {
  margin-bottom: 5em;
}
.intro .intro-text p:nth-child(2) {
  margin-bottom: 5em;
}

.section_boards,
.section_zerotwo,
.section_globereaper {
  width: 100%;
  display: flex;
  margin: 17em 0 0 0;
}
.section_boards #sound-button1,
.section_boards #sound-button2,
.section_boards #sound-button3,
.section_zerotwo #sound-button1,
.section_zerotwo #sound-button2,
.section_zerotwo #sound-button3,
.section_globereaper #sound-button1,
.section_globereaper #sound-button2,
.section_globereaper #sound-button3 {
  visibility: hidden;
  position: absolute;
  font: 0.85em "Grotesk";
}
.section_boards .description .title,
.section_zerotwo .description .title,
.section_globereaper .description .title {
  margin-bottom: 0.5em;
}
.section_boards .description .number,
.section_zerotwo .description .number,
.section_globereaper .description .number {
  margin-bottom: 0.8125em;
  font: 0.8125em "Grotesk Medium";
}
.section_boards .description .text,
.section_zerotwo .description .text,
.section_globereaper .description .text {
  width: 21.875em;
  margin-bottom: 0.8125em;
}
.section_boards .description .link,
.section_zerotwo .description .link,
.section_globereaper .description .link {
  color: white;
}

.section_boards {
  position: relative;
}
.section_boards video {
  width: 60%;
  height: 100%;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.section_boards .description_canvas {
  flex-grow: 4;
  margin: 0 0 0 var(--body2);
  display: flex;
  flex-direction: column;
}
.section_boards .scene-boards {
  margin: -5em 0 0 0;
  width: 100%;
  height: 35vw;
}

.section_zerotwo {
  position: relative;
}
.section_zerotwo video {
  width: 30%;
  height: 100%;
}
.section_zerotwo .description_canvas {
  align-self: flex-end;
  margin: 0 3em 0 var(--body2);
  display: flex;
  flex-direction: column;
}
.section_zerotwo .scene-shirt1 {
  align-self: center;
  flex-grow: 3;
  margin: 0 4em 0 0;
  width: 30%;
  height: 35vw;
}
.section_zerotwo .scene-shirt1-small {
  visibility: hidden;
  width: 0;
  height: 0;
}

.section_globereaper {
  margin: 25em 0 10em 0;
  position: relative;
}
.section_globereaper video {
  width: 55%;
  height: 100%;
}
.section_globereaper .description_canvas {
  flex-grow: 4;
  margin: 0 0 0 var(--body2);
  display: flex;
  flex-direction: column;
}
.section_globereaper .scene-shirt2 {
  margin: -5em 0 0 0;
  width: 70%;
  height: 35vw;
}

::-webkit-scrollbar {
  display: none;
}

/**
 * Breakpoints for responsive design.
 */
/* Desktop, large size */
/* Desktop, medium size */
@media only screen and (max-width: 1680px) {
  .section_zerotwo .description_canvas {
    margin: 0 0 0 var(--body2);
  }
}
/* Desktop, small size */
@media only screen and (max-width: 1350px) {
  .intro {
    flex-direction: column;
    margin: 5em 0 5em 0;
    width: 100%;
  }
  .intro .intro-text {
    width: 85%;
  }
  .intro .pictures {
    height: 25em;
    width: calc(100% + var(--body2) * 2);
    overflow-y: hidden;
    cursor: -webkit-grab;
    cursor: grab;
    align-self: stretch;
    margin: 0 calc(var(--body2)*-1) 11em calc(var(--body2)*-1);
  }
  .intro .pictures .drag-text {
    visibility: visible;
    width: auto;
    height: auto;
    font: 1em "Grotesk";
    color: white;
    position: absolute;
    bottom: 0;
    left: 10%;
  }
  .intro .pictures .drag-text svg {
    width: 1em;
  }
  .intro .pictures img {
    position: absolute;
    transition: 0.7s all cubic-bezier(0.85, 0, 0.15, 1);
    transform-origin: center;
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
    filter: grayscale(0%);
  }
  .intro .pictures img:hover {
    transform: scale(1);
  }
  .intro .pictures #__1 {
    left: 190.5%;
    top: 10%;
    width: 27em;
  }
  .intro .pictures #__2 {
    left: 351%;
    top: 6%;
    width: 26em;
    padding-right: var(--body2);
    z-index: 5;
  }
  .intro .pictures #__3 {
    left: 312%;
    top: 11%;
    width: 28em;
  }
  .intro .pictures #__4 {
    left: 228.5%;
    top: 22%;
    width: 32em;
    z-index: 5;
  }
  .intro .pictures #__5 {
    left: 148.5%;
    top: 3%;
    width: 30.5em;
  }
  .intro .pictures #__6 {
    left: 110%;
    top: 31%;
    width: 27.5em;
  }
  .intro .pictures #__7 {
    left: 272.5%;
    top: 0%;
    width: 28em;
  }
  .intro .pictures #__8 {
    left: 69.5%;
    top: 8%;
    width: 30em;
    z-index: 6;
  }
  .intro .pictures #__9 {
    left: 37%;
    top: 20%;
    width: 23.5em;
    z-index: 5;
  }
  .intro .pictures #__10 {
    left: 5%;
    top: 0;
    width: 23em;
  }

  .section_boards {
    flex-direction: column;
  }
  .section_boards .description_canvas {
    margin: 1.25em 0 0 0;
  }
  .section_boards .description_canvas .scene-boards {
    width: auto;
    height: 43vw;
    margin: -10em 0 0 30%;
  }
  .section_boards video {
    width: 100%;
  }

  .section_zerotwo .description_canvas {
    align-self: flex-start;
  }
  .section_zerotwo video {
    margin: 0;
    width: 45%;
  }
  .section_zerotwo .scene-shirt1-small {
    margin: -3em 0 0 0;
    visibility: visible;
    width: 100%;
    height: 45vw;
  }
  .section_zerotwo .scene-shirt1 {
    margin: 0;
    visibility: hidden;
    width: 0;
    height: 0;
  }

  .section_globereaper {
    margin: 25em 0 10em 0;
  }
  .section_globereaper .description_canvas {
    align-self: flex-start;
  }
  .section_globereaper video {
    width: 43vw;
  }
  .section_globereaper .scene-shirt2 {
    width: 100%;
    height: 47vw;
    margin: -3em 0 0 0;
  }
}
/* Tablet portrait/landscape */
@media only screen and (max-width: 1024px) {
  .intro {
    margin: 17em 0 5em 0;
  }
  .intro .intro-text {
    padding: 0 1em 0 5em;
  }
  .intro .pictures {
    margin-bottom: 12em;
  }

  .section_boards {
    margin: 17em 0 0 0;
  }
  .section_boards .description_canvas .scene-boards {
    width: auto;
    height: 60vw;
    margin: -10em 10% 0 15%;
  }

  .section_zerotwo .description_canvas, .section_globereaper .description_canvas {
    margin: 0 0 0 var(--body2);
  }

  .section_zerotwo {
    margin: 9em 0 0 0;
  }
  .section_zerotwo .scene-shirt1-small {
    margin: -1em 0 0 0;
    height: 48.5vw;
  }

  .section_globereaper {
    margin: 18em 0 10em 0;
  }
  .section_globereaper .scene-shirt2 {
    margin: -1em 0 0 0;
    height: 48.5vw;
  }

  .big-text {
    height: calc(100vh - (var(--body1) * 2));
  }
  .big-text .__small-text {
    visibility: visible;
    width: auto;
    height: auto;
  }
  .big-text .__full-text {
    visibility: none;
    width: 0;
    height: 0;
  }

  footer {
    height: auto;
  }
}
/* Tablet portrait */
/* Tablet landscape */
/* Small tablet */
@media only screen and (max-width: 767px) {
  .intro {
    margin: 11em 0 5em 0;
  }
  .intro .pictures {
    height: 30em;
    margin-bottom: 9em;
  }
  .intro .pictures img, .intro .pictures img:hover {
    transform-origin: center left;
    transform: scale(1.15);
  }
  .intro .pictures #__1 {
    left: 423.5%;
    top: 10%;
    width: 27em;
  }
  .intro .pictures #__2 {
    left: 785%;
    top: 6%;
    width: 26em;
    z-index: 5;
  }
  .intro .pictures #__3 {
    left: 607%;
    top: 11%;
    width: 28em;
  }
  .intro .pictures #__4 {
    left: 509%;
    top: 22%;
    width: 32em;
    z-index: 5;
  }
  .intro .pictures #__5 {
    left: 330%;
    top: 3%;
    width: 30.5em;
  }
  .intro .pictures #__6 {
    left: 245%;
    top: 31%;
    width: 27.5em;
  }
  .intro .pictures #__7 {
    left: 695.5%;
    top: 0%;
    width: 28em;
  }
  .intro .pictures #__8 {
    left: 155%;
    top: 8%;
    width: 30em;
    z-index: 6;
  }
  .intro .pictures #__9 {
    left: 80%;
    top: 20%;
    width: 23.5em;
    z-index: 5;
  }
  .intro .pictures #__10 {
    left: 5%;
    top: 0;
    width: 23em;
  }
  .intro .intro-text {
    padding: 0 0 0 0;
    width: 90%;
  }

  .section_boards {
    margin: 20em 0 0 0;
  }
  .section_boards .description_canvas .scene-boards {
    height: 80vw;
    margin: -9em 0 0 10%;
  }

  .section_zerotwo, .section_globereaper {
    margin: 7em 0 0 0;
    flex-direction: column;
  }
  .section_zerotwo video, .section_globereaper video {
    width: 100%;
  }
  .section_zerotwo .description_canvas, .section_globereaper .description_canvas {
    margin: 2em 0 0 0;
    align-self: flex-start;
  }
  .section_zerotwo .scene-shirt2,
.section_zerotwo .scene-shirt1-small, .section_globereaper .scene-shirt2,
.section_globereaper .scene-shirt1-small {
    margin: -2em 0 0 0;
    width: 90%;
    height: 80vw;
    align-self: flex-end;
  }

  .section_zerotwo,
.section_globereaper {
    margin-top: 15em;
  }
}
/* Phone */
/* Phone landscape */
/* Phone portrait */
@media only screen and (max-width: 600px) {
  .intro .pictures img, .intro .pictures img:hover {
    transform: scale(1.05);
  }

  .section_boards .description_canvas .scene-boards {
    height: 90vw;
    margin: -5em 0 0 0;
  }

  .section_zerotwo .scene-shirt1-small, .section_zerotwo .scene-shirt2, .section_globereaper .scene-shirt1-small, .section_globereaper .scene-shirt2 {
    margin: -1em 0 0 0;
    width: 100%;
    height: 90vw;
  }

  .section_globereaper {
    margin: 17em 0 15em 0;
  }
}
@media only screen and (max-width: 500px) {
  .intro .pictures img,
.intro .pictures img:hover {
    transform: scale(0.9);
  }
  .intro .intro-text {
    width: 100%;
  }
}
/* Small height */
/* Small phone */
@media only screen and (max-width: 400px) {
  .section_boards .description .text, .section_globereaper .description .text, .section_zerotwo .description .text {
    width: 100%;
  }

  .section_boards {
    margin-top: 15em;
  }
  .section_boards .description_canvas .scene-boards {
    height: 120vw;
    margin: -2em 0 0 0;
  }

  .section_zerotwo {
    margin-top: 9em;
  }

  .section_globereaper {
    margin-top: 15em;
  }

  footer {
    height: 8.5em;
  }
}
/* Extra Small phone */
@media only screen and (max-width: 320px) {
  .intro .pictures img,
.intro .pictures img:hover {
    transform: scale(0.8);
  }

  .section_boards .description_canvas .scene-boards {
    height: 100vw;
    margin: -2em 0 0 0;
  }
}