*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: none;
	text-shadow: none;
	box-shadow: none;
}

html, body { width: 100vw; height: 100vh; overflow: hidden; position: relative; }

.login {
	background-image: url("../images/bg_2.png");
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: all 250ms ease-in-out;
}
.login.loading { opacity: 0; }
.login:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100vw;
	height: 50vh;
	background-color: rgba(22,93,150,0.85);
	box-shadow: 0 4px 4px -4px #222, 0 -4px 4px -4px #222;
	transform: none;
	background-color: #084272;
}

.login .login-wrapper { position: relative; z-index: 2; width: 100%; height: 100%; }

/* ---- Login Page Customer Logo ----  */
.login .login-form-right {
	width: 20%;
	max-width: 220px;
	height: 220px;
	position: absolute;
	top: 1%;
	right: 1%;
	/* transform: translate(-50%,-50%); */
}

.login .login-form-right .login-logo-right {
	position: absolute;
	width: 100%;
	/*
	margin: 0 auto;
	z-index: 999;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	*/
}

.login .login-form-right .login-logo-right img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
/* ---- */
	
.login .login-form {
	width: 420px;
	height: 420px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.login .login-form:before,
.login .login-form:after,
.login .login-form > fieldset {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0,0,0,0.1);
}
.login .login-form > fieldset {
	position: relative;
	z-index: 2;
	box-shadow: 0 10px 10px -10px #222;
	padding: 24px;
	background-color: #FFF;
}
.login .login-form:before,
.login .login-form:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #E7E7E7;
	transition: all 250ms ease-in-out 500ms;
}
.login .login-form:before { transform: rotate(2deg); }
.login .login-form:after { transform: rotate(-2deg); }
.login.loading .login-form:before,
.login.loading .login-form:after { transform: rotate(0deg); }

.login .login-form .login-logo {
	position: absolute;
	width: 100%;
	margin: 0 auto;
	z-index: 999;
	top: 0;
	left: 0;
	transform: translateY(-100%);
}
.login .login-form .login-logo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.login .login-form h1,
.login .login-form p {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding: 0 0 0 24px;
}
.login .login-form h1 {
	border-left: 4px solid #1b74bb;
	top: 48px;
	height: 48px;
	line-height: 48px;
	font-size: 32px;
	margin: 0;
}
.login .login-form p { top: 100px; color: #A4A4A4; }
.login .login-form .login-icon {
	position: absolute;
	top: 48px;
	right: 0;
	transform: translateX(50%);
	box-shadow: 0 10px 10px -10px #222;
	width: 60px;
	height: 60px;
	background-color: #1b74bb;
	color: #FFF;
	line-height: 60px;
	font-size: 24px;
	text-align: center;
	border-radius: 100%;
}

.login .login-form .form-input-group {
	display: block;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 5px;
	background-color: #FFF;
	width: 100%;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1) inset,
							1px 0 1px rgba(0,0,0,0.05) inset,
							-1px 0 1px rgba(0,0,0,0.05) inset,
							0 1px 1px -1px rgba(0,0,0,0.3);
	margin-top: 120px;
	margin-bottom: 24px;
	clear: both;
}
.login .login-form .form-input-group .form-input { width: 100%; height: 40px; overflow: hidden; }
.login .login-form .form-input-group .form-input:first-child { border-bottom: 1px solid rgba(0,0,0,0.1); }
.login .login-form .form-input-group .form-input > span,
.login .login-form .form-input-group .form-input > i,
.login .login-form .form-input-group .form-input > input {
	display: block;
	float: right;
	height: 40px;
	line-height: 40px;
	color: #A4A4A4;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	transition: all 250ms ease-in-out;
}
.login .login-form .form-input-group .form-input > span,
.login .login-form .form-input-group .form-input > i { width: 40px; text-align: center; font-size: 12px; }
.login .login-form .form-input-group .form-input > input { width: calc(100% - 40px); padding: 8px 12px; }
.login .login-form .form-input-group .form-input > span { display: none; color: #F00; }
.login .login-form .form-input-group .form-input.error > input { width: calc(100% - 80px); }
.login .login-form .form-input-group .form-input.error > span { display: block; }
.login .login-form .form-input-group .form-input > input:focus + i { color: #1b74bb; }

.login .login-form .form-button {
	display: block;
	width: 100px;
	height: 40px;
	line-height: 40px;
	overflow: hidden;
	background-color: #1b74bb;
	color: #FFF;
	border: none;
	outline: none;
	float: right;
	clear: both;
	margin-right: 12px;
	margin-bottom: 24px;
	padding: 0;
	position: relative;
	border-radius: 5px;
	box-shadow: 0 5px 5px -5px #222;
}
.login .login-form .form-button:before,
.login .login-form .form-button span {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 250ms ease-in-out;
}
.login .login-form .form-button span { z-index: 2; }
.login .login-form .form-button:hover span { margin-left: 12px; }
.login .login-form .form-button:before { width: 0; z-index: 1; }
.login .login-form .form-button:before { background: linear-gradient(to right, #114A78, #1b74bb); }
.login .login-form .form-button:hover:before { width: 100%; }

.login .login-form .form-error { display: block; clear: both; color: #F00; text-align: right; padding-right: 12px; }
.login .login-form .form-error.hidden { display: block; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	background-color: rgba(255,255,255,1) !important;
	background-image: none !important;
	color: #A4A4A4 !important;
}
	
@media (max-width: 767px) {
	.login .login-form { width: 300px; }
	.login .login-form h1 { top: 24px; height: 24px; line-height: 24px; font-size: 20px; }
	.login .login-form p { width: 80%; top: 60px; font-size: 12px; }
	.login .login-form .login-icon { top: 24px; width: 40px; height: 40px; line-height: 40px; transform: none; }
}