.LoginOverlay
{
	width			: 100%;
	height			: 100%;
	position		: fixed;
	top				: 0px;
	bottom			: 0px;
	padding-top		: 100px;
	left			: 0px;
	right			: 0px;
	z-index			: 10000005!important;
	background		: rgba(0,0,0, 0.5);
	display			: none;
}
.login-container
{
	width			: 60vw;
	min-width		: 800px;
	height			: 70vh;
	min-height		: 600px;
	position		: fixed;
	top				: 50%;
	left			: 50%;
 	transform		: translateY(-50%) translateX(-50%);
	background-color: #FFF;
	box-shadow		: 0 0 30px #00000060;
}
.login-image
{
	width			: 49.5%;
	height			: 100%;
	min-height		: auto;
	background-position	: center top;
	background-repeat	: no-repeat;
	background-size		: cover;
	background-image	: url(https://www.northeastern.edu/bachelors-completion/wp-content/uploads/2018/03/keyboard-hands.jpeg);
	display				: inline-block;
	vertical-align	: top;
}

.login-holder
{
	width			: 50%;
	min-height		: 350px;
	margin			: 0px auto;
	background-color: #FFF;
	position		: relative;
	padding-bottom	: 20px;
	-moz-transition		: 0.6s;
	-o-transition		: 0.6s;
	-webkit-transition	: 0.6s;
	display				: inline-block;
	transition			: 0.6s;
	vertical-align	: top;
}

.Success
{
	padding-left		:  300px;
	background-image	: url("/login/img/success.gif");
	background-repeat	: no-repeat;
	background-position	: top left;
	background-size		: 300px;
	-moz-transition		: 0.6s;
	-o-transition		: 0.6s;
	-webkit-transition	: 0.6s;
	transition			: 0.6s;
}

.Close
{
	width			: 25px;
	line-height		: 25px;
	display			: block;
	position		: absolute;
	text-align		: center;
	top				: 1px;
	right			: 1px;
}
.Close::after
{
	content			: '\2573';
	font-weight		: bold;
}
.login-block
{
	padding			: 10px 20px;
	padding-left	: 50px;
	padding-top		: 30px;
}
.login-block h1
{
	font-family		: 'Open Sans', sans-serif;
	font-weight		: 300;
	line-height		: 50px;
	color			: #444;
	font-size		: 2em;
	margin			: 0 0 30px;
}
.login-block h3
{
	font-family		: 'Open Sans', sans-serif;
	font-weight		: 300;
	line-height		: 50px;
	color			: #444;
	font-size		: 1.4em;
	margin			: 0 0 30px;
}

.login-block h4
{
	font-family		: 'Open Sans', sans-serif;
	font-weight		: 300;
	line-height		: 26px;
	color			: #666;
	font-size		: .95em;
	margin			: 0 0 30px;
}

.login-holder hr
{
	border			: none;
	width			: 70%;
	background-color: #CCC;
	height			: 1px;
	margin-left		: 50px;
	margin			: 0 0 30px 50px;
}


.login-button-style
{
	width			: 40%;
	margin			: 0px;
	border			: none;
	border-radius	: 5px;
	background-color: #E85858;
	height			: 40px;
	font-family		: 'Roboto', arial;
	font-size		: .9em;
	color			: #FFF;
	font-weight		: 300;
	padding			: 0px;
	display			: inline-block;
}
.login-button-style:hover
{
	background-color: #EEE;
	color			: #E85858;
}

.signup
{
	background-color: #FFFFFF;
	border			: 1px solid rgb(129, 27, 61);
	color			: #E85858;
	line-height		: 40px;
	display			: inline-block;
}

.login-form-style
{
	width			: 70%;
	border			: 1px solid #EAEAEA;
	border-radius	: 5px;
	font-family		: 'Roboto', sans-serif;
	font-size		: .9em;
	font-weight		: 300;
	color			: #333;
	line-height		: 35px;
	padding			: 5px 10px;
	margin			: 0px 0px 30px;
}

.login-form-style:focus
{
	border-bottom	: 1px solid rgb(129, 27, 61);
}


.login-block a
{
	font-family		: 'Roboto', sans-serif;
	font-size		: .9em;
	font-weight		: 300;
	color			: rgb(129, 27, 61);
	text-decoration	: none;
	font-weight		: 400;
}
.forgot-pass
{
	display			: inline-block;
	margin			: 10px 30px;
	margin-left		: 30px;
	line-height		: 30px;
}

@media only screen and (max-width: 600px)
{
	.Success
	{
		padding-left		: 0px;
		background-image	: url("/modules/login/img/success.gif");
		background-repeat	: no-repeat;
		background-position	: top left;
		background-size		: 300px;
		-moz-transition		: 0.6s;
		-o-transition		: 0.6s;
		-webkit-transition	: 0.6s;
		transition			: 0.6s;
	}
	.login-holder
	{
		width			: 100vw;
		min-height		: auto;
	}

	.login-container
	{
		width			: 100vw;
		min-width		: 300px;
		height			: 100vh;
		min-height		: 100vh;
		top				: 0%;
		left			: 0%;
		transform		: none;
	}
	.login-image
	{
		display				: none;
	}

	.login-holder
	{
		width			: 100vw;
		min-height		: 100vh;
		text-align		: center;
	}

	.login-block
	{
		padding			: 20px;
		padding-left	: 20px;
		padding-top		: 30px;
	}
	.login-form-style
	{
		width			: 80%;
	}
}