/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */

/*body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }




/* #Navigation
==================================================
DIT WERKT WEL OF TOCH NIET________________________________________________________________________________________________
#main-nav { float: right; }*/
#menu ul, #menu li { list-style: none; padding: 0; margin: 0; display: inline; } 
#main-nav ul li { float: left; position: relative; }/*
TOT HIER


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul /*h1, h2, h3, h4, h5, h6,
/*p, blockquote, pre, dl, dt, dd, ol, ul, /*li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, /*footer, header, hgroup, menu, nav, section,
summary, hgroup*/ {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}
.nav-collapse ol a{
  width: auto;
} 
.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  /*overflow: hidden;
  zoom: 1;*/
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 52em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */

/*body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #37302a;
  background: #fff;
  font: normal 100%/1.4 sans-serif;
}

section {
  border-bottom: 1px solid #999;
  text-align: center;
  padding: 100px 0 0;
  height: 800px;
  width: 100%;
}

h1 {
  margin-bottom: .5em;
}

p {
  width: 90%;
  margin: 0 auto;
}


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
  background: #002A50;
  position: fixed;
  z-index: 3000;
  width: 100%;
  left: 0;
  top: 0;
}
.site-header {
  padding: 0 0 0 0;
}
.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: normal;
  line-height: 0px;
  padding: 0.7em 0 0 0;
  color: #fff;
  float: left;
}


/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 3s;
  -moz-transition: opacity 3s;
  transition: opacity 3s;
  background: rgba(0,42,80,0.5);/* WAS kleur 0,0,0, .5 dat is zwart ook aangepaste kleur gebruikt in de flexslider*/
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 52em) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (min-width: 52em) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 52em) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-top: 1px solid white;
  text-decoration: none;
  background: #002A50;
  padding: 0.7em 1em;
  color: #fff/*#d0ebfd*/;
  width: 100%;
  float: left;
}

#menu.nav-collapse a:active,
#menu.nav-collapse .active a {
	color: /*#2C88C9*/#afdfff;
	font-weight: 500;/*NIEUW*/
}

@media screen and (min-width: 52em) {
  .nav-collapse a {
    padding: 2em 2em;/*DIT IS EEN BELANGRIJKE PADDING*/
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #2C88C9;/*DIT IS DE KLEUR VAN HET SUBMENU*/
  padding-left: 2em;/*hierdoor staat submenu in mobiel met extra padding vanaf links in computer maakt het niet uit komt door ul ul*/
}

@media screen and (min-width: 52em) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../font/responsivenav.eot");
  src:url("../font/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../font/responsivenav.ttf") format("truetype"),
    url("../font/responsivenav.woff") format("woff"),
    url("../font/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;/*dit kun je op fixed of absolute zetten. uitproberen.*/
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #ff9222; /* Edit this to change the icon color */
  font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: right;
  position: relative;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  float: right;
  /*top: 0;*/
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\78"; /* Close icon */
}

/* ------------------------------------------
  DEMO PAGE'S STYLES
--------------------------------------------- */

#menu .main-menu {
  display: none;
}

#menu li, 
#menu a {
  position: relative;
  display: block;
}

#toggle-menu {
  background-color: #fff;/*door deze kleur te wijzigen zie je de verschillen in lay-out beter*/
  color: #003c67;
  border-top: 1px solid white;/*dit is voor de button in hamburgermenu*/
}
  

#menu a:hover {
  background-color: /*white*/;
  color: #d0ebfd;/*#fff;/*#2C88C9;/*font color*/
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  transition: 300ms;}

#menu .sub-menu {
  display: block;/*hierdoor zie je alles op mobiel staan*/
}

#menu .sub-menu a:hover {
  color: #d0ebfd;/*#fff;/*#002A50;/*fontkleur submenu*/
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  transition: 300ms;
}

@media only screen and (min-width: 52em) {
  #menu .main-menu {
    display: block;
	  float: none;
  }

  #toggle-menu {
    display: none;
  }

  #menu .sub-menu li {
    float: none;/*none is positie onder hoofdmenu */
	width: 100%;/*breedte onder het hoofdmenu voor langere tekst 200% maken zie ook de ul en li van de header in html*/
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3000;
  }

  #menu .sub-menu {
    display: none;
  }

  #menu li:hover .sub-menu  {
    display: block;
  }
}

/*------------------------------------------
  DDROPBUTTON DEMO PAGE VAN W3-SCHOOLS ONDER HOW TO w3schools.com/howto/howto_js_dropdown.asp
  VOLLEDIGE ONBEWERKTE TEKST VOOR HET BEGRIP
---------------------------------------------*/

