body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Rosart-Medium";
  src: url("/assets/fonts/Rosart-Medium.eot");
  src: url("/assets/fonts/Rosart-Medium.woff") format("woff"),
  url("/assets/fonts/Rosart-Medium.eot?#iefix") format("embedded-opentype"),
    url("/assets/fonts/Rosart-Medium.ttf") format("truetype");
  font-weight: thin;
  font-style: normal;
}

@font-face {
  font-family: "Naoko";
  src: url("/assets/fonts/AA_Naoko-03-Regular.otf") format("opentype");
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --h1: 60px;
  --h2: 30px;
  --h3: 24px;
  --text: 20px;
  --smallText: 16px;
  --headline-font: "Naoko";
  --text-font: "Rosart-Medium";
  --color-1: #161415;
  --color-2: #f1f1f1;
  --color-3: #c2b2a3;
}

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

html {
  font-family: var(--text-font);
  font-weight: 100;
}

body {
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: var(--color-2);
  font-size: var(--text);
}
header li {
  list-style: none;
}

li {
  margin-left: 20px;
}

a {
  color: currentColor;
  text-decoration: none;
}

.ui-accordion-header,
.ui-state-active,
button:focus {
  outline: none;
  cursor: pointer;
}
button:active {
  outline: none;
}

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1;
}

h1 {
  font-size: var(--h1);
  font-family: var(--headline-font);
}

h2 {
  font-size: var(--h2);
  font-family: var(--headline-font);
}

h3 {
  font-size: var(--h3);
}

/* CONTENT */

.main {
  width: calc((100vw / 3) * 2);
  padding: 10px 20px 10px 20px;
  border-right: 4px solid var(--color-1);
  display: block;
}

#container {
  border-top: 2px solid var(--color-1);
}
.contentWrapper {
  display: flex;
  flex-direction: row;
}
.content {
  padding: 0 20px;
  width: calc((100vw / 3) * 2);
  border-right: 4px solid var(--color-1);
  display: block;
}

.content p,
.article-description p {
  margin-bottom: 20px;
}

.content h1 {
  margin: 20px 0 10px 0;
}

.separator {
  height: 10vh;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--headline-font);
  font-size: var(--h1);
  line-height: var(--h1);
  border-bottom: 2px solid var(--color-1);
}

.whitespace {
  height: 10vh;
  width: 100vw;
}

a.logo,
.edit-toggle {
  font-family: var(--headline-font);
  font-size: var(--h1);
}

.menu-item a {
  font-family: var(--text-font);
  font-size: var(--h2);
  padding: 0;
  margin: 0;
  height: var(--h3);
}

.header .logo {
  margin-bottom: 0;
}

.header {
  flex-direction: column;
  justify-content: space-between;
  padding: 0px 20px 0px 20px;
  width: 100vw;
  border-bottom: 4px solid var(--color-1);
}

nav,
#menu,
.menu {
  width: 25vw;
}

