@import "thirdparty/normalize"
@import "thirdparty/bourbon/bourbon"
@import "includes/grid"
@import "thirdparty/neat/neat"

@import "thirdparty/flexbox_mixins"
@import "thirdparty/nprogress"
@import "thirdparty/video-js"
@import "includes/typography_settings"
@import "thirdparty/typecsset"
@import "includes/colors"
@import "includes/mixins"



@import "includes/typography"


@import "includes/icons"

@import "includes/forms"
@import "includes/layouts"

@import "modules/styleguide"
@import "modules/header"
@import "modules/footer"
@import "modules/hero"
@import "modules/categories"
@import "modules/search_filters"
@import "modules/nav"
@import "modules/service"
@import "modules/service/favorites"
@import "modules/pagination"
@import "modules/testimonials"
@import "modules/asset_uploader"
@import "modules/form/credit_card"
@import "modules/form/payment_method"


.hero--affiliates
  background: image-url('heroes/affiliates.jpg') center no-repeat
  background-size: cover
  width: 100%
  color: $white
  +mask(#292f38, 0.75)
  +space(margin-bottom)
  a
    color: $white

.hero-header__content--centered
  +outer-container
  min-width: $max-width // forcing non responsive for the moment
  +space(padding-top, 2)
  +space(padding-bottom, 2)
  text-align: center
  position: relative

.hero-header__title
  +span-columns(8 of 12)
  +shift(2)

.hero-header__description
  +span-columns(6 of 12)
  +shift(3)
  +space(margin-bottom)

.hero-header__icon
  +space(height, 3)
  +space(margin-bottom)
  +span-columns(2 of 12)
  +shift(5)
  background-position: center !important

.content
  +outer-container
  min-width: $max-width // forcing non responsive for the moment
  +space(margin-bottom)

.image--mast
  +space(min-height, 14)
  +space(margin-bottom)
  img
    display: block

.block
  +span-columns(6)
  +shift(3)
  +bottom-horizontal-rule(2, 3px)
  &:last-of-type
    +hide-bottom-horizontal-rule

.block__text__heading
  margin-bottom: 0

.block__text__content
  margin-bottom: 0

.block__text
  +span-columns(4 of 6)

.block__aside
  +span-columns(2 of 6)
  text-align: right

.block__icon
  +space(height, 3)
  background-position: center right !important

.block__icon--top
  +space(margin-top)

@mixin button($background: $orange)
  display: block
  border: 0
  box-shadow: inset 0 0 0 0 transparent
  background-color: $background
  border-radius: 4px
  text-align: center
  text-decoration: none
  color: $white
  font-weight: bold
  +space(line-height, 2)
  &:hover
    background-color: lighten($background, 5%)
    text-decoration: none

.button
  +button($orange)

.button--muted
  +button($gray-light)

.button--large
  width: 100%
  margin-left: 0
  +typecsset-font-size($first-font-size)
  +space(line-height, 3)

.hint
  +space(line-height, 2)
  +span-columns(12)
  text-align: center

.container
  +outer-container
  min-width: $max-width

.assumed-user-warning
  background: black image-url('assume-user-eyes.jpg') no-repeat center center
  background-size: cover
  height: 100px

.header-strip
  background-color: $blue
  .strip__close
    float: right
    color: $white
    &:hover
      text-decoration: none
      color: lighten($blue, 30%)

.header-strip__container
  +outer-container
  min-width: $max-width
  text-align: center
  +space(line-height, 2)
  color: $white

.header-strip__action
  color: $white
  text-decoration: underline
  &:hover
    text-decoration: none
    color: $white

.marketing-countdown
  +space(margin-left)
  text-align: center
  float: left

.marketing-countdown__svg
  +space(height, 5)
  display: block
  margin: 0 auto
  +space(margin-bottom)

.marketing-countdown__copy
  +typecsset-font-size($first-font-size)
  color: $green
  display: block
  text-transform: uppercase
  font-weight: bold
  font-style: italic