/*==========================================================================
  Contact page
  ========================================================================== */
#contact

  #map
    width: 100%
    height: 450px

  .contact-content
    position: relative
    background-color: $blue

    &:after
      content: ''
      position: absolute
      right: 0
      top: 0
      display: block
      width: 50%
      height: 100%
      background-color: white

    .contact-info, .contact-form
      position: relative
      z-index: 1


    .contact-info
      width: column(5, 12)
      padding: 72px 0 100px column(1, 12)
      color: white

      h1
        font-size: 2rem
        line-height: 1.4
        margin: 0 0 32px
        color: $lightGrey
        font-family: $fontDroidSans

      h3
        font-size: 0.8rem
        line-height: 1.2
        margin: 100px 0 15px
        font-weight: normal

      p, a
        margin-bottom: 0
        font-size: 0.8rem

      a
        text-decoration: none
        transition: color 0.2s
        color: white

        &:hover
          color: $lightBlue

      .contact-data
        $contact-data--icon-width: 13px
        $contact-data--offset: 18px

        display: flex
        margin-top: 0
        margin-left: calc(-#{$contact-data--icon-width} - #{$contact-data--offset})

        &::before
          content: ''
          display: block
          width: $contact-data--icon-width
          height: 15px
          margin-right: $contact-data--offset
          transform: translateY(7px)
          background-repeat: no-repeat
          background-image: url(/img/contact-address.svg)

      .contact-data--phone
        margin-top: 20px

        &::before
          background-image: url(/img/contact-phone.svg)

      .contact-data--mail
        &::before
          background-image: url(/img/contact-mail.svg)
          transform: translateY(9px)
          height: 10px

      .contact-data--download
        &::before
          background-image: url(/img/icon-pdf.svg)
          transform: translateY(6px)

      .contact-downloads
        margin-top: 20px

      +respond-to-width(1100)
        width: column(5, 12)
        margin-left: 0

    .contact-form
      position: relative
      display: inline-block
      margin-left: column(1, 12)
      width: column(6, 12)
      padding: 72px 0 100px column(1, 12)
      vertical-align: top

      h2
        margin: 0 0 20px
        font-size: 2rem
        line-height: 1.4
        color: $darkBlue
        font-family: $fontDroidSans

      > p
        font-size: 0.9rem
        line-height: 1.2

    +respond-to-width(840)
      .grid-row
        width: 100%

      .background
        display: none

      .contact-info
        width: 100%
        padding: 102px column(1, 12) 100px column(3, 24)
        background-color: $blue

        h3
          margin-top: 60px

      .contact-form
        width: 100%
        padding-right: column(1, 12)
        margin-left: 0
        background-color: white