/* CSS Document */
.home-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #000;
}
.home-banner .bnn {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.home-banner .bnn:after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
}
/* object-fit, not the video's own aspect ratio: the banner height used to be
   55.5vw, which tracked the 16:9 clip so it always covered. The desktop height
   is viewport-based now, so the video has to cover on its own — otherwise the
   stretched bnn-default.jpg shows through below it. */
.home-banner .bnn video {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-banner .bnn img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.home-banner .container {
  padding: 50px 0;
  height: 55.5vw;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 60px;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
}
.home-banner.ready .container {
  opacity: 1;
  animation: fadeInUp .6s both;
}
.home-banner .container h1 {
  color: #FFF;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 83.333% */
}
.home-banner .container h1 span {
  display: block;
  color: #FFF;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 166.667% */
}
.home-banner .container p {
  color: #FFF;
  text-align: center;
  font-family: Montserrat;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em; /* 133.333% */
  max-width: 610px;
  margin: 0 auto;
}

/* Header + hero = one screen, so a single scroll clears the banner. The header
   sits in normal flow above it and is 182px from 1366px up, 162px between 992
   and 1365px. Below 992px the header is 76px and the 55.5vw / 60vh heights
   above already fit the screen, so they stay. Changing the header height means
   changing these two numbers. */
@media (min-width: 992px) {
  .home-banner .container {
    height: calc(100vh - 222px);
  }
}
@media (min-width: 992px) and (max-width: 1365px) {
  .home-banner .container {
    height: calc(100vh - 202px);
  }
}

@media (max-width: 991px) {
}
@media (max-width: 768px) {
  .home-banner .bnn video {
    width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%)
  }
  .home-banner .container {
    padding: 10px 0;
    gap: 10px;
    max-width: 100%;
    height: 60vh;
  }
  .home-banner .container h1 {
    font-size: 8vw;
    line-height: 1.6em;
  }
  .home-banner .container h1 span {
    font-size: 4vw;
    line-height: 1.4em;
  }
  .home-banner .container p {
    font-size: 3.4vw;
  }
}