/* CSS Document */

body {
	margin: 0;
	opacity: 0;
	height: 100vh;
	overflow:hidden;
	font-family:'Raleway', sans-serif;
}

body{
	opacity: 0;
}
#background{
	display:block;
	position:relative;
	margin-top:-10%;
}
#background-img{
	width:100%;
	display:block;
	position:relative;
}
#overlay-img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#pizza-img{
	position:absolute;
	display:block;
	top:0;
}
#lettuce-img{
	position:absolute;
	display:block;
}
#hand-img{
	position:absolute;
	display:block;
	bottom:0;
}

#login-area{
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:34%;
}
#login-main{
	display:table;
	height:100%;
	background:#575757;
	width:100%;
}
#login-main a{
	color:#fff;
}
#login-main-inner{
	vertical-align:middle;
	display:table-cell;
}
#login-main-form{
	width:100%;
	max-width:400px;
	margin:0 auto;
}
#login-main-form > div > img{
	width:100%;
}
#login-main-form .form-control{
	width:100%;
}
#login-curve svg{
	position:absolute;
	left:calc(100% - 1px);
	height:100vh;
	top:0;
	fill:#575757;
}

.login-form-group{
	display:block;
	position:relative;
}
.login-form-group .form-control{
	background:none;
	border:none;
	color:#fff;
	border-radius:0;
	padding:10px 30px;
	line-height:20px;
	font-size:20px;
	border-bottom:1px solid #fff;
	margin-top:10px;
}
.form-control::placeholder {
	color: #fff;
	opacity: 1;
}
.form-control:focus{
	box-shadow:none;
}
.login-form-group svg{
	display:block;
	position:absolute;
	font-size:20px;
	color:rgba(255,255,255,0.5);
	left:5px;
	top:10px;
}
.form-check-input{
	position:absolute;
	opacity:0;
	cursor:pointer;
}
.form-check-label .custom-checkbox{
	position:absolute;
	top:4px;
	left:0px;
	height:16px;
	width:16px;
	background-color:transparent;
	border:1px solid #fff;
}
.form-check-label .custom-checkbox::after{
	position:absolute;
	content:"";
	left:12px;
	top:12px;
	height:0px;
	width:0px;
	border:solid #000;
	border-width:0px 3px 3px 0px;
	-webkit-transform:rotate(0deg) scale(0);
	-ms-transform:rotate(0deg) scale(0);
	transform:rotate(0deg) scale(0);
	opacity:1;
}
.form-check-label input:checked ~ .custom-checkbox{
	background-color:#fff;
	-webkit-transform:rotate(0deg) scale(1);
	-ms-transform:rotate(0deg) scale(1);
	transform:rotate(0deg) scale(1);
	opacity:1;
	border:1px solid #fff;
}
.form-check-label input:checked ~ .custom-checkbox::after{
	-webkit-transform:rotate(45deg) scale(1);
	-ms-transform:rotate(45deg) scale(1);
	transform:rotate(45deg) scale(1);
	opacity:1;
	left:4px;
	top:0px;
	width:6px;
	height:12px;
	border:solid #575757;
	border-width:0px 2px 2px 0px;
	background-color:transparent;
}
.form-check-label{
	color:#fff;
}

#login-main .btn{
	display:block;
	width:100%;
	border-radius:0;
	background:none;
	border:1px solid #fff;
	font-size:20px;
}
#login-main .btn:hover{
	background:#fff;
	color:#575757;
}

