@import url(../webfonts/ss-standard.css)

@font-face
  font-family: 'ProximaNova Italic'
  src: url("../webfonts/ProximaNova-RegItalic.otf") format('opentype')
  font-weight: medium
  font-style: normal

@font-face
  font-family: 'ProximaNova Regular'
  src: url("../webfonts/ProximaNova-Regular.otf") format('opentype')
  font-weight: medium
  font-style: normal

*, *:after, *:before
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box

::selection
  background: $blue
  color: white

html
  font-size: 100%
 
body
 font: 400 1rem/1.5 $font-Lora
  background-color: white
  color: $space-gray
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  margin: 0px
  passing: 0px


p
  font-family sans-serif


header
  font: 400 1rem/1.5 $font-Carrois

.cf
  &:before,
  &:after
    content: " "
    display: table

  &:after
    clear: both

a, a:focus, a:visited
  text-decoration: none
  cursor: pointer

.content
  a:not(.button), a:focus:not(.button), a:visited:not(.button)
    color: $cryogenic-blue

a:not(.button):hover
  text-decoration: underline

h1, h2, h3, h4
  margin: 2.5rem 0
  line-height: $line-height-headings

h1
  font-size: $font-size-h1

h2
  margin-top: 0
  font-size: $font-size-h2

h3
  margin-bottom: 0
  color: darken($space-gray-light, 10%)
  font-size: $font-size-h3
  font-weight: 400
  margin-top: -25px
  padding-bottom: 25px

h4
  font-size: $font-size-h4

ul
  list-style-type: none

  &.unstyled
    list-style-type: none
    padding: 0
  
  &.numbered
    list-style-type: none
    counter-reset: count-list-items
    
    li
      position: relative
      counter-increment: count-list-items
      
      &:not(:last-child)
        padding-bottom: 1.5rem
      
      &:before
        content: counter(count-list-items)
        position: absolute
        left: -2.5rem
        top: 0
        height: 1.875rem
        width: 1.875rem
        padding-top: .3rem
        border-radius: 100%
        color: $space-gray-light
        border: 1px solid $space-gray-lighter
        text-align: center
        font-size: $font-size-small
        background-image: linear-gradient(90deg, rgba($space-gray-lighter, .3), white)
        background-image: -webkit-linear-gradient(90deg, rgba($space-gray-lighter, .3), white)

.content
  margin: 0 auto

  section
    padding: 3.5rem 0
    position: relative
    
    @media $mobile-devices
      padding: 1.5rem 0
    
    &:before
      content: ''
      position: absolute
      top: 100%
      left: 50%
      height: 1px
      width: 30%
      margin-left: -(@width/2)
      background: $space-gray-lighter
    
    h3 + p
      margin-top: .3125rem
      
.single-column
  
  h3:first-of-type
    margin-top: 0