/*
Author: Maxime Tolbecq - Mountain
Author URI: http://www.climbthemountain.be;
Description: Style for Lux
Version: 1.0

-----------------------------

Index
1.0 Global
2.0 Header
3.0 Content
	3.1 Cyberveiligheid
	3.2 Hoe Cyberveilig is uw bedrijf 
	3.3 Vlaamse overheid
	3.4 Vlaio subsidies
	3.5 Bouwt mee
	3.6 Bouwstenen
	3.7 Kost
	3.8 Contact
	3.9 ENG Revisions
4.0 Footer
5.0 Extra pages
	5.1 Page: Bouwstenen
6.0 Responsive

-----------------------------

*/



/* RESET CSS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML DISPLAY ROLE */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 1.0 GLOBAL */



body{
    font-family: 'Raleway', sans-serif;
	-webkit-font-smoothing: antialiased;
	color: #000;
	opacity: 0;
}

div{
	transition: 0.3s;
}

.clearboth{
	clear: both;
}

a, a:active, a:hover, a:visited{
	text-decoration: none;
	color: inherit;
	font-family: inherit;
}

h1{}

h2{}

h3{}

h4{}

h5{}

h6{}

strong{
	font-weight: 700;
}

.strong{
	font-weight: 700;
}

.autowrap{
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.hr{
	display: inline-block;
	border-top: 1px solid #0F5896;
	width: 80%;
	max-width: 300px;
}

.hr20{
	margin-top: 20px;
	margin-bottom: 20px;
}

.hr40{
	margin-top: 40px;
	margin-bottom: 40px;
}

.hr60{
	margin-top: 60px;
	margin-bottom: 60px;
}

.st0, .st4, .st8{
	fill: white;
}

.st1, .st2{
	fill:#CDE0DE;
}

.st5{
	fill:#0F5896;
}

.st6, .st7{
	fill:#619795;
}

svg{
	display: block;
}

.spacer{
	width: 100%;
}

/* button animation */
 
.button{
	display: inline-block;
	width: 300px;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	color: #F7F7F7 !important;
	text-align: center;
	position: relative;
	transition: all .35s;
	background-color: #0F5896;
	margin-bottom: 50px;
}

.button span{
	position: relative;
	z-index: 2;
}

.button:after{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #3B3B3B;
	transition: all .35s;
}

.button:hover{
	color: #fff;
}

.button:hover:after{
	width: 100%;
}


/* 2.0 Header */

.header{
    min-height: 140px;
    width: 100%;
    padding-top: 25px;
    box-sizing: border-box;
	margin-bottom: 25px;
	position: fixed;
	z-index: 99;
	background: white;
	padding-bottom: 25px;
	-webkit-box-shadow: 0px 5px 20px 2px rgba(0,0,0,0.48); 
	box-shadow: 0px 5px 20px 2px rgba(0,0,0,0.48);
	transition: 0.3s;
}

.headerlogo{
    width: auto;
    height: 65px;
	transition: 0.3s;
}

.nav{
	float: right;
	list-style: none;
	font-size: 18px;
	font-weight: 500;
	padding-top: 47px;
	transition: 0.3s;
}

.nav li{
	float: left;
	margin-left: 40px;
	vertical-align: middle;
}

.headerimg{
	position: relative;
	z-index: 1;
	height: 700px;
	width: 100%;
	background-image: url('img/headerimg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.shape-headerimgtop{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	display: block;
}

/* 3.0 Content */

.content{
	text-align: center;
}

/* 3.1 Cyberveiligheid */

.cyberveiligheid {
	position: relative;
	z-index: 3;
	margin-top: -160px;
}

.cyberveiligheid svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 -2rem 0.75rem #0000003d);
	position: relative;
	z-index: 4;
}

.cyberveiligheid-content{
	position: relative;
	z-index: 5;
	margin-top: -270px;
	padding-bottom: 75px;
}

.cyberveiligheid h1{
	font-size: 73px;
	color: #0F5896;
	font-weight: 300;
	margin-bottom: 25px;
}

.cyberveiligheid h2{
	font-size: 46px;
	color: #0F5896;
	font-weight: 400;
}

.cyberveiligheid-content p{
	font-size: 19px;
	font-weight: 400;
	line-height: 37px;
	padding: 0 75px;
	box-sizing: border-box;
}

/* 3.2 Hoe Cyberveilig is uw bedrijf */

.hoecyberveilig svg {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 5;
}

.hcv-bgr{
	background-color: #CDE0DE;
	text-align: center;
	padding: 75px 0;
	margin-top: -5px;
}

.hoecyberveilig h2, .vlaamseoverheid h2, .vlaiosubsidie h2, .bouwtmee h2, .bouwstenen h2, .kost h2, .contact h2{
	font-size: 30px;
	color: #0F5896;
	font-weight: 300;
	line-height: 40px;
}

.hoecyberveilig p, .vlaamseoverheid p, .bouwstenen p, .contact p{
	font-size: 18px;
	font-weight: 400;
	line-height: 35px;
	padding: 0 75px;
	box-sizing: border-box;
}

/* 3.3 Vlaamse overheid */

.vlaamseoverheid{
	text-align: center;
	padding: 75px 0;
}

/* 3.4 Vlaio subsidies */

.vlaiosubsidie{
	text-align: center;
	padding-bottom: 75px;
}

.vlaiosub-item{
	margin-top: 25px;
	float: left;
	width: calc(100% / 3);
	padding: 0 50px;
	box-sizing: border-box;
	border-right: 1px solid #0F5896;
}

.vlaiosub-item:nth-child(3n) {
    border-right: none;
}

.vlaiosub-item img{
	width: 42px;
	height: auto;
	margin-bottom: 25px;
}

.vlaiosub-item p{
	font-size: 16px;
	font-weight: 400;
	line-height: 35px;
}

.vlaiosubsidie svg {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 5;
	display: block;
}

/* 3.5 Bouwt mee */

.bouwtmee{
	width: 100%;
	position: relative;
	z-index: 1;
}

.bouwtmeebgr{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	background-image: url('img/bouwtmeebgr.jpg');
	background-position: center center;
	background-size: cover;
	height: 500px;
}

.shape-bouwtmeebot{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
}

.bouwtmee .content {
	position: relative;
	z-index: 3;
	margin-top: -160px;
}

.bouwtmee .content svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 -2rem 0.75rem #0000003d);
	position: relative;
	z-index: 4;
}

