/* ==========================================================================
   Expend Basic style settings
   ========================================================================== */

html
  -webkit-font-smoothing: antialiased /* 2 */
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility



body
  margin: 0

  font-family: $douvTextFont
  font-size: 16px
  line-height: 26px

  background-color: $douvLightBlue

  font-feature-settings: 'lnum' /* 1 */

*
  ::selection /* 2 */
    background: $blue
    color: white


h1, h2, h3, h4
  font-family: $douvHeaderFont
  font-weight: bold

h1
  font-weight: bold
  font-size: 60px
  line-height: 74px
  letter-spacing: -0.35px

h2
  font-weight: bold
  font-size: 28px
  line-height: 34px
  letter-spacing: -0.14px

/*
 * Set default styling for input and textarea
 *
 * 1. Set font because else the agent will overrule them with an ugly font
 */
input, textarea, select, button
  font-family: $douvTextFont /* 1 */

/*
 * Set default styling for a button
 *
 */
.button
  display: inline-block
  padding: 10px 20px
  border: 1px solid white
  background: none
  border-radius: 3.7px
  text-decoration: none
  color: white
  font-size: 16px
  font-weight: bold
  position: relative
  transition: color 0.3s, background-color 0.3s

  &.arrow
    padding-right: 52px
    min-width: 250px


    // Set up arrow position
    &:after
      position: absolute
      top: 0
      right: 10%
      width: 14px

      font-weight: bold
      font-size: 1.5em
      line-height: 1.7em

      content: '\0203A'
      //+transform(scale(0.6,1.2))

  &.left-arrow
    padding-left: 52px
    min-width: 230px


    // Set up arrow position
    &:before
      position: absolute
      left: 10%
      width: 14px

      font-weight: bold
      font-size: 1.5em
      line-height: 0.95em

      content: '\02039'
      //+transform(scale(0.6,1.2))

  &.stroked.yellow
    border: 1px solid $douvYellow

    &:hover
      background-color: $douvYellow
      color: $douvDarkBlue

  &.blue
    background-color: $douvBlue

    &:hover
      background-color: lighten($douvBlue, 20%)

  &.filled.yellow
    border: none
    color: $douvDarkBlue
    background-color: $douvYellow

    &:hover
      background-color: lighten($douvYellow, 5%)
      color: white


.grid-col
  //border: solid 1px red
  vertical-align: top

.pull-left
  float: left

.pull-right
  float: right

p
  font-size: 16px

.breadcrumb
  .grid-col
    width: column(11, 12)
    margin-left: column(1, 12)
    padding: 48px 0 30px 0

    font-family: $douvHeaderFont
    color: $douvBlue

    a, b
      font-size: 15px
      text-decoration: none
      color: $douvBlue

    span
      padding: 0 10px

  +respond-to-width(840)
    padding-left: column(0.5, 12) !important
    .grid-col
      margin-left: 0
      padding-left: 0