{"version":3,"file":"../css/types_of_services.css","mappings":"AAIA,mBAGE,oBAFA,aAGA,eAFA,4BAEA,CAGF,cAME,eCwCM,CDvCN,kBAEA,4CARA,aACA,sBACA,8BAEA,iBAMA,UAHA,gBAIA,2BACA,uBATA,WASA,CAEA,uBACE,UACA,wBAEA,4CAEE,SAAQ,CADR,8BACA,CAIJ,sBAEE,kBCjCM,CDoCN,wBADA,sBADA,aAFA,iBAIA,CAGF,qBE3BA,aDZQ,CDyCN,UCWI,CCvCN,eAEA,iBFgCE,UAHA,QAIA,0BACA,uBAHA,SAGA,CAGF,6CEtCA,gBF+BE,SAFA,kBADA,iBAwBA,CAdF,wBAME,eCNI,CDQJ,mBACA,SAGA,0CElBF,aDzCM,CDiDJ,UCHI,CCJN,eAEA,iBFiBE,eADA,gBANA,aAIA,8BAPA,kBAUA,CAGF,2BE9BA,aDvBU,CCwBV,eACA,gBACA,iBF+BA,sBACE,eACA","sources":["webpack://bidxone/./src/sass/plugins/types_of_services.scss","webpack://bidxone/./src/sass/variables.scss","webpack://bidxone/./src/sass/typography.scss"],"sourcesContent":["@import '../variables';\n@import '../typography';\n@import '../responsive-utils';\n\n.types-of-services {\n  display: flex;\n  justify-content: space-evenly;\n  align-items: stretch;\n  flex-wrap: wrap;\n}\n\n.service-card {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 360px;\n  min-height: 560px;\n  background: $white;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 15px 15px 10px 0 $light-shadow;\n  // opacity and transform is set for page load animation\n  opacity: 0;\n  transform: translateY(30px);\n  transition: 0.5s ease-in;\n\n  &--visible {\n    opacity: 1;\n    transform: translateY(0);\n\n    .service-card__title {\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n  }\n\n  &__header {\n    position: relative;\n    background: $primary;\n    height: 190px;\n    background-size: cover;\n    background-position: center;\n  }\n\n  &__title {\n    @include header-2;\n    color: $white;\n    text-align: center;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 90%;\n    opacity: 0;\n    transform: translate(-50%, 0%);\n    transition: 0.5s ease-in;\n  }\n\n  &__subtitle {\n    @include link-text;\n    color: $black;\n    position: absolute;\n    white-space: nowrap;\n    text-align: center;\n    background: $white;\n    padding: 20px;\n    border-radius: 30px;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n    box-shadow: 7px 10px 7px 0 $black-shadow;\n    min-width: 260px;\n    max-width: 100%;\n  }\n\n  &__description {\n    @include body-text;\n  }\n\n  &__button {\n    font-size: 20px;\n    text-align: center;\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","@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":""}