@font-face {
  font-family: "TimesNewArial";
  src: url("../fonts/TimesNewArialVF.woff2");
  font-variation-settings: "srff" 100, "ital" 0, "wght" 70;
}

html,
body {
  background: #fff;
  z-index: 1;
  font-family: "TimesNewArial", sans-serif;
  font-variation-settings: "srff" 0, "ital" 0, "wght" 0;
  font-size: 12px;
  font-weight: normal;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow: hidden !important;
}

body .content {
  overflow: scroll !important;
}

body.projectactive {
  overflow: scroll !important;
}

body.projectactive .content {
  overflow: hidden !important;
}

a,
button,
input,
label {
  cursor: pointer;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

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

a, a:hover {
  text-decoration: none;
  color: black;
}

.inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  pointer-events: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.inner .line {
  width: 100vw;
  height: calc(100vw / 22);
  display: flex;
  justify-content: space-between;
}

.inner .line:last-of-type {
  height: auto;
}

.inner .line .element {
  width: .75vw;
  height: .75vw;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  pointer-events: auto;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 800px) {
  .inner .line .element:hover {
    transform: scale(9);
  }
}

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

.content, .projectoverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: block;
  overflow: scroll;
  font-size: 0;
}

.content.projectoverlay, .projectoverlay.projectoverlay {
  position: relative !important;
}

.content.projectoverlay .teaser, .projectoverlay.projectoverlay .teaser {
  margin-top: .75vw !important;
}

.content nav, .content h1, .projectoverlay nav, .projectoverlay h1 {
  display: inline-block;
  padding: 0.5vw;
  padding-right: 0;
  font-size: 4vw;
  letter-spacing: -0.05vw;
  line-height: calc(100vw / 22);
  color: white;
  -webkit-text-stroke: 0.15vw black !important;
  padding-bottom: 0.25vw;
  padding-left: 0;
}

.content nav, .projectoverlay nav {
  z-index: 99;
  position: relative;
}

.content h2, .projectoverlay h2 {
  font-size: 3vw;
  letter-spacing: -0.05vw;
  line-height: calc(100vw / 22);
  color: white;
  -webkit-text-stroke: 0.125vw black !important;
  padding-bottom: 0.25vw;
  padding-left: 0.15vw;
}

.content figure, .projectoverlay figure {
  position: relative;
}

.content p, .content figcaption, .projectoverlay p, .projectoverlay figcaption {
  font-size: 1.75vw;
  color: white;
  -webkit-text-stroke: 0.085vw black !important;
  line-height: calc(100vw / 52);
  margin-bottom: calc((100vw / 66));
}

.content p.meta, .content figcaption.meta, .projectoverlay p.meta, .projectoverlay figcaption.meta {
  margin-bottom: calc((100vw / 22));
}

.content figure:hover figcaption, .projectoverlay figure:hover figcaption {
  opacity: 1;
}

.content figcaption, .projectoverlay figcaption {
  position: absolute;
  padding-left: 1vw;
  padding-right: 1vw;
  margin-bottom: 0vw;
  opacity: 0;
  bottom: 0;
  left: 0;
}

.content .videowrap figcaption, .projectoverlay .videowrap figcaption {
  top: 0.25vw;
}

.content a, .projectoverlay a {
  color: white;
  -webkit-text-stroke: 0.15vw black !important;
}

.content p a, .projectoverlay p a {
  color: white;
  -webkit-text-stroke: 0.1vw blue !important;
}