.bouwtmee-content{
	position: relative;
	z-index: 5;
	margin-top: -270px;
	padding-bottom: 75px;
}

.bouwtmee-content p{
	font-size: 19px;
	font-weight: 400;
	line-height: 37px;
	padding: 0 75px;
	box-sizing: border-box;
	margin-bottom: 75px;
}

.bouwtmee-content p:last-child{
	margin-bottom: 0;
}

/* 3.6 Bouwstenen */

.bouwstenen{
	color: white;
}

.bouwstenen svg {
	width: 100%;
	height: auto;
	position: relative;
	/* z-index: 5; */
}

.bouwstenen-bgr{
	background-color: #0F5896;
	text-align: center;
	padding: 75px 0 75px 0;
	margin-top: -5px;
}

.bouwstenen .hr{
	border-color: white;
}

.bouwstenen h2{
	color: white;
}

.bouwstenen ul{
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	padding: 50px 0;
	box-sizing: border-box;
	text-align: left;
	width: 65%;
	margin: 0 auto;
	list-style-type: disc;
}

.bouwstenen ul li{
	padding-left: 10px;
	margin-bottom: 10px;
}

.bouwstenen h3{
	font-weight: 600;
	font-size: 19px;
	line-height: 26px;
}


.bouwstenen-items{
	width: 100%;
}


.bouwstenen-items .content {
	
}

.bouwstenen-list svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 -2rem 0.75rem #0000003d);
}

.bouwstenen-list{
	width: 90%;
	margin: 0 auto;
	margin-top: -210px;
	position: relative;
	z-index: 8;
	padding: 0 25px 25px 25px;
	margin-bottom: 50px;
}

.bs-list-item{
	width: calc(100% / 4);
	margin-top: -300px;
	float: left;
	padding: 0 50px;
	box-sizing: border-box;
	border-right: 1px solid #0F5896;
	text-align: left;
	text-decoration: underline;
	color: rgb(29, 29, 29);
	position: relative;
	z-index: 9;
}

.bs-list-item img{
	height: 42px;
	width: auto;
	margin-bottom: 25px;
}

.bs-list-item:nth-child(5n){
	border-right: none;
}

.h2wrap{
	vertical-align: bottom;
	height: 70px;
	position: relative;
}

