{"version":3,"file":"../css/our_method_carousel.css","mappings":"AAoDE,wBC7CA,+BAEI,WAKF,gCCGF,aCZQ,CDaR,eDFI,eCGJ,gBACA,iBDHI,iBACA,kBDkCJ,wBCtCE,gCAOI,gBAIJ,+BCmBF,aCvBU,CDwBV,eACA,gBACA,iBDnBI,cACA,gBAFA,iBAEA,CAIJ,oCAOE,mBALA,aAGA,QACA,sCAHA,8CACA,wBAHA,eAMA,CAEA,0CACE,eAGF,0CACE,eAGF,mDAEE,YADA,gBAEA,eAIJ,4BAGE,aACA,sBAHA,gBACA,YAGA,uBAEA,kCCpBF,aCvBU,CF+CN,oBCvBJ,eDqBI,eCpBJ,gBDuBI,qBCtBJ,iBDoBI,kBAGA,4BAMA,iBALA,gBACA,uBAGA,sBAFA,YACA,oBAEA,CDxBJ,wBCYE,kCAeI,eACA,mBD9CN,wBC8BE,kCAoBI,qCAGF,+CCxDJ,UCyBM,CDxBN,eD0DM,eCzDN,gBACA,iBDuDM,gBACA,CDtCN,wBCmCI,+CAMI,eACA,iBAMR,2BAGE,uCAFA,uBAGA,wCAFA,6CAEA,CDlCF,wBC8BA,2BAOI,sCDvDJ,wBCgDA,2BAYI,+BACA,0CAFA,mCAGE,EAKN,4BACE,gBAEA,gCAEE,kBACA,0CEjES,CFkET,eACA,iBAJA,oCAIA,CAMA,6FACE,YAKN,mCACE,sBAGF,mCACE,iBAEA,sCC1HF,UCgCM,CD/BN,eACA,gBACA,iBD2HE,qCCvHF,UCyBM,CFgGF,cCxHJ,eACA,gBACA,gBCbU,CFuIV,uCChHA,aCvBU,CDwBV,eACA,gBACA,iBDmHE,YD9DF,yBCwDA,uCAEI,kBAOJ,mCACE,aACA,uBDnHF,wBCiHA,mCAKI,wBAGF,mDAEE,6BADA,YAGA,WADA,SACA,CAGF,kDAGE,eADA,oBADA,iBAEA,CAGF,qDAEE,oBEvLI,CFsLJ,aEtLI,CF2LJ,YAHA,gBAEA,kBAEA,mBAHA,wCAGA,CAIA,mEACE,kBDhIN,wBC+HI,mEAMI,eAFA,kBACA,kBACA,EDvJR,wBCiJI,mEAYI,eAFA,kBACA,kBACA,EAGF,0EACE,YAGA,UAFA,kBACA,QAEA,2BDnJR,wBC8IM,0EAQI,WDxKV,wBCgKM,0EAYI,WDhKV,wBCwKM,2DACE,UDnKR,wBCgKE,iDAQI,kBD1LN,wBCkLE,iDAYI,eAGF,mEACE,mBDhLN,wBC+KI,mEAMI,eADA,kBADA,kBAEA,EDvMR,wBCiMI,mEAYI,eADA,kBADA,kBAEA,EAGF,yEACE,YACA,kBAEA,WADA,QAEA,2BDnMR,wBC8LM,yEAQI,YDxNV,wBCgNM,yEAYI","sources":["webpack://bidxone/./src/sass/responsive-utils.scss","webpack://bidxone/./src/sass/plugins/our_method_carousel.scss","webpack://bidxone/./src/sass/typography.scss","webpack://bidxone/./src/sass/variables.scss"],"sourcesContent":["$ULTRA_SMALL_MOBILE_WIDTH: 360px;\n$EXTRA_SMALL_MOBILE_WIDTH: 420px;\n$SMALL_MOBILE_WIDTH: 576px;\n$MOBILE_WIDTH: 767px;\n$DESKTOP_WIDTH: 992px;\n$WIDESCREEN_WIDTH: 1200px;\n$EXTRA_WIDESCREEN_WIDTH: 1500px;\n$ULTRA_WIDESCREEN_WIDTH: 1600px;\n\n@mixin ultra-small-mobile {\n  @media (max-width: #{$ULTRA_SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin not-ultra-small-mobile {\n  @media (min-width: #{$ULTRA_SMALL_MOBILE_WIDTH + 1px}) {\n    @content;\n  }\n}\n\n@mixin extra-small-mobile {\n  @media (max-width: #{$EXTRA_SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin extra-small-mobile-only {\n  @media (min-width: #{$ULTRA_SMALL_MOBILE_WIDTH + 1}) and (max-width: #{$EXTRA_SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin small-mobile {\n  @media (max-width: #{$SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin small-mobile-only {\n  @media (min-width: #{$EXTRA_SMALL_MOBILE_WIDTH + 1}) and (max-width: #{$SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin not-small-mobile {\n  @media (min-width: #{$SMALL_MOBILE_WIDTH + 1px}) {\n    @content;\n  }\n}\n\n@mixin mobile {\n  @media (max-width: #{$MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin mobile-only {\n  @media (min-width: #{$SMALL_MOBILE_WIDTH + 1}) and (max-width: #{$MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin not-mobile {\n  @media (min-width: #{$MOBILE_WIDTH + 1px}) {\n    @content;\n  }\n}\n\n@mixin tablet {\n  @media (max-width: #{$DESKTOP_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin tablet-only {\n  @media (min-width: #{$MOBILE_WIDTH + 1px}) and (max-width: #{$DESKTOP_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin desktop {\n  @media (min-width: #{$DESKTOP_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin desktop-only {\n  @media (min-width: #{$DESKTOP_WIDTH}) and (max-width:#{$WIDESCREEN_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin not-widescreen {\n  @media (max-width: #{$WIDESCREEN_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin widescreen {\n  @media (min-width: #{$WIDESCREEN_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin extra-widescreen {\n  @media (min-width: #{$EXTRA_WIDESCREEN_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin ultra-widescreen {\n  @media (min-width: #{$ULTRA_WIDESCREEN_WIDTH}) {\n    @content;\n  }\n}\n","@import '../responsive-utils.scss';\n@import '../typography.scss';\n@import '../variables.scss';\n\n$navArrowWidth: 40px;\n\n.our-method-carousel {\n  &.container {\n    @include mobile {\n      padding: 0;\n    }\n  }\n\n  &__header {\n    h2 {\n      @include header-2;\n      font-size: 35px;\n      line-height: 45px;\n      text-align: center;\n\n      @include mobile {\n        font-size: 20px;\n      }\n    }\n\n    p {\n      @include body-text;\n      text-align: center;\n      margin: 0 auto;\n      max-width: 750px;\n    }\n  }\n\n  &__steps-wrapper {\n    max-width: 650px;\n    display: grid;\n    grid-template-columns: $navArrowWidth minmax(0, 1fr) $navArrowWidth;\n    grid-template-rows: 40px;\n    gap: 0px 0px;\n    grid-template-areas: 'prev steps next';\n    align-items: center;\n\n    .prev {\n      grid-area: prev;\n    }\n\n    .next {\n      grid-area: next;\n    }\n\n    .square-button {\n      box-shadow: none;\n      border: none;\n      cursor: pointer;\n    }\n  }\n\n  &__steps {\n    grid-area: steps;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .step {\n      @include body-text;\n      font-size: 17px;\n      text-align: center;\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: calc((650px - (#{$navArrowWidth} * 2)) / 3);\n      word-break: break-all;\n      vertical-align: middle;\n      line-height: 40px;\n\n      @include mobile {\n        font-size: 12px;\n        width: calc((540px - (#{$navArrowWidth} * 2)) / 3);\n      }\n\n      @include small-mobile {\n        width: calc((100vw - (#{$navArrowWidth} * 2) - 50px) / 3);\n      }\n\n      &.slick-center {\n        @include header-4;\n        line-height: 40px;\n        font-size: 25px;\n\n        @include mobile {\n          font-size: 22px;\n          font-weight: 600;\n        }\n      }\n    }\n  }\n\n  &__step {\n    display: grid !important;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    column-gap: 100px;\n    grid-template-areas: 'image description';\n\n    @include tablet {\n      column-gap: 50px;\n    }\n\n    @include mobile {\n      grid-template-columns: minmax(0, 1fr);\n      column-gap: 0px;\n      grid-template-areas:\n        'image'\n        'description';\n    }\n  }\n\n  &__image {\n    grid-area: image;\n\n    img {\n      object-fit: cover;\n      border-radius: 3px;\n      box-shadow: $image-shadow;\n      max-width: 100%;\n      min-height: 310px;\n    }\n\n    .slick-list {\n      height: 100%;\n\n      .slick-track {\n        height: 100%;\n      }\n    }\n  }\n\n  &__step-content {\n    grid-area: description;\n  }\n\n  &__step-details {\n    min-height: 220px;\n\n    h3 {\n      @include header-3;\n    }\n\n    p {\n      @include header-4;\n      color: $body-text;\n    }\n  }\n\n  &__step-description {\n    @include widescreen {\n      min-height: 170px;\n    }\n\n    @include body-text;\n    opacity: 0.62;\n  }\n\n  &__step-buttons {\n    display: flex;\n    flex-wrap: wrap-reverse;\n\n    @include mobile {\n      justify-content: center;\n    }\n\n    .button-wrapper {\n      border: none;\n      background-color: transparent;\n      padding: 0;\n      margin: 6px;\n    }\n\n    .button-hidden {\n      visibility: hidden;\n      pointer-events: none;\n      cursor: default;\n    }\n\n    .secondary-button {\n      color: $primary;\n      border-color: $primary;\n      min-width: 200px;\n      width: fit-content;\n      padding: 14px 20px;\n      height: 53px;\n      white-space: nowrap;\n    }\n\n    .prev-buttons {\n      .secondary-button {\n        padding-left: 42px;\n\n        @include tablet {\n          padding-left: 26px;\n          padding-right: 13px;\n          font-size: 13px;\n        }\n\n        @include mobile {\n          padding-left: 42px;\n          padding-right: 20px;\n          font-size: 15px;\n        }\n\n        &::before {\n          content: '<';\n          position: absolute;\n          top: 50%;\n          left: 20px;\n          transform: translateY(-50%);\n\n          @include tablet {\n            left: 13px;\n          }\n\n          @include mobile {\n            left: 20px;\n          }\n        }\n      }\n    }\n\n    .next-buttons {\n      @include not-mobile {\n        &.move-left {\n          order: -1;\n        }\n      }\n\n      @include tablet {\n        margin-left: -6px;\n      }\n\n      @include mobile {\n        margin-left: 0;\n      }\n\n      .secondary-button {\n        padding-right: 42px;\n\n        @include tablet {\n          padding-right: 26px;\n          padding-left: 13px;\n          font-size: 13px;\n        }\n\n        @include mobile {\n          padding-right: 42px;\n          padding-left: 20px;\n          font-size: 15px;\n        }\n\n        &::after {\n          content: '>';\n          position: absolute;\n          top: 50%;\n          right: 20px;\n          transform: translateY(-50%);\n\n          @include tablet {\n            right: 13px;\n          }\n\n          @include mobile {\n            right: 20px;\n          }\n        }\n      }\n    }\n  }\n}\n","@import 'variables';\n\n@mixin main-header {\n  color: $white;\n  font-size: 77px;\n  font-weight: 700;\n  line-height: 81px;\n}\n\n@mixin header-1 {\n  color: $primary;\n  font-size: 52px;\n  font-weight: 700;\n  line-height: 73px;\n}\n\n@mixin header-2 {\n  color: $primary;\n  font-size: 27px;\n  font-weight: 700;\n  line-height: 38px;\n}\n\n@mixin header-3 {\n  color: $black;\n  font-size: 20px;\n  font-weight: 700;\n  line-height: 28px;\n}\n\n@mixin header-4 {\n  color: $black;\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 28px;\n}\n\n@mixin stc-offer-header {\n  font-size: 55px;\n  font-weight: 600;\n  line-height: 77px;\n}\n\n@mixin body-text {\n  color: $body-text;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 21px;\n}\n\n@mixin link-text {\n  color: $links;\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 21px;\n}\n\n@mixin tag-text {\n  color: $body-text;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 17px;\n}\n\n@mixin navbar-text {\n  color: $black;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 25px;\n}\n\n@mixin table-header {\n  color: $black;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 21px;\n}\n\n@mixin input-error {\n  color: $error;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 15px;\n}\n\n@mixin auction-property-status-label {\n  color: $white;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 15px;\n}\n\n@mixin negative-form-input {\n  color: $white;\n  font-size: 22px;\n  font-weight: 700;\n  letter-spacing: 0.44px;\n  line-height: 31px;\n}\n\n@mixin negative-form-label {\n  color: $white;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 22px;\n}\n\n@mixin form-input {\n  color: $black;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 21px;\n}\n\n@mixin form-label {\n  color: $secondary;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n@mixin controls-item {\n  color: $black;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n@mixin carousel-header {\n  color: $black;\n  font-size: 44px;\n  font-weight: 700;\n  line-height: 62px;\n}\n\n@mixin address-header {\n  color: $black;\n  font-size: 30px;\n  font-weight: 600;\n  line-height: 42px;\n}\n\n@mixin notification-text {\n  color: $white;\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 24px;\n}\n\n@mixin auction-header {\n  color: $black;\n  font-size: 22px;\n  font-weight: 500;\n  line-height: 31px;\n}\n\n@mixin popover-modal-header {\n  color: $primary;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 21px;\n}\n\n@mixin popover-modal-description {\n  color: $grey;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 14px;\n}\n\n@mixin notice-text {\n  color: $secondary;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 17px;\n}\n\n@mixin stc-button {\n  color: $white;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n@mixin italic-text {\n  color: $black;\n  opacity: 0.8;\n  font-size: 16px;\n  font-style: italic;\n  line-height: 22px;\n}\n","// -------------------------------\n//       GLOBAL VARIABLES\n// -------------------------------\n\n// --------- COLORS ---------\n$primary: #233c96;\n$secondary: #3a8dfb;\n$secondary-darker: #357ddd;\n$secondary-2: #39F;\n$accent: #fa7889;\n$links: #2d9bf0;\n$queenly-grey: #527896;\n$error: #f4314a;\n$warning: #f5d547;\n$background: #ffffff;\n$secondary-background: #f9fafe;\n$light-blue-background: #243c96;\n$dark-blue-background: #0a2692;\n$grey-background: #f6f6f6;\n$gentle-green: #73d77d;\n$green: #82c91e;\n$body-text: #444a57;\n$black: #000000;\n$white: #ffffff;\n$grey: #888888;\n$grey-2: #5A6373;\n$light-grey: #cccccc;\n$light-grey-2: #c8c8c8;\n$cherry-bomb: #ff596d;\n$stc-dark-grey: #252849;\n$stc-button-shadow: #1e2c62;\n$shadow: rgba(0, 0, 0, 0.5);\n$light-shadow: rgba(0, 0, 0, 0.25);\n$white-shadow: rgba(255, 255, 255, 0.5);\n$black-shadow: rgba(0, 0, 0, 0.11);\n$grey-shadow: rgba(198, 207, 220, 0.41);\n$blue-shadow: rgba(45, 155, 240, 0.28);\n$blue-shadow-transparent: rgba(51, 153, 255, 0.15);\n$blue-gradient: linear-gradient(\n  15.64deg,\n  $secondary-darker 0%,\n  $secondary 100%\n);\n$dark-blue-gradient: linear-gradient(\n  45deg,\n  $light-blue-background 0%,\n  $dark-blue-background 100%\n);\n$stc-button-gradient: linear-gradient(118.71deg, #2341b0 0%, #203a97 100%);\n// COLORS According to the styleguide (https://projects.invisionapp.com/prototype/styleguide2-ckesabylu000l1v01l0fmrao0/play/e4264193)\n$duchess-blue: #233c96;\n$august-blue: #3a83fb;\n$wellborn-blue: #2d9bf0;\n$queenly-grey: #527896;\n$swansong: #f9fafe;\n$noble-grey: #444a57;\n$black: #000000;\n$white: #ffffff;\n\n// --------- BOX SHADOWS ---------\n$image-shadow: 10px 15px 4px 0 $black-shadow;\n$label-shadow: 0 3px 4px 0 $light-shadow;\n$dropdown-shadow: 5px 5px 10px 0 $light-shadow;\n$button-shadow: 7px 7px 4px 0 $black-shadow;\n$button-blue-shadow: 2px 7px 4px 0 lighten($secondary, 23%);\n$button-hover-blue-shadow: 2px 7px 4px 0 lighten($secondary, 20%);\n$button-hover-black-shadow: 1px 3px 4px 0 $black-shadow;\n$button-bod-nav-hover: 0px 2px 4px 0 rgba(0,0,0,0.18);\n$icon-shadow: 0 2px 4px 0 $shadow;\n$widget-shadow: 7px 7px 20px 0 transparentize($secondary, 0.69);\n$modal-shadow: 7px 7px 10px 0 rgba(51, 153, 255, 0.29);\n$disclaimer-shadow: 2px 2px 10px 0 rgba(51,153,255,0.46);\n"],"names":[],"ignoreList":[],"sourceRoot":""}