/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/index.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_custom_basicfit/cartridge/client/default/scss/pages/pd/promobanner.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes marquee-animation {
  0% {
    left: 0;
  }
  100% {
    left: -1060px;
  }
}
@keyframes marquee-animation-pagewide {
  0% {
    left: 0;
  }
  100% {
    left: -2080px;
  }
}
.experience-assets-promobanner .page-wide-marquee-wrapper {
  font-style: initial;
  margin-top: 20px;
}

.page-wide-marquee-wrapper {
  width: 100%;
  max-width: 1920px;
  margin: auto;
  overflow: hidden;
  margin-top: 30px;
}

.page-wide-marquee {
  background-color: #fff;
  margin: 30px auto;
  white-space: nowrap;
  display: flex;
  width: 4179px;
}
.page-wide-marquee.animate div {
  animation: marquee-animation-pagewide 14s linear infinite;
  animation-delay: 0s;
}
.page-wide-marquee div {
  width: 4179px;
  position: relative;
  white-space: nowrap;
  left: 0;
  display: flex;
}
.page-wide-marquee span {
  font-size: 20px;
  font-family: headingprotreble-extrabold, sans-serif;
}
@media only screen and (min-width: 768px) {
  .page-wide-marquee span {
    font-size: 30px;
    font-family: headingprotreble-heavy, sans-serif;
  }
}
.page-wide-marquee hr {
  width: 49px;
  border: none;
  border-top: 3px solid #7adec9;
  margin: auto 18px;
}
@media only screen and (min-width: 768px) {
  .page-wide-marquee hr {
    width: 73px;
    border-top: 6px solid #7adec9;
  }
}

.experience-assets-promobanner .promo-banner__paragraph {
  color: #fff;
}
.experience-assets-promobanner .promo-banner__title--second {
  -webkit-text-stroke: 0;
}
.experience-assets-promobanner .promo-banner {
  font-style: initial;
  margin-bottom: 140px;
}

.promo-banner {
  position: relative;
}

.promo-banner__desktop-img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}

.promo-banner__content {
  max-width: 1120px;
  padding: 107px 0 132px;
  margin: 0 auto;
}
@media only screen and (max-width: 1024px) {
  .promo-banner__content {
    padding: 20px 15px 450px;
  }
}

.promo-banner__title,
.promo-banner__paragraph {
  color: #2d2d2d;
}

