/* Variables
Variables that the other CSS sections depend upon
*/
{% include '../../css/variables/_colors.css' %}

.bs-hero {
  padding: 304px 0 160px 0;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

@media (max-width: 1160px) {
  .bs-hero {
    padding-top: 287px;
  }
}

@media (max-width: 991px) {
  .bs-hero {
    padding: 197px 0 100px 0;
  }
}


.bs-hero__overlay {
  z-index: 2;
  background-color: #000;
  /* filter: invert(100%); */
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* @media (min-width: 992px) { */
  .bs-hero.activated .bs-hero__overlay {
    opacity: 1;
  }
/* } */

.bs-hero h1 {
  font-size: 100px;
  line-height: 1.04em;
  color: #fff;
  z-index: 3;
  position: relative;
  mix-blend-mode: difference;
}

@media (max-width: 991px) {
  .bs-hero h1 {
    font-size: 72px;
  }
}

@media (max-width: 767px) {
  .bs-hero h1 {
    font-size: 42px;
  }
}


.bs-hero h2 {
  color: #ec2ee4;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.167em;
  letter-spacing: 0.01em;
  z-index: 3;
  position: relative;
  max-width: 1000px;
}

@media (max-width: 991px) {
  .bs-hero h2 {
    font-size: 25px;
  }
}

@media (max-width: 767px) {
  .bs-hero h2 {
    font-size: 20px;
  }
}