@charset "utf-8";
/* CSS Document */


/*-------------------------------------------------------------------------------------*/
/*INTRO -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

* {
	margin:0;
}

html, body {
	height:100%;
}

@font-face {
    font-family: 'Anivers';
    src: url('/css/fonts/anivers_regular-webfont.eot');
    src: url('/css/fonts/anivers_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/anivers_regular-webfont.woff') format('woff'),
         url('/css/fonts/anivers_regular-webfont.ttf') format('truetype'),
         url('/css/fonts/anivers_regular-webfont.svg#aniversregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Anivers Bold';
    src: url('/css/fonts/anivers_bold-webfont.eot');
    src: url('/css/fonts/anivers_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/anivers_bold-webfont.woff') format('woff'),
         url('/css/fonts/anivers_bold-webfont.ttf') format('truetype'),
         url('/css/fonts/anivers_bold-webfont.svg#aniversbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

body {
	font-family:'Anivers', Arial, Helvetica, sans-serif;
	font-size: 13px; 
	color:#1c1c1b;
	line-height:20px;
}

h1 {font-size:30px; padding:0; margin:0 0 15px 0; color:#701b75; text-transform:uppercase; 	font-family: 'Anivers Bold';}

/* GENERAL INTRO */
#generalIntro {
	background:#ffffff url(/images/site/headerIntro.png) top center no-repeat;
	width:100%;
	min-height: 100%;
	height: auto !important; 
	height: 100%;
	margin: 0 auto -160px;
}

#generalIntro .logo {
	margin: 20px 0 0 70px;
}

#generalIntro .hexagon {
	width:356px;
	height:436px;
	background:url(/images/site/hexagon.png);
	float:left;
	padding: 0 64px 0 75px;
	display:block;
	text-decoration:none;
	position:relative;
}

#generalIntro .hexagon:hover {
	background:url(/images/site/hexagonHover.png);
}

#generalIntro .hexagon .button {
	height:27px;
	line-height:27px;
	width:100%;
	margin: 0 0 5px 0;
	padding: 0 0 0 11px;
	font-family:'Anivers Bold', Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#ffffff;
	display:block;
	text-decoration:none;
}

#generalIntro .hexagon .button.ml {background:#5b1256;}
#generalIntro .hexagon .button.wm {background:#007ac2;}
#generalIntro .hexagon .button.mh {background:#c4043f;}
#generalIntro .hexagon .button.h {background:#ed6c05;}

#generalIntro .hexagon.po {
	margin: 0 0 0 170px;
}

#generalIntro .hexagon::after {
	content:"";
	position:absolute;
	background:url(/images/site/arrowPo.png);
	display:block;
	width:25px;
	height:26px;
	bottom:37px;
	left:164px;
}

#generalIntro .hexagon.vo::after {
	background:url(/images/site/arrowVo.png);
}

#generalIntro .po .poLogo {
	width:218px;
	height:54px;
	margin: 120px 0 22px 0;
}

#generalIntro .vo .voLogo {
	width:267px;
	height:53px;
	margin: 120px 0 22px -22px;
}

#generalIntro .hexagon.vo {
	margin: 0 0 0 88px;
}

@media(max-width:1199px){
	#generalIntro .logo {margin-left:0;}
	#generalIntro .hexagon.po {margin-left:100px;}
}

@media(max-width:991px){
	#generalIntro .hexagon.po {margin:20px 0 0 0;}
	#generalIntro .hexagon.vo {margin:20px 0 0 8px;}
}

@media(max-width:767px){
	#generalIntro .hexagon.po {clear:both;}
	#generalIntro .hexagon.vo {margin-left:0;clear:both;}
	#generalIntro .schoolChoice {margin-left:50%;}
	#generalIntro .hexagon {margin-left:-178px!important;}
}

@media(max-width:375px){
	#generalIntro .schoolChoice {margin-left:0;}
	#generalIntro .hexagon {margin-left:-0px!important;}
	#generalIntro .hexagon {
	margin-left:-0px!important;
	width:275px;
	height:337px;
	background-size:100%;
	padding:0;
	}
	#generalIntro .po .poLogo {margin: 75px 0 10px 31px;}
	#generalIntro .vo .voLogo {width: 218px; height: auto; margin: 90px 0 22px 31px;}
	#generalIntro .hexagon .button {width: 217px; margin: 0 0 3px 30px;}
	#generalIntro .hexagon::after {left:126px;}
}

/* INTRO PO */
#intro {
	background:#ffffff url(/images/site/headerIntro.png) top center no-repeat;
	width:100%;
	min-height: 100%;
}

#intro .logo {
	margin:30px 0 60px 0;
}

#intro .introText h1 {
	font-size:25px;
	color:#5b1256;
	font-family:'Anivers', Arial, Helvetica, sans-serif;
}

/* #intro .intro {
	padding-left:40px;
} */

#intro .limburg {
	position:relative;
	margin-bottom:50px;
}

#intro .limburg .map {
	padding-left:60px;
}

#intro .limburg .overlay {
	position:absolute;
	top:359px;
}

#intro .limburg .cities {
	clear:both;
}

