old.xevion.github.io/_scss/partials/_contact.scss

#contact-section {
  .contact-description {
    margin: 0 auto;
    max-width: 440px;
    font-size: 1.2em;
    @include MQ(L) {
      padding: 0;
    }
  }
  .form-wrapper {
    width: 500px;
    margin: 20px auto;
    padding: 0;
    @include MQ(S600) {
      width: 90%;
    }
    @include MQ(S400) {
      width: 95%;
    }
    .input-wrapper {
      padding: 0;
      margin-bottom: 10px;
      position: relative;
      transition: all 0.25s ease;
      @include MQ(M) {
        margin-bottom: 10px;
      }
      @include MQ(SM) {
        margin-bottom: 5px;
      }
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        background-color: $grey;
        bottom: 0;
        left: 0;
        transition: all 0.5s ease-in-out;
      }
      &:after {
        background-color: #00b7c7;
        content: "";
        position: absolute;
        display: block;
        width: 0px;
        height: 2px;
        bottom: 0;
        left: 0;
        transition: all 0.5s ease-in-out;
      }
      .input-label {
        display: block;
        font-family: $Gotham, $sans-serif-stack;
        font-size: 0.9em;
        font-weight: 700;
        text-transform: uppercase;
        transform: translateY(25px);
        color: $white;
        margin-bottom: 10px;
        transition: all 0.5s ease-in-out;
      }
      .contact-input {
        position: relative;
        background: transparent;
        width: 100%;
        border: none;
        padding: 20px 0 10px;
        margin-bottom: -10px;
        font-size: 1em;
        line-height: 1.3;
        color: $white;
        font-family: $Whitney, $sans-serif-stack;
        resize: none;
        display: block;
        overflow: hidden;
        box-sizing: padding-box;
        transition: all 0.25s ease;
        &:focus {
          outline: 0;
          color: $white;
        }
      }
    }
    .is-active,
    .is-completed {
      padding: 15px 0 0 0;
    }
    .is-active:after {
      width: 100%;
    }
    .is-active .input-label {
      color: #00b7c7;
    }
    .is-completed .input-label {
      font-size: 0.75em;
      font-weight: 700;
      transform: translateY(0);
      padding: 0;
    }
    .is-completed .contact-input {
      padding-top: 10px;
    }
    .message-btn {
      display: block;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 14px;
      font-family: $Gotham, $sans-serif-stack;
      line-height: 1.5;
      padding: 12px 20px 10px;
      margin: 70px auto 0;
      color: $blue;
      background: transparent;
      border: 2px solid $blue;
      border-radius: 3px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      &:hover, &:focus {
        color: $white;
        background: $blue;
      }
    }
    #message-label {
      margin-bottom: 10px;
    }
  }
}