*{box-sizing:border-box}h2{text-align:center;margin-bottom:50px;color:#fff}.group{position:relative;margin-bottom:35px}input{font-size:18px;padding:5px 10px 10px 5px;display:block;width:100%;border:none;border-bottom:1px solid #EC343C;background:transparent}input:focus{outline:none}label{color:#D5D5D5;font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px;transition:0.2s ease all;-moz-transition:0.2s ease all;-webkit-transition:0.2s ease all}input:focus~label,input:valid~label{top:-20px;font-size:14px;color:#EC343C}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#fff;transition:0.2s ease all;-moz-transition:0.2s ease all;-webkit-transition:0.2s ease all}.bar:before{left:50%}.bar:after{right:50%}input:focus~.bar:before,input:focus~.bar:after{width:50%}.highlight{position:absolute;height:60%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}input:focus~.highlight{-webkit-animation:inputHighlighter 0.3s ease;-moz-animation:inputHighlighter 0.3s ease;animation:inputHighlighter 0.3s ease}@-webkit-keyframes inputHighlighter{from{background:#fff}to{width:0;background:transparent}}@-moz-keyframes inputHighlighter{from{background:#fff}to{width:0;background:transparent}}@keyframes inputHighlighter{from{background:#fff}to{width:0;background:transparent}}#panel{border:1px solid rgb(200,200,200);box-shadow:rgba(0,0,0,.1) 0 5px 5px 2px;background:-webkit-linear-gradient(90deg,#2caab3 0%,#2c8cb3 100%);background:red;background:-webkit-linear-gradient(90deg,#2caab3 0%,#2c8cb3 100%);background:-o-linear-gradient(90deg,#2caab3 0%,#2c8cb3 100%);background:-moz-linear-gradient(90deg,#2caab3 0%,#2c8cb3 100%);background:linear-gradient(90deg,#2caab3 0%,#2c8cb3 100%);border-radius:4px;top:50px}