.contact-form
  .inner
    .thanks-icon
      height: 0
      position: relative
      width: 100%
      max-width: 560px
      margin-bottom: 25px
      background-color: #FF93AC
      +flex(center, center)
      text-align: center
      overflow: hidden
      transition: all 0.6s
      span
        display: block
        width: 25px
        margin: auto
        opacity: 0
        transition-delay: 0.3s
        svg
          width: 100%
          .heart
            fill: none
            stroke: #FFFFFF
            stroke-width: 2
            stroke-miterlimit: 10
            stroke-dasharray: 65
            stroke-dashoffset: 48
            transition: all 0.5s
            transition-delay: 0.3s

      p
        +font-default(12px, 14px)
        font-weight: bold
        color: white
        text-transform: uppercase
        letter-spacing: 1.4px
        margin: 10px 0 0

      &.show
        height: 120px
        span
          opacity: 1
          svg
            .heart
              stroke-dashoffset: 0
  .thanks
    opacity: 1
    height: 130px
    overflow: hidden
    transition: all 0.3s
    h2
      +font-header(21px, 26px)
      color: $turquoise
      margin-bottom: 15px
    p
      color: black
      +font-light(16px, 24px)

    &.inactive
      opacity: 0
      height: 0

  .form
    padding-bottom: 0
    .submit
      display: none
    .extra_message
      position: relative
      .submit-button
        height: 120px
        position: absolute
        right: -120px
        width: 120px
        bottom: 0
        background-color: $turquoise
        transition: all 0.3s
        +flex(center, center)
        text-align: center
        cursor: pointer
        span
          display: block
          width: 25px
          margin: auto
          svg
            width: 100%
            .heart
              fill: none
              stroke: #FFFFFF
              stroke-width: 2
              stroke-miterlimit: 10
              stroke-dasharray: 65
              stroke-dashoffset: 48
              transition: all 0.5s

        p
          +font-default(12px, 14px)
          font-weight: bold
          color: white
          text-transform: uppercase
          letter-spacing: 1.4px
          margin: 10px 0 0
          opacity: 1
          transition: all 0.2s
          &.stl
            position: absolute
            bottom: 28px
            left: 28px
            opacity: 0

        &:hover
          background-color: #FF93AC

          p
            opacity: 0
            &.stl
              opacity: 1

          span
            svg
              .heart
                stroke-dashoffset: 0

+media-query(1400px)
  .contact-form
    .form
      .extra_message
        .submit-button
          position: relative
          right: auto
          margin-left: auto
          height: 60px
          width: 165px
          .placeholder
            width: 100%
            +flex(space-between, center)
            height: 100%
            span
              margin: 0 6px 0 18px

            p
              margin-top: 0
              width: 116px
              &.stl
                left: 50px
                bottom: 18px
+media-query-height(1075px)
  .contact-form
    .form
      padding-top: 10px

      .form-element
        margin-bottom: 15px
        input
          margin-top: 5px
          height: 40px
          line-height: 40px
  .contact
    .full-image-block
      .right-content
        height: 100vh
        .text
          height: calc(100vh - 240px)
          h1
            margin-bottom: 10px
          >p
            margin: 10px 0
      .social-link
        padding-bottom: 30px
        p.mail
          margin-bottom: 25px

+media-query-height-or-width(900px, 900px)
  .contact .full-image-block .social-link
    display: none
  .contact .full-image-block
    .right-content
      height: auto !important
      .text
        height: calc(100% - 70px)
+media-query-height-or-width(900px, 750px)
  .contact .full-image-block .social-link
    display: block
    padding-bottom: 20px