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

/*responsive menu*/
#menu {
	display: none;	
}

#menu_sp .btn {
  float: left;
  margin: .7em 0 0 0;
  background: #0089BD;
  padding: .5em .5em .2em .5em;
  cursor: pointer;
  /*laat de menuknop over het logo heen schuiven*/
  position: relative;
  z-index:10001;
}

   
#menu_sp .btn:hover {
  background-color: #000;
}

#menu_sp #toggle {
  position: absolute;
  left: -999em;
}

#menu_sp nav {
  /*position: fixed;	/*misschien weghalen als menu te lang is voor scherm ?*/
  position: absolute;
  left: -75%;
  width: 75%;
  /*height: 100%;	/*misschien weghalen als menu te lang is voor scherm ?*/
  padding: 0 0 0 0;
  margin: 0 0 2em 0;
  z-index: 10000;
 
  -webkit-transition: left 0.5s;
     -moz-transition: left 0.5s;
      -ms-transition: left 0.5s;
       -o-transition: left 0.5s;
          transition: left 0.5s;
}

/*opmaak van menuknoppen*/
#menu_sp ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
         
#menu_sp ul a {
  text-decoration: none;
  color: #fff;
  font-size: 1em;
  padding: 0 5%;
  display: block;
  border-bottom: 1px solid #fff;
  background: rgba(0,137,189,0.9); 
}
 
#menu_sp ul a:hover, #menu_sp ul a#here {
  background-color: #000;
}
#menu_sp ul a.has-submenu {
  background: rgba(0,137,189,0.9) url(../images/arrow.png) right 10px center no-repeat;	
}
#menu_sp ul a.has-submenu:hover { background-color: #000; }
#menu_sp ul a.select {
  background: rgba(0,137,189,0.9) url(../images/arrow-down.png) right 10px center no-repeat;	
}

#menu_sp li.menu-item-type-custom > .sub-menu {
	display: none;	/*verbergt het submenu in het responsive menu totdat jquery (template.inc.php onderaan) de boel toont.*/
}

/*submenu*/
#menu_sp ul ul a {
	padding-left: 2em;
	line-height: 		2em;
}


/*de twee hieronder zorgen voor de vershuiving naar rechts, uiteindelijk willen we dat het menu OVER de content heen schuift!*/
#menu_sp .wrapper {
  width: 100%;
  overflow: hidden;
}
 
#menu_sp .inner {
  float: right;
  width: 100%;
 
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

/*de drie hieronder zorgen voor de slide-in/-out*/
#menu_sp :checked ~ nav {
  left: 0;
}
     
#menu_sp :checked ~ nav .close {
  position: absolute;
  top: 1.5em;
  left: 4%;
}

/*deze zorgt voor het schuiven van de content naar rechts met 75%;*/
#menu_sp :checked ~ .wrapper .inner {
  margin-right: -75%;
}

/*bugfixes voor iOS < 6 en Android 4.1.2*/
body {
  -webkit-animation: bugfix infinite 1s;
}
 
@-webkit-keyframes bugfix {
  from {padding:0;}
  to {padding:0;}
}


@media screen and (min-width: 900px) {
	/*menu smartphone*/
	#menu_sp {
		display: none;
	}

	/* hoofdmenu horizontaal */



#menu {
z-index:			600;
display:		block;
	/*line-height:10px;*/
	/*line-height:0.5em;*/
}

#menu a, #menu h2{
font:				normal .9em arial,helvetica,sans-serif;
display:			block;
line-height: 		54px;
white-space:		nowrap;
padding:			0 1em;
color:	#fff; 
/*margin:				1em 0 1em 0;*/
}

#menu ul a {
text-decoration:	none;
text-align:			center;

}

#menu ul a:hover, #menu ul a:active, #menu a#here { background: #0089BD; }


#menu ul ul a {
font-weight:		normal;
background-color:	#0089BD;
background-image:	none;
margin:				0;
text-decoration:	none;
text-align:			left;
border-bottom:		1px solid #fff;
white-space:		normal;
width:				17em;
line-height: 		2em;
}

#menu ul ul a, #menu ul ul a:visited{
background-color:	#0089BD;
background-image:	none;
color:				#fff;
padding:			5px 10px 5px 10px;
}

#menu ul ul a:hover, #menu ul ul a:active, #menu ul ul a#here {
color:				#fff;
background-color: 	#65B7D7;
background-image:	none;
}


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

#menu li{
position:			relative;
background-image:	none;
}

#menu ul ul{
padding:			0px 0px 0px 0px;
position:			absolute;
z-index:			500;
top:				auto;
left:				0px;
display:			none;
/*width:				18em;*/
/*background:#7fbece;*/
text-align:			left;
/*border-top:1px solid #000;*/
}

#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;}

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited, #menu a.x:active {
color:#fff;
}
#menu ul ul a.x, #menu ul ul a.x:visited, #menu ul ul  a.x:active {
color:#fff;
}
#menu a.x:hover{
color:#fff;
}
#menu ul ul a.x:hover{
color:#fff;
}

}

@media screen and (min-width: 1000px) {
	#menu a, #menu h2{
		font:	normal 1.1em arial,helvetica,sans-serif;
		display:			block;
		line-height: 		54px;
		white-space:		nowrap;
		padding:			0 1em;
		color:	#fff; 
	}

}