@font-face {
  font-family: "Continental";
  src: url("../fonts/Continental-Bold.otf") format("opentype");
}

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

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

:root {
  --plyr-video-background: none;
  --vh: 1vh;
  --plyr-range-track-height: 0.125rem !important;
  --plyr-range-thumb-height: 0px !important;
  --plyr-range-thumb-shadow: none !important;
  --plyr-control-icon-size: 13px !important;
  --plyr-video-control-color: white !important;
  --plyr-video-control-color-hover: white !important;
}

html {
  height: 100%;
}

.navigation-element,
.view-all-projects {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.hidden-nav {
  opacity: 0;
}

body {
  height: 100%;
  transition: color 0.2s ease-in-out;
}

body a {
  transition: color 0.2s ease-in-out;
}

.leave-page {
  cursor: wait !important;
}

.leave-page * {
  cursor: wait !important;
}

.plyr--video .plyr__controls {
  padding: 0 !important;
}

input[data-plyr="volume"] {
  display: none !important;
}

.thumbnails-nav-wrapper {
  position: fixed;
  bottom: 0.25rem !important;
  left: 0.25rem !important;
}

.slider-navigation {
  /* pointer-events: none; */
}

.plyr--video {
  background: none !important;
  width: 100%;
}

figure {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

img::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.media-wrapper figure {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.media-wrapper figure img {
  height: 100% !important;
  object-fit: cover;
  object-fit: contain;
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  font-family: "Continental";
  letter-spacing: -0.02rem;
  color: black;
  background-color: white;
  --plyr-range-thumb-height: 0px;
  --plyr-range-track-height: 2rem;
  --plyr-progress-loading-size: 2rem;
  /* background-color: black; */
  /* scroll-snap-type: y mandatory; */
}

main {
  background-color: white;
  /* transition: background-color .3s ease-in-out; */
}
main > * {
  scroll-snap-align: start;
}

.about-wrapper {
  background-color: white;
}

/* INIT */
:root {
  --plyr-video-controls-background: none;
  --plyr-color-main: none;
  --plyr-range-track-height: 1px;
  --plyr-control-icon-size: 15px;
  --plyr-badge-background: none;
  --plyr-captions-background: none;
  --plyr-tooltip-background: none;
  --plyr-tooltip-shadow: none;
  --plyr-tooltip-color: white;
}

.introduction {
  height: 100vh;
  overflow: hidden;
}

.introduction-wrapper {
  display: flex;
  flex-direction: column;
  width: auto;
  height: 200vh;
  transform: translateY(0);
  transition: transform 0.2s ease-in-out;
  transition-delay: 0.5s;
}

.leave-home .introduction-wrapper {
  transform: translateY(-50%);
}

.introduction-wrapper > .wrappers {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgray;
}

.introduction-wrapper .wrappers .sub-wrapper {
  height: 100%;
  width: 100%;
}

.introduction-wrapper .wrappers .white {
  width: calc(100vw - 2.6rem) !important;
  height: calc(100vh - 2.6rem) !important;
  background-color: white;
  border-radius: 0.3rem;
}

.introduction-wrapper a {
  height: 100%;
  width: 100%;
}

.introduction-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1;
  transition: scale 0.2s ease-in-out;
}

.video-sub {
  transition: all 0.2s ease-in-out;
}

.leave-home {
  background-color: lightgray;
}

.leave-home .video-sub {
  width: calc(100vw - 2.6rem) !important;
  height: calc(100vh - 2.6rem) !important;
}

.leave-home .introduction video {
  /* scale: 0.95; */
  border-radius: 0.3rem;
}

.plyr__volume {
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--plyr-control-icon-size) * 2) !important;
  min-width: auto !important;
}

.full-size .plyr__volume {
  padding-left: calc(var(--plyr-control-icon-size) / 2);
}

.plyr audio,
.plyr iframe,
.plyr video {
  object-fit: cover;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* background-color: red; */
  padding-bottom: 0.3rem;
  color: black;
  pointer-events: none;
}

header a {
  pointer-events: all !important;
}

.follow-mouse {
  position: fixed;
  z-index: 1000000;
  transform: translateX(-50%);
}

