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

/*
 * Set up the html
 *
 * 1. Makes sue that some fonts are better rendered
 */

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


/*
 * Set up the body
 *
 * 1. Set font to lining figures
 */

body
  margin: 0

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

  background-color: $douvLightBlue

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

/*
 * Set default settings for all elements
 *
 * 1. Default selection styling
 *
 */
*
  ::selection /* 2 */
    background: $douvBlue
    color: white


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

h1
  font-weight: bold
  font-size: 70px
  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: 600
  position: relative
  transition: color 0.3s, background-color 0.3s
  text-align: center

  &.arrow
    min-width: 250px


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

      padding-top: 2em
      content: ""
      background-position: -8px center
      background-size: 102px 12.5px
      background-repeat: no-repeat
      background-image: url("/img/svg/button_arrow_right.svg")
      transition: background-position 0.2s

  &.left-arrow
    min-width: 230px
    padding-left: 8%


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

      padding-top: 1.7em
      content: ""
      background-position: -8px center
      background-size: 102px 12.5px
      background-repeat: no-repeat
      background-image: url("/img/svg/button_arrow_right.svg")
      +transform(scaleX(-1))
      transition: background-position 0.2s

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

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

      &:after
        background-position: -60px center

  &.blue
    background-color: $douvBlue

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

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

    &:before
      background-position: -60px center

    &:after
      background-position: -60px center

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

      &:before
        background-position: -8px center
      &:after
        background-position: -8px center


.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

span
  &.email
    display: inline-block
    width: 75px
    height: 38px
    position: relative
    background-image: url(/img/svg/icons.svg)
    background-position: left top
    background-repeat: no-repeat
    background-size: 300px
    margin: -10px 0

  &.offerte
    display: inline-block
    width: 75px
    height: 38px
    position: relative
    background-image: url(/img/svg/icons.svg)
    background-position: -89px top
    background-repeat: no-repeat
    background-size: 300px
    margin: -10px 0

  &.cooling
    display: inline-block
    width: 60px
    height: 55px
    position: relative
    background-image: url(/img/svg/icons.svg)
    background-position: -8px -310px
    background-repeat: no-repeat
    background-size: 325px
    margin: -5px 0

  &.events
    display: inline-block
    width: 60px
    height: 55px
    position: relative
    background-image: url(/img/svg/icons.svg)
    background-position: -94px -310px
    background-repeat: no-repeat
    background-size: 325px
    margin: -5px 0

  &.mobility
    display: inline-block
    width: 60px
    height: 55px
    position: relative
    background-image: url(/img/svg/icons.svg)
    background-position: -175px -305px
    background-repeat: no-repeat
    background-size: 325px
    margin: -5px 0

  &.transportservice
    display: inline-block
    width: 60px
    height: 55px
    position: relative
    background-image: url(/img/svg/icons.svg)
    background-position: -260px -310px
    background-repeat: no-repeat
    background-size: 325px
    margin: -5px 0


html.ie
  span
    &.cooling
      background-position: -47px -305px
      background-size: 400px

    &.events
      background-position: -123px -305px
      background-size: 400px

    &.mobility
      background-position: -214px -300px
      background-size: 400px

    &.transportservice
      background-position: -299px -305px
      background-size: 400px