/* form starting stylings ------------------------------- */
.group 			  { 
	position:relative; 
  margin: 2em 0em;
}
input 				{
 	font-size:1em;
	padding:.5em;
	display:block;
	width:18em;
	border:none;
	border-bottom:1px solid #45F5E8;
	background-color: transparent;
	color: white;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:rgba(255,255,255,0.40); 
  font-size:1em;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:.5em;
  top:-.5em;
  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:-1.5em;
  font-size:1em;
  color:#3BA3AC;
}

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

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:200px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#3BA3AC; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#3BA3AC; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#3BA3AC; }
  to 	{ width:0; background:transparent; }
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill
{
  -webkit-text-fill-color: #9BD14B !important;
  -webkit-box-shadow: 0 0 0 30px rgb(128, 78, 151) inset;
}