@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");.container{max-width:600px;background:#fff;width:600px;padding:25px 40px 10px;box-shadow:0 0 10px rgba(0,0,0,.1)}.container .text{text-align:center;font-size:41px;font-weight:600;font-family:Poppins,sans-serif;background:#1e1f24;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.container form{padding:10px 5px}.container form .form-row{display:flex;margin:40px 0}form .form-row .input-data{width:100%;height:60px;margin:0 20px;position:relative}form .form-row .textarea{height:90px}.input-data input,.textarea textarea{display:block;width:100%;height:100%;font-size:17px;border:none;border-bottom:2px solid rgba(0,0,0,.12);color:#1e1f24}.input-data input:focus~label,.input-data input:valid~label,.textarea textarea:focus~label,.textarea textarea:valid~label{transform:translateY(-40px);font-size:14px;color:#3bba9c}.textarea textarea{resize:none;padding-top:20px}.input-data label{position:absolute;pointer-events:none;bottom:10px;font-size:16px;transition:all .3s ease;color:#1e1f24}.textarea label{width:100%;bottom:40px;background:#fff;color:#1e1f24}.input-data .underline{position:absolute;bottom:0;height:2px;width:100%}.input-data .underline:before{position:absolute;content:"";height:2px;width:100%;background:#e0e0e0;transform:scaleX(0);transform-origin:center;transition:transform .3s ease}.input-data input:focus~.underline:before,.input-data input:valid~.underline:before,.textarea textarea:focus~.underline:before,.textarea textarea:valid~.underline:before{transform:scale(1)}#invalid input{background-color:#fddddd}#invalid input~label{transform:translateY(-40px);font-size:14px;color:#b40e0e}.invalid input:focus{background-color:#fbe8d2}.submit-btn .input-data{padding-top:10px;overflow:hidden;height:45px!important;width:25%!important}.submit-btn .input-data .inner{height:100%;width:300%;position:absolute;left:-100%;background:#3c3c3c;transition:all .4s}.submit-btn .input-data:hover .inner{background:#1e1f24;left:0}.submit-btn .input-data input{background:none;border:none;color:#fff;font-size:17px;font-weight:500;text-transform:uppercase;letter-spacing:1px;cursor:pointer;position:relative;z-index:2}@media (max-width:700px){.container .text{font-size:30px}.container form{padding:10px 0 0}.container form .form-row{display:block}form .form-row .input-data{margin:35px 0!important}.submit-btn .input-data{width:40%!important}}