.contact-form {
  @include mainFont();
  padding: rem(10px);

  fieldset {
    border: none;
    font-weight: normal;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    box-sizing: border-box;
    outline: none;
    display: block;
    color: #333333;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: rem(18px);
    height: rem(45px);

    &.has-error {
      border-color: #f04242;
    }
  }

  textarea {
    height: rem(200px);
  }

  span {
    display: block;
    font-size: rem(14px);
    color: #f04242;
    padding-bottom: rem(10px);
  }

  button[type="submit"] {
    display: block;
    padding: rem(14px) rem(39px) rem(14px) rem(39px);
    color: #ffffff;
    background: $themeColor;
    font-size: rem(18px);
    width: 100%;
    border: 1px solid darken($themeColor, 30%);
    border-width: 1px 1px 3px;
    margin-top: rem(50px);
    margin-bottom: rem(10px);
    cursor: pointer;
    transition: all 0.3s;
    outline: none;

    &:hover {
      background: darken($themeColor, 20%);
    }

    @include media(">=sm") {
      padding: rem(19px) rem(39px) rem(18px) rem(39px);
    }
  }

  [v-cloak] {
    display: none;
  }
}