@charset "UTF-8";
@-webkit-keyframes coinflip {
  50% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes coinflip {
  50% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes rotation {
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotation {
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes textcolorfade {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 200%;
  }
}
@keyframes textcolorfade {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 200%;
  }
}
@keyframes textcolorfade {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 200%;
  }
}
.container {
  display: grid;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
  padding: 0;
  width: 100%;
}

.column--1 {
  grid-column: span 1;
}

.column--2 {
  grid-column: span 2;
}

.column--3 {
  grid-column: span 3;
}

.column--4 {
  grid-column: span 4;
}

.column--5 {
  grid-column: span 5;
}

.column--6 {
  grid-column: span 6;
}

.column--7 {
  grid-column: span 7;
}

.column--8 {
  grid-column: span 8;
}

.column--9 {
  grid-column: span 9;
}

.column--10 {
  grid-column: span 10;
}

.column--11 {
  grid-column: span 11;
}

.column--12 {
  grid-column: 1/-1;
}

.spacing--mb--0 {
  margin-bottom: 0;
}

.spacing--mb--1 {
  margin-bottom: 1rem;
}

.spacing--mb--2 {
  margin-bottom: 2rem;
}

.spacing--mb--4 {
  margin-bottom: 4rem;
}

.spacing--mb--6 {
  margin-bottom: 6rem;
}

.spacing--mb--8 {
  margin-bottom: 8rem;
}

.spacing--2 {
  padding: 2rem;
}

.padded--text {
  padding-right: 4rem;
}

.center--v {
  align-self: center;
}

@font-face {
  font-family: Whyte;
  src: url("../fonts/Whyte/ABCWhyte-Regular.otf") format("otf"), url("../fonts/Whyte/ABCWhyte-Regular.woff") format("woff"), url("../fonts/Whyte/ABCWhyte-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: Whyte;
  src: url("../fonts/Whyte/ABCWhyte-RegularItalic.otf") format("otf"), url("../fonts/Whyte/ABCWhyte-RegularItalic.woff") format("woff"), url("../fonts/Whyte/ABCWhyte-RegularItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: WhyteInktrap;
  src: url("../fonts/Whyte_Inktrap/ABCWhyteInktrap-Medium.otf") format("otf"), url("../fonts/Whyte_Inktrap/ABCWhyteInktrap-Medium.woff") format("woff"), url("../fonts/Whyte_Inktrap/ABCWhyteInktrap-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: Arnhem;
  src: url("../fonts/Arnhem/Arnhem-Blond.woff") format("woff"), url("../fonts/Arnhem/Arnhem-Blond.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: Arnhem;
  src: url("../fonts/Arnhem/Arnhem-BlondItalic.woff") format("woff"), url("../fonts/Arnhem/Arnhem-BlondItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
}
.whyteinktrap {
  font-family: WhyteInktrap;
  font-weight: 500;
}

.whyte {
  font-family: Whyte;
}

h1 {
  font-size: 4.375rem;
  font-family: WhyteInktrap;
  line-height: 1.188em;
  font-weight: inherit;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2.5rem;
  font-family: WhyteInktrap;
  line-height: 1.25em;
  margin-bottom: 0.5em;
  font-weight: inherit;
}

h3 {
  font-size: 1.75rem;
  font-family: WhyteInktrap;
  line-height: 1.438em;
  margin-bottom: 0.5em;
  font-weight: inherit;
}

.arnhem {
  font-family: Arnhem;
}

h4 {
  font-size: 1.375rem;
  font-family: WhyteInktrap;
  line-height: 1.438em;
  font-weight: inherit;
}

p {
  font-size: 1.25rem;
  font-family: Whyte;
  line-height: 1.5em;
  padding-bottom: 1em;
}

ul,
ol {
  font-size: 1.25rem;
  font-family: Whyte;
  line-height: 1.5em;
  padding-bottom: 0.5em;
  margin-left: 1em;
}
ul li,
ol li {
  margin-bottom: 1em;
}

.small--text,
.small--text p {
  font-size: 1rem !important;
}

p a:link,
p a:visited,
label a:link,
label a:visited,
li a:link,
li a:visited {
  color: #000;
  text-decoration: underline;
}
p a:hover,
p a:focus,
label a:hover,
label a:focus,
li a:hover,
li a:focus {
  text-decoration: underline;
}

a:hover .underline {
  text-decoration: underline;
}

.open {
  color: #000;
}

.request {
  color: #F26241;
}

.booked {
  color: #878B95;
}

/* a past slot must not be told apart from a booked one by lightness: #B9BCC4
   sat at 1.9:1 on white and was effectively unreadable. Same grey as .booked,
   distinguished by the strike instead */
.past {
  color: #878B95;
  text-decoration: line-through;
}

.misc {
  color: #6600A7;
}

header #mobile--nav--toggle {
  display: none;
}
header .menu {
  justify-self: end;
}
header .menu ul {
  font-size: 1.75rem;
  font-family: WhyteInktrap;
  list-style-type: none;
  width: 100%;
  margin-left: 0;
}
header .menu ul li {
  margin-bottom: 0;
}
header .menu a:link,
header .menu a:visited {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #000;
}
header .menu a:link:before,
header .menu a:visited:before {
  content: "→";
  display: inline-block;
  padding-right: 1rem;
  opacity: 0;
  -webkit-transform: translateX(-1rem);
          transform: translateX(-1rem);
  transition: 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  text-align: center;
}
header .menu a:hover:before,
header .menu a.active:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  background-clip: unset;
  -webkit-text-fill-color: #000;
}
header .menu .sound {
  margin: 1rem 0 0 2rem;
  font-size: 1.375rem;
  display: inline-block;
  font-family: Whyte;
  background: #000;
  color: #FFF;
  text-decoration: none;
  padding: 0.5rem 2rem;
  border-radius: 2.5rem;
  align-self: start;
  width: auto;
  transition: cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
  cursor: pointer;
}
header .menu .sound:hover {
  background: #6600A7;
}
header .menu .sound.activeSound {
  background: #FF1D25;
}

footer .menu ul {
  font-size: 1rem !important;
  font-family: Whyte;
  list-style-type: none;
  width: 100%;
  margin-left: 0;
}
footer .menu ul li {
  display: inline;
  margin-right: 2rem;
}
footer .menu ul li a:hover,
footer .menu ul li a:focus {
  text-decoration: underline;
}

.jumper {
  margin-bottom: 2rem;
}

footer {
  margin-top: 8rem;
}
footer p {
  font-size: 1rem !important;
}
footer svg,
footer img {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
}
/* Footer logos are curated in the panel, so this row has to carry any number of
   them instead of the two fixed columns it held until 2026-08-28. With exactly
   two entries it reproduces the old layout — one left, one right.

   Two shared lines run across the row: the intros sit on one baseline, and the
   logos hang from one line below it whatever their height or aspect ratio.
   Until 2026-09-10 this was align-items: flex-end, which stood the logos on a
   common floor instead — with mixed aspect ratios that leaves their top edges
   ragged and pushes each intro to wherever its own logo happens to start. */
.footer--logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.footer--logo {
  flex: 0 1 250px;
  display: flex;
  flex-direction: column;
}
/* Always rendered, empty ones included — this line is what reserves the first
   row, so a logo without an intro still starts at the same height as one with.
   1lh is the intro's own line box; the em value covers browsers without it. */
.footer--intro {
  margin: 0 0 0.75rem;
  min-height: 1.5em;
  min-height: 1lh;
}

/* Instagram in the footer menu row. Sized in em so it tracks the menu type, and
   given its own focus ring: the surrounding menu links show focus through their
   underline, which an icon has none of. */
.footer--social {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.2em;
}
.footer--social svg {
  width: 1.25em;
  height: 1.25em;
  display: block;
}
.footer--social:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.block-type-eventpreview {
  display: block;
  width: 100%;
  text-decoration: none;
}

/* "Aktuelles" on the home page. Borrows the type treatment of .eventpreview
   rather than a new visual language, but not its markup: an eventpreview is one
   link bound to a workshop page, a news item is an editorial entry whose link is
   optional. Sharing the class would have meant a mode switch in both. */
.news__headline {
  margin-bottom: 1.5rem;
}
.newsitem {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.newsitem--has-image {
  flex-direction: row;
  align-items: flex-start;
}
.newsitem__media {
  flex: 0 0 33%;
}
.newsitem__media img {
  display: block;
  width: 100%;
  height: auto;
}
.newsitem__body {
  flex: 1 1 auto;
}
.newsitem__date {
  margin: 0 0 0.25rem;
  color: #717580;
}
.newsitem__headline {
  margin: 0 0 0.5rem;
}
.newsitem__headline:before {
  content: "— ";
  display: inline-block;
  padding-right: 0.5em;
}
.newsitem__text p:last-child {
  padding-bottom: 0;
}
.newsitem__link {
  margin-top: 0.5rem;
  padding-bottom: 0;
}
.newsitem__link a {
  text-decoration: underline;
}

.eventpreview {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding-right: 1rem;
}
.eventpreview .titel {
  margin-bottom: 0;
}
.eventpreview .titel:before {
  content: "— ";
  display: inline-block;
  padding-right: 0.5em;
  transition: ease-in-out 0.24s;
}
.eventpreview .subtitel {
  font-family: Arnhem;
}
.eventpreview:hover .titel:before {
  content: "→ ";
  padding-right: 0.75em;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.eventpreview:hover .subtitel {
  text-decoration: underline;
}
.eventpreview p {
  padding-bottom: 0;
}

.calendar {
  font-family: WhyteInktrap;
  border-collapse: collapse;
}
.calendar .calendar--head {
  height: 4rem;
}
.calendar .calendar--head td {
  font-size: 2.5rem;
  width: 14.2857142857%;
  padding-bottom: 1rem;
}
.calendar tr {
  height: 8rem;
}
.calendar td {
  font-size: 1.75rem;
  vertical-align: top;
  border-bottom: 1px solid #000;
  padding-top: 0.375em;
  height: inherit;
}
.calendar td a {
  display: block;
}
.calendar td a:hover p {
  text-decoration: underline;
}
.calendar td a.request p {
  color: #F26241;
}
/* Bookable is the one state that asks the visitor to act. It was a filled black
   chip from 2026-09-04; on 2026-09-10 the client asked for colour instead —
   green type, no background. #007A3D sits at 5.45:1 on white, so it clears AA
   for normal text with room to spare, and no other state in the grid is green.
   It carries less weight than the chip did, which was the chip's whole point —
   the hue is now what has to do that work. */
.calendar td a.open p {
  color: #007A3D;
}
.calendar td a.misc p {
  color: #6600A7;
}
.calendar td a:only-child {
  height: 100%;
}
.calendar td .booked {
  color: #878B95;
}
.calendar td .past {
  color: #878B95;
  text-decoration: line-through;
}

/* Legend: one swatch per state. The label stays body-colour because at 1rem
   the AA threshold is 4.5:1 and neither #F26241 (3.18:1) nor #878B95 (3.41:1)
   reaches it — in the 1.75rem grid the same colours clear the 3:1 that applies
   to large text, so the grid keeps the brand colours unchanged. The swatch is a
   graphical object (3:1) and carries the state without colour perception alone,
   which is also what the mobile dots already do. */
.calendar--legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.calendar--legend__item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.calendar--legend__item::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: currentColor;
}
.calendar--legend__item--open::before    { background: #007A3D; }
.calendar--legend__item--request::before { background: #F26241; }
.calendar--legend__item--booked::before  { background: #878B95; }
.calendar--legend__item--misc::before    { background: #6600A7; }
/* past shares the grey with booked and is told apart by the strike, exactly as
   in the grid — so the legend cannot promise a difference the grid does not show */
.calendar--legend__item--past::before {
  background: #878B95;
}
.calendar--legend__item--past {
  text-decoration: line-through;
  text-decoration-color: #878B95;
}

.calendar--notice {
  margin-top: 1rem;
}
.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

@media only screen and (max-width : 694px) {
  body.no-scroll {
    overflow: hidden;
  }
  .container {
    grid-column-gap: 0.25rem;
  }
  .container--mobile {
    grid-row-gap: 0;
  }
  .column--1,
  .column--2,
  .column--3,
  .column--4,
  .column--5,
  .column--6,
  .column--7,
  .column--8,
  .column--9,
  .column--10,
  .column--11 {
    grid-column: 1/-1;
  }
  h1 {
    font-size: 2rem;
    word-wrap: break-word;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  .padded--text {
    padding-right: 0;
  }
  .spacing--mb--1 {
    margin-bottom: 0.25rem;
  }
  .spacing--mb--2 {
    margin-bottom: 0.5rem;
  }
  .spacing--mb--4 {
    margin-bottom: 1rem;
  }
  .spacing--mb--6 {
    margin-bottom: 2rem;
  }
  .spacing--mb--8 {
    margin-bottom: 3rem;
  }
  .spacing--mb--mobile--1 {
    margin-bottom: 1rem;
  }
  .spacing--mb--mobile--2 {
    margin-bottom: 2rem;
  }
  .spacing--mb--mobile--4 {
    margin-bottom: 4rem;
  }
  header .logo {
    grid-column: span 8;
  }
  header .menu {
    grid-column: span 4;
  }
  header #mobile--nav--toggle {
    position: fixed;
    display: block;
    top: 5vh;
    right: 5vw;
    background: none;
    z-index: 9999;
  }
  header nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    padding: 5vh calc(5vw + 44px) 5vh 5vw;
    background: #FFF;
    opacity: 0;
    z-index: -9998;
    overflow: auto;
    transition: opacity cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
  }
  header nav.show {
    display: block;
    opacity: 1;
    z-index: 9998;
  }
  .calendar .calendar--head {
    height: 3rem;
  }
  .calendar .calendar--head td {
    font-size: 1.25rem;
    padding-bottom: 0;
  }
  .calendar tr {
    height: 4rem;
  }
  .newsitem--has-image {
    flex-direction: column;
  }
  .newsitem__media {
    flex: 1 1 auto;
  }

  .calendar td {
    font-size: 1.25rem;
  }
  .calendar td a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .calendar td a.request:after {
    display: block;
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-color: #F26241;
    border-radius: 1rem;
    font-size: 1.75rem;
    margin-top: 0.125em;
  }
  .calendar td a.open:after {
    display: block;
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-color: #000;
    border-radius: 1rem;
    font-size: 1.75rem;
    margin-top: 0.125em;
  }
  .calendar td a.booked:after {
    display: block;
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-color: #878B95;
    border-radius: 1rem;
    font-size: 1.75rem;
    margin-top: 0.125em;
  }
  .calendar td a.misc:after {
    display: block;
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    /* was #AC298D while the label is #6600A7 — same state, two colours */
    background-color: #6600A7;
    border-radius: 1rem;
    font-size: 1.75rem;
    margin-top: 0.125em;
  }
  .calendar td p {
    display: none;
  }
  .calendar td .calendar--mobile--dot {
    display: block;
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-color: #878B95;
    border-radius: 1rem;
    font-size: 1.75rem;
    margin-top: 0.125em;
  }
  .dozenten {
    margin-bottom: 4rem;
  }
  .dozenten a {
    margin-bottom: 2rem;
  }
  .footer--logos {
    justify-content: flex-start;
  }
  .block-type-image,
  .block-type-text,
  .block-type-eventpreview {
    margin-right: 0;
  }
}
@media only screen and (min-width : 694px) and (max-width : 1340px) {
  .block-type-image,
  .block-type-text,
  .block-type-eventpreview {
    margin-right: 2rem;
  }
}
@media only screen and (min-width : 1340px) {
  .block-type-image,
  .block-type-text,
  .block-type-eventpreview {
    margin-right: 2rem;
  }
}
*,
*::before,
*::after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-size: 1em;
  height: 100%;
  padding: 5vh 5vw;
  font-family: Arnhem;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a:link,
a:visited {
  word-wrap: break-word;
  color: #000;
  text-decoration: none;
}

.soundteaser {
  margin-top: 4rem;
}
.soundteaser .block--wrapper:nth-child(2) {
  margin-top: 5vh;
  -webkit-transform: scaleY(0.725);
          transform: scaleY(0.725);
}
.soundteaser .block--wrapper:nth-child(3) {
  margin-top: -4vh;
  -webkit-transform: scaleY(0.75);
          transform: scaleY(0.75);
}
.soundteaser .block--wrapper:nth-child(4) {
  margin-top: 4vh;
}
.soundteaser .soundblock--wrapper {
  min-height: 15vh;
  display: block;
}
.soundteaser .block-type-soundblock {
  padding: 0;
}

.intro * {
  max-width: 740px;
}

.rectangle {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  align-self: end;
}
.rectangle span {
  position: absolute;
  left: 0;
  top: -4rem;
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(102, 0, 167);
  background: linear-gradient(0deg, rgb(102, 0, 167) 0%, rgb(82, 255, 172) 100%);
  z-index: -1;
  transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
  -webkit-clip-path: polygon(30% 0%, 100% 0%, 85% 100%, 0% 100%);
          clip-path: polygon(30% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.rectangle img {
  padding-left: 10%;
  max-height: 60vh;
  width: auto;
  transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}

@-webkit-keyframes skew01 {
  0% {
    -webkit-clip-path: polygon(100% 0%, 100% 0%, 85% 100%, 0% 100%);
            clip-path: polygon(100% 0%, 100% 0%, 85% 100%, 0% 100%);
    background-position: 100% 50%;
  }
  100% {
    -webkit-clip-path: polygon(97% 0%, 97% 3%, 88% 97%, 3% 97%);
            clip-path: polygon(97% 0%, 97% 3%, 88% 97%, 3% 97%);
    background-position: 0% 50%;
  }
}

@keyframes skew01 {
  0% {
    -webkit-clip-path: polygon(100% 0%, 100% 0%, 85% 100%, 0% 100%);
            clip-path: polygon(100% 0%, 100% 0%, 85% 100%, 0% 100%);
    background-position: 100% 50%;
  }
  100% {
    -webkit-clip-path: polygon(97% 0%, 97% 3%, 88% 97%, 3% 97%);
            clip-path: polygon(97% 0%, 97% 3%, 88% 97%, 3% 97%);
    background-position: 0% 50%;
  }
}
header {
  display: block;
  margin-bottom: 8rem;
}

.logo svg {
  width: 100%;
  height: auto;
}

main {
  -webkit-filter: none;
          filter: none;
  transition: all 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.blur {
  -webkit-filter: blur(10px);
          filter: blur(10px);
  opacity: 0.5;
}

.blur.lazyloaded {
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
}

.block-type-soundblock {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 2rem 4rem 0;
}
.block-type-soundblock:hover {
  cursor: url("../images/play_mouse.svg"), auto;
}

/* The sound snippet is a <button> now, so the browser defaults have to go —
   but the focus ring must not, which is why only outline-less states are reset.
   LV 5 asks for the audio to stop being overlooked: the play cue below is the
   affordance that was missing, and .is-playing is the feedback that was
   commented out in sound.js. */
.soundblock--wrapper {
  position: relative;
  display: block;
  min-height: 80px;
  width: 100%;
  height: 100%;
  z-index: 0 !important;
  transition: cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.soundblock--wrapper:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

.soundblock {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
  z-index: 0 !important;
}

.soundallow {
  background: linear-gradient(180deg, #FFFF00 0%, #FF1D25 100%);
  margin: auto;
  height: 100%;
  vertical-align: middle;
}
.soundallow h1 {
  color: #FFF;
  text-align: center;
  vertical-align: middle;
  height: auto;
  margin: auto;
}

.block-type-image,
.block-type-text,
.block-type-eventpreview {
  position: relative;
  margin-bottom: 4rem;
  z-index: 999;
}

.block-type-text,
.block-type-list {
  margin-bottom: 2rem;
}

.block > .highlight {
  display: block;
  box-shadow: 0 0 0 1px #000;
  padding: 2rem 1rem 1rem;
}

.card {
  display: block;
  height: 100%;
  padding-right: 2rem;
  transition: cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
}
.card:hover:not(.nohover) {
  background: #000;
  color: #FFF;
  box-shadow: none;
}
.card:hover:not(.nohover) .button {
  padding-left: 0;
}

label {
  font-size: 1.375rem;
  font-family: "WhyteInktrap";
  display: inline-block;
  width: 100%;
  margin-top: 2rem;
}
label.checkbox-container {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  padding: 0;
  width: 100%;
}
label.checkbox-container #privacy {
  grid-column: span 1;
}
label.checkbox-container p {
  grid-column: span 23;
}

input:not([type=submit]),
textarea {
  font-size: 1.25rem;
  font-family: "WhyteInktrap";
  display: inline-block;
  outline: 2px solid #000;
  padding: 1rem;
  margin: 1rem 0 0;
  width: 100%;
}
input:not([type=submit]):hover,
textarea:hover {
  outline: 4px solid #000;
}
input:not([type=submit]):focus,
textarea:focus {
  background: #000;
  color: #FFF;
  outline: 4px solid #000;
}

input[type=checkbox] {
  height: 2rem;
  width: 2rem;
  outline: 2px solid #000;
  margin-right: 1rem;
  line-height: 1rem;
  vertical-align: bottom;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
}
input[type=checkbox]:hover, input[type=checkbox]:focus {
  background-color: #FFF;
  outline: 3px solid #000;
}
input[type=checkbox]:checked {
  background-color: #000;
  border-radius: 0;
  box-shadow: 0 0 0 4px inset #FFF;
}

input[type=submit] {
  margin-right: 1rem;
}

.error {
  color: #FF1D25;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

.button,
.button:link,
.button:visited,
input[type=submit],
input[type=submit]:visited {
  box-sizing: content-box;
  font-size: 1.375rem;
  display: inline-block;
  font-family: Whyte;
  font-weight: inherit;
  background: #000;
  outline: 0;
  color: #FFF;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 2.5rem;
  vertical-align: middle;
  width: auto;
  line-height: 1em;
  transition: cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-bottom: 1rem;
}
.button.inactive,
.button:link.inactive,
.button:visited.inactive,
input[type=submit].inactive,
input[type=submit]:visited.inactive {
  background: #D1D1D1;
}
.button.secondary,
.button:link.secondary,
.button:visited.secondary,
input[type=submit].secondary,
input[type=submit]:visited.secondary {
  background: #FFF;
  color: #000;
  box-shadow: 0 0 0 2px #000;
}

.button:hover,
.button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  border-radius: 2.5rem 0 2.5rem 0;
}
.button:hover.inactive,
.button:focus.inactive,
input[type=submit]:hover.inactive,
input[type=submit]:focus.inactive {
  border-radius: 2.5rem;
}

.tertiary {
  font-family: WhyteInktrap;
}
.tertiary:before {
  content: "←";
  display: inline-block;
  background: #FFF;
  color: #000;
  text-align: center;
  line-height: 1.5em;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
  box-shadow: 0 0 0 2px #000;
  transition: cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
}
.tertiary:hover:before {
  content: "←";
  -webkit-animation: coinflip cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
          animation: coinflip cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.24s;
}

.fourthly {
  font-family: WhyteInktrap;
  transition: 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  text-decoration: none;
}
.fourthly:hover {
  box-shadow: 0 2px 0 #000;
}

/**Styling scrollable elements*/
.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}
.js-scroll:nth-of-type(1) {
  opacity: 1;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  -webkit-animation: fade-in 0.72s cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
          animation: fade-in 0.72s cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
}

.scrolled.fade-in-bottom {
  -webkit-animation: fade-in-bottom 0.72s cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
          animation: fade-in-bottom 0.72s cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
}

.scrolled.slide-left {
  -webkit-animation: slide-in-left 1s ease-in-out both;
          animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  -webkit-animation: slide-in-right 1s ease-in-out both;
          animation: slide-in-right 1s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
button.sound[aria-pressed="true"] {
  text-decoration: underline;
}
button.sound:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

@media (prefers-reduced-motion) {
  .js-scroll {
    opacity: 1;
  }
  .scrolled {
    -webkit-animation: none !important;
            animation: none !important;
  }
}