.case-study-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 2.6rem);
  width: 100vw;
  position: relative;
  background-color: lightgray;
  padding-top: 2.6rem;
  box-sizing: border-box;
}

.case-study-wrapper .keen-slider {
  background-color: #d3d3d3;
}

.case-study-wrapper .keen-slider {
  display: flex;
  align-items: flex-start;
  width: calc(100vw) !important;
  min-width: calc(100vw);
  height: calc(100vh - 2.6rem) !important;
  border-radius: 0.3rem;
  box-sizing: border-box;
}

.case-study-wrapper:nth-child(2) {
  margin-bottom: 2.6rem;
}

.case-study-wrapper .keen-slider .keen-slider__slide-case-studies {
  width: calc(100vw - 2.6rem) !important;
  margin-left: 1.3rem;
  margin-right: 1.3rem;
  min-width: calc(100vw - 2.6rem) !important;
  height: calc(100vh - (1.3rem * 3));
  background-color: white;
  overflow: hidden !important;
  border-radius: 0.3rem;
}

.case-study-wrapper .bottom-menu {
  bottom: calc(1.6rem / 2);
}

.slider-navigation {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  display: flex;
  z-index: 100000;
  align-items: center;
  /* display: none; */
}

.projects-slider .slider-navigation {
  z-index: 1;
}

.slider-navigation > * {
  flex: 1;
  height: calc(100vh - 2.6rem) !important;
}

.slider-navigation .case-study-wrapper .project-menu {
  top: 1.3rem;
}

.project-menu {
  /* pointer-events: none; */
}

.case-study-wrapper .project-menu {
  position: absolute;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-top: 0.2rem;
  box-sizing: border-box;
  top: 1.3rem;
}

.keen-slider .project-menu {
  top: 0;
}

.project-menu .title-wrapper > * {
  margin-right: 0.25rem;
}

.keen-slider .project-menu {
  justify-content: space-between;
}

.slider-position {
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: absolute;
  padding-bottom: 0.25rem;
}

.project-description {
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  position: absolute;
  padding-bottom: 0.3rem;
}

/* SELECTED PROJECT */
.selected-projects-wrapper .project-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.3rem;
  box-sizing: border-box;
  top: 0;
  position: sticky;
  background-color: white;
  z-index: 10;
}

.live-menu {
  border-bottom: 0.25px solid lightgray;
}
.live-menu,
.project-menu > * {
  flex: 1;
  height: 100%;
}

.title-wrapper {
  display: flex;
  align-items: center;
}
.live-menu,
.project-menu .main-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.live-menu,
.project-menu .date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.selected-projects-wrapper {
  background-color: white;
  margin-top: 1.3rem;
}

