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

/*#menu {
	height:				35px;
	/*background:			#095AA6;*/
	/*position:			absolute;
	top:				16px;
	left:				360px;	
	text-align:			left;*/
/*	float: right;
	/*width:				568px;*/
/*}


#menu a:link, #menu a:visited, #menu h2 {
	color:					#fff;
	text-decoration:		none;
	display:				block;
	background:			#095AA6;
	/*height:35px;
	line-height:35px;*/
/*	padding:				7px 12px 8px 12px;
	border-right:			1px solid #fff;
}


#menu a:hover, #menu a:active, #menu a#here {
	background:				#000;
}

/*#menu ul a {
text-decoration:none;
text-align:left;
}*/
/*
#menu ul a, #menu ul a:visited { 	
	white-space:			nowrap;
}

#menu ul a:hover, #menu ul a:active, #menu a#here, 
#menu ul ul a:hover, #menu ul ul a:active, #menu ul ul a#here, 
#menu ul ul ul a:hover, #menu ul ul ul a:active, #menu ul ul ul a#here { 
/*color:#e31818;*/ 
/*}

#menu ul ul a {
	font-weight:			normal;
	background:				#095AA6;
	text-decoration:		none;
	text-align:				left;
	width:					180px;
	border-bottom:			1px solid #fff;
	white-space:			normal;
}

#menu ul {
list-style:none;
margin:0;
padding:0;
float:left;
}

#menu li {
position:relative;
background-image:none;
padding-bottom:0px;
padding-left:0px;
}

#menu ul ul{
background-color:#fff;
position:absolute;
z-index:500;
top:auto;
left:0px;
display:none;
text-align:left;
}

#menu ul ul ul{
top:0px;
left:100%;
padding:0px;
}*/

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
/*background:#000 url(../images/expand.gif) no-repeat -999px -9999px;*/
}

/*div#menu li:hover{
cursor:pointer;
z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

*/




#menu2 {
	display:				inline;
	float:					right;
}

#menu2 a:link, #menu2 a:visited {
	color:					#fff;
	text-decoration:		none;
	padding:				3px 12px 3px 12px;
	border-left:			1px solid #fff;
}

#menu2 a:hover, #menu2 a:active, #menu2 a#here {
	background:				#000;
}

#menu2 ul {
list-style:none;
margin:0;
padding:0;
float:left;
}

#menu2 li {
position:relative;
background-image:none;
padding-bottom:0px;
padding-left:0px;
}





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

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


.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: #095AA6;
	border: none;
	width: 39px;
	height: 37px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;  
	cursor: pointer;
	outline: none;
	margin-top: 1em;
}

.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active {
	background:#000;
}
.dl-menuwrapper ul {
	background: rgba(9,90,166,.9); margin-left: 0;
}

.dl-menuwrapper button:after {
	content: '';
	position: absolute;
	width: 68%;
	height: 3px;
	background: #fff;
	top: 8px;
	left: 16%;
	box-shadow: 
		0 8px 0 #fff, 
		0 16px 0 #fff;
}
.dl-menuwrapper button:hover:after,
.dl-menuwrapper button.dl-active:after {
	background: #fff;
	box-shadow: 
		0 8px 0 #fff, 
		0 16px 0 #fff;
}

.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: .5em 20px;
	/*line-height: 20px;*/
	color: #fff;
	outline: none;
	text-decoration:none;
}

.no-touch .dl-menuwrapper li a:hover { background: rgba(0,0,0,.4); }
.dl-menuwrapper li.dl-back > a { padding-left: 30px; background: rgba(0,0,0,0.1); }

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 20%;
	/*line-height: 1em;*/
	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(0,0,0,1); }

/* 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: ''; }

/* desktop navigatie */
#hoofdnav { display: none; }

@media screen and (min-width : 56em)  {	
	/*nav {	display: inline-block; vertical-align: bottom; padding: 1.5em 0 1.1em 40px;  float: right; }*/
	
	#dl-menu, #bg_mobielmenu { display: none; }
	#hoofdnav { display: inline-block; position: relative;	padding-left:360px; padding-right: 120px; 	 }

	#hoofdnav ul {  display: inline-block; list-style:none; margin: 0 20px 0 0; padding: 0; clear: both; background: #095AA6;  }
	#hoofdnav ul li { float: left; position: relative; padding-left: 0; margin-left: 0; transition: all .5s ease 0s;   }
	#hoofdnav ul li a { display: inline-block; padding: .25em .5em; color:#fff; text-decoration:none; transition: all .5s ease 0s; position: relative;  }
		#hoofdnav a.has-submenu:after {	padding-left: .25em; content : '\f107'; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: .8em; 	}
		#hoofdnav ul ul a.has-submenu:after { padding-left: .5em; content : '\f105'; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: .8em; }
		/*#hoofdnav ul li a:hover, #hoofdnav ul li.current a { color:#fff; }*/
	
	#hoofdnav ul ul { display: none; position: absolute; left: 0; z-index: 10; margin: 0; text-align: left;  }
	/*#hoofdnav ul ul#kn5, #hoofdnav ul ul#kn6, #hoofdnav ul ul#kn7, #hoofdnav ul ul#kn8, #hoofdnav ul ul#kn9 { right: 0; left: auto; }*/
	#hoofdnav ul ul li { padding: 0; width: 100%; min-width: 250px; line-height: 1;    }

	#hoofdnav ul ul li a { display: inline-block; width: 100%; padding: .75em .5em;  }
	#hoofdnav ul li:hover { background: rgba(0,0,0,.4);  }
	#hoofdnav ul li.current { background: #000;   }
	#hoofdnav ul li:hover > ul { display: block; background: #095AA6;  }
	/*#hoofdnav ul li:hover > ul a { padding: .25em .5em; color:#ac2c4a; }*/
	#hoofdnav ul ul li:hover { background: rgba(0,0,0,.4); /*background: rgba(0,0,0,.4);*/ }
	#hoofdnav ul ul li.current {background: rgba(255,255,255,.2); background: #000;  }
	/*#hoofdnav ul ul li:last-child.current { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;  }*/

	
	#hoofdnav ul ul ul { display: none; position: absolute; top: 0; left: 100%; z-index: 10; border-left: 3px solid #fff; }
	#hoofdnav ul ul li:hover ul { display: block; }
}