/**
 * ------------------------------------------------------------ *\
 * 	Hero Base
 * \* ------------------------------------------------------------
 *
 * @format
 */

.hero-base {
  padding: 30px 0;
  color: #000;
  background-color: white;
  // text-align: center;
  h1 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 1023px) {
  .hero-base {
    // padding: 110px 0 82px;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-base {
    // padding: 43px 0 38px;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-base h1 {
    letter-spacing: 0;
  }
}
/* ------------------------------------------------------------ *\
	Hero Base Post
\* ------------------------------------------------------------ */
.hero-base--post {
  position: relative;
  text-align: left;
  padding: 123px 80px 120px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 1023px) {
  .hero-base--post {
    padding: 83px 80px 91px;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-base--post {
    text-align: center;
    padding: 43px 30px 38px;
  }
}
.hero-base--post:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0.6;
}
.hero-base--post h1 {
  color: white;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  max-width: 992px;
  margin: 0 auto;
  font-size: 55px;
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-base--post h1 {
    letter-spacing: 0.01818em;
    font-size: 25px;
  }
}
/* ------------------------------------------------------------ *\
	Hero Base About
\* ------------------------------------------------------------ */
.hero-base--about {
  text-align: center;
  padding: 98px 80px 103px;
  color: white;
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-base--about {
    padding: 42px 30px 39px;
  }
}
/* ------------------------------------------------------------ *\
	Hero Innerpages
\* ------------------------------------------------------------ */
.hero-innerpages {
  background-color: #000;
  color: #fff;
  padding: 29px 0 117px;
  position: relative;
}
@media (max-width: 1023px) {
  .hero-innerpages {
    padding: 40px 0 60px;
  }
}
.hero-innerpages .hero__inner {
  max-width: 45%;
}
@media (max-width: 1199px) {
  .hero-innerpages .hero__inner {
    max-width: 55%;
  }
}
@media (max-width: 1023px) {
  .hero-innerpages .hero__inner {
    max-width: 100%;
  }
}
.hero-innerpages .hero__inner > * {
  position: relative;
  z-index: 2;
}
.hero-innerpages .hero__content .breadcrumbs {
  margin-bottom: 8.6em;
}
@media (max-width: 1023px) {
  .hero-innerpages .hero__content .breadcrumbs {
    margin-bottom: 5.6em;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-innerpages .hero__content .breadcrumbs {
    margin-bottom: 3.3em;
  }
}
.hero-innerpages .hero__content > h3 {
  margin-bottom: 0.25em;
}
.hero-innerpages .hero__content > h1 {
  text-transform: none;
  margin-bottom: 0.05em;
}
@media (max-width: 1023px) {
  .hero-innerpages .hero__content > h1 {
    margin-bottom: 0.09em;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-innerpages .hero__content > h1 {
    letter-spacing: 0.01818em;
  }
}
.hero-innerpages .hero__content > h6 {
  font-weight: 400;
}
.hero-innerpages .hero__content > h5 {
  margin-bottom: 1.25em;
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-innerpages .hero__content > h5 {
    margin-bottom: 1.15em;
  }
}
.hero-innerpages .hero__content > .price small {
  display: inline-block;
  margin-left: 10px;
  letter-spacing: 0.07143em;
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-innerpages .hero__content > .price small {
    font-size: 14px;
    margin-left: 12px;
    margin-top: 3px;
  }
}
.hero-innerpages .hero__actions {
  margin-top: 25px;
}
@media (max-width: 1023px) {
  .hero-innerpages .hero__actions {
    margin-top: 0;
  }
}
.hero-innerpages .list-links-alt {
  margin-top: 28px;
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-innerpages .list-links-alt {
    margin-top: 19px;
  }
}
.hero-innerpages .hero__media {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 79.14%;
  background-size: 161% auto;
  background-position: -7% 73.1%;
  background-repeat: no-repeat;
}
@media (max-width: 1023px) {
  .hero-innerpages .hero__media {
    position: relative;
    width: 100vw;
    padding-top: 84.7%;
    margin: 0 -80px;
    background-size: 228% auto;
    background-position: 22% 65.6%;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-innerpages .hero__media {
    padding-top: 94.7%;
    margin: 0 -30px;
    background-position: 22% 71.6%;
  }
}
.hero-innerpages .hero__media:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(black),
    to(rgba(0, 0, 0, 0))
  );
  background-image: -o-linear-gradient(left, black 0%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0) 100%);
  width: 37.16%;
}
@media (max-width: 1023px) {
  .hero-innerpages .hero__media:after {
    width: 100%;
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(black),
      color-stop(40%, rgba(0, 0, 0, 0)),
      color-stop(40%, rgba(0, 0, 0, 0)),
      to(black)
    );
    background-image: -o-linear-gradient(
      top,
      black 0%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0) 40%,
      black 100%
    );
    background-image: linear-gradient(
      to bottom,
      black 0%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0) 40%,
      black 100%
    );
  }
}
/* ------------------------------------------------------------ *\
	Hero-innerpages Alt
\* ------------------------------------------------------------ */
.hero-innerpages--alt {
  background-color: #fff;
  color: #000;
}
.hero-innerpages--alt .hero__media {
  background-size: 97% auto;
  background-position: 36px 44%;
}
@media (max-width: 1023px) {
  .hero-innerpages--alt .hero__media {
    background-size: 157% auto;
    background-position: -140px 44%;
  }
}
.hero-innerpages--alt .hero__media:after {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(14%, white),
    to(rgba(255, 255, 255, 0))
  );
  background-image: -o-linear-gradient(
    left,
    white 14%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: linear-gradient(
    to right,
    white 14%,
    rgba(255, 255, 255, 0) 100%
  );
}
@media (max-width: 1023px) {
  .hero-innerpages--alt .hero__media:after {
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(white),
      color-stop(40%, rgba(255, 255, 255, 0)),
      color-stop(40%, rgba(255, 255, 255, 0)),
      to(white)
    );
    background-image: -o-linear-gradient(
      top,
      white 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 40%,
      white 100%
    );
    background-image: linear-gradient(
      to bottom,
      white 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 40%,
      white 100%
    );
  }
}
.hero-innerpages--alt .hero__content > h3 {
  margin-bottom: 0.4em;
}
.hero-innerpages--alt .hero__content > h5 {
  margin-bottom: 1.55em;
}
.hero-innerpages--alt .hero__actions {
  margin-top: 30px;
}
.hero-innerpages--alt .list-links-alt,
.hero-innerpages--alt .list-links-alt svg {
  color: currentcolor;
}
.hero-innerpages--alt .breadcrumbs {
  color: inherit;
}
/* ------------------------------------------------------------ *\
	Hero Innerpages Pro
\* ------------------------------------------------------------ */
.hero-innerpages--pro .hero__inner {
  max-width: 100%;
}
.hero-innerpages--pro .hero__content .breadcrumbs {
  margin-bottom: 8.7em;
}
.hero-innerpages--pro .hero__content > h3 {
  margin-bottom: 0.3em;
}
.hero-innerpages--pro .hero__content > h5 {
  margin-bottom: 1.5em;
}
.hero-innerpages--pro .hero__actions {
  margin-top: 32px;
}
.hero-innerpages--pro .form-card--light .field-outline {
  border-color: #fff;
}
.hero-innerpages--pro .hero__media {
  background-size: cover;
  background-position: right;
}
/* ------------------------------------------------------------ *\
	Hero Landing Page
\* ------------------------------------------------------------ */
.hero-landing-page {
  text-align: center;
  background-color: #000;
  color: #fff;
  background-size: auto 115%;
  background-position: 46.6% -11%;
  background-repeat: no-repeat;
  padding: 81px 10px 676px;
}
@media (max-width: 1023px) {
  .hero-landing-page {
    padding: 81px 10px 455px;
    background-size: auto 95%;
    background-position: 48% 387%;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-landing-page {
    padding: 51px 0 218px;
    background-size: auto 72%;
    background-position: 48% 125%;
  }
}
.hero-landing-page img {
  margin-bottom: 0.4em;
}
@media (max-width: 1023px) {
  .hero-landing-page img {
    margin-bottom: 0.8em;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-landing-page img {
    margin-bottom: 0.6em;
  }
}
.hero-landing-page h1 {
  margin-bottom: 0.8em;
}
@media (max-width: 1023px) {
  .hero-landing-page h1 {
    line-height: 0.9;
  }
}
.hero-landing-page .btn {
  padding-top: 18px;
  padding-bottom: 18px;
  min-width: 250px;
}
@media (max-width: 1023px) {
  .hero-landing-page .btn {
    margin-top: 0.4em;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero-landing-page .btn {
    margin-top: 0.2em;
    padding: 13px 9px;
    font-size: 12px;
    letter-spacing: 0.1875em;
    min-width: 197px;
  }
}
/* ------------------------------------------------------------ *\
	Hero
\* ------------------------------------------------------------ */
.hero {
  background-size: 128.4% auto;
  background-position: -84.4% 72.6%;
  background-repeat: no-repeat;
  background-color: #000;
  padding: 276px 0 270px;
  color: #fff;
  position: relative;
}
@media (max-width: 1399px) {
  .hero {
    padding: 166px 0 130px;
  }
}
@media (max-width: 1023px) {
  .hero {
    padding: 0;
    background-size: auto 130%;
    background-position: 21.7% 17.7%;
    background-color: #000;
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero {
    padding: 0;
  }
}
@media (max-width: 374px) {
  .hero {
    background-size: auto 99%;
    background-position: 22% 1346%;
  }
}

.hero.image-only {
  padding: 0 !important;
}
// .hero:after {
//   content: "";
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   background-image: -webkit-gradient(
//     linear,
//     left top,
//     right top,
//     color-stop(29%, black),
//     color-stop(50%, rgba(0, 0, 0, 0))
//   );
//   background-image: -o-linear-gradient(left, black 29%, rgba(0, 0, 0, 0) 50%);
//   background-image: linear-gradient(to right, black 29%, rgba(0, 0, 0, 0) 50%);
// }
// @media (max-width: 1023px) {
//   .hero:after {
//     background-image: -webkit-gradient(
//       linear,
//       left top,
//       left bottom,
//       color-stop(46%, black),
//       color-stop(62%, rgba(0, 0, 0, 0)),
//       color-stop(70%, rgba(0, 0, 0, 0)),
//       to(black)
//     );
//     background-image: -o-linear-gradient(
//       top,
//       black 46%,
//       rgba(0, 0, 0, 0) 62%,
//       rgba(0, 0, 0, 0) 70%,
//       black 100%
//     );
//     background-image: linear-gradient(
//       to bottom,
//       black 46%,
//       rgba(0, 0, 0, 0) 62%,
//       rgba(0, 0, 0, 0) 70%,
//       black 100%
//     );
//   }
// }
.hero .hero__content {
  position: relative;
  z-index: 2;
}
.hero .hero__content h1 {
  font-size: 55px;
  font-weight: bold;
  margin-bottom: 25px;
}
.hero .hero__content h3 {
  margin-bottom: 25px;
  font-size: 18px;
  line-height: 23px;
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero .hero__content {
    h1 {
      font-size: 30px;
      margin-bottom: 15px;
      letter-spacing: 0.2px;
      // font-weight: 400;
    }
    h3 {
      margin-bottom: 0.9em;
      font-size: 18px;
    }
  }
}
@media (max-width: 767px),
  screen and (max-width: 812px) and (orientation: landscape) {
  .hero .hero__content h3 br {
    display: none;
  }
}