.hero-banner {
  width: 100%;
  height: 39em;
  margin-bottom: -8px;
  background-color: #707070;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-banner {
    height: 29.125em;
  }
}
@media (max-width: 767px) {
  .hero-banner {
    height: 29.5em;
  }
}
.hero-banner::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.15) 23% 35%, rgba(45, 57, 56, 0.77)), linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.01) 70%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.ltr .hero-banner::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.15) 23% 35%, rgba(45, 57, 56, 0.77)), linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.01) 70%);
}
@media (max-width: 1024px) {
  .hero-banner::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 5%, rgba(0, 0, 0, 0.01) 85%, rgba(45, 57, 56, 0.77));
  }
}
.high-contrast .hero-banner .hero-content .hero-text h1, .high-contrast .hero-banner .hero-content .hero-text p {
  background-color: #424242;
}
.hero-banner img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
@media (max-width: 767px) {
  .hero-banner img {
    width: auto;
    height: 100%;
  }
}
.hero-banner .hero-content {
  height: 72%;
  width: 100%;
  max-width: 1204px;
  margin: 48px auto;
  position: relative;
}
@media only screen and (min-width: 1024px) and (max-width: 1204px) {
  .hero-banner .hero-content {
    padding: 0 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-banner .hero-content {
    margin: 32px auto;
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .hero-banner .hero-content {
    margin: 24px auto;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .hero-banner .hero-content {
    margin: 40px auto 12px;
  }
}
.hero-banner .hero-content .hero-text {
  width: 60%;
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .hero-banner .hero-content .hero-text {
    width: 90%;
    position: relative;
    top: 0;
    transform: translate(0, 0);
  }
  .hero-banner .hero-content .hero-text h1 ~ p {
    font-size: 1.125em;
  }
}
.hero-banner .hero-content .hero-text h1, .hero-banner .hero-content .hero-text p {
  color: #FFFFFF;
}
.hero-banner .hero-content .hero-text h1 {
  margin-bottom: 6px;
}
.hero-banner .hero-content .hero-text p {
  font-size: 1.5em;
  margin: 0 0 48px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-banner .hero-content .hero-text p {
    font-size: 1.125em;
  }
}
@media (max-width: 767px) {
  .hero-banner .hero-content .hero-text p {
    font-size: 1.125em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-banner .hero-content .hero-text p {
    margin: 0 0 32px;
  }
}
@media (max-width: 767px) {
  .hero-banner .hero-content .hero-text p {
    margin: 0 0 40px;
  }
}
.hero-banner .hero-content .hero-text .primary-btn-big {
  margin: 0;
}