@font-face {
  font-family: 'Appareo';
  src: url("../fonts/appareo-blackitalic-webfont.woff2") format("woff2"), url("../fonts/appareo-blackitalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Appareo';
  src: url("../fonts/appareo-black-webfont.woff2") format("woff2"), url("../fonts/appareo-black-webfont.woff") format("woff");
  font-weight: bold; }

@font-face {
  font-family: 'Appareo';
  src: url("../fonts/appareo-medium-webfont.woff2") format("woff2"), url("../fonts/appareo-medium-webfont.woff") format("woff"); }

@font-face {
  font-family: 'Appareo';
  src: url("../fonts/appareo-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/appareo-mediumitalic-webfont.woff") format("woff");
  font-style: italic; }

@font-face {
  font-family: 'Rubik';
  src: url("../fonts/rubik-v7-latin-500.woff2") format("woff2"), url("../fonts/rubik-v7-latin-500.woff") format("woff");
  font-weight: 500; }

@font-face {
  font-family: 'Rubik';
  src: url("../fonts/rubik-v7-latin-500italic.woff2") format("woff2"), url("../fonts/rubik-v7-latin-500italic.woff") format("woff");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: 'Rubik One';
  src: url("../fonts/RubikOne-Regular.woff2") format("woff2"), url("../fonts/RubikOne-Regular.woff") format("woff");
  font-weight: 400; }

.menu-toggle {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation; }

.image-ratio {
  display: block;
  position: relative; }
  .image-ratio img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  background: #fffbeb;
  font-family: "Appareo", sans-serif;
  font-size: 17px;
  line-height: 23px; }
  @media screen and (max-width: 767px) {
    html {
      font-size: 16px;
      line-height: 1.35; } }

.secretPath {
  position: absolute;
  left: 0;
  top: 0;
  width: 5vw;
  height: 5vw;
  z-index: 10; }

h1 {
  font-family: "Rubik One", sans-serif;
  font-weight: normal;
  text-align: center;
  margin: .375em auto;
  line-height: 1;
  font-size: 2em; }
  h1:first-child {
    margin-top: 0; }
  h1 + .bow {
    margin-bottom: 23px; }
  @media screen and (max-width: 767px) {
    h1 {
      font-size: 1.6em; } }

h2 {
  font-weight: normal;
  text-align: center;
  font-size: 1.1875em;
  margin: 16px 0 0; }

.h2-container {
  margin: 23px 0 0;
  text-align: center; }
  .h2-container h2 {
    display: inline;
    margin: 0 5px;
    line-height: 46px; }

p,
ol,
ul {
  margin: 23px 0; }

ol,
ul {
  margin-left: 1.5em; }

a {
  color: inherit; }

.blockquote-container {
  position: relative;
  padding: 0 1.5em;
  margin-top: 20px;
  margin-top: 20px; }
  .blockquote-container .icon {
    position: absolute;
    width: 10px;
    height: 13px; }
  .blockquote-container .arrow-right {
    left: 5px;
    top: 3px; }
  .blockquote-container + ul {
    margin-top: -4px; }
    .blockquote-container + ul li:only-child {
      list-style: none;
      font-size: .85em;
      font-style: italic; }
      .blockquote-container + ul li:only-child:before {
        content: "("; }
      .blockquote-container + ul li:only-child:after {
        content: ")"; }

.logo {
  max-width: 100%;
  font-size: 80px;
  text-align: right;
  margin: 0;
  text-transform: uppercase;
  position: relative; }
  .logo:after {
    content: ""; }
  @media screen and (max-width: 767px) {
    .logo {
      font-size: 34px; } }
  .logo a {
    color: inherit;
    text-decoration: none; }

.logo-small {
  font-family: "Rubik One", sans-serif;
  position: relative;
  font-size: 42px;
  text-transform: uppercase;
  line-height: 106px; }
  @media screen and (max-width: 767px) {
    .logo-small {
      font-size: 21px;
      line-height: 53px; } }
  .logo-small .small-circle {
    position: absolute;
    right: -34px;
    top: -2px;
    width: 106px;
    height: 106px;
    background: currentColor;
    z-index: -1;
    border-radius: 100%; }
    @media screen and (max-width: 767px) {
      .logo-small .small-circle {
        width: 53px;
        height: 53px;
        top: -1px;
        right: -18px; } }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px; }

header {
  margin: 66px 0 56px; }
  @media screen and (max-width: 767px) {
    header {
      margin: 18px 5px 56px; } }
  header .container {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      header .container {
        justify-content: flex-end; } }
  header .stadtmission {
    margin-top: 8px;
    height: 61px; }
    @media screen and (max-width: 767px) {
      header .stadtmission {
        margin-top: 2px;
        margin-right: 15px;
        height: 29px; } }

