.contact-form
  margin-top: 50px
  position: relative
  padding: 0 40px
  background: $orange2
  width: $contentGrid * 4.5
  float: left
  padding-bottom: 100px

  header
    position: relative
    width: calc(100% + 80px)
    left: -40px
    +flex(flex-start, center)
    padding-left: 40px
    z-index: 1

  section
    padding: 0

    hr
      width: calc(100% + 80px)
      position: relative
      left: -40px
      border: none
      border-bottom: 1px solid #fff
      opacity: 0.3
      margin: 30px 0

    h2
      +font-semi-bold(24px, 26px)
      text-transform: uppercase
      margin: 0 0 20px

    .check-alert
      color: $red
      font-size: 14px
      line-height: 16px
      font-weight: 300
      display: none

      &.show
        display: block

    &.input
      padding-top: 40px
      padding-bottom: 20px

      .checkBox
        margin-bottom: 5px

        label
          +font-light(16px, 16px)

    &.form
      padding-top: 40px
      padding-bottom: 40px

      .contact-info
        margin-top: 0
        padding: 0
        border: none !important

      .input-rows
        position: relative
        margin-bottom: 10px

        &.text-area-row
          margin-bottom: 0
          +flex(flex-start, flex-start)
          label
            margin-top: 15px


        label
          width: 120px
          display: inline-block
          font-size: 15px
          line-height: 15px
          font-weight: 600
        input, textarea
          margin-top: 10px
          height: 45px
          width: calc(100% - 130px)
          font-family: "Kanit", sans-serif
          font-size: 15px
          line-height: 16px
          font-weight: 500
          background-color: lighten($light-gray, 5%)
          color: $black
          padding: 0 20px
          border: 1.5px transparent solid

          &.alert
            border: 1.5px $red solid
            box-shadow: 0 0 5px $red


        textarea
          height: 116px
          padding-top: 8px
          padding-bottom: 10px
          resize: vertical
          margin-left: 6px

        input[type=text]:focus, textarea:focus
          box-shadow: 0 0 20px #84bfef
          border: 1.5px #84bfef solid
          border-radius: 0

  #sendButton
    background: $black
    width: calc(100% - 128px)
    height: 50px
    +flex(center, center)
    margin: 45px 0 50px
    cursor: pointer
    +position(absolute, null 0 null null)

    &:hover
      background: lighten($black, 10%)
    &:active
      background: lighten($black, 20%)

    p
      +font-default(18px)
      color: white
      text-transform: none
      text-align: center


  .thanks
    display: none
    padding: 0
    h4
      +font-bold(24px)

    p
      +font-light(16px)
      margin-bottom: 35px

    .close
      background: $black
      width: calc(80% - 130px)
      max-width: 240px
      height: 50px
      +flex(center, center)
      margin: auto auto 50px
      cursor: pointer

      &:hover
        background: darken($black, 10%)
      &:active
        background: darken($black, 20%)

      p
        +font-default(18px)
        color: white
        text-transform: none
        margin: 0

.contact-page
  background: url("/img/contact-background.jpg") 50% 100%
  background-size: cover
  min-height: 850px

  .contact-block
    width: $contentGrid * 6.5
    margin-left: $contentGrid
    margin-top: 50px
    float: left
    text-align: right
    margin-bottom: 120px
    img
      width: 100%

    h4
      display: inline-block
      margin: 0
      width: 70%
      +font-extra-light(65px, 65px)
      font-style: italic
      text-align: right
      margin-top: -35px
      span
        +font-light(65px, 65px)
        font-style: italic
        position: relative

        &:after
          content: ''
          position: absolute
          bottom: 10px
          left: 0
          width: 100%
          height: 3px
          background-color: $orange2

  .contact-info
    background: $orange2
    margin-top: 50px
    padding: 40px
    min-height: 300px
    position: relative

    h2
      +font-semi-bold(24px, 26px)
      text-transform: uppercase
      margin: 0 0 20px

    a
      +font-semi-bold(16px, 21px)
      color: $orange2

  .image-container
    border: 2px solid $orange2
    margin-top: 50px
    img
      width: 100%


+media-query(1100px)
  .contact-form
    width: $contentGrid * 12
    float: none
    margin: 0 auto
    max-width: 600px


  .contact-page
    padding-bottom: 50px
    >.content-container
      padding-top: 40px

    .contact-block
      width: $contentGrid * 10
      float: none
      margin: 40px auto 60px

+media-query(800px)
  .contact-page
    .contact-info
      p, a
        +font-default(21px)

+media-query(550px)
  .contact-form
    section.form
      .input-rows
        display: block
        label
          display: block
          width: 100%
        input, textarea
          width: 100%
          margin-left: 0

        &.text-area-row
          display: block

    #sendButton
      width: calc(100% - 80px)