/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_storefront_eminence/cartridge/client/default/scss/pageDesigner/heroBanner.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://use.typekit.net/tou5pcg.css);
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_storefront_eminence/cartridge/client/default/scss/pageDesigner/heroBanner.scss (1) ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.font-primary {
  font-family: "big-caslon-fb", serif;
}

.font-secondary {
  font-family: "soleil", sans-serif;
}

.font-tertiary {
  font-family: "square-peg", serif;
}

.sr-only {
  position: absolute;
  padding: unset;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: unset;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: unset;
  overflow: visible;
  clip: auto;
}

/* stylelint-disable */
/* stylelint-disable */
.l-grid-wrapper {
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 899.98px) {
  .l-grid-wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.l-grid-row-1-3 {
  width: 33.33%;
}
@media (max-width: 768.98px) {
  .l-grid-row-1-3 {
    width: 100%;
  }
}
.l-grid-row-2-3 {
  width: 66.67%;
}
@media (max-width: 768.98px) {
  .l-grid-row-2-3 {
    width: 100%;
  }
}
.l-grid-spacer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.l-grid-stroke-edge {
  border: 1px solid #BDB0A5;
}
.l-grid-1-1 {
  width: 100%;
  height: 100%;
}
@media (max-width: 768.98px) {
  .l-grid-1-1 {
    width: 100%;
  }
}
.l-grid-2-1 {
  width: 48%;
}
@media (max-width: 768.98px) {
  .l-grid-2-1 {
    width: 100%;
  }
}
.l-grid-3-1 {
  width: 30%;
  height: 100%;
}
@media (max-width: 768.98px) {
  .l-grid-3-1 {
    width: 100%;
  }
}
.l-grid-4-1 {
  width: 24%;
  height: 100%;
}
@media (max-width: 899.98px) {
  .l-grid-4-1 {
    width: 100%;
  }
}
.l-grid-5-1 {
  width: 18%;
  height: 100%;
}
@media (max-width: 768.98px) {
  .l-grid-5-1 {
    width: 100%;
  }
}
.l-grid-6-1 {
  width: 14%;
  height: 100%;
}
@media (max-width: 768.98px) {
  .l-grid-6-1 {
    width: 100%;
  }
}

/* stylelint-disable */
/* stylelint-disable */
.c-hero-banner {
  background-color: #fff;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .c-hero-banner {
    margin-bottom: 0.625rem;
  }
}
.c-hero-banner-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 900px) {
  .c-hero-banner-box {
    -webkit-box-pack: var(--block-alignment);
        -ms-flex-pack: var(--block-alignment);
            justify-content: var(--block-alignment);
  }
}
.c-hero-banner-content {
  position: absolute;
  background-color: #423636;
  border-top-right-radius: 3.125rem;
  padding: 3rem;
  max-width: 23rem;
  width: 90%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 900px) {
  .c-hero-banner-content {
    width: 100%;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .c-hero-banner-content {
    left: 29%;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .c-hero-banner-content {
    left: auto;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .c-hero-banner-content {
    left: auto;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .c-hero-banner-content {
    left: auto;
    top: 43.5%;
  }
}
@media (min-width: 900px) {
  .c-hero-banner-cta {
    max-width: 25rem;
  }
}
.c-hero-banner-cta--single {
  position: relative;
  margin: 0 auto;
  bottom: 5.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 599.98px) {
  .c-hero-banner-cta--single.l-container {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
}
@media (min-width: 600px) {
  .c-hero-banner-cta--single {
    -webkit-box-pack: var(--block-alignment);
        -ms-flex-pack: var(--block-alignment);
            justify-content: var(--block-alignment);
    bottom: 6.25rem;
    padding: unset;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .c-hero-banner-cta--single {
    bottom: 8.4375rem;
  }
}
.c-hero-banner-cta--single .c-hero-banner-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
@media (min-width: 600px) {
  .c-hero-banner-cta--single .c-hero-banner-cta {
    width: auto;
    margin: unset;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
}
.c-hero-banner-cta-icon {
  margin-left: 0.375rem;
}
.c-hero-banner-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
@media (min-width: 900px) {
  .c-hero-banner-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-self: center;
  }
}
.c-hero-banner-html {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: #fff;
  font-family: "soleil", sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.c-hero-banner-progress {
  width: 100%;
  height: 0.5rem;
  background-color: #C2B835;
  display: block;
}
.c-hero-banner-progress-container {
  padding-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media (min-width: 900px) {
  .c-hero-banner-progress-container {
    padding-bottom: 1.875rem;
  }
}
.c-hero-banner-progress-item {
  width: 100%;
  max-width: 100%;
  background-color: #F0F0F0;
  height: 0.5rem;
}
@media (min-width: 900px) {
  .c-hero-banner-progress-item {
    max-width: 22.5rem;
  }
}
.c-hero-banner-state-button, .c-hero-banner-pause-button {
  border: 0.125rem solid #C2B835;
  background-color: #fff;
  border-radius: 1.25rem;
  padding: 0.375rem;
  margin-left: 1rem !important;
  margin-right: unset;
  width: 2rem;
  height: 2rem;
}
.c-hero-banner-state-button:hover, .c-hero-banner-pause-button:hover {
  background-color: #C2B835;
}
@media (min-width: 900px) {
  .c-hero-banner-state-button, .c-hero-banner-pause-button {
    margin-right: 3.75rem !important; /* stylelint-disable-line declaration-no-important */
  }
}
.c-hero-banner-slide-iframe {
  width: 100%;
  height: 100%;
}
.c-hero-banner-slides {
  height: 100%;
}
.c-hero-banner-title {
  color: #fff;
  font-family: "big-caslon-fb", serif;
  font-size: 2.875rem;
  margin-bottom: 1rem;
}

.c-hero-banner-slide {
  position: relative;
}
.c-hero-banner-slide-background-image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  -o-object-position: var(--focal-point-x) var(--focal-point-y);
     object-position: var(--focal-point-x) var(--focal-point-y);
}
.c-hero-banner-slide-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.c-hero-banner-slide-container-inner {
  position: relative;
  height: inherit;
}
@media (max-width: 899.98px) {
  .c-hero-banner-slide-container-inner {
    min-height: 26.875rem;
  }
}
.c-hero-banner-slide-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 24.375rem;
  width: 100%;
}
@media (min-width: 1921px) {
  .c-hero-banner-slide-wrapper {
    height: 43.3125rem;
  }
}
@media (min-width: 1681px) and (max-width: 1920px) {
  .c-hero-banner-slide-wrapper {
    height: 38rem;
  }
}
@media (min-width: 1441px) and (max-width: 1680px) {
  .c-hero-banner-slide-wrapper {
    height: 32.5rem;
  }
}
@media (min-width: 1281px) and (max-width: 1440px) {
  .c-hero-banner-slide-wrapper {
    height: 28.875rem;
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .c-hero-banner-slide-wrapper {
    height: 23.125rem;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .c-hero-banner-slide-wrapper {
    height: 45.875rem;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .c-hero-banner-slide-wrapper {
    height: 27rem;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .c-hero-banner-slide-wrapper {
    height: 28.6875rem;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .c-hero-banner-slide-wrapper {
    height: 23.25rem;
  }
}
.c-hero-banner-slide-wrapper:first-child .c-image-feature-box-container-inner {
  padding-left: 0;
}
.c-hero-banner-slide-wrapper:last-child .c-image-feature-box-container-inner {
  padding-right: 0;
}
.c-hero-banner-slide-video-container {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.c-hero-banner-slide-video-container.c-hero-banner-external {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.c-hero-banner-slide-video-container.c-hero-banner-external .c-hero-banner-slide-iframe-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.7%;
  aspect-ratio: 16/9;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1025px) {
  .c-hero-banner-slide-video-container.c-hero-banner-external .c-hero-banner-slide-iframe-container {
    width: 105.5%;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .c-hero-banner-slide-video-container.c-hero-banner-external .c-hero-banner-slide-iframe-container {
    width: 177.7%;
  }
}
@media (min-width: 220px) and (max-width: 480px) {
  .c-hero-banner-slide-video-container.c-hero-banner-external .c-hero-banner-slide-iframe-container {
    top: 43%;
    width: 262.77%;
  }
}
.c-hero-banner-slide-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-hero-banner-slide-iframe-container {
  pointer-events: none;
}
@media (min-width: 1025px) {
  .c-hero-banner-slide-iframe-container {
    aspect-ratio: 16/9;
  }
}

.slick-progress {
  width: 0%;
}

.slick-slide {
  width: 100%;
  width: 100vw;
}

/*# sourceMappingURL=heroBanner.css.map*/