.menu-holder {
  position: fixed;
  top: 21px;
  left: 0;
  width: 100%;
  z-index: 5; }
  @media screen and (max-width: 767px) {
    .menu-holder {
      position: absolute;
      left: 0;
      top: 0; } }
  .menu-holder ~ * {
    transition: opacity 200ms 100ms;
    will-change: opacity; }
  .menu-holder.is-open ~ * {
    opacity: 0;
    transition: opacity 200ms; }
  .menu-holder.is-open .menu {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    pointer-events: auto; }
  .menu-holder.is-open .close {
    display: inline; }
  .menu-holder.is-open .burger {
    display: none; }
  .menu-holder.is-open .menu-toggle-label {
    opacity: 0; }
  .menu-holder .container {
    display: flex;
    justify-content: flex-end; }
    @media screen and (max-width: 767px) {
      .menu-holder .container {
        display: block;
        padding: 0; }
        .menu-holder .container .line {
          display: none; } }
  .menu-holder a {
    margin: 0 10px; }

.circle-holder {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  mix-blend-mode: multiply;
  z-index: 4;
  pointer-events: none; }
  .circle-holder .container {
    position: relative; }

.circle {
  background: #fed81b;
  border-radius: 100%;
  width: 270px;
  height: 270px;
  position: absolute;
  left: 95.8%;
  top: 97px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  will-change: background, width, height;
  transition: 8s background, 300ms width, 300ms height;
  opacity: 0.5; }
  @supports (mix-blend-mode: multiply) {
    .circle {
      opacity: 1; } }
  @media screen and (max-width: 767px) {
    .circle {
      top: 33px; } }

.menu-toggle {
  font-size: 20px;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 767px) {
    .menu-toggle {
      position: absolute;
      padding: 20px 28px; } }
  .menu-toggle .close {
    display: none; }

.menu-toggle-label {
  text-transform: uppercase;
  font-size: 15px;
  vertical-align: top;
  margin-top: 5px;
  display: inline-block;
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    .menu-toggle-label {
      display: none; } }

.menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translate3d(50%, -50%, 0) scale(0);
  transform: translate3d(50%, -50%, 0) scale(0);
  transition: 200ms;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (max-width: 767px) {
    .menu {
      position: absolute;
      padding: 50px 0;
      height: auto;
      min-height: 100%; } }
  .menu .container {
    position: relative;
    overflow: hidden; }
  .menu .line {
    position: absolute;
    left: 0;
    top: 60px; }
  .menu a,
  .menu span {
    color: black;
    text-decoration: none;
    display: block;
    text-align: center; }
  .menu span {
    cursor: default; }
  .menu .first-level {
    margin: 0 0 19px;
    padding: 15px 25px;
    font-size: 24px;
    font-family: "Rubik One", sans-serif; }
    @media screen and (max-width: 767px) {
      .menu .first-level {
        margin: 0;
        font-size: 22px;
        padding: 0 15px; } }
  @media screen and (max-width: 767px) {
    .menu .submenu {
      margin: 11px 0; } }
  .menu .second-level {
    font-size: 21px;
    margin: 4px 0; }
    @media screen and (max-width: 767px) {
      .menu .second-level {
        margin: 7px 0;
        font-size: 20px; } }

main .container {
  padding: 0;
  padding-left: 180px; }
  @media screen and (max-width: 767px) {
    main .container {
      padding-left: 0; } }

main .column.english {
  flex: 0.8; }
  main .column.english img {
    display: none; }

.columns {
  display: flex; }
  @media screen and (max-width: 767px) {
    .columns {
      display: block; } }
  .columns .line.icon {
    width: 100%; }
  .columns > .line.icon {
    display: none; }
    @media screen and (max-width: 767px) {
      .columns > .line.icon {
        display: block; } }

.column {
  margin: 0 20px;
  flex: 1; }
  .column figure {
    width: 187.2%;
    margin-bottom: 23px; }
    @media screen and (max-width: 767px) {
      .column figure {
        width: 100%; } }
    .column figure.size-very-small, .column figure.size-small, .column figure.size-medium {
      margin: 0 25px 15px -150px;
      float: left;
      clear: left; }
      @media screen and (max-width: 767px) {
        .column figure.size-very-small, .column figure.size-small, .column figure.size-medium {
          float: none;
          width: 100% !important;
          margin: 0 !important; } }
    .column figure.size-medium {
      width: 220px; }
    .column figure.size-small {
      width: 122px; }
    .column figure.size-very-small {
      width: 92px;
      margin-left: -180px; }
  .column--solo {
    margin-right: 180px; }
    @media screen and (max-width: 767px) {
      .column--solo {
        margin-right: 0; } }
    .column--solo figure {
      width: 100%; }
  .column .icon {
    fill: currentColor; }
  .column .bow.icon {
    margin-left: auto;
    margin-right: auto;
    display: block; }
    .column .bow.icon:last-child {
      margin-top: 20px;
      clear: left; }

