section.banner-title .mobile-nav {
  pointer-events: all;
  position: relative;
  z-index: 2;
}
/* ----- fonts ----- */
@font-face {
  font-family: "Rand";
  src: url("fonts/Rand/Rand-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rand";
  src: url("fonts/Rand/Rand-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Rand";
  src: url("fonts/Rand/Rand-MediumItalic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

/* ----- vars ----- */
:root {
  --color-light-1: rgb(235, 242, 237);
  --color-light-2: rgb(199, 213, 204);
  --color-light-3: rgb(171, 184, 175);

  --color-dark: rgb(0, 0, 0);

  --spacing-xs: 5px;
  --spacing-m: 20px;

  --font-s: 16px;
  --font-m: 22px;
  --font-l: 42px;
  --font-xl: 62px;
}

/* ----- resets ----- */
.mobileMarker,
.menuOverlay,
.lightboxOverlay,
.lightbox,
.navbar,
.menuHolder,
.footerHolder,
.mainFooter {
  display: none !important;
}

.fullContainer {
  margin: 0;
}

header {
  position: unset;
  top: unset;
  background-color: unset;
  z-index: unset;
}

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

li {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

strong {
  font-family: inherit;
  letter-spacing: unset;
  font-weight: bold;
}

button {
  background-color: unset;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* ----- utils ----- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.bg-dark {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

.bg-light-1 {
  background-color: var(--color-light-1);
}

.bg-light-2 {
  background-color: var(--color-light-2);
}

.bg-light-3 {
  background-color: var(--color-light-3);
}

.min-height-100 {
  min-height: 100vh;
}

.hover:hover {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

.mobile-only {
  display: none;
}

.underline {
  border-bottom: 3px solid var(--color-dark);
}

/* ----- general ----- */
* {
  line-height: 1;
  font-family: "Rand", sans-serif;
}

body {
  background-color: var(--color-light-1);
  font-size: var(--font-m);
}

/* ----- background video ----- */
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -20;
  overflow: hidden;
  /* pointer-events: none; */
}

.background-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- header ----- */
header {
  padding: var(--spacing-m);
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}

header h1 a {
  display: flex;
  gap: var(--spacing-xs);
}

header h1 a:hover span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

header nav ul {
  display: flex;
  gap: var(--spacing-xs);
}

/* ----- main ----- */
.main-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.left-placeholder {
  width: 50%;
  height: 100%;
  pointer-events: none;
}

main {
  width: 50%;
  padding: var(--spacing-m);
  font-size: var(--font-s);
  z-index: 10;
}

main p {
  line-height: 1.2;
  margin-bottom: var(--spacing-m);
}

main p span {
  display: inline;
  background-color: var(--color-light-2);
}

main.legal p span {
  background-color: unset;
}

/* ----- banners ----- */
section.banner-title {
  padding: var(--spacing-m);
  position: fixed;
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: -10;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.banner-title a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  pointer-events: all;
  width: fit-content;
}

section.banner-title a:hover span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

section.banner-title span {
  display: block;
  width: fit-content;
  font-size: var(--font-xl);
}

.mobile-nav {
  margin-top: calc(2 * var(--spacing-m));
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.mobile-nav ul li {
  width: fit-content;
}

.mobile-language-switcher {
  display: flex;
  gap: var(--spacing-xs);
}

section.banner-apply {
  /* background: #e4f0e4;
  background: linear-gradient(
    0deg,
    var(--color-light-2) 0%,
    rgba(178, 197, 192, 1) 84%,
    rgba(148, 195, 192, 1) 90%,
    rgba(128, 197, 181, 1) 94%,
    rgba(102, 221, 80, 1) 97%
  ); */
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50%;
  /* max-width: 50%; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  /* gap: var(--spacing-m); */
}

.banner-apply-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pinned-logos {
  display: flex;
  align-items: flex-end;
}

.pinned-logos a {
  font-size: unset !important;
  line-height: unset !important;
}

.pinned-sponsor img {
  max-height: 40px;
}

.banner-apply-links ul {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-end;
  padding: var(--spacing-m);
  flex-wrap: wrap;
}

.banner-apply-links ul li {
  line-height: 1.2;
}

.credits-wrapper-section {
  border-top: 2px solid var(--color-dark);
  margin-top: calc(var(--spacing-m) * 2);
  padding-top: calc(var(--spacing-m) * 2);
  padding-bottom: var(--spacing-m);
}

.credits {
  padding-top: var(--spacing-m);
  display: flex;
  gap: var(--spacing-m);
  pointer-events: all;
  flex-wrap: wrap;
}

.credits-section-header {
  font-size: var(--font-s);
  width: fit-content;
}

.credits-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.credits-section-images {
  flex-shrink: 0;
  width: 100%;
}

.credits-section-images ul {
  display: flex;
  gap: var(--spacing-m);
  width: 100%;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.credits-section-images a img {
  max-height: 50px;
  display: block;
}

.credits-section-images.pinned a img {
  max-height: 40px;
  display: block;
}

section.banner-apply a {
  font-size: var(--font-xl);
  pointer-events: all;
  line-height: 1.2;
}

section.banner-apply a.medium {
  font-size: var(--font-m);
  pointer-events: all;
}

.about-text {
  font-size: var(--font-m);
}

.legal-text {
  font-size: var(--font-s);
}

/* .about p:first-of-type {
  padding-top: calc(var(--spacing-m) * 2);
} */

section.case-studies h3,
h4 {
  font-size: var(--font-l);
  display: inline-block;
}

section.case-studies h3 {
  margin-top: calc(var(--spacing-m) * 2);
 /* margin-left: calc(var(--font-l) + var(--spacing-xs));*/
  margin-bottom: var(--spacing-m);
}

section.case-studies .case-studies-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

section.case-studies .case-study-header {
  display: flex;
  gap: var(--spacing-xs);
}

.collaborators-header {
  margin-left: calc(var(--font-l) + var(--spacing-xs));
  margin-bottom: var(--spacing-m);
}

section.case-studies .case-study-arrow {
  display: block;
  width: var(--font-l);
  height: var(--font-l);
  flex-shrink: 0;
}

section.case-studies .case-study-body {
  margin-top: var(--spacing-xs);
  margin-left: calc(var(--font-l) + var(--spacing-xs));
}

section.case-studies .case-study-body-more {
  margin-top: var(--spacing-xs);
  margin-left: calc(2 * var(--font-l) + 2 * var(--spacing-xs));
  display: none;
}

section.case-studies .case-study.open .case-study-body-more,
section.case-studies .case-study.collaborators .case-study-body-more {
  display: block;
}

.case-study-header h4,
.case-study-header h4 span {
  text-align: left;
  display: inline;
  line-height: 1.2;
}

section.case-studies .case-study.open .case-study-header h4 span,
section.case-studies .case-study .case-study-header:hover h4 span,
section.case-studies .case-study .case-study-header:hover h4 span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

section.case-studies
  .case-study
  .case-study-header.collaborators-header:hover
  h4
  span {
  background-color: var(--color-light-2);
  color: inherit;
}

.subtitle {
  font-size: var(--font-m);
  line-height: 1.2;
}

section.case-studies .case-study-body p,
section.case-studies .case-study-body-more p {
  margin-bottom: var(--spacing-xs);
}

section.case-studies .case-study-body p span,
section.case-studies .case-study-body-more p span {
  display: inline;
  background-color: var(--color-light-2);
}

section.case-studies .case-study.open .case-study-body p span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

section.case-studies .case-study .case-study-arrow {
  background-color: var(--color-light-2);
  transform: rotate(-90deg);
}

section.case-studies .case-study.open .case-study-arrow {
  background-color: var(--color-dark);
  color: var(--color-light-2);
  transform: rotate(0deg);
}

section.case-studies .case-study .case-study-header:hover .case-study-arrow {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

.case-study-links {
  display: flex;
  column-gap: var(--spacing-m);
  row-gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.download-link {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: var(--font-m);
  margin-top: var(--spacing-m);
  width: fit-content;
}

.download-link-image {
  height: var(--font-m);
  display: inline-block;
  border-bottom: 3px solid var(--color-dark);
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}

.download-link-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.download-link-image {
  background-color: var(--color-light-2);
}

.doc-image {
  position: relative;
  max-width: 500px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.doc-image img {
  display: block;
}

.doc-image-actions {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
}

.doc-image-download {
  height: var(--font-m);
  aspect-ratio: 1 / 1;
  display: inline-block;
  box-sizing: border-box;
  background-color: var(--color-dark);
  color: var(--color-light-1);
  padding: 2px;
}

.doc-image-close {
  height: var(--font-m);
  aspect-ratio: 1 / 1;
  display: inline-block;
  box-sizing: border-box;
  background-color: var(--color-dark);
  color: var(--color-light-1);
  padding: 5px;
}

.doc-image-download svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--color-light-1);
}

.doc-image-close svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- floating div ----- */
#floating-div {
  position: fixed;
  top: calc(50% - (315px + 60px) / 2);
  left: calc(50% - 280px);
  width: 560;
  height: calc(315px + 60px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  z-index: 9999;
  overflow: hidden;
}

#floating-div .floating-content {
  padding: 20px;
}

#floating-div .floating-header {
  cursor: move;
  background: var(--color-dark);
  height: 20px;
  user-select: none;
  position: relative;
}

#floating-div .floating-close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--color-dark);
  color: var(--color-light-2);
  border: none;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#floating-div .floating-close-btn:hover {
  background: var(--color-light-2);
  color: var(--color-dark);
}

#floating-div .floating-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: var(--color-dark);
  cursor: se-resize;
}

/* ----- cookie warning ----- */

#cookie_warning {
  background-color: var(--color-dark);
  color: var(--color-light-1);
}

#cookie_warning button {
  background-color: var(--color-light-1);
  color: var(--color-dark);
}

.cookieRight button {
  border-radius: 0;
  font-size: var(--font-m) !important;
  /* padding: 0; */
}

#cookie_warning button,
#data_cookies button {
  /* padding: 0; */
}

.cookie_warning_text {
  margin-top: 10px;
}

/* ----- swup ----- */
html {
  --swup-slide-theme-direction: 1;
  --swup-slide-theme-translate: 50vw;
  --swup-slide-theme-duration-slide: 0.5s;
  --swup-slide-theme-translate-forward: calc(
    var(--swup-slide-theme-direction) * var(--swup-slide-theme-translate)
  );
  --swup-slide-theme-translate-backward: calc(
    var(--swup-slide-theme-translate-forward)
  );
}

html.is-animating {
  cursor: progress;
}

html.is-changing .swup-transition-main {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform var(--swup-slide-theme-duration-slide);
}

html.is-animating .swup-transition-main {
  opacity: 1;
  transform: translate3d(var(--swup-slide-theme-translate-backward), 0, 0);
}

html.is-animating.is-leaving .swup-transition-main {
  transform: translate3d(var(--swup-slide-theme-translate-forward), 0, 0);
}

@media screen and (max-width: 1200px) {
  :root {
    --spacing-xs: 5px;
    --spacing-m: 10px;

    --font-s: 12px;
    --font-m: 13.5px;
    --font-l: 20px;
    --font-xl: 28px;
  }

  header {
    gap: var(--spacing-xs);
    align-items: flex-end;
  }

  header h1 a {
    flex-direction: column;
  }

  header h1 a span {
    width: fit-content;
  }

  main {
    width: 100%;
  }

  .min-height-100 {
    min-height: auto;
  }

  .main-container {
    display: block;
  }

  .left-placeholder {
    display: none;
  }

  section.banner-title {
    position: relative;
    padding: calc(var(--spacing-m) * 2) var(--spacing-m);
    margin-bottom: calc(var(--font-xl) + var(--spacing-m));
    z-index: 0;
  }

  section.banner-apply {
    position: fixed;
    bottom: 0;
    height: fit-content;
    background: none;
    max-width: unset;
  }

  .credits-section-images.pinned a img {
    max-height: 20px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .mobile-header {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-xs);
  }

  .padding-bottom {
    padding-bottom: calc(2 * var(--spacing-m) + var(--font-xl));
  }

  #floating-div {
    display: none;
  }

  .banner-apply-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .credits-section-images.pinned ul {
    flex-wrap: nowrap;
  }

  .banner-apply-links ul {
    padding-top: 0;
  }

  /* ----- swup ----- */
  html {
    --swup-slide-theme-direction: 1;
    --swup-slide-theme-translate: 100%;
    --swup-slide-theme-duration-slide: 0.5s;
    --swup-slide-theme-translate-forward: calc(
      var(--swup-slide-theme-direction) * var(--swup-slide-theme-translate)
    );
    --swup-slide-theme-translate-backward: calc(
      -1 * var(--swup-slide-theme-translate-forward)
    );
  }

  html.swup-theme-reverse {
    --swup-slide-theme-direction: -1;
  }

  html.is-changing .swup-transition-main {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform var(--swup-slide-theme-duration-slide),
      opacity var(--swup-slide-theme-duration-slide);
  }

  html.is-animating .swup-transition-main {
    opacity: 1;
    transform: translate3d(0, var(--swup-slide-theme-translate-backward), 0);
    transition: transform var(--swup-slide-theme-duration-slide),
      opacity var(--swup-slide-theme-duration-slide);
  }

  html.is-animating.is-leaving .swup-transition-main {
    opacity: 1;
    transform: translate3d(
      0,
      calc(-1 * var(--swup-slide-theme-translate-forward)),
      0
    );
    transition: transform var(--swup-slide-theme-duration-slide),
      opacity var(--swup-slide-theme-duration-slide);
  }
}