/*==========================================================================
  Contact page
  ========================================================================== */

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

#contact

  .kms-content
    text-align: left !important

  #map
    width: 100%
    height: 450px

  .contact-content
    position: relative
    background-color: $color-secondary-600

    &: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
      padding-left: calc(#{$contact-data--icon-width} + #{$contact-data--offset})

      h1
        font-size: 1.7rem
        line-height: 1.4
        color: white
        margin: 0 0 32px

      h3
        font-size: 0.8rem
        line-height: 1.2
        color: white
        opacity: 0.5
        text-transform: uppercase
        font-weight: semibold()
        margin: 100px 0 15px

      p
        margin-top: 0

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

      a
        cursor: pointer
        text-decoration: none
        transition: color 0.2s

        &:hover
          color: $color-secondary-300

    .contact-data
      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)
        opacity: 0.75

    .contact-data--po-box
      margin-top: 30px !important

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

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

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

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

      .opening-hours
        list-style: none
        margin: 0
        padding: 0

        li
          color: $lightBlue
          font-size: 0.9rem

          .day
            display: inline-block
            width: 175px

            +respond-to-width(400)
              width: 130px

          &.active
            color: white
            font-weight: bold()

      +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: 1.7rem
        line-height: 1.4

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

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

      &:after
        display: none

      .contact-info
        width: 100%
        padding: 72px column(1, 12) 100px
        background-color: $color-secondary-600

        h3
          margin-top: 60px

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