@supports (-webkit-touch-callout: none)

html {
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100vw;
  overflow-x: hidden;
}

[lang="en"] *[lang="de"],
[lang="de"] *[lang="en"] {
  display: none;
}

#header {
  position: fixed;
  right: 0;
  top: 0;
}

a.menu-item {
  display: block;
  padding: 20px;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0px 0px 16px rgba(0,0,0,0.5);
  box-shadow: none;
  font-size: 60px;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}

.noscroll {
  overflow: hidden;
}

/* COLORS */

body, .fill { /*, .content, .page-content, .text-content, .caption {*/
  background-color: black;
}


body, .content, .fullscreen,
a, a:hover, a:visited {
  color:  white;
}

#language-switch, .overlay, .caption {
  /*background-color: rgba(255,255,255,0.7);*/
}

body.inverted, .fill.inverted, .inverted .fill { /*, .inverted .content, .inverted .page-content, .inverted .text-content, .inverted .caption { */
  background-color: white;
}

.inverted, .inverted a, .inverted a:hover, .inverted a:visited {
  color:  black;
}

.inverted #language-switch, .inverted .overlay, .iverted .caption {
  /*background-color: rgba(0,0,0,0.7);*/
}


/**************** HEIGHT SETTINGS *****************/

.fullheight{
  height: 100vh;
  /*transition: height 1s;*/
  margin: 0;
}


/**************** FIX HEIGHT FOR MOBILE *****************/

.fullheight {
  height: calc(var(--vh, 1vh) * 100);
}

/* RESPONSIVE SIZES */

body {
  font-family: "Theinhardt", sans-serif;
  font-size: 4vw;
  letter-spacing: 0.02vw;
}

h1, h2, h3 {
  font-size: 11vw;
  padding: 2vw 5.5vw 2.5vw 3vw;
  text-indent: 2vw;
  line-height: 11vw;
}
.page-content.diagonal {
  padding: 3vw 0;
  margin-top: -18vw;
  height: 114vw;
}
.page-content.diagonal.first {
  margin-top: -10vw;
}
.down.arrow {
  width: 12vw;
  padding: 0 12vw;
  box-sizing: unset;
}
.page-content.diagonal {
  width: 130vw;
  margin-left: -15vw;
}
.page-content.diagonal.down .page-content.diagonal.up,
.page-content.diagonal.up .page-content.diagonal.down {
  margin: 0;
  padding: 0;
  width: 101vw;
  height: 107%;
  margin-left: -3.4vw;
  margin-top: -16%;
  /*
  width: 101vw;
  height: 114vw;
  margin-top: -19.1vw;
  margin-left: -3.4vw;
  */
}
.page {
  transition: height 1s;
}
.page.extend {
  margin-bottom: calc(36% + 5vw);
}
.page.extend.less {
  margin-bottom: calc(19% + 5vw);
}

.down.arrow {
  bottom: 23vh;
}

.limit {
  width: 38vw;
  height: 130vw;
}
.limit.left {
  width: 27vw;
}

#container, .page, .overlay {
  width: 100vw;
}

@media screen and (min-width: 1000px) {
  body {
     font-size: 40px;
  }
  h1, h2, h3 {
    font-size: 110px;
    padding: 0 35px;
    padding: 20px 55px 25px 35px;
    text-indent: 20px;
    line-height: 110px;
  }
  .page-content.diagonal {
    padding: 30px 0;
    height: 1140px;
    width: calc(100vw + 300px);
    margin-left: -150px;
    /*margin-top: -260px;*/
  }
  .page.extend {
    margin-bottom: calc(36% + 50px);
  }
  .page.extend.less {
    margin-bottom: calc(19% + 50px);
  }
  .down.arrow {
    width: 120px;
  }

  .limit {
    width: 380px;
    height: 1300px;
  }
  .limit.left {
    width: 270px;
  }

}

/* STYLES */

body {
  font-family: "Theinhardt", sans-serif;
  font-weight: 600;
  line-height: 1.2;
}
h1, h2, h3 {
  text-shadow: 0px 0px 16px rgba(0,0,0,0.5);
  color: white;
  /*background-color: rgba(255,0,100,0.45);*/
  /*border: 2.5vw solid white;*/
  /*margin-top: 80vh;*/
}
.page-content.diagonal {
  overflow: hidden;
}
.down.arrow {
  position: absolute;
  transform: rotate(-90deg);
}
.down.arrow .arrow-icon {
  filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
}
.down.arrow .arrow-icon .arrow {
  fill: white;
}

.italic {
  font-style: italic;
}

.diagonal {
  box-shadow: 0px 0px 2vw rgba(0,0,0,0.3);
}

.diagonal.up {
  transform: rotate(-10deg);
}
.diagonal.down {
  transform: rotate(10deg);
}

h1.diagonal.up {
  clip-path: polygon(7.5% 0%,
                   100% 0%,
                   92.5% 100%,
                    0% 100%);
}

p {
  /*text-align: justify;*/
  /*width: 80vw;*/
  padding: 0;
  margin: 0;
  padding-bottom: 1ex;
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
}
a, a:hover, a:visited {
  font-style: italic;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 0.1em;
}

a.wavy {
  text-decoration-style: wavy;
}

a.clicked {
  /*text-decoration: none;*/
  /*text-decoration-color: grey;*/
}

.hidden {
  display: none;
}

#loader {
  position: absolute;
}
#container {
  top: 0;
  left: 0;
  height: auto;
  overflow: hidden;
}
.limit.left {
  shape-outside: polygon(100% 0, 16% 100%, 0 100%, 0 0);
}
.limit.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%, 61% 0);
}
.left {
  float: left;
}
.right {
  float: right;
}

* {
  opacity: 1;
}

.fade {
  transition: opacity 1s; 
}

img.fade {
  transition: opacity 3s linear !important; 
}

img.delay-short {
  transition-delay: 0.1s !important;
}

.delay {
  transition-delay: 3s;
}

.invisible {
  opacity: 0;
}

.fit-width img {
  width: 100%;
}

.fit-height img {
  height: 100%;
}

.content, .fullscreen {
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  scroll-behavior: smooth;
}

.overlay {
  position: absolute;
  left: 0;
  display: block;
  color: white;
}

.center {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


body:lang(de) #language-switch a.de,
body:lang(en) #language-switch a.en {
  text-decoration: none;
}

body:lang(de) span:lang(en),
body:lang(en) span:lang(de) {
  display: none;
}