/*==========================================================================
  Contact page
  ========================================================================== */
body.contact
  position: relative
  &:before
    content: ''
    position: absolute
    display: block
    right: 0
    bottom: 774px
    width: 648px
    height: 648px
    background: url('/img/svg/big_hamer.svg')
    background-size: 130%
    background-position: 170% -25%
    background-repeat: no-repeat
    transform: scaleX(-1)

    +respond-to-width(950)
      display: none

  div.contact-header
    width: 100%
    position: relative
    overflow: visible

    h1
      color: #2D323C
      font-size: 26px
      font-weight: 600
      line-height: 41px
      margin-top: 15px
      margin-bottom: 30px
      width: 80%
      display: inline-block

    a.button
      display: inline-block
      position: absolute
      right: 0
      margin-top: 15px

  .contact-content
    width: 100%
    background-color: white
    box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
    padding: 30px

    > .grid-row
      width: 100%
      +flex()

      .left, .right
        width: 50%
        vertical-align: top

        h3
          color: #696E78
          font-size: 15px
          font-weight: 600
          line-height: 24px
          //text-transform: uppercase

      .left
        margin-right: 60px
        h2
          color: #3C414B
          font-size: 20px
          font-weight: 600
          line-height: 32px

        p
          color: #696E78
          font-size: 16px
          line-height: 24px

          //&.contact-data
          //  columns: 100px 2

          a
            text-decoration: none
            color: $blue

        hr
          margin: 30px 0


      .right
        overflow: visible
        .form
          .form-element
            &.has-error
              input
                border: solid 1px rgba(#F95D5D, 0.3)

              span.error-message
                background-color: rgba(#F95D5D, 0.3)
                display: block
                padding: 5px 10px
                font-size: 12px
                color: #d40606
                border-radius: 0 0 5px 5px

                &:first-letter
                  text-transform: capitalize

            &:first-of-type
              margin-top: 35px

        .submit
          overflow: visible
          margin-top: 0
          label
            text-transform: none
            input[type='submit']
              display: none

            a
              line-height: 1.6

  .mapholder
    width: 100%
    height: 380px
    margin-bottom: 60px

    #map
      width: 100%
      height: 108%


+respond-to-width(1100)
  body.contact
    .contact-content
      > .grid-row
        flex-direction: column
        .left, .right
          width: 100%
          margin-right: 0

        .right
          border-top: 2px solid #E0E1E3

+respond-to-width(950)
  body.contact
    div.contact-header
      padding: 0 30px
      a.button
        right: 30px

+respond-to-width(425)
  body.contact
    div.contact-header
      padding: 0 20px
      a.button
        right: 20px
    .contact-content
      padding: 20px
    .mapholder
      margin-bottom: 0