/*==========================================================================
  Contact page
  ========================================================================== */
.contact, .offer
  .color-wrapper
    background-color: $broosBlue

  .contact-content
    position: relative

    > .grid-row
      display: flex

      .contact-info
        width: column(4, 12)
        margin-left: column(1, 12)
        padding: 72px 0 0 0
        overflow: visible

        h1
          font-size: 2rem
          line-height: 1.2
          color: white
          font-weight: bold()
          margin: 0 0 32px

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

        .image
          position: relative
          width: column(6, 4)
          left: column(-1.5, 6)
          margin-top: 60px

          picture
            img
              width: 100%

        p
          font-size: 0.8rem
          line-height: 1.7
          color: white

          span
            display: inline-block
            margin-left: 10px
            color: $agrimacBlue

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

            &:hover
              color: rgba(white, 0.6)

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

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

      &:after
        content: ''
        position: absolute
        left: 0
        top: 0
        width: 40px
        height: 100%
        background:
          image: url("/img/horizontal-gradient.png")
          size: contain

      &:before
        content: ''
        position: absolute
        left: 0
        top: 0
        width: column(7,5)
        height: 100%
        background: $broosDarkBlue
        z-index: 0

      h2
        font-size: 2rem
        line-height: 1.2
        margin: 0 0 32px
        color: white
        font-weight: bold()
        position: relative

      p
        font-size: 0.9rem
        line-height: 1.2
        color: white

      .submit
        //text-align: right

      .button
        color: white
        font-size: 0.7rem
        font-weight: semi-bold()
        text-transform: uppercase

    +respond-to-width(840)
      .background
        display: none

      > .grid-row
        width: 100%
        display: block

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

        h3
          margin-top: 60px

        .image
          display: none

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