h1.home-hero {
  font-family: "National 2 Condensed Web Black";
  font-size: 3rem;
  line-height: 0.7;
  text-transform: uppercase;
}
h1.home-hero .block {
  overflow: hidden;
}
.hero {
  display: flex;
  position: relative;
}
.hero h1,
.hero h2 {
  /* max-width: 320px; */
}

.hero h1 {
  margin-bottom: 0.5rem;
  /* position: relative;
    top: 50px; */
}
.hero h2 {
  /* position: absolute;
    top: 50%;
    margin-bottom: 0;
    transform: translate3d(0, -50%, 0); */
}

.hero--video {
  height: calc(100vh - 60px);

}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
  .hero--video {
   

  
    height: -webkit-fill-available;
    /* height: 100vh; */
    /* height: calc(100vh - env(safe-area-inset-bottom)); */
  }
}
.hero--video video {
  display: none;
}
.hero-wrapper {
  /* background-color: hotpink; */
  max-width: 1920px;
  width: 100%;
  margin: 0px auto;
  position: relative;
}

.hero-aspect-ratio {
  position: relative;
  height: 530px;
}

.hero__short .hero-aspect-ratio::before {
  padding-top: 29.85%;
}
.hero-aspect-ratio .inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero .wrapper {
  z-index: 10;
}
.hero .wrapper-inner {
  /* padding-top: 30px; */
}
.hero h1 {
  margin-top: 30px;
}
.hero h1 .sub-title {
  margin-bottom: 30px;
}
.hero-image.mobile {
  display: block;
}
.hero-image.desktop {
  display: none;
}

.hero video,
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}


.audio-button {
  position: absolute;
  right: 50px;
  bottom: 30px;
  height: 46px;
  width: 46px;
  border: none;
  border-radius: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.audio-button.muted {
  opacity: 0.5;
}

.clip-animation {
  clip-path: circle(0% at 50% 50%);
}

.clip-animation {
  animation: clip 3s ease;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}




.in-view.hero h1  {
  animation-name: slideInLeft;
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.35, 1, 0.45, 1);
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.hero h1.sub-title {
  line-height: 1;
}

@keyframes clip {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(150% at 50% 50%);
  }
}
[lang="de-de"] .hero.our-leadership-team h2 span.mask,
[lang="de-de"] .hero.channels h2 span.mask {
  line-height: 0.9;
}

@media (min-width: 768px) {
  .audio-button {
    display: flex;
  }
  .hero-image.mobile {
    display: none;
  }
  .hero-image.desktop {
    display: block;
  }
  .hero h1,
  .hero h2 {
    max-width: 510px;
    position: static;
    transform: none;
  }

  [lang="en-gb"] .hero.channels h1,
  [lang="en-gb"] .hero.channels h2,
  [lang="en-gb"] .hero.news-views h1,
  [lang="en-gb"] .hero.news-views h2,
  
  [lang="de-de"] .hero.terms h1,
  [lang="de-de"] .hero.terms h2{
    max-width: 100%;
  }


  [lang="de-de"] .hero.privacy h1,
  [lang="de-de"] .hero.privacy h2, 
  
  [lang="de-de"] .hero.our-leadership-team h1,
  [lang="de-de"] .hero.our-leadership-team h2
  {
    max-width: 610px;
  }


  .hero h1 {
    margin-bottom: 1rem;
  }
  .hero-aspect-ratio {
    position: relative;
    height: auto;
  }
  .hero-aspect-ratio::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 47.761194029850746%;
    padding-top: 44.43%;
  }
  .hero--video video {
    display: block;
  }
  .hero-aspect-ratio .inner {
    display: block;
  }

  
}