@charset "UTF-8";
/* CSS Document */
body {
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 5; /* For Safari */
  -webkit-hyphenate-limit-after: 5; /* For Safari */
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 8 5 5;
  hyphens: auto;
  hyphenate-limit-chars: 8 5 5;
  –webkit-overflow-scrolling: touch;
  -webkit-overflow-scrolling: auto;
}
a:focus {
  outline: none;
  box-shadow: none;
}
a {
  text-decoration: none;
}
.bigSection {
  height: 100vh;
  width: 100vw;
  background-color: #FF0000;
  margin: 0;
}
.smallSection {
  height: 80vh;
  padding: 15px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  margin: 0;
}
.multiImage {
  height: 80vh;
}
.bigImage {
  grid-column: 1 / span 3;
  height: 100%;
}
.smallImage {
  width: 100%;
  height: 100%;
  grid-column: span 1;
}
.fullVideo {
  background-color: white; /* delete helper */
  position: relative;
  z-index: 0;
}
#playButton, #playButton2, #playButton3, #playButton4, #playButton5 {
  position: absolute;
  top: 30px;
  left: 30px;
  margin: 0;
  z-index: 1;
}
.counter {
  position: absolute;
  top: 30px;
  right: 30px;
  margin: 0;
  z-index: 1;
}
.videotitle {
  position: absolute;
  bottom: 30px;
  left: 30px;
  margin: 0;
  z-index: 1;
}
#playButton h2:hover, #playButton2 h2:hover, #playButton3 h2:hover, #playButton4 h2:hover, #playButton5 h2:hover {
  color: #FF0000;
}
#bgVideo {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
.multiplyImage {
  mix-blend-mode: multiply;
}
.paddingFixStart {
  padding: 30px 30px 15px 30px;
}
.paddingFixEnd {
  padding: 15px 30px 30px 30px;
}
h1 {
  font-size: 7.5vw;
  font-weight: bold;
  line-height: 0.8;
  padding: 0;
  margin: 0;
  color: #FFFFFF;
}
h2 {
  font-size: 6vw;
  font-weight: bold;
  line-height: 1.0;
  padding: 0;
  margin: 0;
  color: #FFFFFF;
  z-index: 2;
}
h3 {
  font-size: 3.4vw;
  font-weight: normal;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  color: #FFFFFF;
}
span {
  color: #FFFFFF;
  font-size: 2vw;
  grid-column: 2 / span 2;
  font-weight: normal;
  padding-top: 90px;
}
p {
  font-size: 1.4vw;
  color: #FFFFFF;
  font-weight: normal;
  margin: 0;
}
.credits {
  position: absolute;
  bottom: 30px;
  left: 30px
}
.logo {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 20vw;
}
.grid3Col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}
#section3 {
  position: relative;
}
#section10 {
  position: relative;
}
.titleContainer {
  padding: 30px;
  height: auto;
  background-color: #FF0000;
  margin: 0;
}
.disclaimerPadding {
  padding-top: 60px;
}
.disclaimer {
  font-size: 1vw;
  padding: 8px 0 32px 0;
  text-decoration: none;
  font-color: white;
}
.disclaimerSize {
  font-size: 2vw;
}
/* Smaller Desktop */
@media only screen and (orientation:landscape) and (max-width: 1400px) and (min-width: 500px) {
  h1 {
    font-size: 7.5vw;
  }
  h2 {
    font-size: 6vw;
  }
  h3 {
    font-size: 3.4vw;
  }
  span {
    font-size: 2vw;
  }
  p {
    font-size: 1.4vw;
  }
  .disclaimerSize {
    font-size: 3.4vw;
  }
  .disclaimer {
    font-size: 1.4vw;
    padding: 4px 0 16px 0;
  }
  .multiImage {
    height: 60vh;
  }
}
/*iPad Portrait*/
@media only screen and (orientation:portrait) and (min-width: 501px) and (max-width: 1025px) {
  h1 {
    font-size: 10vw;
  }
  h2 {
    font-size: 8vw;
  }
  h3 {
    font-size: 4.6vw;
  }
  span {
    font-size: 3.2vw;
  }
  p {
    font-size: 2vw;
  }
  .disclaimerSize {
    font-size: 4.6vw;
  }
  .disclaimer {
    font-size: 2vw;
  }
  .logo {
    width: 34vw;
  }
  #section6, #section8 {
    height: 30vh;
  }
  .smallSection {
    height: 40vh;
  }
  #section3 {
    /*height: 120vh;*/
  }
  #section2 {
    height: 50vh;
  }
  span {
    width: 100%;
    line-height: 1.5;
    grid-column: span 3;
  }
}
/* mobile portrait*/
@media only screen and (orientation:portrait) and (max-width: 500px) {
  h1 {
    font-size: 11vw;
    line-height: 1;
  }
  h2 {
    font-size: 10vw;
  }
  h3 {
    font-size: 7vw;
    line-height: 1;
  }
  span {
    width: 100%;
    line-height: 1.5;
    font-size: 5vw;
    grid-column: span 3;
  }
  p {
    font-size: 3.2vw;
  }
  .disclaimerSize {
    font-size: 7vw;
  }
  .disclaimer {
    font-size: 5vw;
  }
  .logo {
    width: 46vw;
    position: absolute;
    bottom: 12px;
    right: 12px
  }
  .footer .logo {
    width: 46vw;
    position: absolute;
    bottom: 54px;
    left: 12px
  }
  .credits {
    position: absolute;
    bottom: 12px;
    left: 12px;
  }
  .creditsImpressum {
    position: relative;
  }
  .smallImage {
    height: 70vh;
    width: 100%;
    grid-column: span 3;
  }
  .bigImage {
    height: auto;
    width: 100%;
  }
  .bigsection {
    padding: 6px 12px;
  }
  .smallSection {
    padding: 6px 12px;
    grid-gap: 12px;
  }
  .titleContainer {
    padding: 12px;
  }
  .smallSection, .bigSection {
    height: auto;
  }
  #section1, #section10 {
    height: 100vh;
  }
  #section2, #section4, #section41, #section42, #section43, #section44, #bgVideo {
    height: 50vh;
  }
  #section5 {
    padding: 12px 12px 6px 12px;
  }
  #section9 {
    padding: 6px 12px 12px 12px;
  }
  #playButton, #playButton2, #playButton3, #playButton4, #playButton5 {
    position: absolute;
    top: 12px;
    left: 12px;
  }
  .videotitle {
    position: absolute;
    bottom: 12px;
    left: 12px;
  }
  .counter {
    position: absolute;
    top: 12px;
    right: 12px;
  }
}