.trial-form-row, .contact-form
  position: relative
  h1
    text-align: center
    +font-light(36px, 36px)
    color: $darkBlue
    padding: 35px 0 60px
    span
      color: $fellOrange
      +font-semi-bold(36px, 36px)

  .container
    background-color: $lightBlue
    width: $contentGrid*8
    margin: auto
    padding: 60px 0

    .inner
      width: calc(100% / 8 * 4)
      margin: 0 25%

      h3
        +font-light(28px, 33px)
        color: white
      h4
        +font-light(21px, 32px)
        color: white
        margin-bottom: 30px
        display: none

      .loading
        .sk-cube-grid
          width: 80px
          height: 80px
          margin: 65px auto 45px
          position: relative

          .icon
            position: absolute
            width: 100%
            height: 100%
            left: 0
            top: 0
            z-index: 2
            .line
              width: 9px
              height: 25px
              background-color: white
              position: absolute
              +translate3dRotate(0,0,0, 30deg)
              top: 25px
              left: 20px
              +transition(all 0.3s)
              +animation(animate-lines 2.2s infinite linear)
              +animation-delay(0s)
              &:nth-child(2)
                +animation-delay(0.1s)
                left: 36px
              &:nth-child(3)
                +animation-delay(0.2s)
                left: 52px
          .sk-cube
            width: 33%
            height: 33%
            background-color: $orange
            float: left
            +animation(sk-cubeGridScaleDelay 2.2s infinite ease-in-out)

          .sk-cube7
            +animation-delay(0s)
          .sk-cube4, .sk-cube8
            +animation-delay(0.1s)
          .sk-cube1, .sk-cube5, .sk-cube9
            +animation-delay(0.2s)
          .sk-cube2, .sk-cube6
            +animation-delay(0.3s)
          .sk-cube3
            +animation-delay(0.4s)

      .message-response
        .button
          width: 100%
          max-width: 240px
          margin-top: 15px
          background: $orange
          +transition(all .3s)
          border-radius: 4px
          display: inline-block
          a
            +font-semi-bold(21px, 21px)
            font-size: 18px
            color: white
            padding: 15px 25px
            +flex(space-between, center)
            &:after
              content: ''
              +arrowWhite
              +translate3d(0,0,0)
              +transition(all .3s)
          &:hover
            background-color: $fellOrange
            a:after
              +translate3d( 5px, 0, 0)
        p
          +font-default(21px, 28px)
          font-size: 16px !important
          line-height: 24px !important
          color: white
        .info
          p
            +font-default(21px, 28px)
            font-size: 16px !important
            line-height: 30px !important
            color: white
            a

            strong
              color: $gray
              display: inline-block
              width: 140px
            span
              display: block
              margin-bottom: 20px
              color: white
              font-size: 16px !important
              line-height: 30px !important
              a
                color: white
                font-size: 16px !important
                line-height: 30px !important
                border-bottom: 1px dashed white

              strong
                +font-bold()
                color: $gray
                font-size: 17px !important
                line-height: 30px !important
  .form
    .in-use
      background-color: $lighterBlue
      padding: 18px 20px
      margin-bottom: 20px

      p
        +font-light(21px, 28px)
        font-size: 15px !important
        line-height: 22px !important
        color: white
        margin: 0
      ul
        list-style: none
        padding-left: 25px
      li
        +font-default(21px, 32px)
        font-size: 16px !important
        line-height: 28px !important
        color: white
        margin-bottom: 5px
        cursor: pointer
        &:before
          content: '•'
          display: inline-block
          margin-right: 15px
          font-size: 28px !important
          line-height: 16px !important
          color: white

        a, span
          +font-default(21px, 32px)
          font-size: 16px !important
          line-height: 28px !important
          border-bottom: dashed 1px white
          color: white

    .form-element
      margin-bottom: 15px
      input, textarea
        margin-top: 5px

      &.username
        .sub-text
          +font-light()
          font-size: 15px !important
          line-height: 22px !important
          color: white
          strong
            +font-semi-bold()
            font-size: 15px !important
            line-height: 22px !important
      &.name
        .first_name, .last_name
          display: inline-block
          width: calc(100% / 2 - 10px)
        .first_name
          margin-right: 14px
      &.voucher
        text-align: center
        height: 65px
        +transition(height 0.3s)
        overflow: hidden
        &.show
          height: 145px
          label, input
            opacity: 1
          .redeemVoucher:before
            background-position: -170px -35px
            opacity: 1

        .redeemVoucher
          +font-light()
          color: $gray
          font-size: 14px !important
          line-height: 18px !important
          position: relative
          display: inline-block
          margin: 40px 0 10px
          cursor: pointer
          &:before
            content: ''
            +sprite(-140px -35px, 21px, 11px)
            display: inline-block
            +transition(background-position 0.3s)
            margin-right: 6px
            opacity: 0.4
          &:after
            position: absolute
            width: calc(100% - 27px)
            height: 1px
            background-color: $gray
            content: ''
            bottom: -2px
            right: 0
        label, input
          text-align: left
          opacity: 0
          +transition-delay(0.2s)
          +transition(all 0.3s)
    .submit
      background-color: $green
      border-radius: 5px
      width: 100%
      max-width: 320px
      margin: 50px auto 0
      padding: 21px 0
      position: relative
      cursor: pointer
      &:hover
        background-color: darken($green, 8%)
        &:before
          +transform(scale(0.9))
      &:before
        content: ''
        position: absolute
        left: 45px
        top: calc(50% - 16px)
        +sprite(-140px 0, 27px, 32px)
        +transform(scale(1))
        +transform-origin(50% )
        +transition(transform 0.2s)
      p
        text-align: center
        margin: 0
        color: white
        +font-semi-bold()
        font-size: 18px !important

      input
        display: none


+media-query(1300px)
  .trial-form-row
    .container
      .inner
        width: 70%
        margin: 0 15%

+media-query(950px)
  .trial-form-row
    .container
      width: 80%

+media-query(800px)
  .trial-form-row
    width: 100%
    .container
      width: 100%
  .divide-row
    height: 40px
    margin-top: 0

+media-query(600px)
  .trial-form-row
    width: 100%
    .container
      .inner
        width: 80%
        margin: 0 10%
  .trial-form-row, .contact-form
    .container
      .inner
        .message-response
          .info
            p
              strong
                width: 100%
                margin-top: 15px

+media-query(550px)
  .trial-form-row
    .container
      .inner
        .form
          .form-element
            &.name
              .first_name, .last_name
                display: block
                width: 100%
              .first_name
                margin-bottom: 15px