@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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; }


/* CLEARFIX HACK : http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .clearfix:after { 
    content: " "; /* 1 */
    display: table; /* 2 */
	line-height:0;
}
.clearfix:after { clear: both; }

/*********************** start sitegebonden css ***********************/

/*
    font-family: 'Muli', sans-serif;
    font-family: 'Oswald', sans-serif;
*/

* {	box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ margin: 0; padding: 0; }

html {	/*basis voor baseline grid*/ font-size: 100%; line-height: 1; }
body { font-family: 'Muli', sans-serif; font-size: 1em; line-height: 1.6; }

h1 { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 2.25em; color: rgb(85,110,144); margin-top: 2em; }
h2 { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 1.62em; color: rgb(85,110,144); margin-bottom: 1em; }
h3 { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 1.25em; margin-top: 1em; }

footer h1, footer h2, footer h3 { color: rgb(198,80,39); }

img { max-width: 100%; height: auto; }
	/*Styling floated images via CKEditor*/
	img[style*="left"]  { padding-right: 1em; }
	img[style*="right"] { padding-left: 1em; }

p { padding: .5rem 0; }

a:link, a:active, a:visited { color: rgb(198,80,39); }
a:hover { color: rgb(86,111,144); }
a[href^=tel] {	text-decoration: none; }

