body{
	background-color: #388ed2!important;
	color: #4a4a4a!important;
}

div.content{
	min-height: 100vh;
	position: relative;
}
/*a.admin-link{
	text-decoration: none;
	color: #388ed2;
	position: absolute;
	top: -90px;
	right: -90px;
	width: 180px;
	height: 180px;
    line-height: 185px;
    text-align: center;
	border-radius: 50%;
	background-color: #ececec;
}
a.admin-link:hover{
	text-decoration: none;
	color: #388ed2;
}*/

div.head-banner{
	width: 100%;
	position: absolute;
	left: 50%;
	top: 0;
	color: #ffffff;
	font-weight: bold;
	font-family: sans-serif;
	text-align: center;
}
div.login-box{
	background-color: #ecececab;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	z-index: 200;
}
div.login-box div.header h1{
	margin-bottom: 10px;
	color: #ffffff;
}
.help-msg{
	white-space: nowrap;
}
.code-input{
	width: 100%;
}
.code-input>input{
	width: 100%;
	padding: 10px 16px;
	border-radius: 3px;
	border: 1px solid #ececec;
}

.login-box div.footer{
	width: 100%;
}

.login-box div.footer>button{
	text-align: center;
	width: 100%;
	background-color: #388ed2;
	color: #ffffff;
	padding: .5em 1em;
	border-radius: 3px;
	border: 1px solid #0d84c5;
	transition: background-color .3s;
}

.login-box div.footer>button:hover{
	cursor: pointer;
	background-color: #43a2d6;
    border-color: #51a7d6;
}

.content-footer{
	color: #ffffff;
	font-size: 11px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, -1em);
	white-space: nowrap;
}

@media only screen and (max-width: 575px) {
	.hidden-xs{
		display: none;
	}
	div.head-banner{
		font-size: 28px;
		line-height: 1.1;
		letter-spacing: 1.3px;
		transform: translate(-50%, .5em);
	}
	div.head-banner img.embleme{
		width: 140px;
    	margin-bottom: .25em;
	}
	div.head-banner .head-title{
		margin-top: .5em;
	}
	div.login-box{
		width: 100%;
		padding: 40px 40px 68px 40px;
		transform: translate3d(-50%, -50%, 0);
		text-align: center;
	}

	div.login-box div.header{
		margin-bottom: 60px;
	}
	.login-box div.footer{
		margin-top: 30px;
	}

	a.admin-link{
		display: none;
	}
	.help-msg{
		margin-bottom: 10px;
		font-size: 14px;
	}
	div.login-box div.header h1{
		font-size: 1.8em;
	}
	div.login-box div.header h2{
		font-size: 1.1em;
	}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	div.head-banner{
		font-size: 30px;
		line-height: 1.15;
		letter-spacing: 1.5px;
		transform: translate(-50%, .8em);
	}
	div.head-banner img.embleme{
		width: 170px;
		margin-bottom: .3em;
	}
	div.login-box{
		padding: 40px 80px 68px 80px;
		transform: translate3d(-50%, -40%, 0);
	}

	div.login-box div.header{
		margin-bottom: 30px;
	}
	.login-box div.footer{
		margin-top: 20px;
	}

	.help-msg{
		margin-bottom: 15px;
		font-size: 15px;
	}
	div.login-box div.header h1{
		font-size: 1.8em;
	}
	div.login-box div.header h2{
		font-size: 1.1em;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1139px) {
	div.head-banner{
		font-size: 29px;
		line-height: 1.2;
		letter-spacing: 1.7px;
		transform: translate(-50%, 1em);
	}
	div.head-banner img.embleme{
		width: 180px;
		margin-bottom: .4em;
	}
	div.login-box{
		padding: 40px 80px 68px 80px;
		transform: translate3d(-50%, -40%, 0);
	}
	div.login-box div.header{
		margin-bottom: 30px;
	}
	.login-box div.footer{
		margin-top: 20px;
	}

	.help-msg{
		margin-bottom: 15px;
		font-size: 15px;
	}
	div.login-box div.header h1{
		font-size: 2.2em;
	}
	div.login-box div.header h2{
		font-size: 1.2em;
	}
}
@media only screen and (min-width: 1140px){
	div.head-banner{
		font-size: 29px;
		line-height: 1.2;
		letter-spacing: 1.7px;
		transform: translate(-50%, 1em);
	}
	div.head-banner img.embleme{
		width: 200px;
    	margin-bottom: .4em;
	}
	div.login-box{
		padding: 40px 80px 68px 80px;
		transform: translate3d(-50%, -40%, 0);
	}
	div.login-box div.header{
		margin-bottom: 30px;
	}
	.login-box div.footer{
		margin-top: 20px;
	}

	.help-msg{
		margin-bottom: 15px;
		font-size: 16px;
	}
	div.login-box div.header h1{
		font-size: 2.2em;
	}
	div.login-box div.header h2{
		font-size: 1.2em;
	}
}