<div class="popup">
      <button class="close" type="button"></button>
      <div class="popup__body">
        <form action="POST" action="/*" id="project-about" name="project-about" class="form">
          <div class="form__row">
            <input class="form__input" id="project-name" name="name" type="text" placeholder="Name">
            <label class="form__label" for="project-name">Name</label>
          </div>
          <div class="form__row">
            <input class="form__input" id="project-mail" name="mail" type="email" placeholder="E-mail">
            <label class="form__label" for="project-mail">E-mail</label>
          </div>
          <div class="form__row">
            <input class="form__input" id="project-problem" name="project" type="text" placeholder="Problem to solve">
            <label class="form__label" for="project-problem">Problem to solve</label>
          </div>
          <div class="form__row">
            <textarea name="project-message" class="form__input" id="project-message" placeholder="Your questions"></textarea>
            <label class="form__label" for="project-message">Your questions</label>
          </div>
          <button class="btn" type="submit">Start project</button>
        </form>
      </div>

.popup {
 position: relative;
 width: 570px;
 margin: 50px auto;

 .btn {
  position: relative;
  margin-top: 30px;
  left: 50%;
  transform: translateX(-50%)
 }
}

.popup__body {
 border-radius: 5% 5%;
 background-color: #fff;
 padding: 52px 40px 60px 40px;
 box-shadow: 0px 5px 23.49px 3.51px rgba(58, 58, 58, 0.16);
}
.form {
 position: relative;
 width: 100%;
}

.form__row {
 position: relative;
 margin-bottom: 20px;
 &:last-of-type {
  margin-bottom: 0;
 }
}

.form__label {
 position: absolute;
 top: -25px;
 left: 0;
 display: block;
 width: 100%;
 height: auto;
 padding: 15px 0 0 20px;
 font-weight: 300;
 color: rgba(#282828,.5);
 background-color: transparent;
 // background-color: #f5f5f5;
 // pointer-events: none;
 // z-index: -1;
 font-size: 14px;
 transition: 0.5s ease-in-out
}

.form__input {
 position: relative;
 padding: 15px 20px;
 outline: 1px solid #f5f5f5;
 &::placeholder {
   color: transparent;
  }
  &:placeholder-shown + .form__label {
   top: 0;
   height: 100%;
   background-color: #f5f5f5;
   font-size: 16px;
  }
  &:-ms-placeholder-shown + .form__label {
   top: 0;
   height: 100%;
   background-color: #f5f5f5;
   font-size: 16px;
  }
  &:focus + .form__label {
   background-color: transparent;
  }
}

.close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: blue;
  font-size: 20px;
   overflow:hidden;
  &:after {
    content: '';
    position: relative;
    top: 10px;
    left: 10px;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color:#a1d0ff;
    pointer-events: none;
    transition: top .3s ease-in-out, left .6s ease-in-out;
    z-index: 1;
  }
  &:hover {
    &:after {
      top: 0;
      left: 0;
    }
  }
  &:before {
      position: absolute;
  content: '\02716';
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid;
  }
}