.thumb-wrapper {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.thumbnails {
  width: calc(100vw / 6);
  height: calc(100vh / 6);
  box-sizing: border-box;
  border: 0.2px solid lightgray;
  border-collapse: inherit;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.focus {
  opacity: 0.3;
}

.thumbnails .media-wrapper {
  width: 100%;
  height: 100%;
}

.thumbnails .media-wrapper img {
  width: auto;
  height: auto;
}

.thumbnails .media-wrapper video {
  width: 100%;
  height: 100%;
}

.full-size > video {
  object-fit: cover;
}

.full-size .plyr__video-wrapper {
  height: 100vh;
}

.full-size .plyr__controls {
  padding: 0.25rem !important;
  margin-bottom: -0.4rem !important;
  width: 80%;
  left: 50% !important;
  transform: translateX(-50%);
}

/* button.plyr__controls__item.plyr__control::after {
  content: "PLAY";
}
.plyr__control--pressed::after {
  content: "PAUSE" !important;
}
.plyr__control svg {
  display: none !important;
} */

.plyr__video-wrapper .plyr__control .icon--pressed .use {
  display: none;
}

.plyr__video-wrapper .plyr__control .icon--not-pressed .use {
  display: none;
}

.main-scroll {
  height: 100vh;
  align-content: flex-start;
  flex-direction: column;
  display: flex;
  overflow: scroll;
  position: relative;
  touch-action: pan-y;
  width: 100vw;
}

.case-studies.project-menu {
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
}
/* GRID */

.column-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 0px;
  align-items: center;
}
.column-1 {
  grid-area: 2 / span 10 / 1 / auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 0px;
  align-items: center;
  height: 100%;
  min-height: 100%;
}

.column-1 .media-wrapper {
  grid-area: 1 / span 6 / 1 / 10;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}

.column-1:nth-child(2) .media-wrapper {
  grid-area: 1 / span 6 / 1 / 8;
  height: 100%;
}

.column-1 .full-size {
  grid-area: 2 / span 10 / 1 / auto !important;
  height: 100%;
  align-items: flex-start;
}

.column-1:last-child .full-size {
  grid-area: 2 / span 10 / 1 / auto !important;
  height: 100%;
}

.column-1 .media-wrapper img {
  max-width: 100%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.media-wrapper img {
  display: block;
}

.column-1 .media-wrapper video {
  max-width: 100%;
  max-height: 80%;
  width: 100%;
  height: 100%;
}

.column-1 .full-size img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  max-width: auto;
  max-height: auto;
}

/* COLUMN2 */

.column-2 {
  grid-area: 2 / span 20 / 1 / auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 0px;
  align-items: center;
  height: 100%;
  min-height: 100%;
}

.column-2 .media-wrapper {
  grid-area: 1 / span 18 / 1 / 20;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-2 .media-wrapper img {
  max-width: 100%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.column-2 .media-wrapper video {
  max-width: 100%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.column-2 .full-size {
  grid-area: 2 / span 20 / 1 / auto;
}

.column-2 .full-size img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  max-width: auto;
  max-height: auto;
}

.column-2 .full-size video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  max-width: auto;
  max-height: auto;
}

.media-wrapper {
  height: 100%;
  min-height: 100%;
}

.sizing {
  height: 100%;
  width: auto;
}

.keen-slider .project-menu {
}

.bottom-menu {
  top: inherit !important;
  bottom: 1.6rem;
  text-align: center;
}

.show-mouse {
  display: none;
}

/* PROJECT */

.projects-slider {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slide-wrapper {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.project-slider {
  display: flex;
  pointer-events: none;
}

.keen-slider__slider-project {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: 10;
}

.projects-wrapper {
  background-color: white;
}

.projects-wrapper .project-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.3rem;
  height: 1.3rem;
  box-sizing: border-box;
  top: 0;
  position: fixed;
  width: 100%;
  background-color: none;
  z-index: 10;
  border-bottom: none;
}

.projects-wrapper .bottom-menu {
  bottom: 0;
  height: auto;
  align-items: flex-end;
  transform: translateY();
}

.bottom-menu .description {
  transform: translateY(0);
  transition: transform 0.2s ease-in-out;
  flex: 5;
  max-width: 90ch;
}

.slide-up .description {
  transform: translateY(-1.5rem);
}

.hide-controls-global .slide-up .description {
  transform: translateY(0);
}

header a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  width: 20ch;
}

header span {
  text-align: center;
  flex: 1;
}

.counter {
  display: flex;
}

.counter > * {
  width: auto;
}

.counter *:nth-child(2) {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.logo:hover .main-title {
  display: none;
}

.main-about {
  display: none;
}

.logo:hover .main-about {
  display: block;
}

.about-wrapper {
  display: flex;
  gap: 1.5rem;
}

.about-page {
  min-height: 100vh;
  position: relative;
}

.about-page footer {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.about-menu {
  justify-content: space-between;
  flex-direction: row;
  display: flex;
  width: 100%;
}

.navigation-wrapper .text-wrapper > .about-wrapper:first-child .about-p {
  /* font-size: 1.5rem !important; */
}

.link-wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

footer .link-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

footer .link-wrapper > nav:last-child {
  display: flex;
  margin-top: 0.25rem;
  justify-content: center;
  width: 100%;
  border-top: 0.5px solid lightgray;
}

.index-container {
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
}

.navigation-wrapper {
  padding: 1rem;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  padding-top: 2.5rem;
}

.about-wrapper {
  font-size: 1.5rem;
}

.client-wrapper {
  flex-direction: row;
  justify-content: flex-start;
}

.client-wrapper > nav::after {
  content: ",";
}

.client-wrapper > nav:last-child:after {
  content: "";
}

.column-1 .full-size video {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.sizing {
  max-width: 100% !important;
  max-height: 80% !important;
  height: 100% !important;
  width: auto !important;
}

/* ANIMATION  */

.case-study-wrapper .project-menu {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.case-study-wrapper .keen-slider img {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.case-study-wrapper .keen-slider video {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.leave-home .case-study-wrapper .project-menu {
  opacity: 0;
}

.leave-home .case-study-wrapper .keen-slider img {
  opacity: 0;
}

.leave-home .case-study-wrapper .keen-slider video {
  opacity: 0;
}

.no-margin {
  margin-top: 0;
  background-color: white;
}

.plyr-sizing {
  width: auto;
  height: 80%;
}

.plyr-sizing video {
  max-height: 100% !important;
}

.plyr--video {
  background-color: none;
}

.projects-slider {
  pointer-events: none;
}

.plyr__controls {
  pointer-events: all !important;
}

.plyr__controls__item .plyr__control {
  pointer-events: all !important;
}

.slider-navigation {
  pointer-events: all !important;
}

.case-study-wrapper .slider-navigation {
  pointer-events: none !important;
}

.case-study-wrapper .slider-navigation > * {
  pointer-events: all !important;
}

.case-study-wrapper .slider-navigation > a {
  pointer-events: none !important;
}

/* .project-slider .bottom-menu {
  pointer-events: none !important;
}

.project-slider .bottom-menu nav > * {
  pointer-events: all;
} */

.plyr--video .plyr__controls {
  pointer-events: all !important;
}

.projects-wrapper .bottom-menu {
  pointer-events: none;
}

.projects-wrapper .bottom-menu a {
  pointer-events: all !important;
}
.navigation-wrapper {
  display: flex;
  gap: 2rem;
}
.about-wrapper h2 {
  width: 7ch;
  font-size: 1rem;
  margin-top: 0.39rem;
}

.about-wrapper .big-row {
  flex: 1;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
}

.index-wrapper {
  flex: 1;
}

.hide-desktop {
  display: none;
}

.next-project {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  width: 100%;
  text-align: center;
}
.next-project > * {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  width: 100%;
  text-align: center;
}

.portfolio-menu .main-title {
  margin-top: 2rem !important;
}

footer {
  border-top: 0.2px solid lightgray;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.3rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :root {
    --plyr-control-icon-size: 15px !important;
  }

  .column-2 .media-wrapper {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    box-sizing: border-box;
  }

  .full-size {
    padding: 0 !important;
  }

  .about-wrapper h2 {
    margin-top: 0;
  }
  .hide-desktop {
    display: block;
  }
  .case-study-wrapper .project-menu {
    flex-direction: column;
  }

  .thumbnails {
    width: calc(100vw / 2);
    height: calc(100vh / 3);
  }

  .projects-wrapper .project-menu.live-menu {
    flex-direction: column;
    top: 1rem;
  }

  .about-menu a {
    width: max-content;
  }

  .about-menu a:first-child {
    width: 5ch;
  }
  .bottom-menu {
    flex-wrap: wrap;
  }

  .bottom-menu .description {
    width: 100%;
    flex: none;
    order: 3;
    text-align: center !important;
    flex: none;
    position: fixed;
    top: 50%;
  }

  .follow-mouse {
    display: none;
  }

  .case-study-wrapper {
    height: calc(80vh - 2.6rem) !important;
    padding-top: 3.8rem;
  }

  .case-study-wrapper .keen-slider {
    height: calc(82vh - 2.6rem) !important;
    background-color: lightgray;
  }

  .case-study-wrapper .keen-slider .keen-slider__slide-case-studies {
    width: calc(100vw - 2.2rem) !important;
    height: calc(79.7vh - (1.3rem * 3)) !important;
    margin-left: 1.3rem;
    margin-right: 1.3rem;
  }

  .project-main-wrapper {
    overflow: hidden !important;
  }

  .project-main-wrapper .projects-slider {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .project-main-wrapper .slide-wrapper {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .project-main-wrapper .keen-slider__slider-project {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .project-main-wrapper .slider-navigation {
    height: 100%;
  }

  .slider-navigation > * {
    height: 100% !important;
  }

  .project-main-wrapper .column-grid {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .project-main-wrapper .column-grid > * {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .next-project {
    height: calc(var(--vh, 1vh) * 100) !important;
  }
  .next-project > * {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .mobile-description {
    top: 50%;
    position: fixed;
    z-index: 1000;
    text-align: center;
    pointer-events: none;
    transform: translateY(-50%);
    display: none;
    width: 100%;
    padding: 0.25rem;
    box-sizing: border-box;
  }

  .show-description .mobile-description {
    display: block;
  }
  .projects-slider {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
  }

  .show-description .projects-slider {
    opacity: 0.3;
  }

  .bg-colored {
    background: #dadbdd;
  }

  .bg-colored img {
    object-fit: contain !important;
  }



  .block-scroll {
    overflow: hidden !important;
    position: fixed;
  }

  .full-size .plyr__controls {
    padding: 0 !important;
    padding-bottom: 1.7rem !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
  }

  .full-size .plyr--video {
    height: 100% !important;
  }

  .about-wrapper {
    flex-direction: column;
    width: 100%;
  }

  .navigation-wrapper {
    padding: 0.25rem;
    padding-top: 0;
    flex-direction: column;
  }

  .plyr.sizing {
    width: 100% !important;
  }

  .case-study-wrapper .sizing {
    max-width: 98% !important;
  }

  .plyr {
    min-width: 0 !important;
  }

  .full-size .plyr-sizing {
    height: auto !important;
    width: auto !important;
  }
  .about-wrapper .big-row {
    flex: 1;
    flex-direction: column;
  }

  .portfolio-menu {
    height: 2.3rem !important;
  }
  .portfolio-menu .main-title {
    margin-top: 0 !important;
  }

  .slider-navigation {
    height: 100%;
  }

  .flex-col {
    flex-direction: column;
    padding-top: 1rem;
  }

  .view-all-projects {
    display: none;
  }

  .projects-wrapper .project-menu:first-child > .date {
    position: fixed;
    right: 0.25rem;
    top: 0rem;
    display: block;
  }

  #selected-projects .project-menu:first-child > .date {
    position: fixed;
    right: 0.25rem;
    top: 0rem;
    display: block;
  }

  .focus {
    opacity: 1 !important;
  }

  .about-wrapper {
    padding-bottom: 1rem;
    font-size: 1.25rem;
    gap: 1rem;
  }

  .project-slider {
    pointer-events: all !important;
  }

  .slider-navigation {
    display: none;
  }

  .live-menu .title-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .bottom-menu .title-wrapper > a:first-child {
    width: max-content !important;
  }

  .focus {
    opacity: 1 !important;
  }

  .bg-colored.full-size img {
    object-fit: contain !important;
  }

  .thumb-wrapper .bg-colored.full-size img {
    object-fit: cover !important;
  }

  .column-1 .media-wrapper {
    grid-area: 1 / span 7 / 1 / 10;
  }
  .column-1:nth-child(2) .media-wrapper {
    grid-area: 1 / span 7 / 1 / 9;
  }
}

footer {
  font-feature-settings: "ss20";
}

/* ANIMATION */

.project-slider,
#selected-projects,
.follow-mouse,
.case-study-wrapper,
.project-menu {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 0s;
}

.leave-page .project-menu {
  opacity: 0;
}

.leave-page main {
  background-color: white;
}

.leave-page .project-slider {
  opacity: 0;
}

.leave-page .case-study-wrapper {
  opacity: 0;
}

.leave-page .follow-mouse {
  opacity: 0;
}

.leave-page #selected-projects {
  opacity: 0;
}

.hide {
  display: none;
}

.always-active-thumb a {
  opacity: 1 !important;
}

.white-text {
  color: white;
}

.white-text a {
  color: white;
}

.hide-controls .plyr__controls {
  display: none;
}

.structure-title {
  text-align: center;
}