/* default styling */

#mobileMenu, a.menuTrigger {  display: none; }
#mobileMenu a, a.menuTrigger {  cursor:pointer; }
#mobileOverlay {  background-color: #000;  height: 100%;  opacity: 0;  position: absolute;  width: 100%;z-index: 0; }
#mobileOverlay.running {  z-index: 5000; }
.mobileWrapper {  height: 100%;  overflow: hidden;  position: absolute;  width: 0;  z-index: 5001; }
.vertical.mobileWrapper{  width:100%;  height:0; top:50px; }


@media screen and (max-width: 800px) {


header nav{  display: none; } /*standaard navigatie uitschakelen*/
body {  float: left;  height: 100%; width:100%;}

/* mobile wrapper styling */ 
.mobileWrapper > div {
    background: none repeat scroll 0 0 #ffffff;
    height: 100%;
    position: relative;
    width: 100%;
}

.horizontal.mobileWrapper.open {
    width: 280px;
}


/* mobile overlay open styling */ 
#mobileOverlay.open {
    cursor: pointer;
    z-index:5000;
    opacity: 0.25;
}
#mobileOverlay.open.disabled {  opacity: 0; }

/**
 * Menu trigger styling
 * Designs by eric on http://vivven.nl/m/
 */  
a.menuTrigger {
	position:absolute;top:17px;left:190px;
  color: #e0dede;
  font: 700 12px/31px Arial;
  padding: 0 24px;
  height:auto;background:none;
  text-decoration: none;
  text-indent: 20px;
  display:block;
  width:auto;
}

a.menuTrigger:before {
    border-bottom: 0.125em solid #e0dede;
    border-top: 0.375em double #e0dede;
    font-size:17px;line-height:28px;
    content: "";
    float: left;
    height: 0.125em;
    top: 10px;
    width: 1em;
    left: 19px;
    position: absolute;
}

/*navigation styling */
.mobileWrapper nav { height: 100%; }

.mobileWrapper ul {   /* Default ul styling */
    height: 100%;
    position: relative;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.mobileWrapper ul li {  /* Default li styling */
    border-bottom: 1px solid #8794b6;
    padding: 0 15px;
    width: 100%;
    margin-left: 0;

}

.mobileWrapper.horizontal ul li {  /* Default horizontal li styling */
     width: 280px;
}

.mobileWrapper ul li.active { /* li active  styling */
    background-color: #243e82;
}

.mobileWrapper ul li:hover  { /* li hover styling */
    background-color: #243e82;

}

.mobileWrapper ul li > a {  /* Default a styling */
    color: #243e82;
    display: block;
    font: 500 14px/20px 'OpenSansRegular', Arial;
    text-decoration: none;
    text-transform: uppercase;
    padding:15px 0;
}
.mobileWrapper ul li > a:hover { /* a hover styling */
    color: #f8cc2a;
}

.mobileWrapper ul li.active > a { /* li active a styling */
    color: #f8cc2a;
}

/* submenu navigation */
.mobileWrapper ul li.sub >  a {  /*submenu main a styling */

}
.mobileWrapper ul li.sub li a { /* submenu a styling */
}

.mobileWrapper ul li ul { /* default submenu ul styling */
    background-color: #fafafa;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 0;
}
.mobileWrapper ul li ul.open { /* submenu open styling*/
    left: 0;
    width: 100%;
}

.mobileWrapper ul li ul:after { /*Sub menu ul::after styling*/
 content: '';
 position:absolute;
 top:0;
 right:0;
 width:5px;
 height:100%;
 background-color:black
 
}

.mobileWrapper ul li ul li {   /* default submenu li styling */
    padding: 0 30px;
}
.mobileWrapper ul li ul li.head {   /* submenu li.head  styling */
    padding: 0;
}
.mobileWrapper ul li ul li.last {  /* submenu li.last  styling */
    border-bottom: medium none;
}
.mobileWrapper ul li ul li.back { /* submenu li.back  styling */
    background: url("") no-repeat scroll 90% center rgba(0, 0, 0, 0);
    padding: 0 15px;
}

.mobileWrapper ul li ul li.back a { /* submenu li.back a  styling */
    font: 200 14px/20px 'Roboto', Arial;
    padding:15px 0;
}


.mobileWrapper li.head.vertical a{transform:rotate(90deg);font-size:140%;} /* submenu vertical li.head a styling */
.mobileWrapper li.head.vertical {height:100%;width:20%;float:right} /* submenu vertical li.head styling */
.mobileWrapper .leftMenu{float:left;width:80%;} /* submenu vertical menu position */

.mobileWrapper ul li.sub > ul > li.head, .mobileWrapper ul li.sub > ul > li.back  {padding: 0 15px;} /* submenu vertical li.head + li.back styling */
.mobileWrapper ul li.sub > ul > li.head:hover, .mobileWrapper ul li.sub > ul > li.back:hover, .mobileWrapper ul li.active.sub > ul > li.back:hover, .mobileWrapper ul li.active.sub > ul > li:hover {background-color: #243e82;} 
.mobileWrapper ul li.sub > ul > li.back:hover > a, .mobileWrapper ul li.active.sub > ul > li:hover > a {color: #f8cc2a;}

.mobileWrapper ul li.active.sub > ul > li > a { color: #010101;} /* submenu  li.active styling */
.mobileWrapper ul li.active.sub > ul > li {background-color: #fff; }/* submenu  li.active a styling */


.mobileWrapper ul li.active.sub > ul > li.active > a {color: #f8cc2a;  }/* submenu  li.active  child li.active styling */ 
.mobileWrapper ul li.active.sub > ul > li.active {background-color: #243e82 /* submenu  li.active child li.active a styling */



}


/**
 *Transition
 *
 *Only change speed when neccessary!
 * 
 */   
#mobileOverlay{-webkit-transition: opacity  1s ease-in-out;-moz-transition: opacity  1s ease-in-out;-o-transition: opacity  1s ease-in-out;transition: opacity  1s ease-in-out; }
.mobileWrapper ul li ul, .mobileWrapper{-webkit-transition: width 1s ease-in-out;-moz-transition: width 1s ease-in-out;-o-transition: width 1s ease-in-out;transition: width 1s ease-in-out; }
.vertical.mobileWrapper{-webkit-transition: height 1s ease-in-out;-moz-transition: height 1s ease-in-out;-o-transition: height 1s ease-in-out;transition: height 1s ease-in-out; }

.mobileWrapper *{-webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}


@media screen and (max-width: 720px) {
a.menuTrigger {right: 28px; top: 17px;}


}