.bs-list-item h2{
	position: absolute;
    bottom: 0;
	font-size: 17px !important;
	color: #0F5896 !important;
	font-weight: 600 !important;
	margin-bottom: 25px;
	line-height: 22px;
}

.bs-list-item ul{
	line-height: 22px;
	font-size: 14px;
	padding-top: 35px;
}

.bs-list-item ul li{
	margin-bottom: 23px;
}

.anchorlink span{
	cursor: pointer;
}

/* 3.7 Kost */

.shape-kostbot{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
}

.kostbgr{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	background-image: url('img/kostbgr.jpg');
	background-position: center center;
	background-size: cover;
	height: 600px;
}

.kost-content{
	position: relative;
	z-index: 5;
	padding-bottom: 75px;
}

.kost-content p{
	font-size: 19px;
	font-weight: 400;
	line-height: 37px;
	padding: 0 75px;
	box-sizing: border-box;
	margin-bottom: 75px;
}

.kost-content ul{
	font-size: 19px;
	font-weight: 400;
	line-height: 37px;
	padding: 0 75px;
	box-sizing: border-box;
	margin-bottom: 75px;
}

.kost-content ul li{
	margin-bottom: 25px;
}

.kost-content p:last-child{
	margin-bottom: 0;
}

.kmobetaalt{
	width: 50%;
}

.kostbot{
	width: 100%;
	height: auto;
}

.kostbot svg{
	width: 100%;
	height: auto;

}

.kmobetaalt{
	width: 80%;
	max-width: 800px;
	margin: 0 auto;
	color: white;
	margin-top: -180px;
	position: relative;
	z-index: 6;
}

.kmobetaalt svg{
	width: 100%;
	height: auto;
}

.kmobetaaltcontent{
	background-color: #619795;
	margin-top: -2px;
	padding: 25px;
	box-sizing: border-box;
	text-align: center;
	line-height: 37px;
}

.kmobetaaltcontent h3{
	font-size: 19px;
	font-weight: 400;
}


/* 3.8 Contact */

.contactwrap{
	background-color: #CDE0DE;
	padding-bottom: 50px;
}

.contact{
	margin-top: 50px;
	text-align: center;
}

.handsomeNiels{
	width: 220px;
	height: auto;
}

.contact ul{
	padding: 25px 0;
	line-height: 35px;
}

.contact a{
	color: #0F5896;
}

.footerbanner{
	max-width: 80%;
	height: auto;
	width: 850px;
	margin-bottom: 25px;
}

.disclaimer{
	font-size: 11px;
}

/* 3.9 ENG Revisions */

.listintro{
	font-size: 19px;
    font-weight: 400;
	color: #0F5896;
	width: 100%;
	text-align: center;
	display: block;
	margin-bottom: 20px;
}

.prioritylist{
	font-size: 19px;
    font-weight: 400;
    line-height: 37px;
    padding: 0 75px;
    box-sizing: border-box;
    margin-bottom: 75px;
	list-style-type: disc;
	text-align: left;
	padding: 50px;
	margin-top: 25px;
	-webkit-box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.05); 
	box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.05);
}

.contact-en{
	margin-top: 0px!important;
	padding-top: 50px;
}

.langselect{
	background-color: #f1f1f1;
	padding: 10px;
	word-spacing: 6px;
}

.langselect-mobile{
	background-color: none!important;
}

.navlink{
	line-height: 39px;
}

.nav{
	padding-top: 36px;
}

.cyberveiligheid-content a{
	text-decoration: underline;
}

.aboutnviso p{
	padding-bottom: 25px;
}

.wwd{
	color: #0F5896;
	display: block;
	margin-bottom: 15px;
	font-size: 20px;
}

.approachblock{
	padding: 25px !important;
	-webkit-box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.05); 
	box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.05);
}

.approachtitle{
	display: inline-block;
	border: solid 1px #0F5896;
	padding: 5px 15px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	margin-bottom: 25px;
	margin-right: 25px;
}

.sepfull{
	width: 100%;
	display: block;
	margin-top: 75px;
	margin-bottom: 75px;
	height: 5px;
	border-top: 1px solid rgb(240, 240, 240);
}

.langlanding{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75%;
	padding: 0px !important;
	-webkit-box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.05); 
	box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.05);
	margin: 0 auto;
	text-align: right;
	height: 500px;
}

