/* Convert px to rem
** Usage:
** font-size: rem(23);
*/
/* A small function allowing skipping base64 encoding
** and simply pasting the SVG markup right in the CSS.
** @author Jakob Eriksen
** @link http://codepen.io/jakob-e/pen/doMoML
** @param {String} $svg - SVG image to encode
** @return {String} - Encoded SVG data uri
*/
/* Replace `$search` with `$replace` in `$string`
** @author Hugo Giraudel
** @link http://sassmeister.com/gist/1b4f2da5527830088e4d
** @param {String} $string - Initial string
** @param {String} $search - Substring to replace
** @param {String} $replace ('') - New value
** @return {String} - Updated string
*/
/* Replace substring 'fillColor' to real color from variables */
/* Convert px to rem
** Usage:
** font-size: rem(23);
*/
/* A small function allowing skipping base64 encoding
** and simply pasting the SVG markup right in the CSS.
** @author Jakob Eriksen
** @link http://codepen.io/jakob-e/pen/doMoML
** @param {String} $svg - SVG image to encode
** @return {String} - Encoded SVG data uri
*/
/* Replace `$search` with `$replace` in `$string`
** @author Hugo Giraudel
** @link http://sassmeister.com/gist/1b4f2da5527830088e4d
** @param {String} $string - Initial string
** @param {String} $search - Substring to replace
** @param {String} $replace ('') - New value
** @return {String} - Updated string
*/
/* Replace substring 'fillColor' to real color from variables */
/* Mixin for button animation,
    use: @include button-animation(); for .btn-primary-dark--white-bg button
*/
/* Mixin for arrow link animation,
    use: @include arrow-link-animation(); for .btn-tertiary-dark--white-bg button
*/
/* Mixin for link animation,
    use: @include link-animation(); for .btn-link-dark--white-bg button
*/
/* Mixin for button background animation,
    use: @include hoverBgEffect($primary-slate, $scale: 1.4, $speed: 0.4s);
*/
/**
 * Mixin for adding gradient line to the bottom.
 * @param {$side-colors} color.
 */
/**
 * Mixin for adding text underline.
 */
/**
 * Mixin for cropping the text.
 * @param {$line-clamp} number of visible lines.
 */
/* stylelint-disable selector-class-pattern */
.b-swiped-banners {
  position: relative;
  overflow: hidden;
}
.b-swiped-banners:not(.swipedbanners-initialized) .b-swiped-banners__items > div + div {
  display: none !important;
}
@media (min-width: 1024px) {
  .b-swiped-banners.m-left-side-controls .b-swiped-banners__arrows {
    left: 1.25rem;
  }
}
.b-swiped-banners.m-left-side-controls .b-slider-arrow__wrapper {
  width: calc(50% - 40px);
  right: auto;
}
.b-swiped-banners.m-left-side-controls .b-swiped-banners__progress {
  left: 2rem;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
@media (min-width: 1024px) {
  .b-swiped-banners.m-left-side-controls .b-swiped-banners__progress {
    left: 9%;
  }
}
.b-swiped-banners__arrows {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  display: none;
}
@media (min-width: 1024px) {
  .b-swiped-banners__arrows {
    display: block;
    left: calc(50% + 1.25rem);
  }
  .b-swiped-banners:hover .b-swiped-banners__arrows {
    opacity: 1;
  }
}
.b-swiped-banners__progress {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .b-swiped-banners__progress {
    left: 75%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
    top: auto;
    bottom: 1.875rem;
  }
}
.b-swiped-banners .b-generic-banner__content-wrapper,
.b-swiped-banners .b-generic-banner__image-wrapper,
.b-swiped-banners .steps-banner__content-wrapper,
.b-swiped-banners .steps-banner__image-wrapper {
  will-change: transform, opacity;
  opacity: 0;
}
.b-swiped-banners.-swiped-left .b-generic-banner__content-wrapper,
.b-swiped-banners.-swiped-left .b-generic-banner__image-wrapper,
.b-swiped-banners.-swiped-left .steps-banner__content-wrapper,
.b-swiped-banners.-swiped-left .steps-banner__image-wrapper {
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
  -webkit-transition: none;
  transition: none;
}
.b-swiped-banners.-swiped-right .b-generic-banner__content-wrapper,
.b-swiped-banners.-swiped-right .b-generic-banner__image-wrapper,
.b-swiped-banners.-swiped-right .steps-banner__content-wrapper,
.b-swiped-banners.-swiped-right .steps-banner__image-wrapper {
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
  -webkit-transition: none;
  transition: none;
}
.b-swiped-banners.m-animated-fade-up .b-generic-banner__content > *, .b-swiped-banners.m-animated-fade-up .steps-banner__content-wrapper > * {
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translateY(6.25rem);
          transform: translateY(6.25rem);
  opacity: 0;
}
.b-swiped-banners.m-animated-fade-up .b-generic-banner__content > *:nth-child(2), .b-swiped-banners.m-animated-fade-up .steps-banner__content-wrapper > *:nth-child(2) {
  -webkit-transition-delay: 0.14s;
          transition-delay: 0.14s;
}
.b-swiped-banners.m-animated-fade-up .b-generic-banner__content > *:nth-child(3), .b-swiped-banners.m-animated-fade-up .steps-banner__content-wrapper > *:nth-child(3) {
  -webkit-transition-delay: 0.21s;
          transition-delay: 0.21s;
}
.b-swiped-banners.m-animated-fade-up .b-generic-banner__content > *:nth-child(4), .b-swiped-banners.m-animated-fade-up .steps-banner__content-wrapper > *:nth-child(4) {
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}
.b-swiped-banners.m-animated-fade-up .b-generic-banner__content > *:nth-child(5), .b-swiped-banners.m-animated-fade-up .steps-banner__content-wrapper > *:nth-child(5) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.b-swiped-banners .-active .b-generic-banner__content-wrapper,
.b-swiped-banners .-active .b-generic-banner__image-wrapper,
.b-swiped-banners .-active .steps-banner__content-wrapper,
.b-swiped-banners .-active .steps-banner__image-wrapper {
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate(0);
          transform: translate(0);
  opacity: 1;
}
.b-swiped-banners .-active .b-generic-banner__image-wrapper,
.b-swiped-banners .-active .steps-banner__image-wrapper {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.b-swiped-banners .-active .b-generic-banner__content > *,
.b-swiped-banners .-active .steps-banner__content-wrapper > * {
  -webkit-transform: translate(0);
          transform: translate(0);
  opacity: 1;
}
@media (max-width: 991.98px) {
  .b-swiped-banners .b-generic-banner__content-wrapper,
.b-swiped-banners .steps-banner__content-wrapper {
    padding-bottom: 3.75rem;
    min-height: 25rem;
  }
}

.b-nbw-banner-wrapper[data-sfcc-pd-component-info] .b-generic-banner__content-wrapper,
.b-nbw-banner-wrapper[data-sfcc-pd-component-info] .b-generic-banner__image-wrapper {
  opacity: 1;
}

.swipedbanners-initialized .b-swiped-banners__items > div {
  width: 100%;
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.b-swiped-banners__items > div.-active {
  position: relative;
  pointer-events: all;
  z-index: 10;
}
.b-swiped-banners__items > div img {
  pointer-events: none;
}

/* stylelint-enable selector-class-pattern */