a.button { background: rgb(198,80,39); color:#fff; line-height: 2.8; padding: .5em 1em; margin: 0 .2em 0 0; text-decoration: none; white-space:nowrap; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,.6); transition: all .1s ease 0s; }
a.button:hover { background: rgba(198,80,39,.7); box-shadow: 2px 2px 5px rgba(0,0,0,.8); }

a.anchor {
    display: block;
    position: relative;
    top: -40px;
    visibility: hidden;
}

.small { font-size: .8em; }
.nobreak { white-space: nowrap; } 

/* opsommingen */
ul { margin: 0 auto; padding: .75em 30px;  }
ul li { margin-left: 2em; padding-left: .5em;  }
ul.opmaak { list-style: none; width: 100%; margin: .5em 0; padding: .75em 0; font-size: 1em; }
ul.opmaak li { position: relative; padding: 0em .75em; margin-left: 0; margin-bottom: .5em; background: rgba(255,255,255,.1); border-left: 2px solid rgba(161,144,96,1); }
ul.opmaak li a { text-decoration: none; }


/*.flex-grid { display: flex; flex-direction: column; justify-content: space-between; flex-wrap: nowrap; align-items: stretch; }
	.col { /*flex: 1;*/ /*padding-top: 1em; padding-bottom: 1em; position: relative; }
	/*.col > *:not(img):not(strong):not(span):not(.button_groen)  { padding: 1rem 2rem; }*/
/*	.col > p, .col > ul, .col > ol { padding: 1rem 0; width: 90%; }
	.col > h1, .col > h2, .col > h3, .col > h4 { margin-right: 1rem; }
	footer .flex-grid div { text-align: center;  }
	footer .col > p, .col > ul, .col > ol { padding: 1rem 0; width: 100%; }
	
	.cols-one > .col { max-width: 1220px; margin: 0 auto; }

	
	
/*	@media screen and (min-width: 48.25em) {
		.flex-grid { flex-direction: row;  }
		
		.cols-two .col { flex-basis: 50%; }
		.cols-three .col { flex-basis: 33.3333%; }
		
		.cols-two-25 > div:nth-child(1) { flex-basis: 24%; }
		.cols-two-25 > div:nth-child(2) { flex-basis: 74%; }
		
		.cols-two-33 > div:nth-child(1) { flex-basis: 33%; }
		.cols-two-33 > div:nth-child(2) { flex-basis: 67%; }
		
		.cols-two-66 > div:nth-child(1) { flex-basis: 67%; }
		.cols-two-66 > div:nth-child(2) { flex-basis: 33%; }
	
		.cols-two-75 > div:nth-child(1) { flex-basis: 74%; }
		.cols-two-75 > div:nth-child(2) { flex-basis: 24%; }

		footer .flex-grid { flex-direction: column;  }
	
	}
	@media screen and (min-width: 64.25em) {
		footer .flex-grid { flex-direction: row;  }
		footer .cols-three .col { flex-basis: 33.3333%; }
		footer .flex-grid div { text-align: left; }
	}
*/


header { text-align: left; padding: 1em 2em; position: fixed; top: 0; width: 100%; z-index: 999; height: 120px;}
	.navbar-fixed-top {  transition:background-color 200ms linear;   }
	.navbar-fixed-top.scrolled {
	  background-color: rgba(255,255,255,.9) !important;
	  transition: background-color 200ms linear;
	}


/*header { padding: 4em 4em 0 4em; position: relative; display: flex; align-items: stretch; align-items: flex-start;  }*/
#logo { max-width: 250px; height: auto; display: none; }


.sitecontainer {  }
.section { position: relative; width: 100%; /*display: flex; min-height: 400px;*/  }
article {  }
	.homepage { display: flex; flex-wrap:wrap; align-items: center; width: 100%; padding-top: 6em; }
	.homepage h1 { font-size: 1.62em;  }
	.homepage .flex-grid { display: flex; flex-wrap:wrap; width: 100%; }
	.homepage .flex-grid > div { width: 100%; min-height: 350px; }
	.homepage #col1 { background: rgb(198,80,39) url(../img/bg_homepage_col1.png) center right no-repeat; /*background-size:contain;*/ background-size: cover; color: #fff; padding: 2em;  }
	.homepage #col2 { background: rgb(244,245,245); color:#333; padding: 2em;  }
	.homepage #col3 {  padding: 2em; }
	.homepage #col4 { min-height: 10px;  }
	#arrow-down { display: none; }

@media screen and (max-width: 47.99em) {
	.homepage #col1 { background: rgb(198,80,39) url(../img/bg_homepage_col1.png) center right no-repeat; background-size:contain; color: #fff; padding: 2em;  }
	.homepage .flex-grid > div { width: 100%; min-height: 450px; }
}



#arrow-to-top { display: none; position: fixed; bottom: 1em; right: 1em; z-index: 99999; background:rgb(215,132,103); text-decoration: none; color:#fff; font-size: 1em; text-align:center; width: 40px; height: 40px; line-height: 36px; border: 2px solid #fff; border-radius: 50%;   }
#arrow-to-top:hover { background: rgb(255,255,255); }
#arrow-to-top .fa { padding: 0; padding-top: .25em; margin: 0; color:#fff; font-size: 1.2em; }
#arrow-to-top:hover .fa { color:rgb(197,80,38); }


.flex-grid { display: flex; flex-direction: row; flex-wrap:wrap; width: 100%;  }
.flex-grid.midden { margin: 8em 0; }
	.flex-grid.midden > div { padding: 2em; width: 100%; }
	.flex-grid.midden > #col1 { background: rgb(244,245,245); color:#333; }
	.flex-grid.midden > #col2 { background: rgb(86,111,144); color: #fff; }
	.flex-grid.midden > #col3 { background: rgb(86,111,144); color: #fff; min-height: 400px;  }
	.flex-grid.midden > #col2 a:link, .flex-grid.midden > #col2 a:active, .flex-grid.midden > #col2 a:visited { color: rgb(237,202,190); }
		.flex-grid.midden > #col2 a:hover { color: rgb(255,255,255); }
	.flex-grid.midden > #col3 a:link, .flex-grid.midden > #col3 a:active, .flex-grid.midden > #col3 a:visited { color: rgb(237,202,190); }
		.flex-grid.midden > #col3 a:hover { color: rgb(255,255,255); }


.flex-grid.rechts { margin: 8em 0; }
	.flex-grid.rechts > div { padding: 2em; width: 100%; }
	.flex-grid.rechts > #col1 { background: rgb(244,245,245); color:#333; order: 3; min-height: 400px;  }
	.flex-grid.rechts > #col2 { background: rgb(244,245,245); color:#333; order: 1;  }
	.flex-grid.rechts > #col3 { background: rgb(0,76,116); color:#fff; order: 2; }
	.flex-grid.rechts > #col2 a:link, .flex-grid.rechts > #col2 a:active, .flex-grid.rechts > #col2 a:visited { color: rgb(237,202,190); }
		.flex-grid.midden > #col2 a:hover { color: rgb(255,255,255); }
	.flex-grid.rechts > #col3 a:link, .flex-grid.rechts > #col3 a:active, .flex-grid.rechts > #col3 a:visited { color: rgb(237,202,190); }
		.flex-grid.rechts > #col3 a:hover { color: rgb(255,255,255); }


.flex-grid.voettekst { margin: 8em 0 0; }
	.flex-grid.voettekst > div { padding: 2em; width: 100%; }
	.flex-grid.voettekst > #col1 { background: rgb(244,245,245); color:#333;  }
	.flex-grid.voettekst > #col2 { background: rgb(197,80,38); color:#fff; }
	.flex-grid.voettekst > #col2 h2 { color:#fff; }

.flex-grid.contactform { display: flex; width: 100%; }
	.flex-grid.contactform > div {  }
	.flex-grid.contactform > #col1 { width: 100%; }
	.flex-grid.contactform > #col2 { width: 100%; }

/*@media screen and (min-width: 47.99em) {
	.homepage { padding-top: 0; }
	.homepage .flex-grid > div { width: 50%; min-height: 470px;   }
	.homepage #col1 { background-size:cover;  }
	.homepage #col4 { background: rgb(0,76,116); color: #fff; padding: 2em; }
	
	.flex-grid.contactform > #col1 { width: 33.3333%; padding-right: 2em;  }
	.flex-grid.contactform > #col2 { width: 66.6666%; }
*/
@media screen and (min-width: 64em) {
	.flex-grid.voettekst > #col1 { width: 25%; }
	.flex-grid.voettekst > #col2 { width: 75%; }

}
/*@media screen and (min-width: 75em) {*/
@media screen and (min-width: 47.99em) {
	.homepage { height: 100vh; }
	.homepage .flex-grid > div { width: 33.333%; min-height: 350px; }
	.homepage #col1, .homepage #col3 { width: 25%; }
	.homepage #col2 { width: 50%; }
	
	.homepage #col4 { display: none; } 
	h1 { margin-top: 2em; }
	#arrow-down { display: block; position: absolute; top: 90vh; left: 0; right: 0; text-align: center; font-size: 5em; /*opacity: 0; animation: fade 15s linear; */ }
	
	@keyframes fade {
  		0%,100% { opacity: 0 }
  		50% { opacity: 1 }
	}



	.flex-grid.midden > #col1 { width: 25%; text-align: right;  }
	.flex-grid.midden > #col2 { width: 50%; }
	.flex-grid.midden > #col3 { width: 25%; }

	.flex-grid.rechts > #col1 { width: 25%; order: 1; height: auto; }
	.flex-grid.rechts > #col2 { width: 25%; text-align: right; order: 2;  }
	.flex-grid.rechts > #col3 { width: 50%; order: 3; }

}
@media screen and (min-width: 100em) {
	.homepage { height: 100vh; }
	.homepage .flex-grid > div { width: 25%; min-height: 450px; }
	/*.homepage #col1, .homepage #col3 { width: 25%; }
	.homepage #col2 { width: 25%; }*/
	
	.homepage #col4 { display: block; display: none; } 
}

.googlemap p { padding: 0; }
.googlemap img { width: 100%; max-width:none; }
.googlemap iframe { width: 100%; height: 400px; }

p.hidden, p:empty { display: none; }


/* contactform */
form { text-align: left; margin: 0; max-width: 100%; }
label {	display: block; width: 100%; margin: .25em 0 0 0; font-size: 1em; color: #fff; }
input, textarea { display: inline-block; width: 100%; border: 1px solid rgba(255,255,255, .5); padding: .5em; margin: 0 0 .5em 0; font-family: 'raleway', sans-serif; color: #515151; font-size: 1em;	 }
textarea { height: 7.5em;  }
.btn {	width: auto; background: rgb(215,132,103); color:#fff; display: inline; padding: .5em 1em; border-radius: 10px; }
.btn:hover { text-decoration: none; background:#fff; color: rgb(215,132,103); }
.special { display: none; width: 5%; }

.success_msg { margin-top: 1.5em; padding: .5em 1em; background: rgb(215,132,103); color: #fff; max-width: 100%;  }
.error_msg { margin-top: 1.5em; padding: .5em 1em; background: rgb(146,58,29); color: #fff; border: 2px solid #fff; }
.error { border: 2px solid rgb(115,47,23);	}


/*footer*/
#footer { position: relative; }
#arrow-to-top { display: none; position: fixed; bottom: 1em; right: 1em; z-index: 99999; background:rgb(215,132,103); text-decoration: none; color:#fff; font-size: 1em; text-align:center; width: 40px; height: 40px; line-height: 36px; border: 2px solid #fff; border-radius: 50%;   }
#arrow-to-top:hover { background: rgb(255,255,255); }
#arrow-to-top .fa { padding: 0; padding-top: .25em; margin: 0; color:#fff; font-size: 1.2em; }
#arrow-to-top:hover .fa { color:rgb(197,80,38); }
footer .small { float: right; padding-right: 3em; }
footer .small a { color: #fff; }


/**************** mobiele navigatie : dl-menu *****************/

.dl-menuwrapper {
	width: 100%;
	max-width: 280px;
	/*float: left;*/
	/*position: relative;
	left: .5em;*/
	position: absolute;
	right: 1em; top: 1em;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	z-index: 1500;
	text-align: right;
}

/*only firefox*/
/*@-moz-document url-prefix() {
	.dl-menuwrapper{ top: 5.8em; }
}*/

.dl-menuwrapper ul li { 	padding-left: 0; margin-left: 0; text-align: left;  }
	.dl-menuwrapper ul li:before { display: none; content: ''; padding-right: 0; }

/*.dl-menuwrapper:first-child { margin-right: 100px; }*/

.dl-menuwrapper button {
	/*background:rgb(255,255,255);*/
	background: none;
	border: 1px solid #fff;
	width: 39px;
	height: 36px;
	width: 50px; height: 50px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;  
	cursor: pointer;
	outline: none;
	/*border-radius: 50px;*/
	/*border: 1px solid rgb(247,145,31);*/
	margin-bottom: 1em;
	/*margin-top: 2em;*/
}

.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active {
	background: rgb(198,80,39);
}
.dl-menuwrapper ul {
	background: rgba(198,80,39,.9); margin: 0;
}

.dl-menuwrapper button:after {
	content: '';
	position: absolute;
	width: 68%;
	height: 4px;
	background: rgb(198,80,39);
	top: 14px;
	left: 16%;
	box-shadow: 
		0 8px 0 rgb(198,80,39), 
		0 16px 0 rgb(198,80,39);
}
.dl-menuwrapper button:hover:after,
.dl-menuwrapper button.dl-active:after {
	background: rgb(255,255,255);
	box-shadow: 
		0 8px 0 rgb(255,255,255), 
		0 16px 0 rgb(255,255,255);
}

.dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.dl-menuwrapper li { position: relative; background: none; }
.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 10px 20px;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
	outline: none;
	text-decoration:none;
	border-bottom: 1px solid #fff;
}
	
.no-touch .dl-menuwrapper li a:hover { background: rgba(0,0,0,.2); }
.dl-menuwrapper li.dl-back > a { padding-left: 30px; background: rgba(0,0,0,0.1); }
.dl-menuwrapper li.dl-back > a:hover { background-image: none; }

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 41px;
	font-family: 'FontAwesome';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\f105";
	color: rgba(255,255,255,.5);
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: rgba(255,255,255,.5);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); }
.dl-menuwrapper .dl-menu { margin: 5px 0 0 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; -webkit-transform: translateY(10px);
	transform: translateY(10px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; }
.dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); transform: translateY(0px); }
.dl-menuwrapper li.current { background: rgba(255,255,255,.4);  }

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu { display: none; }

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {	position: absolute; width: 100%; top: 50px; left: 0; margin: 0; }

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-2 { -webkit-animation: MenuAnimOut2 0.3s ease-in-out; animation: MenuAnimOut2 0.3s ease-in-out; }


@-webkit-keyframes MenuAnimOut2 {
	0% { }
	100% { -webkit-transform: translateX(-100%); opacity: 0; }
}

@keyframes MenuAnimOut2 {
	0% { }
	100% { 	-webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; }
}

.dl-menu.dl-animate-in-2 { -webkit-animation: MenuAnimIn2 0.3s ease-in-out; animation: MenuAnimIn2 0.3s ease-in-out; }

@-webkit-keyframes MenuAnimIn2 {
	0% { -webkit-transform: translateX(-100%); opacity: 0; 	}
	100% { -webkit-transform: translateX(0px); opacity: 1; 	}
}

@keyframes MenuAnimIn2 {
	0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; 	}
	100% { 	-webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; 	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 { -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; animation: SubMenuAnimIn2 0.3s ease-in-out; }

@-webkit-keyframes SubMenuAnimIn2 {
	0% { -webkit-transform: translateX(100%); opacity: 0; 	}
	100% { -webkit-transform: translateX(0px); opacity: 1; 	}
}

@keyframes SubMenuAnimIn2 {
	0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; 	}
	100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; 	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 { -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; animation: SubMenuAnimOut2 0.3s ease-in-out; }

@-webkit-keyframes SubMenuAnimOut2 {
	0% { -webkit-transform: translateX(0%); opacity: 1; 	}
	100% { -webkit-transform: translateX(100%); opacity: 0; }
}

@keyframes SubMenuAnimOut2 {
	0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; 	}
	100% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; 	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; transform: none; }
.no-js .dl-menuwrapper li .dl-submenu { display: block; }
.no-js .dl-menuwrapper li.dl-back { display: none; }
.no-js .dl-menuwrapper li > a:not(:only-child) { background: rgba(0,0,0,0.1); }
.no-js .dl-menuwrapper li > a:not(:only-child):after { content: ''; }