.Toast {
  --pos: 7.1429rem;
  --width: 22.8571rem;
  --direction: slideleft;
  display: flex;
  flex-flow: column wrap;
  background: #fff;
  position: fixed;
  bottom: 0;
  right: var(--pos);
  width: var(--width);
  padding: 1.7857rem 3.5714rem 0.7143rem 3.5714rem;
  line-height: 1.7;
  box-shadow: 0.2143rem -0.2143rem 0.5714rem rgba(0, 0, 0, 0.1);
  animation: var(--direction) .25s, fade .5s;
  z-index: 50;
}

.TopCenterToast {
  top: 1vh!important;
  right: unset!important;
  bottom: unset!important;
  border: 1px var(--sfly-border-style-solid) lightgray;
  padding-bottom: 2vh;
}


.Modal .Toast {
  position: unset;
  border-radius: 0.4286rem;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  min-width: 35vw;
  min-height: 50vh;
  box-sizing: border-box;
  border: 0.0714rem var(--sfly-border-style-solid) var(--light-grey-2);
  padding-top: 8vh;
}

.Modal .Toast h3 {
  --header: 1.5;
  font-size: calc(var(--header) * 1em);
  margin: 0 0 1vh;
}

.Modal .Toast h3+span {
  font-size: 1rem;
  color: var(--text-color-gray);
  padding-bottom: 6.4286rem;
}

.Modal .Toast .ToastLink {
  color: var(--button-color-text-primary);
  background: var(--button-bg);
  text-align: center;
  min-width: 10rem;
  line-height: 1.5;
  padding: var(--button-space-padding);
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  box-sizing: border-box;
  margin: 0 1.0714rem;
}

.Toast .LinkWrap {
  padding-top: 0.7143rem;
  display: flex;
  margin: 0.7143rem -1.7857rem 0 0;
  align-items: center;
  justify-content: flex-end;
  border-top: 0.0714rem var(--sfly-border-style-solid) var(--light-gray);
  border-radius: 0 0 0.4286rem 0.4286rem;
}

.Modal .Toast .LinkWrap {
  background: var(--light-grey-2);
  width: 100%;
  height: 4.8571rem;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow: 0 0.1429rem 0.4286rem 0 rgba(0, 0, 0, 0.27);
}

.Toast h3 {
  margin-top: 0;
}

.Toast>img {
  margin-top: 2vh;
  max-width: 100%;
  width: 20.3571rem;
  height: auto;
  padding-bottom: 3vh;
}

.Toast .Icon.info {
  width: 1.4286rem;
  height: 1.4286rem;
  position: absolute;
  left: 1.7857rem;
  top: 1.7857rem;
}

.ToastLink {
  color: var(--brand-color-border-primary);
  text-align: right;
  text-decoration: none;
}


.ToastLink:hover {
  text-decoration: none;
  color: var(--brand-color-border-primary);
}

.Toast button {
  position: absolute;
  right: 1.1429rem;
  top: 1.1429rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

@media (max-width: 767px) {

  .TopCenterToast {
      --pos: unset!important;
      --width: 64%!important;
      transform: unset!important;
  }

  .Toast {
    --pos: 50%;
    --width: 70%;
    --direction: slidetop;
    transform: translateX(var(--pos));
  }

  .Modal .Toast {
    --pos: auto;
    --width: 20rem;
    min-width: auto;
    border-radius: var(--sfly-border-radius-none);
  }

  @media (max-width: 767px) {

    .TopCenterToast {
      --pos: unset!important;
      --width: 64%!important;
      transform: unset!important;
    }
  
    .Toast {
      --pos: 50%;
      --width: 70%;
      --direction: slidetop;
      transform: translateX(var(--pos));
    }

    .Modal .Toast {
      --pos: auto;
      --width: 20rem;
      min-height: 25.4286rem;
      min-width: auto;
      padding: 2vh;
    }

    .Modal .Toast .LinkWrap {
      background: transparent;
      box-shadow: none;
      border: none;
    }

    .Modal .Toast h3,
    .Modal .Toast h3+span {
      text-align: left;
    }

    .Modal .Toast h3 {
      font-size: 1.7em;
      line-height: 1.3;
      margin-bottom: 0.8571rem;
    }

    .Modal .Toast h3+span {
      font-size: 1.3em;
    }

    .Modal .Toast .ToastLink {
      background: transparent;
      color: var(--brand-color-border-primary);
    }
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slideleft {
  from {
    right: 0;
  }

  to {
    right: var(--pos);
  }
}

@keyframes slidetop {
  from {
    margin-bottom: -22.8571rem;
  }

  to {
    margin-bottom: 0;
  }
}

.text_box_wrapper{
  width: 20rem;
  height: 2.7143rem;
  border: var(--form-border-thickness) var(--form-border-style) var(--light-grey-2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 0.4286rem
}

.text_box_wrapper:hover {
  border: var(--form-border-thickness) var(--form-border-style) var(--textbox-border-hover-color);
  transition:0.4s;
}

.text_box {
  text-align: left;
  background-color: white;
  color: var(--text-color);
  font-size: var(--form-font-size);
  border: none;
  outline: var(--brand-state-focus-outline);
  align-self: center;
  font-weight: var(--form-font-weight);
}

.text_box_iphone {
  font-size: 1.1429rem;
}

.text_box::placeholder {
  color: var(--text-color-fog-medium);
}

.text_box_icon {
  width: 80%;
  margin-left: 6px;
}

.text_box_simple{
  width: 90%;
  margin: 0rem 0.4286rem;
}

.svg_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5714rem;
  width: 2.5714rem;
  padding: 0.4286rem;
}

.svg_icon svg {
  width: 2.5714rem;
  padding: 0.4286rem;
}

.svg_icon_wrapper{
  height: 2.7143rem;
  width: 2.7143rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center ;
}

.buttonAppearanceNormal {
  -webkit-appearance: none;
}
:root {
    --template-area:'Promo-left-1 empty Promo-right-1'
    'Promo-left-2 empty Promo-right-2'
    'Promo-left-3 empty Promo-right-3';
}

.PromoBanner {
    display: flex;
    flex: 0 1 100%;
    padding: 0.8571rem 1.7857rem;
    font-size: 0.7857rem;
    justify-content: center;
    background: #fff;
    margin: 0 0 1.4286rem;
}

.PromoBanner.BannerFullWidthEdgetoEdge {
    position: relative;
}

.PromoBanner span {
    color: var(--brand-color-border-primary);
    text-transform: var(--sfly-font-transform-lettercase);
    font-weight: var(--font-weight-semibold);
    font-size: 1.1429rem;
    margin: 0 0.3571rem 0 0;
}

.PromoBanner strong {
    font-size: 1.1429rem;
    font-weight: var(--font-weight-semibold);
}

.PromoBanner .AppLink {
    color: var(--text-color);
    text-decoration: none;
}

.PromoBanner time {
    margin: 0 0.2143rem 0 0;
}

.PromoBanner .Promo {
    text-align: center;
}

.PromoBanner.Mobile {
    display: none;
}

.PromoBanner .SeePromoDetails {
    text-decoration: underline;
    white-space: nowrap;
}

.PromoBanner .SeePromoDetails.TextDecoration {
    text-decoration: none;
}


.PromoBanner.EyebrowPromoLayout {
    font-weight: var(--font-weight-semibold);
}

.Sticky .PromoBanner.EyebrowPromoLayout { 
    padding: 0.8571rem 0.7143rem;
}

.PromoBanner.NewExperience {
    height: 3.1429rem;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--promo-bg-color);
}

.PromoBanner.NewExperience p{
    white-space: initial;
    margin: 0;
}

.PromoBanner.NewExperience em.highlighted-text {
    font-weight: var(--font-weight-bold);
    font-style: normal;
}

.PromoBanner.NewExperience span {
    margin: 0;
    text-transform: none;
    font-weight: var(--brand-fontweight-callout);
}


.PromoBanner.NewExperience .PromoCarousel a.AppLink,
.PromoBanner.NewExperience .PromoCarousel span {
    font-size: 1rem;
    font-weight: var(--brand-fontweight-interactive);
    color: var(--promo-text-color);
}

.PromoBanner.NewExperience .PromoCarousel a.AppLink span,
.PromoBanner.NewExperience .PromoCarousel a.AppLink em {
    color: var(--promo-text-color)
}

.PromoBanner.NewExperience .PromoCarousel .PromoCarouselSlider {
    max-width: 38.5719rem;
}

@media screen and (max-width: 768px) {
    .PromoBanner {
        background: var(--fog-light);
    }

    .PromoBanner span,
    .PromoBanner strong {
        font-size: 0.8571rem;
    }  

    .PromoBanner.NewExperience,
    .PromoBanner.NewExperience .PromoCarouselSlide ,
    .PromoBanner.NewExperience .PromoCarousel .PromoCarouselSlider .promoBannerStyle 
    {
        height: 4rem;
    }
}

@media screen and (max-width: 991px) and (min-width: 481px){
    .PromoBanner.NewExperience .PromoCarousel .PromoCarouselSlider {
        min-width: 21.6429rem;
    }
}

@media screen and (max-width: 991px) and (min-width: 769px){
    .PromoBanner.NewExperience .PromoCarousel .PromoCarouselSlider {
       margin:0 0.714rem 0;   
     }
}

@media screen and (min-width: 481px){
    .PromoBanner.NewExperience .PromoCarousel .PromoCarouselNav {
        padding: 0 0 0 0.714rem ;
    }
    .PromoBanner.NewExperience .PromoCarousel .PromoCarouselNav.Right{
        padding: 0 0.714rem 0 0;

    }
}

@media screen and (max-width: 480px){
    .PromoBanner.NewExperience .PromoCarousel a.AppLink,
    .PromoBanner.NewExperience .PromoCarousel span {
        font-size: 0.85712rem;
    }
    .PromoBanner.NewExperience .PromoCarousel .PromoCarouselSlider {
        max-width: 21.6429rem;
        padding: 0;
    }
     
    .PromoCarouselNav.Left{
        margin-left: 0.714rem;
       }
      
  
    .PromoCarouselNav.Right{
        margin-right: 0.714rem;
      }
      

}


@media screen and (min-width: 1601px) {
    .PromoBanner.BannerFullWidthEdgetoEdge {
        width: var(--screen-WidthPromoBanner);
        left: var(--promoBannerLeftAlignment);
    } 
}
.PromoCarousel {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .PromoCarousel .svg-btn-icon.uh-btn {
    padding-left: 0;
   
  }
  
  .PromoCarouselSlider {
    flex-grow: 1;
  }
  
  .PromoCarouselNav {
    display: flex;
    width: 1.5714rem;
    flex-direction: column;
    justify-content: center; 
    text-align: center;
  }

  .PromoCarouselSlide {
    display: flex;
    height: 3.1429rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    line-height: normal;
  }

  .PromoCarousel .PromoCarouselNav span.svg-icon svg {
    height: 1.2857rem;
    width: 0.7143rem;
    fill: var(--promo-arrow-color);
  }
  .PromoCarousel .PromoCarouselNav span.svg-icon svg.arrow_mobile {
    display: none;
   
  }

  .Right span.svg-icon svg {
    transform: rotate(180deg);
   }


   @media  screen and (max-width: 767px) {
    .PromoCarousel .PromoCarouselNav span.svg-icon svg {
      height: auto;
      width: auto;
    }

    .PromoCarousel .PromoCarouselNav span.svg-icon svg.arrow_mobile {
      display: block;
      height:1.142rem;
      width:1.142rem;
    }
    
    .PromoCarousel .PromoCarouselNav span.svg-icon svg.arrow_desktop {
      display: none;
      
    }
   }

  @keyframes sliderFadeInOut {
    0% {
      opacity: 0;
    }
    4% {
      opacity: .3;
    }
    7% {
      opacity: .8;
    }
    10%,90% {
      opacity: 1;
    }
    93% {
      opacity: 0.8;
    }
    96% {
      opacity: 0.3;
    }
    100% {
      opacity: 0;
    }
  }

  .PromoCarouselSlider .promoBannerStyle .animationCSS {
    flex-basis: 0;
    flex-grow: 1;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    animation: sliderFadeInOut 3.5s linear infinite;
    opacity: 1;
    color:inherit;
  }
  
  .PromoCarouselSlider .promoBannerStyle .visibilityHidden {
    visibility: hidden;
  }
  
  .PromoCarouselSlider .promoBannerStyle .visibilityVisible {
    visibility: visible;
  }
  
  .PromoCarouselSlider .promoBannerStyle .animationPlayState {
    animation: none;
    animation-play-state: paused;
  }

  .PromoBanner .PromoCarousel .PromoCarouselSlider .promoBannerStyle {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 3.1429rem;
    transform: translateX(0%)
  }

  
.product-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    font-size: 1.3329rem;
    line-height: 2rem;
    color: var(--text-color-fog);
}

.product-pricing .title {
    color: var(--text-color-fog);
}

.product-pricing .title,
.product-pricing .paragraph {
    margin: 0;
}

.product-pricing .paragraph {
    font-size: 1rem;
}


ol.breadcrumb {
    display: flex;
    align-items: center;
    margin: 0 0 1.0714rem;
    padding: 0 0.7143rem;
    list-style: none;
}

ol.breadcrumb li {
    display: inline;
    font-weight: var(--font-weight-regular);
    font-size: 0.8571rem;
    line-height: 1rem;
    color: var(--text-color);
}

ol.breadcrumb li+li:before {
    content: ">";
    padding: 0 0.2143rem;
    color: var(--text-color);
}

ol.breadcrumb li a {
    text-decoration: none;
}

ol.breadcrumb li a:hover {
    text-decoration: underline;
}

ol.breadcrumb.mobile-view li {
    display: none;
}

ol.breadcrumb.mobile-view li:nth-last-of-type(2){
    display: block;
}

ol.breadcrumb.mobile-view li+li:before,
ol.breadcrumb.mobile-view li::before {
    content: "<";
}

ol.breadcrumb.mobile-view li::before {
    padding: 0 0.2143rem;
}

@media (max-width: 480px) {
    ol.breadcrumb li {
        display: none;
    }

    ol.breadcrumb li:nth-last-of-type(2){
        display: block;
    }

    ol.breadcrumb li+li:before,
    ol.breadcrumb li::before {
        content: "<";
    }

    ol.breadcrumb li::before {
        padding: 0 0.2143rem;
    }
}
.dynamic-breadcrumb-container {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.7143rem;
}
.dynamic-breadcrumb-container .pagetitle-text { 
    font-weight: var(--font-weight-regular);
    color: var(--text-color-title);
    font-size: 1.2857rem;
}
.dynamic-breadcrumb-container .pagetitle-savedprojects { 
    font-weight: var(--font-weight-regular);
    font-size: 0.9286rem;
}
.dynamic-breadcrumb-container .pagetitle-savedprojects .AppLink {
    text-decoration: none;
    color: var(--my-saved-project-text-color);
} 
.ResponsiveImage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ResponsiveImage img {
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
    height: auto;
    width: 100%;
}

.ResponsiveImage.MWeb {
    display: none;
}

.ResponsiveImage.Desktop {
    display: inherit;
}
@media screen and (max-width: 768px){

    .ResponsiveImage.MWeb {
        display: inherit;
    }
    
    .ResponsiveImage.Desktop {
        display: none;
    }
}
.CountdownTimer {
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    --color: var(--brand-color-text-primary);
    --height: 0;
    --width: 0;
    --numbers: 1.714rem;
}

.CountdownTimer .cd-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.CountdownTimer .cd-box .timer {
    display: flex;
    text-decoration: none;
    font-size: var(--numbers);
    color: var(--color);
    animation: fadeIn 0.3s ease-in-out 0s 1;
    line-height: 2.143rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--br-cms-font-sohne);
}

.CountdownTimer .cd-box .timer-text {
    font-size: 1rem;
    color: var(--color);
    animation: fadeIn 0.3s ease-in-out 0s 1;
    font-weight: var(--font-weight-regular);
}

.CountdownTimer .cd-box .timer-text.removeTimeUnits {
    visibility: hidden;
    height: 0;
}

.CountdownTimer .cd-box:not(:first-of-type) .timer:before {
    content: " : ";
    padding: 0 0.571rem;
}

.CountdownTimer .cd-box:not(:first-of-type) .timer-text {
    padding-left: 1.5rem;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
:root {
    --background-color: #fff;
    --extra-margin-fortextonly-banner: 0;
    --extra-margin-forMwebtextonly-banner: 0;
}

.br-cms-layout .ResponsiveBanner * {
    box-sizing: border-box;
}

.br-cms-layout .ResponsiveBanner {
    position: relative;
    overflow: hidden;
}

.br-cms-layout .ResponsiveBanner h3,
.br-cms-layout .ResponsiveBanner p {
    line-height: 1.5;
    color: var(--text-color);
    margin: 0;
}

.br-cms-layout .ResponsiveBanner h3 {
    font-size: clamp(1rem, 0.457rem + 0.767vw, 1.333rem);
    font-weight: var(--brand-fontweight-callout);
    order: 1;
}

.br-cms-layout .ResponsiveBanner p {
    font-size: 1.3329rem;
    font-weight: var(--font-weight-regular);
    order: 2;
}
.br-cms-layout .ResponsiveBanner .RichTextSubtitle {
    order: 2;
}

.br-cms-layout .ResponsiveBanner .MainContent.VerticalStack p,
.br-cms-layout .ResponsiveBanner .MainContent.LineDivider p {
    font-size: 1rem;
}

.br-cms-layout .ResponsiveBanner .BannerContent .BannerSeparator+p {
    margin-left: 0;
}

.br-cms-layout .ResponsiveBanner .BannerContent.roundedCorners,
.br-cms-layout .ResponsiveBanner .BannerContent.roundedCorners img {
    border-radius: var(--sfly-border-radius-extra-large);
}

.br-cms-layout .ResponsiveBanner .AppLink:focus {
    outline-offset: -1px;
    outline: -webkit-focus-ring-color auto 1px;
    outline: -moz-mac-focusring auto 1px;
}

.br-cms-layout .ResponsiveBanner .AppLink:focus .BackgroundPositioning picture {
    max-height: 96%;
    align-items: normal;
    margin: 0 2px;
}

.br-cms-layout .ResponsiveBanner a {
    text-decoration: none;
    color: var(--text-color);
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent,
.br-cms-layout .ResponsiveBanner>.BannerContent,
.br-cms-layout .ResponsiveBanner>a>.BannerContent .BannerContentWrapper,
.br-cms-layout .ResponsiveBanner>.BannerContent .BannerContentWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent,
.br-cms-layout .ResponsiveBanner>.BannerContent {
    width: 100%;
    user-select: none;
    background-color: var(--background-color);
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent .BannerContentWrapper,
.br-cms-layout .ResponsiveBanner>.BannerContent .BannerContentWrapper {
    flex-direction: column;
    z-index: 5;
    padding: 1.7143rem 0 0.8571rem;
    margin: calc(var(--extra-margin-fortextonly-banner) * 1px) 0px;
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent .MainContent,
.br-cms-layout .ResponsiveBanner>.BannerContent .MainContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent .TextLink,
.br-cms-layout .ResponsiveBanner>.BannerContent .TextLink {
    font-weight: var(--font-weight-regular);
    font-size: 1rem;
    line-height: 1.5;
    z-index: 5;
    text-decoration: underline;
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent .TextLink:hover,
.br-cms-layout .ResponsiveBanner>.BannerContent .TextLink:hover {
    color: var(--text-color);
}

.br-cms-layout .ResponsiveBanner .BannerContent .BannerSeparator {
    width: 1px;
    height: 64px;
    background-color: var(--text-color);
    order: 2;
}


.br-cms-layout .ResponsiveBanner .BannerContent h3,
.br-cms-layout .ResponsiveBanner .BannerContent p
 {
    font-family: var(--font-family-value-desktop);
    font-weight: var(--font-weight-value-desktop);
}

.br-cms-layout .ResponsiveBanner .BannerContent .BannerCTA {
    order: 3;
}

.br-cms-layout .ResponsiveBanner .BannerContent .BannerCTA:not(.AppLink) {
    font-size: 1rem;
    color: var(--text-color);
}

.br-cms-layout .ResponsiveBanner picture {
    display: flex;
    max-height: 100%;
    margin: 0 auto;
    width: 100%;
}

.br-cms-layout .ResponsiveBanner .BackgroundPositioning picture {
    z-index: 1;
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent>picture,
.br-cms-layout .ResponsiveBanner>.BannerContent>picture {
    position: static;
}

.br-cms-layout .ResponsiveBanner>a>.BannerContent:not(.TextOnly) .BannerContentWrapper,
.br-cms-layout .ResponsiveBanner>.BannerContent:not(.TextOnly) .BannerContentWrapper {
    position: absolute;
}

.br-cms-layout .ResponsiveBanner img {
    width: 100%;
    object-fit: cover;
}

.br-cms-layout .ResponsiveBanner .CountdownTimer {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    position: relative;
    --x-offset: 0;
    --y-offset: 0;
    order: 0;
    width: 8.5714rem;
}

.br-cms-layout .ResponsiveBanner .MainContent.VerticalStack .CountdownTimer {
    width: 100%;
}


.br-cms-layout .ResponsiveBanner .MainContent.VerticalStack {
    flex-direction: column;
    padding: 0 0.8571rem 0;
}

.br-cms-layout .ResponsiveBanner .MainContent.LeadIn h3 {
    order: 0;
}

.br-cms-layout .ResponsiveBanner .MainContent.LeadIn .CountdownTimer {
    order: 1;
}

.br-cms-layout .ResponsiveBanner .BannerContent .MainContent>*,
.br-cms-layout .ResponsiveBanner .BannerContent .TextLink {
    margin-bottom: 0.8571rem;
}

@media screen and (min-width: 992px) {
    .br-cms-layout .ResponsiveBanner .BannerContent .MainContent:not(.VerticalStack)>* {
        margin-right: 1.4286rem;
        margin-left: 1.4286rem;
    }
}

@media screen and (min-width: 769px) {

    .br-cms-layout .ResponsiveBanner h3,
    .br-cms-layout .ResponsiveBanner p {
        position: relative;
    }

    .br-cms-layout .ResponsiveBanner .ShowOnMobile {
        display: none !important;
    }

    .br-cms-layout .ResponsiveBanner .BannerContent .MainContent.LineDivider>* {
        margin-right: 1.4286rem;
        margin-left: 1.4286rem;
    }
}

@media screen and (max-width: 991px) {

    .br-cms-layout .ResponsiveBanner>a>.BannerContent .MainContent:not(.LineDivider),
    .br-cms-layout .ResponsiveBanner>.BannerContent .MainContent:not(.LineDivider) {
        flex-direction: column;
        padding: 0 0.8571rem 0;
    }

    .br-cms-layout .ResponsiveBanner p {
        font-size: 1rem;
    }

    .br-cms-layout .ResponsiveBanner .MainContent:not(.LineDivider) .CountdownTimer {
        width: 100%;
    }

    .br-cms-layout .ResponsiveBanner h3 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 768px) {

    .br-cms-layout .ResponsiveBanner>a>.BannerContent .MainContent,
    .br-cms-layout .ResponsiveBanner>.BannerContent .MainContent {
        flex-direction: column;
        padding: 0 !important;
    }

    .br-cms-layout .ResponsiveBanner .MainContent .CountdownTimer {
        width: 100%;
    }

    .br-cms-layout .ResponsiveBanner .ShowOnDesktop,
    .br-cms-layout .ResponsiveBanner .BannerContent .BannerSeparator {
        display: none !important;
    }

    .br-cms-layout .ResponsiveBanner>a>.BannerContent .BannerContentWrapper,
    .br-cms-layout .ResponsiveBanner>.BannerContent .BannerContentWrapper {
        padding: 1.7143rem 0.8571rem 0.8571rem;
        margin: calc(var(--extra-margin-forMwebtextonly-banner) * 1px) 0px;
    }

    .br-cms-layout .ResponsiveBanner.ResponsiveBannerMinHeightCLSTest.allFlagsOff {
        display: none;
    }

    .br-cms-layout .ResponsiveBanner .BannerContent h3,
    .br-cms-layout .ResponsiveBanner .BannerContent p
     {
        font-family: var(--font-family-value-mobile);
        font-weight: var(--font-weight-value-mobile);
    }
}

@media screen and (min-width: 1201px){
    .br-cms-layout .ResponsiveBanner.ResponsiveBannerMinHeightCLSTest {
        min-height: 4.857rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px){
    .br-cms-layout .ResponsiveBanner.ResponsiveBannerMinHeightCLSTest {
        min-height: 4rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 991px){
    .br-cms-layout .ResponsiveBanner.ResponsiveBannerMinHeightCLSTest {
        min-height: 3.071rem;
    }
}

@media screen and (min-width: 481px) and (max-width: 768.5px){
    .br-cms-layout .ResponsiveBanner.ResponsiveBannerMinHeightCLSTest {
        min-height: 9.143rem;
    }
}

@media screen and (max-width:480px){
    .br-cms-layout .ResponsiveBanner.ResponsiveBannerMinHeightCLSTest {
        min-height: 7.143rem;
    }
}
.preview-dynamic-component {
    width: fit-content;
    display: flex;
    flex-flow: column;
    width: 100%;
}

.preview-dynamic-component-select-container {
    width: 100%;
    z-index: 100000;
    display: flex;
    justify-content: center;
}
.preview-dynamic-component-selection-label {
    margin-right: 2vw;
}

.disabled-dynamic-component {
    opacity: 0.5;
}
/*
    Clamp function:
	Inputs:
		min-value in rem (1.1429rem)
		max-value in rem (2.8571rem)
		max-viewport-width in px (1600px)
		min-viewport-width in px (480px)

	Calculation:
	slope = (max-value - min-value) / (max-viewport-width - min-viewport-width)
	yAxisIntersection = - min-viewport-width * slope + min-value
	preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

	clamp(min-value, preferredValue, max-value);
*/

.br-cms-layout .Marquee * {
  box-sizing: border-box;
}

.br-cms-layout .Marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text-color);
  background-color: var(--bg-color-white);
}

.br-cms-layout .Marquee.SideBySide {
  position: static;
  flex-direction: row;
  align-items: stretch;
}

.br-cms-layout .MarqueeImgContent {
  width: 100%;
  height: 100%;
}

.br-cms-layout .MarqueeImgContent .SliderContainer {
  position: relative;
  overflow: hidden;
}

.br-cms-layout .MarqueeImgContent .Slider {
  --slide-width: 100%;
  display: flex;
  flex-flow: row nowrap;
  overflow: visible;
  position: relative;
  left: calc(var(--idx) * -1 * var(--slide-width));
  transition: left var(--rotateimage-animation-speed) ease-in-out;
  width: 100%;
}

.br-cms-layout .MarqueeImgContent .Slide {
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: var(--slide-width);
  justify-content: center;
  align-items: center;
  transition: opacity var(--rotateimage-animation-speed) linear;
  opacity: 0;
}

.br-cms-layout .MarqueeImgContent .Slide.Active {
  opacity: 1;
}


.br-cms-layout .MarqueeImgContent .Dots {
  position: absolute;
  bottom: 0.8571rem;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.7143rem;
  z-index: 4;
}

.br-cms-layout .MarqueeImgContent .Dot {
  width: 0.8571rem;
  height: 0.8571rem;
  background-color: var(--white);
  border: 0.0714rem var(--sfly-border-style-solid) var(--nav-dots-color);
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
}

.br-cms-layout .MarqueeImgContent .Dot.Active {
  background-color: var(--nav-dots-color);
}

.br-cms-layout .MarqueeImgContent .Dot + .Dot {
  margin-left: 1.4286rem;
}

.br-cms-layout .MarqueeImgContent .AppLink {
  display: block;
  height: 100%;
  -webkit-tap-highlight-color: transparent; 
}

.br-cms-layout .MarqueeImgContent picture,
.br-cms-layout .MarqueeImgContent>div,
.br-cms-layout .MarqueeImgContent .AppLink>div,
.br-cms-layout .MarqueeImgContent .Slider, 
.br-cms-layout .MarqueeImgContent .Slide,
.br-cms-layout .MarqueeImgContent .Slide>div,
.br-cms-layout .MarqueeImgContent .hotspot-image-box
{ 
  height: 100%;
}

.br-cms-layout .MarqueeImgContent picture{
  width: 100%;
}

.br-cms-layout .MarqueeImgContent picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.br-cms-layout .Marquee.WrappedContent.AdjustHeight:not(.NotCropped) .MarqueeImgContent picture,
.br-cms-layout .MarqueeVideoContent * {
  height: 100%;
}

.br-cms-layout .Marquee.WrappedContent .MarqueeImgContent,
.br-cms-layout .Marquee.SideBySide .MarqueeImgContent,
.br-cms-layout .Marquee.NotCropped .MarqueeImgContent {
  position: static;
}

.br-cms-layout .Marquee.NotCropped .MarqueeImgContent picture {
  height: unset;
}

.br-cms-layout .Marquee.NotCropped .MarqueeImgContent picture img {
  object-fit: contain;
}

.br-cms-layout .Marquee.SideBySide .MarqueeImgContent {
  margin: 0;
  height: auto;
  z-index: unset;
}

.br-cms-layout .Marquee.SideBySide.NotCropped .MarqueeImgContent,
.br-cms-layout .Marquee.SideBySide.NotCropped .MarqueeVideoContent {
  margin: auto 0;
}

.br-cms-layout .Marquee.SideBySide .MarqueeImgContent.ThirtySeventy,
.br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.ThirtySeventy {
  width: 30%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeImgContent.FortySixty,
.br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.FortySixty {
  width: 40%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeImgContent,
.br-cms-layout .Marquee.SideBySide .MarqueeVideoContent,
.br-cms-layout .Marquee.SideBySide .MarqueeImgContent.FiftyFifty,
.br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.FiftyFifty {
  width: 50%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeImgContent.SixtyForty,
.br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.SixtyForty {
  width: 60%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeImgContent.SeventyThirty,
.br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.SeventyThirty {
  width: 70%;
}

.br-cms-layout .MarqueeContent {
  position: absolute;
  font-weight: var(--font-weight-regular);
  color: var(--text-color);
  z-index: 2;
}

.br-cms-layout .MarqueeImgContent .hotspot-box {
  z-index: 3;
}

.br-cms-layout .Marquee.top .MarqueeContent {
  top: clamp(1.1429rem, -0.7266rem + 2.6358vw, 2.2857rem);
  /* this was calculated using the formula written above */
}

.br-cms-layout .Marquee.right .MarqueeContent {
  /* right: clamp(2rem, -1.2718rem + 4.6129vw, 4rem); */
  /* this was calculated using the formula written above */
  text-align: left;
}

.br-cms-layout .Marquee.bottom .MarqueeContent {
  bottom: clamp(1.1429rem, -0.7266rem + 2.6358vw, 2.2857rem);
  /* this was calculated using the formula written above */
}

.br-cms-layout .Marquee .MarqueeContent {
  left: 0;
  right: 0;
}

.br-cms-layout .Marquee .TextElements {
  display: flex;
  /* flex: 1; */
  text-decoration: none;
  pointer-events: none;
}

.br-cms-layout .Marquee.Standard.middle .TextElements {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
}

/* Applicable for Standard and SwapAlldesigns to display image first and content next*/
.br-cms-layout .Marquee .MarqueeContent:not(.SwappedContent),
.br-cms-layout .Marquee.SideBySide .TextElements:has(> .MarqueeContent:not(.SwappedContent, .above)) {
  order: 1;
}

/* To display content first and image next on desktop when 'Swap content on Side By Side' is selected*/
.br-cms-layout .Marquee.SideBySide .MarqueeContent.SwappedContentSBS,
.br-cms-layout .Marquee.SideBySide .TextElements:has(> .MarqueeContent.SwappedContentSBS) {
  order: 0;
}

/* To maintain 60% of the full width for Heading ground for Standard design */
.br-cms-layout .Marquee.Standard .MarqueeContent .MarqueeInnerContent {
  width:60%;
}

/* To maintain 80% of the heading group's width for both Standard and SideBySide design */
.br-cms-layout .Marquee .MarqueeBodyTxt {
  width:80%;
}

/* To maintain margin to not touch the border for left and right alignment options */
.br-cms-layout .Marquee .MarqueeContent .MarqueeInnerContent {
  margin: 0 clamp(2rem, -1.2718rem + 4.6129vw, 4rem);
}

/* To push the content section right */
.br-cms-layout .Marquee.right .MarqueeContent .MarqueeInnerContent {
  margin-left: auto;
}

/* To push the content section left */
.br-cms-layout .Marquee.left .MarqueeContent .MarqueeInnerContent {
  margin-right: auto;
}

/* To align the content section center */
.br-cms-layout .Marquee.center .MarqueeContent .MarqueeInnerContent {
  margin: 0 auto;
}

@media screen and (min-width:769px) {

  .br-cms-layout .Marquee.SideBySide .MarqueeContent .TextContent {
    width: 70%;
  }

  .br-cms-layout .Marquee.Standard .MarqueeContent .MarqueeInnerContent.thirty {
    width: 30%;
  }

  .br-cms-layout .Marquee.Standard .MarqueeContent .MarqueeInnerContent.forty {
    width: 40%;
  }

  .br-cms-layout .Marquee.Standard .MarqueeContent .MarqueeInnerContent.fifty {
    width: 50%;
  }

  .br-cms-layout .Marquee.SideBySide.left .MarqueeContent .TextContent,
  .br-cms-layout .Marquee.SideBySide:not(.left, .right, .center) .MarqueeContent .TextContent {
    margin-left: clamp(2rem, -1.2718rem + 4.6129vw, 4rem);
  }

  .br-cms-layout .Marquee.SideBySide.right .MarqueeContent .TextContent {
    margin-right: clamp(2rem, -1.2718rem + 4.6129vw, 4rem);
  }

  /* Rounding styles start here */

  /* Below is for adding the rounding for the component.*/
  .br-cms-layout .Marquee.RoundingMainClass, 
  /* Rounding for the Picture image for standard Picture image*/
  .br-cms-layout .Marquee.Standard.RoundingMainClass .MarqueeImgContent picture img,
  /* Rounding for the Picture image for do not crop SideBySide for  Picture image*/
  .br-cms-layout .Marquee.NotCropped.RoundingMainClass .MarqueeImgContent picture img,
  /* Below will apply rounding for the component if there is only MarqueeContent without any Picture img for side by side*/
  .br-cms-layout .Marquee.RoundingMainClass:has(> .MarqueeContent:only-child),
  /* Below will apply roundig if there is only bg img for the side by side text content and there is no video and Picture img*/
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent:only-child) .BackgroundContainer,
  /* Below will apply the rounding for the video if the do not crop is selected */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass.NotCropped:has(> .MarqueeContent:nth-child(1)) .VideoBlock > video[poster]{
    border-radius: 1.143rem;
  }

  /* Below will apply rounding if content is swapped for Picture Img for side by side */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)+ .MarqueeImgContent):not(.NotCropped) .MarqueeImgContent picture img,
  /* Below will apply rounding for the side by side content background img */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent:nth-child(1)+ .MarqueeImgContent) .BackgroundContainer,
  /* Below will apply the rounding for video if the swaped is true and do not crop is not selected */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)):not(.NotCropped) .VideoBlock > video[poster],
  /* Below will apply the rounding for the Background image for Side By Side Text but video should be configured */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .VideoBlock:nth-child(2)) .BackgroundContainer,
  /* Below will apply styles for background image and video when Swap Content Position for all designs option selected */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContent:nth-child(1)+ .MarqueeImgContent):not(.NotCropped) .MarqueeImgContent picture img,
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContent:nth-child(1)):not(.NotCropped) .VideoBlock > video[poster]{
    border-radius: 0 1.143rem 1.143rem 0;
  }

  /* Below will apply rounding for Picture Img for side by side if not swaped*/
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent:nth-child(1)+ .MarqueeImgContent):not(.NotCropped) .MarqueeImgContent picture img,
  /* Below will apply rounding for the side by side content background img if swapped the content */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)+ .MarqueeImgContent) .BackgroundContainer,
  /* Below will apply the rounding for the Background image for Side By Side Text if swapped is selected */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)) .BackgroundContainer,
  /* Below will apply the rounding for video from left side if swap is not checked*/
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent:nth-child(1)) .VideoBlock > video[poster],
  /* Below will apply styles for side by side content bg image when Swap Content Position for all designs option selected */
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContent:nth-child(1)) .BackgroundContainer{
    border-radius: 1.143rem 0 0 1.143rem;
  }
  /* Below will apply the padding for text content block for side by side if there is no Picture image.*/
  .br-cms-layout .Marquee.SideBySide.RoundingMainClass .MarqueeContent:has(> .TextContent) .TextContent,
  /* Below will apply the padding for the component if there is no Picture img for standard*/
  .br-cms-layout .Marquee.Standard.RoundingMainClass:has(> .MarqueeContent:only-child) .TextContent {
    margin: 5.714rem;
  }

  /* Below will apply padding for the marquee img content if do not crop is selected. */
