.group{position:relative}input{font-size:18px;padding:10px 5px 0;display:block;width:100%;border:none;border-bottom:1px solid #757575}input:focus{outline:none}label{color:#999;font-size:12px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease}input:focus~label,input:valid~label{top:-5px;font-size:14px;color:#303130}.bar{position:relative;display:block;width:100%}.bar:after,.bar:before{content:"";height:2px;width:0;bottom:0;position:absolute;background:#303130;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease}.bar:before{left:0}.bar:after{right:0}input:focus~.bar:after,input:focus~.bar:before{width:100%}.highlight{position:absolute;height:100%;width:100%;top:25%;left:0;pointer-events:none;opacity:.5}input:focus~.highlight{-webkit-animation:inputHighlighter .3s ease;-moz-animation:inputHighlighter .3s ease;animation:inputHighlighter .3s ease}@-webkit-keyframes inputHighlighter{0%{background:#303130}to{width:0;background:transparent}}@-moz-keyframes inputHighlighter{0%{background:#303130}to{width:0;background:transparent}}@keyframes inputHighlighter{0%{background:#303130}to{width:0;background:transparent}}@media (max-width:1024px){label{font-size:16px}}