.content nav, .projectoverlay nav {
  z-index: 99;
  transform-origin: top left;
  width: 49.65vw;
  float: left;
  padding-left: 0.75vw;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.content nav.footer, .projectoverlay nav.footer {
  margin-top: calc((100vw / 22) - 1vw);
  width: 100vw;
  display: block;
}

.content .teaser, .projectoverlay .teaser {
  float: left;
  cursor: pointer;
  padding-left: 0.75vw;
  display: inline-block;
  vertical-align: top;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  overflow: hidden;
}

.content .teaser:nth-of-type(2n), .projectoverlay .teaser:nth-of-type(2n) {
  margin-top: .75vw;
}

.content .teaser.mainnav, .projectoverlay .teaser.mainnav {
  margin-top: -0.75vw;
  opacity: 0;
  pointer-events: none;
}

.content .teaser h1, .projectoverlay .teaser h1 {
  width: 100%;
}

.content .teaser .teaserinner .image, .content .teaser .teaserinner .video, .projectoverlay .teaser .teaserinner .image, .projectoverlay .teaser .teaserinner .video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.content .teaser .image.video, .content .teaser .video.video, .projectoverlay .teaser .image.video, .projectoverlay .teaser .video.video {
  position: absolute;
  bottom: 0;
}

.content .teaser.imagewrap, .content .teaser.videowrap, .projectoverlay .teaser.imagewrap, .projectoverlay .teaser.videowrap {
  margin-bottom: .75vw;
}

.content .teaser.imagewrap .image, .content .teaser.videowrap .image, .projectoverlay .teaser.imagewrap .image, .projectoverlay .teaser.videowrap .image {
  background: black;
}

.content .teaser.videowrap, .projectoverlay .teaser.videowrap {
  cursor: inherit;
}

.content .text, .projectoverlay .text {
  margin-top: 0.75vw;
  float: left;
  width: calc(((100vw / 22) * 11) - .35vw);
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  padding-left: 0.75vw;
  display: inline-block;
  vertical-align: top;
  margin-top: 0 !important;
  margin-bottom: .75vw;
}

.content .text.start h1::first-letter, .projectoverlay .text.start h1::first-letter {
  padding-left: calc(100vw / 25);
}

.imagewrap {
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.bigimage {
  display: block;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
  position: fixed;
  z-index: 999999;
  left: calc(100vw / 22);
  top: calc(100vw / 22);
  width: calc(100vw - (100vw / 11));
  height: calc(100vh - (100vw / 11));
  transform: scale(0);
}

.format16x9 {
  width: calc(((100vw / 22) * 11) - .25vw);
}

.format16x9 .teaserinner, .format16x9 .image {
  width: calc(((100vw / 22) * 11) - .25vw);
  height: calc(((100vw / 22) * 6) - .75vw);
}

.format9x16 {
  width: calc(((100vw / 22) * 7) - .25vw);
}

.format9x16 .teaserinner, .format9x16 .image {
  width: calc(((100vw / 22) * 7) - .25vw);
  height: calc(((100vw / 22) * 11) - .75vw);
}

.format4x5 {
  width: calc(((100vw / 22) * 7) - .25vw);
}

.format4x5 .teaserinner, .format4x5 .image {
  width: calc(((100vw / 22) * 7) - .25vw);
  height: calc(((100vw / 22) * 9) - .75vw);
}

.format5x4 {
  width: calc(((100vw / 22) * 9) - .25vw);
}

.format5x4 .teaserinner, .format5x4 .image {
  width: calc(((100vw / 22) * 9) - .25vw);
  height: calc(((100vw / 22) * 7) - 0.75vw);
}

.format2x3 {
  width: calc(((100vw / 22) * 7) - .25vw);
}

.format2x3 .teaserinner, .format2x3 .image {
  width: calc(((100vw / 22) * 7) - .25vw);
  height: calc(((100vw / 22) * 10) - .75vw);
}

.format3x2 {
  width: calc(((100vw / 22) * 10) - .25vw);
}

.format3x2 .teaserinner, .format3x2 .image {
  width: calc(((100vw / 22) * 10) - .25vw);
  height: calc(((100vw / 22) * 7) - .75vw);
}

.format1x1 {
  width: calc(((100vw / 22) * 8) - .25vw);
}

.format1x1 .teaserinner, .format1x1 .image {
  width: calc(((100vw / 22) * 8) - .25vw);
  height: calc(((100vw / 22) * 8) - .75vw);
}

.notactive {
  transform: scale(0.55);
}

.notactive2 {
  transform: scale(0.9);
}

.active {
  transform: scale(1.1);
}

.active2 {
  transform: scale(6);
}

.hidden {
  pointer-events: none;
  transform: scale(0);
}

.hidden2 {
  display: none;
  pointer-events: none;
  transform: scale(0);
}

nav a, .peter {
  display: inline-block;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.peter {
  position: fixed;
  width: calc(100vw / 25);
  text-align: center;
  z-index: 99999;
  padding: 0.5vw;
  padding-top: 0;
  font-size: 4vw;
  letter-spacing: -0.05vw;
  line-height: calc(100vw / 22);
  color: white;
  -webkit-text-stroke: 0.15vw black !important;
  padding-bottom: 0.25vw;
  padding-left: 0;
  display: inline-block;
}

.illuoverley {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100vh;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  white-space: nowrap;
  overflow: hidden;
  background: white;
  font-size: 0;
}

.illuoverley img {
  height: 100%;
  display: inline-block;
}

.illuactive .content, .projectactive .content {
  overflow: hidden;
}

.illuactive.illuactive .illuoverley, .projectactive.illuactive .illuoverley {
  overflow: scroll;
  left: 0;
}

.illuactive.illuactive .illuoverley h1, .projectactive.illuactive .illuoverley h1 {
  position: fixed;
  bottom: 0;
  left: 1vw;
  font-size: 1.75vw;
  line-height: calc(100vw / 52);
  transform: scale(0);
}

.illuactive.illuactive .illuoverley h1 a, .projectactive.illuactive .illuoverley h1 a {
  color: white;
  -webkit-text-stroke: 0.085vw black !important;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  display: inline-block;
}

@media only screen and (min-width: 800px) {
  .illuactive.illuactive .illuoverley h1 a:hover, .projectactive.illuactive .illuoverley h1 a:hover {
    transform: scale(1.25);
  }
}

.illuactive.illuactive .element, .projectactive.illuactive .element {
  pointer-events: none;
  transform: scale(0);
  transition: none !important;
}

.illuactive.illuactive .active2, .projectactive.illuactive .active2 {
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8) !important;
  transform: scale(6);
  pointer-events: auto;
  background-image: url("../img/cross.png") !important;
  background-size: 75%;
}

.illuactive.projectactive .projectoverlay, .projectactive.projectactive .projectoverlay {
  pointer-events: auto;
  top: 0;
}

.illuactive .content .teaser, .illuactive .content nav a, .illuactive .content .text, .projectactive .content .teaser, .projectactive .content nav a, .projectactive .content .text {
  pointer-events: none;
  transform: scale(0);
}

.illuactive .content .teaser.element, .illuactive .content nav a.element, .illuactive .content .text.element, .projectactive .content .teaser.element, .projectactive .content nav a.element, .projectactive .content .text.element {
  transition: none;
}

.illuactive .content, .projectactive .content {
  pointer-events: none;
}

.illuactive .content .element, .projectactive .content .element {
  pointer-events: auto;
}

.illuactivedelay .element {
  transition: none !important;
}

.illuactivedelay .illuoverley h1 {
  transform: scale(1) !important;
}

.projectoverlay {
  pointer-events: none;
  position: fixed;
  z-index: 8;
  top: 100vh;
  transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  left: 0;
}

.illuactivedelay .content .teaser.element, .illuactivedelay .content nav a.element, .illuactivedelay .content .element.element, .illuactivedelay .content .text.element, .projectactive .content .teaser.element, .projectactive .content nav a.element, .projectactive .content .element.element, .projectactive .content .text.element {
  transition: none;
}

.imageopen .element {
  pointer-events: none !important;
}

.imageopen .bigimage {
  transform: scale(1);
  pointer-events: auto;
}

@media only screen and (min-width: 800px) {
  .imageopen .bigimage:hover {
    transform: scale(1.025);
  }
}

.imageopen * {
  overflow: hidden;
}

.imageopen .mainnav a {
  pointer-events: none;
  transform: scale(0);
}

.imageopen .projectoverlay > *:not(.bigimage), .imageopen .projectoverlay .element, .imageopen .maincontent > *:not(.bigimage), .imageopen .maincontent .element {
  pointer-events: none;
  transform: scale(0);
}

.imageopen .inner {
  opacity: 0;
  pointer-events: none;
}

.transition .content .teaser, .transition .content .footer a, .transition .content .text {
  pointer-events: none;
  transform: scale(0);
}

.transition .content .teaser.element, .transition .content .footer a.element, .transition .content .text.element {
  transition: none;
}

.maincontent {
  z-index: 1;
  padding-top: 0.75vw;
  display: block;
  width: 100vw;
  min-height: calc(100vh - 10vw);
}

.grid-sizer {
  width: 0.25vw;
  height: 0.25vw;
}

.exhibitions h1:first-of-type {
  padding-top: 0;
  margin-top: 0;
}

.exhibitions section {
  margin-top: calc((100vw / 22));
}

.exhibitions section:first-of-type {
  margin-top: 0;
}

.exhibitions .exhibition > div {
  margin-bottom: 0.5vw;
}

.exhibitions span p {
  display: inline-block;
  margin-bottom: 0;
}

.exhibitions span {
  font-size: 1.75vw;
  color: white;
  -webkit-text-stroke: 0.085vw black !important;
  line-height: calc(100vw / 52);
  margin-bottom: 0;
}

.exhibitions span.meta {
  margin-bottom: calc((100vw / 22));
}

.imprint > * {
  display: block !important;
  float: none !important;
}

.closeillu2 {
  background: transparent !important;
  display: none;
}

@media only screen and (max-width: 800px) {
  .content, .projectoverlay {
    height: 100dvh;
    padding-bottom: 18vw;
  }
  .content nav, .content h1, .projectoverlay nav, .projectoverlay h1 {
    padding: 1vw;
    font-size: 9vw;
    letter-spacing: -0.1vw;
    line-height: 9.5vw;
    -webkit-text-stroke: 0.35vw black !important;
    padding-bottom: 2vw;
    padding-left: 0;
    max-width: 97vw;
  }
  .content nav a, .content h1 a, .projectoverlay nav a, .projectoverlay h1 a {
    -webkit-text-stroke: 0.35vw black !important;
  }
  .content h2, .projectoverlay h2 {
    font-size: 7.5vw;
    letter-spacing: -0.1vw;
    line-height: 8vw;
    -webkit-text-stroke: 0.25vw black !important;
    padding-bottom: 0.5vw;
    padding-left: 0.3vw;
    max-width: 97vw;
  }
  .content p, .content figcaption, .content .exhibitions span, .projectoverlay p, .projectoverlay figcaption, .projectoverlay .exhibitions span {
    font-size: 5.5vw;
    -webkit-text-stroke: 0.25vw black !important;
    line-height: 6vw;
    margin-bottom: calc((100vw / 33));
    max-width: 97vw;
  }
  .content p.meta, .content figcaption.meta, .content .exhibitions span.meta, .projectoverlay p.meta, .projectoverlay figcaption.meta, .projectoverlay .exhibitions span.meta {
    margin-bottom: 1.5vw;
  }
  .content .exhibitions .exhibition > div, .projectoverlay .exhibitions .exhibition > div {
    margin-bottom: 1.5vw;
  }
  .content figcaption, .projectoverlay figcaption {
    position: absolute;
    padding-left: 2vw;
    padding-right: 2vw;
    max-width: 97vw;
  }
  .content .videowrap figcaption, .projectoverlay .videowrap figcaption {
    top: 0.5vw;
  }
  .content a, .projectoverlay a {
    color: white;
    -webkit-text-stroke: 0.25vw black !important;
  }
  .content p a, .projectoverlay p a {
    color: white;
    -webkit-text-stroke: 0.25vw blue !important;
    max-width: 97vw;
  }
  .content nav, .projectoverlay nav {
    width: 98vw;
    padding-left: 1.5vw;
    transition: all 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  }
  .content nav.footer, .projectoverlay nav.footer {
    margin-top: 6vw;
    width: 100vw;
    padding-bottom: 18vw;
  }
  .content .teaser, .projectoverlay .teaser {
    padding-left: 1.5vw;
  }
  .content .teaser:nth-of-type(2n), .projectoverlay .teaser:nth-of-type(2n) {
    margin-top: 1.5vw;
  }
  .content .teaser.mainnav, .projectoverlay .teaser.mainnav {
    margin-top: -1.5vw;
  }
  .content .teaser.imagewrap, .content .teaser.videowrap, .projectoverlay .teaser.imagewrap, .projectoverlay .teaser.videowrap {
    margin-bottom: 1.5vw;
  }
  .content .text, .projectoverlay .text {
    margin-top: 1.5vw;
    float: left;
    width: 100vw;
    padding-left: 1.5vw;
    margin-bottom: 1.5vw;
  }
  .content .text.start h1::first-letter, .projectoverlay .text.start h1::first-letter {
    padding-left: calc(100vw / 12.5);
  }
  .format16x9 {
    width: 98.5vw !important;
  }
  .format16x9.videowrap {
    height: 55.41vw !important;
  }
  .format16x9 .teaserinner, .format16x9 .image {
    width: 98.5vw !important;
    height: 55.41vw !important;
  }
  .format9x16 {
    width: 98.5vw !important;
  }
  .format9x16.videowrap {
    height: 175.11vw !important;
  }
  .format9x16 .teaserinner, .format9x16 .image {
    width: 98.5vw !important;
    height: 175.11vw !important;
  }
  .format4x5 {
    width: 98.5vw !important;
  }
  .format4x5.videowrap {
    height: 120.39vw !important;
  }
  .format4x5 .teaserinner, .format4x5 .image {
    width: 98.5vw !important;
    height: 120.39vw !important;
  }
  .format5x4, .format5x4.big, .format5x4.small {
    width: 98.5vw !important;
  }
  .format5x4.videowrap, .format5x4.big.videowrap, .format5x4.small.videowrap {
    height: 80.59vw !important;
  }
  .format5x4 .teaserinner, .format5x4 .image, .format5x4.big .teaserinner, .format5x4.big .image, .format5x4.small .teaserinner, .format5x4.small .image {
    width: 98.5vw !important;
    height: 80.59vw !important;
  }
  .format2x3, .format2x3.small, .format2x3.big {
    width: 98.5vw !important;
  }
  .format2x3.videowrap, .format2x3.small.videowrap, .format2x3.big.videowrap {
    height: 147.75vw !important;
  }
  .format2x3 .teaserinner, .format2x3 .image, .format2x3.small .teaserinner, .format2x3.small .image, .format2x3.big .teaserinner, .format2x3.big .image {
    width: 98.5vw !important;
    height: 147.75vw !important;
  }
  .format3x2 {
    width: 98.5vw !important;
  }
  .format3x2.videowrap {
    height: 65.67vw !important;
  }
  .format3x2 .teaserinner, .format3x2 .image {
    width: 98.5vw !important;
    height: 65.67vw !important;
  }
  .format1x1 {
    width: 98.5vw !important;
  }
  .format1x1.videowrap {
    height: 98.5vw !important;
  }
  .format1x1 .teaserinner, .format1x1 .image {
    width: 98.5vw !important;
    height: 98.5vw !important;
  }
  .mainnav.teaser {
    display: none !important;
  }
  .peter {
    padding: 1vw;
    font-size: 9vw;
    letter-spacing: -0.1vw;
    line-height: calc(100vw / 10.75);
    -webkit-text-stroke: 0.3vw black !important;
    padding-bottom: 2vw;
    padding-left: 0;
    padding-top: 0.25vw;
  }
  .closeillu2 {
    position: sticky;
    display: block;
    top: 0vw;
    left: 0vw;
    z-index: 99;
    pointer-events: none;
    transform: scale(0);
    transition: all 200ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
    bottom: auto !important;
    padding-left: 1.25vw;
    padding-top: 1vw;
  }
  .closeillu2 .peter2 {
    padding: 1vw;
    font-size: 9vw;
    letter-spacing: -0.1vw;
    line-height: calc(100vw / 10.75);
    -webkit-text-stroke: 0.3vw black !important;
    padding-bottom: 2vw;
    padding-left: 0;
    padding-top: 0.25vw;
    color: white;
  }
  .illuactive .closeillu2 {
    pointer-events: auto;
    transform: scale(1);
  }
  .inner {
    white-space: nowrap;
    height: auto;
    top: auto;
    bottom: 0;
  }
  .inner .line {
    width: calc(23 * 15vw);
    height: 15vw;
    display: inline-block;
  }
  .inner .line .element {
    transform-origin: bottom center !important;
    float: left;
    width: 15vw;
    height: 15vw;
  }
  .illuactive.illuactive .active2, .projectactive.illuactive .active2 {
    background-position: bottom;
    transform: scale(0.7) !important;
  }
  .illuoverley {
    white-space: normal;
    overflow: scroll;
    padding: 1vw;
    padding-bottom: 18vw;
    z-index: 11 !important;
  }
  .illuoverley img {
    width: 98vw;
    height: auto;
    display: block;
  }
  .illuactive.illuactive .illuoverley h1, .projectactive.illuactive .illuoverley h1 {
    padding: 1vw;
    font-size: 9vw;
    letter-spacing: -0.1vw;
    line-height: 9.5vw;
    -webkit-text-stroke: 0.35vw black !important;
    padding-left: 0;
    max-width: 100vw;
    margin-left: -1vw;
    white-space: normal;
    background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%);
  }
  .illuactive.illuactive .illuoverley h1 a, .projectactive.illuactive .illuoverley h1 a {
    padding-right: 1vw;
    padding-left: 1vw;
    max-width: 100vw;
    -webkit-text-stroke: 0.35vw black !important;
  }
  .inner {
    background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%);
  }
  .bigimage {
    display: none !important;
  }
  .teaser, .teaserinner {
    width: 98.5vw !important;
    height: auto !important;
  }
}

/* body, img {
    backface-visibility: hidden;
}

body{
  overflow: hidden !important;
  will-change: transform;
  height: 100vh;
  transform-origin: 45.495% 41.05%;
  transition: transform 3s ease-in-out;
}

body.test{
  transform: scale(40) translateZ(0);
  overflow: hidden;
} */