@import url(https://fonts.googleapis.com/css?family=Ubuntu);



/* STYLE FORM INPUT */
.form-group {
	position: relative;
	margin-top: 35px;
	margin-bottom: 20px;
}
.input-group {
	position: relative;
}
.form-control {
	display: block;
	height: 36px;
	width: 100%;
	border: none;
	border-radius: 0 !important;
	font-size: 16px;
	font-weight: 300;
	padding: 0;
	background-color: transparent;
	box-shadow: none;
	border-bottom: 1px solid grey;
}
.input-group .form-control {
	position: relative;
	z-index: inherit;
	float: inherit;
	width: 100%;
	margin-bottom: 0;
}
.form-control:focus {
	border-color: #7c7c7c;
	outline: none;
	box-shadow: none;
}

/* FORM LABEL STYLE- */
label {
	position: absolute;
	top: -18px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	font-weight: 300;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}
.form-horizontal .control-label {
	position: relative;
	top: 0;
	margin-bottom: 0;
}
.float-label {
	left: 0;
	top: 7px;
	font-size: 16px;
	pointer-events: none;
}

/* LABEL ACTIVE STATE */
.form-control:focus ~ .float-label, .form-control:valid ~ .float-label {
	top: -18px;
	font-size: 12px;
}

/* INPUT DEFAULT COLOR */
.form-control:focus ~ label {  color: #e5536b; }
label ~ .form-bar:before, label ~ .form-bar:after {background: #e5536b; }
.form-control:valid ~ .control-label {}

/* FROM BAR STYLE*/
.form-bar {
	position: relative;
	display: block;
	width: 100%;
}
.form-bar:before, .form-bar:after 	{
	content: '';
	height: 1px;
	width: 0;
	bottom: 0;
	position: absolute;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
}
.form-bar:before {
	left: 50%;
}
.form-bar:after {
	right: 50%;
}

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

/*HIGHLIGHT STYLE*/
.form-highlight {
	position: absolute;
	height: 60%;
	width: 60%;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.4;
}

/* HIGHLIGHT ACTIVE STYLE */
.form-control:focus ~ .form-highlight {
	-webkit-animation: inputHighlighter 0.3s ease;
	-moz-animation: inputHighlighter 0.3s ease;
	animation: inputHighlighter 0.3s ease;
}

/* HIGHLIGHTER ANIMATION*/
@-webkit-keyframes inputHighlighter {
	from { background:#e5536b; }
	to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#e5536b; }
	to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#e5536b; }
	to { width:0; background:transparent; }
}