.login {
	height: 40vh;
	background-image: url(/images/Frontpage2017/BGImages/login.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.login-content {
	text-align: right;
}

.login-header {
	align-self: flex-end;
	text-align: right;
}

.login-section divider {
	align-self: flex-end;
}

.login-header-fix {
	overflow: initial;
}

.ss-login-error {
	margin-top: 36px !important;
}

.login-error {
	color: red;
	text-align: end;
}

.start-button-page {
	align-self: flex-end;
}

.login-section {
	margin-top: 50px;
}

.login-title-alignment span {
	margin-right: 10px;
}

.vertical-divider {
	height: 333px;
}

@media only screen and (max-width: 75em) {

	.vertical-divider {
		display: none;
	}

	.fb-container {
		margin: 30px 0;
	}

	.login-title-alignment span {
		margin-right: 0px;
	}

	.login-content {
		text-align: center;
	}

	.login-header {
		align-self: center;
		text-align: center;
	}

	.login-section divider {
		align-self: center;
	}

	.login-section {
		margin-top: 20px;
	}

	.subpage-hero-title {
		line-height: 1;
	}

	input[type='text'] {
		/*margin: 0px 40px !important;*/
		/*text-align: center;*/
		/*width: 86.66%;*/
	}

	.login-error {
		color: red;
		text-align: center;
		margin: 0 40px !important;
	}

	.start-button-page {
		align-self: center;
	}

	#loginBox_loginbtn, #loginBox_fubtn {
		margin: 40px auto !important;
	}
}

@media only screen and (max-width: 40em) {
	.login {
		height: 35vh;
	}

	.section-image iframe {
		height: 100%;
		min-height: 300px;
	}

	.login-title-alignment {
		text-align: center;
	}

	.login-section {
		margin-top: 20px;
	}

	input[type='text'] {
		margin: 0px 40px !important;
		width: 86.66%;
	}

	#loginBox_loginbtn, #loginBox_fubtn {
		margin: 20px auto 10px auto !important;
	}

	#loginBox_fp_returnloginbtn, #loginBox_fu_returnloginbtn {
		left: 0px !important;
		width: 100%;
		text-align: center;
		margin: 10px auto !important;
	}

	#loginBox_loginbtn, #loginBox_fubtn {
		width: 100% !important;
	}

	.ss-login-error {
		font-style: normal;
		text-align: center;
	}
}

/* Unfortunately, we're reusing the old login - bee and all - so we have to Frankenstein the style :( */

body {
	font-family: 'Roboto', sans-serif !important;
}

.span3.hidden-phone {
	display: none;
}

#loginBox {
	width: 100%;
}

.span2, .span5, .span6, .span8, .ui-ssl-login .ss-login-input, .row, .ui-ssl-login-labels {
	width: 100% !important;
	margin: 0 !important;
}

.ui-ss-forgot-username-text, .ui-ssl-login-return {
	font-family: Roboto !important;
	font-size: 17px !important;
	font-weight: 300 !important;
	line-height: 20px;
	color: #444;
	white-space: pre-wrap;
}

#loginBox_fp_returnloginbtn, #loginBox_fu_returnloginbtn {
	border: 1px solid #444;
	border-radius: 25px;
	margin: 40px auto;
	padding: 0 20px;
	text-shadow: none;
	line-height: 41px;
	height: 43px;
}

	#loginBox_fp_returnloginbtn:hover, #loginBox_fu_returnloginbtn:hover {
		text-decoration: none;
		color: initial;
	}

input[type='text'],
input[type='password'],
.ss-login-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 49px !important;
	font-family: Roboto;
	display: inline-block;
	height: 30px;
	padding: 10px !important;
	margin: 0px;
	font-size: 17px;
	line-height: 20px;
	color: #444;
	border: solid 1px #b8b8b8 !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background-color: #fff !important;
}

h3.span5 strong, h3 strong {
	font-size: 22px !important;
	font-weight: 300 !important;
	padding: 20px 0 !important;
	margin: 0 !important;
}

.ui-ssl-login h3 {
	margin: 0 !important;
}

.ss-login-hint {
	margin-top: 10px !important;
}

label, .ui-ss-instruction-text {
	font-family: Roboto !important;
	font-size: 15px !important;
	font-weight: 300 !important;
	line-height: 20px;
	color: #444;
	margin: 13px 0 2px 0 !important;
}

.ss-login-hint.hidden-desktop a {
	align-items: flex-start;
}

.ui-ssl-login-forgotpw .ui-ssl-login-return {
	top: 0 !important;
}

#loginBox_loginbtn, #loginBox_fubtn {
	width: 200px;
	height: 41px;
	line-height: 41px;
	border: 2px;
	border-radius: 100px;
	font-family: Roboto;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.3px;
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	text-shadow: none;
	background-image: linear-gradient(to right, #a51300, #bb1600);
	margin: 40px 0;
}

	#loginBox_loginbtn:hover, #loginBox_fubtn:hover {
		box-shadow: none;
	}

li {
	border-bottom: 1px solid grey;
}

	li:first-child {
		margin-top: 20px;
	}

	li:nth-child(odd) {
		background-color: #fbfbfb !important;
	}

.loading img {
	display: none;
}

/*.loading {
    border: 16px solid #f3f3f3; 
    border-top: 16px solid #3498db; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}*/