.contact-row
  background-color: $background
  padding: 120px 0
  position: relative

  .contact-text
    margin-left: $contentGrid

    .block
      padding: 24px
      background: $yellow
      margin-bottom: 5px
      position: relative
      >div
        +flex(initial, initial)

      .hover-block
        +position(absolute, null 0 0 0)
        background: #EDEDED
        width: 100%
        height: 0
        +transition(height 0.5s)
        z-index: 1

      .border-hover
        background: $yellow
        display: block
        z-index: 2
        +transition(all 0.15s)

        &.border-right
          +position(absolute, 0 0 null null)
          width: 4px
          height: 0
          +transition-delay(0.3s)

        &.border-bottom
          +position(absolute, null 0 0 null)
          height: 4px
          width: 0
          +transition-delay(0.45s)

        &.border-left
          +position(absolute, null null 0 0)
          width: 4px
          height: 0
          +transition-delay(0.6s)

        &.border-top
          +position(absolute, 0 null null 0)
          height: 4px
          width: 0
          +transition-delay(0.75s)

      h4
        +font-bold(24px, 28px)
        padding-left: calc(15% + 24px)
        margin: 14px 0

      p, a
        +font-default(18px, 24px)
        width: 80%
        display: inline-block
        margin: 14px 0
        position: relative
        z-index: 9

      a
        text-decoration: underline

    .icon-container
      display: inline-block
      width: 15%
      text-align: center
      +flex(center, center)
      +align-self(flex-start)
      margin: 18px 24px 0 0
      position: relative
      z-index: 9

      &.extra
        margin-top: 20px

      span
        display: inline-block

    .location
      span
        +sprite(-148px 0, 14px, 21px)

    .phone
      span
        +sprite(-68px 0, 17px, 17px)

    .mail
      span
        +sprite(-93px 0, 19px, 12px)

    .kvk
      span
        +sprite(-118px 0, 26px, 11px)

    .disclaimer
      .arrow
        +blackArrowRight
        float: right
        +transition(background-position 0.5s)

      span:not(.arrow)
        +sprite(-198px 0, 22px, 26px)
        +transition(background-position 0.5s)

      &:hover
        .hover-block
          height: 100%
        .border-right, .border-left
          height: 100%
        .border-top, .border-bottom
          width: 100%
        .arrow
          background-position: -69px -39px
        span:not(.arrow)
          background-position: -198px -30px

    .av
      .arrow
        +blackArrowRight
        float: right
        +transition(background-position 0.5s)

      span:not(.arrow)
        +sprite(-168px 0, 22px, 23px)
        +transition(background-position 0.5s)

      &:hover
        .hover-block
          height: 100%

        .border-right, .border-left
          height: 100%
        .border-top, .border-bottom
          width: 100%

        .arrow
          background-position: -69px -39px
        span:not(.arrow)
          background-position: -168px -30px


  .contact-form
    margin-left: $contentGrid

    h2
      +font-bold(60px, 60px)

    form
      width: 100%
      position: relative
      >span
        position: absolute
        right: 0
        +font-light(14px, 21px)
        em
          color: $fontRed
          +font-light(16px, 21px)
          margin-right: 10px
      label
        width: 100%
        display: block
        margin-bottom: 5px
        span
          width: 100%

        span
          +font-light(16px, 21px)
          margin-left: 10px

          em
            color: $fontRed
            +font-light(16px, 21px)

        input, textarea
          width: calc(100% - 20px)
          padding: 10px
          +font-light(14px, 18px)
          border-radius: 2px
          border: 1px solid #CCCCCC
          outline: none

          +placeholder
            color: #AAAAAA

          &:focus
            box-shadow: 0 0 0px 0px #fff

        textarea
          min-height: 100px
          resize: none

      .submit
        +flex(center, center)
        +position(absolute, null -4% -20px null)
        cursor: pointer
        +transform(scale(1.0))
        +transition(all 0.5s)
        &:hover
          +transform(scale(1.1))

        input[type=submit]
          outline: none
          +flex(center, center)
          +font-light(18px, 21px)
          background-color: $yellow
          height: 50px
          padding: 0 30px
          margin: 0
          border: none
          cursor: pointer
          -webkit-appearance: none //iPad submit button
          border-radius: 0px


          &:focus
            box-shadow: 0 0 0px 0px #fff

        div
          height: 50px
          width: 50px
          background-color: $yellow
          +flex(center, center)
          margin-left: 3px
          position: relative

          span
            +blackArrowRight
            display: inline-block
            +transform(scale(0.8))

+media-query(1100px)
  .contact-row
    .contact-text, .contact-form
      width: $contentGrid*10
      max-width: 700px
      float: none
      margin: 0 auto

      .block
        p, a
          font-size: 15px
          line-height: 16.36364px

    .contact-form
      margin-top: 100px