#main { font-size: 1.25em; }
#header { margin-bottom: 1em; }
#main h1 { position: fixed; z-index: 1; left: -100000000px; top: -100000000px; }

.infopage #article { margin-bottom: 2em; }
.infopage { background: #efefef; }
.infopage #header {
	background: rgb(33,76,154);
	background: linear-gradient(45deg, rgba(33,76,154,1) 0%, rgba(90,193,210,1) 100%);
}
#header .wrapper { max-width: 2000px; }

#showmobilemenu { display: none; }
#showmobilemenu i {	font-size: 3em; }

#menubar { position: absolute; z-index: 1; left: 0; right: 0; top: 40px; }
#menubar .wrapper { padding: 0 30px; }
#menubar .row > * { padding: 0; }

#nav { float: right; }
#nav ul { display: table; }
#nav ul li {
	display: table-cell;
	vertical-align: middle;
}
#nav ul li + li { padding-left: 1.5em; }
#nav ul li:nth-child(4) { padding-left: 1.5em; }
#nav ul li:last-child { padding-left: 1em; }
#nav a {
	color: #FFF;
	font-size: 1.2em;
	text-decoration: none;
}
#nav ul li:nth-child(4) a, #nav ul li:nth-child(5) a {
	background: #FFF;
	border-radius: 1em;
	color: #2056a4;
	padding: 0.5em 1.2em;
	text-transform: uppercase;
}
#nav ul li:nth-child(4) a { 
	background: #d91c60;
	color: #FFF;
}
#nav ul li:nth-child(4) a:hover { background: #B40543; }
#nav ul li:nth-child(5) a:hover { background: #f2f2f2; }

.scroll #menubar { 
	position: fixed; 
	right: -20px;
	top: 25px;
}
.scroll #nav {
	background: #d91c60;
	border-radius: 50px;
    border: 1px solid #cb2c65;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.28);
	padding: 1.5em;
}
.scroll #nav ul li:nth-child(4) a { background: #2056a4; }
.scroll #nav ul li:nth-child(4) a:hover { background: #19427c; }

#header-background-container {
	margin-right: 0;
	overflow: hidden;
	padding-right: 0;
}
body.infopage #header-background-container { display: none; }
#header-background {
	display: table;
	width: 100%;
}
#header-background > * {
	display: table-cell;
	vertical-align: middle;
}
#header-text-container { position: relative; z-index: 1; }
#header-text { 
	color: #757575;
	font-size: 1.25em;
	line-height: 1.5em;
	position: absolute; z-index: 1; top: 50%; left: 0;
	transform: translateY(-50%);
	width: 120%; max-width: 700px;
}
.infopage #header-text-title {
	color: #fff;
    text-align: center;
    padding: 2.5em 0.25em 2em;
    text-transform: uppercase;
    font-size: 3.5em;
}
.infopage .header-subtitle {
	text-transform: none;
    font-size: 0.5em;
    font-weight: normal;
	line-height: 120%;
    margin-top: 0.5em;
}
#header-text-title {
	font-size: 2em;
	line-height: 1.2em;
	margin-bottom: 1em;
}
#header-background-img { 
	text-align: right;
	vertical-align: top;
	width: 65%;
}
#header-background-img img {
	display: inline-block;
	width: 100%; max-height: none; height: auto;
}
#header-background-img-mobile { display: none; }
#header-image-mobile { display: none; }
#mobilemenubutton {
	display: none;
	position: fixed; top: 10px; right: 10px;
}

#main .box { padding-top: 4em; padding-bottom: 4em; }
#main .greybox { background: #efefef; }
#main .bluebox {
	background: rgb(33,76,154);
    background: linear-gradient(45deg, rgba(33,76,154,1) 0%, rgba(90,193,210,1) 100%);
	color: #fff!important;
}
#main .bluebox a, #main .bluebox h1, #main .bluebox h2, #main .bluebox h3 { color: #fff; }
#main .box-content { overflow-x: hidden; }
#main .box-content > *:first-child { margin-top: 0; }
#main .box-content > *:last-child { margin-bottom: 0; }

@media screen and (max-width: 1023px) {
	#header { margin-bottom: 0!important; }
	#header-background-container { 
		background: rgb(33,76,154);
		background: linear-gradient(45deg, rgba(33,76,154,1) 0%, rgba(90,193,210,1) 100%);
		max-height: none;
		padding: 8em 20px 4em;
		position: relative;
		z-index: 0;
	}
	#header-text-container { text-align: center; }
	#header-text-container #header-text {
		color: #fff;
		display: inline-block;
		text-align: center;
		position: static; width: 100%; transform: none; top: auto; left: auto;
	}
	#header-text-container #header-text #header-text-title { 
		color: #fff; 
		text-align: center;
	}
	#header-background { display: block; }
	#header-background > * { display: block; }
	#header-background-img { display: none; }
	#header-background-img-mobile {
		display: block;
		text-align: center;
	}
	#header-background-img-mobile img {
		width: 80%;
		text-align: center;
		margin-top: 2em;
		max-width: 300px;
	}
}

@media screen and (max-width: 1399px) and (min-height: 700px) {
	#header-background { top: 50%!important; }
	#header-image-mobile {
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -50px;
	}
	#header-image-mobile img { width: 200px; }
}

@media screen and (max-width: 800px) {
	#mobilemenubutton { 
		background: #d91c60;
		display: block; 
		z-index: 200;
	}
	#nav {
		background: #d91c60;
		border-radius: 0!important;
		padding-top: 40px;
		position: fixed; left: 100vw; top: 0; z-index: 100;
		text-align: center;
		width: 100%;
		height: 100vh;
		transition: left 750ms ease 0s;
	}
	#nav ul { display: block; }
	#nav ul li { 
		border-bottom: 1px solid #fff;
		display: block; 
		margin: 0 2em;
		padding: 1.5em 0!important;
		text-transform: uppercase;
		font-size: 1.25em;
	}
	#nav ul li:last-of-type { border-bottom: none; }
	#nav ul li:nth-child(4) a {
		background: #214c9a;
	}
	#nav ul li:nth-child(4) a:hover { background: #1d4184; }

	#header-background-container {
		padding: 5em 20px 5em;
	}

	#main .box {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}

@media screen and (max-width: 585px) {
	#header-image-mobile { display: none; }
	#header-background-container { padding: 5em 20px 3em; }
	#header-background-img-mobile img { margin-top: 0; }
}
