@import url(https://fonts.googleapis.com/css?family=Montserrat);.text-input{position:relative;margin-top:30px;}.text-input input[type="text"]{display:inline-block;height:40px;width:100%;box-sizing:border-box;outline:none;border:1px solid #d3d3d3;border-radius:3px;padding:10px 10px 10px 150px;transition:all .1s ease-out;}.text-input input[type="text"]+label{position:absolute;top:0;left:10px;bottom:0;width:140px;height:40px;line-height:40px;color:#fff;border-radius:3px 0 0 3px;padding:0 20px;background:#01579b;transform:translateZ(0) translateX(0);transition:all .3s ease-in;transition-delay:.2s;}.text-input input[type="text"]:focus+label{transform:translateY(-120%) translateX(0%);border-radius:3px;transition:all .1s ease-out;}.text-input input[type="text"]:focus{padding:10px;transition:all .3s ease-out;transition-delay:.2s;}.text-input input[type="password"]{display:inline-block;height:40px;width:100%;box-sizing:border-box;outline:none;border:1px solid #d3d3d3;border-radius:3px;padding:10px 10px 10px 150px;transition:all .1s ease-out;}.text-input input[type="password"]+label{position:absolute;top:0;left:10px;bottom:0;width:140px;height:40px;line-height:40px;color:#fff;border-radius:3px 0 0 3px;padding:0 20px;background:#01579b;transform:translateZ(0) translateX(0);transition:all .3s ease-in;transition-delay:.2s;}.text-input input[type="password"]:focus+label{transform:translateY(-120%) translateX(0%);border-radius:3px;transition:all .1s ease-out;}.text-input input[type="password"]:focus{padding:10px;transition:all .3s ease-out;transition-delay:.2s;}