/*==========================================================================
  Contact page
  ========================================================================== */
body.contact
  .content
    padding-bottom: 120px
    .form-holder
      position: relative
      top: -60px
      height: 500px
      background-color: white
      box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05)

      h3
        color: $douvBlue
        font-weight : bold
        font-size : 26px

      .left
        width: column(7.5, 12)
        padding: 50px 0 50px column(0.5, 12)
      .right
        padding: 50px 50px 50px column(1, 12)
        height: 100%
        width: column(4.5, 12)
        background: $douvBlue url('/img/bg_repeat.png') repeat
        color: white

        .contact-dude
          display: block
          position: absolute
          width: 130px
          height: 120px
          text-align: center
          right: 50px
          top: 90px

          .img-holder
            width: 100px
            height: 100px
            margin: 0 auto
            border-radius: 50%
            background: #E5E5E5 url('/img/Mark_Douven.png') repeat 50% 6%
            background-size: 200%

          p
            margin: 3px 0

        p
          position: relative

        a
          text-decoration: none
          color: white

        h3
          color: white

        span
          display: block
          position: absolute
          width: 17px
          height: 17px
          margin-top: 5px
          left: -50px

          background-image: url(/img/svg/contact_icons.svg)
          background-position: left top
          background-repeat: no-repeat
          background-size: 100%

          &.location
            background-position: left top

          &.phone
            background-position: left -27px

          &.fax
            background-position: left -55px

          &.mail
            background-position: left -82px

      .form-left, .form-right
        width: column(3, 7)

      .form-right
        margin-left: column(0.5, 7)

        .submit
          margin-top: 25px
          width: column(1.5, 3)
          min-width: column(1.5, 3)

    .mapholder
      width: column(11)
      background-color: white
      box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05)
      height: 500px
      border-bottom: solid 4px $douvYellow
      overflow: hidden

      #map
        width: 100%
        height: 105%

+respond-to-width(1400)
  body.contact
    .content
      padding-bottom: 0
      .form-holder
        +flex()
        flex-direction: column-reverse
        height: auto
        .left, .right
          width: 100%

        .left
          padding: 0 0 40px column(0.5, 12)

          form
            .grid-row
              padding-left: 0
              padding-right: 0

        .right
          padding: 0 50px 40px column(1, 12)
          > p
            width: 35%
            display: inline-block

          .contact-dude
            top: 85px

        //.left
        //  form
        //    width: 95%
        //    .grid-row
        //      padding-left: 0
        //      padding-right: 0
        //
        //      .form-left, .form-right
        //        width: 96%
        //        margin-left: 0


+respond-to-width(1030)
  body.contact
    .content
      padding-bottom: 0
      .form-holder
        .right
          .contact-dude
            right: 20px

+respond-to-width(840)
  body.contact
    .content
      padding-bottom: 0
      .form-holder
        padding-left: 0
        padding-right: 0
        top: 0

        .left, .right
          width: 100%



      .mapholder
        width: 100%
        padding-left: 0
        padding-right: 0
        border-top: solid 1px $douvYellow

+respond-to-width(740)
  body.contact
    .content
      .form-holder
        .right
          span
            left: -25px

          .contact-dude
            width: 165px
            top: 15px
            right: 30px
            +flex(space-between, center)
            flex-direction: row-reverse

            .img-holder
              width: 90px
              height: 90px
              flex-shrink: 0
          p
            width: 40%
            &:last-child
              width: 55%

+respond-to-width(550)
  body.contact
    .content
      .form-holder
        .right
          p
            width: 100%

+respond-to-width(435)
  body.contact
    .content
      .form-holder
        .form-left, .form-right
          width: 96%
          margin-left: 0

+respond-to-width(435)
  body.contact
    .content
      .form-holder
        .right
          padding-bottom: 30px
          p
            padding-left: column(1, 12)

            &:last-child
              width: 100%

          h3
            margin-bottom: 0

          .contact-dude
            display: none

          span
            left: -5px