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

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

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


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

body
  margin: 0

  font-family: $fontFamily
  font-size: 16px
  line-height: 1.5rem

  background-color: $neutral-200

  font-feature-settings: 'lnum'


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


h1, h2, h3, h4
  font-family: $fontFamily
  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: 2.125rem
  letter-spacing: -0.14px

a
  text-decoration: none

.content
  > .grid-row
    > .grid-col
      width: 100%
      height: 100%

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

/*
 * Set default styling for a button
 *
 */
.button
  display: inline-block
  padding: 12.5px 20px
  background: none
  text-decoration: none
  color: white
  font-size: 1rem
  line-height: 1.6rem
  font-weight: 500
  position: relative
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s
  text-align: left
  height: 50px
  cursor: pointer
  box-shadow: 0 6px 10px -5px rgba(0,0,0,0.0)

  +respond-to-width(425)
    width: 100%

  &:hover
    box-shadow: 0 6px 10px -5px rgba(0,0,0,0.25)

  &.arrow
    min-width: 200px


    // Set up arrow position
    &:after
      position: absolute
      top: 0
      right: 22px
      width: 16px
      height: 100%

      content: ""
      background-position: center center
      background-repeat: no-repeat
      background-image: url("/img/svg/arrow_white.svg")
      transition: right 0.2s

    &:hover
      &:after
        right: 15px

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


    // Set up arrow position
    &:before
      position: absolute
      top: 0
      left: 22px
      width: 16px
      height: 100%

      content: ""
      background-position: center center
      background-repeat: no-repeat
      background-image: url("/img/svg/arrow_white.svg")
      +transform(scaleX(-1))
      transition: left 0.2s

    &:hover
      &:before
        left: 15px


  &.phone
    min-width: 250px

    // Set up arrow position
    &:after
      position: absolute
      top: 0
      right: 18px
      width: 20px
      height: 100%

      //padding-top: 2rem
      content: ""
      background-position: center center
      background-repeat: no-repeat
      background-image: url("/img/svg/phone_white.svg")
      transition: background-position 0.2s

  &.blue
    background-color: $blue-300

    &:hover
      background-color: lighten($blue-300, 10%)

span.counter
  position: absolute
  display: inline-block
  top: 0.5rem
  width: 2rem
  font-size: 0.9375rem
  font-weight: bold
  line-height: 2rem
  border-radius: 50%
  color: white
  text-align: center
  background-color: $red-500
  margin-left: 5px


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

.pull-left
  float: left

.pull-right
  float: right

.diagonal-line
  position: absolute
  display: block
  width: 100px
  height: 0
  opacity: 0.5
  transform: rotate(-45deg)
  border-top: solid 1px white
  z-index: 20
  &.blue
    opacity: 1
    border-color: $pastelBlue


+respond-to-width(425)
  html
    font-size: 14px