@font-face {
	font-family: 'InZpire';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('/fonts/Branding-Semilight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/Branding-Semilight.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/Branding-Semilight.woff') format('woff'), /* Pretty Modern Browsers */
	url('/fonts/Branding-Semilight.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/Branding-Semilight.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: "InZpire";
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('/fonts/Branding-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/Branding-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/Branding-Semibold.woff') format('woff'), /* Pretty Modern Browsers */
	url('/fonts/Branding-Semibold.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/Branding-Semibold.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-weight: 600;
}

*[contenteditable="true"] {
	display: inline-block;
}

/* ======== resets and overrides ======== */

* {
	margin: 0;
	padding: 0;
}

	*, *:before, *:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

.loading {
	background-image: url(/images/spinner-mw.gif) !important;
	background-size: 35px 35px !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	padding-left: 35px !important;
}

body {
	float: left;
	width: 100%;
	height: 100vh;
	background: #01ACED;
	font-family: 'InZpire', 'Segoe UI', Helvetica, Arial;
	font-size: 100%;
}


	body.morning {
		background: #01ACED url(/images/inloggen/good-morning.png) no-repeat left center;
	}
	body.afternoon {
		background: #01ACED url(/images/inloggen/good-afternoon.png) no-repeat left center;
	}
	body.evening {
		background: #01ACED url(/images/inloggen/good-evening.png) no-repeat left center;
	}
	body.night {
		background: #01ACED url(/images/inloggen/good-night.png) no-repeat left center;
	}

.hideMe {
	display: none;
}

.left{
	float:left;
}

.w50{
	width:50% !important;
}

h1
{
	float:left;
	width: 100%;
	font-family: 'InZpire';
	font-weight: bold;
	font-size: 60pt;
	color:#FFF;
	text-align:center;
	padding: 15px 0;
}

h2 {
	float: left;
	width: 100%;
	margin: 15px 0 !important;
	color: #1B75BA ;
	font-size: 25pt;
	font-family: 'InZpire';
}


div.loginform {
	float: left;
	width: 30%;
	margin: 1% 35%;
	padding: 30px;
	border-radius: 5px;
	font-weight: normal;
	background: white;
	border: 1px solid #E5E5E5;
	-moz-box-shadow: #1B75BA 0px 2px 10px 5px;
	-webkit-box-shadow: #1B75BA 0px 2px 10px 5px;
	box-shadow: #1B75BA 0px 2px 10px 5px;
}

div.qRow{
	float:left;
	width: 100%;
	margin: 0 0 15px 0;
}

	div.qRow img.authenticator {
		float: left;
		width: 20%;
		margin: 0 40% 15px 40%;
	}

	div.qRow span {
		float: left;
		font-family: 'InZpire';
		width: 100%;
		line-height: 30px;
	}
	
	div.qRow a {
		float: left;
		font-family: 'InZpire';
		width: 100%;
		line-height: 30px;
	}

	div.qRow input[type=text], div.qRow input[type=password] {
		float: left;
		width: 90%;
		height: 40px;
		border-radius: 5px;
		border: 1px solid #CCC;
		padding: 0 5px;
		font-size: 17pt;
	}

	div.qRow input.pin {
		float: left;
		width: 9%;
		height: 50px;
		border-radius: 5px;
		border: 1px solid #CCC;
		padding: 0 0;
		font-size: 17pt;
		background: #E8F0FE;
		margin: 0 1% 0 0;
		text-align: center;
	}
		div.qRow input.pin.last {
			margin: 0 3% 0 0;
		}
	
	span .error {
	display: inline;
	float: left;
	width: 100%;
	font-size: 12pt;
	font-family: Branding;
	color: red;
	margin: 10px 0;
}
span.button {
	float: left;
	font-family: Branding;
	font-size: 15pt !important;
	font-weight: bold;
	border-radius: 5px;
	text-decoration: none;
	padding: 10px 20px;
	cursor: pointer;
	color: white;
	background: #F6921E;
}


div.loginWrapper {
	position: absolute;
	left: 50%;
	right: 50%;
	width: 500px;
	margin-left: -250px;
	margin-right: auto;
	float: left;
}


input[type=submit].button.gmail {
	float: left;
	font-family: Branding;
	font-size: 15pt !important;
	font-weight: bold;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	padding: 10px 20px;
	cursor: pointer;
	color: white;
	background: #DD4B39;
	width: 100% !important;
	border: 0px;
	margin: 5px 0;
	text-align: center;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYwIiBoZWlnaHQ9IjU2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM5Mi44NjkgMTUzLjI1M2MtMjkuMDkxLTI3Ljc1MS02Ni4wNjktNDEuODc1LTEwNy4yNTctNDEuODc1LTczLjExNSAwLTEzNC45NzQgNDkuMjQ5LTE1Ny4wMTggMTE1LjQyMmwtLjI2MS43ODhjLTUuNDUxIDE2LjU3My04LjU2MyAzNC4yNTEtOC41NjMgNTIuNDEyIDAgMTguNDggMy4yMTIgMzYuNCA4LjgyNCA1My4ybC4yNi43NzVjMjIuMjY3IDY1LjgxMyA4My45MjkgMTE0LjY3OCAxNTYuNzU4IDExNC42NzggMzcuNzI3IDAgNjkuODczLTkuOTI0IDk1LjAwMy0yNi43MjQgMjkuNzEzLTE5Ljg0OSA0OS41MTItNDkuNTI4IDU1Ljk5OC04NC41MjlIMjg1LjYxMlYyMjkuMTAyaDI2NC4yNzVBMzIyLjE3IDMyMi4xNyAwIDAxNTU1IDI4Ni4zNzhjMCA4NC42MDktMzAuMTQxIDE1NS45MjYtODIuNDQ1IDIwNC42NTNsLTEuMjQgMS4xNDdDNDI0Ljg4OSA1MzQuOTU2IDM2MS4zNzggNTYwIDI4NS42MTIgNTYwYy0xMDkuNzE5IDAtMjA0LjU5Ny02Mi43Mi0yNTAuNzc0LTE1NC4yNDlDMTUuODE5IDM2Ny45NTEgNSAzMjUuMjA0IDUgMjgwYzAtNDUuMTczIDEwLjgxOS04Ny45MTkgMjkuODM4LTEyNS43MkM4MS4wMTUgNjIuNzUxIDE3NS44OTMgMCAyODUuNjEyIDBjNzUuNjEgMCAxMzkuMTUzIDI3Ljc1MSAxODcuNzMgNzIuOTU2bC04MC40NzMgODAuMjk3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
	background-position: 10px;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

	input[type=submit].button.gmail:hover {
		background: #E05D4D;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYwIiBoZWlnaHQ9IjU2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM5Mi44NjkgMTUzLjI1M2MtMjkuMDkxLTI3Ljc1MS02Ni4wNjktNDEuODc1LTEwNy4yNTctNDEuODc1LTczLjExNSAwLTEzNC45NzQgNDkuMjQ5LTE1Ny4wMTggMTE1LjQyMmwtLjI2MS43ODhjLTUuNDUxIDE2LjU3My04LjU2MyAzNC4yNTEtOC41NjMgNTIuNDEyIDAgMTguNDggMy4yMTIgMzYuNCA4LjgyNCA1My4ybC4yNi43NzVjMjIuMjY3IDY1LjgxMyA4My45MjkgMTE0LjY3OCAxNTYuNzU4IDExNC42NzggMzcuNzI3IDAgNjkuODczLTkuOTI0IDk1LjAwMy0yNi43MjQgMjkuNzEzLTE5Ljg0OSA0OS41MTItNDkuNTI4IDU1Ljk5OC04NC41MjlIMjg1LjYxMlYyMjkuMTAyaDI2NC4yNzVBMzIyLjE3IDMyMi4xNyAwIDAxNTU1IDI4Ni4zNzhjMCA4NC42MDktMzAuMTQxIDE1NS45MjYtODIuNDQ1IDIwNC42NTNsLTEuMjQgMS4xNDdDNDI0Ljg4OSA1MzQuOTU2IDM2MS4zNzggNTYwIDI4NS42MTIgNTYwYy0xMDkuNzE5IDAtMjA0LjU5Ny02Mi43Mi0yNTAuNzc0LTE1NC4yNDlDMTUuODE5IDM2Ny45NTEgNSAzMjUuMjA0IDUgMjgwYzAtNDUuMTczIDEwLjgxOS04Ny45MTkgMjkuODM4LTEyNS43MkM4MS4wMTUgNjIuNzUxIDE3NS44OTMgMCAyODUuNjEyIDBjNzUuNjEgMCAxMzkuMTUzIDI3Ljc1MSAxODcuNzMgNzIuOTU2bC04MC40NzMgODAuMjk3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
		background-position: 10px;
		background-size: 20px 20px;
		background-repeat: no-repeat;
	}

span.button.gmail {
	float: left;
	font-family: Branding;
	font-size: 15pt !important;
	font-weight: bold;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	padding: 10px 20px;
	cursor: pointer;
	color: white;
	background: #DD4B39;
	width: 100% !important;
	border: 0px;
	margin: 5px 0;
	text-align: center;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYwIiBoZWlnaHQ9IjU2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM5Mi44NjkgMTUzLjI1M2MtMjkuMDkxLTI3Ljc1MS02Ni4wNjktNDEuODc1LTEwNy4yNTctNDEuODc1LTczLjExNSAwLTEzNC45NzQgNDkuMjQ5LTE1Ny4wMTggMTE1LjQyMmwtLjI2MS43ODhjLTUuNDUxIDE2LjU3My04LjU2MyAzNC4yNTEtOC41NjMgNTIuNDEyIDAgMTguNDggMy4yMTIgMzYuNCA4LjgyNCA1My4ybC4yNi43NzVjMjIuMjY3IDY1LjgxMyA4My45MjkgMTE0LjY3OCAxNTYuNzU4IDExNC42NzggMzcuNzI3IDAgNjkuODczLTkuOTI0IDk1LjAwMy0yNi43MjQgMjkuNzEzLTE5Ljg0OSA0OS41MTItNDkuNTI4IDU1Ljk5OC04NC41MjlIMjg1LjYxMlYyMjkuMTAyaDI2NC4yNzVBMzIyLjE3IDMyMi4xNyAwIDAxNTU1IDI4Ni4zNzhjMCA4NC42MDktMzAuMTQxIDE1NS45MjYtODIuNDQ1IDIwNC42NTNsLTEuMjQgMS4xNDdDNDI0Ljg4OSA1MzQuOTU2IDM2MS4zNzggNTYwIDI4NS42MTIgNTYwYy0xMDkuNzE5IDAtMjA0LjU5Ny02Mi43Mi0yNTAuNzc0LTE1NC4yNDlDMTUuODE5IDM2Ny45NTEgNSAzMjUuMjA0IDUgMjgwYzAtNDUuMTczIDEwLjgxOS04Ny45MTkgMjkuODM4LTEyNS43MkM4MS4wMTUgNjIuNzUxIDE3NS44OTMgMCAyODUuNjEyIDBjNzUuNjEgMCAxMzkuMTUzIDI3Ljc1MSAxODcuNzMgNzIuOTU2bC04MC40NzMgODAuMjk3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
	background-position: 10px;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

	span.button.gmail:hover {
		background: #E05D4D;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYwIiBoZWlnaHQ9IjU2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM5Mi44NjkgMTUzLjI1M2MtMjkuMDkxLTI3Ljc1MS02Ni4wNjktNDEuODc1LTEwNy4yNTctNDEuODc1LTczLjExNSAwLTEzNC45NzQgNDkuMjQ5LTE1Ny4wMTggMTE1LjQyMmwtLjI2MS43ODhjLTUuNDUxIDE2LjU3My04LjU2MyAzNC4yNTEtOC41NjMgNTIuNDEyIDAgMTguNDggMy4yMTIgMzYuNCA4LjgyNCA1My4ybC4yNi43NzVjMjIuMjY3IDY1LjgxMyA4My45MjkgMTE0LjY3OCAxNTYuNzU4IDExNC42NzggMzcuNzI3IDAgNjkuODczLTkuOTI0IDk1LjAwMy0yNi43MjQgMjkuNzEzLTE5Ljg0OSA0OS41MTItNDkuNTI4IDU1Ljk5OC04NC41MjlIMjg1LjYxMlYyMjkuMTAyaDI2NC4yNzVBMzIyLjE3IDMyMi4xNyAwIDAxNTU1IDI4Ni4zNzhjMCA4NC42MDktMzAuMTQxIDE1NS45MjYtODIuNDQ1IDIwNC42NTNsLTEuMjQgMS4xNDdDNDI0Ljg4OSA1MzQuOTU2IDM2MS4zNzggNTYwIDI4NS42MTIgNTYwYy0xMDkuNzE5IDAtMjA0LjU5Ny02Mi43Mi0yNTAuNzc0LTE1NC4yNDlDMTUuODE5IDM2Ny45NTEgNSAzMjUuMjA0IDUgMjgwYzAtNDUuMTczIDEwLjgxOS04Ny45MTkgMjkuODM4LTEyNS43MkM4MS4wMTUgNjIuNzUxIDE3NS44OTMgMCAyODUuNjEyIDBjNzUuNjEgMCAxMzkuMTUzIDI3Ljc1MSAxODcuNzMgNzIuOTU2bC04MC40NzMgODAuMjk3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
		background-position: 10px;
		background-size: 20px 20px;
		background-repeat: no-repeat;
	}

span.button.cred {
	float: left;
	font-family: Branding;
	font-size: 15pt !important;
	font-weight: bold;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	padding: 10px 20px;
	cursor: pointer;
	color: white;
	background: #DD4B39;
	width: 100% !important;
	border: 0px;
	margin: 5px 0;
	text-align: center;
	background: #01ACED url(/images/inloggen/credentials.png) no-repeat 5px 0px;
	
}

	span.button.cred:hover {
		background: #E05D4D;
		background: #01ACED url(/images/inloggen/credentials.png) no-repeat 5px 0px;
	}

div.seperator {
	float: left;
	width: 100%;
	border-bottom: 1px solid #CCC;
	height: 15px;
	margin: 20px 0;
}


	div.seperator span {
		float: left;
		font-family: Branding;
		font-size: 12pt !important;
		font-weight: normal;
		background: #FFF;
		width: 300px;
		text-align: center;
		margin-left: calc(50% - 150px);
	}