input {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 100%;
    display: block;
    border: none;
    padding: 5px 0;
    border-bottom: solid 1px #b9bedb;
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #b9bedb 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #b9bedb 4%);
    background-position: -200px 0;
    background-size: 200px 100%;
    background-repeat: no-repeat;
    color: #868686;
}

input:focus, input:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}

input::-webkit-input-placeholder {
 font-family: 'roboto', sans-serif;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
 color: #b9bedb;
 font-size: 11px;
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}