#intro .limburg .button {
    font-family: 'Anivers Bold';
	font-size:20px;
	color:#ffffff;
	height:40px;
	line-height:40px;
	padding: 0 30px 0 13px;
	cursor:pointer;
	display:inline-block;
	text-decoration:none;
	background-image: url(/images/site/arrowWhiteBig.png);
	background-repeat:no-repeat;
	background-position: right 12px center;
	border:1px solid #fff;
}

#intro .limburg .button-no-arrow {
	background-image:none;
	padding: 0 13px 0 13px;
	cursor:auto;
	width: 238px;
	text-align: center;
}

#intro .limburg .button-small {
	float:left;
}

#intro .limburg .midden {
	margin-left:290px;
	position:absolute;
	width:238px;
}

#intro .limburg .midden .button-small {
	background-color:#8a448e;
}

#intro .limburg .midden .button-small-2 {
	border-left:0;
}

#intro .limburg .midden .button-small:hover {
	background-color:#5b1256;
}

#intro .limburg .midden .button-no-arrow {
	background-color:#5b1256;
	width:237px;
	text-align:center;
	border-bottom:0;
}


#intro .limburg .midden .cities {
	text-align:right;
	color:#701b75;
	margin-top:10px;
}

#intro .limburg .west {
	position:absolute;
	width:315px;
	margin-top:120px;
	margin-left:110px;
}

#intro .limburg .west .button-no-arrow {
	background-color: #005080 !important;
}

#intro .limburg .west .button {
	background-color:#007ac2;
}

#intro .limburg .west .button-small:hover {
	background-color:#005080;
}

#intro .limburg .mobile {
	display:none;
}

#intro .limburg .west .cities {
	color:#007ac2;
	margin-bottom:10px;
}

#intro .limburg .heerlen {
	position:absolute;
	width:240px;
	margin-top:260px;
	margin-left:350px;
}

#intro .limburg .heerlen .button-small {
	background-color:#fc962e;
}

#intro .limburg .heerlen .button-small-2 {
	border-left:0;
}

#intro .limburg .heerlen .button-small:hover {
	background-color:#ed6c05;
}

#intro .limburg .heerlen .button-no-arrow {
	background-color:#ed6c05;
	width:239px;
	text-align:center;
	border-bottom:0;
}

#intro .limburg .heerlen .cities {
	color:#ed6c05;
	margin-top:10px;
	text-align:right;
}

#intro .limburg .heuvelland {
	position:absolute;
	width:237px;
	margin-top:340px;
}

#intro .limburg .heuvelland .button-small {
	background-color:#f52469;
}

#intro .limburg .heuvelland .button-small-2 {
	border-left:0;
}

#intro .limburg .heuvelland .button-small:hover {
	background-color:#c4043f;
}

#intro .limburg .heuvelland .button-no-arrow {
	background-color:#c4043f;
	width:236px;
	text-align:center;
	border-bottom:0;
}

#intro .limburg .heuvelland .cities {
	color:#c4043f;
	margin-top:10px;
}

.footerIntro {
	background: url(/images/site/footerIntro.png) bottom center no-repeat;
	height:160px;
	width:100%;
	margin-top:-101px;
}

@media(max-width:991px){
	#intro .limburg {padding-left:100px; clear:both; }
	#intro .logo {float:left; display:inline; margin-top:10px;}
	#intro .introText {float:left; display:inline; margin-top:40px; padding-left:30px; width:60%;}
}

@media(max-width:740px){
	#intro .introText {width:55%;}
	#intro .limburg {padding-left:60px; }
}

@media(max-width:667px){
	#intro .logo {width:200px;}
	#intro .introText {width:60%; margin-top:10px;}
	#intro .limburg {padding-left:30px; }
}

@media(max-width:615px){
	#intro .intro {padding-left:15px; text-align:center;}
	#intro .logo {float:none; display:inline-block; margin-bottom:20px;}
	#intro .introText {display:none;}
	#intro .limburg {padding-left:15px; margin-bottom:0px;}
	#intro .limburg img {display:none;}
	#intro .limburg .overlay {top:0; position:static;}
	#intro .limburg .heerlen, #intro .limburg .west, #intro .limburg .midden, #intro .limburg .heuvelland {position:static; margin-top:0px; margin-left:0px; margin-bottom:15px; max-width:100%;}
	#intro .limburg .midden .cities, #intro .limburg .heerlen .cities, #intro .limburg .heuvelland .cities, #intro .limburg .midden .cities {text-align:left;}
	.footerIntro {display:none;}
	#intro .limburg .mobile {display:block;}
	#intro .limburg .desktop {display:none;}
	
}

@media(max-width:370px){
	#intro .limburg .button {font-size:16px;}
}

/* Landing Extra (krukje) */

.side-image {
	display: inline-flex;
	text-align: center;
	margin: 2rem 0;
}

@media (min-width: 992px) {
	.side-image {
		display: flex;
		justify-content: center;
		margin-top: 10rem;
		margin-bottom: 0;
	}
}

.steunpunt-link:hover {
	text-decoration: none;
}

.steunpunt-image {
	height: 120px;
	transition: .3s ease;
}

@media (min-width: 992px) {
	.steunpunt-image {
		height: 200px;
		opacity: .3;
	}
}

.steunpunt-image:hover {
	opacity: 1;
}

.steunpunt-text {
	font-size: 21px;
	color: #6D297D;
	text-transform: uppercase;
	margin: 1rem 0;
}