.br-cms-layout .Marquee.SideBySide.RoundingMainClass.NotCropped .MarqueeImgContent,
/* Below will apply the padding from left side for the Video block if do not crop option is selected for the side by side */
.br-cms-layout .Marquee.SideBySide.RoundingMainClass.NotCropped:has(> .VideoBlock:nth-child(2)) .VideoBlock{
  padding: 0 0 0 1.714rem;
}

/* Below will apply the padding if do not crop is selected and swapped is slected for the marquee img conetnt block  */
.br-cms-layout .Marquee.SideBySide.RoundingMainClass.NotCropped:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)+ .MarqueeImgContent) .MarqueeImgContent,
/* Below will apply the padding from right side for the Video block if do not crop option is selected for the side by side*/
.br-cms-layout .Marquee.SideBySide.RoundingMainClass.NotCropped:has(> .VideoBlock:nth-child(2)) .SwappedContentSBS + .VideoBlock{
padding: 0 1.714rem 0 0;
}
  /* Rounding styles ends here */
}

.br-cms-layout .Marquee.center .MarqueeContent:not(.right, .left) .CtaContainer .ctaRow,
.br-cms-layout .Marquee.middle {
  justify-content: center;
}

.br-cms-layout .Marquee .MarqueeContent.right .CtaContainer .ctaRow{
  justify-content: right;
}

.br-cms-layout .MarqueeContent.center .CtaContainer .ctaRow{
  justify-content: center;
}

.br-cms-layout .Marquee.center .MarqueeBodyTxt {
  margin: 0 auto;
}

