/* CSS Document */

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

.dl-menuwrapper {
	width: 100%;
	max-width: 280px;
	/*position: relative;*/
	position: absolute;
	right: 1em; top: 120px;
	-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 button {
	background: #7e4e58;
	border: none;
	width: 39px;
	height: 37px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;  
	cursor: pointer;
	outline: none;
	border: 1px solid #fff;
	border-radius: 5px;
	/*margin-bottom: .35em;*/
}

.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active {
	background: #1eb5c0;
}
.dl-menuwrapper ul {
	background: #7e4e58;
}

.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: 15px 20px;
	font-size: 15px;
	line-height: 20px;
	color: #fff;
	outline: none;
	text-decoration:none;
}

	/*.dl-menuwrapper li a#button1 { background:#d6bb9c; }
	
	.dl-menuwrapper li a#button2,
	.dl-menuwrapper li a#button3,
	.dl-menuwrapper li a#button4,
	.dl-menuwrapper li a#button5,
	.dl-menuwrapper li a#button6,
	.dl-menuwrapper li a#button7 {
		background:#1fb6c1;
	}
	
	.dl-menuwrapper li a#button8,
	.dl-menuwrapper li a#button9,
	.dl-menuwrapper li a#button10 {
		background:#8cc83f;
	}*/



.no-touch .dl-menuwrapper li a:hover { background: rgba(255,255,255,.2); }


.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: 0;
	line-height: 50px;
	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: #1eb5c0; }

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














#menu { display: none; }


@media screen and (min-width : 64em)  {	/* 1024px */

	/*menu 1: horizontaal menu*/
	/*menu*/
	#dl-menu { display: none; }
	
	#menu{ display: inline; width: 100%; float:left; margin:0px; z-index:600; position:relative; line-height:0.23em; }
	
	#menu a, #menu h2{ font:bold .75em arial,helvetica,sans-serif; display:block; white-space:nowrap; margin:0px; }
	#menu ul a { text-decoration:none; text-align:center; padding:5px 4px 4px 7px; margin:0px 2px; border-radius: 5px; }
	#menu ul a:link, #menu ul a:visited { color:#fff; }
	
	/*@media screen and (-webkit-min-device-pixel-ratio:0) {	/*fix voor Safari 3.0 en hoger EN Chrome*/
	/*	#menu a { font:bold 0.75em Arial, Helvetica, sans-serif; }
		#menu ul a { padding:4px 11px 4px 11px; }
	}*/
	
	/*#menu ul a:hover, #menu ul a:active { color:#7e4e58; background:#acd5c2 url(../images/bg_nav_left_hover.gif) top left no-repeat; }
	#menu a.here { color:#fff; background:#7e4e58 url(../images/bg_nav_left_here.gif) top left no-repeat; }
	*/
	#menu ul{ list-style:none; margin:0; padding:0; float:left; }
	#menu li{ position:relative; background-image:none; 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 li:hover{ cursor:pointer; z-index:100; }
	
	/* End of non-anchor hover selectors */
	
	
	
	#menu li#button1 { 	position:relative; top:-28px; }
	/*#menu li#button1, #menu li#button1:hover { background:url(../images/bg_nav_right_home_hover.gif) top right no-repeat;  }*/
	
	#menu ul a#button1 { background:#d6bb9c; }
	#menu ul a#button1.here, #menu ul a#button1:hover { color:#7e4e58; }
	
	#menu ul a#button2,
	#menu ul a#button3,
	#menu ul a#button4,
	#menu ul a#button5,
	#menu ul a#button6,
	#menu ul a#button7 {
		background:#1fb6c1;
	}
	
	#menu ul a#button8,
	#menu ul a#button9,
	#menu ul a#button10,
	#menu ul a#button11 {
		background:#8cc83f;
	}
	
	
	#menu ul a#button2.here, #menu ul a#button2:hover,
	#menu ul a#button3.here, #menu ul a#button3:hover,
	#menu ul a#button4.here, #menu ul a#button4:hover,
	#menu ul a#button5.here, #menu ul a#button5:hover,
	#menu ul a#button6.here, #menu ul a#button6:hover,
	#menu ul a#button7.here, #menu ul a#button7:hover,
	#menu ul a#button8.here, #menu ul a#button8:hover,
	#menu ul a#button9.here, #menu ul a#button9:hover,
	#menu ul a#button10.here, #menu ul a#button10:hover,
	#menu ul a#button11.here, #menu ul a#button11:hover {
		background:#7e4e58;
	}
}

@media screen and (min-width : 70em)  {	/* 1024px */
	#menu a, #menu h2{ font:bold .875em arial,helvetica,sans-serif; display:block; white-space:nowrap; margin:0px; }
}