#overlay-area{
	display:table;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
}
#overlay-area-band{
	display:table-cell;
	vertical-align:middle;
}
#overlay-area-block{
	background:rgba(87,87,87,0.93);
	padding:25px;
}
#overlay-area-inner{
	display:block;
	max-width:1000px;
	width:100%;
	margin:0 auto;
	position:relative;
}
#overlay-area h1{
	color:#fff;
	font-size:30px;
	border-bottom:1px solid #fff;
	padding-bottom:10px;
	margin-bottom:15px;
}
#overlay-area h1 svg{
	font-size:24px;
}
#overlay-scroll{
	max-height:300px;
	overflow:auto;
	display:block;
	background:#fff;
	padding:25px;
	font-size:20px;
	color:#7a7a7a;
}
#overlay-scroll h2{
	font-size:20px;
	font-weight:bold;
}
.mCSB_inside > .mCSB_container {
	margin-right: 60px;
}
.mCSB_scrollTools{
	width: 45px;
	border-left: 1px solid #7a7a7a;
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	line-height: 30px;
	width: 30px;
	border-radius: 0;
	background: #7a7a7a;
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:#7a7a7a;
}
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
	background-color: transparent;
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-dark.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools a + .mCSB_draggerContainer{
	margin-left:15px;
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{
	background: url('../img/chevron-up.png') no-repeat;
	opacity:0.8;
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{
	background: url('../img/chevron-down.png') no-repeat;
	opacity:0.8;
}

#overlay-buttons{
	display:block;
	text-align:right;
	margin:20px 5px;
}
#overlay-buttons ul{
	list-style:none;
}
#overlay-buttons ul li{
	display:inline-block;
}
#overlay-buttons .btn{
	font-size:20px;
	border:none;
	border-radius:0;
	padding:5px 25px;
	min-width:175px;
	margin-left:20px;
}
#overlay-buttons .btn-secondary{
	background:#e6e6e6;
	color:#7a7a7a;
}
#overlay-buttons .btn-primary{
	background:#003F74;
	color:#fff
}

#close-overlay{
	position:absolute;
	top:5px;
	right:5px;
	background:none;
	border:none;
	color:#fff;
	padding:0;
	font-size:26px;
	line-height:24px;
}
#close-overlay:hover{
	cursor:pointer;
	color:#ababab;
}
#overlay-list{
	padding:0;
	list-style:none;
}
#overlay-list li{
	padding:0;
	margin:0;
	display:block;
}
#overlay-list li a{
	padding:10px 0px;
	margin:0;
	display:block;
	font-size:18px;
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,0.33);
}
#overlay-list li a:hover{
	text-decoration:none;
	color:#ababab;
}

@media(max-width:1330px){
	#background{
		margin-top:0;
		min-height:100vh
	}
	#background-img{
		min-height:100vh
	}
	#login-area{
		width:45%;
	}
	#login-main{
		padding-left:20px;
	}
}
@media(max-width:1000px){
	#background{
		width:100%;
		float:right;
	}
	#login-curve{
		display:none;
	}
	#login-area{
		width:100%;
	}
	#login-main{
		padding:0;
		background:none;
	}
	#login-main-form{
		background:#575757;
		max-width:100%;
		width:100%;
		padding:20px;
		margin:0;
	}
	#login-main-form > div{
		width:100%;
		max-width:300px;
		display:block;
		margin:0 auto;
	}
	#background, #background-img{
		min-height:unset;
	}
	#overlay-buttons{
		text-align:center;
	}
	#overlay-buttons ul{
		padding:0;
		margin:0;
	}
	#overlay-buttons ul li{
		display:block;
	}
	#overlay-buttons .btn{
		width:100%;
		margin:2px 0 0;
	}
	#overlay-scroll{
		max-height:200px;
		margin:2px 0;
	}
	#overlay-area-block{
		padding:5px 15px;
	}
	#overlay-area h1{
		font-size:24px;
	}
	#overlay-list li a{
		padding:5px 0px;
		font-size:16px;
	}
}

@media(max-width:810px) {
	#background{
		width: 140%;
		margin-right: -100px;
	}
}

@media(max-width:670px) {
	#background{
		width: 170%;
		margin-right: -100px;
	}
}

@media(max-width:560px) {
	#background{
		width: 200%;
		margin-right: -100px;
	}
}

@media(max-width:500px) {
	#background{
		width: 230%;
		margin-right: -100px;
	}
}

@media(max-width:650px){
	#login-area, body, #background-area, #background-img{
		height: 100%;
		min-height:unset;
		overflow: auto;
	}
}
@media(max-width:450px){
	#background{
		width:400%;
		margin-right:-100px;
	}
}

h1{
	color:#fff;
	text-transform:uppercase;
	font-size:24px;
	margin:15px 0 15px 0;

}
p{color:#fff;}

.text-inactive{
	color:#ff9292;
}
.text-active{
	color:#4cf773
}

.instructions{color:#fff;}