.video {
  padding-bottom: 56.25%;
  position: relative; }
  .video.spaced {
    padding-bottom: 105.3%; }
    @media screen and (max-width: 767px) {
      .video.spaced {
        padding-bottom: 56.25%; } }
  .video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }

@media screen and (max-width: 767px) {
  .headline {
    margin-bottom: 2em; } }

.headline .line.icon {
  display: none; }
  @media screen and (max-width: 767px) {
    .headline .line.icon {
      display: block; } }

.headline .bow.icon {
  display: none; }
  @media screen and (min-width: 768px) {
    .headline .bow.icon {
      display: block; } }

@media screen and (max-width: 767px) {
  .headline .english {
    margin-top: 0; }
    .headline .english h1 {
      margin-top: 0.375em; }
    .headline .english .line.icon {
      display: none; } }

.column .icon,
.currentColor {
  transition: 8s color; }

.english {
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: 0.95em; }
  @media screen and (max-width: 767px) {
    .english {
      margin-top: 1em; } }
  .english h1 {
    font-style: normal; }

.spacer {
  display: block; }
  .spacer:first-child {
    margin-bottom: 23px; }

/* 
  
  Grid
  ====

  - 15 cells, 13 gaps

*/
.wall {
  margin: 1vw 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: calc((100vw - 15vw) / 15);
  grid-gap: 1vw;
  grid-auto-flow: dense; }
  @media screen and (max-width: 767px) {
    .wall {
      margin: 20px 0;
      grid-gap: 3vw;
      grid-template-columns: repeat(8, 1fr);
      grid-auto-rows: calc((100vw - 21vw) / 8); } }

.wall-item {
  position: relative; }
  .wall-item.square {
    grid-column: span 2;
    grid-row: span 2; }
  .wall-item.big-square {
    grid-column: span 4;
    grid-row: span 4; }
    .wall-item.big-square .wall-item-text {
      font-size: 2.8vw; }
      @media screen and (max-width: 767px) {
        .wall-item.big-square .wall-item-text {
          font-size: 5vw; } }
  .wall-item.half-wide {
    grid-column: span 1;
    grid-row: span 2; }
  .wall-item.wide {
    grid-column: span 3;
    grid-row: span 2; }
  .wall-item.extra-wide {
    grid-column: span 4;
    grid-row: span 2; }
  .wall-item.long {
    grid-column: span 2;
    grid-row: span 3; }
  .wall-item.extra-long {
    grid-column: span 2;
    grid-row: span 4; }
  .wall-item-overlay, .wall-item-text {
    opacity: 0;
    transition: opacity 250ms; }
  @media screen and (max-width: 767px) {
    .wall-item-overlay {
      opacity: 0.5; } }
  @media screen and (max-width: 767px) {
    .wall-item-text {
      opacity: 1; } }
  .wall-item:hover .wall-item-overlay {
    opacity: 0.8; }
  .wall-item:hover .wall-item-text {
    opacity: 1; }

.wall-item-background,
.wall-item-overlay,
.wall-item-text,
.wall-item-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center; }

.wall-item-text {
  padding: 1vw;
  color: white;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 2vw;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; }
  .wall-item-text p:first-child {
    margin: 0; }

.wall-item-link {
  font: 0/0 a;
  color: transparent; }
  .wall-item-link:after {
    position: absolute;
    right: 0;
    bottom: 0; }

main + footer {
  margin-top: 110px; }
  @media screen and (max-width: 767px) {
    main + footer {
      margin-top: 60px; } }

footer {
  font-size: 14px;
  overflow: hidden; }
  footer .line {
    width: 100%;
    fill: currentColor;
    margin-bottom: 10px; }
  footer .column {
    flex-grow: 0;
    flex-basis: 50%; }
    @media screen and (max-width: 767px) {
      footer .column {
        width: 100%;
        margin-left: 0;
        margin-right: 0; } }
    footer .column--quarter {
      flex-basis: 25%; }
  footer a {
    color: inherit;
    text-decoration: none;
    font-weight: bold; }
  footer .logos {
    margin: 30px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 767px) {
      footer .logos {
        margin-left: 0; } }
  footer .stadtmission {
    width: 96px; }
    @media screen and (max-width: 767px) {
      footer .stadtmission {
        width: 51px; } }

/* way the hell off screen */
.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px; }