/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./bin/sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./bin/sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./bin/sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./marriott/cartridges/app_mbb_core/cartridge/client/default/scss/experience/heroBanner.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Caslon 540 LT Std Italic";
  src: url("../../fonts/Caslon540LTStd-Italic.woff2") format("woff2"), url("../../fonts/Caslon540LTStd-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Didot LT Std";
  src: url("../../fonts/DidotLTStd-Roman.woff2") format("woff2"), url("../../fonts/DidotLTStd-Roman.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Acta Display";
  src: url("../../fonts/ActaDisplay-Light.woff2") format("woff2"), url("../../fonts/ActaDisplay-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Roos St Regis Text";
  src: url("../../fonts/RoosStRegisText.woff2") format("woff2"), url("../../fonts/RoosStRegisText.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "W Supreme Web";
  src: url("../../fonts/WSupremeWeb-SemiBold.woff2") format("woff2"), url("../../fonts/WSupremeWeb-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("../../fonts/AvenirNextLTPro-Light.woff2") format("woff2"), url("../../fonts/AvenirNextLTPro-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "FreightDisp Pro";
  src: url("../../fonts/FreigDisProMed.woff2") format("woff2"), url("../../fonts/FreigDisProMed.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Sheraton Display Light";
  src: url("../../fonts/GT-Super-Display-Light.woff2") format("woff2"), url("../../fonts/GT-Super-Display-Light.woff") format("woff");
  font-display: swap;
}
/* stylelint-disable scss/no-global-function-names */
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable scss/at-mixin-argumentless-call-parentheses */
/* stylelint-disable selector-not-notation */
/* stylelint-disable scss/double-slash-comment-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
/* conversion for px to rem */
/**
  *
  * MBB Custom Button Variables
  *
**/
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable scss/at-mixin-argumentless-call-parentheses */
/* stylelint-disable selector-not-notation */
/* stylelint-disable scss/double-slash-comment-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
/* conversion for px to rem */
/* stylelint-disable */
/* stylelint-enable */
.hero-image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--focal-point-x) var(--focal-point-y);
     object-position: var(--focal-point-x) var(--focal-point-y);
}

.mbb-hero .hero-image {
  aspect-ratio: 9/16;
}
@media (min-width: 768px) {
  .mbb-hero .hero-image {
    aspect-ratio: 16/9;
  }
}
.mbb-hero.hero--aspect-size .hero-image {
  aspect-ratio: var(--hero-aspect-ratio-mobile);
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 768px) {
  .mbb-hero.hero--aspect-size .hero-image {
    aspect-ratio: var(--hero-aspect-ratio-desktop);
  }
}
@media (min-width: 768px) {
  .mbb-hero.hero--dynamic-height .hero-image {
    max-height: clamp(400px, 100vh - 150px, 1920px);
  }
}
.mbb-hero_video-outer-wrapper {
  aspect-ratio: var(--hero-aspect-ratio-mobile);
}
@media (min-width: 768px) {
  .mbb-hero_video-outer-wrapper {
    aspect-ratio: var(--hero-aspect-ratio-desktop);
  }
}
.mbb-hero_video-outer-wrapper .mbb-hero_video-wrapper {
  height: 100%;
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .mbb-hero_video-outer-wrapper .mbb-hero_video-wrapper {
    width: 100%;
    height: auto;
  }
}
.mbb-hero_video-outer-wrapper .mbb-hero_video-wrapper iframe,
.mbb-hero_video-outer-wrapper .mbb-hero_video-wrapper .video-js {
  margin: 0;
  border: 0;
  aspect-ratio: 16/9;
  width: 100%;
}
.mbb-hero_video-outer-wrapper .mbb-hero_video-wrapper .video-js {
  inset: 0;
}
.mbb-hero .hero-content {
  padding-top: 2rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
}
@media (min-width: 768px) and (max-width: 1439.98px) {
  .mbb-hero .hero-content {
    padding-top: 3rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
  }
}
@media (min-width: 1440px) {
  .mbb-hero .hero-content {
    padding-top: 4.5rem;
    padding-right: 1rem;
    padding-bottom: 4.5rem;
    padding-left: 1rem;
  }
}
.mbb-hero .hero-image-heading {
  font-family: "Aldine 721 LT BT", arial, sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.5rem;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) and (max-width: 1439.98px) {
  .mbb-hero .hero-image-heading {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }
}
@media (min-width: 1440px) {
  .mbb-hero .hero-image-heading {
    font-size: 2.625rem;
    line-height: 3.125rem;
  }
}
.mbb-hero .hero-image-descrption {
  font-size: 0.875rem;
  line-height: 1.375rem;
  letter-spacing: 0.01em;
}
.mbb-hero .gradient {
  top: 0;
}
.mbb-hero .gradient.gradient-color-Dark {
  --gradient-color-start: rgba(0, 0, 0, 0%);
  --gradient-color-end: rgba(0, 0, 0, 54%);
}
.mbb-hero .gradient.gradient-color-Light {
  --gradient-color-start: rgba(255, 255, 255, 0%);
  --gradient-color-end: rgba(255, 255, 255, 54%);
}
.mbb-hero .gradient-left, .mbb-hero .gradient-bottom, .mbb-hero .gradient-right {
  background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
}
@media (max-width: 767.98px) {
  .mbb-hero .gradient-top-mobile {
    background: linear-gradient(0, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .mbb-hero .gradient-center-mobile {
    background: linear-gradient(0, var(--gradient-color-start) 0, var(--gradient-color-end) 0);
  }
  .mbb-hero .gradient-bottom-mobile {
    background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
  }
  .mbb-hero .gradient-left-mobile {
    background: linear-gradient(273.75deg, var(--gradient-color-start) 19.95%, var(--gradient-color-end) 79.79%);
  }
}
@media (min-width: 768px) {
  .mbb-hero .gradient-left {
    background: linear-gradient(273.75deg, var(--gradient-color-start) 19.95%, var(--gradient-color-end) 79.79%);
  }
  .mbb-hero .gradient-bottom {
    background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
  }
  .mbb-hero .gradient-right {
    background: linear-gradient(93.75deg, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .mbb-hero .gradient-top {
    background: linear-gradient(0, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .mbb-hero .gradient-center {
    background: linear-gradient(0, var(--gradient-color-start) 0, var(--gradient-color-end) 0);
  }
}
@media (max-width: 767.98px) {
  .mbb-hero .mobile_bottom-center {
    text-align: center;
    bottom: 0;
  }
  .mbb-hero .mobile_center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    bottom: auto;
  }
  .mbb-hero .mobile_center-top {
    top: 0;
    text-align: center;
  }
  .mbb-hero .mobile_bottom-left {
    text-align: left;
    bottom: 0;
  }
  .mbb-hero .mobile_top-left {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .mbb-hero .mobile_center-left {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
}
@media (min-width: 768px) {
  .mbb-hero .top-left {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .mbb-hero .top-right {
    top: 0;
    right: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .mbb-hero .center-left, .mbb-hero .center-left-padded {
    top: 50%;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
  .mbb-hero .center-left {
    left: 0;
  }
  .mbb-hero .center-left-padded {
    left: 7.375rem;
  }
  .mbb-hero .center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    bottom: auto;
  }
  .mbb-hero .center-right {
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
  .mbb-hero .center-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    bottom: auto;
  }
}
@media (min-width: 768px) {
  .mbb-hero .bottom-left, .mbb-hero .bottom-left-padded {
    bottom: 0;
    transform: translate(0, 0);
    text-align: left;
    top: unset;
  }
  .mbb-hero .bottom-left {
    left: 0;
  }
  .mbb-hero .bottom-left-padded {
    left: 7.375rem;
  }
  .mbb-hero .bottom-center {
    text-align: center;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    top: unset;
  }
  .mbb-hero .bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(0, 0);
    text-align: left;
    top: unset;
    left: unset;
  }
}
.mbb-hero__cta-button-list {
  margin-top: 1.5rem;
  display: flex;
  flex-flow: row wrap;
  gap: 30px;
  justify-content: center;
}
@media (min-width: 768px) {
  .mbb-hero__cta-button-list {
    flex-direction: row;
  }
}
.mbb-hero__cta-button-list .btn-secondary {
  border-color: transparent;
}
.hero-content--jw-marriott .mbb-hero__cta-button-list {
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .hero-content--jw-marriott .mbb-hero__cta-button-list {
    margin-top: 1.5rem;
  }
}
.mbb-hero .color-primary {
  color: #F9F6F4;
}
.mbb-hero .color-secondary {
  color: #2A2A2A;
}
.mbb-hero .font-family--edition {
  font-family: "Didot LT Std", arial, sans-serif;
}
.mbb-hero .font-family--jw-marriott {
  font-family: "Avenir Next LT Pro", arial, sans-serif;
}
.mbb-hero .font-family--the-luxury-collection {
  font-family: "Acta Display", arial, sans-serif;
}
.mbb-hero .font-family--st-regis {
  font-family: "Roos St Regis Text", arial, sans-serif;
}
.mbb-hero .font-family--the-ritz-carlton {
  font-family: "Caslon 540 LT Std", arial, sans-serif;
}
.mbb-hero .font-family--w-hotels {
  font-family: "W Supreme Web", arial, sans-serif;
}
.mbb-hero .font-family--sheraton {
  font-family: "Sheraton Display Light", arial, sans-serif;
}
.mbb-hero .foreground-content-image {
  max-width: var(--image-max-width);
  height: auto;
}
@media (hover: hover) {
  .mbb-hero.clickable-mbb-hero { /* stylelint-disable-line scss/media-feature-value-dollar-variable */
    cursor: pointer;
  }
}

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