/*==========================================================================
  Contact page
  ========================================================================== */
body.contact,
body.offerte
  .content
    //overflow: hidden
    .form-holder
      position: relative
      height: 998px
      background-color: $neutral-200


      .left
        width: column(4, 12)
        padding: 120px 0 0 0
        overflow: visible

        h3
          color: $blue-700
          font-size: 2rem
          font-weight: 500
          line-height: 2.875rem
          margin-top: 0

        p
          color: $pastelBlue
          margin: 0
          span
            color: $blue-300
            font-size: 1.125rem
            font-weight: bold
            line-height: 2rem

            &.letter
              color: $pastelBlue
              font-weight: normal
              margin-right: 20px

          a[href^="mailto"],
          a[href^="tel"]
            color: $blue-300
            font-size: 1.125rem
            font-weight: bold
            line-height: 2rem
            text-decoration: none

        .white-block
          background-color: white
          width: column(6,4)
          height: 304px
          position: relative
          left: column(-1,4)
          margin-top: 120px
          margin-bottom: 75px
          overflow: visible
          z-index: 2
          padding: 60px 0 60px column(5, 6)
          box-shadow: 0 0 100px 0 rgba(0,40,105,0.12)

          +respond-to-width(1440)
            padding-left: column(4.8, 6)

          .person
            //display: inline-block
            width: 60%
            height: 100%
            position: absolute
            top: 0
            left: 0
            z-index: -1
            +inline-flex(center, center)

            +respond-to-width(1440)
              bottom: 0
              width: 70%
              left: -50px

            figure
              position: relative
              width: 75%
              max-width: 350px
              margin-left: auto
              margin-right: auto
              border-radius: 100%
              +inline-flex(center, center)

              // Inside shadow
              &:before
                content: ''
                position: absolute
                top: 0
                z-index: 2
                width: 75%
                height: 100%
                border-radius: 100%
                box-shadow: inset 0 0 10px 5px rgba(0,0,0, 0.05)

              img
                border-radius: 100%
                width: 75%

          h2
            margin-top: 0
            margin-bottom: 5px
            color: $blue-300
            font-size: 1.5rem
            font-weight: bold
            line-height: 2rem

          p
            margin: 0
            color: $pastelBlue
            font-size: 1.125rem
            line-height: 2rem

            span
              font-weight: bold
              line-height: 2rem
              margin-right: 15px

            a
              color: $blue-300
              font-size: 1.125rem
              font-weight: bold
              line-height: 2rem

          a.button
            margin: 25px 0
            background-color: $green
            color: white
            text-decoration: none
            font-size: 1rem
            font-weight: 500
            line-height: 1.1875rem
            padding: 15.5px 20px
            &:hover
              background-color: lighten($green, 10%)

        .bottom-triangle
          display: block
          width: 67px
          height: 67px
          position: absolute
          bottom: 57px
          right: calc(-25% - 17px)
          z-index: 1


      .right
        padding: 120px 0 50px column(2,12)
        height: 100%
        width: column(8, 12)
        background-color: $neutral-400
        color: white
        position: relative
        overflow: visible
        z-index: 0

        &:after
          content: ''
          display: block
          position: absolute
          top: 0
          left: 100%
          width: 30vw
          height: 100%
          background-color: $neutral-400
          z-index: 0

        p
          position: relative
          color: $pastelBlue
          font-size: 1.125rem
          line-height: 2rem
          padding-right: 50px
          margin-bottom: 60px

        a
          text-decoration: none
          color: white

        h3
          color: $blue-700
          font-size: 2rem
          font-weight: 500
          line-height: 2.875rem
          margin-top: 0
          
        h4.thanks
          color: $blue-300
          font-size: 2.875rem
          font-weight: 500
          line-height: 3.375rem
          margin-top: 0
          margin-bottom: 0

      .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: 100%
      background: white url("/img/circles_and_triangles.png")
      height: 762px
      padding: 60px 0 140px 0
      overflow: hidden

      h2
        color: $blue-700
        font-size: 2rem
        font-weight: 500
        line-height: 2.875rem
        margin: 0
        margin-bottom: 34px

      #map
        width: 100%
        height: 480px
        box-shadow: 0 0 100px 0 rgba(0,40,105,0.05)


body.offerte
  .content
    .form-holder
      .left
        .white-block
          a
            color: $green
            font-size: 1.25rem
            font-weight: bold
            line-height: 2rem
            display: block
            margin: 20px 0 30px 0

+respond-to-width(1150)
  body.contact,
  body.offerte
    .content
      .form-holder
        height: auto
        .left
          width: 100%
          +flex()
          .left-content
            width: 50%

          .white-block
            width: 65%
            left: auto
            margin-top: 0
            padding: 60px 30px 60px 35%

        .right
          width: column(14,12)
          margin-left: column(-1,12)
          padding: 50px column(1, 12)

          &:after
            display: none

      .mapholder
        height: auto
        //padding: 10px column(1) 60px column(1)


+respond-to-width(960)
  body.contact,
  body.offerte

    .intro
      padding-bottom: 0

    .content
      .form-holder
        width: 100%

        .left, .right
          width: 100%
          margin-left: 0
          padding-left: column(1)

        .left
          .white-block
            padding: 60px 30px 60px 29%
            .person
              width: 50%
              left: 0

        .right
          padding-right: column(1)


+respond-to-width(840)
  body.contact,
  body.offerte
    .content
      .form-holder
        .left
          padding-left: 0
          display: block
          padding-top: 30px

          .left-content
            width: 100%
            padding-left: column(1)
            +flex()
            flex-wrap: wrap
            padding-bottom: 90px

            h3
              width: 100%
              flex-shrink: 0

            p.adress, .link-holder
              display: inline-block
              width: 49%

          .white-block
            height: auto
            width: 100%
            padding-left: 50%
            margin-bottom: 0

+respond-to-width(450)
  body.contact,
  body.offerte
    .intro
      > .grid-col
        > .grid-row
          .right
            h1
              font-size: 2.125rem
              margin-bottom: 16px

    .content
      .form-holder
        .left
          .left-content
            .link-holder
              width: 100%
          .white-block
            padding: 30px 20px
            text-align: center
            .person
              width: 150px
              left: 0
              position: relative
              height: 150px
              background-color: $neutral-400
              border-radius: 50%
              overflow: hidden
              margin-bottom: 10px
              box-shadow: inset 0 0 10px 5px rgba(0,0,0, 0.05)

              figure
                background-size: 125%
                background-position: 65% top

      .mapholder
        padding: 30px 0

        h2
          padding: 0