/*==========================================================================
  Subscribe Row (to Mailchimp newsletter)
  ========================================================================== */

.subscribe-row
  padding: 100px 0
  background-color: rgba($lightGray2, 0.5)

  .title
    position: relative
    display: inline-block
    vertical-align: top
    margin-left: column(1, 12)
    width: column(5, 12)
    padding: 75px 0


    &:before
      content: ''
      position: absolute
      top: 0
      left: column(1, 5)
      width: column(3, 5)
      height: 100%
      background-color: $lightBlue

    .placeholder
      +flex(space-between, flex-end)

    h3
      position: relative
      width: calc(100% - 190px - 10%)
      font-size: 2rem
      line-height: 1.25
      color: $blue
      +phenomena

    .envelop
      position: relative
      margin-left: column(1, 10)
      width: 143px
      height: 155px


      svg
        width: 100%

        #letter
          transform: translateY(0px)
          opacity: 1
          transition: all 0.6s

        #stamp
          //transform-origin: 96.6px 24.5px 0
          //transform: scale3d(1,1,1)
          //opacity: 0.4
          stroke-dashoffset: 0
          stroke-dasharray: 64px
          transition: all 1s ease 0.7s

        #line1, #line2
          stroke-dashoffset: 0
          stroke-dasharray: 70px
          transition: all 1s ease 0.9s

        #line2
          transition-delay: 1.1s


      &.fracs-animation.fracamation
        svg
          #letter
            transform: translateY(40px)
            opacity: 0
            transition-duration: 0s
            transition-delay: 0s

          #stamp
            stroke-dashoffset: 64px
            transition-duration: 0s
            transition-delay: 0s
            //opacity: 0
            //transform: scale3d(0.2,0.2,1)

          #line1, #line2
            stroke-dashoffset: 70px
            transition-duration: 0s
            transition-delay: 0s

    +respond-to-width(950)
      padding: 0

      .placeholder
        display: block

      .envelop
        margin-top: -45px
        margin-left: auto
        margin-right: auto

      h3
        padding: 30px 0
        width: 80%
        margin-left: auto
        margin-right: auto
        text-align: center


    +respond-to-width(1600)
      margin-left: 0
      width: column(6, 12)

  .subscribe-form
    display: inline-block
    vertical-align: top
    margin-left: column(1, 24)
    width: column(9, 24)

    #phone-field
      max-height: 80px
      transition: max-height 0.3s, margin 0.3s
      overflow: hidden

      &.hidden
        max-height: 0
        margin-bottom: 0


  +respond-to-width(700)
    padding-bottom: 40px

    .title
      width: 100%

      +respond-to-width(425)
        h3
          font-size: 1.6rem
          width: 90%

    .subscribe-form
      margin-top: 20px
      width: column(22, 24)