/*

via https://codepen.io/sevilayha/pen/IdGKH
MIT License

Modified: Wednesday, July 19, 2017

*/


/*
Dark Orange: #FF8C00
Light Orange: #FFB900

Dark blue/gray: 2c3e50
Light gray: bdc3c7
Super light gray: ecf0f1
*/


/* form starting stylings ------------------------------- */

#form-group {
	position: relative;
	margin-bottom: 20px;
	/*margin-top: 20px;*/
}

#form-group input {
	/*font-size:18px;*/
	font-size: 1.1em;
	padding: 10px 0px;
	display: block;
	width: 100%;
	border: none;
	/*border-bottom: 1px solid #2c3e50;*/
	border-bottom: 1px solid #bdc3c7;
}

#form-group input:focus {
	outline: none;
	border: none;
}

#form-group input:active {
	border: none;
}

/* LABEL ======================================= */
#form-group label {
	/*color:#999;*/
	color: #bdc3c7;
	/*font-size:18px;*/
	font-size: 1em;
	/*font-weight: normal;*/
	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;
}

/* active state */
#form-group input:focus~label,
#form-group input:valid~label,
#form-group input.used~label {
	/*top: -20px;*/
	top: -10px;
	/*font-size: 14px;*/
	font-size: .75em;
	color: #FFB900;
}


/* BOTTOM BARS ================================= */
#form-group .bar {
	position: relative;
	display: block;
	/*width:300px;*/
	/*width: 100%;*/
}

#form-group .bar:before,
#form-group .bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #FFB900;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

#form-group .bar:before {
	left: 50%;
}

#form-group .bar:after {
	right: 50%;
}

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

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

/* active state */
#form-group 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: #FFB900;
	}

	to {
		width: 0;
		background: transparent;
	}
}

@-moz-keyframes inputHighlighter {
	from {
		background: #FFB900;
	}

	to {
		width: 0;
		background: transparent;
	}
}

@keyframes inputHighlighter {
	from {
		background: #FFB900;
	}

	to {
		width: 0;
		background: transparent;
	}
}