{"version":3,"file":"../css/featured_properties.css","mappings":"AAMA,qBAUE,qBCyCM,CD3CN,kBAGA,iDAJA,eATiB,CAWjB,gBAHA,iBAKA,CEmCA,wBF9CF,qBAEI,2BC6BsB,CD5BtB,aAUF,iCACE,yBACA,kBAGF,kDAUE,mBAHA,aACA,sBAGA,aAFA,2BAGA,oBEgBF,wBF5BA,kDAEI,aACA,iBACA,qBAUF,iEAKE,aAEA,gBADA,UACA,CEOJ,wBFdE,iEAEI,cAQJ,uDAIE,wBADA,sBAFA,YAIA,wBACA,uBAJA,UAIA,CAWF,+DAgBE,eCxBE,CD0BF,mBACA,gDGnEJ,aFZQ,CDyEJ,cG5DJ,eH2DI,eG1DJ,gBHwCI,gBACA,qBGxCJ,iBHyCI,iBAkBA,iBAGA,kBApBA,kBAkBA,SAIA,CEhCJ,wBFaE,+DAEI,eACA,gBACA,qBACA,iBAGA,mBAFA,iBACA,iBACA,EAcJ,2DAqBE,mBALA,eC9CE,CD6CF,aCjGI,CDsGJ,aGzFJ,eHmFI,eGlFJ,gBHwCI,gBACA,qBGxCJ,iBHyCI,iBA4CA,iBACA,gBAFA,kBA1CA,kBAsCA,gBADA,kBASA,CExDJ,wBFmCE,2DAII,aCtFE,CDqFF,eAIA,YADA,iBAEA,iBAHA,kBAHA,WAMA,EAgBJ,+DGnEF,aFvBU,CEwBV,eACA,gBACA,iBHiEI,eAOA,kBEnEJ,wBF2DE,+DAGI,eACA,kBAOJ,qEAEE,oBADA,aAEA,qBACA,8BAIA,0FACE,qBAEF,8FACE,aChII,CDqIV,+CAEE,SACA,SAFA,kBAGA,2BAEA,2DACE,aACA,uBAEA,qBADA,SACA,CAEA,kEAQE,mBAFA,YACA,mBAEA,kBARA,cAEA,YAEA,SADA,UAFA,UAOA,CAEA,wEACE,UAIJ,8DACE,cAEA,kFAEE,mBADA,SCtKA,CD6KR,gDAEE,UC3HI,CD8HJ,eAJA,eAEA,kBACA,SACA,CAEA,sDACE,UAGF,sDACE,WAIJ,gCACE,cAEA,kCACE,WAlMa,CE8BjB,wBFmKE,kCAII","sources":["webpack://bidxone/./src/sass/plugins/featured_properties.scss","webpack://bidxone/./src/sass/variables.scss","webpack://bidxone/./src/sass/responsive-utils.scss","webpack://bidxone/./src/sass/typography.scss"],"sourcesContent":["@import '../variables';\n@import '../typography';\n@import '../responsive-utils';\n\n$PROPERTIES_WIDTH: 550px;\n\n.featured-properties {\n  @include mobile {\n    border: $blue-shadow-transparent;\n    margin: 0 5%;\n  }\n\n  position: relative;\n  max-width: $PROPERTIES_WIDTH;\n  border-radius: 8px;\n  overflow: hidden;\n  background-color: $white;\n  box-shadow: 10px 10px 10px 0 $blue-shadow-transparent;\n\n  .slick-list {\n    border: 1px solid #d5eaff;\n    border-radius: 8px;\n  }\n\n  .featured-properties-element {\n    @include mobile {\n      height: unset;\n      min-height: 346px;\n      padding-bottom: 40px;\n    }\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    height: 550px;\n    padding-bottom: 40px;\n\n    &__img-container {\n      @include mobile {\n        height: 200px;\n      }\n\n      height: 340px;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    &__img {\n      height: 100%;\n      width: 101%;\n      background-size: cover;\n      background-position: center;\n      transform-origin: center;\n      transition: 0.3s ease-in;\n    }\n\n    @mixin card-header {\n      @include header-2;\n      font-weight: 500;\n      letter-spacing: 0.13px;\n      line-height: 35px;\n      text-align: center;\n    }\n\n    &__opening-bid {\n      @include mobile {\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.13px;\n        line-height: 10px;\n        margin-top: -25px;\n        padding: 10px 40px;\n        margin-bottom: 10px;\n      }\n\n      @include card-header;\n      font-size: 20px;\n      color: darken($grey, 5%);\n      margin-top: -50px;\n      z-index: 1;\n      background: $white;\n      padding: 16px 50px;\n      border-radius: 20px;\n      box-shadow: 2px 2px 8px 2px $blue-shadow;\n    }\n\n    &__address {\n      @include mobile {\n        width: 325px;\n        font-size: 13px;\n        color: $primary;\n        padding: 10px 20px;\n        line-height: 13px;\n        height: 50px;\n        min-height: unset;\n      }\n\n      @include card-header;\n      transition: ease-in;\n      text-align: left;\n      font-size: 20px;\n      color: $primary;\n      background: $white;\n      padding: 20px 30px;\n      line-height: 20px;\n      min-height: 80px;\n      display: flex;\n      align-items: center;\n    }\n\n    &__description {\n      padding: 0 20px;\n      @include mobile {\n        font-size: 13px;\n        line-height: 14px;\n      }\n\n      @include body-text;\n      text-align: center;\n    }\n\n    &__buttons-container {\n      display: flex;\n      align-self: flex-end;\n      transform: scale(1.2);\n      transform-origin: right bottom;\n    }\n\n    &:hover {\n      .featured-properties-element__img {\n        transform: scale(1.1);\n      }\n      .featured-properties-element__address {\n        color: $secondary;\n      }\n    }\n  }\n\n  .featured-properties-dots {\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n\n    .slick-dots {\n      display: flex;\n      justify-content: center;\n      padding: 0;\n      list-style-type: none;\n\n      button {\n        display: block;\n        width: 10px;\n        height: 10px;\n        padding: 0;\n        margin: 0;\n        border: none;\n        border-radius: 100%;\n        background: lighten(#888, 25%);\n        color: transparent;\n\n        &:focus {\n          outline: 0;\n        }\n      }\n\n      li {\n        margin: 0 10px;\n\n        &.slick-active button {\n          opacity: 1;\n          background: $primary;\n        }\n      }\n    }\n  }\n\n  .featured-properties-arrow {\n    font-size: 32px;\n    color: $white;\n    position: absolute;\n    top: 170px;\n    cursor: pointer;\n\n    &--prev {\n      left: 22px;\n    }\n\n    &--next {\n      right: 22px;\n    }\n  }\n\n  .preloaded {\n    width: calc(#{$PROPERTIES_WIDTH} * 30);\n    // in case 30 properties will be added to carousel\n    a {\n      width: $PROPERTIES_WIDTH;\n\n      @include small-mobile {\n        width: 100vw;\n      }\n    }\n  }\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","$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 '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"],"names":[],"ignoreList":[],"sourceRoot":""}