/*==========================================================================
  Landingspage
  ========================================================================== */

.home.global
  .image-wrapper
    padding-bottom: 40%
    background-size: cover
    background-position: 50% 75%
    background-image: url('/img/zuiderbos-header.jpg')

    +respond-to-width(1930)
      background-image: url('/img/zuiderbos-header-1920.jpg')
    +respond-to-width(1370)
      background-image: url('/img/zuiderbos-header-1366.jpg')
    +respond-to-width(800)
      background-image: url('/img/zuiderbos-header-800.jpg')
    +respond-to-width(400)
      background-image: url('/img/zuiderbos-header-400.jpg')

    .grid-row
      +flex(flex-end, center)



    .office-link
      margin-right: column(1, 12)
      background-color: rgba($globalBlue, 0.7)
      padding: 0 30px
      height: 50px
      +flex(center, center)
      color: white
      text-decoration: none
      text-align: center
      font-size: 0.7rem
      font-weight: semi-bold()
      transition: background-color 0.4s
      +respond-to-width(1400)
        margin-right: column(1, 24)

      &:before
        content: ''
        position: relative
        top: 0
        display: inline-block
        margin-right: 10px
        +sprite(-113px -154px, 18px, 18px)

      &:hover
        background-color: $globalBlue

    +respond-to-width(840)
      margin-top: 60px
      height: 0
      padding-bottom: 50%
      .grid-row
        position: relative
        top: -60px
        width: 100%
        background-image: url("/img/forest_top_view_grey.jpg")
        background-size: cover
        background-position: bottom right

      .office-link
        margin-right: 0
        height: 60px
        width: 100%
        font-size: 0.8rem
        background-color: $grayBlue
        &:before
          display: none
        &:hover
          background-color: $grayDarkerBlue

  .left-icon
    position: absolute
    left: column(-1, 5)
    top: 300px
    z-index: 4
    width: 60px
    height: 212px
    &:after
      content: ''
      +sprite(-195px 0, 60px, 212px)
      display: block