.promo-banner__paragraph {
  margin-bottom: 30px;
  margin-right: auto;
  width: 40%;
}
@media only screen and (min-width: 768px) {
  .promo-banner__paragraph {
    margin-bottom: 35px;
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner__paragraph {
    width: 100%;
  }
}

.promo-banner__title {
  margin-bottom: 23px;
  font-size: 48px;
  line-height: 50px;
}
@media only screen and (max-width: 1024px) {
  .promo-banner__title {
    margin-top: 15px;
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 36px;
  }
}
.promo-banner__title .promo-banner__title.normal {
  font-weight: headingprotreble-regular, sans-serif;
}
.promo-banner__title .promo-banner__title.bold {
  font-family: headingprotreble-heavy, sans-serif;
}

.promo-banner__title--second {
  display: block;
  -webkit-text-stroke: 1px #2d2d2d;
}

.promo-banner__title--second-plus::before {
  content: "+";
  margin-right: -5px;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fe7000;
}

.promo-banner__btn {
  position: relative;
  padding: 15px 89px;
  z-index: 5;
}
@media only screen and (min-width: 768px) {
  .promo-banner__btn {
    width: auto;
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner__btn {
    margin-top: 29px;
    padding: 13px 10px;
    width: 100%;
  }
}

.promo-banner--gradient {
  background: linear-gradient(#2b2b2b 0%, #575757 100%);
}
.promo-banner--gradient img {
  display: none;
}

.promo-banner--desktop-right {
  text-align: right;
}
.promo-banner--desktop-right .promo-banner__paragraph {
  margin: 0 0 0 auto;
}

.promo-banner--desktop-left {
  text-align: left;
}
.promo-banner--desktop-left .promo-banner__paragraph {
  margin: 0 auto 50px 0;
}

@media only screen and (max-width: 1024px) {
  .promo-banner--mobile-right {
    text-align: right;
  }
  .promo-banner--mobile-right .promo-banner__paragraph {
    margin: 0 0 0 auto;
  }
}

@media only screen and (max-width: 1024px) {
  .promo-banner--mobile-left {
    text-align: left;
  }
  .promo-banner--mobile-left .promo-banner__paragraph {
    margin: 0 auto 0 0;
  }
}

.promo-banner__image {
  position: absolute;
  bottom: -40%;
  left: -40%;
  transform: translateX(-50%);
  z-index: 4;
}
@media only screen and (min-width: 1025px) {
  .promo-banner__image {
    top: -87px;
    left: 50%;
    width: 50%;
    transform: scale(0.6);
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner__image {
    top: 39%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}
@media only screen and (min-width: 414px) and (max-width: 1024px) {
  .promo-banner__image {
    top: 35%;
  }
}
@media only screen and (min-width: 1367px) {
  .promo-banner__image {
    transform: none;
  }
}
.promo-banner__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: auto;
}
@media only screen and (min-width: 1025px) {
  .promo-banner__image img {
    position: absolute;
    -o-object-position: right;
       object-position: right;
    top: -81px;
  }
}
.promo-banner__image svg {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 1366px) {
  .promo-banner__image .zLinesTwo path {
    transform: translate(-250px, 50px);
  }
}
.promo-banner__image path {
  opacity: 0;
}

.promo-banner--jobs {
  background: #2b2b2b;
  margin-bottom: 0;
  min-height: 560px;
}
@media only screen and (min-width: 1025px) {
  .promo-banner--jobs {
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner--jobs {
    min-height: 690px;
    display: flex;
    justify-content: center;
  }
}
.promo-banner--jobs.promo-banner--gradient {
  background: radial-gradient(40% 50% at 76% 50%, #494949 0%, rgba(43, 43, 43, 0) 100%);
  background-color: #2b2b2b;
}
@media only screen and (max-width: 1024px) {
  .promo-banner--jobs.promo-banner--gradient {
    background: linear-gradient(284.67deg, #2b2b2b 52.29%, #575757 99.87%);
  }
}
.promo-banner--jobs .promo-banner__content {
  max-width: 1240px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
@media only screen and (min-width: 1025px) {
  .promo-banner--jobs .promo-banner__content {
    padding: 20px 15px;
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner--jobs .promo-banner__content {
    padding: 50px 15px;
  }
}
.promo-banner--jobs .promo-banner__title {
  font-size: 32px;
  line-height: 36px;
  margin-top: 0;
  margin-bottom: 24px;
}
@media only screen and (min-width: 1025px) {
  .promo-banner--jobs .promo-banner__title {
    font-size: 48px;
    line-height: 50px;
    margin-bottom: 24px;
    width: 50%;
  }
}
.promo-banner--jobs .promo-banner__title .promo-banner__title--main {
  display: block;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
}
.promo-banner--jobs .promo-banner__title .promo-banner__title--opposite {
  -webkit-text-stroke: 1px #fff;
  color: #fff;
}
.promo-banner--jobs .promo-banner__paragraph {
  color: #fff;
}
@media only screen and (max-width: 1024px) {
  .promo-banner--jobs .promo-banner__paragraph {
    margin-bottom: 0;
  }
}
.promo-banner--jobs .promo-banner__image {
  pointer-events: none;
}
.promo-banner--jobs .promo-banner__image #waveBigLine1_jobspromobanner,
.promo-banner--jobs .promo-banner__image #waveBigLine2_jobspromobanner {
  stroke-width: 10;
}
.promo-banner--jobs .promo-banner__image svg {
  width: 632px;
  height: 674px;
}
.promo-banner--jobs .promo-banner__image.animation-WavesBig svg path {
  transform: scale(1.5);
}
@media only screen and (max-width: 767px) {
  .promo-banner--jobs .promo-banner__image.animation-WavesBig #waveBigLine1_jobspromobanner,
.promo-banner--jobs .promo-banner__image.animation-WavesBig #waveBigLine2_jobspromobanner {
    stroke-width: 10;
  }
  .promo-banner--jobs .promo-banner__image.animation-WavesBig svg path {
    transform: translate(-40px, -60px) scale(1.7);
  }
}
.promo-banner--jobs .promo-banner__image.animation-CurveAnimation-Two svg path {
  transform: translate(0, -150px);
}
@media only screen and (max-width: 767px) {
  .promo-banner--jobs .promo-banner__image.animation-CurveAnimation-Two svg path {
    transform: translate(60px, -40px) scale(0.8);
  }
}
@media only screen and (min-width: 1025px) {
  .promo-banner--jobs .promo-banner__image {
    left: auto;
    top: 0;
    right: 0;
    transform: none;
    bottom: -40%;
    display: flex;
    justify-content: center;
    height: 674px;
    width: 632px;
  }
  .promo-banner--jobs .promo-banner__image img {
    top: 0;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: right;
       object-position: right;
    position: static;
    height: auto;
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner--jobs .promo-banner__image {
    display: flex;
    justify-content: center;
    align-items: center;
    left: auto;
    bottom: auto;
    top: 30%;
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 767px) {
  .promo-banner--jobs .promo-banner__image {
    width: 632px;
    height: 674px;
  }
}
@media only screen and (max-width: 415px) {
  .promo-banner--jobs .promo-banner__image {
    bottom: auto;
  }
}
@media only screen and (min-width: 1367px) {
  .promo-banner--jobs .promo-banner__image {
    right: 12%;
  }
}
.promo-banner--jobs .promo-banner__btn {
  padding: 14px;
  max-width: 100%;
}
@media only screen and (min-width: 1025px) {
  .promo-banner--jobs .promo-banner__btn {
    width: 320px;
  }
}
@media only screen and (max-width: 1024px) {
  .promo-banner--jobs .promo-banner__btn {
    margin-top: 36px;
    width: 310px;
  }
}
@media only screen and (max-width: 767px) {
  .promo-banner--jobs .promo-banner__btn {
    width: 310px;
  }
}

@media only screen and (min-width: 1025px) {
  .promo-banner__image-position--right {
    left: 0;
  }
}

.promo-quiz {
  padding-bottom: 140px;
  overflow: hidden;
}

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