.contact-container
  .content-container
    +flex(space-between, flex-start)
  .contact-form
    background-color: $lightBlue
    width: $contentGrid*6
    margin: 0 0 -60px
    padding: 60px 0
    z-index: 5

    .inner
      width: calc(100% / 6 * 4)
      margin: 0 auto

      h3
        +font-light(28px, 33px)
        color: white
      .submit
        background-color: transparent
        border: 2px solid white
        max-width: 280px
        padding: 5px 0
        +flex(center, center)
        margin-right: 0
        &:before
          content: none
        &:after
          content: ''
          +arrowWhite
          margin-left: 15px
          +transition(none)

        &:hover
          background-color: white
          p
            color: $lightBlue
          &:after
            +arrowBlue
        p
          text-align: center
          margin: 0
          color: white
          +font-semi-bold()
          font-size: 18px !important
          display: inline-block


  .content
    margin-left: $contentGrid
    width: $contentGrid*4
    padding: 60px 0

    h1
      +font-light(34px, 40px)
      color: $darkBlue
      margin-bottom: 30px

    h2
      +font-light(28px, 34px)
      color: $darkBlue
      margin-bottom: 20px

    p
      +font-light(21px, 32px)
      font-size: 18px
      color: $lightBlue
      line-height: 30px
      margin-bottom: 40px
      strong
        color: $darkBlue
        display: inline-block

    .information
      padding-bottom: 40px
      border-bottom: 1px solid $lighterGray
      p
        margin: 0
      h5
        +font-semi-bold(21px, 32px)
        font-size: 18px
        color: $orange
        line-height: 30px
      .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)
    .business-info
      padding-top: 50px
      p
        margin: 0 0 18px
        +font-light(18px, 22px)

        strong
          margin-bottom: 5px
        a
          +font-light(18px, 22px)
          color: $lightBlue
          +transition(all 0.3s)
          &:hover
            color: $orange
        span
          +font-light(18px, 22px)
          color: $lightBlue
          display: inline-block
          width: 100px

  .thanks
    &.inactive
      display: none
    h2
      margin-top: 40px
      +font-semi-bold(32px, 38px)
      color: white
    p
      +font-light(18px, 26px)
      color: white

+media-query(1300px)
  .contact-container
    .contact-form
      .inner
        width: calc(100% / 6 * 5)

+media-query(1050px)
  .contact-form
    .form
      .form-element.name
        .first_name, .last_name
          width: 100%
        .last_name
          margin-top: 10px

+media-query(900px)
  .contact-container
    .content-container
      +flex-rows
      +flex(center, flex-start)
    .content
      width: $contentGrid*8
      margin-left: 0
    .contact-form
      width: $contentGrid*10
  .contact-form
    .form
      .form-element.name
        .first_name, .last_name
          width: calc(100% / 2 - 10px)
        .last_name
          margin-top: 0px
+media-query(800px)
  .contact-container
    .contact-form
      .form-element
        margin-bottom: 30px
        &.text-area
          display: block
        &.select-element
          display: block
          select
            width: 100%
          .selectric-wrapper
            width: 100%
            display: block
        label
          display: block
          width: 100%
          padding-left: 20px
        input, textarea
          width: 100%
          margin-left: 0

+media-query(650px)
  .contact-container
    .content-container
      width: 100%

    .content
      width: $contentGrid*10
    .contact-form
      margin-bottom: 0
      width: $contentGrid*12

+media-query(550px)
  .contact-container
    .contact-form
      width: 100%

+media-query(480px)
  .contact-form
    .form
      .form-element.name
        .first_name, .last_name
          width: 100%
        .last_name
          margin-top: 10px