.dropdown {
  float: left;
  overflow: hidden;
  margin-bottom: 14px;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 24px;  
  line-height: 28px;
  border: none;
  outline: none;
  color: white;
  background-color: white;
  background: white;
  font-family:  "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

@media only screen and (min-width: 52em) {.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2C88C9;
  width: 100%;/*van de list die uitklapt*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color: white;
  }
}
.dropdown-content {
  display: none;
  float: left;
  margin: -14px 0 14px 0;
  background-color: /*#f9f9f9*/;
  min-width: 160px;
  width: 100%/*160px*/;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: display .25s, opacity .25s ease-in-out;

}

.dropdown-content a {
  float: none;
  color: white;
  border-top: 1px solid white;
  padding: 0.7em 1em;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: #2C88C9;
}

.show {
  display: block;
}

#toggle-menu.dropbtn:hover, .dropbtn:active {
	background-color:;
    color: #2C88C9;
}

#toggle-menu.dropbtn:focus,
	button:active,
	input[type="submit"]:focus,
	/*input[type="reset"]:active,*/
	input[type="button"]:focus {
		background-color: ;
		color: #2C88C9;
}

@media only screen and (min-width: 52em) {
.show {
    display: none;
	}
}

.menubutton {
	width:110px/150PX;
	height:13px/13px;
	border: none;
	color: white;
	padding: .2em .7em;
	text-align: left;
	background-color:#002A50;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  transition: 300ms;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.menubutton:hover {color: white; background-color: #2C88C9;}


.background1 {
	background: hsla(209,100%,16%,0.18);
	background-clip: initial;
	color: white;
}

.background1 { 
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: white;
}

.background1 h1{ font-size: 24px; line-height: 28px; font-weight: normal; color: #2C88C9; padding: .8em;}
.background1 h2 { font-size: 20px; line-height: 22px; margin: 0 0 20px 0; color: #2C88C9;}
.background1 h3 { font-size: 16px; line-height: 20px; font-weight: normal; color: white;}
.background1 h4 { font-size: 14px; line-height: 18px; font-weight: normal; color: white;}
.background1 h5 { font-size: 13px; line-height: 21px; font-weight: bold; color: white;}
.background1 h6 { font-size: 10px; line-height: 16px; font-weight: normal; color: white;}


#example1 {
  position: relative;
  padding-top: 22%;
  background: url(file:///C:/Users/Frank%20Brugman/Website/_TEST%20MAP/images/business.jpg) no-repeat center top 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  color: ;
}
#example1 p, #example1 h1, #example1 h2, #example1 h3, #example1 a {
	color: ;
	margin: 10px;
}
#example1 .menubutton {
	width:110px/150PX;
	height:13px/13px;
	border: none;
	color: white;
	padding: .2em .5em;
	text-align: left;
	background-color:#002A50;
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

#example1 .menubutton:hover {color: white; background-color: #2C88C9;}


/*ER MOET GEEN KOMMA TUSSEN TEXTLINE-TEXT EN H1 WEL TUSSEN h1 en h2 De Marge ligt aan base en lay-out*/
.textline-text h1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
}

#example4 {
  box-sizing: border-box;/*HIERDOOR BLIJFT DE PADDING IN HET ELEMENT MET VAST KADER*/
  padding: 1em;
  margin-bottom: ;
  background: url(file:///C:/Users/Frank%20Brugman/Website/_TEST%20MAP/images/business.jp) no-repeat;
  background-repeat: no-repeat;
  background-size: 50% auto;
  background-position: top right;
	background-color:#002A50;
	color : white;
}
.bg {
	background-color: hsla(209,100%,16%,0.18);/*hsla(209,100%,16%,0.5) IS VAN PLATTEN - hsla(204, 100%, 84%,0.5) IS LICHTBLAUW OUDE FOOTER; - hsl(205, 64%, 48%,0.5) IS VAN SUBMENU EN FOOTER*/
  background: url(../images/fotob.png) no-repeat center left 75%;  /*url(business.png)*/
  background-size: cover;
  width: 100%;
  min-height: 15em;
  position: relative;
}

#diensten_bg {
  position: relative;
  padding-top: 22%;
  background: url(../images/business.jpg) no-repeat center;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
	background-color:#002A50;
  color: ;
}
#diensten_bg p, #diensten_bg h1, #diensten_bg h2, #diensten_bg h3, #diensten_bg a {
	color: ;
	margin: 10px;
}

#sallvas_bg {
  position: relative;
  padding-top: 22%;
  background: url(../images/business.png) no-repeat center top 7%;
  background-repeat: no-repeat;
  background-size: 100%;
	background-color:#002A50;
  color: ;
}
#sallvas_bg p, #sallvas_bg h1, #sallvas_bg h2, #sallvas_bg h3, #sallvas_bg a {
	color: ;
	margin: 10px;
}

#nieuws_bg {
  position: relative;
  padding-top: 22%;
  background: url(../images/nieuws/nieuws-bg.jpg) no-repeat center;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
	background-color:#002A50;
  color: ;
}
#nieuws_bg p, #nieuws_bg h1, #nieuws_bg h2, #nieuws_bg h3, #nieuws_bg a {
	color: ;
	margin: 10px;
}