* { box-sizing:border-box; }

.group 			  {
    position:relative;
    margin-bottom:30px;
}
.input 				{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width: 90%;
    border:none;
    border-bottom:1px solid #28374d;
}
.input:focus 		{ outline:none; }

/* LABEL ======================================= */
.label 				 {
    color:#999;
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:17px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

/* active state */
.input:focus ~ .label, .input:valid ~ .label 		{
    top:-10px;
    font-size:14px;
    color:#28374d;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:90% }
.bar:before, .bar:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#28374d;
    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%;
}

/* active state */
.input:focus ~ .bar:before, .input:focus ~ .bar:after {
    width:50%;
}