.pop-up-container
  +position(fixed, 100% 0 0 0)
  width: 100%
  height: 100%
  background-color: rgba(0,0,0,0.7)
  z-index: 9999
  +flex(center, center)
  opacity: 0
  +transition(opacity 0.3s)
  overflow: auto 

  &.show
    top: 0
    opacity: 1

    .wrapper
      +transform(translate3d(0, 0, 0))

  .wrapper
    width: 90%
    margin: auto
    max-width: 940px
    border-radius: 8.3px
    border: 5px solid $blue
    position: relative
    background: $contentBackground1
    +transform(translate3d(-25%, 0, 0))
    +transition(all 0.4s)

    .cross-grid
      width: 19.14893617%
      height: 100%
      +position(absolute , 0 0 null null)
      background-image: url("/images/structure/cross_pattern.png")

    .exit
      +position(absolute, 10px 10px null null)
      cursor: pointer
      z-index: 5
      span
        +sprite(-32px -65px, 25px, 25px)
        display: inline-block



    .information
      padding: 70px 0 70px 60px
      width: calc( 80% - 105px)

      h1
        +audiBold
        font-size: 38px
        color: white
        padding-bottom: 40px

      p
        +audiBold()
        color: white
        font-size: 21px
        line-height: 38px
        padding-bottom: 20px

      hr
        opacity: 0.5

      form
        margin-top: 40px
        input, textarea
          width: calc((100% / 12 * 8) - 1% )
          font-size: 18px
          color: $borderColor
          border: none
          outline: none!important
          //background: url('/images/structure/form_background.png') 0 100%
          background: $background
          padding: 10px
          //padding-bottom: 5px
          +audi()
          margin-bottom: 20px

        input
          &:focus::-webkit-input-placeholder
            padding-left: 100px
            opacity: 0
            +transition(all 1s)

          &:focus:-moz-placeholder
            padding-left: 100px
            opacity: 0
            +transition(all 1s)

          &:focus:-ms-input-placeholder
            padding-left: 100px
            opacity: 0
            +transition(all 1s)

        input:-webkit-autofill
          -webkit-box-shadow: 0 0 0px 100px $contentBackground1 inset
          background-color: $contentBackground1!important
          -webkit-text-fill-color: $borderColor!important
          border-bottom: dashed 2px $borderColor

        .submit
          display: none

      .pop-up-submit
        +button(5px 5%)
        width: calc((100% / 12 * 8) - 9% )
        cursor: pointer

        p
          margin-bottom: 0
          padding-bottom: 0

        span.arrow
          +arrowRightOrange()

+media-query(800px)
  .pop-up-container
    .wrapper
      .information
        h1
          font-size: 24px
          padding-bottom: 28px

        p
          font-size: 16px
          line-height: 24px

        form
          input
            width: 94%

        .pop-up-submit
          width: 89%

+media-query-height(720px)
  .pop-up-container
    .wrapper
      .information
        h1
          font-size: 24px
          padding-bottom: 28px

        p
          font-size: 16px
          line-height: 24px

        form
          input
            width: 94%

        .pop-up-submit
          width: 89%

+media-query(450px)
  .pop-up-container
    .wrapper
      .information
        width: calc( 100% - 105px)
        padding: 40px 0 40px 40px
      .cross-grid
        display: none