.contact
  @extend .page

  .page-impression
    padding-bottom: 0

    #map
      >div
        height: 104.7% !important

  .content
    margin-top: 120px

    .content-divider
      +flex(space-between, flex-start)

      .contact-info, .faq
        width: 50%

        p
          margin-top: 0

          strong
            color: $darkBlue

          a
            border-bottom: none

        .button
          margin-top: 15px

  .location-description, .contact-form
    color: $darkGray
    font-size: 0.9rem

    h2
      font-size: 1rem
      max-width: 580px
      color: $darkBlue
      margin: 0

    p
      margin: 0

  .contact-form
    margin-top: 40px
    padding-bottom: 170px

  .location-description
    margin-top: 20px


  .form
    max-width: 420px
    .form-element
      label
        color: $darkBlue
        font-weight: semi-bold()
        font-size: 0.9rem

  &[class^='vso']
    .content
      .content-divider
        .contact-info, .faq
          p
            strong
              color: $darkTurquoise
    .location-description, .contact-form
      h2
        color: $darkTurquoise
    .form
      .form-element
        label
          color: $darkTurquoise

  &[class^='services']
    .content
      .content-divider
        .contact-info, .faq
          p
            strong
              color: $servicesBlue
    .location-description, .contact-form
      h2
        color: $servicesBlue
    .form
      .form-element
        label
          color: $servicesBlue


  /* Mobile view
    ========================================================================== */
  +respond-to-width(840)
    .grid-row
      .page-impression
        +order(2)
      .main
        +order(1)

    .content
      margin-top: 0

    .location-description
      padding-bottom: 0

  +respond-to-width(600)
    .content
      .content-divider
        display: block

        .contact-info, .faq
          width: 100%

        .faq
          margin: 60px 0

          p
            max-width: 280px