.landinglogo{
    width: auto;
    height: 65px;
	margin-bottom: 75px;
}

.langselectbutton{
	display: block;
	margin-right: 55px;
}

.langselecttitle{
	color: #0F5896;
	font-size: 25px;
	padding-bottom: 20px;
	display: inline-block;
}

.landingleft{
	width: 50%;
	background-image: url('img/headerimg.jpg');
	background-size: cover;
	height: 100%;
	background-repeat: no-repeat;
	float: left;
}

.landingright{
	float: right;
	padding: 25px;
	box-sizing: border-box;
}

.langsep{
	width: 50%;
	display: inline-block;
	margin-top: 50px;
	margin-bottom: 35px;
	height: 5px;
	border-top: 1px solid rgb(240, 240, 240);
	margin-right: 55px;
}


/* 5.0 Extra pages*/
	
/* 5.1 Page: Bouwstenen */

.bspage-header{
	padding-top: 130px	;
}

.bspage-bgr h2{
	font-size: 30px;
	color: white;
	font-weight: 300;
}

.bspage-bgr{
	background-color: #0F5896;
	text-align: center;
	padding: 75px 0 200px 0;
	margin-top: -5px;
	color: white;
}

.bspage-bgr .hr{
	border-top: 1px solid white;
}

.bspage-bgr p{
	font-size: 18px;
	font-weight: 400;
	line-height: 35px;
	padding: 0 75px;
	box-sizing: border-box;
	margin-bottom: 75px;
}

.categorylist{
	margin-top: 50px;
	margin-bottom: 65px;
}

.categorylist a{
	display: block;
	width: calc((100% - 80px) / 4);
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	background-color: white;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	height: 145px;
	-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.24); 
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.24);
}

.categorylist img{
	margin-top: 13px;
	height: 42px;
	width: auto;
	margin-bottom: 13px;
}

.categorylist a:first-child img{
	margin-top: 0;
}

.categorylist-en a:first-child img{
	margin-top: 13px!important;
}

.categorylist h1{
	font-size: 17px;
	color: #0F5896;
	font-weight: 600;
	margin-bottom: 25px;
	line-height: 22px;
}

.alternativelist{
	margin-top: 50px;
	margin-bottom: 65px;
}

.alternativelist div{
	display: block;
	width: calc((100% - 80px) / 2);
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 50px;
	background-color: #091f2d;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	height: 330px;
	-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.24); 
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.24);
	color: white;
}

.alternativelist img{
	margin-top: 13px;
	height: 60px;
	width: auto;
	margin-bottom: 13px;
}

.alternativelist h1{
	font-size: 17px;
	color: #2072c4;
	font-weight: 600;
	margin-bottom: 25px;
	line-height: 22px;
}

.bspage-header svg {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 4;
}

.bspage-content{
	text-align: center;
	padding-top: 50px;
}

.bspage-content h1{
	font-size: 30px;
	color: #0F5896;
	font-weight: 300;
}

.bspage-itemlist{
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 50px;
}

.bspage-item{
	width: calc((100% - 60px) / 2);
	margin-left: 15px;
	margin-right: 15px;
	background-color: #CDE0DE;
	margin-bottom: 30px;
	padding: 25px;
	box-sizing: border-box;
	text-align: left;
}

.bspage-item h2{
	font-size: 25px;
	color: #0F5896;
	font-weight: 300;
	margin-bottom: 19px;
	line-height: 30px;
}

.bspage-item span{
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 14px;
	display: block;
	line-height: 26px;
	}

.bspage-item p{
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	box-sizing: border-box;
}

.scrolltop{
	display: block;
	text-align: right;
}

.scrolltop img{
	width: 43px;
	height: auto;
}

/* 6.0 Responsive */


.togglenav{
    display: none;
	float: right;
	font-size: 18px;
	font-weight: 500;
	padding-top: 40px;
	transition: 0.3s;
}

.togglenav img{
	width: 25px;
	height: auto;
}
.respnav{
    display: none;
    text-align: center;
    padding-bottom: 17 px;
	margin-top: 50px;
}

.respnav li{
    border-bottom: 1px solid #e8e8e8;
    padding: 17px 0 17px 0;
}

.respnav li:last-child{
    border-bottom: none!important;
}

@media screen and (max-width: 1155px) {
	.bs-list-item{
		margin-top: -200px;
	}
	.bs-list-item h2{
		font-size: 14px !important;
	}
	
}

