.pop-up
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
  +flex(center, center)
  cursor: pointer
  opacity: 0
  +transition(all 0.3s transform 0.1s)

  &.active
    opacity: 1
    z-index: 1000

  .background
    position: absolute
    width: 100%
    height: 100%
    top: 0
    left: 0
    background-color: rgba(0,0,0, 0.4)

  .form-container
    background: #525259 url("/img/noise.png")
    border-radius: 12px
    padding: 10px
    width: 95%
    max-width: 600px
    max-height: 100%
    overflow: auto
    position: relative
    cursor: auto

    .thanks
      display: block
      border-radius: 12px
      border: Dashed rgba(255, 255, 255, 0.5) 2px
      padding: 20px

      &.inactive
        display: none
      h1
        +header-font()
        font-size: 41px !important
        line-height: 60px !important
        color: $yellowish
        text-shadow: 3px 3px rgba(0,0,0,0.15)
        text-align: center
      p
        color: $yellowish
        +font-default()
        font-size: 16px !important
        line-height: 21px !important
        text-align: center
    .close
      position: absolute
      top: 30px
      right: 30px
      width: 20px
      height: 20px
      +translate3dRotateScale(0,0,0, 45deg, 1)
      cursor: pointer
      +transition(all 0.4s)
      &:hover
        +translate3dRotateScale(0,0,0, 135deg, 1.05)

      .horizontal
        width: 20px
        height: 4px
        position: absolute
        left: 0
        top: 8px
        display: block
        background-color: $red
        border-radius: 20px

      .vertical
        width: 4px
        height: 20px
        display: block
        position: absolute
        top: 0
        left: 8px
        background-color: $red
        border-radius: 20px

    #popUpForm
      border-radius: 12px
      border: Dashed rgba(255, 255, 255, 0.5) 2px
      padding: 20px

      h1
        +header-font()
        font-size: 41px !important
        line-height: 60px !important
        color: $yellowish
        text-shadow: 3px 3px rgba(0,0,0,0.15)
        text-align: center

      .form-element
        .error-message
          padding-left: 160px
          display: none
          color: #fd9f96
          +font-bold()
          font-size: 16px !important
          line-height: 22px !important
          &.active
            display: block
        label
          width: 130px

        .item-holder
          width: calc(100% - 145px)

        &.readonly
          .item-holder
            background-color: transparent
            p
              color: $yellowish
              +font-bold()
              font-size: 16px !important
              line-height: 22px !important
              margin: 0

            input
              display: none
              background-color: transparent
              border-bottom: Dashed rgba(255, 255, 255, 0.5) 2px
              border-radius: 0
              color: $yellowish
              +font-bold()

+media-query(900px)
  .pop-up
    .form-container
      #popUpForm
        h1
          font-size: 36px !important

        .form-element
          .error
            padding-left: 0px
          label
            width: 100%

          .item-holder
            width: 100%
            &.readonly
              .item-holder
                input
                  padding: 0
+media-query(450px)
  #popUpForm
    .submit
      width: 100%
      margin-right: auto