@charset "UTF-8";
:root {
  --app-height: 100%;
}

* {
  box-sizing: border-box;
}
*::selection {
  background: #777;
  color: #fff;
}

html,
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  width: 100vw;
}

.m-only {
  display: none;
  opacity: 0;
}

.d-only {
  display: block;
  opacity: 1;
}

@font-face {
  font-family: "rader";
  src: url("./fonts/PPRader-Regular.woff2") format("woff2"), url("./fonts/PPRader-Regular.woff") format("woff"), url("./fonts/PPRader-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "montreal";
  src: url("./fonts/PPNeueMontreal-Medium.woff2") format("woff2"), url("./fonts/PPNeueMontreal-Medium.woff") format("woff"), url("./fonts/PPNeueMontreal-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "montreal";
  src: url("./fonts/PPNeueMontreal-MediumItalic.woff2") format("woff2"), url("./fonts/PPNeueMontreal-MediumItalic.woff") format("woff"), url("./fonts/PPNeueMontreal-MediumItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  background: #fff;
  /* mobile viewport bug fix */
}

.nav__logo {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  transition: 0.3s ease-out;
  will-change: filter;
}
.nav__logo:hover {
  filter: invert(1);
}
.nav__logo a img {
  width: 170px;
  height: auto;
}
.nav__logo .m-only {
  width: auto;
  height: 36px;
  margin-left: 36px;
}

nav.nav {
  font-family: "rader";
  display: flex;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}
nav.nav a.nav__item {
  font-family: "rader";
  font-size: 25px;
  padding: 0.3em 0.8em 0.4em 0.8em;
  color: black;
  background: grey;
  text-decoration: none;
  transition: 0.3s ease-out;
  line-height: 1.2em;
}
@-moz-document url-prefix() {
  nav.nav a.nav__item {
    padding: 0.4em 0.8em 0.2em 0.8em;
  }
}
nav.nav a.nav__item--about {
  background-color: #d5d5d5;
}
nav.nav a.nav__item--team {
  background-color: #bcbcbc;
}
nav.nav a.nav__item--projects {
  background-color: #989898;
}
nav.nav a.nav__item--active {
  background-color: black;
  color: white;
}
nav.nav a.nav__item:hover {
  background-color: black;
  color: white;
}

.nav__bar {
  position: fixed;
  width: 100vw;
  height: 36px;
  background-color: #a0a0a0;
  top: 0;
  left: 0;
  z-index: 9999;
}
.nav__bar .left-block {
  width: 36px;
  height: 36px;
  left: 0;
  top: 0;
  position: relative;
  background: #d5d5d5;
}

.ham {
  z-index: 999999;
  width: 30px;
  height: 30px;
  position: fixed;
  display: inline-block;
  display: block;
  display: none;
  top: 12px;
  right: 20px;
  transform: rotate(0deg) scale(1);
  transition: 0.3s cubic-bezier(0.83, 0, 0.17, 1);
  cursor: pointer;
}
.ham--hidden {
  top: 12px !important;
}
.ham span {
  display: block;
  float: left;
  position: absolute;
  height: 3px;
  width: 100%;
  background: pink;
  opacity: 1;
  left: -3px;
  transform: rotate(0deg);
  transition: 0.3s ease-out;
}
.ham span:nth-child(1) {
  top: 15px;
  transform-origin: left center;
}
.ham span:nth-child(2) {
  top: 20px;
  opacity: 0;
  transform-origin: left center;
}
.ham span:nth-child(3) {
  top: 25px;
  transform-origin: left center;
}
.ham--active {
  mix-blend-mode: normal;
}
.ham--active span:nth-child(1) {
  transform: rotate(45deg);
  margin-left: -10px;
  top: 10px;
  left: 8px;
}
.ham--active span:nth-child(2) {
  opacity: 0;
}
.ham--active span:nth-child(3) {
  transform: rotate(-45deg);
  margin-left: -10px;
  top: 31px;
  left: 8px;
}

.nav__mobile {
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  width: auto;
  top: 36px;
  height: auto;
  transition: right 0.3s cubic-bezier(0.83, 0, 0.17, 1);
  font-family: "rader";
  display: flex;
  flex-direction: column;
  position: fixed;
  right: -100%;
  z-index: 9999;
}
.nav__mobile--open {
  right: 0%;
}
.nav__mobile a.nav__item {
  width: fit-content;
  font-family: "rader";
  font-size: 22px;
  height: 36px;
  line-height: 36px;
  padding: 0em 0.5em;
  color: black;
  background: grey;
  text-decoration: none;
  transition: 0.3s ease-out;
  text-align: center;
}
.nav__mobile a.nav__item--about {
  background-color: #d5d5d5;
  width: 70px;
}
.nav__mobile a.nav__item--team {
  background-color: #bcbcbc;
  width: 70px;
}
.nav__mobile a.nav__item--projects {
  background-color: #989898;
  width: 150px;
}
.nav__mobile a.nav__item--active {
  background-color: black;
  color: white;
}
.nav__mobile a.nav__item:hover {
  background-color: black;
  color: white;
}

.swup-progress-bar {
  height: 5px !important;
  z-index: 9999999999999 !important;
  background-color: #fff !important;
  mix-blend-mode: difference;
}

.transition-fade {
  transition: 0.6s cubic-bezier(0.83, 0, 0.17, 1);
  opacity: 1;
}

.transition-wipe1 {
  transition: width 0.6s cubic-bezier(0.83, 0, 0.17, 1);
  top: 0;
  transform-origin: top;
  background: black;
}

.transition-wipe2 {
  transition: width 0.6s cubic-bezier(0.83, 0, 0.17, 1);
  top: 50vh;
  transform-origin: bottom;
  transition-delay: 0.1s;
  background: grey;
}

html.is-animating .transition-fade {
  opacity: 0.99;
}
html.is-animating .transition-wipe1,
html.is-animating .transition-wipe2 {
  width: 100vw;
}

.wipe1.active,
.wipe2.active {
  width: 100vw;
}

.wipe {
  position: fixed;
  pointer-events: none;
  z-index: 9999999;
  width: 0;
  overflow: hidden;
  height: 50vh;
  will-change: height;
}

.leftBar {
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  z-index: 99;
  height: 100vh;
}
.leftBar .topBar,
.leftBar .bottomBar {
  width: 50px;
  height: calc(var(--app-height) / 2);
}
.leftBar .topBar {
  background-color: #989898;
}
.leftBar .bottomBar {
  background-color: #d5d5d5;
}
@media only screen and (max-width: 768px) {
  .leftBar {
    z-index: 0;
    width: 36px;
  }
  .leftBar .topBar,
.leftBar .bottomBar {
    width: 36px;
  }
}

.news__btn--trans {
  position: fixed;
  right: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  width: 36px;
  top: 36px;
  height: calc(var(--app-height) - 36px);
}

.news {
  position: fixed;
  z-index: 999;
  right: 0;
  right: calc(50px - 25vw);
  top: 0;
  height: 100vh;
  width: 25vw;
  background: black;
  transition: right 0.3s ease-out;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .news {
    z-index: unset;
    right: calc(-100vw + 72px);
    top: 36px;
    height: calc(100vh - 36px);
    width: calc(100vw - 36px);
  }
  .news:hover {
    z-index: 0 !important;
  }
}
.news:hover {
  z-index: 99999999999999999;
}
@media only screen and (min-width: 769px) {
  .news:hover {
    right: calc(120px - 25vw);
  }
  .news:hover .news__btn {
    background-color: black;
    color: white;
    pointer-events: none;
  }
}
.news--active {
  right: 0;
  z-index: 99999999999999999;
  cursor: default;
}
@media only screen and (max-width: 768px) {
  .news--active:hover {
    z-index: 9999999999 !important;
  }
}
.news--active .dummy-container {
  pointer-events: all;
}
.news--active .news__btn {
  opacity: 0;
}
.news--active .dummy-container {
  width: calc(100% - 0px);
  right: 0px;
}
.news--active:hover {
  right: 0;
}
.news .news__close {
  position: absolute;
  pointer-events: none;
  top: 0px;
  right: 0px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: #4e4e4e;
  z-index: 99;
}
.news .news__close img {
  width: 20px;
  height: 20px;
}
.news .news__btn {
  height: 100vh;
  background-color: #d5d5d5;
  width: 50px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  font-family: "rader";
  font-size: 32px;
  color: black;
  line-height: 50px;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-out;
  z-index: 1;
  pointer-events: all;
  cursor: pointer;
}
.news .news__btn .text {
  position: absolute;
  text-align: center;
  font-size: 25px;
  left: calc(50% + 3px);
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
@-moz-document url-prefix() {
  .news .news__btn .text {
    left: 50%;
  }
}
@media only screen and (max-width: 768px) {
  .news .news__btn .text {
    width: auto;
    font-size: 22px;
    left: calc(50% - 4px);
  }
}
.news .news__btn:hover {
  background-color: black;
  color: white;
}

.dummy-container {
  /* margin: 0 auto; */
  /* padding: 2rem; */
  pointer-events: none;
  font-family: "montreal", helvetica;
  padding-top: 0rem;
  width: calc(100% - 50px);
  position: absolute;
  right: 0px;
  z-index: 0;
  top: 0;
  overflow: auto;
  height: 100vh;
}
@media only screen and (max-width: 768px) {
  .dummy-container {
    height: calc(100vh - 36px);
    width: calc(100% - 36px);
  }
}

/* Mastodon embed timeline */
/* Main container */
.mt-timeline {
  height: calc(100% - 2rem);
  height: 100%;
  padding: 0 2rem;
  position: relative;
  background: black;
  color: white;
}
@media only screen and (max-width: 768px) {
  .mt-timeline {
    padding: 0 36px;
    padding-left: 18px;
  }
}

.mt-timeline a:link,
.mt-timeline a:active,
.mt-timeline a {
  text-decoration: none;
  color: rgb(156, 156, 156);
}
.mt-timeline a:link:hover,
.mt-timeline a:active:hover,
.mt-timeline a:hover {
  color: #737373;
}

.mt-body {
  padding-top: 2rem;
  height: 100%;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.mt-body .invisible {
  display: none;
}

/* Toot container */
.mt-toot {
  margin: 0 0rem 0 0;
  padding: 0rem 0 2rem 65px;
  padding: 0 0 1rem 1rem;
  padding-bottom: 0.4em;
  position: relative;
  min-height: 60px;
  background-color: transparent;
  border-left: 1px solid white;
  margin-bottom: 1.5rem;
}

.mt-toot:hover {
  cursor: pointer;
  background-color: rgba(124, 124, 124, 0.1);
}

.mt-toot p:last-child {
  margin-bottom: 0;
}

/* User icon */
.mt-user {
  display: table;
  padding: 0.01em 0.3em 0.1em 0.3em;
  font-family: "rader";
  font-size: 19px;
  color: black !important;
  margin-left: -1rem;
  background-color: white;
  margin-bottom: 1.5rem;
}
@-moz-document url-prefix() {
  .mt-user {
    padding: 0.1em 0.3em 0.1em 0.3em;
  }
}
.mt-user .fa-retweet {
  font-size: 14px;
  margin-right: 0.2em;
}
.mt-user a {
  color: black !important;
}
.mt-user:hover {
  background-color: #414141;
}
.mt-user:hover a {
  color: white !important;
}

.mt-avatar {
  position: absolute;
  top: 20px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-color: #000;
  border-radius: 50%;
  display: none;
}

.mt-avatar-boosted {
  width: 40px;
  height: 40px;
}

.mt-avatar-booster {
  width: 25px;
  height: 25px;
  top: 25px;
  left: 25px;
  display: none;
}

/* Message */
.toot-text {
  margin-bottom: 0.25rem;
  font-size: 16px;
  line-height: 1.25em;
  letter-spacing: 0.02em;
}
.toot-text p {
  margin-top: 0.5em;
}
.toot-text .material-icons {
  transform: translateY(6px);
}
.toot-text .fa-solid {
  margin-right: 2px;
}

.toot-text .ellipsis::after {
  content: "...";
}

.mt-error {
  color: darkred;
  background: lightpink;
  margin: 5px;
  padding: 10px;
}

/* Poll */
.toot-poll {
  margin-bottom: 0.25rem;
}

.toot-poll ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toot-poll ul li:not(:last-child) {
  margin-bottom: 0.25rem;
}

.toot-poll ul li:before {
  content: "◯";
  padding-right: 0.5rem;
}

/* Medias */
.toot-media {
  overflow: hidden;
  margin-bottom: 0.25rem;
  margin-top: 2em;
}

.toot-media-preview {
  position: relative;
  margin-top: 0.25rem;
  height: auto;
  text-align: center;
  width: 100%;
}

.toot-media-spoiler > img {
  filter: blur(2rem);
}

.toot-media-preview a {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.img-ratio14_7 {
  position: relative;
  padding-top: 48.95%;
  /* 14:7 */
  width: 100%;
}

.img-ratio14_7 > img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Date */
.toot-date {
  font-size: 16px;
  opacity: 1;
  margin-top: 1.5em;
}

/* Loading-spinner */
.loading-spinner {
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  background-size: 2.5rem;
}

/* See more btn */
.mt-seeMore {
  margin: 2rem auto;
  padding: 0 2rem;
  text-align: center;
  padding: 0.01em 0.3em 0.1em 0.3em;
  font-family: "rader";
  font-size: 18px;
  color: black !important;
  margin-left: -0.5rem;
  background-color: white;
  -webkit-appearance: none;
}
@-moz-document url-prefix() {
  .mt-seeMore {
    padding: 0.1em 0.3em 0.1em 0.3em;
  }
}
.mt-seeMore:hover {
  background: #414141;
}
.mt-seeMore:hover a {
  color: white;
}
.mt-seeMore a {
  color: black !important;
}

/* Hidden element */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media only screen and (max-width: 768px) {
  .aboutPage {
    z-index: 1000;
  }
  .aboutPage .footer {
    margin-top: 100px;
  }
}
.aboutPage .bg {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 50vw;
  background: #f2f2f2;
  pointer-events: none;
}
.aboutPage .bg img {
  width: 90%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {
  .aboutPage .bg {
    display: none;
  }
}
.aboutPage .wrap {
  scroll-snap-type: y mandatory;
}
.aboutPage .wrapper {
  width: 100vw;
  padding-right: 50vw;
  height: 100vh;
  overflow: auto;
  overflow-x: hidden;
}
@media only screen and (max-width: 768px) {
  .aboutPage .wrapper {
    padding: 50px 50px 50px;
    scroll-snap-type: unset;
    overflow: unset;
    height: auto;
  }
  .aboutPage .wrapper.snap-scroll {
    scroll-snap-type: unset;
  }
}
.aboutPage .wrapper.snap-scroll {
  scroll-snap-type: y mandatory;
}
.aboutPage .wrapper .main-title {
  position: fixed;
  top: 120px;
  left: 100px;
  z-index: 99;
  font-family: "rader";
  font-size: 42px;
}
@media only screen and (max-width: 768px) {
  .aboutPage .wrapper .main-title {
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
    top: unset;
    left: unset;
  }
}
.aboutPage .wrapper .footer {
  margin-top: 3em;
  width: 100vw;
  z-index: 99999999;
  position: relative;
  scroll-snap-align: end;
}
.aboutPage .header,
.aboutPage .section {
  width: 100%;
  padding: 200px 100px;
  box-sizing: border-box;
  position: relative;
  z-index: 99;
}
@media only screen and (max-width: 768px) {
  .aboutPage .header,
.aboutPage .section {
    padding: 0;
    margin-bottom: 0.6em;
  }
}
.aboutPage .sticky {
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  scroll-snap-align: start;
  top: 20px;
  z-index: 9;
}
@media only screen and (max-width: 768px) {
  .aboutPage .sticky {
    position: relative;
    scroll-snap-align: unset;
    min-height: unset;
    max-height: unset;
    height: auto;
  }
}
.aboutPage .section {
  color: black;
  top: 0px;
  max-height: 100vh;
  background: white;
}
.aboutPage .section .p.quote p {
  font-family: "montreal", helvetica;
  font-size: calc(2vh + 1.7vw);
  line-height: 1.15em;
  letter-spacing: 0.01em;
  margin-top: 0.3em;
}
@media only screen and (max-width: 768px) {
  .aboutPage .section .p.quote p {
    font-size: 30px;
  }
}
@-moz-document url-prefix() {
  .aboutPage .section .p.quote p {
    line-height: 1.15em;
    margin-top: 0.2em;
  }
}
.aboutPage .section .p.text p {
  font-family: "montreal", helvetica;
  font-size: 24px;
  line-height: 1.3em;
  letter-spacing: 0.01em;
  font-size: calc(0.8vh + 0.8vw);
}
@media only screen and (max-width: 768px) {
  .aboutPage .section .p.text p {
    font-size: 18px;
    line-height: 1.3em;
    letter-spacing: 0.02em;
  }
  @-moz-document url-prefix() {
    .aboutPage .section .p.text p {
      line-height: 1.35em;
    }
  }
}
.aboutPage .section .pageNumber {
  position: absolute;
  bottom: 50px;
  font-family: "montreal", helvetica;
  font-size: calc(0.8vh + 0.8vw);
}
@media only screen and (max-width: 768px) {
  .aboutPage .section .pageNumber {
    display: none;
  }
}
.aboutPage .section--s1 {
  background: #fff;
}
.aboutPage .section--s2 {
  background: #fff;
}
.aboutPage .section--s3 {
  background: #fff;
}

.wrap {
  scroll-snap-type: y proximity;
  overflow: auto;
  height: 100vh;
}

.video-overlay {
  position: fixed;
  z-index: -8446744073709551617;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
}
.video-overlay.hidden {
  display: none;
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  .video-overlay {
    display: none !important;
    opacity: 0;
  }
}
.video-overlay .video-info {
  position: absolute;
  z-index: 999999;
  bottom: 20px;
  left: 70px;
  font-size: 12px;
  color: white;
  font-family: "Montreal";
}
.video-overlay .bg {
  position: absolute;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
}
.video-overlay video {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
}

.home {
  scroll-snap-type: y proximity;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  background: #d5d5d5;
}
@media only screen and (max-width: 768px) {
  .home {
    z-index: -1;
    opacity: 0.99;
    width: 100vw;
    width: calc(100vw - 36px);
  }
}
.home .footer {
  position: relative;
  max-width: 100vw;
  scroll-snap-align: end;
}
@media only screen and (max-width: 768px) {
  .home .footer {
    position: relative;
    min-height: calc(25vh + 10px);
    width: 100vw;
    background-color: black;
    bottom: 0;
    z-index: 999999;
    width: 100vw;
    padding: 36px;
    display: inline-block;
    color: white;
    font-family: "montreal", helvetica;
  }
}
.home .placeholder {
  scroll-snap-align: start;
  width: 100vw;
  height: 50vh;
  background: yellow;
  position: relative;
  z-index: 99999;
  opacity: 0.01;
  pointer-events: none;
  display: none;
}
.home .placeholder:nth-child(odd) {
  background: blue;
}
.home .project-title {
  position: absolute;
  z-index: 99;
  position: absolute;
  z-index: 99;
  padding: 0.3em 0.5em 0.4em 0.5em;
  max-width: 100%;
  background: white;
  font-size: 25px;
  font-family: "rader";
  line-height: 1.15em;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
}
@-moz-document url-prefix() {
  .home .project-title {
    padding: 0.5em 0.5em 0.4em 0.5em;
  }
}
.home .project-title:hover {
  background: black;
  color: white;
}
.home .project-title:hover a {
  color: white;
}
.home .project-title a {
  text-decoration: none;
}
@media only screen and (max-width: 1100px) {
  .home .project-title {
    font-size: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .home .project-title {
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    font-size: 20px;
    min-height: 36px;
    font-size: 22px;
    padding-left: 15px;
  }
}
.home .home--left {
  float: left;
  position: relative;
  bottom: 0;
  left: 50px;
  right: 0;
  width: 50vw;
  width: calc(50vw - 50px);
}
@media only screen and (max-width: 768px) {
  .home .home--left {
    width: 100vw;
    float: none;
    width: calc(100vw - 72px);
    left: 36px;
  }
}
.home .home--left .project-title {
  bottom: 0;
  left: 0px;
}
.home .home--left .top-right {
  right: 0px !important;
  top: 0 !important;
}
.home .home--left .top-left {
  left: 0px !important;
  top: 0 !important;
}
.home .home--left .bottom-right {
  right: 0px !important;
  bottom: 0 !important;
}
.home .home--left .bottom-left {
  left: 0px !important;
  bottom: 0 !important;
}
.home .home--right {
  position: relative;
  float: right;
  right: 50px;
  bottom: 0;
  width: 50vw;
  width: calc(50vw - 50px);
}
@media only screen and (max-width: 768px) {
  .home .home--right {
    width: 100vw;
    float: none;
    width: calc(100vw - 72px);
    left: 36px;
  }
}
.home .home--right .project-title {
  bottom: 0;
  left: 0;
}
.home .home--right .top-right {
  right: 0px !important;
  top: 0 !important;
}
.home .home--right .top-left {
  left: 0px !important;
  top: 0 !important;
}
.home .home--right .bottom-right {
  right: 0px !important;
  bottom: 0 !important;
}
.home .home--right .bottom-left {
  left: 0px !important;
  bottom: 0 !important;
}
.home .section {
  scroll-snap-align: start;
  position: relative;
  height: 50vh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: calc(var(--app-height) / 2);
}
.home .section--black {
  background-color: #000;
}
.home .section--darker {
  background-color: #4e4e4e;
}
.home .section--dark {
  background-color: #989898;
}
.home .section--middle {
  background-color: #bcbcbc;
}
.home .section--light {
  background-color: #d5d5d5;
}
.home .section--lighter {
  background-color: #f2f2f2;
}
.home .section--white {
  background-color: #ffffff;
}
.home .section a {
  color: black;
}
@media only screen and (max-width: 768px) {
  .home .section.active .project-title {
    opacity: 1;
  }
  .home .section.active img.img {
    opacity: 1;
  }
  .home .section .grid {
    display: none;
  }
}
.home .section:hover .project-title {
  opacity: 1;
}
.home .section:hover img.img {
  opacity: 1;
}
.home .section:hover .grid {
  opacity: 1;
}
.home .section img.img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: 0.3s ease-out;
  z-index: 0;
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  .home .section img.img {
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
.home .section .grid {
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 20vw;
  height: 20vw;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
@keyframes opac {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
  8% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  19% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  28% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  41% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  47% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  56% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  73% {
    opacity: 0;
  }
  79% {
    opacity: 0;
  }
  83% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  89% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.home .section .grid .pixel {
  opacity: 0;
  width: 4vw;
  height: 4vw;
  background-color: transparent;
  float: left;
  animation: opac 18.421s infinite;
}
.home .section .grid .pixel:nth-child(1) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(2) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(3) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(4) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(5) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(6) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(7) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(8) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(9) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(10) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(11) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(12) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(13) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(14) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(15) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(16) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(17) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(18) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(19) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(20) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(21) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(22) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(23) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(24) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(25) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(26) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(27) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(28) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(29) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(30) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(31) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(32) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(33) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(34) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(35) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(36) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(37) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(38) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(39) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(40) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(41) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(42) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(43) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(44) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(45) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(46) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(47) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(48) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(49) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(50) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(51) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(52) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(53) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(54) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(55) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(56) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(57) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(58) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(59) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(60) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(61) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(62) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(63) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(64) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(65) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(66) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(67) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(68) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(69) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(70) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(71) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(72) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(73) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(74) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(75) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(76) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(77) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(78) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(79) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(80) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(81) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(82) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(83) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(84) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(85) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(86) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(87) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(88) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(89) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(90) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(91) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(92) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(93) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(94) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(95) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(96) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(97) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(98) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(99) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(100) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(101) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(102) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(103) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(104) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(105) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(106) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(107) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(108) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(109) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(110) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(111) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(112) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(113) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(114) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(115) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(116) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(117) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(118) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(119) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(120) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(121) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(122) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(123) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(124) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(125) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(126) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(127) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(128) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(129) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(130) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(131) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(132) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(133) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(134) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(135) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(136) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(137) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(138) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(139) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(140) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(141) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(142) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(143) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(144) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(145) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(146) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(147) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(148) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(149) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(150) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(151) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(152) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(153) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(154) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(155) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(156) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(157) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(158) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(159) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(160) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(161) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(162) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(163) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(164) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(165) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(166) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(167) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(168) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(169) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(170) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(171) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(172) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(173) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(174) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(175) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(176) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(177) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(178) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(179) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(180) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(181) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(182) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(183) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(184) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(185) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(186) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(187) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(188) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(189) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(190) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(191) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(192) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(193) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(194) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(195) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(196) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(197) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(198) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(199) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(200) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(201) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(202) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(203) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(204) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(205) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(206) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(207) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(208) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(209) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(210) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(211) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(212) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(213) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(214) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(215) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(216) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(217) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(218) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(219) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(220) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(221) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(222) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(223) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(224) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(225) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(226) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(227) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(228) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(229) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(230) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(231) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(232) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(233) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(234) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(235) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(236) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(237) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(238) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(239) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(240) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(241) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(242) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(243) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(244) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(245) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(246) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(247) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(248) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(249) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(250) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(251) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(252) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(253) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(254) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(255) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(256) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(257) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(258) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(259) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(260) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(261) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(262) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(263) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(264) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(265) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(266) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(267) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(268) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(269) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(270) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(271) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(272) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(273) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(274) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(275) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(276) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(277) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(278) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(279) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(280) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(281) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(282) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(283) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(284) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(285) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(286) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(287) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(288) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(289) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(290) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(291) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(292) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(293) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(294) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(295) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(296) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(297) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(298) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(299) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(300) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(301) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(302) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(303) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(304) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(305) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(306) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(307) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(308) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(309) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(310) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(311) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(312) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(313) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(314) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(315) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(316) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(317) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(318) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(319) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(320) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(321) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(322) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(323) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(324) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(325) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(326) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(327) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(328) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(329) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(330) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(331) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(332) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(333) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(334) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(335) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(336) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(337) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(338) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(339) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(340) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(341) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(342) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(343) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(344) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(345) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(346) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(347) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(348) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(349) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(350) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(351) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(352) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(353) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(354) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(355) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(356) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(357) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(358) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(359) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(360) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(361) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(362) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(363) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(364) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(365) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(366) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(367) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(368) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(369) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(370) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(371) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(372) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(373) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(374) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(375) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(376) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(377) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(378) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(379) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(380) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(381) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(382) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(383) {
  animation-delay: -9.288s;
}
.home .section .grid .pixel:nth-child(384) {
  animation-delay: -3.483s;
}
.home .section .grid .pixel:nth-child(385) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(386) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(387) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(388) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(389) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(390) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(391) {
  animation-delay: -6.966s;
}
.home .section .grid .pixel:nth-child(392) {
  animation-delay: -4.644s;
}
.home .section .grid .pixel:nth-child(393) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(394) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(395) {
  animation-delay: -5.805s;
}
.home .section .grid .pixel:nth-child(396) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(397) {
  animation-delay: -1.161s;
}
.home .section .grid .pixel:nth-child(398) {
  animation-delay: -8.127s;
}
.home .section .grid .pixel:nth-child(399) {
  animation-delay: -2.322s;
}
.home .section .grid .pixel:nth-child(400) {
  animation-delay: -1.161s;
}

.footer {
  position: absolute;
  min-height: calc(25vh + 10px);
  width: 100vw;
  background-color: black;
  bottom: 0;
  z-index: 999999;
  width: 100vw;
  max-width: 100vw;
  min-width: 100vw;
  padding: 50px;
  display: flex;
  color: white;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.02em;
  font-family: "montreal", helvetica;
}
@media only screen and (max-width: 768px) {
  .footer {
    display: block;
    height: auto;
    min-height: unset;
    position: relative;
    padding: 36px;
    padding-bottom: 30px;
  }
}
.footer .footer__element {
  width: 33%;
  position: relative;
  padding: 0 25px;
  border-right: 1px solid #848484;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .footer .footer__element {
    border: none !important;
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
  }
}
.footer .footer__element:last-of-type {
  border: none;
}
.footer .footer__element .footer__content {
  align-self: flex-end;
}
.footer .footer__element .footer__content .footer__logo {
  height: 100px;
  display: block;
  margin-bottom: 30px;
}
.footer .footer__element .footer__content .footer__sponsors {
  max-width: 300px;
  display: block;
  margin-bottom: 30px;
}
.footer .footer__element .footer__content .sponsor-text {
  display: block;
  max-width: 415px;
}
.footer .footer__element .footer__content a {
  color: white;
  text-decoration: none;
}
.footer .footer__element .footer__content a:hover {
  opacity: 0.5;
}
.footer .footer__element .footer__content a.social {
  display: block;
  margin-bottom: 0.5em;
}

.teamPage {
  height: auto;
}
.teamPage .footer {
  margin-top: 3em;
  margin-left: 0px;
  padding-bottom: 30px;
  width: 100vw;
  z-index: 99999999;
  position: relative;
}
.teamPage .main-title {
  position: relative;
  top: 120px;
  left: 100px;
  z-index: 99;
  font-family: "rader";
  font-size: 42px;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .teamPage .main-title {
    font-size: 30px;
    position: relative;
    top: unset;
    left: unset;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
  }
}
.teamPage .team__grid {
  margin: 60px auto;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 50px;
  width: 100%;
  padding: 100px;
  padding-bottom: 0;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-columns: repeat(auto-fit, 400px);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
@media only screen and (max-width: 768px) {
  .teamPage .team__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 50px;
    margin-top: -40px;
  }
}
.teamPage .team__grid .team__item {
  font-family: sans-serif;
  font-size: 30px;
  margin-bottom: 2rem;
}
.teamPage .team__grid .team__item .team__name {
  display: table;
  padding: 0.02em 0.4em 0.2em 0.4em;
  font-family: "rader";
  font-size: 22px;
  color: white;
  background-color: black;
}
@-moz-document url-prefix() {
  .teamPage .team__grid .team__item .team__name {
    padding: 0.3em 0.4em 0.1em 0.4em;
  }
}
.teamPage .team__grid .team__item .team__title {
  display: table;
  margin-top: 0.3em;
  padding: 0.01em 0.3em 0.1em 0.3em;
  font-family: "rader";
  font-size: 17px;
  color: black;
  margin-bottom: 1rem;
}
.teamPage .team__grid .team__item .team__description {
  font-family: "montreal";
  font-size: 18px;
  color: black;
  line-height: 1.4em;
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 768px) {
  .teamPage .team__grid .team__item .team__description {
    line-height: 1.3em;
  }
}
@-moz-document url-prefix() {
  .teamPage .team__grid .team__item .team__description {
    line-height: 1.35em;
  }
}
.teamPage .team__grid .team__item .empty {
  background: #f2f2f2;
  position: relative;
  width: 100%;
  height: 100%;
}
.teamPage .team__grid .team__item .team__img--wrap {
  aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports not (aspect-ratio: 16/9) {
  .teamPage .team__grid .team__item .team__img--wrap::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .teamPage .team__grid .team__item .team__img--wrap::after {
    display: block;
    content: "";
    clear: both;
  }
}
.teamPage .team__grid .team__item .team__img--wrap .team__img {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  object-fit: cover;
  margin-bottom: -7px;
  object-position: center center;
}
.teamPage .contributors__grid {
  margin: 60px auto;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 50px;
  width: 100%;
  padding: 100px;
  padding-bottom: 0;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-columns: repeat(auto-fit, 200px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media only screen and (max-width: 768px) {
  .teamPage .contributors__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 50px;
    margin-top: -40px;
  }
}
.teamPage .contributors__grid .contributors__item {
  font-family: sans-serif;
  font-size: 30px;
  margin-bottom: 2rem;
}
.teamPage .contributors__grid .contributors__item .contributors__name {
  display: table;
  padding: 0.02em 0.4em 0.2em 0.4em;
  font-family: "rader";
  font-size: 22px;
  color: white;
  background-color: black;
}
@-moz-document url-prefix() {
  .teamPage .contributors__grid .contributors__item .contributors__name {
    padding: 0.3em 0.4em 0.1em 0.4em;
  }
}
.teamPage .contributors__grid .contributors__item .contributors__title {
  display: table;
  margin-top: 0.3em;
  padding: 0.01em 0.3em 0.1em 0.3em;
  font-family: "rader";
  font-size: 17px;
  color: black;
  margin-bottom: 1rem;
}
.teamPage .contributors__grid .contributors__item .empty {
  background: #f2f2f2;
  position: relative;
  width: 100%;
  height: 100%;
}
.teamPage .contributors__grid .contributors__item .contributors__img--wrap {
  aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports not (aspect-ratio: 16/9) {
  .teamPage .contributors__grid .contributors__item .contributors__img--wrap::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .teamPage .contributors__grid .contributors__item .contributors__img--wrap::after {
    display: block;
    content: "";
    clear: both;
  }
}
.teamPage .contributors__grid .contributors__item .contributors__img--wrap .contributors__img {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  object-fit: cover;
  margin-bottom: -7px;
  object-position: center center;
}
.teamPage .block__grid {
  margin: 0 auto;
  margin-bottom: 4rem;
  margin: 40px auto;
  margin-top: 0;
  width: 100%;
  padding: 100px;
}
@media only screen and (max-width: 768px) {
  .teamPage .block__grid {
    padding: 50px;
    margin-top: -40px;
  }
}
.teamPage .block__grid .grid__item {
  margin-bottom: 1.5em;
}
.teamPage .block__grid .grid__item .title {
  font-family: "rader";
  font-size: 22px;
}
.teamPage .block__grid .grid__item .subtitle {
  font-family: "montreal";
  font-size: 18px;
}
.teamPage .block__grid p {
  margin: 0;
}
@media (max-width: 768px) {
  .teamPage .block__grid {
    margin-bottom: 4rem;
  }
}
@media (max-width: 992px) {
  .teamPage .block__grid {
    grid-template-columns: 1fr 1fr !important;
    align-items: space-between;
  }
  .teamPage .block__grid .column--3,
.teamPage .block__grid .column--4,
.teamPage .block__grid .column--6,
.teamPage .block__grid .column--8 {
    grid-column: span 1 !important;
  }
}
@media (max-width: 768px) {
  .teamPage .block__grid {
    grid-template-columns: 1fr;
    display: block;
    align-items: flex-start;
  }
}

.projectsPage {
  padding-top: 120px;
}
.projectsPage .grid-wrapper {
  min-height: 100vh;
}
@media only screen and (max-width: 768px) {
  .projectsPage {
    padding-top: 50px;
  }
}
.projectsPage .footer {
  position: relative;
}
.projectsPage .main-title {
  position: relative;
  left: 100px;
  z-index: 99;
  font-family: "rader";
  font-size: 42px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  .projectsPage .main-title {
    font-size: 30px;
    position: relative;
    top: unset;
    left: unset;
    margin-top: 0px;
    margin-left: 50px;
    margin-bottom: 20px;
  }
}
.projectsPage .mobile-grid {
  position: relative;
  width: 100vw;
  padding: 50px;
  padding-top: 20px;
}
.projectsPage .mobile-grid .accordion {
  position: relative;
  font-family: "montreal", Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
.projectsPage .mobile-grid .accordion__title {
  display: flex;
  gap: 1em;
  position: relative;
  padding: 0.1em 0.6em 0.3em 0.6em;
  font-size: 18px;
  color: #000;
  font-weight: 300;
  margin-bottom: 0;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  background: #d5d5d5;
  font-family: "rader";
  margin-bottom: 5px;
}
.projectsPage .mobile-grid .accordion__title::after {
  flex-shrink: 0;
  content: "";
  position: relative;
  display: inline-block;
  margin-left: auto;
  top: 7px;
  transform-origin: center;
  transform: rotate(45deg);
  transition: all 0.3s ease-in-out;
  width: 0.5em;
  height: 0.5em;
  border-bottom: 0.125rem solid #000;
  border-right: 0.125rem solid #000;
}
.projectsPage .mobile-grid .accordion__title:hover {
  color: #000;
}
.projectsPage .mobile-grid .accordion__inner {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.projectsPage .mobile-grid .accordion__content {
  padding: 0 0;
}
.projectsPage .mobile-grid .accordion__content a {
  color: interhit;
  text-decoration: none;
}
.projectsPage .mobile-grid .accordion__content .interactive {
  margin-bottom: 30px;
}
.projectsPage .mobile-grid .accordion__content .interactive .img {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 0rem;
  z-index: 0;
}
.projectsPage .mobile-grid .accordion__content .interactive .img img {
  position: relative;
  width: calc(100% + 1px);
  height: auto;
  max-height: 300px;
  object-fit: cover;
}
@supports not (aspect-ratio: 16/9) {
  .projectsPage .mobile-grid .accordion__content .interactive .img::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .projectsPage .mobile-grid .accordion__content .interactive .img::after {
    display: block;
    content: "";
    clear: both;
  }
}
.projectsPage .mobile-grid .accordion__content .interactive:hover .view {
  color: white;
  background-color: black;
}
.projectsPage .mobile-grid .accordion__content .interactive .view {
  font-family: "rader";
  font-size: 18px;
  padding: 0.08em 1em;
  border: 1px solid black;
  color: black;
  margin-top: 1em;
  width: fit-content;
  transition: 0.3s ease-out;
}
@-moz-document url-prefix() {
  .projectsPage .mobile-grid .accordion__content .interactive .view {
    padding: 0.2em 1em 0.08em;
  }
}
.projectsPage .mobile-grid .accordion__content .interactive .view:hover {
  color: white;
  background-color: black;
}
.projectsPage .mobile-grid .accordion__content .interactive .title {
  font-family: "montreal";
  font-size: 22px;
  color: black;
  line-height: 1.15em;
  margin-bottom: 0.5rem;
}
.projectsPage .mobile-grid .accordion__content .interactive .description {
  font-family: "montreal";
  font-size: 16px;
  color: black;
  line-height: 1.4em;
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .projectsPage .mobile-grid .accordion__content .interactive .description {
    line-height: 1.3em;
  }
  @-moz-document url-prefix() {
    .projectsPage .mobile-grid .accordion__content .interactive .description {
      line-height: 1.35em;
    }
  }
}
.projectsPage .mobile-grid .accordion__content .interactive .date {
  color: black;
  font-size: 14px;
}
.projectsPage .mobile-grid .accordion__content .event {
  padding-top: 20px;
  margin-bottom: 15px;
  border-left: 1px solid black;
  background: #000000;
  padding: 20px;
}
.projectsPage .mobile-grid .accordion__content .event .type {
  background: #d5d5d5;
  color: #000000;
}
.projectsPage .mobile-grid .accordion__content .event .date {
  color: white;
  font-size: 14px;
  margin-bottom: 0.5em;
  opacity: 0.7;
}
.projectsPage .mobile-grid .accordion__content .event .title {
  font-family: "rader";
  font-size: 32px;
  color: white;
  line-height: 1.1em;
  margin-bottom: 1rem;
}
.projectsPage .mobile-grid .accordion__content .event .view {
  font-family: "rader";
  font-size: 18px;
  padding: 0.08em 1em;
  border: 1px solid white;
  color: white;
  margin-top: 1em;
  width: fit-content;
  transition: 0.3s ease-out;
  opacity: 0.7;
}
@-moz-document url-prefix() {
  .projectsPage .mobile-grid .accordion__content .event .view {
    padding: 0.2em 1em 0.08em;
  }
}
.projectsPage .mobile-grid .accordion__content .event .view:hover {
  color: black;
  background-color: white;
}
.projectsPage .mobile-grid .accordion__content .film {
  margin-bottom: 30px;
}
.projectsPage .mobile-grid .accordion__content .film .img {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 0rem;
  z-index: 0;
}
.projectsPage .mobile-grid .accordion__content .film .img img {
  position: relative;
  width: calc(100% + 1px);
  height: auto;
  max-height: 300px;
  object-fit: cover;
}
@supports not (aspect-ratio: 16/9) {
  .projectsPage .mobile-grid .accordion__content .film .img::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .projectsPage .mobile-grid .accordion__content .film .img::after {
    display: block;
    content: "";
    clear: both;
  }
}
.projectsPage .mobile-grid .accordion__content .film:hover .view {
  color: white;
  background-color: black;
}
.projectsPage .mobile-grid .accordion__content .film .view {
  font-family: "rader";
  font-size: 18px;
  padding: 0.08em 1em;
  border: 1px solid black;
  color: black;
  margin-top: 1em;
  width: fit-content;
  transition: 0.3s ease-out;
}
@-moz-document url-prefix() {
  .projectsPage .mobile-grid .accordion__content .film .view {
    padding: 0.2em 1em 0.08em;
  }
}
.projectsPage .mobile-grid .accordion__content .film .view:hover {
  color: white;
  background-color: black;
}
.projectsPage .mobile-grid .accordion__content .film .title {
  font-family: "montreal";
  font-size: 22px;
  color: black;
  line-height: 1.15em;
  margin-bottom: 0.5rem;
}
.projectsPage .mobile-grid .accordion__content .film .description {
  font-family: "montreal";
  font-size: 16px;
  color: black;
  line-height: 1.4em;
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .projectsPage .mobile-grid .accordion__content .film .description {
    line-height: 1.3em;
  }
  @-moz-document url-prefix() {
    .projectsPage .mobile-grid .accordion__content .film .description {
      line-height: 1.35em;
    }
  }
}
.projectsPage .mobile-grid .accordion__content .film .date {
  color: black;
  font-size: 14px;
}
.projectsPage .mobile-grid .accordion__content .event {
  padding-top: 20px;
  margin-bottom: 15px;
  border-left: 1px solid black;
  background: #000000;
  padding: 20px;
}
.projectsPage .mobile-grid .accordion__content .event .type {
  background: #d5d5d5;
  color: #000000;
}
.projectsPage .mobile-grid .accordion__content .event .date {
  color: white;
  font-size: 14px;
  margin-bottom: 0.5em;
  opacity: 0.7;
}
.projectsPage .mobile-grid .accordion__content .event .title {
  font-family: "rader";
  font-size: 32px;
  color: white;
  line-height: 1.1em;
  margin-bottom: 1rem;
}
.projectsPage .mobile-grid .accordion__content .event .view {
  font-family: "rader";
  font-size: 18px;
  padding: 0.08em 1em;
  border: 1px solid white;
  color: white;
  margin-top: 1em;
  width: fit-content;
  transition: 0.3s ease-out;
  opacity: 0.7;
}
@-moz-document url-prefix() {
  .projectsPage .mobile-grid .accordion__content .event .view {
    padding: 0.2em 1em 0.08em;
  }
}
.projectsPage .mobile-grid .accordion__content .event .view:hover {
  color: black;
  background-color: white;
}
.projectsPage .mobile-grid .accordion__content .publication {
  padding-top: 20px;
  margin-bottom: 15px;
  background: #4e4e4e;
  padding: 20px;
}
.projectsPage .mobile-grid .accordion__content .publication.na {
  background: #d5d5d5;
  color: black !important;
}
.projectsPage .mobile-grid .accordion__content .publication.na .description {
  color: black;
}
.projectsPage .mobile-grid .accordion__content .publication.na .date {
  color: black;
}
.projectsPage .mobile-grid .accordion__content .publication.na .title {
  color: black;
}
.projectsPage .mobile-grid .accordion__content .publication.na .view {
  font-family: "rader";
  font-size: 18px;
  padding: 0.08em 1em;
  border: 1px solid black;
  color: black;
  margin-top: 1em;
  width: fit-content;
  transition: 0.3s ease-out;
  opacity: 0.7;
}
@-moz-document url-prefix() {
  .projectsPage .mobile-grid .accordion__content .publication.na .view {
    padding: 0.2em 1em 0.08em;
  }
}
.projectsPage .mobile-grid .accordion__content .publication.na .view:hover {
  color: white;
  background-color: black;
}
.projectsPage .mobile-grid .accordion__content .publication .type {
  background: #d5d5d5;
  color: #000000;
}
.projectsPage .mobile-grid .accordion__content .publication .description {
  font-size: 14px;
  margin-top: 8em;
  color: white;
}
.projectsPage .mobile-grid .accordion__content .publication .date {
  color: white;
  font-size: 14px;
  margin-bottom: 0.5em;
  opacity: 0.7;
}
.projectsPage .mobile-grid .accordion__content .publication .title {
  font-family: "rader";
  font-size: 32px;
  color: white;
  line-height: 1.1em;
  margin-bottom: 1rem;
}
.projectsPage .mobile-grid .accordion__content .publication .view {
  font-family: "rader";
  font-size: 18px;
  padding: 0.08em 1em;
  border: 1px solid white;
  color: white;
  margin-top: 1em;
  width: fit-content;
  transition: 0.3s ease-out;
  opacity: 0.7;
}
@-moz-document url-prefix() {
  .projectsPage .mobile-grid .accordion__content .publication .view {
    padding: 0.2em 1em 0.08em;
  }
}
.projectsPage .mobile-grid .accordion__content .publication .view:hover {
  color: black;
  background-color: white;
}
.projectsPage .mobile-grid .accordion--opened .accordion__title::after {
  transform: translateY(50%) rotate(225deg);
  border-color: white;
}
.projectsPage .mobile-grid .accordion--opened .accordion__title {
  color: white;
  background: black;
}
.projectsPage .mobile-grid .accordion + .accordion {
  border-top: none;
}

#cat-dropdown {
  margin-right: 0.5em;
}

.dropdown {
  display: inline-block;
  position: relative;
  font-size: 16px;
  margin-left: 5px;
  font-family: "montreal";
}

.dropdown-button {
  background: #fff;
  color: #000;
  letter-spacing: 0.025rem;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  margin-left: -10px;
  border-radius: 0px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.dropdown-button::after {
  flex-shrink: 0;
  content: "";
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-weight: 300;
  top: -0.2em;
  transform-origin: center;
  transform: rotate(45deg);
  transition: all 0.3s ease-in-out;
  width: 0.5em;
  height: 0.5em;
  right: 0.3em;
  border-bottom: 0.125rem solid black;
  border-right: 0.125rem solid black;
  font-size: 18px;
}

.dropdown-button:hover {
  background: #f2f2f2;
  transition: background 0.3s ease;
}

.triangle {
  margin-left: 10px;
  pointer-events: none;
  font-size: 50%;
  position: absolute;
  right: 10px;
  padding-left: 10px;
  margin-left: 100px;
  bottom: 0.5em;
  margin-top: auto;
  margin-bottom: auto;
  color: #fff;
}
.triangle .material-icons {
  color: black;
}

.dropdown ul.active {
  visibility: visible;
  transition: all 0.3s ease;
  transform: scaleY(1);
  color: #333;
}

.dropdown ul {
  visibility: hidden;
  overflow: hidden;
  color: #fff;
  transform-origin: top;
  padding: 0;
  list-style: none;
  transform: scaleY(0);
  box-shadow: 0px 2px 6px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  margin-top: 2px;
  top: 100%;
  min-width: 90%;
  transition: all 0.3s ease;
}

.dropdown li {
  background: #fff;
  padding: 8px 15px 8px 15px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
  font-size: 18px;
}

.dropdown li.check {
  background: #f6f6f6;
}

.dropdown li:hover {
  background: #000000;
  color: white;
  transition: background 0.2s ease;
}

.filter-field {
  border: none !important;
  font-size: 16px;
  height: auto;
  margin-right: 20px;
  display: inline-block;
  font-family: "montreal";
  text-transform: uppercase;
  padding: 10px 0px !important;
  font-family: "montreal";
  line-height: unset;
  background-color: white;
  color: black !important;
  border-radius: 0 !important;
  transition: 0.3s ease-out !important;
  width: auto !important;
}
.filter-field:hover {
  background: #f2f2f2;
}
.filter-field:focus {
  outline: none;
}
.filter-field:active {
  outline: none;
}

.filter-controls {
  width: 100%;
  padding-right: 100px;
  margin-bottom: 10px;
  padding-bottom: 0px;
  position: relative;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.filter-controls .control {
  display: block;
  margin: 0 10px;
}

.filter-controls .control * {
  box-sizing: border-box;
}

.filter-controls .control .form-control {
  width: 100%;
  height: 40px;
  padding: 0 20px;
  border: 2px solid #ccc;
  border-radius: 0px;
  background-color: #fff;
  color: #666;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "montreal";
}

.search-field {
  font-family: "montreal";
  border: none !important;
  width: 70px !important;
  font-size: 18px;
  padding: 20px 0px !important;
  color: black !important;
  border-radius: 0 !important;
  transition: 0.3s ease-out !important;
  width: 80px !important;
  border-bottom: 1px solid white !important;
}
.search-field::placeholder {
  color: black;
  opacity: 1;
  /* Firefox */
}
.search-field:hover {
  width: 200px !important;
  background-color: #f2f2f2 !important;
  padding: 20px 10px !important;
  border-bottom: 1px solid black !important;
}
.search-field:focus {
  outline: 0 !important;
  border-color: black !important;
  border: 0 !important;
  border-bottom: 1px solid black !important;
}

.filter-controls .control .form-control:focus {
  outline: 0;
  border-color: #0caaf5;
}

.list-nav {
  float: left;
  margin-left: 100px;
  margin-top: 0px;
  display: flex;
  align-items: center;
}
.list-nav .sort-title {
  font-family: "montreal";
  padding: 20px 0;
  margin-left: 10px;
}
.list-nav .list-view,
.list-nav .grid-view {
  margin-right: 10px;
  font-family: "montreal";
  padding: 20px 0;
  cursor: pointer;
}
.list-nav .list-view:before,
.list-nav .grid-view:before {
  content: "□";
  margin-right: 5px;
}
.list-nav .list-view:hover:before, .list-nav .list-view.active:before,
.list-nav .grid-view:hover:before,
.list-nav .grid-view.active:before {
  content: "■";
  margin-right: 5px;
}

.sort-nav {
  margin-top: 0px;
  display: flex;
  align-self: flex-end;
  flex-wrap: wrap;
  align-items: center;
}
.sort-nav .sort-title {
  font-family: "montreal";
  padding: 20px 0;
  margin-right: 10px;
}
.sort-nav .date-view,
.sort-nav .type-view,
.sort-nav .title-view {
  margin-right: 10px;
  font-family: "montreal";
  padding: 20px 0;
  cursor: pointer;
}
.sort-nav .date-view:before,
.sort-nav .type-view:before,
.sort-nav .title-view:before {
  content: "□";
  margin-right: 5px;
}
.sort-nav .date-view:hover:before, .sort-nav .date-view.active:before,
.sort-nav .type-view:hover:before,
.sort-nav .type-view.active:before,
.sort-nav .title-view:hover:before,
.sort-nav .title-view.active:before {
  content: "■";
  margin-right: 5px;
}

.projects-grid {
  position: relative;
  width: calc(100vw - 150px);
  max-width: 100%;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 100px;
}
.projects-grid.list {
  width: calc(100vw - 200px);
}
.projects-grid.list .project__item {
  width: calc(100% - 20px) !important;
  margin: 0;
  background: white;
  aspect-ratio: unset !important;
  padding: 10px;
  border: none;
  border-bottom: 1px solid black;
  display: flex !important;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  transition: background 0.3s ease-out, opacity 0.3s ease-out;
}
.projects-grid.list .project__item.muuri-item-hidden {
  opacity: 0;
  pointer-events: none;
}
.projects-grid.list .project__item:hover .title,
.projects-grid.list .project__item:hover .type,
.projects-grid.list .project__item:hover .authors,
.projects-grid.list .project__item:hover .date {
  color: white !important;
}
.projects-grid.list .project__item:hover.event {
  background: #d5d5d5;
}
.projects-grid.list .project__item:hover.event .title,
.projects-grid.list .project__item:hover.event .type,
.projects-grid.list .project__item:hover.event .authors,
.projects-grid.list .project__item:hover.event .date {
  color: black !important;
}
.projects-grid.list .project__item:hover.na-publication {
  background: #f2f2f2;
}
.projects-grid.list .project__item:hover.na-publication .title,
.projects-grid.list .project__item:hover.na-publication .type,
.projects-grid.list .project__item:hover.na-publication .authors,
.projects-grid.list .project__item:hover.na-publication .date {
  color: black !important;
}
.projects-grid.list .project__item:hover.interactive {
  background: #000000;
  color: white !important;
}
.projects-grid.list .project__item:hover.a-publication {
  background: #4e4e4e;
  color: white !important;
}
.projects-grid.list .project__item:hover.film {
  background: #bcbcbc;
}
.projects-grid.list .project__item:hover.film .title,
.projects-grid.list .project__item:hover.film .type,
.projects-grid.list .project__item:hover.film .authors,
.projects-grid.list .project__item:hover.film .date {
  color: black !important;
}
.projects-grid.list .project__item .view {
  display: none;
}
.projects-grid.list .project__item .type {
  color: black;
  font-size: 22px !important;
  margin: 0;
  position: relative;
  top: 0;
  right: 0;
  background: transparent !important;
  padding: 0;
  width: 15%;
  line-height: 1.1em;
  order: 1;
  letter-spacing: 0.02em;
}
@-moz-document url-prefix() {
  .projects-grid.list .project__item .type {
    padding-top: 0.2em;
  }
}
.projects-grid.list .project__item .img {
  display: none;
}
.projects-grid.list .project__item .title {
  color: black !important;
  font-family: "montreal";
  font-size: 20px !important;
  margin: 0;
  width: 40%;
  order: 2;
  line-height: 1.4em;
  letter-spacing: 0.02em;
}
.projects-grid.list .project__item .authors {
  color: black !important;
  font-family: "montreal";
  font-size: 20px !important;
  margin: 0;
  display: block;
  width: 30%;
  order: 3;
  letter-spacing: 0.02em;
}
.projects-grid.list .project__item .date {
  color: black !important;
  font-family: "montreal";
  font-size: 20px !important;
  margin: 0;
  display: block;
  width: auto;
  order: 4;
  width: calc(12% - 10px);
  text-align: right;
  letter-spacing: 0.02em;
}
.projects-grid.list .project__item .description {
  display: none;
}

.project__item {
  position: absolute;
  width: calc(33% - 50px);
  height: auto;
  margin: 0 25px 50px 25px;
  z-index: 1;
  transition: background 0.3s ease-out, opacity 0.3s ease-out;
  text-decoration: none;
}
.project__item.muuri-item-hidden {
  display: unset !important;
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 1100px) {
  .project__item {
    width: calc(50% - 50px);
  }
}
@media (max-width: 768px) {
  .project__item {
    margin: 0 0px 50px 0px;
    width: calc(100% - 0px);
  }
}
.project__item:hover {
  opacity: 0.85;
}
.project__item .type {
  font-family: "rader";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.02em 0.4em 0.2em 0.4em;
  font-family: "rader";
  font-size: 22px;
  color: white;
}
@-moz-document url-prefix() {
  .project__item .type {
    padding: 0.3em 0.4em 0.1em 0.4em;
  }
}
@media only screen and (max-width: 1100px) {
  .project__item .type {
    font-size: 18px;
  }
}
.project__item .authors {
  display: none;
}
.project__item .date {
  font-family: "montreal";
  font-size: 18px;
}
.project__item.interactive {
  padding-left: 20px;
  border-left: 1px solid black;
}
.project__item.interactive .img {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  aspect-ratio: 6/4;
  margin-bottom: 0.8rem;
  z-index: 0;
}
.project__item.interactive .img img {
  position: relative;
  width: calc(100% + 1px);
  height: auto;
  object-fit: cover;
  aspect-ratio: 6/4;
}
@supports not (aspect-ratio: 6/4) {
  .project__item.interactive .img::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .project__item.interactive .img::after {
    display: block;
    content: "";
    clear: both;
  }
}
.project__item.interactive:hover .view {
  color: white;
  background-color: black;
}
.project__item.interactive .view {
  font-family: "rader";
  font-size: 22px;
  padding: 0.08em 1em;
  border: 1px solid black;
  color: black;
  margin-top: 1.5em;
  width: fit-content;
  transition: 0.3s ease-out;
}
@-moz-document url-prefix() {
  .project__item.interactive .view {
    padding: 0.2em 1em 0.08em;
  }
}
.project__item.interactive .view:hover {
  color: white;
  background-color: black;
}
.project__item.interactive .title {
  font-family: "montreal";
  font-size: 30px;
  color: black;
  line-height: 1.15em;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.project__item.interactive .description {
  font-family: "montreal";
  font-size: 18px;
  color: black;
  line-height: 1.3em;
  letter-spacing: 0.02em;
}
@-moz-document url-prefix() {
  .project__item.interactive .description {
    line-height: 1.3em;
  }
}
.project__item.interactive .type {
  top: 0;
  right: 0;
  width: fit-content;
  background: #000000;
  z-index: 99;
}
.project__item.interactive .date {
  color: black;
  margin-top: 1em;
  font-size: 16px;
}
.project__item.film {
  padding-left: 20px;
  border-left: 1px solid black;
}
.project__item.film .img {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 0.8rem;
  z-index: 0;
}
.project__item.film .img img {
  position: relative;
  width: calc(100% + 1px);
  height: auto;
  max-height: 300px;
  object-fit: cover;
}
@supports not (aspect-ratio: 16/9) {
  .project__item.film .img::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .project__item.film .img::after {
    display: block;
    content: "";
    clear: both;
  }
}
.project__item.film .title {
  font-family: "montreal";
  font-size: 30px;
  color: black;
  line-height: 1.2em;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.project__item.film .description {
  font-family: "montreal";
  font-size: 18px;
  color: black;
  line-height: 1.4em;
  letter-spacing: 0.02em;
}
@-moz-document url-prefix() {
  .project__item.film .description {
    line-height: 1.4em;
  }
}
.project__item.film .type {
  top: 0;
  right: 0;
  width: fit-content;
  background: #989898;
  z-index: 99;
  color: black;
}
.project__item.film .date {
  color: black;
  margin-top: 1em;
  font-size: 16px;
}
.project__item.film:hover .view {
  color: white;
  background-color: black;
}
.project__item.film .view {
  font-family: "rader";
  font-size: 22px;
  padding: 0.08em 1em;
  border: 1px solid black;
  color: black;
  margin-top: 1.5em;
  width: fit-content;
  transition: 0.3s ease-out;
}
@-moz-document url-prefix() {
  .project__item.film .view {
    padding: 0.2em 1em 0.08em;
  }
}
.project__item.film .view:hover {
  color: white;
  background-color: black;
}
.project__item.event {
  padding-left: 20px;
  border-left: 1px solid black;
  background: #000000;
  padding: 20px;
}
.project__item.event .type {
  background: #d5d5d5;
  color: #000000;
}
.project__item.event .date {
  color: white;
  margin-top: -0.5em;
  margin-bottom: 0.5em;
  margin-top: 0em;
  margin-bottom: 0.8em;
  font-size: 16px;
}
.project__item.event .title {
  font-family: "rader";
  font-size: 2.5vw;
  color: white;
  line-height: 1.15em;
  margin-bottom: 0.6rem;
}
.project__item.a-publication {
  padding-left: 20px;
  background: #4e4e4e;
  padding: 20px;
  aspect-ratio: 1/1.25;
}
@supports not (aspect-ratio: 1/1.25) {
  .project__item.a-publication::before {
    float: left;
    padding-top: 125%;
    content: "";
  }
  .project__item.a-publication::after {
    display: block;
    content: "";
    clear: both;
  }
}
.project__item.a-publication .description {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 18px;
  line-height: 1.3em;
  max-width: calc(100% - 40px);
  letter-spacing: 0.02em;
  font-family: "montreal";
  color: rgba(255, 255, 255, 0.5);
}
@media only screen and (max-width: 1100px) {
  .project__item.a-publication .description {
    font-size: 15px;
  }
}
.project__item.a-publication .title {
  font-family: "rader";
  font-size: 2.5vw;
  color: white;
  line-height: 1em;
  margin-bottom: 1rem;
  margin-top: 0.2em;
}
@media only screen and (max-width: 1100px) {
  .project__item.a-publication .title {
    font-size: 24px;
  }
}
.project__item.a-publication .date {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0em;
  margin-bottom: 0.5em;
  font-size: 16px;
}
.project__item.a-publication .type {
  background: #989898 !important;
  color: black;
}
.project__item.na-publication {
  padding-left: 20px;
  background: #f2f2f2;
  padding: 20px;
  aspect-ratio: 1/1.25;
}
@supports not (aspect-ratio: 1/1.25) {
  .project__item.na-publication::before {
    float: left;
    padding-top: 125%;
    content: "";
  }
  .project__item.na-publication::after {
    display: block;
    content: "";
    clear: both;
  }
}
.project__item.na-publication .description {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 18px;
  line-height: 1.3em;
  max-width: calc(100% - 40px);
  letter-spacing: 0.02em;
  font-family: "montreal";
  color: rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 1100px) {
  .project__item.na-publication .description {
    font-size: 15px;
  }
}
.project__item.na-publication .title {
  font-family: "rader";
  font-size: 2.5vw;
  color: black;
  line-height: 1em;
  margin-bottom: 1rem;
  margin-top: 0.2em;
}
@media only screen and (max-width: 1100px) {
  .project__item.na-publication .title {
    font-size: 24px;
  }
}
.project__item.na-publication .date {
  color: rgba(0, 0, 0, 0.5);
  margin-top: 0em;
  margin-bottom: 0.5em;
  font-size: 16px !important;
}
.project__item.na-publication .type {
  background: #4e4e4e;
}

.item.blue .custom-content {
  border-color: #0caaf5;
  color: #0caaf5;
}

.item.red .custom-content {
  border-color: #f54487;
  color: #f54487;
}

.item.green .custom-content {
  border-color: #00de73;
  color: #00de73;
}

.item.w2 {
  width: 208px;
}

.item.h2 {
  height: 208px;
}

.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
}

.custom-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: #fff;
  color: #666;
  border: 2px solid;
  border-radius: 3px;
}

.item.muuri-item-dragging {
  z-index: 3;
  transition: none;
}

.item.muuri-item-releasing {
  z-index: 2;
}

@media (max-width: 877px) {
  .item {
    width: calc(33.33% - 11px);
    height: calc(33.33vw - 11px);
  }

  .item.w2 {
    width: calc(33.33% - 11px);
  }

  .item.h2 {
    height: calc(33.33vw - 11px);
  }
}
@media (max-width: 640px) {
  .item {
    width: calc(50% - 10px);
    height: calc(50vw - 10px);
  }

  .item.w2 {
    width: calc(50% - 10px);
  }

  .item.h2 {
    height: calc(50vw - 10px);
  }
}
.film__frame {
  width: calc(100vw - 50px);
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  background: black;
}
@media only screen and (max-width: 768px) {
  .film__frame {
    width: calc(100vw - 36px);
  }
}
.film__frame iframe {
  width: 100%;
  height: 100%;
  position: relative;
}

.interactive__frame {
  width: calc(100vw - 50px);
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  background: black;
}
@media only screen and (max-width: 768px) {
  .interactive__frame {
    width: calc(100vw - 36px);
  }
}
.interactive__frame iframe {
  width: 100%;
  height: 100%;
  position: relative;
}

.logoV {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: 0.3s ease-out;
  will-change: filter;
}
.logoV:hover {
  filter: invert(1);
}
.logoV img {
  width: 50px;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .logoV img {
    width: 36px;
  }
}

.bottomNav {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.bottomNav .fullscreen {
  position: relative;
  width: 50px;
  user-select: none;
  height: 50px;
  z-index: -1;
  transition: 0.3s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
}
@media only screen and (max-width: 768px) {
  .bottomNav .fullscreen {
    width: 36px;
  }
}
.bottomNav .fullscreen:hover {
  background: white;
}
.bottomNav .fullscreen .material-icons {
  font-size: 22px;
}
.bottomNav .backBtn {
  writing-mode: vertical-rl;
  user-select: none;
  text-orientation: mixed;
  color: white;
  background: black;
  transition: 0.3s ease-out;
  font-family: "rader";
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1em 0;
  text-decoration: none;
  font-size: 26px;
}
@media only screen and (max-width: 768px) {
  .bottomNav .backBtn {
    width: 36px;
    font-size: 18px;
  }
}
.bottomNav .backBtn:hover {
  color: black;
  background: white;
}
.bottomNav .informationBtn {
  user-select: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: black;
  background: #4e4e4e;
  transition: 0.3s ease-out;
  font-family: "rader";
  width: 50px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
  padding: 1em 0;
  text-decoration: none;
  font-size: 26px;
  cursor: pointer;
  position: relative;
  z-index: 999;
}
@media only screen and (max-width: 768px) {
  .bottomNav .informationBtn {
    width: 36px;
    font-size: 18px;
  }
}
.bottomNav .informationBtn:hover {
  color: black;
  background: white;
}

.film .information {
  background: #f2f2f2;
  color: black;
}
.film .informationBtn {
  background: #f2f2f2;
  color: black;
}

.information {
  position: fixed;
  left: calc(-25vw - 50px);
  z-index: 0;
  bottom: 0;
  width: 25vw;
  background: #4e4e4e;
  color: white;
  height: 50vh;
  overflow-y: auto;
  padding: 1.5em;
  transition: 0.3s ease-out;
}
@media only screen and (max-width: 768px) {
  .information {
    left: calc(-100vw - 36px);
    width: calc(100vw - 36px);
    z-index: 0;
  }
  .information.active {
    left: 36px !important;
  }
}
.information.active {
  left: 50px;
}
.information .information__title {
  position: relative;
  font-size: 2vw;
  font-family: "rader";
  line-height: 1.1em;
  margin-bottom: 1em;
}
@media only screen and (max-width: 768px) {
  .information .information__title {
    font-size: 24px;
  }
}
.information .information__body {
  position: relative;
  font-family: "montreal";
  font-size: 18px;
  line-height: 1.3em;
  letter-spacing: 0.02em;
}

.eventPage {
  height: auto;
  color: black !important;
  min-height: 100vh;
  padding-right: 50vw;
}
.eventPage .footer {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .eventPage {
    padding-right: 50px;
  }
}
.eventPage .bg {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 50vw;
  background: #f2f2f2;
  pointer-events: none;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .eventPage .bg {
    display: none;
  }
}
.eventPage .main-title {
  color: black;
  position: relative;
  top: 120px;
  left: 100px;
  z-index: 99;
  font-family: "rader";
  font-size: 42px;
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 768px) {
  .eventPage .main-title {
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 99;
    font-family: "rader";
    font-size: 30px;
    margin-bottom: 1rem;
  }
}
.eventPage .event-title {
  color: black;
  position: relative;
  top: 120px;
  left: 100px;
  z-index: 99;
  padding-right: 50px;
  width: calc(50vw - 100px);
  font-family: "montreal";
  font-size: calc(2vh + 1.7vw);
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .eventPage .event-title {
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 99;
    width: 100%;
    font-size: 32px;
    margin-bottom: 36px;
  }
}
.eventPage .blocks {
  padding-left: 100px;
  position: relative;
  margin-top: 200px;
  margin-bottom: 100px;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks {
    margin-top: 100px;
    padding-left: 50px;
  }
}
.eventPage .blocks .block {
  margin-bottom: 50px;
}
.eventPage .blocks .img {
  position: relative;
  width: calc(50vw - 150px);
  margin-top: 50px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .img {
    width: calc(100vw - 100px);
  }
}
.eventPage .blocks .img .caption {
  font-family: "montreal";
  font-size: 16px;
  margin-top: 0.5em;
  max-width: calc(50vw - 150px);
  font-style: italic;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .img .caption {
    width: calc(100vw - 100px);
    max-width: 100%;
    font-size: 16px;
  }
}
.eventPage .blocks .img.fullwidth {
  width: 100vw;
  margin-left: -100px;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .img.fullwidth {
    width: calc(100% + 36px);
    margin-left: -15px;
    width: calc(100vw - 72px);
    margin-left: -14px;
  }
}
.eventPage .blocks .img.fullwidth .caption {
  margin-left: 100px;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .img.fullwidth .caption {
    width: calc(100vw - 100px);
    margin-left: 15px;
  }
}
.eventPage .blocks .img img {
  position: relative;
  width: 100%;
  height: auto;
}
.eventPage .blocks .vid {
  position: relative;
  width: calc(50vw - 150px);
  margin-top: 50px;
  margin-bottom: 50px;
  aspect-ratio: 16/9;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .vid {
    width: calc(100vw - 100px);
  }
}
.eventPage .blocks .vid .caption {
  font-family: "montreal";
  font-size: 16px;
  margin-top: 0.5em;
  max-width: calc(50vw - 150px);
  font-style: italic;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .vid .caption {
    width: calc(100vw - 100px);
    max-width: 100%;
    font-size: 16px;
  }
}
.eventPage .blocks .vid.fullwidth {
  width: 100vw;
  margin-left: -100px;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .vid.fullwidth {
    width: calc(100% + 36px);
    margin-left: -15px;
    width: calc(100vw - 72px);
    margin-left: -14px;
  }
}
.eventPage .blocks .vid.fullwidth .caption {
  margin-left: 100px;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .vid.fullwidth .caption {
    width: calc(100vw - 100px);
    margin-left: 15px;
  }
}
.eventPage .blocks .vid iframe {
  width: 100%;
  height: 100%;
  position: relative;
}
.eventPage .blocks .paragraph {
  position: relative;
  width: calc(50vw - 150px);
  font-family: "montreal";
  font-size: 18px;
  color: black;
  line-height: 1.4em;
  letter-spacing: 0.02em;
}
@-moz-document url-prefix() {
  .eventPage .blocks .paragraph {
    line-height: 1.4em;
  }
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .paragraph {
    width: calc(100vw - 100px);
    font-size: 18px;
    line-height: 1.3em;
  }
}
.eventPage .blocks .paragraph a {
  color: black;
}
.eventPage .blocks .paragraph h1,
.eventPage .blocks .paragraph h2,
.eventPage .blocks .paragraph h3,
.eventPage .blocks .paragraph h4,
.eventPage .blocks .paragraph h5,
.eventPage .blocks .paragraph h6 {
  font-weight: normal;
  font-family: "rader";
  line-height: 1.15em;
}
.eventPage .blocks .paragraph h1 {
  font-size: 40px !important;
  font-size: calc(2vh + 1.7vw);
  line-height: 1.15em;
  letter-spacing: 0.01em;
  margin-top: 0.3em;
}
@media only screen and (max-width: 768px) {
  .eventPage .blocks .paragraph h1 {
    font-size: 30px;
  }
}
@-moz-document url-prefix() {
  .eventPage .blocks .paragraph h1 {
    line-height: 1.15em;
    margin-top: 0.2em;
  }
}

.form-block-message {
  color: black !important;
  font-family: "montreal";
  font-size: 14px;
}

.form-block-fatal {
  color: #d26762 !important;
}

.form-block {
  font-family: "montreal";
  font-size: 14px;
}
.form-block .form-block-field {
  margin-bottom: 1em;
}
.form-block .form-block-field textarea {
  background: rgba(0, 0, 0, 0);
  padding: 0.5em;
  outline: none;
  border: none;
  width: auto;
  font-family: "montreal";
  color: black;
  width: calc(80% - 2em);
  border: 1px solid black;
  border-radius: 0;
  min-height: 90px;
}
.form-block .form-block-field input {
  background: rgba(0, 0, 0, 0);
  padding: 0.5em;
  outline: none;
  border: none;
  width: auto;
  color: black;
  width: calc(80% - 2em);
  border-radius: 0px;
  border: 1px solid black;
  font-family: "montreal";
}
.form-block .form-block-field label {
  width: auto;
  margin-right: 1em;
  padding: 0.5em 0;
  font-weight: 400;
  position: relative;
  display: block;
}
.form-block .form-block-field .form-block-field-invalid,
.form-block .form-block-field .form-block-invalid {
  color: #d26762;
}
.form-block .form-block-submit input[type=submit] {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  border-radius: 0;
}
.form-block .form-block-submit input[type=button] {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  border-radius: 0;
}
.form-block .form-block-submit input {
  outline: none;
  border: none;
  background: black;
  color: white;
  color: white;
  border: 1px solid;
  cursor: pointer;
  padding: 0.3em 0.8em;
  font-size: 20px;
  font-family: "rader";
  -webkit-border-radius: 0px;
  -webkit-appearance: none;
}
@-moz-document url-prefix() {
  .form-block .form-block-submit input {
    padding: 0.4em 0.7em 0.3em 0.7em;
  }
}
.form-block .form-block-submit input:hover {
  opacity: 0.5;
}