/* #region "../src/elements/hero/hero.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.hero-section {
  --hero-margin: 0px;
  --hero-height: min(clamp(25rem, 22.8365384615rem + 9.6153846154vw, 31.25rem), 100vh - var(--admin-bar-height) - var(--header-max-height) - 2rem);
  --hero-element-aspect-ratio: calc(var(--100vw) / var(--hero-height));
  position: relative;
  display: grid;
  padding: var(--hero-margin, 0px);
  min-height: var(--hero-height, 0);
}
.hero-section.hero-size-large {
  --hero-height: min(clamp(33.125rem, 27.7163461538rem + 24.0384615385vw, 48.75rem), var(--100svh) - var(--admin-bar-height) - var(--header-max-height));
}
.hero-section .hero-media {
  position: relative;
  display: grid;
  clip-path: margin-box;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "content";
}
.hero-section .hero-media > * {
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.hero-section .hero-logo-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 90vw;
  height: auto;
  margin-left: clamp(-7.5rem, -14.1176470588rem + 29.4117647059vw, 0rem);
}
.hero-section .hero-media-overlay {
  z-index: 1;
  align-self: stretch;
}
.hero-section.hero-align-start {
  --content-align: flex-start;
}
.hero-section.hero-align-start .hero-media-overlay {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 250px);
}
.hero-section.hero-align-center {
  --content-align: center;
}
.hero-section.hero-align-end {
  --content-align: flex-end;
}
.hero-section.hero-align-end .hero-media-overlay {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 250px);
}
.hero-section.hero-justify-start {
  --content-justify: flex-start;
}
.hero-section.hero-justify-center {
  --content-justify: center;
}
.hero-section.hero-justify-end {
  --content-justify: flex-end;
}
.hero-section .hero-content-wrapper {
  z-index: 1;
  grid-area: content;
  margin-left: auto;
  margin-right: auto;
  width: var(--container-width, auto);
  padding-inline: var(--container-padding, 0);
  display: flex;
  align-items: var(--content-align);
  justify-content: var(--content-justify);
  --hero-content-padding-top: clamp(1rem, 0.2644230769rem + 3.2692307692vw, 3.125rem);
  --hero-content-padding-bottom: clamp(1rem, 0.2644230769rem + 3.2692307692vw, 3.125rem);
  padding-top: var(--hero-content-padding-top, 0);
  padding-bottom: var(--hero-content-padding-bottom, 0);
}
.hero-section .hero-content {
  max-width: 650px;
}
.hero-section .hero-content > :is(h1),
.hero-section .hero-content > :is(.h1) {
  padding: clamp(0.75rem, 0.5769230769rem + 0.7692307692vw, 1.25rem) clamp(1.5rem, 1.3269230769rem + 0.7692307692vw, 2rem);
  color: var(--text-color);
}
.hero-section .hero-content > :is(h1) .headline-bg-wrapper,
.hero-section .hero-content > :is(.h1) .headline-bg-wrapper {
  position: relative;
}
.hero-section .hero-content > :is(h1) .headline-bg-wrapper::before,
.hero-section .hero-content > :is(.h1) .headline-bg-wrapper::before {
  content: "";
  position: absolute;
  inset: calc(-1 * clamp(0.75rem, 0.5769230769rem + 0.7692307692vw, 1.25rem)) calc(-1 * clamp(1.5rem, 1.3269230769rem + 0.7692307692vw, 2rem));
  background-color: var(--white);
  border-radius: var(--base-radius);
  z-index: -1;
}
.hero-section .hero-content > *:first-child {
  margin-top: 0;
}
.hero-section .hero-content > *:last-child {
  margin-bottom: 0;
}
.hero-section .hero-content .box-card {
  max-width: 500px;
}
.hero-section .hero-content .box-card:is(.box-size-wide *) {
  max-width: 700px;
}
.hero-section .hero-content .box-card:is(.badge:first-child + *) {
  margin-top: 0;
}
.hero-section .hero-content .box-card:has(+ .badge:last-child) {
  margin-bottom: 0;
}
.hero-section .hero-scroll-indicator-wrapper {
  display: none;
}

.hero-section.hero-is-image {
  --background-image: var(--hero-image-full);
}
@media (max-width: 1899px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
}
@media (max-width: 1899px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-3xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1599px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
}
@media (max-width: 1599px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-2xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1399px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
}
@media (max-width: 1399px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1199px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
}
@media (max-width: 1199px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-lg-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 991px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
}
@media (max-width: 991px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-md-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 767px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
}
@media (max-width: 767px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-sm-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 539px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
}
@media (max-width: 539px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(
      --hero-image-until-s-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1899px) and (max-height: 1068px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
}
@media (max-width: 1899px) and (max-height: 1068px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-3xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1599px) and (max-height: 899px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
}
@media (max-width: 1599px) and (max-height: 899px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-2xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1399px) and (max-height: 786px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
}
@media (max-width: 1399px) and (max-height: 786px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1199px) and (max-height: 674px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
}
@media (max-width: 1199px) and (max-height: 674px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-lg-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 991px) and (max-height: 557px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
}
@media (max-width: 991px) and (max-height: 557px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-md-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 767px) and (max-height: 431px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
}
@media (max-width: 767px) and (max-height: 431px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-sm-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 539px) and (max-height: 303px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
}
@media (max-width: 539px) and (max-height: 303px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-s-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: -1px) and (max-height: -1px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-xs, var(--hero-image-full));
  }
}
@media (max-width: -1px) and (max-height: -1px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(
      --hero-image-until-xs-2x,
      var(--hero-image-full)
    );
  }
}
.hero-section.hero-is-image .hero-media {
  background-image: var(--background-image);
  background-size: cover;
  background-position: var(--hero-image-position);
}

.hero-section.hero-is-video {
  --background-image: var(--hero-image-full);
}
@media (max-width: 1899px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-3xl);
  }
}
@media (max-width: 1899px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-3xl-2x);
  }
}
@media (max-width: 1599px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-2xl);
  }
}
@media (max-width: 1599px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-2xl-2x);
  }
}
@media (max-width: 1399px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-xl);
  }
}
@media (max-width: 1399px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-xl-2x);
  }
}
@media (max-width: 1199px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-lg);
  }
}
@media (max-width: 1199px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-lg-2x);
  }
}
@media (max-width: 991px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-md);
  }
}
@media (max-width: 991px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-md-2x);
  }
}
@media (max-width: 767px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-sm);
  }
}
@media (max-width: 767px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-sm-2x);
  }
}
@media (max-width: 539px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-s);
  }
}
@media (max-width: 539px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-s-2x);
  }
}
.hero-section.hero-is-video .hero-video {
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  object-fit: cover;
}
/* #endregion "../src/elements/hero/hero.scss" */

head{--webpack--css-wpce--hero:&\.\.\/src\/elements\/hero\/hero\.scss;}
/*# sourceMappingURL=css-wpce--hero.css.map*/