.header-top {
  width: calc(100vw - 40px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: var(--headline-font);
  font-size: var(--h2);
  height: 8vh;
}

.header-bottom {
  width: calc(100vw - 40px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.languages {
  color: var(--color-3);
}

.active {
  color: var(--color-1);
}

footer .active {
  color: var(--color-2);
}
.featureImage img {
  height: inherit;
  pointer-events: none;
  object-fit: cover;
  margin: 0;
  padding: 0 10px 0 0;

  max-height: 60vh;
  pointer-events: none;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img:focus {
  outline: none !important;
}

.featureImage {
  width: calc(((100vw / 3) * 2) - 40px);
}

.captions {
  font-size: var(--smallText);
  width: 100%;
  line-height: 1.1;
}

.featuredVideo {
  width: calc(((100vw / 3) * 2) - 40px);
  position: relative;
  height: auto;
}

/* YOUTUBE */
.video-con {
  position: relative;
  padding-bottom: 60.25%;
  margin-top: 20px;
  top: 0;
  height: 0;
  overflow: hidden;
}

.video-con iframe,
.video-con object,
.video-con embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 93.5%;
}

p.videoCaption {
  height: 5vh;
  color: var(--color-1);
  position: relative;
}

/* LAZYLOAD */
figure {
  width: 100%;
}
img[data-sizes="auto"] {
  display: block;
  width: 100%;
}

.lazysrcset-ratio {
  position: relative;
  margin: 0;
  padding: 0;
}
.lazysrcset-ratio > img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.lazysrcset-ratio > img:after {
  display: block;
  width: 100%;
  height: 0;
  content: "";
}

/* ACCORDION */

header .edit-toggle,
header .details-toggle,
header .menu-item,
header .ui-accordion-content,
header .ui-corner-bottom,
header .ui-accordion-content-active {
  text-align: right;
}

/* STAGE */
.stage {
  position: relative;
  width: 100vw;
  height: auto;
  border-bottom: 4px solid var(--color-1);
  display: flex;
  flex-direction: row;
}

.stage-image img {
  width: calc(((100vw / 3) * 2) + 2px);
  height: auto;
  pointer-events: none;
  object-fit: cover;
  border-right: 4px solid var(--color-1);
  margin: 0;
  padding: 0;
  display: block;
}

.featureCaptionWrapper {
  position: absolute;
  top: 0;
  width: calc((100vw / 3) * 2);
  height: 100%;
  opacity: 0;
  display: flex;
}

.featureImageCaption {
  background-color: var(--color-2);
  bottom: 0;
  padding: 20px;
  align-self: flex-end;
  width: calc((100vw / 3) * 2);
  opacity: 1;
}

.featureCaptionWrapper:hover {
  transition: opacity 0.5s;
  opacity: 1;
}

.stageCaption {
  position: absolute;
  background-color: var(--color-2);
  bottom: 0;
  padding: 20px;
  align-self: flex-end;
  width: calc(((100vw / 3) * 2) - 2px);
  opacity: 1;
}

.stageCaptionWrapper {
  position: absolute;

  width: calc((100vw / 3) * 2);
  height: 100%;
  opacity: 0;
  display: flex;
}

.stageCaptionWrapper:hover {
  opacity: 1;
  transition: opacity 0.5s;
}

.teamImageLarge {
  pointer-events: none;
  position: relative;
}

.teamImageLarge img {
  width: calc(((100vw / 3) * 2) - 40px);
  height: auto;
  pointer-events: none;
  object-fit: cover;

  margin: 0;
  padding: 0;
  display: block;
}

.largeCaptionWrapper {
  position: relative;
  width: calc(((100vw / 3) * 2) - 40px);
  height: 100vh;

  padding-bottom: 5vh;
}

img.teamImage {
  width: calc(100vw / 3);
  padding-right: 20px;
  padding-top: 8px;
  height: auto;
  object-fit: scale-down;
}

.teamCaption {
  background-color: var(--color-2);
  width: calc(((100vw / 3) * 2) - 40px);

  padding: 20px;
}

#teaser {
  width: calc(100vw / 3);
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.teaserArrow {
  content: url(../img/arrow.svg);
  height: 80px;
  width: calc(100vw / 3);
  align-self: center;
  bottom: 0;
  stroke-width: 5;
  stroke-miterlimit: 10;
  fill: none;
  stroke: var(--day-color-3);
  z-index: 10000000000000;
  margin-top: 10px;
  margin: 5px;
  padding-bottom: 20px;
}
.teaserTitle {
  font-family: var(--headline-font);
  font-size: var(--h2);
  border-bottom: 4px solid var(--color-1);
}

h2.category {
  height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teaserContent {
  width: calc((100vw / 3));
  height: auto;
  flex-grow: 1;
  padding: 20px 40px 40px 40px;
  font-family: var(--headline-font);
  font-size: var(--h3);
  line-height: 1.3;
}

.t-seperator-vertical {
  width: calc((100vw / 3));
  height: auto;
  flex-grow: 1;

  font-family: var(--headline-font);
  font-size: var(--h3);
}

/* MASONRY */

.grid {
  filter: blur(10px);
}

.vl1 {
  border-left: 4px solid var(--color-1);
  height: 100%;
  position: absolute;
  left: calc(100vw / 3);
  margin-left: -2px;
  top: 0;
  z-index: 10;
}

.vl2 {
  border-left: 4px solid var(--color-1);
  height: 100%;
  position: absolute;
  left: calc((100vw / 3) * 2);
  margin-left: -2px;
  top: 0;
  z-index: 10;
}

.coverImage {
  display: flex;

  align-items: flex-end;
}

.masonryHoverInner {
  height: inherit;
  width: calc(100% - 2px);
  position: absolute;
  bottom: 0;
  left: 0;
  align-self: bottom;
  background-color: var(--color-2);
  opacity: 0;
  z-index: 5;
  padding: 10px;
}

.coverImage:hover .masonryHoverInner {
  opacity: 1;
}

/* ARTICLE */

.title {
  padding: 10px 20px 0px 20px;
}

.article-title {
  font-family: var(--headline-font);
  margin-bottom: 20px;
}

.contentTitle {
  padding: 10px 20px 0px 0px;
}

.tags a {
  background-color: var(--color-1);
  color: var(--color-2);
  margin-right: 10px;
  padding: 0 5px;

  font-family: var(--headline-font);
}

.tags {
  display: flex;
  flex-direction: row;
  white-space: normal;
  flex-wrap: wrap;
}

a.tagslist {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: inherit;
  margin-bottom: 5px;
  padding-bottom: 10px;
}

.tagContainer {
  display: relative;
  border-bottom: 2px solid var(--color-1);
  border-top: 2px solid var(--color-1);
  padding: 10px 0 5px 20px;
  white-space: normal;
  height: auto;
  flex-wrap: wrap;
}

.tagContainerArticle {
  padding: 20px 0 20px 0px;
  display: flex;
}

a#active {
  background-color: var(--color-3);
  color: var(--color-1);
}

.close-x:after {
  content: "\00a0\✕";
  white-space: nowrap;
}

a.close-no-bg {
  background-color: none !important;
  background: none;
}

/* TEAM */

.team {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  align-items: flex-start;
}

/* 
.teammemberText p {
padding-bottom:20px;
} */
/* CALENDAR */

.cal-title-past-calendar {
  border-bottom: 4px solid var(--color-1);
  font-family: var(--headline-font);
  font-size: var(--h3);
  padding: 20px 0 20px 20px;
  line-height: 0.5;
}

.cal-title-calendar {
  border-top: 2px solid var(--color-1);
  border-bottom: 4px solid var(--color-1);
  font-family: var(--headline-font);
  font-size: var(--h3);
  padding: 20px 0 20px 20px;
}

.calendar-event,
.calendar-past-event {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 4px solid var(--color-1);
  position: relative;
}

.cal-title {
  font-family: var(--headline-font);
  font-size: var(--h2);
  font-size-adjust: 0.58;
  line-height: 20px;
  height: 20px;

  display: inline-block;
}
.cal-time {
  padding-top: 20px;
}
.cal-date {
  width: 200px;
  font-family: var(--headline-font);
  font-size: var(--h2);
  padding: 0 20px;
}

.cal-info {
  padding: 10px 0 10px 0;
}

.event-info {
  width: calc(100vw - 200px);
  display: flex;
  justify-content: flex-start;
}

.details-toggle-calendar {
  position: absolute;
  right: 10px;

  height: 100%;
  top: 50px;
  margin-top: -50px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.urlBreak {
  word-break: break-all;
}
/* Form */

.formDisclaimer {
  border-bottom: 4px solid var(--color-1);
  padding-bottom: 24px;
  font-family: var(--text-font);
  font-size: var(--h3);
}

#registrationForm {
  border-top: 2px solid var(--color-1);
  border-bottom: 4px solid var(--color-1);
  padding: 20px;
}

input,
textarea {
  border: none;
  background-color: var(--color-2);
  width: calc(100vw - 40px);
  border-bottom: 4px solid var(--color-1);
}

input {
  height: 80px;
  font-family: var(--headline-font);
  font-size: var(--h2);
}

textarea {
  height: 200px;
  font-family: var(--headline-font);
  font-size: var(--h2);
}

::-webkit-input-placeholder {
  /* Edge */

  font-family: var(--headline-font);
  font-size: var(--h2);
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */

  font-family: var(--headline-font);
  font-size: var(--h2);
}

::placeholder {
  font-family: var(--headline-font);
  font-size: var(--h2);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.registration-button {
  margin: 50px 0 100px 0;
  border: 4px solid var(--color-1);
  width: 25vw;
}

.terms {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 20px;
}

input#terms {
  width: 20px;
  height: 20px;
}

input#terms[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-1);
  content: "";
  background-color: none;
}

.nameStatement {
  padding-top: 10px;
}

.underline {
  text-decoration: underline;
}

/* IMAGES */

.coverImage img {
  width: calc(100vw / 3);

  display: block;
}

.text {
  padding: 20px;
}

.smallImageWrapper {
  display: flex;
  height: auto;
  width: calc(((100vw / 3) * 2) - 40px);
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.imageSmall img {
  width: calc(100vw / 4);
  margin: 20px 20px 0px 0px;

  display: block;
}

/* FOOTER */

footer {
  width: 100vw;
  background-color: var(--color-1);
  color: var(--color-2);
  min-height: 10vh;
  bottom: 0;
  position: relative;
  padding: 20px 20px 100px 20px;
  font-family: var(--headline-font);
  font-size: var(--h3);
}

@media (max-width: 1024px) {
  :root {
    --h1: 27px;
    --h2: 27px;
    --h3: 20px;
    --text: 20px;
    --smallText: 16px;
    --captionText: 12px;
  }

  .formDisclaimer {
    border-bottom: 4px solid var(--color-1);
    padding-bottom: 24px;
    font-family: var(--text-font);
    font-size: var(--text);
  }

  .coverImage img {
    width: 100vw;
  }

  .vl1,
  .vl2 {
    display: none;
  }

  nav,
  #menu,
  .menu {
    width: 50vw;
  }

  nav:first-child {
    padding-top: 20px;
  }

  nav {
    line-height: 1.4;
  }

  #teaser {
    width: 100vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 4px solid var(--color-1);
    background-color: var(--color-3);
  }

  .teaserContent {
    width: calc(100vw);

    padding: 20px 20px 25px 20px;
    text-align: center;
  }

  .teaserArrow {
    width: 100vw;
  }

  .t-seperator-vertical {
    display: flex;
    flex-direction: column;

    width: 100vw;
  }

  /* STAGE */
  .stage {
    position: relative;
    width: 100vw;
    flex-direction: column;
  }

  .stageCaption {
    display: none;
  }

  .stage-image img {
    width: 100vw;
    border-right: none;
  }

  /* CONTENT */
  .content {
    width: 100vw;
    border-right: none;
  }

  .teamImageLarge img {
    width: calc(100vw - 40px);
    height: auto;
    pointer-events: none;
    object-fit: cover;

    margin: 0;
    padding: 0 0 20px 0;
    display: block;
  }

  img.teamImage {
    width: calc(100vw - 40px);
    object-fit: cover;
    margin: 0;
    padding: 20px 0;
  }

  .team {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    align-items: flex-start;
  }

  .smallImageWrapper {
    display: flex;
    height: auto;
    width: calc(100vw - 40px);
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .imageSmall img {
    width: calc((100vw / 2) - 40px);
    margin: 20px 20px 0px 0px;

    display: block;
  }

  .header {
    padding: 0px 20px 10px 20px;
  }

  .separator {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* REGISTRATION FORM */
  .registration-button {
    width: calc(100vw - 40px);
  }

  /* CALENDAR */
  .cal-title-past-calendar {
    border-bottom: 4px solid var(--color-1);
    font-family: var(--headline-font);
    font-size: var(--h3);
    padding: 20px 0 20px 20px;
    line-height: 0.5;
  }

  .cal-title-calendar {
    border-top: 2px solid var(--color-1);
    border-bottom: 4px solid var(--color-1);
    font-family: var(--headline-font);
    font-size: var(--h3);
    padding: 20px 20px 20px 20px;
  }

  .calendar-event,
  .calendar-past-event {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 4px solid var(--color-1);
  }

  .cal-title {
    font-family: var(--headline-font);
    font-size: var(--h3);
    font-size-adjust: 0.58;
    line-height: 20px;
    height: 20px;

    display: inline-block;
  }
  .cal-time,
  .cal-description {
    font-size: var(--smallText);
  }

  .cal-date,
  span.cal-place {
    width: 90px;
    font-size: var(--smallText);
    line-height: 1.2;
  }

  .event-info,
  .cal-title,
  .cal-info {
    width: calc(100vw - 180px);
    line-height: 1.2;
  }

  /* .edit-toggle-calendar img, span.details-toggle-calendar img, .ui-state-active img {
  width: 30px !important;
} */

  .details-toggle-calendar {
    position: absolute;
    right: 10px;

    height: 100%;
    top: 50px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .main {
    width: 100vw;
    padding: 10px 20px 10px 20px;
    border-right: none;
  }

  /* CAPTIONS */

  /* feature CAPTION */
  .featureCaptionWrapper {
    position: absolute;
    top: 0;
    width: calc(100vw - 40px);
    height: 100%;
    opacity: 0.5;
    display: flex;
    font-size: var(--captionText);
  }

  .featureImageCaption {
    background-color: var(--color-2);
    bottom: 0;

    align-self: flex-end;
    width: calc(100vw - 40px);
    opacity: 1;
    padding: 5px;
  }

  .featureCaptionWrapper:hover {
    transition: opacity 0.5s;
    opacity: 0.5;
  }

  .featureImage {
    width: calc(100vw - 40px);
    height: inherit;
  }

  .featureImage img {
    pointer-events: none;
    object-fit: cover;
    margin: 0;
    padding: 0 10px 0 0;

    max-height: 60vh;
    pointer-events: none;
    width: calc(100vw - 20px);
  }

  /* STAGE CAPTION */

  .stageCaption {
    position: absolute;
    width: 100vw;
    opacity: 1;
    font-size: var(--captionText);
    padding: 5px;
  }

  .stageCaptionWrapper {
    position: absolute;

    display: flex;
    position: absolute;
    width: calc(100vw - 40px);
    height: 100%;
    opacity: 0.5;
    font-size: var(--captionText);
  }

  .stageCaptionWrapper:hover {
    opacity: 0.5;
    transition: opacity 0.5s;
    font-size: var(--captionText);
  }

  /* MASONRY CAPTION */
  .masonryHoverInner {
    display: none;
  }

  .coverImage:hover .masonryHoverInner {
    opacity: 0.5;
    font-size: var(--captionText);
  }

  /* YOUTUBE */

  .video-con {
    position: relative;
    padding-bottom: 100%;
    margin-top: 20px;
    top: 0;
    height: 0;
    overflow: hidden;
  }
}