.group{position:relative;margin-bottom:2rem}.input{font-size:16px;padding:10px 10px 10px 5px;display:block;width:100%;border:none;border-bottom:1px solid #515151;background:transparent;color:#fff}.input:focus{outline:none}.input-group{color:#999;font-size:20px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px;white-space:nowrap;display:inline;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease}.input:not(:-moz-placeholder)~.input-group{top:-20px;font-size:14px;color:#a8d8ff}.input:focus~.input-group,.input:not(:placeholder-shown)~.input-group,.input:valid~.input-group{top:-20px;font-size:14px;color:#a8d8ff}select.input:not([value=""])~.input-group{top:-20px;font-size:14px;color:#a8d8ff}textarea.input:focus~.input-group,textarea.input:valid~.input-group{top:-20px;font-size:14px;color:#a8d8ff}.bar{position:relative;display:block;width:100%}.bar:after,.bar:before{content:"";height:2px;width:0;bottom:1px;position:absolute;background:#a8d8ff;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease}.bar:before{left:50%}.bar:after{right:50%}.input:focus~.bar:after,.input:focus~.bar:before{width:50%}.highlight{position:absolute;height:60%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.input:focus~.highlight{animation:inputHighlighter .3s ease}@keyframes inputHighlighter{0%{background:#a8d8ff}to{width:0;background:transparent}}