*
  @include box-sizing (border-box)

body, html
  height: 100%
  min-height: 250px

body
  background: $white_pure
  color: $grey-med
  font-family: $font-body-family
  font-size: 16px
  font-weight: $font-light
  margin: 0
  padding: 0
  overflow-x: hidden

h1, h2, h3
  font-family: $font-headlines-family
  margin-top: 0
h1
  font-size: 2.250rem
  font-weight: $font-light
h2
  font-size: 2rem
  font-weight: $font-bold
h3
  font-size: 1.750rem
  font-weight: $font-reg
  margin-top: 0px
h4
  font-weight: $font-light

img
  max-width: 100%
  width: 100%

a
  color: $link--text
  text-decoration: none
  @include transition(100ms, color, ease-out, 0ms)
  &:hover
    color: $link--text--hover

a.underline
  text-decoration: underline

.section
  min-height: 100%
  padding-top: 55px
  padding-bottom: 80px
  position: relative

.section-title
  color: $section-title--text
  font-size: 2.1rem
  line-height: 1.2
  text-align: left
  &.white
    color: $white
  .emphasized
    color: $section-title--text--emphasized

.section-title--actions
  display: flex
  justify-content: space-between
  align-items: center

.container
  margin: 0 auto
  max-width: 980px
  padding-left: 8px
  padding-right: 8px

.grid
  .col
    display: inline-block
    margin-right: -4px
    min-height: 1px
    padding-right: 35px
    vertical-align: top
    &:last-child
      padding-right: 0
  &.two
    .col
      width: 50%
  &.three
    .col
      width: 33.3333%

.center
  text-align: center

.left
  text-align: left

.right
  text-align: right

.icon-space-r
  margin-right: 0.5em

.icon-space-l
  margin-left: 0.5em

.icon-space-r-half
  margin-right: 0.25em

.icon-space-l-half
  margin-left: 0.25em