.contact-row
  padding: 100px 0 100px 0
  background: white
  position: relative
  z-index: 2

  #contact
    h4
      +font-black(18px, 18px)
      color: $blue
      margin-bottom: 55px

    h3
      color: $blue
      +font-bold(18px, 24px)
      opacity: 0
      margin-bottom: 20px
      +transition(all 0.3s)
      position: absolute

    form
      position: relative
      label
        position: absolute
        width: 200px
        text-align: right
        left: - 216px
        margin-top: 8px
        +font-bold(16px, 16px)
        color: $blue
        cursor: pointer

        &.alert
          color: $red

      input
        +font-default(18px, 34px)
        width: calc(100% - 10px)
        margin-bottom: 12px
        padding-left: 8px
        border: 1px solid #ccc

        &.alert
          border: 1px solid $red

      textarea
        width: calc(100% - 11px)
        +font-default(18px, 34px)
        padding-left: 8px
        resize: none
        border: 1px solid #ccc
        min-height: 160px
        height: 166px
        &.alert
          border: 1px solid $red

      input[name='submit']
        background: $blue
        margin-top: 45px
        border: none
        outline: none
        padding: 0
        width: 100%
        border-radius: 6px
        color: white
        cursor: pointer
        -webkit-appearance: none //iPad submit button
        +font-bold(20px, 54px)
        &:hover
          background: darken($blue, 2%)

        &:active
          background: darken($blue, 5%)

      .alertMessage
        position: absolute
        right: -40px
        margin-top: 3px

        &:hover
          p
            margin-left: 0
            opacity: 1

        p
          background: #F2F2F2
          border-radius: 3px
          +font-default(15px, 15px)
          color: $gray
          padding: 10px 14px
          margin: 0
          position: absolute
          z-index: 999
          top: -50px
          display: inline-block
          white-space: nowrap
          opacity: 0
          margin-left: -20px
          +transition(all 0.3s)
          pointer-events: none

          &:after
            content: ''
            width: 0
            height: 0
            border-left: 12px solid transparent
            border-right: 12px solid transparent
            border-top: 12px solid #F2F2F2
            position: absolute
            bottom: -12px
            left: 6px

        span
          border: 2px solid $red
          border-radius: 9999px
          +font-bold(14px, 14px)
          color: $red
          width: 28px
          height: 28px
          +flex(center, center)

  #reference
    min-width: 340px
    max-width: 475px

    h4
      +font-bold(17px, 18px)
      margin: 20px 0 0
      color: $gray
    >*
      padding-left: 8.5%

    .person-reference
      +flex(flex-start, center)
      .image
        width: 50px
        height: 50px
        display: inline-block
        margin-right: 20px
        img
          width: 100%

      p
        display: inline-block
        margin: 0
        +font-bold(18px, 18px)
        color: $blue
        span
          +font-default(15px, 18px)
          color: $gray

    .person-text
      +font-light(22px, 32px)
      position: relative
      margin-top: 5px
      margin-bottom: 45px

      &:before
        content: '“'
        position: absolute
        +font-light(24px, 32px)
        margin-left: -7px

      &:after
        content: '”'
        position: absolute
        +font-light(24px, 32px)

    hr
      border-top: 1px solid #ccc
      border-left: none
      border-right: none
      border-bottom: none
      margin-bottom: 45px

    .list-text
      color: $orange
      +font-bold(16px, 22px)
      margin: 0 0 22px 0

    ul
      padding: 0
      list-style: none
      margin-bottom: 65px

      li
        +font-default(16px, 22px)
        margin-bottom: 20px
        color: $gray

        &:before
          content: ''
          +check
          display: inline-block
          margin-right: 15px

    .terms
      +font-default(15px, 15px)
      color: $lightGray
      +flex(flex-start, center)
      +transition(color 0.2s)
      margin-top: 40px

      &:hover
        color: black
        //.icon-circle
        //  border: 1px solid black
        //  span


      .icon-circle
        +flex(center, center)
        width: 20px
        height: 20px
        border: 1px solid $lightGray
        border-radius: 9999px
        margin-right: 10px
        +transition(border 0.2s)

        span
          +menuIcon

    .contact-info
      margin-top: 40px

      h5
        +font-bold(18px, 24px)
        margin-bottom: 20px

      p,a
        +font-default(16px, 21px)

      a
        color: $blue

      p:first-child
        margin-right: 30px
        color: $gray

  .certificates
    margin-top: 40px

  .certificates__name
    display: inline-block
    +font-default(16px, 21px)
    padding: 10px


+media-query(950px)
  .contact-row
    #contact
      margin-bottom: 80px
    #contact, #reference
      width: $contentGrid*8
      margin-left: $contentGrid*3

    #reference
      .contact-info
        p, a
          +font-default(18px, 24px)


+media-query(515px)
  .contact-row
    #contact
      margin-left: $contentGrid*4

    #reference
      width: $contentGrid*12
      margin-left: $contentGrid
      ul
        li
          +font-default(18px, 18px)

      .terms
        +font-default(18px, 18px)

+media-query(420px)
  .contact-row
    #contact
      width: $contentGrid*12
      margin-left: $contentGrid

      form
        label
          position: initial