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

  .main-contact-row
    .grid-row
      position: relative
      +flex(space-between, flex-start)

      &:after
        content: ''
        position: absolute
        right: 0
        top: 0
        height: 100%
        background-color: $greyBlue

      .kms-content.left-content
        width: column(5, 12)

      .faq-block, &:after
        width: column(7, 12)

      .branding-logos
        position: absolute
        right: column(-1, 12)
        bottom: 90px
        width: column(1, 12)

        a
          +flex(center, center)
          width: 100%
          padding: 20px 0
          opacity: 1
          transition: opacity 0.3s
          &:before
            content: ''
            display: block

          &.nvm
            &:before
              +sprite(0 -13px, 31px, 36px)

          &.funda
            &:before
              +sprite(0 -52px, 60px, 22px)

          &:hover
            opacity: 0.5

      +respond-to-width(1200)
        display: block

        &:after
          display: none

        .kms-content.left-content, .faq-block
          width: 100%
          padding-left: column(1, 12)
          padding-right: column(1, 12)

        .faq-block
          background-color: $greyBlue

        .branding-logos
          display: none

      +respond-to-width(740)
        width: 100%
        max-width: none

        .kms-content.left-content, .faq-block
          padding-left: column(1, 8)
          padding-right: column(1, 8)

      +respond-to-width(560)
        .kms-content.left-content
          padding-left: 40px
          padding-right: 40px
        .faq-block
          padding: 40px 0

  .secondary-contact-row
    margin-top: -60px
    padding: 160px 0 120px
    background-color: $lighterGrey2

    .contact-information
      width: column(6, 12)

    .contact-form-block
      display: inline-block
      vertical-align: top
      width: column(5, 12)
      margin-left: column(1, 12)
      padding: 40px
      background-color: $greyBluer

      h2
        margin: 0 0 40px
        font-size: 1.4rem
        line-height: 1.2
        +bree
        color: white

      .thanks-message
        padding-bottom: 20px
        h3
          font-size: 1.2rem
          color: white
          margin: 0 0 5px

        p
          color: white

    +respond-to-width(1280)
      .contact-information
        width: column(4, 12)
      .contact-form-block
        width: column(7, 12)

    +respond-to-width(950)
      padding-top: 100px
      padding-bottom: 60px

      .contact-information
        width: 100%

      .contact-form-block
        width: 100%
        margin-left: 0
        margin-top: 60px

    +respond-to-width(740)
      margin-top: 0
      padding-top: 60px

      .contact-information
        padding-top: 0

    +respond-to-width(700)
      margin-bottom: 80px


    +respond-to-width(400)
      margin-bottom: 0
      padding-bottom: 0

      .grid-row
        width: 100%

      .contact-information
        padding: 0 40px 0