@font-face {
  font-family: 'Graphik Cond Web';
  src: url('../fonts/GraphikCondensed-Regular-Web.woff2') format('woff2'),
  url('../fonts/GraphikCondensed-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik Cond Web';
  src: url('../fonts/GraphikCondensed-Bold-Web.woff2') format('woff2'),
  url('../fonts/GraphikCondensed-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik XCond Web';
  src: url('../fonts/GraphikXCondensed-Regular-Web.woff2') format('woff2'),
  url('../fonts/GraphikXCondensed-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik XCond Web';
  src: url('../fonts/GraphikXCondensed-Bold-Web.woff2') format('woff2'),
  url('../fonts/GraphikXCondensed-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik Web';
  src: url('../fonts/Graphik-Regular-Web.woff2') format('woff2'),
  url('../fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik Web';
  src: url('../fonts/Graphik-Bold-Web.woff2') format('woff2'),
  url('../fonts/Graphik-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}

html, body {
  font-family: 'Graphik Web', Helvetica, sans-serif;
  font-size: 1.1vw;
  line-height: 1.38vw;
  margin: 0;
  padding: 0;
  font-smoothing: antialiased;
  font-weight: 400;
  width: 100%;
  overflow-x: hidden;
}

body {
  opacity: 0;
  transition: opacity 300ms;
}

* {
  box-sizing: border-box;
}

.bold {
  font-weight: 700;
}

.content {
  padding: 3vw;
  display: flex;
  flex-wrap: nowrap;
  column-gap: 1.5vw;
  min-height: 100vh;
}

.sidebar {
  width: calc(100% / 16 * 4);
}

/*.content:not(.footer) .sidebar {
  margin-top: -5.5vw;
  margin-bottom: -3vw;
}*/

.main {
  width: calc(100% / 16 * 12);
}

.col-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.col {
  width: 100%
}

.one-half-col {
  width: 50%;
}

em {
  font-style: italic;
}

.no-scroll {
  overflow: hidden;
}

.logo {
  position: absolute;
  bottom: 3vw;
}

.navigation-wrapper {
  position: fixed;
  bottom: 0;
}

.logo-link {
  display: block;
  position: relative;
  bottom: -0.3vw;
}

.logo-fixed {
  position: absolute;
  bottom: -0.6vw;
  left: 0;
}

.logo-link {
  display: inline-block;
}

lottie-player {
  width: 16vw;
  height: auto;
  display: block;
}

/* sizes */

.xxlarge {
  font-size: 14vw;
  line-height: 12vw;
}

.xlarge {
  font-size: 8vw;
  line-height: 7vw;
}

.large {
  font-size: 6.6vw;
  line-height: 6vw;
}

.xlarge-graphik, .membership-price {
  font-family: 'Graphik XCond Web', Helvetica, sans-serif;
  font-weight: 700;
}

h1, h2, .number, .contact-detail a, .value .text {
  font-family: 'Graphik Cond Web', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 3.5vw;
  line-height: 3.6vw;  
  margin: 0.25em 0;
}

h1, h2 {
  margin: 0 0 0.25em 0;
}

.md-lg {
  font-size: 2.5vw;
  line-height: 2.6vw;  
}

.medium-lg, .person .name {
  font-family: 'Graphik Cond Web', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.65vw;
  line-height: 1.7vw;
}

.medium {
  font-size: 1.4vw;
  line-height: 1.8vw;
}

.small {
  font-size: 1.1vw;
  line-height: 1.35vw;
}

.xsmall {
  font-size: 0.8vw;
  line-height: 1vw;
}

/* buttons and links */

.button {
  display: inline-block;
  margin-top: 1.5vw;
  padding: 0.75vw 1.25vw;
  border-radius: 2vw;
  text-decoration: none;
  transition: color 300ms, background-color 300ms;
}

/* marquee */

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 1.8vw;
  overflow-x: hidden;
}

.track {
  position: absolute;
  top: 0.2vw;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* blocks */

img.lazy {
  opacity: 0;
}

img:not(.initial) {
  transition: opacity 300ms;
}

img.initial,
img.loaded,
img.error {
  opacity: 1;
}

section {
  margin-bottom: 0;
  padding-bottom: 13vw;
}

.main section:last-child {
  /*margin-bottom: 0;*/
}

.subhead-wrapper {
  position: fixed;
  left: 0;
  top: 0vw;
  padding: 3vw;
  width: calc(100% / 16 * 4);
  transition: opacity 300ms;
}

.main section:first-child .subhead-wrapper {
  top: 2.25vw;
}

section .subhead-wrapper {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

section.active .subhead-wrapper {
  opacity: 1;
  pointer-events: all;
  z-index: 1;
}

.subhead-wrapper p {
  margin: 0;
}

/* image-text */

.image-text-wrapper {
  position: relative;
}

.image-text-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.image-text-wrapper img.image-scale {
  padding-top: 0;
  height: calc(100vh - 7.8vw);
  object-fit: cover;
}

.image-text-wrapper.pos-bottom img {
  padding-top: 0;
}

.image-additional-text {
  font-size: 2vw;
  position: absolute;
  left: 2vw;
  bottom: 2vw;
}

.text-overlay {
  font-family: 'Graphik XCond Web', Helvetica, sans-serif;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0;
}

.text-overlay.bottom {
  top: unset;
  bottom: 0;
}

.text-overlay p {
  margin: 0;
  position: relative;
}

.text-overlay span {
  display: inline-block;
  top: -0.8vw;
  left: -0.18vw;
  position: absolute;
  padding: 0 0.8vw 0.5vw 0;
  white-space: nowrap;
}

.text-overlay p:nth-child(1) {
  z-index: 2;
}

.text-overlay p:nth-child(2) {
  z-index: 1;
}

.text-overlay.large.bottom span {
  top: unset;
  bottom: 5vw;
}

.text-overlay.xlarge.bottom span {
  top: unset;
  bottom: 6vw;
}

.text-overlay p.line-2 span {
  top: 5vw;
}

.text-overlay.bottom p.line-2 span {
  top: unset;
  bottom: -0.9vw;
}

.text {
  margin-right: calc(100% / 16 * 4);
}

.one-half-col .text {
  margin-right: 0;
}

.text h1, .text h2 {
  margin-right: calc(100% / 16 * 2 * -1);
}

.text h1 {
  margin-bottom: 6vw;
}

.should-animate, .has-alternates {
  opacity: 0;
}

.animate-typing {
  opacity: 1;
}

.layoutimagetext .text {
  margin-top: 3vw;
}

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

.numbered-list ul {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 2vw;
}

.layoutimagetext .numbered-list ul {
  margin-top: 3vw;
}

.numbered-list li {
  width: calc((100% / 3) - (4vw / 3));
  padding-top: 1.5vw;
  padding-bottom: 1.5vw;
}

.numbered-list li.inactive .list-entry-wrapper {
  opacity: 0.5;
}

.layoutimagetext .numbered-list li,
.numbered-list li .list-entry-wrapper {
  display: flex;
  align-items: flex-start;
}

.numbered-list .number {
  margin-top: -0.4vw;
  padding-right: 1.5vw;
}

.numbered-list .list-entry-image {
  width: 100%;
  margin-bottom: 2vw;
}

.numbered-list .list-entry-image img {
  width: 100%;
  height: auto;
  display: block;
}

.numbered-list .list-entry-subhead {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25vw;
}

.numbered-list .list-entry-spotify-button {
  display: block;
}

.numbered-list .list-entry-spotify-button .button {
  margin-top: -0.2vw;
  margin-bottom: 1vw;
}

.numbered-list .list-entry-spotify-button svg {
  width: 7vw;
  vertical-align: middle;
  margin-top: -0.25vw;
  padding-left: 0.2vw;
}

.numbered-list .list-entry-additional-text {
  display: block;
  margin-top: 1.25vw;
  color: rgba(0,0,0,0.5);
}

.numbered-list .list-entry-additional-text a {
  color: inherit;
  transition: color 300ms;
}

.numbered-list .list-entry-additional-text a:hover {
  color: black;
}

/* jobs */

.positions-wrapper {
  width: calc(100% + 3vw);
  overflow-x: scroll;
  position: relative;
  height: 7.25vw;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.positions-wrapper::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.positions-inner-wrapper {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  grid-gap: 1.5vw;
  padding-right: 3vw;
}

.position {
  background-color: white;
  width: 34vw;
  height: 7.25vw;
  display: flex;
  text-decoration: none;
}

.position-image-wrapper {
  width: 10vw;
  height: 100%;
}

.position-image-wrapper img {
  display: block;
  height: 100%;
  width: 10vw;
  object-fit: cover;
}

.position-text-wrapper {
  position: relative;
  padding: 1.15vw 1vw;
  color: black;
}

.tags {
  margin-bottom: 0.5vw;
}

.tag {
  padding: 0.15vw 0.35vw;
}

.link-arrow {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.65vw 0.85vw;
  font-family: Times New Roman, 'Graphik XCond Web', Helvetica, sans-serif;
  font-weight: 400;
  transform: rotate(-45deg);
  text-decoration: none;
}

/* text */

.layouttext img {
  width: calc(100% + 17.3333vw);
  height: auto;
  margin: 2vw 0;
}

/* values */

.value .xxlarge {
  font-family: 'Graphik XCond Web', Helvetica, sans-serif;
  font-weight: 700;
}

.value .text {
  margin-top: 3vw;
}

.value {
  margin-bottom: 13vw;
}

.value:last-child {
  margin-bottom: 0;
}

/* two column text image */

.layouttextimage img,
.layouttwocolumns img {
  width: 100%;
  height: auto;
}

.layouttextimage .text
.layouttwocolumns .text {
  margin-right: 0;
}

.layouttextimage .col-wrapper,
.layouttwocolumns .col-wrapper {
  grid-gap: 3vw;
}

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

ul > li {
  clear: left;
}

.numbered-list ul > li {
  clear: unset;
}

ul > li:before {
  content: "▬";
  height: 1em;
  width: 1.5em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: -0.15em;
  transform-origin: 0 0;
  transform: scaleX(1.5);
}

.numbered-list ul > li:before {
  content: "";
  height: unset;
  width: unset;
  display: unset;
  float: unset;
  margin-left: unset;
  margin-top: unset;
  transform-origin: unset;
  transform: unset;
}

/* people */

.people {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.5vw;
}

.person {
  width: 22.12vw;
}

.person p {
  margin: 0.5em 0;
}

.person a {
  color: black;
}

.person img {
  width: 100%;
  height: auto;
}

/* collaborators */

.collaborators-logos {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.5vw;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2vw;
}

.collaborators-logo img {
  width: 100%;
  height: auto;
}

.collaborators-people {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.5vw;
  align-items: center;
  justify-content: flex-start; 
  margin-top: 2vw;
}

.collaborators-person {
  width: 19.9%;
}

.collaborators-person img {
  width: 100%;
  height: auto;
}

.collaborators-person p {
  margin: 0.5em 0;
}

/* memberships */

.memberships {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.5vw;
  margin-top: 4vw;
}

.membership {
  border-radius: 0.75vw;
  padding: 1vw 1.5vw;
  background-color: white;
  width: 22.1vw;
}

.membership-title, .membership-price, .membership-billing {
  text-align: center;
}

.membership-price {
  margin-bottom: 0.5em;
}

.membership-billing {
  margin-top: 0;
  opacity: 0.5;
}

.membership-details {
  margin: 3vw 0;
}

.membership .button {
  display: block;
  text-align: center;
  margin-bottom: 0.5vw;
}

/* footer */

.footer {
  min-height: 100vh;
  margin-bottom: 0;
}

.footer .col-wrapper {
  height: 100%;
  grid-gap: 3vw;
}

.footer .large-text-wrapper {
  font-family: 'Graphik XCond Web', Helvetica, sans-serif;
  font-weight: 700;
  position: relative;
  top: -0.5vw;
}

.footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer .text {
  margin-right: 0;
}

.contact-detail {
  margin-top: 3.5vw;
}

.contact-detail a {
  font-size: 3.3vw;
  line-height: 4.2vw;
  color: black;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.15em;
}

.footer .section-content {
  position: relative;
}

.copyright {
  position: absolute;
  bottom: 0;
  left: 0;
}

.mobile-button {
  display: none;
}

.mobile-subhead {
  display: none;
}

.mobile-logo-fixed {
  display: none;
}

#footer {
  position: relative;
  z-index: 100000000;
}

@media only screen and (min-width: 2560px) {

  body { 
    font-size: 0.8vw; 
    line-height: 0.95vw; 
  } 

  .content:not(.footer) .sidebar {
    margin-bottom: 0
  }

  .marquee {
    height: 1.4vw;
  }
  
  .track { 
    top: 0.2vw;
  }

  .medium {
    font-size: 1vw;
    line-height: 1.1vw;
  }

  .sidebar {  
    width: calc(100% / 16 * 3);   
    margin-right: calc(100% / 16 * 1);
  }

  .subhead-wrapper {
    width: calc(100% / 16 * 3);
  }

  .logo {
    margin-top: calc(100vh - 5.5vw - 2.5vw);
  }

  lottie-player {
    width: 13vw;
  }

  .content {
    padding: 2vw;
  } 

  button.small { 
    padding: 0.5vw 0.8vw; 
    font-size: 0.8vw;  
    line-height: .8vw; 
  } 
  
  .xlarge { 
    font-size: 7.6vw; 
    line-height: 6.6vw;
  }

  h1, h2 {
    font-size: 2.85vw;
    line-height: 2.9vw;
  }

  .medium-lg { 
    font-size: 1.25vw; 
    line-height: 1.3vw;
  }

  .text {
    margin-right: calc(100% / 12 * 4);
  }

  .text h1, .text h2 {
    margin-right: calc(100% / 12 * 2 * -1);
  }

  .image-text-wrapper img.image-scale {
    height: calc(100vh - 5.5vw);
  }

  .subhead-wrapper {
    padding: 2vw;
  }

  .main section:first-child .subhead-wrapper {
    top: 1.4vw;
  }

}

@media only screen and (max-width: 800px) {

  /* general */

  body {
    font-size: calc(1.4vw * 2.35);
    line-height: calc(1.8vw * 2.35);
  }

  /* layout */

  .content {
    padding: 5vw 5vw 10vw 5vw;
    column-gap: 0;
  }

  .main {
    width: 100%;
  }

  .col-wrapper {
    flex-direction: column;
  }

  /* font sizes */

  .xxlarge {
    font-size: 19vw;
    line-height: 14vw;
  }

  .xlarge,
  .large {
    font-size: 10vw; /* 8vw */
    line-height: 10vw;
  }

  .medium {
    font-size: 4.8vw;
    line-height: 5.4vw;
  }

  .subhead-wrapper .medium {
    font-size: 6.4vw;
    line-height: 7vw;
  }

  .small {
    font-size: 3.4vw;
    line-height: 3.8vw;
  }

  .md-lg {
    font-size: 10vw;
    line-height: 10vw;
  }

  .medium-lg {
    font-size: 4vw;
    line-height: 4.2vw;
  }

  /* marquee */

  .marquee {
    font-size: 4.25vw;
    height: 6.6vw;
  }

  .track {
    top: 1vw;
  }

  /* headlines on images */

  .text h1, .text h2 {
    margin-right: unset;
  }

  .text-overlay.large.bottom span {
    top: unset;
    bottom: 4vw;
  }

  .text-overlay p.line-2 span {
    top: 9.2vw;
  }

  .text-overlay.bottom {
    /*top: unset;*/
    bottom: 4vw;
  }

  .text-overlay.bottom p.line-2 span {
    top: unset;
    bottom: -4.9vw;
  }

  .text-overlay.xlarge.bottom span {
    top: unset;
    bottom: 4vw;
  }

  .text {
    margin-right: 0;
  }

  .layouttext img {
    width: 100%;
  }

  section .subhead-wrapper {
    opacity: 1;
  }

  .subhead-wrapper {
    position: unset;
    width: unset;
    padding: 6vw 0;
  }

  .image-additional-text {
    font-size: 3.5vw;
    position: absolute;
    left: 2vw;
    bottom: 2vw;
  }

  /* sidebar */

  .content:not(.footer) .sidebar {
    margin-top: -12vw;
    margin-bottom: -10vw;
  }

  .navigation-wrapper .button {
    position: fixed;
    z-index: 999;
  }

  .navigation-wrapper {
    /* background gradient located in snippets/color-palette.php */
    left: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
  }

  .logo {
    bottom: -1vw;
  }

  .sidebar {
    top: -5vw;
    width: 0;
    z-index: 1000;
  }

  .logo {
    margin-top: unset;
    margin-left: 5vw;
    padding-bottom: 5vw;
  }

  .navigation-wrapper .button {
    right: 5vw;
    bottom: 5vw;
  }

  .button {
    border-radius: 5vw;
    padding: 2.5vw 3vw;
  }

  lottie-player {
    width: 32vw;
  }

  .logo-link {
    display: inline-block;
    position: unset;
  }

  .navigation-wrapper {
    height: 10vh;
  }

  #footer {
    position: relative;
    z-index: 100000000;
  }

  .footer-active .navigation-wrapper {
    display: none;
  }

  /* hiring */

  .positions-wrapper,
  .position {
    height: 30vw;
  }

  .positions-wrapper {
    width: calc(100% + 10vw);
    left: -5vw;
  }

  .positions-inner-wrapper {
    grid-gap: 3vw;
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .position {
    width: 84vw;
  }

  .position-image-wrapper,
  .position-image-wrapper img {
    width: 24vw;
  }

  .tags {
    margin-bottom: 3vw;
  }

  .position-text-wrapper {
    position: relative;
    padding: 3.8vw 2vw;
  }
  .position-text {
    font-size: 5.5vw;
    line-height: 5.5vw;
  }

  /* person */

  .person {
    width: 46.2vw;
  }

  .person .name {
    font-size: 3.65vw;
  }

  .collaborators-person {
    width: 30.3vw;
  }

  /* memberships */

  .memberships {
    width: 100%;
  }

  .membership {
    width: 100%;
  }

  .membership-title {
    font-size: 4.8vw;
    line-height: 4.2vw;  
  }

  .membership-details {
    font-size: 4.8vw;
    line-height: 5.4vw;
    margin: 6vw;
  }

  .membership-billing {
    font-size: 3.6vw;
    line-height: 3.6vw;  
  }

  .medium h1, .medium h2 {
    font-size: 5.2vw;
    line-height: 5.2vw;  
  }

  .membership .button {
    display: none;
  }

  /* footer */

  .footer {
    min-height: unset;
    padding-bottom: 25vw;
  }

  .footer.content {
    position: relative;
  }

  .footer .col-wrapper {
    flex-direction: column;
  }

  .footer .section-content {
    margin-top: 17vw;
  }

  .one-half-col {
    width: 100%;
  }

  .footer .large-text-wrapper {
    padding: 5.5vw 5vw 5vw 5vw;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .contact-details {
    margin-bottom: 6vw;
  }

  .contact-detail a {
    font-size: 6vw;
    line-height: 6.8vw;
  }

  .logo-fixed {
    display: none;
  }

  .mobile-logo-fixed {
    position: absolute;
    left: 0;
    bottom: -21vw;
    display: block;
  }

  .contact-label {
    font-size: 4vw;
    line-height: 6vw;
  }

  .contact-link {
    font-size: 7.5vw;
    line-height: 7vw;
  }

  .copyright {
    bottom: -20vw;
    right: 0;
    left: unset;
  }

  .mobile-button {
    display: block;
  }

  .collaborators-logo {
    width: 40% !important;
  }

  /* home page */

  .mobile-subhead {
    display: none;
  }

  .main section.layoutimagetext .subhead-wrapper {
    display: none;
  }

  .main section.layoutimagetext .mobile-subhead {
    display: block;
  }

  /* lists */

  .numbered-list ul {
    display: block;
  }

  .numbered-list ul li {
    width: 100%;
    margin-bottom: 6vw;
  }

  .numbered-list .number {
    margin-top: 4.6vw;
    font-size: 9.5vw;
    padding-right: 5.5vw;
  }

  .numbered-list .list-entry {
    margin-top: 3vw;
  }

  .numbered-list .list-entry-image {
    margin-bottom: 7vw;
  }

  .numbered-list .list-entry-subhead {
    margin-bottom: 1.5vw;
  }

  .numbered-list .list-entry-spotify-button svg {
    width: 22vw;
    margin-top: -1vw;
    padding-left: 0.8vw;
  }

  .numbered-list .list-entry-spotify-button {
    margin-top: -1.2vw;
    margin-bottom: 1vw;
  }

  .numbered-list .list-entry-additional-text {
    margin-top: 4vw;
  }

}

@media only screen and (orientation: portrait) and (max-width: 800px) {
 
  .image-text-wrapper img,
  .image-text-wrapper img.image-scale {
    display: block;
    width: 100%;
    height: 67.5vw;
    object-fit: cover;
  }

}

@media only screen and (min-width: 1440px) {
  .medium {
    font-size: clamp(16px, 4.8vw, 26px);
  }
}