.signin-form {
	padding : 1px 15px 30px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	margin-top: 10px;
	background: #fff url("../../../resources/images/bg/bg-pattern.jpg") repeat scroll left top / 18px 18px;
	 border-radius: 5px;
}

.social-login{
	font-weight: 100;
	margin-bottom: 10px;
	width: 100%;
	padding-left: 0;
}

.bg-blur{
	background: url("../../../resources/images/bg/hd1.jpg");
	background-size : cover;
}

.warning-div{
	margin-top: 25px;
}
.half-width{
	width: 50%;
}

.group.no-margin-bottom{
	margin-bottom: 0;
}

.no-padding-right{
	padding-right: 0;
}

.padding-left-20{
	padding-left: 20px;
}

.no-padding-left{
	padding-left: 0;
}

.cursor{
	cursor: pointer;
}

.no-margin-top{
	margin-top: 0;
}

.margin-top-10{
	margin-top: 10px;
}

/* User form  */

.form {
	width: 380px;
	margin: 4em auto;
	padding: 3em 2em 2em 2em;
	border: 1px solid #ebebeb;
	background: #fafafa;
	box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group { 
	position: relative; 
	margin: 20px 5px; 
}

.group input {
	font-size: 16px;
	padding: 15px 10px 0 5px;
	-webkit-appearance: none;
	display: block;
	background: transparent; 
	color: #555;
	width: 100%;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #757575;
	border: 1px solid #798c99;
    border-radius: 3px;
}

.group input:focus { 
	outline: none; 
	padding: 20px 10px 5px 5px;
}

.group input.used{
	padding: 20px 10px 2px 5px;
}

/* Label */

.group label {
	color: #999; 
	font-size: 14px;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: all 0.2s ease;
}


/* active */

.group input:focus ~ label, .group input.used ~ label {
	top: 0px;
  	transform: scale(.75);
  	left: 0;
	font-size: 14px;
	color: #aaa;
}


/* Underline */

.bar {
	position: relative;
	display: block;
	width: 100%;
}

.bar:before, .bar:after {
	content: '';
	height: 2px; 
	width: 0;
	bottom: 1px; 
	position: absolute;
	background: #aaa; 
	transition: all 0.2s ease;
}

.bar:before { left: 50%; }

.bar:after { right: 50%; }


/* active */

input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }


/* Highlight */

.highlight {
	position: absolute;
	height: 60%; 
	width: 100px; 
	top: 25%; 
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}


/* active */

input:focus ~ .highlight {
	animation: inputHighlighter 0.3s ease;
}


/* Animations */

@keyframes inputHighlighter {
	from { background: #4a89dc; }
	to 	{ width: 0; background: transparent; }
}


@media(min-width:700px) {
	.signin-form {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	     max-width: 800px; 
	    /* margin-left: 33%; */
	}
	
	.brand{
		margin-left: 38%;
	}
	.warning-div{
		margin-left: 50px;
		margin-top: 10px;
	}

}