@media screen and (max-width: 1115px) {
	.categorylist a{
		width: calc((100% - 40px) / 2);
		margin-bottom: 20px;
	}
	.categorylist{
		overflow: auto;
	}
	.bspage-bgr{
		padding-bottom: 15px;
	}
}


@media screen and (max-width: 1170px) {
	.togglenav{
		display: inline-block;
	}
	.nav{
		display: none;
	}
	.cyberveiligheid-content, .bouwtmee-content, .kost-content{
		padding-top: 55px;
	}

	.cyberveiligheid h1{
		font-size: 55px;
	}

	.cyberveiligheid h2{
		font-size: 27px;
	}
	.bs-list-item {
		width: calc(100% / 2);
		padding: 0 50px;
		margin-bottom: 25px;
	}
	.bs-list-item h2{
		font-size: 21px;
	}
	.bouwstenen-list{
		padding-top: 140px;
	}
	.bs-list-item:nth-child(odd){
		border-right: none;
	}

	.bs-list-item:nth-child(4n){
		margin-top: 0;
	}
	.bs-list-item:nth-child(5n){
		margin-top: 0;
	}
	.kmobetaalt{
		margin-top: -100px;
	}
	.landingleft{
		display: none;
	}
	.landinglogo{
		width: 70%;
		height: auto;
	}
	.langselectbutton{
		margin-right: 10px;
	}
}

@media screen and (max-width: 880px) {
	.headerimg{
		height: 550px;
	}
	.cyberveiligheid-content{
		padding-top: 100px;
	}
	.vlaiosub-item{
		width: 100%;
		border-right: none;
		margin-bottom: 25px;
	}
	.bouwtmeebgr{
		height: 250px;
	}
	#bouwstenen svg{
		display: none;
	}
	.bouwtmee-content, .bouwtmee .content{
		margin-top: 0;
	}

}

@media screen and (max-width: 780px) {
	.autowrap{
		max-width: 80%;
	}
	.bouwstenen-list svg{
		display: none;
	}
	.bs-list-item {
		width: 100%;
		padding: 0 50px;
		margin-bottom: 25px;
		border-right: none;
		margin-top: 0;
	}
	.bs-list-item:nth-child(2n){
		margin-top: 0;
	}
	.bouwstenen-items .content {
		/* margin-top: -76px; */
	}
	.bouwstenen-list{
		padding-top: 50px;
		margin-top: 0;
	}
	.cyberveiligheid-content{
		padding-top: 200px;
	}
	.headerimg{
		height: 400px;
	}

	.cyberveiligheid svg{
		display: none;
	}

	.cyberveiligheid-content, .cyberveiligheid{
		margin-top: 0;
		padding-top: 0;
	}

	.cyberveiligheid-content{
		padding-top: 25px;
	}

	.bspage-bgr p, .bouwtmee-content p, .cyberveiligheid-content p, .hoecyberveilig p, .vlaamseoverheid p, .bouwstenen p, .contact p{
		padding: 0;;
	}

	.kost-content ul{
		padding: 0;
	}

	@media screen and (max-width: 620px) {
		.shape-headerimgtop{
			display: none;
		}
		.cyberveiligheid h1 {
			font-size: 35px;
		}
		.cyberveiligheid h2 {
			font-size: 16px;
		}
		.hr60{
			margin-top: 35px;
			margin-bottom: 35px;
		}

		.bouwstenen-items, .bouwstenen-items .content{
			margin-top: 0;
		}
		.bouwstenen-items .content svg{
			display: none;
		}
		.bouwstenen-bgr {
			padding-bottom: 75px;
		}
		.bouwstenen-list{
			padding-top: 50px;
			margin-top: 0;
		}
		.bs-list-item, .kost-content p{
			padding: 0;
		}
		.categorylist a, .alternativelist div{
			width: 100%;
			margin: 0 0 20px 0;
			padding: 10px;
			height: auto;
		}

		.alternativelist div{
			padding: 40px;
			box-sizing: border-box;
		}
		.bspage-item{
			width: 100%;
			margin: 0 0 25px 0;
		}
		.bspage-itemlist{
			margin-bottom: 0;
		}
		.scrolltop{
			margin-bottom: 35px;
		}
		.bspage-content h1{
			font-size: 25px;
			font-weight: 500;
		}
		
	}
}