@import normalize
@import bourbon
@import grid
@import colors
@import icons
@import mixins
@import typography
@import forms
@import flexbox_mixins
@import 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/*
@import modules/pagination
@import modules/testimonials
@import modules/asset_uploader

@import modules/form/credit_card
@import modules/form/payment_method

@import nprogress
@import video-js
@import jquery.fancybox

.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)

.button
  +span-columns(4)
  +shift(4)
  border: 0
  box-shadow: inset 0 0 0 0 transparent
  background-color: $orange
  border-radius: 4px
  text-align: center
  text-decoration: none
  color: $white
  font-weight: bold
  +space(line-height, 2)

.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