.pop-up-background
  +position(fixed, 0 0 0 0)
  +flex(center, center)
  height: 100%
  width: 100%
  overflow: auto
  margin: auto
  z-index: -5
  opacity: 0
  +transition(all 0.2s)

  &.active
    opacity: 1
    z-index: 9999

  .background
    background-color: rgba(77,77,77, 0.85)
    +position(fixed, 0 0 0 0)
    height: 100%
    width: 100%

  .pop-up
    width: 85%
    max-width: 600px
    background: $orange2
    position: relative
    margin: auto

    header
      height: 60px
      padding: 0 10%
      width: 100%
      position: relative
      +flex(flex-start, center)

      .logo
        +sprite(0 0, 171px, 40px)
        display: inline-block

    .thanks
      display: none
      padding: 0 10%
      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

  hr
    border: 0
    height: 0
    margin: 0
    border-bottom: 1px solid white
    opacity: 0.3
    +position(absolute, null 0 null 0)
    width: 100%


  section
    padding: 0 10%

    h2
      font-size: 24px
      line-height: 30px
      font-weight: 200

    h5
      font-weight: 700
      font-size: 14px
      line-height: 14px
      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: 30px
      padding-bottom: 40px

      .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
          font-family: 'Kanit', sans-serif
          margin-top: 5px
          height: 35px
          width: calc(100% - 130px)
          font-size: 15px
          line-height: 16px
          font-weight: 500
          color: $gray
          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(80% - 130px)
    max-width: 240px
    height: 50px
    +flex(center, center)
    margin: auto auto 50px calc(125px + 10%)
    cursor: pointer

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

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

+media-query(500px)
  .pop-up-background
    section.form
      .input-rows
        &.text-area-row
          display: block
          textarea
            margin-left: 0
        input, textarea
          width: 100%

    #sendButton
      margin: auto auto 50px
      width: 80%