.br-cms-layout .MarqueeContent .TextElements {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* .br-cms-layout .Marquee.SideBySide .MarqueeContent { */
.br-cms-layout .Marquee.SideBySide .MarqueeContent,
.br-cms-layout .Marquee.SideBySide .MarqueeContent .BackgroundContainer {
  position: static;
  display: flex;
  flex: 1;
  flex-direction: column;
  z-index: unset;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent:not(.BGImgSBS),
.br-cms-layout .Marquee.SideBySide .MarqueeContent.BGImgSBS .BackgroundContainer {
  /* this was calculated using the formula written above */
  padding-top: clamp(1.1429rem, -0.7266rem + 2.6358vw, 2.2857rem);
  padding-bottom: clamp(1.1429rem, -0.7266rem + 2.6358vw, 2.2857rem);
  /* padding-right: clamp(2rem, -1.2718rem + 4.6129vw, 4rem);
  padding-left: clamp(2rem, -1.2718rem + 4.6129vw, 4rem);  */
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.br-cms-layout .Marquee.SideBySide.middle .MarqueeContent,
.br-cms-layout .Marquee.SideBySide.middle .BGImgSBS .BackgroundContainer {
  justify-content: center;
}

.br-cms-layout .Marquee.SideBySide.bottom .MarqueeContent,
.br-cms-layout .Marquee.SideBySide.bottom .BGImgSBS .BackgroundContainer {
  justify-content: flex-end;
}

.br-cms-layout .Marquee.SideBySide.center .MarqueeContent,
.br-cms-layout .Marquee.SideBySide.center .BGImgSBS .BackgroundContainer {
  align-items: center;
}

.br-cms-layout .Marquee.SideBySide.right .MarqueeContent,
.br-cms-layout .Marquee.SideBySide.right .BGImgSBS .BackgroundContainer {
  align-items: flex-end;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent.ThirtySeventy {
  width: 70%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent.FortySixty {
  width: 60%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent.FiftyFifty {
  width: 50%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent.SixtyForty {
  width: 40%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent.SeventyThirty {
  width: 30%;
}

.br-cms-layout .Marquee.SideBySide .MarqueeContent.ImageEmpty {
  width: 100%;
}

/* Need to add font files once we receive cdn urls */
.br-cms-layout .Marquee .MarqueeTitle {
  font-family: var(--font-family-value);
  font-weight: var(--font-family-title-weight);
  margin-bottom: clamp(0.5714rem, 0.307rem + 0.4813vw, 0.8571rem);
  /* this was calculated using the formula written above */
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.br-cms-layout .Marquee .MarqueeParagraph {
  font-family: var(--font-family-paragraph-value);
  font-weight: var(--font-family-paragraph-weight);
}

.br-cms-layout p {
  white-space: pre-line;
}

.br-cms-layout .Marquee .urgencyHeadline * {
  padding: 0;
  margin: 0;
}

.br-cms-layout .Marquee .urgencyHeadline{
  margin-bottom: 0.571rem;
}

.br-cms-layout .Marquee .MarqueeTitle h1, .br-cms-layout .Marquee .MarqueeTitle h2 {
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.2;
}

.br-cms-layout .Marquee p {
  margin: 0;
  padding-bottom: 1.1429rem;
  font-size: clamp(1rem, 0.6919rem + 0.5608vw, 1.3329rem);
  /* this was calculated using the formula written above */
  line-height: 1.5;
}

.br-cms-layout .Marquee .MarqueeContent .CtaContainer {
  display: flex;
  grid-gap: 1.1429rem;
  flex-direction: column;
}
.br-cms-layout .Marquee .MarqueeContent .CtaContainer .ctaRow {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.1429rem;
}

.br-cms-layout .MarqueeContent .CtaContainer .AppLink.link {
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: left;
  text-transform: var(--sfly-font-transform-interactive);
  color: var(--text-color);
  display: flex;
  align-items: center !important;
  justify-content: center;
  text-decoration: underline;
}

.br-cms-layout .MarqueeContent .CtaContainer.NoDefaultUnderline .AppLink.link {
  text-decoration: none;
}

.br-cms-layout .MarqueeContent .CtaContainer.NoDefaultUnderline .AppLink.link:hover {
  text-decoration: underline;
}

.br-cms-layout .MarqueeContent .CtaContainer .AppLink.link::after {
  content: "";
  margin: 0 0 0.0714rem 0.2143rem;
  display: inline-block;
  width: 0.4286rem;
  height: 0.4286rem;
  border: var(--sfly-border-style-solid) var(--text-color);
  border-width: 2px 2px 0 0;
  border-radius: var(--sfly-border-radius-small) var(--sfly-border-radius-small) 0 0;
  transform: rotate(45deg);
}

.br-cms-layout .MarqueeContent .AppLink.button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center !important;
}

.br-cms-layout .MarqueeContent.left,
.br-cms-layout .MarqueeContent.left * {
  text-align: left !important;
}

.br-cms-layout .MarqueeContent.left .MarqueeBodyTxt {
  margin-right: auto;
  margin-left: unset;
}

.br-cms-layout .MarqueeContent.right,
.br-cms-layout .MarqueeContent.right * {
  text-align: right !important;
}

.br-cms-layout .MarqueeContent.right .MobileContent {
  justify-content: right;
}

.br-cms-layout .MarqueeContent.right .MarqueeBodyTxt {
  margin-left: auto;
  margin-right: unset;
}

.br-cms-layout .MarqueeContent.center,
.br-cms-layout .MarqueeContent.center *,
.br-cms-layout .Marquee.Standard .MarqueeContent.onTheImage:not(.left, .right) {
  text-align: center !important;
}

.br-cms-layout .MarqueeContent.center .MarqueeBodyTxt {
  margin: 0 auto;
}


.br-cms-layout .Marquee.center .MarqueeContent:not(.left, .right) .MobileContent, .br-cms-layout .MarqueeContent.center .MobileContent {
  justify-content: center;
}

.br-cms-layout .MarqueeContent .MobileContent .MobileButton {
  display: inline-block;
  width: 9.6429rem;
  height: 2.8571rem;
}

.br-cms-layout .MarqueeContent .MobileContent {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7143rem;
  align-items: center;
}

.br-cms-layout .MarqueeContent .MobileContent .MobileButton.AppStore {
  background: url("https://cdn-image.staticsfly.com/i/landingpages/2017/P40687_Button_App_Store.png?impolicy=resize&width=135") no-repeat;
}

.br-cms-layout .MarqueeContent .MobileContent .MobileButton.GooglePlay {
  background: url("https://cdn-image.staticsfly.com/i/landingpages/2017/P40687_Button_Google_Play.png?impolicy=resize&width=134") no-repeat;
}

.br-cms-layout .MarqueeContent .MarqueeBodyTxt .AppLink,
.br-cms-layout .MarqueeContent .MarqueeBodyTxt a {
  pointer-events: auto;
}

.br-cms-layout .MarqueeContent .CtaContent+.MobileContent {
  margin-top: 1.1429rem;
}

.br-cms-layout .Marquee .promoDetails {
  margin-top: 1.1429rem;
  font-size: 1rem;
}

.br-cms-layout .Marquee .promoText {
  margin-bottom: 0.286rem;
  line-height: 1.5;
}

.br-cms-layout .Marquee .promoDetails .promoLink {
  color: inherit;
  text-decoration: none;
}

.br-cms-layout .Marquee .promoDetails .promoLink:hover {
  text-decoration: underline;
}

.br-cms-layout .Marquee .promoDetails .promoLink:active {
  font-weight: var(--font-weight-semibold);
}

.br-cms-layout .Marquee.WrappedContent .MarqueeContent.onlyTextContent {
  position: static;
  padding: 1.1429rem;
  z-index: unset;
}

/* The below are required for button alignments. 
Otherwise the CTAS will align within the maxwidth of the container but not to the entire Text section */
.br-cms-layout .Marquee .MarqueeContent.center .CtaContainer.alignCtas, .br-cms-layout .Marquee.center .MarqueeContent:not(.left, .right) .CtaContainer.alignCtas{
  margin: 0 auto;
}

.br-cms-layout .Marquee .MarqueeContent.right .CtaContainer.alignCtas {
  margin-left: auto;
}
/* This is to left align CTA content when marquee content is left aligned */
.br-cms-layout .Marquee .MarqueeContent.left .CtaContainer.alignCtas {
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  /* To take the full width on WrappedContent scenario*/
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .TextElements {
    flex-direction: column;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeBodyTxt,
  .br-cms-layout .Marquee.Standard.WrappedContent.wrap-text-on-tablet .MarqueeBodyTxt {
    width: unset;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent .TextContent {
    margin-left: 0;
    margin-right: 0;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent:not(.left, .center, .right) .MobileContent {
    justify-content: center;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.left .MarqueeContent .ctaRow,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.right .MarqueeContent .ctaRow {
    justify-content: center;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent.left .CtaContainer .ctaRow{
    justify-content: left;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent.right .CtaContainer .ctaRow{
    justify-content: right;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeTitle,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeTitle.FontSizeSmall,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeTitle.FontSizeLarge,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeTitle,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeTitle.FontSizeSmall,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeTitle.FontSizeLarge {
    margin-bottom: 0.8571rem;
    text-align: center;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet p,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet p,
  .br-cms-layout .Marquee .urgencyHeadline p {
    font-size: 1.3329rem;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.top .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.right .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.bottom .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.left .MarqueeContent,
  /* this is with no horizonatl alignment for standard with wrapped content */
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.middle .MarqueeContent {
    position: static;
    z-index: unset;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
    padding: 1.1429rem;
    width: 100%;
    max-width: 100%;
    color: var(--text-color-mweb);
    text-align: center;
    background-color: var(--bg-color-Mweb);
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent.NoBackGroundColorEnabledNonMweb {
    padding: 1.1429rem 1.1429rem;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.right .MarqueeContent {
    margin-left: 0;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.left .MarqueeContent {
    margin-right: 0;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent .CtaContainer .AppLink.link {
    color: inherit;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent .CtaContainer .AppLink.link::after {
    border-color: var(--text-color-mweb);
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent:not(.left, .right) .MobileContent {
    justify-content: center;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet {
    flex-direction: column;
    max-height: unset;
    height: unset;
  }


  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent picture img {
    object-fit: contain;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent.ThirtySeventy,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent.FortySixty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent.FiftyFifty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent.SixtyForty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent.SeventyThirty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent.MarqueeTitle,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeImgContent,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent.ThirtySeventy,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent.FortySixty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent.FiftyFifty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent.SixtyForty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeVideoContent.SeventyThirty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty {
    width: auto;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty.BGImgSBS .BackgroundContainer {
    /* changed from margin to paddding remove the space around when BG image is configured for Text section */
    padding-top: 0.8571rem;
    padding-right: 1.7143rem;
    padding-left: 1.7143rem;
  }

  .br-cms-layout .Marquee.SideBySide.left.wrap-text-on-tablet .MarqueeContent,
  .br-cms-layout .Marquee.SideBySide.right.wrap-text-on-tablet .MarqueeContent,
  .br-cms-layout .Marquee.SideBySide.left.wrap-text-on-tablet .MarqueeContent.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.right.wrap-text-on-tablet .MarqueeContent.BGImgSBS .BackgroundContainer {
    text-align: center;
  }
  
  .br-cms-layout .Marquee.SideBySide.left.wrap-text-on-tablet .MarqueeContent .ctaRow,
  .br-cms-layout .Marquee.SideBySide.right.wrap-text-on-tablet .MarqueeContent .ctaRow,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent .ctaRow,
  .br-cms-layout .Marquee.SideBySide.top.wrap-text-on-tablet .MarqueeContent,
  .br-cms-layout .Marquee.SideBySide.bottom.wrap-text-on-tablet .MarqueeContent  {
    justify-content: center;
  }

  .br-cms-layout .Marquee.SideBySide:is(.wrap-text-on-tablet) .MarqueeContent {
    flex: none;
  }
  /* Removing rounding styles starts here */

  /* Below is for remove if wraped style and Wrap the text for low-resolution screens is slected the rounding for the component.*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.RoundingMainClass, 
  /* remove if wraped style and Wrap the text for low-resolution screens is slected rounding for the background image for standard background image*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.Standard.RoundingMainClass .MarqueeImgContent picture img,
  /* remove if wraped style and Wrap the text for low-resolution screens is slected rounding for the background image for do not crop standard for  background image*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.NotCropped.RoundingMainClass .MarqueeImgContent picture img,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected rounding for the component if there is only MarqueeContent without any background img for side by side*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.RoundingMainClass:has(> .MarqueeContent:only-child),
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected roundig if there is only bg img for the side by side text content and there is no video and background img*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent:only-child) .BackgroundContainer,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the rounding from all for the video if the do not crop is selected */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass.NotCropped:has(> .MarqueeContent:nth-child(1)) .VideoBlock > video[poster],
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected rounding if content is swapped for background Img for side by side */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)+ .MarqueeImgContent):not(.NotCropped) .MarqueeImgContent picture img,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected rounding for the side by side content background img */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent:nth-child(1)+ .MarqueeImgContent) .BackgroundContainer,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the rounding for video if the swaped is true and do not crop is not selected */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)):not(.NotCropped) .VideoBlock > video[poster],
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the rounding for the Background image for Side By Side Text but video should be configured */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .VideoBlock:nth-child(2)) .BackgroundContainer,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected rounding for background Img for side by side if not swaped*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent:nth-child(1)+ .MarqueeImgContent):not(.NotCropped) .MarqueeImgContent picture img,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected rounding for the side by side content background img if swapped the content */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)+ .MarqueeImgContent) .BackgroundContainer,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the rounding for the Background image for Side By Side Text if swapped is selected */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)) .BackgroundContainer,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the rounding for video from left side if swap is not checked*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent:nth-child(1)) .VideoBlock > video[poster],
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected for the background img, video and side by side background image when Swap Content Position for all designs */
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContent:nth-child(1)+ .MarqueeImgContent):not(.NotCropped) .MarqueeImgContent picture img,
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContent:nth-child(1)):not(.NotCropped) .VideoBlock > video[poster],
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass:has(> .MarqueeContent.SwappedContent:nth-child(1)) .BackgroundContainer
  {
    border-radius: 0;
  }
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the padding for text content block for side by side if there is no background image.*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass .MarqueeContent:has(> .TextContent) .TextContent,
  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the padding for the component if there is no background img for standard*/
  .br-cms-layout .Marquee.wrap-text-on-tablet.Standard.RoundingMainClass:has(> .MarqueeContent:only-child)  .TextContent {
    margin: 0;
  }

  /* Below will remove if wraped style and Wrap the text for low-resolution screens is slected padding for the marquee img content if do not crop is selected. */
.br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass.NotCropped .MarqueeImgContent,
/* Below will apply the padding from left side for the Video block if do not crop option is selected for the side by side */
.br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass.NotCropped:has(> .VideoBlock:nth-child(2)) .VideoBlock,
/* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the padding if do not crop is selected and swapped is slected for the marquee img conetnt block  */
.br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass.NotCropped:has(> .MarqueeContent.SwappedContentSBS:nth-child(1)+ .MarqueeImgContent) .MarqueeImgContent,
/* Below will remove if wraped style and Wrap the text for low-resolution screens is slected the padding from right side for the Video block if do not crop option is selected for the side by side*/
.br-cms-layout .Marquee.wrap-text-on-tablet.SideBySide.RoundingMainClass.NotCropped:has(> .VideoBlock:nth-child(2)) .SwappedContentSBS + .VideoBlock{
    padding: 0;
  }
  /* Removing rounding styles ends here */

  .br-cms-layout .Marquee.Standard.middle.WrappedContent.wrap-text-on-tablet .TextElements {
    position: static;
  }
}

/* Font Changes for the marquee Title */
.br-cms-layout .Marquee .default.MarqueeTitle{
  font-weight: 200;
}
.br-cms-layout .Marquee .MarqueeTitle.FontSizeX-Large,
.br-cms-layout .Marquee .MarqueeTitle.FontSizeX-Large p{
  font-size: 4rem;
  line-height: 4.571rem;
  letter-spacing: -0.036rem;
}
.br-cms-layout .Marquee .MarqueeTitle.FontSizeLarge,
.br-cms-layout .Marquee .MarqueeTitle.FontSizeLarge p{
  font-size: 3.429rem;
  line-height: 4.286rem;
  letter-spacing: -0.036rem;
}
.br-cms-layout .Marquee .MarqueeTitle.FontSizeMedium,
.br-cms-layout .Marquee .MarqueeTitle.FontSizeMedium p{
  font-size: 2.857rem;
  line-height: 3.571rem;
  letter-spacing: -0.029rem;

}
.br-cms-layout .Marquee .MarqueeTitle.FontSizeSmall,
.br-cms-layout .Marquee .MarqueeTitle.FontSizeSmall p{
  font-size: 2.286rem;
  line-height: 2.857rem;
  letter-spacing: -0.021rem;
}
/* Font changes for the marquee Title ends here*/

@media (max-width: 768px) {
  .br-cms-layout .Marquee {
    background-color: var(--bg-color-Mweb);
  }

  .br-cms-layout .Marquee.relativePostion {
    position: relative;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeBodyTxt,
  .br-cms-layout .Marquee.SideBySide .MarqueeBodyTxt,
  .br-cms-layout .Marquee .MarqueeContent.above .MarqueeBodyTxt,
  .br-cms-layout .Marquee .MarqueeContent.below .MarqueeBodyTxt,
  .br-cms-layout .Marquee .MarqueeContent.onTheImage .MarqueeBodyTxt {
    width: unset;
  }

  /* To display Image first and content next on mobile when only 'Swap content on Side By Side' is selected*/
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SwappedContentSBS,
  .br-cms-layout .Marquee.SideBySide .TextElements:has(> .MarqueeContent.SwappedContentSBS),
  /* To display Image first and content next on mobile WrappedContent is selected and not the SwappedContent*/
  .br-cms-layout .Marquee.WrappedContent .TextElements:has(>.MarqueeContent:not(.SwappedContent)) {
    order: 1;
  }

  .br-cms-layout .Marquee.SideBySide .MarqueeContent {
    flex: none;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeImgContent picture img,
  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent picture img {
    object-fit: contain;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeImgContent picture {
    height: unset;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent .CtaContainer .ctaRow {
    justify-content: center;
  }

  .br-cms-layout .Marquee .MarqueeContent:not(.left, .right) .CtaContainer {
    margin: auto;
  }
  

  .br-cms-layout .MarqueeContent:not(.SwappedContent, .above).NoBackGroundColorEnabledMweb:not(.BGImgSBS), 
  .br-cms-layout .MarqueeContent:not(.SwappedContent, .above).NoBackGroundColorEnabledMweb.BGImgSBS .BackgroundContainer {
    padding: 3.43rem;
  }

  .br-cms-layout .Marquee.Standard:not(.WrappedContent) .MarqueeContent.NoBackGroundColorEnabledMweb {
    padding: 3.43rem;
  }

  .br-cms-layout .Marquee .MarqueeTitle {
    margin-bottom: 0.8571rem;
  }

  .br-cms-layout .Marquee.WrappedContent p,
  .br-cms-layout .Marquee.SideBySide p {
    font-size: 1.3329rem;
  }

  .br-cms-layout .MarqueeContent:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.BGImgSBS .BackgroundContainer {
    margin: 0;
    padding: 3.43rem;
  }

  .br-cms-layout .Marquee.Standard:not(.NotCropped, .WrappedContent) .MarqueeContent {
    max-width: 100%;
  }

  .br-cms-layout .Marquee.WrappedContent.top .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.right .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.bottom .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.left .MarqueeContent,
  .br-cms-layout .Marquee.WrappedContent.middle.center .MarqueeContent,
  .br-cms-layout .Marquee .MarqueeContent.above,
  .br-cms-layout .Marquee .MarqueeContent.below {
    position: static;
    z-index: unset;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .br-cms-layout .Marquee.WrappedContent.right .MarqueeContent {
    margin-left: 0;
  }

  .br-cms-layout .Marquee.WrappedContent.left .MarqueeContent {
    margin-right: 0;
  }

  .br-cms-layout .Marquee.SideBySide .TextContent {
    width: 100%;
  }

  .br-cms-layout .MarqueeContent .CtaContainer .AppLink.link {
    color: var(--text-color-mweb);
    text-align: center;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent .CtaContainer .AppLink.link {
    color: inherit;
  }

  .br-cms-layout .MarqueeContent .CtaContainer .AppLink.link::after {
    border-color: var(--text-color-mweb);
  }

  .br-cms-layout .Marquee.SideBySide {
    flex-direction: column;
    max-height: unset;
    height: unset;
  }

  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent.ThirtySeventy,
  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent.FortySixty,
  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent.FiftyFifty,
  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent.SixtyForty,
  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent.SeventyThirty,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.MarqueeTitle,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent,
  .br-cms-layout .Marquee.SideBySide .MarqueeImgContent,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.ThirtySeventy,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.FortySixty,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.FiftyFifty,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.SixtyForty,
  .br-cms-layout .Marquee.SideBySide .MarqueeVideoContent.SeventyThirty,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.ThirtySeventy,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FortySixty,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FiftyFifty,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SixtyForty,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SeventyThirty {
    width: auto;
  }

  .br-cms-layout .Marquee.SideBySide .MarqueeContent.ThirtySeventy:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FortySixty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FiftyFifty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SixtyForty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SeventyThirty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.ThirtySeventy.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FortySixty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FiftyFifty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SixtyForty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SeventyThirty.BGImgSBS .BackgroundContainer {
    /* changed from margin to padding remove the space around when BG image is configured for Text section */
    padding: 3.43rem;
  }

  .br-cms-layout .Marquee.SideBySide .MarqueeContent:not(.left, .right),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.BGImgSBS:not(.left, .right) .BackgroundContainer {
    align-items: center;
    text-align: center;
  }

  .br-cms-layout .Marquee.SideBySide .MarqueeContent:not(.left, .right) .CtaContent .ctaRow {
    justify-content: center;
  }
  /* with no horizontal alignment for non wrapped and standard */
  .br-cms-layout .Marquee:not(.left, .right, .center, .WrappedContent) .MarqueeContent .CtaContent .ctaRow, .br-cms-layout .Marquee:not(.left, .right, .center, .WrappedContent) .MarqueeContent .MobileContent {
    justify-content: center;
  }

  .br-cms-layout .Marquee.SideBySide.top .MarqueeContent,
  .br-cms-layout .Marquee.SideBySide.bottom .MarqueeContent,
  .br-cms-layout .Marquee.SideBySide.top .MarqueeContent.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.bottom .MarqueeContent.BGImgSBS .BackgroundContainer {
    justify-content: center;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent:not(.left, .right) .MobileContent,
  .br-cms-layout .Marquee .MarqueeContent.above:not(.left, .right) .MobileContent,
  .br-cms-layout .Marquee .MarqueeContent.below:not(.left, .right) .MobileContent,
  .br-cms-layout .Marquee .MarqueeContent.onTheImage:not(.left, .right) .MobileContent {
    justify-content: center;
  }

  .br-cms-layout .Marquee .MarqueeContent .CtaContainer {
    flex-direction: column;
  }

  .br-cms-layout .Marquee .MarqueeContent.left .CtaContainer.alignCtas .ctaRow{
    justify-content: left;
  }

  .br-cms-layout .Marquee .MarqueeContent.right .CtaContainer.alignCtas .ctaRow{
    justify-content: right;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent.above,
  .br-cms-layout .Marquee .MarqueeContent.above,
  .br-cms-layout .Marquee.WrappedContent .TextElements:has(>.MarqueeContent.above),
  .br-cms-layout .Marquee .TextElements:has(>.MarqueeContent.above){ 
    position: static;
    order: 0;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent.below,
  .br-cms-layout .Marquee .MarqueeContent.below,
  .br-cms-layout .Marquee.WrappedContent .TextElements:has(.MarqueeContent.below),
  .br-cms-layout .Marquee .TextElements:has(.MarqueeContent.below) { 
    position: static;
    order: 1;
  }

  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest.WrappedContent .MarqueeContent.onTheImage, 
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest .MarqueeContent.onTheImage { 
    position: absolute;
    z-index: 1;
  }

  .br-cms-layout .Marquee .TextElements:has(>.MarqueeContent.onTheImage) { 
    pointer-events: auto;
  }

  .br-cms-layout .Marquee:not(.left, .right) .MarqueeContent,
  .br-cms-layout .Marquee .MarqueeContent:not(.left, .right) .TextContent {
    text-align: center;
  }

  /* To align the content center on mobile by default */
  .br-cms-layout .Marquee:not(.left, .right) .MarqueeContent:not(.BGImgSBS), 
  .br-cms-layout .Marquee:not(.left, .right) .MarqueeContent .MarqueeInnerContent,
  .br-cms-layout .Marquee:not(.left, .right) .MarqueeContent:not(.left, .right) .MarqueeBodyTxt {
    margin: 0 auto;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent .MarqueeInnerContent,
  .br-cms-layout .Marquee.Standard .MarqueeContent .MarqueeInnerContent {
    margin: 0;
    width: unset;
  }

  .br-cms-layout .Marquee.WrappedContent .MarqueeContent:not(.left, .right) .CtaContainer .ctaRow,
  .br-cms-layout .Marquee .MarqueeContent.above:not(.left, .right) .CtaContent .ctaRow,
  .br-cms-layout .Marquee .MarqueeContent.below:not(.left, .right) .CtaContent .ctaRow,
  .br-cms-layout .Marquee .MarqueeContent.onTheImage:not(.left, .right) .CtaContent .ctaRow {
    justify-content: center;
  }
  /* This is to override display applied to CtaContent for above 768 screens */
  .br-cms-layout .Marquee.Standard.left .MarqueeContent .CtaContent, .br-cms-layout .Marquee.Standard.right .MarqueeContent .CtaContent {
    display: inline-block;
  }

  .br-cms-layout .Marquee .MarqueeImgContent .gradient {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .br-cms-layout .Marquee:not(.bottom) .MarqueeImgContent .gradient {
    background: linear-gradient(7.92deg, rgba(0, 0, 0, 0) 12.22%, rgba(0, 0, 0, 0.92) 100%);
  }
  .br-cms-layout .Marquee.bottom .MarqueeImgContent .gradient {
     background: linear-gradient(187.92deg, rgba(0, 0, 0, 0) 12.22%, rgba(0, 0, 0, 0.92) 100%);
  }


  .br-cms-layout .Marquee.WrappedContent .MarqueeContent:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.WrappedContent .MarqueeContent.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy:not(.BGImgSBS), 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty:not(.BGImgSBS), 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty:not(.BGImgSBS), 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty:not(.BGImgSBS), 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty:not(.BGImgSBS), 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy.BGImgSBS .BackgroundContainer, 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty.BGImgSBS .BackgroundContainer, 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty.BGImgSBS .BackgroundContainer, 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty.BGImgSBS .BackgroundContainer, 
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.top .MarqueeContent, 
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.right .MarqueeContent, 
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.bottom .MarqueeContent, 
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.left .MarqueeContent, 
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet.middle .MarqueeContent {
    padding: 3.43rem;
  }
  
  .br-cms-layout .Marquee .MarqueeContent {
    min-height: 34.57rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-mweb);
  }

  .br-cms-layout .Marquee .MarqueeContent .urgencyHeadline p {
    font-size: 1.14rem;
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    line-height: 120%;
    letter-spacing: 0.0914rem;
    margin-bottom: 1.14rem;
  }

  .br-cms-layout .Marquee .MarqueeContent .MarqueeTitle {
    margin-bottom: 1.14rem;
  }

  .br-cms-layout .Marquee .MarqueeContent .MarqueeBodyTxt {
    font-size: 1.14rem;
    line-height: 1.7143rem;
    letter-spacing: -0.0114rem;
    margin-bottom: 1.14rem;
  }

  .br-cms-layout .Marquee .MarqueeContent .MarqueeBodyTxt p {
    font-size: 1.14rem;
  }

  .br-cms-layout .Marquee.top.SideBySide .MarqueeContent.onTheImage {
    justify-content: flex-start;
  }

  .br-cms-layout .Marquee.bottom.SideBySide .MarqueeContent.onTheImage {
    justify-content: flex-end;
  }

  .br-cms-layout .Marquee.top.Standard .MarqueeContent.onTheImage {
    align-items: flex-start;
  }

  .br-cms-layout .Marquee.bottom.Standard .MarqueeContent.onTheImage {
    align-items: flex-end;
  }

  .br-cms-layout .Marquee.left.Standard .MarqueeContent.onTheImage {
    justify-content: flex-start;
  }

  .br-cms-layout .Marquee.right.Standard .MarqueeContent.onTheImage {
    justify-content: flex-end;
  }

  .br-cms-layout .Marquee.Standard.middle.WrappedContent .TextElements:not(> .MarqueeContent.onTheImage) {
    position: static;
  }

  .br-cms-layout .Marquee.SideBySide.middle .TextElements,
  .br-cms-layout .Marquee.Standard.WrappedContent .TextElements:has(> .MarqueeContent.onTheImage),
  .br-cms-layout .Marquee.SideBySide.top .TextElements,
  .br-cms-layout .Marquee.SideBySide.bottom .TextElements {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .br-cms-layout .Marquee.SideBySide.middle .TextElements {
    align-items: center;
  }
  .br-cms-layout .Marquee.SideBySide.top .TextElements {
    align-items: flex-start;
  }
  .br-cms-layout .Marquee.SideBySide.bottom .TextElements {
    align-items: flex-end;
  }
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeX-Large, 
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeX-Large p{
    font-size: 3.429rem;
    line-height: 4.286rem;
    letter-spacing: -0.036rem;
  }
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeLarge,
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeLarge p{
    font-size: 2.857rem;
    line-height: 3.571rem;
    letter-spacing: -0.029rem;
  }
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeMedium,
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeMedium p{
    font-size: 2.286rem;
    line-height: 2.857rem;
    letter-spacing: -0.021rem;
  }
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeSmall,
  .br-cms-layout .Marquee .MarqueeTitle.FontSizeSmall p{
    font-size: 1.714rem;
    line-height: 2.286rem;
    letter-spacing: -0.014rem;
  }
}

.br-cms-layout .Marquee:not(.NotCropped) .MarqueeImgContent.removeObjectContain picture img {
  object-fit: cover !important;
  height: var(--img-auto-height);
}

@media (max-width: 480px) {

  .br-cms-layout .Marquee .MarqueeTitle {
    margin-bottom: 0.5714rem !important;
  }
  .br-cms-layout .Marquee.WrappedContent p,
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet p,
  .br-cms-layout .Marquee.SideBySide p,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet p,
  .br-cms-layout .Marquee .urgencyHeadline p {
    font-size: 1rem;
  }

  .br-cms-layout .Marquee.SideBySide .MarqueeContent.ThirtySeventy:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FortySixty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FiftyFifty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SixtyForty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SeventyThirty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty:not(.BGImgSBS),
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.ThirtySeventy.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FortySixty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.FiftyFifty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SixtyForty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide .MarqueeContent.SeventyThirty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.ThirtySeventy.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FortySixty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.FiftyFifty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SixtyForty.BGImgSBS .BackgroundContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SeventyThirty.BGImgSBS .BackgroundContainer {
    /* changed from margin to paddding remove the space around when BG image is configured for Text section */
    padding: 3.43rem;
  }
}

/* CLS Min Heigt Changes Start */

/* Below code will add the Minimum Height for the Marquee Component and For the Marquee Image Content only If the content is not wrapped 
and not Side By Side Wrapped 
  Image will be streched if the provided Image is not fit into the required Min height 
  
  Min Height will be differe based on the below resolutions */
@media screen and (min-width: 1201px){
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest, 
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest:not(.NotCropped) .MarqueeImgContent picture img {
    min-height: 13.125rem;
  }
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest .MarqueeContent {
    min-height: 10.893rem;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px){
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest,
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest:not(.NotCropped) .MarqueeImgContent picture img {
    min-height: 13.125rem;
  }
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest .MarqueeContent {
    min-height: 10.893rem;
  }
}

@media screen and (min-width: 992px) {
  /* SBS with horizontal alignment center and text alignment is also center */
  .br-cms-layout .Marquee.SideBySide.center .MarqueeContent:not(.left, .right) .CtaContent {
    display: flex;
    justify-content: center;
  }
}

@media screen and (min-width: 769px) and (max-width: 991px){
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest, 
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest:not(.NotCropped, .WrappedContent.wrap-text-on-tablet, .SideBySide.wrap-text-on-tablet) .MarqueeImgContent picture img {
    min-height: 28.714rem;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent .MarqueeInnerContent {
    margin: 0;
    width: unset;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.left .ctaRow {
    justify-content: flex-start;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.right .ctaRow {
    justify-content: flex-end;
  }

  /* To display Image first and content next when only 'Swap content on Side By Side' and 'Wrap on Tablet' are selected*/
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent.SwappedContentSBS,
  /* To display Image first and content next on mobile wrap-text-on-tablet is selected and not the SwappedContent*/
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .TextElements:has(>.MarqueeContent:not(.SwappedContent)) {
    order: 1;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent:not(.left, .right) .TextContent {
    text-align: center;
  }

  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .TextContent {
    width: 100%;
  }
  
  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent:not(.left, .right) .CtaContainer .ctaRow,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent:not(.left, .right) .CtaContainer .ctaRow  {
    justify-content: center;
  }

  .br-cms-layout .Marquee.WrappedContent.wrap-text-on-tablet .MarqueeContent:not(.left, .right) .CtaContainer,
  .br-cms-layout .Marquee.SideBySide.wrap-text-on-tablet .MarqueeContent:not(.left, .right) .CtaContainer  {
    margin: auto;
  }
  /* This is to override max-width applied to cta class */
  .br-cms-layout .Marquee.center.wrap-text-on-tablet .MarqueeContent .CtaContent, .br-cms-layout .Marquee.SideBySide.center:not(.wrap-text-on-tablet) .MarqueeContent:not(.left, .right) .CtaContent {
    display: flex;
    justify-content: center;
  }
}

@media screen and (min-width: 769px){
  .br-cms-layout .Marquee .MarqueeImgContent .gradient {
    display: none;
  }
}

@media screen and (min-width: 481px) and (max-width: 768.5px){
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest,
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest:not(.NotCropped, .WrappedContent, .WrappedContent.wrap-text-on-tablet,.SideBySide, .SideBySide.wrap-text-on-tablet) .MarqueeImgContent picture img {
    min-height: 27.429rem;
  }
}

@media screen and (min-width: 343px) and (max-width: 480px){
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest,
  .br-cms-layout .Marquee.MarqueeMinHeightCLSTest:not(.NotCropped, .WrappedContent, .WrappedContent.wrap-text-on-tablet, .SideBySide, .SideBySide.wrap-text-on-tablet) .MarqueeImgContent picture img {
    min-height: 17.286rem;
  }  
}

/* CLS Min Height Changes End */

.CategoryBlock * {
    box-sizing: border-box;
}

.CategoryBlock {
    display: flex;
    margin: 1rem 0;
}

.CategoryBlock .CategoryBlockHeader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

.CategoryBlock .CategoryBlockHeader .CategoryBlockTitle {
    margin: 0;
    font-weight: var(--brand-fontweight-callout);
    color: var(--text-color);
    font-size: 1.727rem;
    margin-right: 2rem;
}

.CategoryBlock .CategoryBlockHeader .CategoryBlockCTA {
    font-weight: var(--brand-fontweight-callout);
    color: var(--text-color-gray);
    font-size: 1rem;
    text-decoration: none;
    margin: 1rem 0;
}

.CategoryBlock .CategoryBlockContent {
    margin: .2rem 0 1rem 0;
}

.CategoryBlock .CategoryBlockContent p {
    font-weight: var(--brand-fontweight-callout);
    color: var(--text-color-light);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.5rem 0;
    padding-bottom: 1rem;
}

.CategoryBlock .CategoryBlockImages {
    display: flex;
    justify-content: space-between;
}

.CategoryBlock.Default {
    flex-direction: column;
}

.CategoryBlock.Default .CategoryBlockImages>* {
    width: fit-content;
    margin-right: 0.5rem;
}

.CategoryBlock.Default .CategoryBlockImages>:last-child {
    margin-right: 0;
}

.CategoryBlock.SideBySide {
    flex-direction: row;
}

.CategoryBlock.SideBySide .CategoryBlockContent {
    order: 2;
    width: 100%;
}

.CategoryBlock.SideBySide .CategoryBlockHeader .CategoryBlockTitle {
    font-size: 1.777rem;
}

.CategoryBlock.SideBySide .CategoryBlockImages {
    margin: 0 2rem 0 0;
}

.CategoryBlock.SideBySide .CategoryBlockImages picture {
    align-items: baseline;
}

.CategoryBlock.Simple .CategoryBlockHeader .CategoryBlockTitle {
    font-size: 2.369rem;
}

.CategoryBlock.Simple .CategoryBlockContent p {
    font-size: 1.333rem;
    line-height: 1.5;
}

.CategoryBlock.Simple .CategoryBlockContent .SimpleStyleImages {
    display: flex;
    margin: 1rem 0 1rem 0;
}

.CategoryBlock.Simple .CategoryBlockContent .SimpleStyleImages .SimpleStyleImagesInner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.CategoryBlock.Simple .CategoryBlockContent .SimpleStyleImages > :nth-child(1) {
    margin-right: 1rem;
}

.CategoryBlockOuterContainer {
    padding: 1.5rem 4.5rem;
    background-color: var(--category-block-bg-color);
}

@media (max-width: 948px) {
    .CategoryBlockOuterContainer {
        padding: 1.5rem;
    }
}

@media (max-width: 680px) {
    .CategoryBlock.SideBySide {
        flex-direction: column;
        align-items: center;
    }

    .CategoryBlock.SideBySide .CategoryBlockImages {
        width: unset;
        margin: 0 0 1.2rem 0;
    }
}

@media (max-width: 484px) {
    .CategoryBlock .CategoryBlockHeader .CategoryBlockTitle {
        font-size: 1.333rem;
    }

    .CategoryBlock.Simple .CategoryBlockHeader .CategoryBlockTitle {
        font-size: 1.777rem;
        line-height: initial;
    }

    .CategoryBlock.Simple .CategoryBlockContent p {
        font-size: 1rem;
    }
    
    .CategoryBlock.SideBySide {
        flex-direction: column;
    }

    .CategoryBlock.SideBySide .CategoryBlockHeader .CategoryBlockTitle {
        font-size: 1.333rem;
    }
}
.MyProjects {
    --grid-column-template: 1;
    background-color: var(--myprojects-background);
    padding: 1.7143rem;
    transition: height 0.3s ease-in-out 0s;
}

.MyProjects .GetStartedSection {
    grid-template-columns: 1fr 2fr 1fr;
}

.MyProjects .GetStartedElement {
    grid-column: 2/3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: column;
    text-align: center;
    max-width: 31.357rem;
    padding: 0.5714rem 2.071rem;
}

.MyProjects .GetStartedElement h2 {
    line-height: 2.857rem;
    max-width: 45.286rem;
    color: var(--color-fog);
    font-weight: var(--font-weight-bold);
    font-size: 2.369rem;
    margin: 0 0 1.143rem;
}

.MyProjects .GetStartedElement p {
    font-weight: var(--font-weight-regular);
    font-size: 1.3329rem;
    max-width: 31.357rem;
    color: var(--color-fog);
    margin-bottom: 2.857rem;
    margin-top: 0;
    line-height: 2rem;
}

.MyProjects .getStartedButton .AppLink.button .icon {
    padding: 0 .2857rem 0 0;
    display: inline-block;
}

.MyProjects .getStartedButton .AppLink.button .icon, .MyProjects .getStartedButton .AppLink.button .icon svg {
    height: 1.4286rem;
    width: 1.5714rem;
}

.MyProjects .getStartedButton .uploadIconText {
    line-height: 1.5rem;
    display: inline-block;
}

.MyProjects .uploadSocialIcons {
    margin-top: 2.857rem;
    grid-gap: 3.4286rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.MyProjects .uploadSocialIcons a {
    color: transparent;
}

.MyProjects .socialIconButton {
    overflow: hidden;
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem;
    color: transparent;
}

.MyProjects .socialIconButton.Shutterfly, .MyProjects .socialIconButton.Facebook, .MyProjects .socialIconButton.GooglePhotos, .MyProjects .socialIconButton.Instagram {
    background-size: 2.357rem;
}

.MyProjects .socialIconButton.Shutterfly {
    background: url('https://cdn-image.staticsfly.com/i/home/2021/Social_Icons_APC/shutterfly_ignite.svg') no-repeat;
}

.MyProjects .socialIconButton.Facebook {
    background: url('https://cdn-image.staticsfly.com/i/home/2021/Social_Icons_APC/facebook_blue.svg') no-repeat;
}

.MyProjects .socialIconButton.GooglePhotos {
    background: url('https://cdn-image.staticsfly.com/i/home/2021/Social_Icons_APC/google_photos.svg') no-repeat;
}

.MyProjects .socialIconButton.Instagram {
    background: url('https://cdn-image.staticsfly.com/i/home/2021/Social_Icons_APC/Instagram.svg') no-repeat;
}

.MyProjects a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.MyProjects .Project .ParagraphSection {
    display: flex;
    flex-direction: column;
}

.MyProjects .myprojects-footer {
    display: flex;
    justify-content: center;
}

.MyProjects .see-all-link {
    margin: 2.2857rem 0 0.5714rem 0;
    color: var(--color-blue);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--brand-fontweight-interactive);
}

.MyProjects .details a::after {
    content: ' >';
}

.MyProjects .Project .details .projectButton {
    margin-top: 0.7rem;
    font-weight: var(--font-weight-semibold);
}


.MyProjects .myprojects-header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

.MyProjects .myprojects-header .AppLink.button.secondary-button {
    position: absolute;
    top: 3.2857rem;
    right: 0;
    padding: var(--button-space-padding) !important;
}

.MyProjects .myprojects-title {
    margin: 0.5714rem 0 2.2857rem 0;
    font-size: 2.3686rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-color-fog);
}

.MyProjects .myprojects-grid {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    grid-template-columns: var(--grid-column-template);
    grid-column-gap: 1.7143rem;
}

.MyProjects .myprojects-grid.centre {
    width: fit-content;
    max-width: calc(100% - 1.7143rem);
}

.MyProjects .myprojects-grid.centre.single {
    grid-template-columns: auto;
}

.MyProjects .Project {
    box-sizing: border-box;
    border: 0.0714rem var(--sfly-border-style-solid) var(--myprojects-border);
    background: var(--white);
    border-radius: 0.4286rem;
    padding: 1.7143rem;
    display: flex;
    flex-direction: row;
    height: 17.9286rem;
    width: 34.3571rem;
}

.MyProjects .Project:hover .projectview-cta {
    text-decoration: underline;
}

.MyProjects .Project .thumbnail-box {
    position: relative;
    padding-right: 1.7143rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.MyProjects .Project .thumbnail-box.thumbnail-width {
    min-width: 11.4286rem;
}

.MyProjects .Project .thumbnail-box div{
   height: 100%;
}

.MyProjects .Project .thumbnail-box picture{
    height: 100%;
 }

 .MyProjects .Project .thumbnail-box picture img{
    max-height: 100%;
 }


.MyProjects .Project .thumbnail-label-box {
    position: absolute;
    padding: 0.2143rem 0;
    width: 100%;
    text-align: center;
    background: hsl(0deg 0% 100% / 40%);
}

.MyProjects .Project .thumbnail-label-box .thumbnail-label {
    font-weight: var(--brand-fontweight-callout);
    font-size: 1rem;
    text-transform: var(--sfly-font-transform-lettercase);
    letter-spacing: .15em;
    color: var(--color-red);
}

.MyProjects .ParagraphSection {
    align-self: center;
    max-width: 16.0714rem;
}

.MyProjects .ParagraphSection .details .projectview-title,
.MyProjects .ParagraphSection .details .projectview-description {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.MyProjects .details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.7;
}

.MyProjects .content-overlay-wrapper.forceOverlay {
    opacity: 1;
}

.MyProjects .content-overlay-wrapper {
    position: absolute;
    text-align: center;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out 0s;
}

.MyProjects .content-image {
    width: 14.2857rem;
    height: 12.8571rem;
    object-fit: contain;
    overflow: hidden;
}

.MyProjects .card-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 14.2857rem;
    max-height: 13.0714rem;
    min-height: 13.0714rem;
    margin: 0 auto;
    padding: 0.0714rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.MyProjects .discontinued-text {
    letter-spacing: .15em;
    margin-bottom: .5em;
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
    background: hsla(0, 0%, 100%, .4);
    color: var(--text-color-red);
    white-space: nowrap;
    padding: 0.2143rem;
}

.MyProjects .Project .ParagraphSection .details .projectview-date .myprojects-date-format-2 {
    display: none;
}
.MyProjects .icon {
    fill: white;
    vertical-align: bottom;
    padding: 0.28571rem;
     }

@media screen and (max-width: 1600px) {
    .MyProjects .myprojects-grid {
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(34.3571rem, 1fr));
        grid-auto-flow: column;
        grid-auto-columns: minmax(34.3571rem, 1fr);
        overflow-x: auto;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /*Firefox */
    }
}

@media screen and (max-width: 1200px) {
    .MyProjects .Project .thumbnail-box.thumbnail-width {
        min-width: auto;
    }
}

@media screen and (max-width: 991px) {
    .MyProjects .Project {
        width: 30.7857rem;
    }

    .MyProjects .myprojects-grid {
        grid-template-columns: repeat(auto-fill, minmax(30.7857rem, 1fr));
        grid-auto-columns: minmax(30.7857rem, 1fr);
    }

    .MyProjects .ParagraphSection {
        align-self: center;
        max-width: 13.8571rem;
    }

    .MyProjects .myprojects-title {
        margin: 0 0 1.1429rem 0;
        font-size: 2.3571rem
    }

    .MyProjects .see-all-link {
        margin: 1.1429rem 0 0 0;
    }

    .MyProjects {
        padding: 1.1429rem;
    }

    .MyProjects .myprojects-header .AppLink.button.secondary-button {
        padding: 0.3571rem 1rem 0.3571rem 0.8571rem !important;
        position: inherit;
        display: inline-block;
    }

    .MyProjects .Project .thumbnail-box.thumbnail-width {
        min-width: 11.4286rem;
    }

    .MyProjects .GetStartedElement {
        padding: 1.1429rem;
    }

    .MyProjects .GetStartedElement h2 {
        margin-bottom: 0.5714rem;
    }

    .MyProjects .GetStartedElement p {
        margin-bottom: 1.7143rem;
    }

    .MyProjects .uploadSocialIcons {
        margin-top: 1.7143rem;
        grid-gap: 2.2857rem;
    }

    .MyProjects .socialIconButton {
        height: 1.5714rem;
        width: 1.5714rem;
    }
    
    .MyProjects .socialIconButton.Shutterfly, .MyProjects .socialIconButton.Facebook, .MyProjects .socialIconButton.GooglePhotos, .MyProjects .socialIconButton.Instagram {
        background-size: 1.5714rem;
    }
}


@media screen and (max-width: 768px) {
    .MyProjects .GetStartedSection {
        grid-template-columns: 1fr;
    }

    .MyProjects .GetStartedElement {
        grid-column: 1/1;
        padding-top: 0;
        padding-bottom: 0.5714rem;
    }

    .MyProjects .GetStartedElement p {
        max-width: 28.5714rem;
    }

}


@media screen and (max-width: 484px) {
    
    .MyProjects .myprojects-grid {
        display: flex;
        justify-items: center;
        overflow-y: hidden;
    }

    .MyProjects .myprojects-title {
        margin: 0 0 1.7143rem 0;
        font-size: 1.2857rem;
    }

    .MyProjects .see-all-link {
        margin: 1.7143rem 0 0 0;
    }

    .MyProjects .Project .ParagraphSection .details .projectview-date .myprojects-date-format-1 {
        display: none;
    }

    .MyProjects .Project .ParagraphSection .details .projectview-date .myprojects-date-format-2 {
        display: inline-block;
    }


    .MyProjects .GetStartedElement h2 {
        width: 25.8571rem;
        font-size: 1.333rem;
        line-height: 2rem;
    }

    .MyProjects .GetStartedElement p {
        max-width: 30.4286rem;

        margin-bottom: 2.2857rem;
    }
    
    .MyProjects .GetStartedElement {
        padding-top: .5714rem;
    }
}

@media screen  and (max-width: 400px) {
    .MyProjects .GetStartedElement h2 {
        width: fit-content;
    }
    .MyProjects .GetStartedElement p {
        width: fit-content;
        margin-bottom: 1.7143rem;
    }
}











 


.br-cms-layout .Nup * {
    box-sizing: border-box;
}
.br-cms-layout .Nup {
    --highLighting-Block: var(--brand-state-hover-border-color);
    --textColorFor-Block: var(--text-color);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
    row-gap: 1.714rem;
    background-color: var(--bgColorFor-Component);
}
.br-cms-layout .Nup.RoundingForComponent{
    border-radius: 1.429rem;
}
.br-cms-layout .Nup.NupPadding{
    padding: 2.857rem;
}
.br-cms-layout .Nup img {
    height: 0;
}
.br-cms-layout .Nup picture img{
    height: auto;
}
.br-cms-layout .NupElement {
    margin: 0;
    min-width: auto;
    text-align: center;
    white-space: initial;
    word-wrap: break-word;
    background-color: var(--bgColorFor-Block);
}

.br-cms-layout .NupElement.RoundedCornerForBlock{
    padding: 1.714rem;
    border-radius: 1.429rem;
}
.br-cms-layout .Nup .NupElement.highlightBlockOnMatch:not(.br-cms-spa .br-cms-layout .Nup .NupElement.highlightBlockOnMatch) {
    border: 0.143rem var(--sfly-border-style-solid) var(--highLighting-Block);
    border-radius: var(--sfly-border-radius-medium);
}
.br-cms-layout .Nup.FontSizeLarge .text-box .cms-content .cms-heading{
    font-size: 1.714rem;
    font-family: var(--br-cms-font-hue)
}
.br-cms-layout .Nup.FontSizeSmall .text-box .cms-content .cms-heading{
    font-size: 1.286rem;
    font-family: var(--br-cms-font-sohne);
}
.br-cms-layout .Nup.FontFamilyFont2 .text-box .cms-content .cms-heading{
    font-family: var(--br-cms-font-hue);
}
.br-cms-layout .Nup.FontFamilyFont1 .text-box .cms-content .cms-heading{
    font-family: var(--br-cms-font-sohne);
}
.br-cms-layout .NupElement.RoundedCornerForBlockImg .image-box .image-blob-div div picture img{
    border-radius: 1.1429rem;
}
/* .br-cms-layout .NupElement .TextSection {
    margin-bottom: 0.5714rem;
} */
/* .br-cms-layout .NupElement.NonMwebLeftAlign,
.br-cms-layout .NupElement.left{
    text-align: left;
} */
.br-cms-layout .NupElement .ProductTitle,
.br-cms-layout .NupElement  .product-pricing .title {
    margin-top: 1.1429rem;
    font-size: 1.3329rem;
    line-height: 2rem;
}

.br-cms-layout .NupElement  .product-pricing .title {
    font-weight: var(--brand-fontweight-callout);
}

.br-cms-layout .NupElement  .product-pricing .paragraph,
.br-cms-layout .NupElement  .product-pricing .title ,
.br-cms-layout .NupElement  .showPricingImage .product-pricing .PriceComponent {
    display: none ;
}

.br-cms-layout .NupElement .product-pricing .ImageProduct {
    height: 11.7234rem;
    width: 11.7234rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.br-cms-layout .Nup .NupElement  .product-pricing .ImageProduct img {
    max-width:100%;
    height: 100%;
    object-fit: contain;
}

.br-cms-layout .NupElement  .ProductParagraph,
.br-cms-layout .NupElement  .product-pricing .paragraph {
    font-weight: var(--font-weight-regular);
    font-size: 1rem;
    line-height: 1.5;
    padding-top: 0.5rem;
}

.br-cms-layout .NupElement .text-box .AppLink {
    width: fit-content;
}

.br-cms-layout .NupElement .text-box a:not(.button){
    font-weight: var(--brand-fontweight-interactive);
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
    color: var(--text-color-fog);
}

.br-cms-layout .NupElement .text-box a:not(.button),
.br-cms-layout .NupElement .text-box .no-underline a:hover:not(.button)  {
    text-decoration: underline;
}

.br-cms-layout .NupElement .text-box .no-underline a:not(.button) {
    text-decoration: none;
}
.br-cms-layout .NupElement .image-box { 
    position: relative;
}

.br-cms-layout .NupElement .text-box .AppLink.Title,
.br-cms-layout .NupElement .text-box .AppLink.Title:hover {
    text-decoration: none;
}
.br-cms-layout .NupElement > .image-box:first-child, .br-cms-layout .NupElement a > .image-box:first-child {
    margin-bottom: 1.7143rem;
}
.br-cms-layout .NupElement .image-box .AppLink.button {
    background-color: var(--button-bg);
    margin-top: 1.1429rem;
}
.br-cms-layout .NupElement > .TextSection:first-child, .br-cms-layout .NupElement a > .TextSection:first-child {
    margin-bottom: 1.7143rem;
}
.br-cms-layout .NupElement h2 {
    /* margin-top: 0.8571rem;
    margin-bottom: 0.5714rem; */
    margin: 0;
    font-size: 1.3329rem;
}

.br-cms-layout .NupElement h2,
.br-cms-layout .NupElement .subtitle,
.br-cms-layout .NupElement p {
    color: var(--text-color);
}
.br-cms-layout .NupElement .subtitle,
.br-cms-layout .NupElement p {
    font-weight: var(--font-weight-regular);
    font-size: 1rem;
    /* margin-bottom: 1.1429rem; */
    margin: 0;
}
.br-cms-layout .Nup.seeMore .seeMoreButton {
    display: none;
    font-size: 1rem;
    font-weight: var(--brand-fontweight-interactive);
    color: var(--text-color);
    width: 100%;
    text-transform: var(--sfly-font-transform-interactive);
    text-align: center;
    padding: 0.5714rem 0;
    border: none;
    background: none;
    border-top: 1px var(--sfly-border-style-solid) var(--light-grey-2);
    transition: all 350ms ease-out;
}
.br-cms-layout .Nup.seeMore .seeMoreButton .seeMoreButtonText {
    margin-right: 1.7143rem;
}
.br-cms-layout .Nup.seeMore .seeMoreButton .chevronUp, .chevronDown {
    display: inline-block;
    position: relative;
    border-right: 2px var(--sfly-border-style-solid) var(--text-color);
    border-bottom: 2px var(--sfly-border-style-solid) var(--text-color);
    width: 0.7143rem;
    height: 0.7143rem;
    border-radius: var(--sfly-border-radius-small);
}
.br-cms-layout .Nup.seeMore .seeMoreButton .chevronUp {
    top: 0.2143rem;
    transform: rotate(225deg);
}
.br-cms-layout .Nup.seeMore .seeMoreButton .chevronDown {
    top: -0.2143rem;
    transform: rotate(45deg);
}
.br-cms-layout .NupElement.W-1{
     flex-basis: 100%;
     max-width: 100%;
}
.br-cms-layout .NupElement.W-2{
    flex-basis: 47.7444%;
    max-width: 47.7444%;
}
.br-cms-layout .NupElement.W-3{
    flex-basis: 31.3284%;
    max-width: 31.3284%;
}
.br-cms-layout .NupElement.W-4{
    flex-basis: 23.1203%;
    max-width: 23.1203%;
}
.br-cms-layout .NupElement.W-5{
   flex-basis: 18.170%;
   max-width: 18.170%;
}
.br-cms-layout .NupElement.W-6{
    flex-basis: 14.9123%;
    max-width: 14.9123%;
}
.br-cms-layout .NupElement.W-7{
    flex-basis: 11.1%;
    max-width: 11.1%;
    margin: 0 0.8571rem;
}
.br-cms-layout .NupElement.W-8{
    flex-basis: 10.808%;
    max-width: 10.808%;
    margin: 0 0.589rem;
}
.br-cms-layout .Nup .NupElement .WrappingLink{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    display: block;
}

.br-cms-layout .Nup .NupElement .cms-content {
    display: flex;
    flex-direction: column;
    gap: 1.143rem;
}

.br-cms-layout .Nup .TextSection .product-pricing {
    align-items: unset;
}

.br-cms-layout .Nup .TextSection .PriceComponent {
    margin: 0;
    text-align: left;
    font-size: 1.143rem;
    line-height: 1.714rem;
}

.br-cms-layout .Nup .TextSection .PriceComponent .sale {
    color: var(--deep-carrot);
}

/* Horizontal alignemnts for Text and Image */
.br-cms-layout .NupElement.AlignLeft .TextSection,
.br-cms-layout .NupElement.AlignLeft .TextSection .PriceComponent {
    text-align: left;
}
.br-cms-layout .NupElement.AlignCenter .TextSection,
.br-cms-layout .NupElement.AlignCenter .TextSection .PriceComponent {
    text-align: center;
}
.br-cms-layout .NupElement.AlignRight .TextSection,
.br-cms-layout .NupElement.AlignRight .TextSection .PriceComponent {
    text-align: right;
}

.br-cms-layout .NupElement.AlignLeft picture {
    justify-content: flex-start;
}

.br-cms-layout .NupElement.AlignRight picture {
    justify-content: flex-end;
}

/* Vertical alignemnts for Text and Image */

.br-cms-layout .NupElement.AlignTop .TextSection {
    justify-content: flex-start;
}

.br-cms-layout .NupElement.AlignMiddle .TextSection {
    justify-content: center;
}

.br-cms-layout .NupElement.AlignBottom .TextSection {
    justify-content: flex-end;
}

.br-cms-layout .Nup .TextSection .PriceTagPrefixName {
    margin-left: 0;
}

.br-cms-layout .Nup:not(.TextOverImage) .NupElement .TextSection {
    max-width: 70%; /* To maintian max width of Title and Body text to 70% percent of the card container for 1 up, 2up and 3 up */
}

.br-cms-layout .Nup:not(.TextOverImage) .NupElement:not(.W-1) .TextSection {
    max-width: 100%; /* To maintian max width of Title and Body text to 100% percent of the card container for 2up and 3 up */
}

.br-cms-layout .Nup:not(.TextOverImage) .NupElement.AlignLeft .TextSection,
.br-cms-layout .NupElement.AlignLeft .TextSection .AppLink {
    margin-right: auto;
}

.br-cms-layout .NupElement .TextSection .AppLink {
    overflow-wrap: break-word;
    width: 100%;
}

.br-cms-layout .Nup:not(.TextOverImage) .NupElement.AlignRight .TextSection,
.br-cms-layout .NupElement.AlignRight .TextSection .AppLink {
    margin-left: auto;
}

.br-cms-layout .Nup:not(.TextOverImage) .NupElement.AlignCenter .TextSection,
.br-cms-layout .NupElement.AlignCenter .TextSection .AppLink {
    margin-left: auto;
    margin-right: auto;
}

.br-cms-layout .Nup:not(.TextOverImage) .NupElement:not(.W-1,.W-2,.W-3,.RoundedCornerForBlock) .TextSection {
    padding-left: 1.143rem;
    padding-right: 1.143rem;
}


.br-cms-layout .Nup.TextOverImage .NupElement,
.br-cms-layout .Nup.TextOverImage .NupElement .WrappingLink {
    position: relative;
}

.br-cms-layout .Nup.TextOverImage:not(.removeGradient, .hasTextColor) .NupElement h2,
.br-cms-layout .Nup.TextOverImage:not(.removeGradient, .hasTextColor) .NupElement .subtitle,
.br-cms-layout .Nup.TextOverImage:not(.removeGradient, .hasTextColor) .NupElement p,
.br-cms-layout .Nup.TextOverImage:not(.removeGradient, .hasTextColor) .NupElement a,
.br-cms-layout .Nup.TextOverImage:not(.removeGradient, .hasTextColor) .NupElement .PriceComponent span {
    color: var(--br-cms-color-brand-heron);
}

.br-cms-layout .Nup.hasTextColor .NupElement h2,
.br-cms-layout .Nup.hasTextColor .NupElement .subtitle,
.br-cms-layout .Nup.hasTextColor .NupElement p,
.br-cms-layout .Nup.hasTextColor .NupElement a,
.br-cms-layout .Nup.hasTextColor .NupElement .PriceComponent span {
    color: var(--textColorFor-Block);
}

.br-cms-layout .Nup.TextOverImage:not(.removeGradient) .NupElement .image-box picture::after {
    background: linear-gradient(193.19deg, rgba(0, 0, 0, 0) 58.62%, rgba(0, 0, 0, 0.8) 100%);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.br-cms-layout .Nup.TextOverImage:not(.removeGradient) .NupElement.RoundedCornerForBlockImg .image-box picture::after {
    border-radius: 1.429rem;
}

.br-cms-layout .Nup.TextOverImage .TextSection {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.7143rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 1;
    box-sizing: border-box;
}

.br-cms-layout .Nup.TextOverImage .RoundedCornerForBlock > .TextSection {
    padding: 3.429rem;
}

.br-cms-layout .Nup.TextOverImage .TextSection > * {
    width: 100%;
}

.br-cms-layout .Nup.TextOverImage .image-box {
    margin-bottom: 0;
}

.br-cms-layout .NupElement.MaintainAspectRatio {
    align-content: center;
}

.br-cms-layout .NupElement.MaintainAspectRatio.W-2{
    aspect-ratio: 2/1;
}

.br-cms-layout .NupElement.MaintainAspectRatio:not(.W-1, .W-2){
    aspect-ratio: 1/1;
}

@media screen and (min-width: 1600px) {
    [class*="NupElement W-"] > .image-box picture > img{
        min-width: 0;
    }
}
@media screen and (max-width: 1200px) {
    .br-cms-layout .NupElement.W-2{
        flex-basis: 47%;
        max-width: 47%;
    }
    .br-cms-layout .NupElement.W-3{
        flex-basis: 30.66%;
        max-width: 30.66%;
    }
    .br-cms-layout .NupElement.W-4{
        flex-basis: 22.5%;
        max-width: 22.5%;
    }
    .br-cms-layout .NupElement.W-5{
        flex-basis: 17.5%;
        max-width: 17.5%;
    }
    .br-cms-layout .NupElement.W-6{
        flex-basis: 14.33%;
        max-width: 14.33%;
    }
    .br-cms-layout .NupElement.W-8{
        flex-basis: 10.25%;
        max-width: 10.25%;
    }
}
@media screen and (max-width: 991px) {
    .br-cms-layout .NupElement.W-2{
        flex-basis: 46.3415%;
        max-width: 46.3415%;
    }
    .br-cms-layout .NupElement.W-3{
        flex-basis: 30.0813%;
        max-width: 30.0813%;
    }
    .br-cms-layout .NupElement.W-4{
        flex-basis: 21.9512%;
        max-width: 21.9512%;
    }
    .br-cms-layout .NupElement.W-5{
        flex-basis: 17.0732%;
        max-width: 17.0732%;
    }
    .br-cms-layout .NupElement.W-6{
        flex-basis: 14.02%;
        max-width: 14.02%;
        margin: 0 0.571rem;
    }
    .br-cms-layout .NupElement.W-8{
        flex-basis: 9.7561%;
        max-width: 9.7561%;
        margin: 0 0.571rem;
    }
}
@media screen and (max-width: 768px){
    .br-cms-layout .Nup {
        --margin-top-showMore-mobile : -0.5711rem; /* -1 *  (total spacing(4rem) - spacing b/w item and see-more(1.1429)) */
    }
    .br-cms-layout .NupElement{
        margin: 0 0.5714rem 0;
    }
    .br-cms-layout .Nup.seeMore .seeMoreButton {
        margin-top : var(--margin-top-showMore-mobile);
    }
    .br-cms-layout .Nup.horizScroll > .NupElement .image-box picture {
        position: relative;
    }
    .br-cms-layout .Nup.horizScroll > .NupElement .image-box picture > img {
        max-width: 35vw;
    }
    .br-cms-layout .Nup.horizScroll.TextOverImage > .NupElement.W-2 .image-box picture > img,
    .br-cms-layout .Nup.horizScroll.TextOverImage > .NupElement.W-1 .image-box picture > img {
        width: 100%;
        max-width: 100%;
        min-width: 35vw
    }
    [class*="NupElement W-"]  .image-box picture > img {
        max-width: 100%;
    }
    .br-cms-layout .Nup.horizScroll > .NupElement.W-2,
    .br-cms-layout .Nup.horizScroll > .br-cms-layout  .NupElement.W-2,
    .br-cms-layout .horizScroll > .NupElement.W-3,
    .br-cms-layout .Nup.horizScroll > .NupElement.W-4,
    .br-cms-layout .Nup.horizScroll > .NupElement.W-5,
    .br-cms-layout .Nup.horizScroll > .NupElement.W-6,
    .br-cms-layout .Nup.horizScroll > .NupElement.W-7,
    .br-cms-layout .Nup.horizScroll > .NupElement.W-8 {
        max-width: none;
        margin: 0 0.5714rem 0;
    }
    .br-cms-layout .NupElement.W-2{
        flex-basis: 46.84211%;
        max-width:  46.84211%;
        margin: 0;
    }
    .br-cms-layout .NupElement.W-3{
        flex-basis: 30.5263%;
        max-width: 30.5263%;
        margin: 0;
    }
    .br-cms-layout .NupElement.W-4{
        flex-basis: 22.3684%;
        max-width: 22.3684%;
        margin: 0;
    }
    .br-cms-layout .NupElement.W-5
    {
        flex-basis: 46.7105%;
        max-width: 46.7105%;
        margin: 0;
    }
    .br-cms-layout .NupElement.W-6{
        flex-basis: 30.5%;
        max-width:  30.5%;
        margin: 0;
    }
    .br-cms-layout .NupElement.W-7{
        flex-basis: 30%;
        max-width: 30%;
        margin: 0;
    }
    .br-cms-layout .NupElement.W-8 {
        flex-basis: 22.3684%;
        max-width: 22.3684%;
        margin: 0;
    }
    .br-cms-layout .Nup.seeMore > .NupElement.W-4,
    .br-cms-layout .Nup.seeMore > .NupElement.W-5,
    .br-cms-layout .Nup.seeMore > .NupElement.W-8 {
        flex-basis: 30.5263%;
        max-width: 30.5263%;
        margin: 0;
    }
    .br-cms-layout .Nup.horizScroll {
        align-content: normal;
        overflow-y: hidden;
        overflow-x: scroll;
        flex-wrap: unset;
        flex-direction: row;
        justify-content: unset;
        padding-bottom: 1.7142rem;
    }
    .br-cms-layout .Nup.seeMore > .seeMoreButton {
        display: unset;
    }
    .br-cms-layout .NupElement.seeMoreHidden-false {
        display: none;
    }
    /* .br-cms-layout .NupElement.NonMwebLeftAlign {
        text-align: center;
    }
    .br-cms-layout .NupElement.MwebLeftAlign {
        text-align: left;
    } */
}
@media screen and (max-width: 480px) {
    .br-cms-layout .NupElement.W-4,
    .br-cms-layout .NupElement.W-5,
    .br-cms-layout .Nup.seeMore > .NupElement.W-4,
    .br-cms-layout .Nup.seeMore > .NupElement.W-5,
    .br-cms-layout .NupElement.W-6,
    .br-cms-layout .NupElement.W-7,
    .br-cms-layout .NupElement.W-8,
    .br-cms-layout .Nup.seeMore > .NupElement.W-8,
    .br-cms-layout .NupElement.W-2,
    .br-cms-layout .NupElement.W-3{
        flex-basis: 45%;
        max-width: 45%;
    }
    .br-cms-layout .Nup.horizScroll > .NupElement .image-box picture > img {
        max-width: 56.9vw;
    }
    .br-cms-layout .Nup.horizScroll.TextOverImage > .NupElement.W-2 .image-box picture > img,
    .br-cms-layout .Nup.horizScroll.TextOverImage > .NupElement.W-1 .image-box picture > img {
        min-width: 56.9vw;
    }
}
@media screen and (max-width: 400px) {
    .br-cms-layout .NupElement{
        min-width: auto;
    }
    .br-cms-layout .Nup.horizScroll > .NupElement .image-box picture > img {
        max-width: 56.2vw;
    }
    .br-cms-layout .Nup.horizScroll.TextOverImage > .NupElement.W-2 .image-box picture > img,
    .br-cms-layout .Nup.horizScroll.TextOverImage > .NupElement.W-1 .image-box picture > img {
        min-width: 56.2vw;
    }
}
.WeddingDateRoot {
    margin-left: 0.357rem;
}

.WeddingDateRoot .WeddingDateSample {
    margin: 0 auto;
    border-radius: var(--sfly-border-radius-medium);
    border: 1px var(--sfly-border-style-solid) var(--slate-gray);
    max-width: 32.214rem;
    padding:   1.143rem;
    box-sizing: border-box;
}

.WeddingDateRoot .WeddingDateSample .weddingDateError {
    color: red;
    margin-bottom: 0.357rem;
}
.WeddingDateRoot .WeddingDateSample .weddingDateTitleFont {
    text-align: left;
    color: var(--text-color);
    font-size: 1.143rem;
}

.WeddingDateRoot .WeddingDateSample .weddingDatePadding {
    display: flex;
    margin: 10px 0 0 0;
    justify-content: center;
    grid-gap: 2rem;
}

/* Nup CSS for Wedding Date Start */
.WeddingDateRoot .WeddingDateSample .weddingDatePadding .AppLink.button.black-ow {
    word-wrap: normal;
}

.NupWeddingDateTitle {
    font-size: 2.857rem;
    color: var(--text-color);
    font-weight: var(--font-weight-regular);
    text-align: center;
    margin-bottom: 1rem;
}

.Nup .NupElement .WeddingDateRoot {
    margin: 10px 0;
}

.NupWeddingDateTitle.enable{
    display: none;
}

@media screen and (max-width: 768px) {
    .NupWeddingDateTitle {
        display: none;
        margin-bottom: 0rem;
    }
    .NupWeddingDateTitle.enable{
        display: block;
    }
}

/* Nup CSS for Wedding Date End */

.WeddingDateRoot .WeddingDateSample .weddingDatePadding .weddingPickerDate,
.WeddingDateRoot .WeddingDateSample .weddingDatePadding .weddingPickerDate .sfly-datepicker  {
    margin: auto;
}

@media screen  and (max-width:745px) {
    .WeddingDateRoot .WeddingDateSample .weddingDatePadding {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    .WeddingDateRoot .WeddingDateSample .weddingDatePadding .weddingPickerDate{
        margin: 10px 0
    }
}

.br-cms-layout .CarouselComponent * {
    box-sizing: border-box;
}

.br-cms-layout .CarouselComponent {
    text-align: center;
    background-color: var(--bg-color);
    font-weight: var(--brand-fontweight-callout);
    word-break: break-word;
}

.br-cms-layout .CarouselComponent .CarouselTitle {
    color: var(--main-title-color);
    font-family: var(--main-title-font-family);
    font-size: 2.1429rem;
    padding-bottom: 1.7143rem;
}

.br-cms-layout .CarouselComponent .swiper-slide img {
    margin: 0 auto;
    max-width: 19.4286rem;
    max-height: 19.4286rem;
    width: 100%;
    height: 19.4286rem;
    object-fit: contain;
}

.br-cms-layout .CarouselComponent .swiper-button-prev,
.br-cms-layout .CarouselComponent .swiper-button-next {
    position: absolute;
    top: 0;
    width: 2.8571rem;
    height: 2.8571rem;
    border-radius: 50%;
    background-color: var(--light-fog-gray);
    border: none;
    cursor: pointer;
    padding-top: 1rem;
    z-index: 5;
    transform: translate(0);
    opacity: 1;
    margin: unset;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

.br-cms-layout .CarouselComponent .swiper-button-prev::after,
.br-cms-layout .CarouselComponent .swiper-button-next::after {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--sfly-border-style-solid) var(--brand-state-hover-border-color);
    border-width: 0.1429rem 0.1429rem 0 0;
    border-radius: var(--sfly-border-radius-small) var(--sfly-border-radius-small) 0 0;
}

.br-cms-layout .CarouselComponent .swiper-button-prev {
    right: 5.1429rem;
    left: auto;
    padding-left: 0.2857rem;
}

.br-cms-layout .CarouselComponent .swiper-button-next {
    right: 0.8571rem;
    padding-right: 0.2857rem;
}

.br-cms-layout .CarouselComponent .swiper-button-prev:after,
.br-cms-layout .CarouselComponent .swiper-button-next:after {
    content: '';
    transform: rotate(-135deg);
    opacity: 1;
}

.br-cms-layout .CarouselComponent .swiper-button-next:after {
    transform: rotate(45deg);
}

.br-cms-layout .CarouselComponent .swiper-button-lock {
    display: none;
}

.br-cms-layout .CarouselComponent .swiper-wrapper {
    text-align: center;
}

.br-cms-layout .CarouselComponent .swiper-wrapper .swiper-slide:not(.br-cms-layout .two-column-layout .CarouselComponent .swiper-wrapper .swiper-slide) {
    width: var(--block-width);
}

.br-cms-layout .CarouselComponent .CarouselProduct a.CarouselContent, .br-cms-layout .CarouselComponent .CarouselProduct .TextContent {
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.br-cms-layout .CarouselComponent .CarouselProduct .TextContent {
    gap: 0.2857rem;
    margin: 1.1429rem 0 1.4286rem;
}

.br-cms-layout .CarouselComponent .CtaContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.1429rem;
    margin-top: 1.1429rem;
    margin-bottom: 0.2857rem;
}

.br-cms-layout .CarouselComponent .CtaContainer .CTA {
    align-self: center;
}
.br-cms-layout .CarouselComponent .CtaContainer .CTA.link:hover  {
    text-decoration: underline;
}


.br-cms-layout .CarouselComponent .ProductTitle {
    color: var(--all-block-title-color);
}

.br-cms-layout .CarouselComponent .ProductTitle,
.br-cms-layout .CarouselComponent .product-pricing .title {
    font-size: 1.3329rem;
    line-height: 2rem;
}

.br-cms-layout .CarouselComponent .product-pricing .title {
    font-weight: var(--brand-fontweight-callout);
}

.br-cms-layout .CarouselComponent .ProductParagraph,
.br-cms-layout .CarouselComponent .product-pricing .paragraph {
    font-weight: var(--font-weight-regular);
    font-size: 1rem;
    line-height: 1.5;
}

.br-cms-layout .CarouselComponent .ProductParagraph.NoMargin{
    margin:0;
}
.br-cms-layout .CarouselComponent .ProductParagraph {
    margin: 0;
}

.br-cms-layout .CarouselComponent .ProductParagraph.NoMarginTop {
    margin-top: 0rem;
}

.br-cms-layout .CarouselComponent .ProductParagraph.NoMarginBottom {
    margin-bottom: 0rem;
}

.br-cms-layout .CarouselComponent .product-pricing .PriceComponent {
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
    line-height: 1.5;
}

.br-cms-layout .CarouselComponent .HighlightedText {
    color: var(--ignite);
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: var(--all-blocks-bg-color);
    padding: 0 1.1429rem;
    position: relative;
    z-index: 2;
}

.br-cms-layout .CarouselComponent .CtaContainer a:not(.button) {
    color: var(--text-color-gray);
    text-transform: var(--sfly-font-transform-interactive);
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock:after {
    pointer-events: none;
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.BlockBorder:after {
    box-shadow: 0 0 0 0.0715rem var(--carouselblock-border-color) inset;
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.addHoverState:hover:after {
    box-shadow: 0 0 0 0.1429rem var(--black) inset;
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.BlockBorder:after,
.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.addHoverState:hover:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.br-cms-layout .CarouselComponent.CarouselPadding {
    padding: 1.7143rem 0;
}

.br-cms-layout .CarouselComponent .swiper-slide {
    padding: 0 0.8571rem;
    height: auto;
}


.br-cms-layout .CarouselComponent .swiper-slide>div,
.br-cms-layout .CarouselComponent .swiper-slide .CarouselProduct,
.br-cms-layout .CarouselComponent .swiper-slide .CarouselProductBlock {
    height: 100%;
}

.br-cms-layout .CarouselComponent .swiper-slide .CarouselProductBlock.collapseMode{
    height: calc(100% - 2.857rem);

}
.br-cms-layout .CarouselComponent .CarouselProduct .ParagraphOne {
    flex: 1 0 auto;
}

.br-cms-layout .CarouselComponent .CarouselProduct .ParagraphTwo.BoldStyle {
    font-weight: var(--font-weight-bold);
}

.br-cms-layout .CarouselComponent .CarouselProduct .HtmlParagraph {
    text-align: left;
}

.br-cms-layout .CarouselComponent .collapseText.full-width {
    border-radius: 0 0 0.857rem 0.857rem;
    width : 100%;
}
.br-cms-layout .CarouselComponent .collapseText.bottom {
    width: 100%;
    border-color: transparent;
    border-bottom-color: var(--carouselblock-border-color);
    height:3.821rem
}

.br-cms-layout .CarouselComponent .collapseText.round {
    border-radius: 0 0 0.857rem 0.857rem;
    align-self: center;
}

.br-cms-layout .CarouselComponent .collapseText.square {
    align-self: center;
}

.br-cms-layout .CarouselComponent .collapseText span+span.icon {
    padding-left: 0.857rem;
}

.br-cms-layout .CarouselComponent .collapseText span svg {
    display: inline-block;
    fill: var(--text-color-fog);
    height: 1.286rem;
    width: 1.286rem;
    transition: all 200ms ease-in-out;
    margin-top: 0.357rem;
}

.br-cms-layout .CarouselComponent .collapseText .icon.down svg {
    rotate: -90deg;
}

.br-cms-layout .CarouselComponent .collapseText .icon.up svg {
    rotate: 90deg;
}

.br-cms-layout .CarouselComponent .collapseText.component {
    padding: 0.571rem 0;
}

.br-cms-layout .CarouselComponent .collapseText {
    margin: 0 auto;
    display: flex;
    text-transform: var(--sfly-font-transform-interactive);
    border: 0.0715rem var(--sfly-border-style-solid) var(--carouselblock-border-color);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5rem;
    height:2.857rem;
    width :14.286rem;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer; 
}

.br-cms-layout .CarouselComponent .CarouselProductBlock.BlockBorder + .collapseText {
    border-top: 0;
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle {
    height: auto;
    background-color: var(--carouselbadges-default-color);
    padding: 0.5rem 1.714rem 0.4286rem;
    color: var(--white);
    font-style: italic;
    font-size: 1.2857rem;
    line-height: 1.5714rem;
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle.fontFamilyMed {
    font-weight: var(--brand-fontweight-callout);
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle.fontFamilyRegular {
    font-weight: var(--font-weight-regular);
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle.fontFamilybold {
    font-weight: var(--font-weight-bold);
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle .CarouselMiniBannerBadge {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
            line-clamp: 3; 
    -webkit-box-orient: vertical;
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle.normal{
    font-style: normal;
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle .CarouselMiniBannerBadge.mWebBadgeText {
    display: none;
}

.br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle .CarouselMiniBannerBadge.desktopBadgeText {
    display: -webkit-box;
}

@media screen and (max-width: 1200px) {
    .br-cms-layout .CarouselComponent .swiper-slide img {
        max-width: 14.0411rem;
        max-height: 14.0411rem;
        height: 14.0411rem;
    }
}

@media screen and (max-width: 991px) {
    .br-cms-layout .CarouselComponent .swiper-slide img {
        max-width: 11.1017rem;
        max-height: 11.1017rem;
        height: 11.1017rem;
    }
}

@media screen and (min-width: 769px) {
 
    .br-cms-layout .CarouselComponent .hasArrows .swiper .swiper-wrapper {
        padding-top: 4.5714rem;
    }

    
}
.br-cms-layout .CarouselComponent.MWeb {
    display: none;
}

.br-cms-layout .CarouselComponent.Desktop {
    display: block;
}

.br-cms-layout .CarouselComponent.All {
    display: block;
}


@media screen and (max-width: 768px) {

    .br-cms-layout .CarouselComponent .swiper-button-prev, 
    .br-cms-layout .CarouselComponent .swiper-button-next {
        top: auto;
        bottom: 0;
    }

    .br-cms-layout .CarouselComponent .hasArrows .swiper .swiper-wrapper {
        padding-bottom: 4.5714rem;
    }
    .br-cms-layout .CarouselComponent.MWeb {
        display: initial;
    }

    .br-cms-layout .CarouselComponent.Desktop {
        display: none;
    }
    .br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle .CarouselMiniBannerBadge.mWebBadgeText {
        display: -webkit-box;
    }
    .br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle .CarouselMiniBannerBadge.desktopBadgeText {
        display: none;
    }
    .br-cms-layout .CarouselProduct .CarouselProductBlock .CarouselMiniBannerStyle.hideBadgesMWeb {
        display: none;
    }
}

@media screen and (min-width: 769px){

    .br-cms-layout .CarouselComponent .ImageWithPadding picture img  {
        padding-top: 2.286rem;
    }
}

@media screen and (max-width: 768px) {
    .br-cms-layout .CarouselComponent .swiper-slide {
        padding: 0 0.5714rem;
    }

    .br-cms-layout .CarouselComponent .swiper-slide img {
        max-width: 18.9383rem;
        max-height: 18.9383rem;
        height: 18.9383rem;
    }
}

@media screen and (min-width: 769px) and (max-width:991px){
    .br-cms-layout .CarouselComponent .CarouselProduct .TextContent .PriceComponent.onsale, .br-cms-layout .CarouselComponent .CarouselProduct .TextContent .PriceComponent .PriceComponentPriceTag.original {
         display: flex;
         flex-direction: column;
     }
 
     .br-cms-layout .CarouselComponent .CarouselProduct .TextContent .PriceComponent.onsale .original {
         margin-right: 0;
     } 
 }

 @media screen and (min-width: 769px) and (max-width:991px){
    .br-cms-layout .two-column-layout .CarouselComponent .swiper-slide {
        padding: 0 ;
    }
    .br-cms-layout .CarouselComponent .swiper-slide:has(.EdgeToEdgeLayout) {
        padding: 0 0.8571rem;
    } 
 }

@media screen and (max-width: 480px) {
    .br-cms-layout .CarouselComponent .swiper-slide img {
        max-width: 17.7954rem;
        max-height: 17.7954rem;
        height: 17.7954rem;
    }
}

@media screen and (max-width: 372px) {
    .br-cms-layout .CarouselComponent .swiper-slide img {
        max-width: 13.7143rem;
        max-height: 13.7143rem;
        height: 13.7143rem;
    }
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout {
    padding: 0;
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout picture img {
    max-width: 100%;
    object-fit: cover;
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout .TextContent {
    padding: 0 1.1429rem;
}

/* To have an element with 1:1 aspect ratio */
.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout.FixedAspectRatio picture {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

@media screen and (min-width: 481px) {
    /* To have an element with 3:2 aspect ratio for 2 and 3 blocks */
    .br-cms-layout .CarouselComponent.Blocks2 .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout.FixedAspectRatio picture,
    .br-cms-layout .CarouselComponent.Blocks3 .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout.FixedAspectRatio picture {
        padding-top: 66.66%;
    }
}

.br-cms-layout .CarouselComponent .CarouselProduct .CarouselProductBlock.EdgeToEdgeLayout.FixedAspectRatio picture img {
    max-height: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    object-fit: contain;
    margin: auto;
}
.br-cms-layout .TextBlock {
  background-color: var(--bg-color-white);
  text-align: center;
  text-wrap: balance;
  padding: clamp(1.7143rem, 1.1855rem + 0.9626vw, 2.2857rem);
  --text-color-link: var(--text-color);
  --text-color-linkMweb: var(--text-color);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.br-cms-layout .TextBlock.NoBGColour {
  padding-top: 0;
  padding-bottom: 0;
}

.br-cms-layout .TextBlock.left {
  text-align: left;
  align-items: flex-start;
}

.br-cms-layout .TextBlock.right {
  text-align: right;
  align-items: flex-end;
}

.br-cms-layout .TextBlock .cms-title {
  color: var(--text-color-title);
  font-family: var(--title-font-family);
  margin-bottom: clamp(0.5714rem, 0.3070rem + 0.4813vw, 0.8571rem);
}

.br-cms-layout .TextBlock .cms-title.small {
  font-size: clamp(1.3329rem, 0.9218rem + 0.7484vw, 1.7771rem);
  line-height: 1.5;
}

.br-cms-layout .TextBlock .cms-title.medium {
  font-size: clamp(1.3329rem, 0.4509rem + 1.6057vw, 2.286rem);
}

.br-cms-layout .TextBlock .cms-title.large {
  font-size: clamp(1.7771rem, 0.7778rem + 1.8193vw, 2.857rem);
}

.br-cms-layout .TextBlock .cms-title.xtraLarge {
  font-size: clamp(2.286rem, 1.2283rem + 1.9256vw, 3.429rem);
}

.br-cms-layout .TextBlock .cms-title.xxtraLarge {
  font-size: clamp(2.857rem, 1.7993rem + 1.9256vw, 4rem);
}

.br-cms-layout .TextBlock .subtitle {
  margin: 0;
  color: var(--text-color-subtitle);
  line-height: 1.5;
}

.br-cms-layout .TextBlock .subtitle.small {
  font-size: 1rem;
}

.br-cms-layout .TextBlock .subtitle.medium {
  font-size: clamp(1rem, 0.6919rem + 0.5608vw, 1.3329rem);
}

.br-cms-layout .TextBlock .subtitle.large {
  font-size: clamp(1.3329rem, 0.9218rem + 0.7484vw, 1.7771rem);
}

.br-cms-layout .TextBlock .CtaContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1429rem;
}

.br-cms-layout .TextBlock .cms-title + .CtaContainer {
  padding-top: .3571rem;
}

.br-cms-layout .TextBlock .subtitle + .CtaContainer {
  padding-top: 1.1429rem;
}

.br-cms-layout .TextBlock.left .CtaContainer {
  justify-content: left;
}

.br-cms-layout .TextBlock.right .CtaContainer {
  justify-content: right;
}

.br-cms-layout .TextBlock .CtaContainer .CtaBlock {
  margin: 0rem;
}

.br-cms-layout .TextBlock .CtaContainer .AppLink.link {
  color: var(--text-color-link);
}

.br-cms-layout .TextBlock .urgencyHeadline * {
  padding: 0;
  margin: 0;
}

.br-cms-layout .TextBlock .urgencyHeadline {
  color: var(--urgency-headline-color);
  margin-bottom: 1.143rem;
}

@media screen and (max-width: 991px) {
  .br-cms-layout .TextBlock .urgencyHeadline p {
    font-size: 1.3329rem;
  }
}

@media screen and (max-width: 768px) {
  .br-cms-layout .TextBlock {
    padding: 1.1429rem;
  }
  
  .br-cms-layout .TextBlock .cms-heading.default-title-line-height {
    line-height: 1.5;
  }

  .br-cms-layout .TextBlock.AlignmentForMweb {
    text-align: left;
  }
  
  .br-cms-layout .TextBlock.BackgroundColorForMweb {
    background-color: var(--bg-color-Mweb);
  }

  .br-cms-layout .TextBlock .cms-title {
    color: var(--text-color-titleMweb);
  }

  .br-cms-layout .TextBlock .subtitle {
    color: var(--text-color-subtitleMweb);
  }

  .br-cms-layout .TextBlock .CtaContainer {
    flex-direction: column;
  }

  .br-cms-layout .TextBlock.left .CtaContainer, .br-cms-layout .TextBlock.AlignmentForMweb .CtaContainer, .br-cms-layout .TextBlock.right.AlignmentForMweb .CtaContainer {
    align-items: flex-start;
  }

  .br-cms-layout .TextBlock.right .CtaContainer {
    align-items: flex-end;
  }
  
  .br-cms-layout .TextBlock .CtaContainer .AppLink.link {
    color: var(--text-color-linkMweb);
  }
}

@media screen and (max-width: 480px) {
  .br-cms-layout .TextBlock .urgencyHeadline p {
    font-size: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .br-cms-layout .TextBlock .cms-title {
    width: 50%;
  }
  .br-cms-layout .TextBlock .subtitle {
    width: 40%;
  }
  .br-cms-layout .TextBlock .urgencyHeadline {
    width: 40%;
  }
}
.CtaBlock {
    margin: 0.8571rem;
}

.CtaBlock.left {
    text-align: left;
    justify-content: flex-start;
    margin-left: 1%;
}

.CtaBlock.right {
    text-align: right;
    justify-content: flex-end;
    margin-right: 1%;
}

.CtaBlock.center {
    text-align: center;
    justify-content: center;
}

.CtaBlock.MWeb {
    display: none;
}

.CtaBlock.Desktop {
    display: flex;
}

.CtaBlock.All {
    display: flex;
}

@media screen and (max-width: 768px){

    .CtaBlock.MWeb {
        display: flex;
    }

    .CtaBlock.Desktop {
        display: none;
    }
}
.br-cms-layout .RotateComponent .ResponsiveBanner {
   width: 100%;
}
.br-cms-layout .RotateComponent.bottom .bottomNav {
    position: relative;
    display: flex;
    justify-content: center;
    left: 50%;
    padding-top: 1.5rem;
    margin: 0 auto;
}
@media screen and (max-width: 991px) {
    .br-cms-layout .RotateComponent.Desktop {
        display: none;
    }
}
@media screen and (min-width: 769px) {
    .br-cms-layout .RotateComponent.MWeb {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    .br-cms-layout .RotateComponent.MobileAndTablet{
      display: none;
    }
}
.br-cms-layout .V3ContentWrapper {
    text-decoration: none;
}

.br-cms-layout .ResponsiveBannerV3Content {
    position: relative;
    color: var(--text-color);
    --font-family-title: var(--br-cms-font-hue);
    font-family: var(--br-cms-font-sohne);
}

.br-cms-layout .ResponsiveBannerV3Content .bannerV3:not(.TextOnly) .ResponsiveBannerV3{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .V3ContentWrapper {
    display: flex;
    flex: 1;
    gap: 1.143rem;
    padding: 0.5714rem 1.714rem;
}   

.br-cms-layout .ResponsiveBannerV3Content .bannerV3 .middleSection .urgencyHeadline {
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-light); 
    font-size: 1.714rem;
    line-height: 2.286rem;
}

.br-cms-layout .ResponsiveBannerV3Content .bannerV3 img {
    width: 100%;
    object-fit: cover;
}

.br-cms-layout .bannerV3 picture {
    display: flex;
    max-height: 100%;
    margin: 0 auto;
    width: 100%;
}

.br-cms-layout .bannerV3 .ResponsiveBannerV3Content>.bannerV3>picture {
    position: static;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 a {
    color: inherit;
}

/* left section */
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    justify-content: center;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection.left { 
    align-items: flex-start;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection.right { 
    align-items: flex-end;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection.center { 
    align-items: center;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection .eyeBrowDetails .eyeBrowDetailsText {
    font-family: var(--br-cms-font-sohne);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08rem;
    line-height: 1.2rem;
    color: var(--eyeBrowFontColor);
}

/* middle section */
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection.left {
    align-items: flex-start;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection.right {
    align-items: flex-end;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .promoSection {
    line-height: 1.5rem;
    font-weight: var( --font-weight-regular);
    color: var(--promo-details-text-color);
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .urgencyHeadline{
   color: var(--urgencyFontColor);
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .promoSection .promoCode,
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .promoSection .seePromoDetails,
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .dot  {
    font-weight: var( --font-weight-medium);
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .dot  {
    margin: 0 0.5rem;
}

/* right section */
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: right;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection .CTASection {
    display: flex;
    gap: 1.143rem;
    flex-wrap: wrap;
    justify-content: right;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection.left .CTASection,
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection.left  {
    justify-content: left;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection.center .CTASection, 
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection.center  {
    justify-content: center;
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection.right .CTASection, 
.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection.right  {
    justify-content: right;
}

.br-cms-layout .ResponsiveBannerV3Content .bannerV3.roundedCorners,
.br-cms-layout .ResponsiveBannerV3Content .bannerV3.roundedCorners img {
    border-radius: var(--sfly-border-radius-extra-large);
}

.br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .Description {
    font-family: var(--br-cms-font-sohne);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 1.5rem;
    display: none;
    color: var(--descriptionFontColor);
}

p {
    margin: 0;
}

@media (min-width: 992px) {
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection .Description {
        display: block;
    }

    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection.timerView {
        flex: 1;
    }    
}

@media (max-width: 991px) {
 
   .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection,
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection
    {
       flex: 1;
    }

    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection {
        align-items: center;
    }

    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection .Description {
        display: block;
    }

}
@media (max-width: 768px) {
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .V3ContentWrapper:not(.minimalView) {
        flex-direction: column;
        gap: 0.286rem;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection {
        align-items: center;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection.minimalView {
        flex: unset;
        flex-grow: 1;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection.minimalView:not(.left, .right) {
        align-items: flex-start;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .middleSection.minimalView {
        flex: unset;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection {
        justify-content: center;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .rightSection .CTASection a:not(.button) {
        text-decoration: underline;
    }
    .br-cms-layout .ResponsiveBannerV3Content .ResponsiveBannerV3 .leftSection:not(.minimalView , .left ,.right) {
        text-align: center;
    }
}



@media screen and (min-width: 1201px){
    .br-cms-layout .ResponsiveBannerV3Content.ResponsiveBannerV3MinHeightCLSTest {
        min-height: 4.857rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200.5px){
    .br-cms-layout .ResponsiveBannerV3Content.ResponsiveBannerV3MinHeightCLSTest {
        min-height: 4rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 991.5px){
    .br-cms-layout .ResponsiveBannerV3Content.ResponsiveBannerV3MinHeightCLSTest {
        min-height: 3.071rem;
    }
}

@media screen and (min-width: 481px) and (max-width: 768.5px){
    .br-cms-layout .ResponsiveBannerV3Content.ResponsiveBannerV3MinHeightCLSTest:has(img) {
        min-height: 9.143rem;
    }
}

@media screen and (max-width:480px){
    .br-cms-layout .ResponsiveBannerV3Content.ResponsiveBannerV3MinHeightCLSTest:has(img) {
        min-height: 7.143rem;
    }
}

.SeoContent {
  max-width: 85.7143rem;
  padding: 0rem 1.7143rem;
  margin: 0 auto;
  box-sizing: border-box;
}
.SeoContent h2 {
  font-weight: var(--font-weight-bold);
  font-size: 1.3329rem;
  margin-bottom: .5714rem; 
  line-height: 2rem;
}
.SeoContent p {
  font-weight: var(--font-weight-regular);
  margin-top: .5714rem;
  margin-bottom: 1.7143rem;
  line-height: 1.5rem;
}
.SeoContent p:last-child {
  margin-bottom: 1.1429rem;
}
.SeoContent p + h2 {
  margin-top: 1.7143rem;
}
.SeoContent .ToggleLink {
  display: inline-flex;
  grid-gap: .2857rem;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.SeoContent .ToggleLink .text {
  line-height: 1.5rem;
}

.SeoContent .ArrowIcon svg{
  width: 1.1429rem;
  height: auto;
  transition: all 200ms ease-in-out;
  fill: var(--text-color);
}
.SeoContent .ArrowIcon {
  display: flex;

}

.SeoContent .ArrowDown svg{
  transform: rotate(-90deg);
}
.SeoContent .ArrowUp svg{
  transform: rotate(90deg);
}

.SeoContent .simple-content-mobile {
  display: none;
}

@media screen and (min-width: 769px){
  .SeoContent  .simple-content-desktop {
    display: block;
  }
}

@media screen and (max-width: 768px){
  .SeoContent {
    max-width: 34.2857rem;
  }

  .SeoContent  .simple-content-mobile {
    display: block;
  }
  .SeoContent  .simple-content-desktop {
    display: none;
  }
}

@media (hover: hover) {
  .SeoContent .ToggleLink:hover {
    text-decoration: underline;
  }
}

.br-cms-layout .CategoryComponent {
  --card-width: 8.7143rem;
  --card-width-mWeb: 8.7143rem;
  --card-bg-color: var(--bg-color-white);
  --card-image-bgcolor: var(--bg-color-white);
  --main-title-alignment: left;
  --main-title-alignment-mweb: left;
  --highLighting-Block: var(--brand-state-hover-border-color);
}
.br-cms-layout .CategoryComponent.bgPadding{
  background-color: var(--component-background-color);
  border-radius: 0.5714rem;
}
.br-cms-layout .CategoryComponent.rmRoundingsForCompo{
  border-radius: revert;
}
.br-cms-layout .CategoryComponent .cms-heading.title {
  font-size: 1.8571rem;
  margin-left: 1.714rem;
  padding: 0 1.7143rem 1.1429rem 0;
  color: var(--text-color-gray);
  text-align: var(--main-title-alignment);
}
.br-cms-layout .CategoryComponent.bgPadding .cms-heading.title {
  padding: 3.429rem 1.7143rem 0 0;
}
.br-cms-layout .CategoryComponent .Tile:first-child {
  margin-left: var(--tile-cards-alignment-left);
}

.br-cms-layout .CategoryComponent .Tile:last-child {
  margin-right: var(--tile-cards-alignment-right);
}

.br-cms-layout .CategoryComponent .TileList {
  display: flex;
  grid-gap: 1.714rem;
  overflow-x: auto;
  padding: 0.5714rem 0.7143rem;
  scroll-behavior: smooth;
  width: 100%;
}
.br-cms-layout .CategoryComponent .Tile.highlightBlockOnMatch:not(.br-cms-spa .br-cms-layout .CategoryComponent .Tile.highlightBlockOnMatch) {
  border: 0.143rem var(--sfly-border-style-solid) var(--highLighting-Block);
  border-radius: var(--sfly-border-radius-medium);
}

.br-cms-layout .CategoryComponent .Tile {
  flex: 0 0 var(--card-width);
  border-radius: 0.5714rem;
  box-shadow: 0 2px 4px 0 var(--light-grey-2);
  color: var(--text-color);
  text-decoration: none;
  background-color: var(--card-bg-color);
}

.br-cms-layout .CategoryComponent .Tile .categoryTitle {
  min-height: 4.2857rem;
  display: flex;
  align-items: center;
  padding: 0rem 0.5714rem;
  box-sizing: border-box;
  font-size: 1.143rem;
  line-height: 1.714rem;
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
  letter-spacing: -0.011rem;
}



.br-cms-layout .CategoryComponent .Tile .image-box {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: var(--card-image-bgcolor);
  border-radius: 0.5714rem 0.5714rem 0 0;
}

.br-cms-layout .CategoryComponent .Tile .image-box .image-blob {
  z-index: 0 !important;
}

.br-cms-layout .CategoryComponent .Tile .image-box picture,
.br-cms-layout .CategoryComponent .Tile .image-box>img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.br-cms-layout .CategoryComponent .Tile .image-box picture img {
  border-radius: 0.5714rem 0.5714rem 0 0;
}

.br-cms-layout .CategoryComponent .Tile:hover {
  color: inherit
}

.br-cms-layout .CategoryComponent .Tile .TitleBox {
  height: 100%;
  display: flex;
}

.br-cms-layout .CategoryComponent .CarouselAllignment {
  display: flex;
  align-items: center;
  position: relative;
}
.br-cms-layout .CategoryComponent.bgPadding .CarouselAllignment{
  padding: 2.857rem 0;
}

.br-cms-layout .CategoryComponent .CarouselAllignment .carosuelButtonLeft {
  left: 1.143rem;
}

.br-cms-layout .CategoryComponent .CarouselAllignment .carosuelButtonLeft.hideArrowtrue,
.br-cms-layout .CategoryComponent .CarouselAllignment .carosuelButtonRight.hideArrowtrue {
  display: none;
}

.br-cms-layout .CategoryComponent .CarouselAllignment .carosuelButtonRight {
  right: 1.143rem;
}

.br-cms-layout .CategoryComponent .CarouselAllignment .carosuelButtonLeft,
.br-cms-layout .CategoryComponent .CarouselAllignment .carosuelButtonRight {
  display: flex;
  flex: 0 0 auto;
  width: 2.286rem;
  height: 2.286rem;
  z-index: 1;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: transparent;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .35s;
  transform: rotate(360deg);
  border-radius: 2.286rem;
  background-color: rgba(36, 31, 22, 0.48);
}

.br-cms-layout .CategoryComponent .CarouselAllignment>a.carosuelButtonRight:before {
  transform: translate(8.5px, 11.5px) rotate(-45deg);
}

.br-cms-layout .CategoryComponent .CarouselAllignment>a.carosuelButtonLeft:before {
  transform: translate(12.2px, 11.5px) rotate(135deg);
}

.br-cms-layout .CategoryComponent .CarouselAllignment>a:before {
  content: "";
  height: 4px;
  width: 4px;
  border: var(--sfly-border-style-solid) var(--br-cms-color-brand-heron);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  position: absolute;
}
.br-cms-layout .CategoryComponent .Tile:has(.TitleBox:empty) .image-box img,
.br-cms-layout .CategoryComponent .Tile:has(.TitleBox:empty) .image-box{
  border-radius: 0.5714rem;
}
@media screen and (max-width: 768px) {
  .br-cms-layout .CategoryComponent .Tile {
    flex: 0 0 var(--card-width-mWeb);
  }

  .br-cms-layout .CategoryComponent .cms-heading.title {
    text-align: var(--main-title-alignment-mweb);
  }

  .br-cms-layout .CategoryComponent .Tile:first-child {
    margin-left: var(--tile-cards-alignment-mweb-left);
  }

  .br-cms-layout .CategoryComponent .Tile:last-child {
    margin-right: var(--tile-cards-alignment-mweb-right);
  }
  .br-cms-layout .CategoryComponent .TileList{
    grid-gap: 1.143rem;
  }
}
.WeddingModal {
  box-sizing: border-box;
  border-radius: 0.4286rem;
  background-color: var(--white);
  padding: 0;
  box-shadow: 0 0.2857rem 1.1429rem 0 rgba(0, 0, 0, .08), 0 0.1429rem 0.2857rem 0 rgba(0, 0, 0, .11);
  overflow: hidden;
  max-width: 24.2857rem;
  margin: auto;
  position: relative;
}

.overlay-modal-close {
  position: absolute;
  right: 1.1429rem;
  top: 1.1429rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.hide-modal {
  display: none;
}

.show-modal {
  display: block;
}

.overlay-modal-left {
  padding: 3.4286rem 2.2857rem 0.2857rem;
  text-align: center;
  justify-content: center;
}

.ribbon {
  background-image: var(--wedding-modal-ribbon);
  background-size: contain;
  background-color: var(--white);
  text-align: center;
  font-size: 1.1429rem;
  line-height: 2.286rem;
  font-weight: var(--brand-fontweight-callout);
  margin-bottom: 0.8571rem;
}

.ribbon-content {
  display: inline-block;
  width: 90%;
  margin: auto;
}

.ribbon-content * {
  margin: 0;
}

.modal-title {
  font-weight: var(--brand-fontweight-callout);
  font-size: 1.2857rem;
  text-align: center;
  margin-bottom: 0.7143rem;
}

.error-message {
  color: var(--color-red);
  padding: 0.3571rem 0;
}

.modal-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.submit-button {
  width: 75%;
  padding: 0.7429rem 1.4286rem;
  border-radius: var(--button-border-radius);
  background-color: var(--button-bg);
  font-weight: var(--button-font-weight);
  font-size: 0.8571rem;
  color: var(--button-color-text-primary);
  text-transform: var(--button-font-transform);
  border: 0;
  cursor: pointer;
}

.submit-button:active,
.submit-button:active:focus,
.submit-button:hover {
  background-color: var(--ignite);
}

.privacy-link {
  font-size: 0.6429rem;
  color: var(--text-color);
  margin-top: 0.2143rem;
}

.privacy-link:hover {
  color: var(--text-color);
}

.label-text.lt_validation-error {
  width: initial !important;
}

input.sfly-datepicker {
  padding: 0.5714rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--form-border-radius);
  font-weight: var(--brand-fontweight-callout);
  font-size: 0.8571rem;
}

input.sfly-datepicker:hover {
  border-color: var(--text-color-light);
}

.input-box {
  margin: 0 0 1.4286rem;
  text-align: left;
}

.input-box label {
  font-size: 0.8571rem;
  padding: 0;
}

.input-box .input-field {
  height: 2.3571rem;
}

.modal-form div {
  width: 100%
}

.modal-description {
  font-size: 0.9286rem;
  line-height: 1.43;
  text-align: center;
  margin-bottom: 1.1429rem;
}

.weddingDatePicker {
  width: 100%;
  margin-bottom: 1.4286rem;
}
.PrintsSizes * {
    box-sizing: border-box;
}

.PrintsSizes {
    font-weight: var(--font-weight-regular);
    font-size: 1rem;
    color: var(--text-color);
}

.PrintsSizes h2, h3 {
    margin: 0;
    font-weight: var(--font-weight-regular);
}

.PrintsSizes h2 {
    margin-bottom: 2.8571rem;
    padding: 0 0.7143rem;
    font-size: 3.1429rem;
    text-align: center;
}

.PrintsSizes h3 {
    margin-bottom: 0.5714rem;
    font-size: 1.7771rem;
}

.PrintsSizes a {
    color: var(--text-color);
    text-decoration: none;
}

.PrintsSizes a:hover div:first-of-type {
    text-decoration: underline;
}

.PrintsSizes a:active div:first-of-type {
    font-weight: var(--brand-fontweight-interactive);
    text-decoration: none;
}

.PrintsSizesContainer {
    display: grid;
    grid-template-columns: 24% 24% auto;
    grid-gap: 3.4286rem 1.1429rem;
    width: 100%;
}

.PrintsSizesImgBox {
    height: 19.3571rem;
}

.PrintsSizesImgBox picture {
    height: 100%;
}

.PrintsSizesImgBox picture img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.PrintsSizesTableBox {
    padding: 1.7143rem 0.5714rem 0;
}

.PrintsSizesTableBox .Row {
    padding: 0.5714rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
}

.PrintsSizesTableBox .Row.TableHeader {
    border-bottom: 1px var(--sfly-border-style-solid) var(--slate-gray);
    font-weight: var(--brand-fontweight-callout);
}

.PrintsSizesTableBox .Price {
    display: inline-block;
    text-align: right;
}

.PrintsSizesTableBox .Price:last-of-type {
    width: 5.3571rem;
}

.PrintsSizesTableBox .Price.Original {
    text-decoration: line-through;
}

.PrintsSizesTableBox .Price.Sale {
    color: var(--text-color-red);
}

.LargeTablesBox {
    display: flex;
    width: 100%;
}

.LargeTablesBox > div {
    width: inherit;
}

@media (max-width: 1300px) {
    .PrintsSizesTableBox .Row {
        width: 93%;
    }
}

@media (max-width: 992px) {
    .PrintsSizesContainer {
        grid-template-columns: auto auto;
    }

    .PrintsSizesCol:last-of-type {
        grid-column: 1 / span 2;
    }

    .PrintsSizesImgBox {
        height: 18.1429rem;
    }

    .PrintsSizesTableBox .Row {
        width: 67%;
    }
}

@media (max-width: 768px) {
    .PrintsSizesTableBox .Row {
        width: 80%;
    }
}

@media (max-width: 640px) {
    .PrintsSizesTableBox .Row {
        width: 100%;
    }

    .LargeTablesBox > div + div {
        margin-left: 2.2857rem;
    }
}

@media (max-width: 480px) {
    .PrintsSizes h2 {
        font-size: 2.3571rem;
    }

    .PrintsSizesContainer {
        grid-template-columns: auto;
        grid-row-gap: 2.2857rem;
    }

    .PrintsSizesCol:last-of-type {
        grid-column: 1 / span 1;
    }

    .PrintsSizesImgBox {
        height: 22.1429rem;
    }

    .PrintsSizesTableBox .Row {
        width: 80%;
    }

    .LargeTablesBox {
        flex-direction: column;
    }

    .LargeTablesBox .HeaderSection {
        display: none;
    }

    .LargeTablesBox > div + div {
        margin-left: 0;
    }
}

.GiftCardMain {
    display: flex;
    gap: 1.7143rem;
    max-width: 91.8571rem;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5rem;
}

.GiftCardMain .LeftSection {
    flex-grow: 1;
}

.GiftCardMain .RightSection {
    flex: 0 0 30.7143rem;
}

.GiftCardMain .PictureSection {
    max-width: 100%;
    height: 0;
    padding-bottom: 50%;
    border-radius: 0.5714rem;
    margin-bottom: 1.1429rem;
    position: relative;
    background-color: var(--fog-light);
}

.GiftCardMain .PictureSection picture {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.GiftCardMain .PictureSection picture img {
    max-height: 100%;
}

.GiftCardMain .FeaturesHeading {
    margin-bottom: 0.5714rem;
    font-weight: var(--brand-fontweight-callout);
    font-size: 1.1428rem;
    line-height: 1.714rem;
}

.GiftCardMain ul.Features {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.7143rem 1rem;
    padding: 0;
    font-weight: var(--font-family-details-weight);
    font-size: 1.1428rem;
    line-height: 1.714rem;
    color: var(--text-color);
}

.GiftCardMain .Disclaimer{
    font-weight: var(--font-family-details-weight);
    font-size: 1.1428rem;
    line-height: 1.714rem;
    color: #787672;
}

.GiftCardMain .Title {
    font-family: var(--br-cms-font-family-hue);
    font-size: 1.714rem;
    line-height: 2.2857rem;
    word-break: break-word;
}

.GiftCardMain .SubSection {
    margin-bottom: 2.2857rem;
}

.GiftCardMain .AmountSection {
    margin-top: 1.1429rem;
}

.GiftCardMain .SubHeading {
    font-weight: var(--brand-fontweight-callout);
    margin-bottom: 1.1429rem;
    font-size: 1.1428rem;
    line-height: 1.714rem;
}

.GiftCardMain .AmountSection ul {
    display: flex;
    flex-direction: row;
    padding:0;
    margin: 0;
    list-style-type: none;
}

.GiftCardMain .AmountSection .AmountBox {
    padding: 0.4286rem 0.7143rem 0.5rem;
    color: var(--text-color-fog);
    margin-right: 0.5714rem;
    height: 36px;
    box-sizing: border-box;
    font-weight: var(--font-weight-regular);
    border: 0.0715rem var(--sfly-border-style-solid) var(--border-color-fog-medium);
    border-radius: var(--sfly-border-radius-medium);
}

.GiftCardMain .AmountSection .AmountBox.Selected, .GiftCardMain .AmountSection .AmountBox:hover  {
    border: var(--brand-state-hover-border-thickness) var(--sfly-border-style-solid) var(--text-color-fog);
    color: var(--text-color-fog);
    padding: 0.3571rem 0.6429rem 0.2857rem;
}

.GiftCardMain .AmountSection .AmountBox.Selected {
    font-weight: var(--font-weight-semibold);
    padding-left: 0.6071rem;
    padding-right: 0.6071rem;
}

.GiftCardMain .Calendar .DateDropdown {
    display: flex;
    flex-direction: row;
    gap: 0.5714rem;
}

.GiftCardMain .Calendar .DateDropdown > div > div{
    position: relative;
}

.GiftCardMain .DateDropdown select {
    appearance: none;
    padding: 0.4286rem 2.5714rem 0.4286rem .7143rem;
    background: transparent;
    line-height: 1.5rem;
    width: 6.2857rem;
    font-size: 1rem;
}
.GiftCardMain .DateDropdown select option:first-child {
    display: none;
}
.GiftCardMain .DateDropdown .DateColumn {
    position: relative;
}
.GiftCardMain .DateDropdown .Arrow{
    content: "";
    position: absolute;
    transform: translateY(-50%);
    border-left: 0.25rem var(--sfly-border-style-solid) transparent;
    border-right: 0.25rem var(--sfly-border-style-solid) transparent;
    border-top: 0.2857rem var(--sfly-border-style-solid) var(--text-color);
    right: 1.143rem;
    top: 50%;
    pointer-events: none;
    z-index: 2;
}

.GiftCardMain .SubSections {
   width: 28.9286rem;
   max-width: 100%;
}

.GiftCardMain .input-box {
    margin-top: 1.1429rem;
}

.GiftCardMain .input-box .input-field {
    color: var(--text-color-fog);
}

.GiftCardMain .input-box .input-field, .GiftCardMain .DateDropdown select {
    border: var(--form-border-thickness) var(--form-border-style) var(--border-color-fog-medium);
    border-radius: var(--form-border-radius);
    font-weight: var(--form-font-weight);
}

.GiftCardMain .input-box label, .GiftCardMain .DateDropdown select {
    color: var(--text-color-light);
    font-weight: var(--form-font-weight);
}

.GiftCardMain .input-box label {
    line-height: normal;
}

.GiftCardMain .input-box .input-field:focus {
    outline-color: var(--text-color-fog);
}

.GiftCardMain .input-box .input-field.validation-error {
    border-width: 0.1429rem !important;
    color: var(--text-color-fog) !important;
}

.GiftCardMain .input-box .label-text.lt_validation-error{
    color: var(--text-color-light) !important;
    width: auto;
}


.GiftCardMain .input-box .input-field.validation-error:focus {
    outline-color: var(--text-color-red);
}

.GiftCardMain .input-box .error.uig-svg-icon path {
    fill: var(--text-color-red) !important;
}

.GiftCardMain .DateDropdown select:focus-visible {
    outline: 0.0715rem solid var(--border-color-fog-medium);
    border-color: transparent;
    outline-offset: -1px;
}

.GiftCardMain .AppLink.button {
    margin-top: 1.7143rem;
    display: block;
}

.GiftCardMain .Errors {
    color: var(--text-color-red);
    font-weight: var(--brand-fontweight-callout);
}

.GiftCardMain .Errors.gift-card-amount-error{
    padding-top: 1.1429rem;
}

.GiftCardMain .Errors .Heading {
    margin-bottom: 1.1429rem;
}

.GiftCardMain .Errors ul {
    margin: 0 0 1.1429rem 1rem;
    padding: 0;
}

@media (max-width: 991px) {
    .GiftCardMain {
        flex-direction: column;
        gap: 1.714rem;
    }
    .GiftCardMain .RightSection {
        width: 100%;
        flex: unset;
    }
}

@media screen and (max-width:480px){
    .GiftCardMain .PictureSection{
        margin-bottom: 1.7143rem;
    }
}

.br-cms-layout .SplitImageBanner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    text-align: center;
}

.br-cms-layout .SplitImageBanner .image-section,
.br-cms-layout .SplitImageBanner picture img {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
}

.br-cms-layout .SplitImageBanner .priceBadge .discountPrice {
    display: inline-block;
    margin-left: 0.5714rem;
}

.br-cms-layout .SplitImageBanner.hide .priceBadge {
    display: none;
}

.br-cms-layout .SplitImageBanner .priceBadge .priceBadgeText {
    text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding-left: 3rem;
   padding-right: 2rem;
}

@media screen and (min-width:768px) {

    .br-cms-layout .SplitImageBanner.s-25-50-25 .image-section {
        flex-basis: 25%;
    }

    .br-cms-layout .SplitImageBanner.s-30-40-30 .image-section {
        flex-basis: 30%;
    }

    .br-cms-layout .SplitImageBanner.s-33-33-33 .image-section {
        flex-basis: 33.3%;
    }

    .br-cms-layout .SplitImageBanner.s-25-50-25 .content-section {
        flex-basis: calc(50% - 3.429rem);
    }

    .br-cms-layout .SplitImageBanner.s-30-40-30 .content-section {
        flex-basis: calc(40% - 3.429rem);
    }

    .br-cms-layout .SplitImageBanner.s-33-33-33 .content-section {
        flex-basis: calc(33.3% - 3.429rem);
    }
}

.br-cms-layout .SplitImageBanner .priceBadge {
    position: absolute;
    bottom: 0;
    background-color: var(--badgeBgColor);
    color: var(--badgeTextColor);
    width: 100%;
    font-size: 1.333rem;
    line-height: 2rem;
}

.br-cms-layout .SplitImageBanner .priceBadge .PriceComponent .PriceTagUnitName,
.br-cms-layout .SplitImageBanner .priceBadge .PriceComponent .PriceTagPrefixName {
    color: var(--badgeTextColor);
}

.br-cms-layout .SplitImageBanner .image-section {
    background-color: var(--color-fog-light);
}

.br-cms-layout .SplitImageBanner .content-section {
    background-color: var(--textContentBgColor);
    color: var(--textColor);
    flex-basis: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1.714rem;
}

.br-cms-layout .SplitImageBanner .image-section .priceBadge {
    font-weight: var(--brand-fontweight-callout);
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.br-cms-layout .SplitImageBanner .content-section .title {
    line-height: 3.857rem;
    width: 100%;
    word-break: break-word;
    font-family: var(--font-family-value);
}

.br-cms-layout .SplitImageBanner .content-section .subtitle {
    line-height: 2rem;
    width: 100%;
    word-break: break-word;
}

.br-cms-layout .SplitImageBanner .CtaContent {
    display: inline-block;
    width: 100%;
}

.br-cms-layout .SplitImageBanner .CtaContainer {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.429rem;
}

.br-cms-layout .SplitImageBanner .CtaContainer .AppLink.link {
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
    text-transform: var(--sfly-font-transform-interactive);
    text-decoration: none;
    color: var(--text-color);
}

.br-cms-layout .SplitImageBanner .CtaContainer .AppLink.link:hover {
    text-decoration: underline;
}

.br-cms-layout .SplitImageBanner .CtaContainer .AppLink.link::after {
    content: "";
    margin: 0 0 0.0714rem 0.2143rem;
    display: inline-block;
    width: 0.4286rem;
    height: 0.4286rem;
    border: var(--sfly-border-style-solid) var(--text-color);
    border-width: 0.143rem 0.143rem 0 0;
    border-radius: var(--sfly-border-radius-small) var(--sfly-border-radius-small) 0 0;
    transform: rotate(45deg);
}

.br-cms-layout .SplitImageBanner .content-section .price-below-cta .PriceComponent .PriceTagUnitName,
.br-cms-layout .SplitImageBanner .content-section .price-below-cta .PriceComponent .PriceTagPrefixName {
    color: var(--textColor);
}

.br-cms-layout .SplitImageBanner .content-section .price-below-cta .PriceComponent .discountPrice {
    display: inline-block;
}
.SplitImageBanner .PrintsSizesImgBox {
    height: auto;
}

@media screen and (min-width:1600px) {
    .br-cms-layout .SplitImageBanner .content-section {
        gap: 1.286rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .title {
        font-size: 3.157rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .subtitle {
        font-size: 1.333rem;
    }
}

@media screen and (min-width:1200px) and (max-width:1599px) {
    .br-cms-layout .SplitImageBanner .content-section {
        gap: 1.286rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .title {
        font-size: 2.369rem;
        line-height: 2.857rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .subtitle {
        font-size: 1.333rem;
    }
}

@media screen and (min-width:992px) and (max-width:1199px) {
    .br-cms-layout .SplitImageBanner .content-section {
        gap: 1.286rem;
    }

    .br-cms-layout .SplitImageBanner.s-33-33-33 .CtaContainer {
        flex-direction: column;
        gap: 0.714rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .title {
        font-size: 1.777rem;
        line-height: 2.643rem;
    }

    .br-cms-layout .SplitImageBanner.s-33-33-33 .content-section .subtitle {
        line-height: 2rem;
        font-size: 1.333rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .subtitle {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {

    .br-cms-layout .SplitImageBanner .content-section .title {
        margin-bottom: 0.286rem;
        font-size: 1.333rem;
        line-height: 2rem
    }

    .br-cms-layout .SplitImageBanner .content-section .subtitle {
        margin-bottom: 0.571rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .br-cms-layout .SplitImageBanner.s-30-40-30 .CtaContainer,
    .br-cms-layout .SplitImageBanner.s-33-33-33 .CtaContainer {
        flex-direction: column;
        gap: 0.429rem
    }
    .br-cms-layout .SplitImageBanner .CtaContainer{
        margin-bottom : 0.857rem
    }

    .br-cms-layout .SplitImageBanner.s-30-40-30 .title,
    .br-cms-layout .SplitImageBanner.s-33-33-33 .title {
        margin-bottom: 0.571rem;
    }

    .br-cms-layout .SplitImageBanner.s-30-40-30 .subtitle,
    .br-cms-layout .SplitImageBanner.s-33-33-33 .subtitle {
        margin-bottom: 0.857rem;
    }

    .br-cms-layout .SplitImageBanner .priceBadge {
        font-size: 0.857rem;
        line-height: 1.286rem;
        
    }
}

@media screen and (max-width:767px) {
    .br-cms-layout .SplitImageBanner {
        flex-direction: column;
    }

    .br-cms-layout .SplitImageBanner .image-section:nth-child(n+2) .priceBadge {
        top: 0;
    }

    .br-cms-layout .SplitImageBanner .content-section .title {
        margin-bottom: 0.857rem;
        font-size: 1.333rem;
        line-height: 2rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .subtitle {
        margin-bottom: 1.714rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .CtaContent+.price-below-cta {
        margin-top: 1.714rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .price-below-cta {
        margin-top: 1.714rem;
        font-size: 1rem;
        font-weight: var(--font-weight-regular);
        line-height: 1.5rem;
    }

    .br-cms-layout .SplitImageBanner.showBadge .SimpleCarousel .bottomNav {
        bottom: 5.036rem;
    }

    .br-cms-layout .SplitImageBanner .SimpleCarousel .bottomNav {
        bottom: 0.893rem;
    }
}

@media screen and (min-width:480px) and (max-width:767px) {
    .br-cms-layout .SplitImageBanner.stacked .content-section .title {
        margin-top: 1.857rem;
    }
}

@media screen and (max-width:479px) {
    .br-cms-layout .SplitImageBanner .content-section .title {
        margin-bottom: 0.857rem;

    }

    .br-cms-layout .SplitImageBanner .content-section .subtitle {
        margin-bottom: 0.857rem;
    }

    .br-cms-layout .SplitImageBanner .content-section .CtaContent+.price-below-cta {
        margin-top: 0.857rem;
    }

    .br-cms-layout .SplitImageBanner .CtaContainer {
        flex-direction: column;
    }

    .br-cms-layout .SplitImageBanner .priceBadge {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .image-section:nth-child(2) .br-cms-layout .SplitImageBanner .image-section:nth-child(n+2) .priceBadge {
        top: 0
    }

    .br-cms-layout .SplitImageBanner.showBadge .SimpleCarousel .bottomNav {
        bottom: 3.893rem;
    }

    .br-cms-layout .SplitImageBanner .SimpleCarousel .bottomNav {
        bottom: 0.893rem;
    }
}
@media screen and (min-width:768px) and (max-width:991px), (max-width:479px) {
    .br-cms-layout .SplitImageBanner .image-section .priceBadge {
        height: 2.2858rem;
    }
    
}

.disclaimer {
  font-weight: var(--font-weight-light);
  font-size: 0.8571rem;
  display: inline-block;
}

.disclaimer h4 {
  font-weight: var(--brand-fontweight-callout);
  font-size: 0.9286rem;
  margin-bottom: 0;
}

.disclaimer a {
  color: var(--color-blue);
}

.seo-footer-text .simple-content a {
  color: var(--text-color-gray);
}

.seo-footer-text .simple-content h1,
.seo-footer-text .simple-content h2,
.seo-footer-text .simple-content h3,
.seo-footer-text .simple-content h4,
.seo-footer-text .simple-content h5,
.seo-footer-text .simple-content h6 {
  color: var(--black);
}
.simple-content {
  word-break: break-word;
}
.br-cms-layout .PreloadImage {
    background: var(--sfly-color-neutrals-slate-ultra-light);
    border-radius: 0.5714rem;
    padding: 1.143rem;
    box-shadow: var(--box-shadow-1);
    margin: 1.429rem auto;
}

/* Header Section */
.br-cms-layout .PreloadImage .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.857rem;
}

.br-cms-layout .PreloadImage .header h3 {
    margin: 0;
    font-size: 1.286rem;
    font-weight: var(--sfly-font-weight-bold);
}

/* Toggle Button */
.br-cms-layout .PreloadImage .toggle-btn {
    background-color: var(--deep-carrot);
    color: var(--white);
    border: none;
    padding: 0.429rem 0.857rem;
    border-radius: 0.286rem;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
    z-index: 90000;
    margin-right: 4.571rem;
}   

/* Table Styling */
.br-cms-layout .PreloadImage table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 0.429rem;
}

.br-cms-layout .PreloadImage td {
    padding: 0.714rem;
    border-bottom: 0.0714rem solid var(--sfly-color-neutrals-slate);
    font-size: 1rem;
}

.br-cms-layout .PreloadImage .title {
    font-weight: var(--sfly-font-weight-bold);
    background-color: var(--sfly-color-neutrals-slate-light);
    width: 20%;
}

.br-cms-layout .PreloadImage .urlValues {
    max-width: 80%;
    word-break: break-word; 
    overflow-wrap: break-word;
}

/* Status Colors */
.br-cms-layout .PreloadImage .success {
    color: var(--color-green);
    font-weight: var(--sfly-font-weight-bold);
}

.br-cms-layout .PreloadImage .error {
    color: var(--text-color-red); /* #A81719 */
    font-weight: var(--sfly-font-weight-bold); 
}

.UniversalHeaderWrapper {
    display: block;
    max-width: 114.2857rem;
    margin: 0 auto 0.7143rem;
    font-size: 14px;
    /* Base font size for header should be in px only */
    /* Added the below CSS for overridng the Mobile.css file changes */
    position: unset;
    box-shadow: unset;
    border: unset;
    background: var(--white);
    height: auto;
    overflow: unset;
}

.br-cms-layout:has(.NavBarWrapper.NewSubNav .category-item>.flyout-open.hasTiles + .newVisualNav)>.overlay,
.br-cms-layout:has(.NavBarWrapper.NewSubNav .category-item>.navbar-element-container.flyout-open.hasTiles + .category-item .newVisualNav)>.overlay
{
    background-color: rgb(0, 0, 0); 
    opacity: 0.3;
    z-index: 999;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.br-cms-layout .UniversalHeaderWrapper:has(.NavBarWrapper.NewSubNav .category-item>.flyout-open.hasTiles + .newVisualNav),
.br-cms-layout .UniversalHeaderWrapper:has(.NavBarWrapper.NewSubNav .category-item>.navbar-element-container.flyout-open.hasTiles + .category-item .newVisualNav) {
    position: relative;
    z-index:  99999;
}

.UniversalHeaderWrapper * {
    box-sizing: unset;
}

.UniversalHeaderWrapper .enhanced-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.UniversalHeaderWrapper .NavBarWrapper .category-nav-wrapper .category-item .header-flyout-content-wrapper .ColumnContainer a:hover>* {
    text-decoration: underline;
    text-decoration-color: var(--text-color)
}

.UniversalHeaderWrapper .flyout-footer .flyout.footer-logos .logos-tab {
    max-width: 100%;
}

.UniversalHeaderWrapper .flyout-footer .flyout.footer-logos .logo-container {
    background-color: var(--fog-light);
    flex-direction: row;
    justify-content: center;
}

.UniversalHeaderWrapper .ToolbarWrapper *:focus:not(:focus-visible),
.UniversalHeaderWrapper .NavBarWrapper *:focus:not(:focus-visible) {
    outline: var(--brand-state-focus-outline);
}

.UniversalHeaderWrapper .flyout-footer .flyout.footer-logos .footer-logos li {
    display: flex;
    box-shadow: none;
}

.UniversalHeaderWrapper .flyout-footer .flyout.footer-logos>* {
    outline: var(--brand-state-focus-outline);
    border: none;
}

.UniversalHeaderWrapper .enhanced-toolbar .searchbar-mobile-wrapper {
    overflow-y: visible;
    overflow-x: clip;
    margin-top: 0.5em;
}

.UniversalHeaderWrapper .ToolbarWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0714rem var(--sfly-border-style-solid) var(--brand-color-border-primary);
    position: relative;
    padding-top: 0.643rem;
}

.UniversalHeaderWrapper .ToolbarWrapper.no-border {
    border-bottom: none !important;
}

.UniversalHeaderWrapper .ToolbarWrapper .logos-tab {
    border-bottom: none;
    margin-left: 1.143rem;
}

.UniversalHeaderWrapper .ToolbarWrapper .footer-logos .logos-tab {
    margin-left: 0rem;
}

.UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container .svg-logo svg,
.UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container a picture img,
.header-flyout-container .flyout-footer .logos-tab .logo-container .svg-logo svg,
.header-flyout-container .flyout-footer .logos-tab .logo-container a picture img {
    height: auto;
    width: auto;
}

.UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container a picture img,
.header-flyout-container .flyout-footer .logos-tab .logo-container a picture img {
    max-height: 2.5rem;
}

.header-flyout-container .flyout-footer .logos-tab .logo-container {
    min-height: 4.571rem;
    max-height: unset;
    column-gap: 11.429rem;
}

.UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container .brand-logo,
.UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container .brand-logo a,
.header-flyout-container .flyout-footer .logos-tab .logo-container .brand-logo,
.header-flyout-container .flyout-footer .logos-tab .logo-container .brand-logo a {
    min-width: unset;
    min-height: unset;
}

.UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container .boxRightShadow:last-child,
.brandType-INC .logos-tab .logo-container .boxRightShadow {
    box-shadow: none;
}

.UniversalHeaderWrapper .NavBarWrapper .SubNavContainer {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.UniversalHeaderWrapper .NavBarWrapper.NewSubNav .SubNavContainer {
    position: static;
}

.UniversalHeaderWrapper .NavBarWrapper .SubNavContainer .category-nav-wrapper {
    padding: 0;
    border-bottom: none;
}

.UniversalHeaderWrapper .SearchButton:hover {
    cursor: pointer;
}

.UniversalHeaderWrapper .NavBarWrapper {
    display: flex;
    margin: 0 1.714rem;
    align-items: center;
    position: relative;
}

.UniversalHeaderWrapper .NavBarDivider {
    border-bottom: 0.0715rem var(--sfly-border-style-solid) var(--sfly-color-neutrals-slate);
}


.NavBarWrapper .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer ul:not(.ColumnContent) {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-width: auto;
    max-width: unset;
    margin-right: 2.571rem;
}

.SearchComponentMobile {
    min-width: 2.1429em;
}

.hamburger-menus {
    position: fixed;
    top: 3.6429rem;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: var(--white);
    outline: var(--brand-state-focus-outline);
}

.UniversalHeaderWrapper button.uh-btn {
    background-color: initial;
    border: none;
}

#navigationMenu {
    outline: var(--brand-state-focus-outline);
}

@media screen and (max-width: 1200.5px) {
    .br-cms-layout .UniversalHeaderWrapper .searchbar-desktop-wrapper:not(#SearchBarDesktopWrapperTop) .SearchComponent {
        display: none;
    }

    .SearchComponentMobile svg {
        width: 1.4286em;
        height: 1.4286em;
        font-size: 14px;
        /*Due to In Safari The Input:matches [type="button"] overriding the font-size to 11px. Due to that adding manually font-size 14px here. It will apply to this Search component svg only not for others */
    }

    .SearchComponentMobile .CloseSearch {
        cursor: pointer;
        width: 2.7143em;
        height: 34px;
        /*Safari is overriding this height to 26px when given in REM*/
    }

    .SearchComponentMobile .CloseSearch svg {
        width: 1em;
        height: 1em;
        padding: 0.7143em 0.5714em;
    }

    .SearchComponentMobile svg path {
        fill: var(--text-color);
    }

    .SearchComponentMobile,
    .SearchComponentMobile .SearchComponentWrapper {
        display: flex;
        align-items: center;
    }

    .SearchComponentMobile .SearchComponentWrapper .searchbar-opening {
        width: 100%;
        animation: animateSearchBar 0.4s ease-in-out;
    }

    .SearchComponentMobile .SearchComponentWrapper .searchbar-closing {
        width: 0%;
        animation: animateSearchBarClose 0.4s ease-in-out;
    }

    @keyframes animateSearchBar {
        from {
            margin-left: 100%;
            width: 300%;
        }

        to {
            margin-left: 0%;
            width: 100%;
        }
    }

    @keyframes animateSearchBarClose {
        from {
            margin-left: 0%;
            width: 100%;
        }

        to {
            margin-left: 100%;
            width: 300%;
        }
    }
}


@media screen and (max-width: 991.5px) {
    .UniversalHeaderWrapper .ToolbarWrapper {
        margin-top: 0;
    }

    .UniversalHeaderWrapper .ToolbarWrapper .newX-hamburger-title .logos-tab {
        margin-left: 1.714rem
    }

    .UniversalHeaderWrapper .ToolbarWrapper .hamburger-mobileonly svg {
        width: 1.5714rem;
        cursor: pointer;
        height: auto;
        max-height: 1.1429rem;
        padding: 1.0714rem 0.5714rem 0 0.1429rem;
    }

    .UniversalHeaderWrapper .ToolbarWrapper .hamburger-mobileonly svg path {
        fill: var(--text-color);
    }

    .UniversalHeaderWrapper .SearchComponentMobile .search-bar .text_box_wrapper {
        height: 2.4286em;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .search-bar li#header_suggetions {
        padding: 0 1.2em;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .search-bar .dropdown-menu-comp {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .search-bar .dropdown-menu-comp ul {
        width: 98%;
        max-width: none;
    }

    .UniversalHeaderWrapper .hamburger-menus .additional-logos .visit-our-new-partner {
        height: 1.0714rem;
        width: 9.2143rem;
        color: var(--text-color);
        font-weight: var(--font-weight-medium);
        font-size: 0.8571rem;
        letter-spacing: 0;
        line-height: 1.0714rem;
        margin-right: 0.5rem;
        text-align: right;
    }

    .UniversalHeaderWrapper .hamburger-menus .additional-logos a {
        display: flex;
        align-items: center;
    }

    .UniversalHeaderWrapper .hamburger-menus .additional-logos a .spoonflower-logo>svg {
        width: 7.1429rem !important;
        height: 1.7143rem !important;
        position: relative;
        margin-right: 0.5714rem;
    }

    .UniversalHeaderWrapper .hamburger-menus .additional-logos a .open-window-logo>svg {
        width: 1.1429rem;
        height: 1.1429rem;
    }

    .UniversalHeaderWrapper .collapsed-nx {
        height: fit-content;
        padding: 0;
        top: 0;
    }

    .UniversalHeaderWrapper .expanded-nx {
        height: 3.2684rem;
        top: 0;
    }

    .UniversalHeaderWrapper .newx-hamburger-mobileonly {
        display: flex;
    }

    .UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container a picture img,
    .header-flyout-container .flyout-footer .logos-tab .logo-container a picture img {
        max-height: 1.429rem;
    }

    .UniversalHeaderWrapper .ToolbarWrapper .logos-tab .logo-container .svg-logo svg,
    .UniversalHeaderWrapper .ToolbarWrapper .newX-hamburger-title .logos-tab .newx .logo-container .svg-logo svg {
        max-width: var(--MaxWidthMWebHeader);
    }

    .UniversalHeaderWrapper .footer-logos .logos-tab .logo-container .svg-logo svg {
        max-width: var(--MaxWidthMWebHeaderSubLogos);
    }

    .br-cms-layout .UniversalHeaderWrapper .searchbar-mobile-wrapper:not(#SearchBarDesktopWrapperTop) .SearchComponent {
        display: none;
    }
}

@media screen and (min-width: 1201px) {
    .br-cms-layout .UniversalHeaderWrapper .searchbar-desktop-wrapper:not(#SearchBarDesktopWrapperTop) .SearchComponentMobile {
        display: none;
    }

    .UniversalHeaderWrapper .SearchComponentWrapper.collapsed.collapsed-nx {
        display: none;
    }
}

@media screen and (max-width: 991.5px) and (min-width: 769px) {
    .UniversalHeaderWrapper .ToolbarWrapper .uni-header-menu-items {
        margin-top: -0.6rem;
    }

    .UniversalHeaderWrapper .ToolbarWrapper {
        margin-top: 0.429rem;
    }

    .UniversalHeaderWrapper .hamburger-menus {
        top: 4.5714rem;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .search-bar .text_box_wrapper {
        min-width: 17.2489em;
    }

    .UniversalHeaderWrapper .partner-logo {

        margin-right: 1.714rem;
    }
}

@media screen and (max-width: 768.5px) {
    .UniversalHeaderWrapper {
        overflow-y: unset;
        overflow-x: clip;
    }
    .UniversalHeaderWrapper .NavBarWrapper {
        padding: 0;
    }

    .UniversalHeaderWrapper .NavBarWrapper .SubNavContainer {
        width: calc(100% - 3rem);
    }

    .UniversalHeaderWrapper .NavBarWrapper .SubNavContainer .cat-list-mobile-container {
        width: 98%;
    }

    .UniversalHeaderWrapper .expanded-nx {
        height: 2.199em;
        top: 0;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .SearchComponentWrapper.expanded {
        position: absolute;
        left: 0;
        width: 99%;
        padding: 0.6429em 0.2143em;
        background-color: white;
        z-index: 1000;
    }

    .UniversalHeaderWrapper .partner-logo {
        margin-right: 0.929rem;
    }
}

@media screen and (max-width: 480.5px) {
    .UniversalHeaderWrapper .SearchComponentMobile .SearchComponentWrapper.expanded {
        width: 98%;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .search-bar .dropdown-menu-comp ul {
        width: 94%;
    }

    .UniversalHeaderWrapper .partner-logo {
        display: none;
    }
}

@media screen and (max-width: 991.5px) {
    .UniversalHeaderWrapper.hamburgerMenuExpanded {
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: var(--white);
        overflow: hidden;
        height: 100%;
        z-index: 1099;
    }

    .UniversalHeaderWrapper .NavBarWrapper.NoBorder {
        border: none;
    }

    .UniversalHeaderWrapper .CategoryNavExperience-2 {
        display: none;
    }

    .UniversalHeaderWrapper .universal-header-hamburger {
        width: 1.5714rem;
        height: 1.2857rem;
        align-self: center;
        padding: 0 0.7857rem;
    }

    .Drawer.newx-hamburger-mobileonly .footer-logos .logo-container {
        background-color: var(--fog-light);
        display: flex;
        min-height: 3.429rem;
        max-height: none;
        justify-content: center;
        column-gap: 2.857rem;
    }

    .Drawer.newx-hamburger-mobileonly .footer-logos li,
    #headerContainer .newx-hamburger-mobileonly .footer-logos .logo-container>li.brand-logo {
        display: flex;
        box-shadow: none;
    }

    .Drawer.newx-hamburger-mobileonly .hamburger-menus {
        top: 0;
    }

    .Drawer.newx-hamburger-mobileonly .hamburger-menus .newX-hamburger-title {
        padding: 1.286rem 0.7857rem 0.286rem 0;
        padding-left: 0px;
        align-items: center;
    }

    .Drawer.newx-hamburger-mobileonly .hamburger-menus .newX-hamburger-title .svg-logo svg {
        margin-top: 0 !important;
    }

    .Drawer.newx-hamburger-mobileonly .newX-hamburger-title span.close-icon {
        padding-right: 0.7143rem;
    }

    .Drawer.newx-hamburger-mobileonly .newX-hamburger-title span.close-icon svg {
        fill: var(--text-color-fog);
    }

    .Drawer.newx-hamburger-mobileonly .hamburger-menus .hamburger-menu-wrapper-container {
        height: auto;
    }

    .UniversalHeaderWrapper .searchbar-desktop-wrapper {
        display: none;
    }

    .UniversalHeaderWrapper .searchbar-mobile-wrapper {
        display: initial;
    }

    .UniversalHeaderWrapper .logos-tab.newx .logo-container .brand-logo {
        min-height: auto;
        min-width: auto;
    }

    .UniversalHeaderWrapper .partner-logo .costco-logo-tooltip {
        display: none;
    }

}

@media screen and (min-width: 992px) {

    .UniversalHeaderWrapper #NavBarWrapperContainer:not(.noNavBar) {
        min-height: 4rem;
    }

    .br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent {
        display: none;
    }

    .UniversalHeaderWrapper .newx-hamburger-mobileonly {
        display: none !important;
    }

    .UniversalHeaderWrapper .searchbar-desktop-wrapper {
        display: initial;
    }

    .UniversalHeaderWrapper .searchbar-mobile-wrapper {
        display: none;
    }


    .UniversalHeaderWrapper .partner-logo {
        position: relative;
    }

    .UniversalHeaderWrapper .partner-logo:hover .costco-logo-tooltip {
        visibility: visible;
        z-index: 1;
    }

    .UniversalHeaderWrapper .partner-logo .costco-logo-tooltip {
        font-size: 1rem;
        font-weight: var(--font-weight-regular);
        color: var(--text-color-fog);
        letter-spacing: 0;
        line-height: 1.5rem;
        border-radius: var(--sfly-border-radius-medium);
        background-color: var(--white);
        position: absolute;
        width: max-content;
        max-width: 27.786rem;
        top: calc(100% + 0.857rem);
        left: calc(50% - 0.8rem);
        padding: 1.143rem;
        border: 0.071rem var(--sfly-border-style-solid) var(--slate-gray);
        transform: translateX(-50%);
        visibility: hidden;
        z-index: 1000 !important;
    }

    .UniversalHeaderWrapper .partner-logo .costco-logo-tooltip::before,
    .UniversalHeaderWrapper .partner-logo .costco-logo-tooltip::after {
        content: "";
        position: absolute;
        border-left: 0.714rem var(--sfly-border-style-solid) transparent;
        border-right: 0.714rem var(--sfly-border-style-solid) transparent;
        bottom: 100%;
        left: 50%;
        font-size: 1rem;
        transform: translateX(-50%);
        margin-left: 0.714rem;
    }

    .UniversalHeaderWrapper .partner-logo .costco-logo-tooltip::before {
        border-bottom: 0.714rem var(--sfly-border-style-solid) var(--slate-gray);

    }


    .UniversalHeaderWrapper .partner-logo .costco-logo-tooltip::after {
        border-bottom: 0.714rem var(--sfly-border-style-solid) var(--white);
        margin-bottom: -0.143rem;
        
    }

}

@media screen and (max-width: 768.5px) {
    .br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent {
        display: block;
    }

    .UniversalHeaderWrapper .SearchComponentMobile .expanded-nx {
        position: absolute;
        left: 0;
        width: 99%;
        padding: 0.6429em 0.2143em;
        background-color: white;
        z-index: 998;
    }
}

@media screen and (max-width:991.5px) {
    .br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper {
        margin: 0.571rem 0.857rem 0.429rem;
    }
    .UniversalHeaderWrapper .partner-logo .svg-icon svg {
        padding-top: 0.6rem;
    }
    .UniversalHeaderWrapper .costco-logo .svg-icon svg {
        height: 2.105rem;
        width: 7.143rem;
    }
    .UniversalHeaderWrapper .amazon-logo .svg-icon svg {
        height: 2.86rem;
        width: 4.46rem;
    }
}

@media screen and (min-width: 992px) {
    .UniversalHeaderWrapper .partner-logo {
        margin-right: 1.734rem;
    }

    .UniversalHeaderWrapper .costco-logo .svg-icon svg {
        height: 2.499rem;
        width: 8.48rem;
        padding-top: 0.429rem;
    }

    .UniversalHeaderWrapper .amazon-logo .svg-icon svg {
        height: 2.86rem;
        width: 4.46rem;
    }

    .UniversalHeaderWrapper .partner-logo .svg-icon {
        display: inline-block;
    }

}

@media screen and (max-width: 991.5px) and (min-width: 769px) {
    .UniversalHeaderWrapper .partner-logo {
        margin-right: 1.714rem;
    }
}

.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .dropdown-menu-comp,
.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .dropdown-menu-comp ul,
.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .dropdown-menu-comp,
.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .dropdown-menu-comp ul {
    width: 100%;
    max-width: 100%;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop,
.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .text_box_wrapper .text_box,
.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .text_box_wrapper .text_box {
    flex: 1;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .text_box_wrapper .text_box,
.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .text_box_wrapper .text_box {
    margin-left: 0.857rem;
}

.br-cms-layout .UniversalHeaderWrapper .text_box_wrapper .text_box:focus {
    border-width: 0px;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .text_box_wrapper .svg_icon_wrapper .svg-icon-main svg,
.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .text_box_wrapper .svg_icon_wrapper .svg-icon-main svg {
    width: 1.143rem;
    height: 1.143rem;
    padding: 0;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .text_box_wrapper .svg_icon_wrapper,
.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .text_box_wrapper .svg_icon_wrapper {
    height: 2.571rem;
    width: 1.143rem;
    margin-right: 0.857rem;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar .text_box_wrapper,
.br-cms-layout .UniversalHeaderWrapper .mWebsearchbar-wrapper .SearchComponent .search-bar .text_box_wrapper {
    height: 2.571rem;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponentMobile {
    display: none;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent {
    display: flex;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar {
    flex: 1;
    margin-right: 1.143rem;
    margin-left: 1.686rem;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .search-bar,
.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper #SearchBarDesktopWrapperTop .SearchComponent .text_box_wrapper {
    width: 100%;
    min-width: 0;
}

.br-cms-layout .UniversalHeaderWrapper .ToolbarWrapper .SearchBarDektopFullWidth:not(.noSearchBar){
    width: 100%;
}
.Drawer .Drawer__checkbox {
    display: none;
}
.Drawer .Drawer__checkbox:checked ~ .Drawer__overlay {
    display: block;
    opacity: 1;
}
.Drawer .Drawer__checkbox:checked ~ .Drawer__container {
    visibility: visible;
    transform: translate3d(0, 0, 0) !important;
}
.Drawer .Drawer__overlay {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
.Drawer .Drawer__container {
    position: fixed;
    visibility: hidden;
    background: white;
    transition: all;
    box-shadow: 0 0 0.7143rem 0.3571rem rgba(0, 0, 0, 0.1);
}
.Drawer.animate {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    0% {
      transform: translateY(2rem);
    }
    100% {
      transform: translateY(0);
    }
  }

.brandHighlights {
    max-width: 85.7143rem;
    background-color: var(--brand-highLights-bg-color);
    color: var(--text-color-fog);
    margin: 0 auto;
}

.brandHighlights .innerPadding {
    padding: 2.8572rem 1.7143rem;
}

.brandHighlights .brandHighlightsMainTitle {
    line-height: 2.8572rem;
    font-size: 2.3572rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 2.8572rem;
}

.brandHighlights.Center {
    text-align: center;
}

.brandHighlights.Left {
    text-align: left;
}

.brandHighlights.Right {
    text-align: right;
}

.brandHighlights .brandHighlightsSection {
    width: 33%;
}

.brandHighlights .desktopContent {
    display: flex;
}

.brandHighlights .desktopContent .brandHighlightsSection .brandImage {
    margin-bottom: 1.1429rem;
}

.brandHighlights .desktopContent .brandHighlightsSection .brandTitle {
    font-weight: var(--font-weight-bold);
    line-height: 2rem;
    margin-bottom: 0.5715rem;
    font-size: 1.3333rem;
}

.brandHighlights .desktopContent .brandHighlightsSection .brandDescription {
    font-weight: var(--font-weight-regular);
    line-height: 1.5rem;
    font-size: 1rem;
}

.brandHighlights .desktopContent .brandHighlightsSection .brandImage > Picture {
    max-width: 100%;
}

.brandHighlights .desktopContent .brandHighlightsSection .brandImage > Picture > img {
    max-width: 7.143rem;
    min-width: 1.5714rem;
    min-height: 1.5714rem;
    max-height: 7.143rem;
}

.brandHighlights .desktopContent > div:first-child {
    padding-right: 1.7143rem;
    border-right: 1px var(--sfly-border-style-solid) var(--border-color-fog-medium);
}

.brandHighlights .desktopContent > div:nth-child(2) {
    padding: 0 1.7143rem;
    border-right: 1px var(--sfly-border-style-solid) var(--border-color-fog-medium);
}

.brandHighlights .desktopContent > div:last-child {
    margin-left: 1.7143rem;
}

.brandHighlights .brandDescription.m-web {
    display: none;
}

@media screen and (max-width: 768px)  {
    .brandHighlights {
        max-width: 34.2858rem;
    }
    .brandHighlights .brandHighlightsMainTitle {
        margin-bottom: 1.7143rem;
    }
    .brandHighlights .brandHighlightsSection {
        width: 100%;
    }
    .brandHighlights .brandDescription.desktop {
        display: none;
    }

    .brandHighlights .desktopContent {
        display: block;
    }

    .brandHighlights .brandDescription.m-web {
        display: unset;
    }

    .brandHighlights .desktopContent > div:first-child {
        padding-right: 0;
        padding-bottom: 2.8572rem;
        border-bottom: 1px var(--sfly-border-style-solid) var(--border-color-fog-medium);
        border-right: 0;
    }
    
    .brandHighlights .desktopContent > div:nth-child(2) {
        padding: 2.8572rem 0;
        border-bottom: 1px var(--sfly-border-style-solid) var(--border-color-fog-medium);
        border-right: 0;
    }
    
    .brandHighlights .desktopContent > div:last-child {
        padding-top: 2.8572rem;
        margin-left: 0;
    }


}
@media (min-width: 769px) {
  .SpecialOffer .header {
    --header: 14px;
  }
}

@media (max-width: 768px) {
  .SpecialOffer .header {
    --header: 12px;
  }
}

.SpecialOffers.text-only,
.SpecialOffer.text-only .header a,
.SpecialOffer .promo-text,
.SpecialOffer .cta,
.SpecialOffer .details {
  --text-only-header: 18px;
  --cta-size: 14px;
  --standard-size: 12px;
}

.SpecialOffer {
  display: flex;
  margin: 10px auto;
  border: 1px var(--sfly-border-style-solid) var(--light-grey-2);
  border-radius: 8px;
  width: 284px;
  min-height: 458px;
  height: calc(100% - 20px);
  flex-flow: column nowrap;
  padding: 0 5px 8px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: stretch;
  font-weight: unset;
}

.SpecialOffer .footer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  flex: 1 0 auto;
}

.SpecialOffer.text-only {
  justify-content: center;
  padding: 8px;
  align-items: center;
  text-align: center;
}

.SpecialOffer picture {
  display: flex;
  justify-content: stretch;
}

.SpecialOffer.special {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 0 100%;
  align-items: center;
}

.SpecialOffer em {
  display: flex;
  justify-content: center;
}

.SpecialOffer em:after {
  content: '*';
  margin: 0;
}

.SpecialOffer .header {
  font-size: var(--header);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-color: var(--text-color-gray);
  border-radius: 8px 8px 0 0;
  padding: 5px;
  text-align: center;
  margin: 0 -5px;
  min-height: 44px;
}

.SpecialOffer .header.header-color {
  background-color: var(--header-color);
}

.SpecialOffer .header a {
  line-height: 1.2;
  color: white;
  text-decoration: none;
  font-size: var(--header);
  font-weight: var(--brand-fontweight-interactive);
}


.SpecialOffer.text-only .header {
  display: flex;
  background-color: unset;
  font-size: var(--text-only-header);
  margin: 0 0 5px 0;
  text-transform: var(--sfly-font-transform-lettercase);
  font-weight: var(--brand-fontweight-callout);
  justify-content: flex-end;
  flex: 1 0 auto;
}

.SpecialOffer.text-only .header a {
  color: var(--brand-color-border-primary);
  font-size: var(--text-only-header);
  font-weight: var(--brand-fontweight-interactive);
}

.SpecialOffer .promo-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 14px;
}

.SpecialOffer .promo-text {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0.7143rem auto;
  font-size: var(--standard-size);
  text-decoration: none;
  color: var(--text-color-light);
  font-weight: var(--brand-fontweight-callout);
  word-break: break-word;
}

.SpecialOffer .uig-svg-icon {
  width: 1.5714rem;
  height: 1.5714rem;
}

.SpecialOffer .uig-svg-icon path {
  fill: var(--color-green);
}

.SpecialOffer .promo-message {
  display: flex;
  padding: 0.3571rem;
  margin-bottom: 0.3571rem;
  text-transform: var(--sfly-font-transform-lettercase);
}

.SpecialOffer .promo-message.success {
  color: var(--color-green);
}

.SpecialOffer .promo-message.error {
  color: var(--color-red);
}

.SpecialOffer .Loading {
  margin-bottom: 0.3571rem;
}

.SpecialOffer .Loading .indicator {
  width: 1.1429rem;
  height: 1.1429rem;
  border: var(--sfly-border-style-solid) 0.2143rem transparent;
}

.SpecialOffer .Loading p {
  margin: 0.3571rem;
  text-transform: var(--sfly-font-transform-lettercase);
}

.SpecialOffer .cta,
.SpecialOffer .details {
  display: flex;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  font-weight: var(--brand-fontweight-interactive);
}

.SpecialOffer .cta {
  color: var(--text-color-light);
  font-size: var(--cta-size);
  text-transform: var(--sfly-font-transform-interactive);
  text-align: center;
  padding-top: 0.7143rem;
}

.SpecialOffer .details {
  color: var(--color-blue);
  font-size: var(--standard-size);
  margin-bottom: 0.5714rem;
}

.SpecialOffer img {
  display: flex;
  flex: 1 1 auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: auto 1/1; /* '1/1' is to reserve the space in 1:1 ratio while image loading and 'auto' is to be overriden with the image dimensions once the image is downloaded.*/
}

.SpecialOffer:hover {
  box-shadow: 0 0.3571rem 1.0714rem rgba(0, 0, 0, 0.3);
}
.exp-manager-popup-view-cell {
  display: contents;
  text-align: center;
  padding: 1vw;
  width: 30%;
}

.exp-manager-popup-view {
  border: 1px var(--sfly-border-style-solid) #a49797;
  padding: 1vw;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 1vh;
  height: 20vh;
  margin: auto;
  display: flex;
  justify-content: center;
  width: 50%;
}

.exp-manager-popup-view-img {
  margin-right: 2rem;
}

.exp-manager-popup-view-dummy-btn {
  opacity: 0.5;
}

.exp-manager-popup-view .popup-modal {
  padding: unset;
}

.PricingTable {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column nowrap;
}

.PricingTable h3 {
    margin-bottom: var(--spacer-unit);
    font-size: 1.7143rem;
}

.PricingTable table {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-regular);
    color: var(--text-color);
    box-sizing: border-box;
    border: 0;
}

.PricingTable tr {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.PricingTable th {
    text-align: left;
    font-weight: var(--font-weight-regular);
    padding: var(--spacer-unit);
    box-sizing: border-box;
    border-bottom: 0.0714rem var(--sfly-border-style-solid) var(--light-grey-2);
}

.PricingTable td {
    padding: var(--spacer-unit);
}

.PricingTable td span:nth-child(2) {
    margin-left: var(--spacer-unit);
    color: var(--color-red);
}

.PricingTable td span:nth-child(1) {
    text-decoration: line-through;
}
.navigation * {
  box-sizing: border-box;
}

.navigation {
  font-size: calc(26px + (26 - 18) * ((100vw - 991px) / (1600 - 991)));
}


.navigation:not(.nav-accordion) {
  margin-top: 1.4286rem;
  margin-bottom: 1.2em;
  padding: 1.0714rem 2.1429rem 0.3571rem;
  background-color: #ebebeb;
  font-weight: var(--font-weight-regular);
}

.navigation.nav-accordion {
  border: 1px var(--sfly-border-style-solid) var(--light-grey-2);
  border-width: 0.0714rem 0;
}

.navigation h3.nav-heading {
  line-height: 1.215em;
  font-weight: var(--font-weight-light);
  margin: 0;
  font-size: 0.85em;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionTitle,
.navigation.nav-accordion .SingleAccordion .SingleAccordionContent .list-items {
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionTitle {
  font-size: 1.3329rem;
  align-items: center;
  padding: 0.7143rem 0;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionTitle .plus-icon,
.navigation.nav-accordion .SingleAccordion .SingleAccordionTitle .minus-icon {
  margin: 0 0.9291rem;
  width: 1.2857rem;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionTitle>div {
  padding-left: 0;
  width: 85%;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionContent {
  margin: 0 0 1.4286rem;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionContent .list-items {
  font-size: 1rem;
  margin: 0.2149rem 0 0;
}

.navigation.nav-accordion .SingleAccordion .SingleAccordionContent .list-items li {
  margin-left: 0.1429rem;
}

.navigation ul.list-items {
  font-size: 0.55em;
  line-height: 1.7em;
  list-style-type: none;
  padding-inline-start: 0;
}

.navigation .list-items li a,
.navigation .dropdown-list-items li a {
  text-decoration: none;
  color: var(--text-color-gray-light);
}

.navigation .list-items li a:hover,
.navigation .dropdown-list-items li a:hover,
.navigation .dropdown-list-items li:hover {
  text-decoration: underline;
}

.navigation .dropdown.mobile-only {
  display: none;
}

.navigation .dropdown .nav-selected-item {
  position: relative;
  height: 2.5714rem;
  width: 20.1429rem;
  border: var(--form-border-thickness) var(--form-border-style) var(--text-color-fog-medium);
  border-radius: var(--form-border-radius);
  background-color: var(--bg-color-white);
  margin: 0 auto;
}

.navigation .dropdown .nav-selected-item span {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.navigation .dropdown .dropdown-list-items li {
  margin-left: 0.8571rem;
  padding: 0.4857rem 0 0.5863rem;
}

.navigation .dropdown-list-items li:hover {
  width: 20.072rem;
  border-radius: var(--brand-state-hover-border-radius);
  background-color: var(--light-fog-gray);
  margin-left: -1.4286rem;
  padding: 0.4857rem 0 0.5863rem 2.2857rem;
}

.navigation .dropdown .nav-selected-item span.nav-selected-value,
.navigation .dropdown .dropdown-list-items li {
  color: var(--text-color);
  font-weight: var(--font-weight-regular);
  font-size: 1rem;
  line-height: 1.5;
}

.navigation .dropdown .nav-selected-item span.nav-selected-value {
  left: 0.5714rem;
}

.navigation .dropdown .nav-selected-item span.caret-down {
  right: 0.5714rem;
  border-top: 4px dashed;
  border-right: 4px var(--sfly-border-style-solid) transparent;
  border-left: 4px var(--sfly-border-style-solid) transparent;
}

.navigation .dropdown .nav-selected-item span.caret-up {
  right: 0.5714rem;
  border-bottom: 4px dashed;
  border-right: 4px var(--sfly-border-style-solid) transparent;
  border-left: 4px var(--sfly-border-style-solid) transparent;
}

.navigation .dropdown .dropdown-list-items {
  max-height: 27.1429rem;
  width: 20.072rem;
  border: 1px var(--sfly-border-style-solid) var(--text-color-fog);
  border-radius: 0 0 0.2857rem 0.2857rem;
  margin: 0 auto;
  z-index: 999;
  background-color: var(--bg-color-white);
  padding: 1.1429rem 0.8571rem 1.1429rem 1.4286rem;
  position: absolute;
  left: 50%;
  top: 98%;
  transform: translate(-50%, 0);
  overflow-y: scroll;
  overflow-x: hidden;
  list-style-type: none;
}

.navigation .dropdown .dropdown-list-items .tick {
  display: inline-block;
  transform: rotate(45deg);
  height: 0.7143rem;
  width: 0.4286rem;
  margin-left: -1.5714rem;
  margin-right: 1.1429rem;
  border-bottom: 0.1429rem var(--sfly-border-style-solid) var(--brand-color-border-primary);
  border-right: 0.1429rem var(--sfly-border-style-solid) var(--brand-color-border-primary);
}

.navigation .dropdown .dropdown-list-items .tick+span,
.navigation .dropdown .dropdown-list-items .tick+a {
  font-weight: var(--font-weight-semibold);
}

@media screen and (min-width: 1600px) {
  .navigation {
    font-size: 1.8571rem;
  }
}

@media screen and (max-width: 1599px) {
  .navigation h3.nav-heading {
    font-size: 0.65em;
  }

  .navigation ul.list-items {
    font-size: 0.4em;
    line-height: 1.7em;
  }
}

@media screen and (max-width: 1200px) {
  .navigation h3.nav-heading {
    font-size: 0.75em;
  }

  .navigation ul.list-items {
    font-size: 0.45em;
    line-height: 1.7em;
  }
}

@media screen and (max-width: 991px) {
  .navigation {
    font-size: calc(18px + (26 - 18) * ((100vw - 768px) / (991 - 768)));
  }

  .navigation h3.nav-heading {
    font-size: 1.1em;
  }

  .navigation ul.list-items {
    font-size: 0.64em;
    line-height: 1.7em;
  }
  .navigation.Desktop{
    display:none;
  }
}

@media screen and (min-width: 769px) {

  .sn-sticky {
    position: fixed;
    overflow-y: scroll;
    scrollbar-width: none;
    /* For Firefox */
  }

  .sn-bottom {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
  }

  .sn-parent {
    display: flex;
    height: 100%;
  }

  .sn-sticky::-webkit-scrollbar,
  .sn-bottom::-webkit-scrollbar {
    display: none;
    /* For Chrome & Safari */
  }

  .navigation.nav-accordion {
    margin-bottom: -0.0714rem;
  }
  .navigation.MWeb{
    display:none !important;
  }

  .sidenav-container.sn-sticky {
    position: fixed;
    width: 17.072rem;
    overflow-y: scroll;
    height: 100%;
    scrollbar-width: none;
    /* For Firefox */
  }

  .sidenav-container.sn-sticky::-webkit-scrollbar {
    display: none;
    /* For Chrome & Safari */
  }
}

@media screen and (max-width: 768px) {
  .navigation {
    font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (767 - 320)));
  }
 
  .navigation h3.nav-heading {
    text-align: center;
  }

  .navigation.nav-accordion {
    border: none;
    margin: 1.7143rem auto;
  }

  .navigation ul.list-items.desktop-only-sidenav,
  .navigation.desktop-only-sidenav,
  .navigation.nav-accordion .SingleAccordion {
    display: none;
  }

  .navigation .dropdown.mobile-only {
    display: block;
    position: relative;
  }

  .navigation select.dropdown {
    width: 50%;
    display: block;
    margin: 1em auto;
    background: var(--bg-color-white);
    border: var(--form-border-thickness) var(--form-border-style) #aaa;
    padding: 5px;
    font-weight: var(--form-font-weight);
  }

  .sidenav-container {
    width: auto;
  }
}

@media screen and (max-width: 480px) {
  .navigation select.dropdown {
    width: 80%;
  }
}

@media screen and (min-width: 992px) {
  .navigation.MWeb{
    display:none !important;
  }
  .navigation.MobileAndTablet{
    display: none !important;
  }
}


.OffsetBlock * {
	box-sizing: border-box;
}

.OffsetBlock {
	display: flex;
	min-height: 17.8571rem;
	padding: 1.1429rem 0;
	padding-top: 6.4286rem;
}

.BlockContent {
    display: flex;
	justify-content: space-between;
	width: 100%;
}

.BlockContent.offsetRight {
    flex-direction: row;
}

.BlockContent.offsetLeft {
    flex-direction: row-reverse;
}

.OffsetBlock .ImageBlock {
	max-width: 50%;
}

.OffsetBlock .BlockContent.offsetLeft .OffsetBlockContent,
.OffsetBlock .BlockContent.offsetRight .OffsetBlockContent {
	background-color: var(--light-fog-gray);
	width: calc(50% + 5.7143rem);
	z-index: 1;
	margin-top: -5.7143rem;
	height: fit-content;
}

.OffsetBlock .BlockContent.offsetRight .OffsetBlockContent {
	margin-right: -5.7143rem;
}

.OffsetBlock .BlockContent.offsetLeft .OffsetBlockContent {
	margin-left: -5.7143rem;
}

.OffsetBlock .CopyInner {
	margin: 2.8571rem 5.1429rem;
}

.OffsetBlock .Title {
    font-weight: var(--brand-fontweight-callout);
	color: var(--text-color-fog);
	margin: 0;
	font-size: 3.608rem;
}

.OffsetBlock .Paragraph {
    font-weight: var(--font-weight-regular);
	color: var(--text-color-fog);
	font-size: 1.5234rem;
	margin: 1.1429rem 0;
}

.OffsetBlock .Cta {
    font-weight: var(--font-weight-semibold);
	color: var(--text-color-fog);
	font-size: 1.1429rem;
	text-transform: var(--sfly-font-transform-interactive);
	text-decoration: none;
}

@media screen and (max-width: 1300px) {
	.OffsetBlock .CopyInner {
		margin: 2.8571rem 2.8571rem;
	}
}

@media screen and (max-width: 1200px) {
	.OffsetBlock .Title {
		font-size: 2.7074rem;
	}

	.OffsetBlock .Paragraph {
		font-size: 1.5234rem;
	}
}

@media screen and (max-width: 1050px) {
	.OffsetBlock .Title {
		font-size: 2.7074rem;
	}

	.OffsetBlock .Paragraph {
		font-size: 1.1429rem;
	}
}

@media screen and (max-width: 984px) {
	.OffsetBlock .CopyInner .Title {
		font-size: 2.2857rem;
		line-height: initial;
	}
}

@media screen and (max-width: 760px) {
    .OffsetBlock {
		margin: auto;
		padding: 1.1429rem 0;
	}

	.OffsetBlock .BlockContent.offsetLeft,
	.OffsetBlock .BlockContent.offsetRight {
		flex-direction: column-reverse;
	}

	.OffsetBlock .BlockContent.offsetLeft .OffsetBlockContent,
	.OffsetBlock .BlockContent.offsetRight .OffsetBlockContent {
		width: 100%;
		z-index: unset;
		margin-left: unset;
		margin-top: unset;
		height: unset;
	}

    .OffsetBlock .ImageBlock {
		position: unset;
		height: auto;
		right: auto;
		max-width: 100%;
        width: 100%;
	}

	.OffsetBlock .ImageBlock img {
		width: 100%;
	}
}
.Accordion {
    margin: 0 1.714rem;
}

.Accordion * {
    box-sizing: border-box;
}

.Accordion .accordion-title {
    margin-bottom: 1.7143rem;
    font-size: 2.3686rem;
}

.Accordion .accordion-sub-title {
    margin-bottom: 2.2857rem;
    font-size: 1.3329rem;
}

.Accordion .SingleAccordion + .SingleAccordion { 
    border-top: 0.0714rem var(--sfly-border-style-solid) var(--border-color-fog-medium);
}

@media screen and (max-width: 768px) {
    .Accordion .accordion-title.cms-heading {
        margin-bottom: 1.1429rem;
        font-size: 1.7771rem;
        line-height: initial;
    }

    .Accordion .accordion-sub-title {
        margin-bottom: 1.1429rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .Accordion .accordion-title.cms-heading {
        font-size: 1.3329rem;
    }
}

.FragmentContent {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    align-content: center;
    padding: 5rem;
}
.TableWrapper {   
    overflow-x: auto;
}

.TableWrapper .TableContainer {
    width: calc(var(--dynamic-coloumns) * 18.7143rem); 
    padding: 0 1.7143rem;
    margin: 0 auto;
}

.TableWrapper .TableContainer .TableRow {
    display: grid;
    grid-template-columns: repeat(var(--dynamic-coloumns), 18.7143rem);
    grid-auto-rows: minmax(7.4286rem, auto);
}

.TableWrapper .TableContainer .RowBorder {
    border-bottom: .0714rem var(--sfly-border-style-solid) var(--text-color-fog-medium);
}

.TableWrapper .TableContainer .TableRow .CellContent {
    padding: 1.1429rem;
    color: var(--text-color-fog);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.TableWrapper .TableContainer .TableRow .CellContent a:not(.button) {
    color: var(--text-color-fog);
}

.TableWrapper .TableContainer .TableRow .CellContent a {
    text-decoration: none;
}

.TableWrapper .TableContainer .TableRow .CellContent.BgColour {
    background-color: var(--fog-light) ;
}

.TableWrapper .TableContainer .TableRow .CellContent.AlignContentLeft {
    justify-content: start;
}

.TableWrapper .TableContainer .TableRow .CellContent .Title,
.TableWrapper .TableContainer .TableRow .CellContent.BgColour .TitelAndSubtitle .Title {
    font-weight: var(--font-weight-semibold);
    font-size: 1.7771rem;
    line-height: 2.6429rem;
    align-self: center;
    padding-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
}

.TableWrapper .TableContainer .TableRow .CellContent.BgColour .Title {
    align-self: flex-end;
    padding-bottom: 1.4286rem;
    white-space: normal;
    max-height: none;
}

.TableWrapper .TableContainer .TableRow .CellContent .Subtitle {
    font-weight: var(--font-weight-regular);
    font-size: 1.3329rem;
    line-height: 2rem;
    overflow: hidden;
    white-space: nowrap;
}

.TableWrapper .TableContainer .TableRow .CellContent .TitelAndSubtitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.TableWrapper .TableContainer .TableRow .CellContent .TextSimple {
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: start;
}

.TableWrapper .TableContainer .TableRow .CellContent .TextSimple.AlignTextLeft {
    text-align: left;
}

.TableWrapper .TableContainer .TableRow .CellContent .TextSimple.AlignTextCenter {
    text-align: center;
}

.TableWrapper .TableContainer .TableRow .CellContent .TextSimple .Text {
    font-weight: var(--font-weight-regular);
}
 
.TableWrapper .TableContainer .TableRow .CellContent .TextSimple .Text.Elipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical;
}

.TableWrapper .TableContainer .TableRow .CellContent .TextSimple .TextLinks{
    display: inline-block;
    font-weight: var(--brand-fontweight-interactive);
    color: var(--color-blue);
    padding-top: .2143rem;
    cursor: pointer;
}

.TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    width: 100%;
}

.TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage .Title {
    padding-left: 1.1429rem;
    font-size: 1.3329rem;
    line-height: 2rem;
    overflow: hidden;
    max-height: calc(2rem * var(--two));
    white-space: normal;
}

.TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage .ImgBlock picture{
    height: 2.8571rem;
    width: 2.8571rem;
}

.TableWrapper .TableContainer .TableRow .CellContent picture{
    height: 11.4286rem;
    width: 11.4286rem;
}

.TableWrapper .TableContainer .TableRow .CellContent picture img,
.TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage .ImgBlock picture img {
    max-height: 100%;
}

.TableWrapper .TableContainer .TableRow .CellContent .Icon {
    height: 1.5714rem;
    width: 1.5714rem;
}

.TableWrapper .TableContainer .TableRow .CellContent .ProductPricing * {
    font-weight: var(--font-weight-regular);
    font-size: 1.1429rem;
    line-height: 1.3571rem;
}

.TableWrapper .TableContainer .TableRow .CellContent .ProductPricing *:not(.PriceTagPrefixName, .PriceComponentPriceTag, .PriceTagUnitName) { 
    margin : auto;
}

.TableWrapper .TableContainer .TableRow .CellContent .ProductPricing .discountPrice{
    font-weight: var(--font-weight-semibold);
}

.TableWrapper .ProductPricing .ImageProduct + .PriceComponent {
    margin-top: 1.1429rem;
}

.TableWrapper .ProductPricing .ImageProduct {
    height: 11.4286rem;
    width: 11.4286rem;
    display: flex;
    align-items: center;
}

.TableWrapper .ProductPricing .ImageProduct img {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 991px) {

    .Fade {
        position: relative;
    }

    .Fade::before, .Fade::after {
        position: absolute;
        content: "";
        width: 6.8571rem;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(-90deg, var(--rgba-white) 0%, var(--white) 100%);
    }

    .Fade::after {
        left: auto;
        right: 0;
        background: linear-gradient(90deg, var(--rgba-white) 0%, var(--white) 100%);
    }

    .Fade.left::before, .Fade.right::after {
        display: none;
    }

    .TableWrapper .TableContainer {
        width: calc(var(--dynamic-coloumns) * 12.5714rem);
    }

    .TableWrapper .TableContainer .TableRow {
        grid-template-columns: repeat(var(--dynamic-coloumns), 12.5714rem);
    }

    .TableWrapper .TableContainer .TableRow .CellContent {
        padding: .5714rem;
    }

    .TableWrapper .TableContainer .TableRow .CellContent.BgColour .Title {
        align-self: center;
        padding-bottom: 0;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .Title,
    .TableWrapper .TableContainer .TableRow .CellContent.BgColour .TitelAndSubtitle .Title {
        font-size: 1.3329rem;
        line-height: 2rem;
        white-space: normal;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .Title {
        max-height: calc(2rem * var(--three));
    }

    .TableWrapper .TableContainer .TableRow .CellContent.BgColour .TitelAndSubtitle .Title {
        max-height: calc(2rem * var(--two));
    }

    .TableWrapper .TableContainer .TableRow .CellContent .Subtitle {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage .Title {
        align-self: flex-start;
        padding: 0;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .TextSimple .TextLinks {
        padding-top: 0;
    }
}

@media (max-width: 480px) {

    .TableWrapper .TableContainer {
        padding: 0 0 0 .5714rem;
        width: calc(var(--dynamic-coloumns) * 10.8571rem);
    }

    .TableWrapper .TableContainer .TableRow {
        grid-template-columns: repeat(var(--dynamic-coloumns), 10.8571rem);
    }

    .TableWrapper .TableContainer .TableRow .CellContent.CellContentOnlyImg {
        padding: .2857rem;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .Title,
    .TableWrapper .TableContainer .TableRow .CellContent.BgColour .TitelAndSubtitle .Title {
        font-size: 1rem;
        line-height: 1.5rem;
        white-space: normal;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .Title {
        max-height: calc(1.5rem * var(--four));
    }

    .TableWrapper .TableContainer .TableRow .CellContent.BgColour .TitelAndSubtitle .Title {
        max-height: calc(1.5rem * var(--two));
    }
    
    .TableWrapper .TableContainer .TableRow .CellContent .TitleWithImage .Title {
        font-size: 1rem;
        line-height: 1.5rem;
        max-height: calc(1.5rem * var(--two));
    }

    .TableWrapper .TableContainer .TableRow .CellContent picture {
        height: 6.2857rem;
        width: 6.2857rem;
    }

    .TableWrapper .TableContainer .TableRow .CellContent .ProductPricing *{
        font-size: 1rem;
    }
}
.quizz {
    padding: 1.7143rem;
}

.quizz .quizzBG {
    background: var(--brand-highLights-bg-color);
    border-radius: 0.714rem;
    padding: 1.714rem;
}

.quizz .quizzBG.ImageBG {
    padding: 2.85714rem 4rem 2.2857rem 4rem;
}

.quizz .quizz-header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

.quizz .quizz-title {
    margin: 0.5714rem 0 2.2857rem 0;
    font-size: 2.3686rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-color-fog);
}

.quizz .quizz-flex {
    display: flex;
}

.quizz .quizzStopFlex {
    display: block;
}

.quizz .quizz-flex .quizz-SideWidth {
    margin-right: 1.714rem;
    position: relative;
    min-width: min(55%, 35.357rem);
    width: clamp(35.357rem, min(55%, 35.357rem), 35.357rem);
}

.quizz .quizz-flex .quizz-SideWidth>:first-child {
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quizz .quizz-flex .quizz-SideWidth>div>picture {
    height: 100%;
}

.quizz .quizz-flex .quizz-SideWidth>div>picture>img{
    border-radius: 0.714rem;
}

.quizz .quizz-flex .quizz-SideWidth .quizTextAboveImage {
    position: absolute;
    margin: auto 1.143rem;
    width: calc(100% - 4.571rem);
    font-size: 1.714rem;
    line-height: 2.071rem;
    font-weight: var(--font-weight-regular);
    font-style: normal;
    color: var(--black);
    top: 50%;
    transform: translate(0%, -50%);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.571rem;
    height: auto;
    text-align: center;
    padding: 1.143rem;
}

.quizz .quizz-flex .quizz-SideWidth .quizTextAboveImage.quizHideMWeb {
    display: unset;
}

.quizz .quizz-flex .quizz-SideWidth .quizTextAboveImage.quizHideDektop {
    display: none;
}

.quizz .quizz-flex .quizz-BGText {
    font-size: 3rem;
    text-align: center;
    padding: 0 3.571rem;
}

.quizz .quizz-flex .quizz-sTextAnswers {
    background-color: white;
    width: 100%;
    max-width: 100%;
    padding: 2.286rem;
    transition: all 300ms ease-in-out;
    border-radius: 0.714rem;
}

.quizz .quizz-flex .quizz-sTextAnswers .quizz-padding,
.quizz .quizz-image-select .quizz-padding {
    margin: 0 0.571rem 0 0;
    vertical-align: sub;
    width: 1.143rem;
    height: 1.143rem;
    cursor: pointer;
    accent-color: var(--text-color-fog);
}

.quizz .quizz-flex .quizz-sTextAnswers .quizz-answers-radio-group {
    display: grid;
    grid-gap: 1.071rem;
    margin: 1.714rem 0 1.143rem;
}

.quizz .quizz-flex .quizz-sTextAnswers .quizz-answers-radio-group .quizzSelectedAnswer,
.quizz .quizz-image-select .quizz-image-answer .quizzSelectedAnswer {
    font-weight: var(--font-weight-semibold);
}

.quizz .quizz-flex .quizz-sTextAnswers .quizz-answers-radio-group>label {
    cursor: pointer;
    width: fit-content;
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.5rem;
    color: var(--text-color-fog);
}

.quizz .actionButtons {
    display: flex;
    align-items: center;
    margin-top: 1.145rem;
}

.quizz .actionButtons .goBackColor {
    color: var(--text-color-fog);
    display: flex;
}

.quizz .actionButtons .goBackColor .svgGoBack {
    height: auto;
    width: 0.857rem;
    margin-top: 0.143rem;
    fill: var(--text-color-fog);
    margin-right: 0.214rem;
}

.quizz .fullWidth {
    width: 100%;
}

.quizz .quizz-flex .quizz-sTextAnswers .buttonAlignment {
    text-align: right;
}

.quizz .quizz-flex .quizz-sTextAnswers .nextButtonDesign,
.quizz .buttonAlignment .nextButtonDesign {
    background-color: var(--text-color-fog);
}

.quizz .buttonAlignment {
    text-align: right;
    height: 2.6rem;
}

.quizz .quizz-flex .quizz-sTextAnswers .quizz-sTextQuestion,
.quizz .quizz-sTextQuestion-Image  {
    color: var(--text-color-fog);
    font-size: 1.714rem;
    line-height: 2.071rem;
    font-weight: var(--font-weight-semibold);
}

.quizz .quizz-sTextQuestion-Image {
    margin-bottom: 1.714rem;
    text-align: center;
}

.quizz .quizz-image-select {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    grid-gap: 0.571rem;
    justify-content: center;
}

.quizz .quizz-image-select>div:hover {
    box-shadow: 0 4px 4px -1px black;
}

.quizz .quizz-image-select>div {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    cursor: pointer;
    background-color: white;
    border-radius: 0.571rem;
    width: 13.286rem;
    min-height: 16.85714rem;
}

.quizz .quizz-image-select .quizz-empty-img {
    height: 11rem;
    margin: 1.143rem 1.143rem 0 1.143rem;
    background-color: #D6D6D6;
}

.quizz .quizz-image-select .quizz-image-select-image {
    height: 11rem;
    padding: 1.143rem 1.143rem 0 1.143rem;
}

.quizz .quizz-image-select .quizz-image-answer {
    text-align: center;
    margin: 0.357rem;
}

.quizz .quizz-image-select .quizz-image-answer>label {
    font-size: 1rem;
    line-height: 1.5rem;
}

.quizz .quizz-image-select .quizz-image-select-image>div>picture>img {
    height: 11rem;
}

@media screen and (max-width: 767px) {
    .quizz .quizz-header-hideMWeb {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .br-cms-layout .two-column-layout .quizz .actionButtons.buttonImagePadding {
        margin-top: 1.145rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .quizz .quizz-flex .quizz-SideWidth {
        margin-right: 1.429rem;
    }
}

@media screen and (max-width: 590px) {
    .quizz .quizz-flex .quizz-SideWidth {
        min-width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .quizz {
        padding: 1.7143rem 1.143rem;
    }

    .quizz .quizz-flex {
        display: block;
    }
    .quizz .quizz-flex .quizz-SideWidth {
        padding-bottom: 1.714rem;
        margin: auto;
        max-width: 100%;
    }
    .quizz .quizz-flex .quizz-SideWidth>:first-child {
        justify-content: center;
    }
    .quizz .quizz-flex .quizz-sTextAnswers {
        width: auto;
    }
    .quizz .quizzBG.ImageBG {
        padding: 2.286rem;
    }
    .quizz .quizz-header-hideMWeb {
        display: none;
    }
    .quizz .quizz-flex .quizz-SideWidth .quizTextAboveImage.quizHideMWeb {
        display: none;
    }

    .quizz .quizz-flex .quizz-SideWidth .quizTextAboveImage.quizHideDektop {
        display: unset;
    }
}

@media screen and (min-width: 686px) and (max-width: 991px) {
    .quizz .quizzTwoBlocks {
        max-width: 27.741rem;
        margin: auto;
        justify-content: left;
    }
    .quizz .quizzTwoBlocks:not(.q4) {
        max-width: 41.571rem;
        margin: auto;
        justify-content: left;     
    }
}
@media screen and (min-width: 686px) and (max-width: 991px) {
    .br-cms-layout .two-column-layout .quizz .quizzTwoBlocks {
        max-width: 27.741rem;
        margin: auto;
        justify-content:center;
    }
    .br-cms-layout .two-column-layout .quizz .quizzTwoBlocks:not(.q4) {
        max-width: 41.571rem;
        margin: auto;
        justify-content: left;     
    }
}

@media screen and (max-width: 685px) {
    .quizz .quizz-image-select,
    .quizz .quizzTwoBlocks {
        max-width: 27.714rem;
        margin: auto;
        justify-content: center;
    }
}

@media screen and (max-width: 491px) {
    .quizz .quizz-image-select,
    .quizz .quizzTwoBlocks {
        max-width: 27.714rem;
        margin: auto;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .quizz .quizz-sTextQuestion-Image  {
        font-size: 1.28571rem;
        line-height: 1.57142rem;
        font-weight: var(--font-weight-semibold);
    }
}


.quizz .quizzStopFlex .quizz-SideWidth {
    margin: auto;
    max-width: 100%;
    padding-bottom: 1.714rem;
}

.quizz .quizzStopFlex .quizz-sTextAnswers {
    width: auto;
}
.textfield {
    background-position: 10px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    height: 40px;
    line-height: 40px;
    font-size: var(--form-font-size);
    border: var(--form-border-thickness) var(--form-border-style) #ccc;
    border-radius: var(--form-border-radius);
    font-weight: var(--form-font-weight);
}

.textfield:focus { 
    background-image: none !important;
    text-indent: 10px !important;
}

.inputWrapper {
    display: flex;
    flex-direction: row;
}
.checkbox-label {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: var(--brand-fontweight-callout);
}

:root {
    --background-img-ingrid: #ECE5D5;
    --title-font-color: var(--text-color);
    --sub-title-font-color: var(--text-color);
    --bg-color-ingrid: #ECE5D5;
    --cta-bg-color-ingrid: #ECE5D5;
    --cta-text-color-ingrid: var(--text-color);
}
.InGridMarketingTileLink {
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--br-cms-font-sohne);
}

.InGridMarketingTileLink, .InGridMarketingTile {
    display: flex;
    gap: 0.571rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

.InGridMarketingTileLink.textOnly .InGridMarketingTile {
    background-color: var(--bg-color-ingrid);
    padding: 0 1.143rem;
    box-sizing: border-box;
}

.br-cms-layout .InGridMarketingTileLink {
    width: 26.143rem;
    height: 32.786rem;
}

.InGridMarketingTile { 
    width: 100%;
    height: 100%;
}

.BackgroundContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; 
}

.InGridMarketingTileLink.roundedCorners .InGridMarketingTile {
    border-radius: 0.571rem;
}

.InGridMarketingTile .TileTitle {
    font-size: 1.429rem;
    line-height: 1.786rem;
    color: var(--title-font-color);
    font-weight: var(--brand-fontweight-callout);
}

.InGridMarketingTile  .TileSubTitle {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--sub-title-font-color);
    font-weight: 400;
}

.InGridMarketingTile .ingrid-cta {
    font-size: 1.143rem;
    color: var(--cta-text-color-ingrid);
    text-decoration: underline;
    line-height: 1.714rem;
}

.InGridMarketingTileLink.imgBased .InGridMarketingTile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    background-image: var(--background-img-ingrid);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.InGridMarketingTileLink.imgBased  .ingrid-cta {
    margin: 0 0 1.143rem 0;
}

.ingrid-cta.btn {
    text-decoration: none;
    display: inline-flex;
    height: 2.571rem;
    min-width: 5.714rem;
    padding: 0.5rem 1.143rem;
    justify-content: center;
    align-items: center;
    gap: 0.571rem;
    flex-shrink: 0;
    border-radius: 7.143rem;
    background: var(--cta-bg-color-ingrid);
}

.thumbnail-grid.column-1 .InGridMarketingTileLink.imgBased .InGridMarketingTile {
    aspect-ratio: 1;
}
.ProspectModal {
  box-sizing: border-box;
  border-radius: 0.4286rem;
  background-color: var(--white);
  padding: 0;
  box-shadow: 0 0.3571rem 1.0714rem 0 rgba(0,0,0,.08), 0 0.1429rem 0.2857rem 0 rgba(0,0,0,.11);
  overflow: hidden;
  max-width: 24.2857rem;
  margin: auto;
  position: relative;
}

.ProspectModal.dimension {
  min-width: 30rem;
}

.ProspectModal .overlay-modal-close {
  position: absolute;
  right: 1.1429rem;
  top: 1.1429rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.ProspectModal .overlay-modal-close.extended {
  right: 0.4rem;
  top: 0.8rem;
}

.ProspectModal .hide-modal {
  display: none;
}

.ProspectModal .show-modal {
  display: block;
}

.ProspectModal .overlay-modal-left {
  padding: 1.4286rem 2.1429rem 0.3571rem;
}

.ProspectModal .overlay-modal-left.extended {
  padding: 1.7rem 2.4rem;
}

.ProspectModal .modal-title {
  font-weight: var(--brand-fontweight-callout);
  font-size: 1rem;
  color: var(--brand-color-border-primary);
}

.ProspectModal .modal-title.extended {
  font-size: 1.1429rem;
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.8571rem;
}

.ProspectModal .title-cover {
  background-image: var(--wedding-modal-ribbon);
  background-size: cover;
  background-color: var(--white);
  background-repeat: no-repeat;
}

/* .ProspectModal .modal-subtitle-extended {
  font-weight: var(--font-weight-semibold);
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 0.8rem;
  text-align: center;
} */

.ProspectModal .modal-subtitle-extended {
  font-weight: var(--font-weight-semibold);
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 0.8rem;
  text-align: center;
}

.ProspectModal .modal-paragraph-extended {
  text-align: center;
  font-size: 0.8571rem;
  margin-bottom: 1.6rem;
}

.ProspectModal .modal-legal-text-extended {
  text-align: left;
  font-size: 0.7rem;
}

.ProspectModal .modal-legal-links-extended {
  text-align: left;
  font-size: 0.7rem;
  margin-bottom: 0.6rem;
}

.ProspectModal .overlay-promises {
  margin: 0.3571rem 0 0.7143rem;
  padding-inline-start: 0.8571rem;
}

.ProspectModal .overlay-promise-bullet {
  font-weight: var(--font-weight-semibold);
  font-size: 0.8571rem;
  margin: 0.3571rem;
}

.ProspectModal .error-message {
  color: var(--color-red);
  padding: 0.3571rem 0;
}

.ProspectModal .modal-form {
  display: flex;
  flex-direction: column;
}

.ProspectModal .modal-form.extended {
  align-items: center;
}

.ProspectModal .submit-button {
  width: 13.6429rem;
  height: 2.5714rem;
  background-color: var(--button-bg);
  font-size: 0.8571rem;
  margin-top: 1.4286rem;
  line-height: 1;
  color: var(--button-color-text-primary);
  border: 0;
  cursor: pointer;
}

.ProspectModal .submit-button.button-width {
  width: 100%;
}

.ProspectModal .submit-button:active,.submit-button:active:focus, .submit-button:hover {
  background-color: var(--ignite);
}

.ProspectModal .privacy-link {
  font-size: 0.6429rem;
  margin-top: 0.2143rem;
  width: 5rem;
}

.ProspectModal .privacy-link.extended {
  text-decoration: none;
  text-align: center;
  margin: 0.7rem 0;
  width: unset;
}

.ProspectModal .label-text.lt_validation-error {
  width: initial !important;
}

.ProspectModal .overlay-modal-status {
  padding: 1.5rem;
  text-align: center;
}

.ProspectModal .try-again {
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  text-align: center;
  padding: 0.5714rem 0;
  border: none;
  background: none;
}

.ProspectModal input.sfly-datepicker {
  padding: 0.813rem;
  width: 100%;
  margin-top: 0.75rem;
  box-sizing: border-box;
  border-radius: var(--form-border-radius);
  font-weight: var(--brand-fontweight-callout);
  font-size: var(--form-font-size);
}

.ProspectModal input.sfly-datepicker:hover {
  border-color: var(--text-color-light);
}

.ProspectModal .datePicker {
  width: 100%;
  margin-bottom: 1.4286rem;
}

@media (max-width: 480px) {
  .ProspectModal.dimension {
    min-width: 25rem;
  }
}