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

@media screen and (min-width: 1320px) and (max-width: 1660px) {
	
	.centered{	width: 1260px;	}
	body { font-size: 15px;  }
	
	#menu a { font-size: 13px; padding: 0 17px 0 17px; }
	
	#menuoverlay-top { top: 25px; }
	#menuoverlay-top .afspraak { font-size: 15px; margin-left: 20px; padding: 0 25px; }
	#menuoverlay-top-menu { top: 150px; }
	#menuoverlay:before { height: 940px; }
	#menuoverlay-top-menu .titel { font-size: 16px; padding-bottom: 10px; }
	#menuoverlay-top-menu li.menumetsubmenuli { width: 300px; padding-right: 0px; }
	#menuoverlay-top-menu a { padding: 5px 0 }
	#menuoverlay #adres { bottom: 25px; line-height: 160%; }
	#menu .last .menuitem { padding: 0 25px; }
	
	#menuoverlay-top-menu ul{   width: 1260px;   }
	
	
	#header{  height: 830px;  } 
	#header div.animate { top: 230px;  }
	#header #kaartje { margin-right: -630px; top: 580px; }
	#header #vinkjes { margin-left: -630px;     top: 720px; }
	#header #vinkjes li {     padding: 0 40px 0 50px;    width: 250px; font-size: 12px; }
	
	#intro {    padding: 0px 0 80px; }
	#intro div.container {    padding: 100px 60px 0 55%;}
	#intro .bg .circle { top: 80px;}
	
	#diensten {    padding: 160px 0 120px; }
	#diensten .dienst {    width: 25%;		margin-left: 0; }
	#diensten .dienst .bottom .titel { line-height: 150%; }
	#diensten .dienst .bottom .link { margin-left: 65px; }
	
	#details {    padding: 60px 0 80px; }
	#details div.container {    padding: 80px 60px 0 55%;}	
	
}


@media screen and (min-width: 1024px) and (max-width: 1319px) {
	
	.centered{	width: 960px;	}
	body{ font-size: 14px; }
	

	#top.vervolgpagina #menu {    top: 16px; }
	
	#menu { top: 25px; }
	#menu .contact .menuitem {  }
	#menu .menuitem, #menu .menumetsubmenuli { display: none; }
	#menu .openmenu .menuitem { display: block; height: 50px; width: 50px;     border-radius: 50px; padding: 0; background: #74B5E4; }
	#menu .openmenu .menuitem:before{ background: url("../img/svg-menu.svg") no-repeat;}
	#menu .openmenu .menuitem:after { content:'Menu'; position: absolute; top: -10px; left: -70px;  }

	#menu .last .menuitem { display: block;  margin-left: 10px; padding: 0 25px; font-size: 14px; height: 50px; line-height: 47px; }
	#menu .login .menuitem { display: block;  margin-left: 10px; height: 50px; width: 50px;     border-radius: 50px; padding: 0;}

	#menuoverlay-top { top: 25px; }
	#menuoverlay-top .afspraak { margin-left: 10px; padding: 0 25px; font-size: 14px; height: 50px; line-height: 47px; border: 2px solid rgba(255,255,255,0.4); background: #74B5E4; text-decoration: none;  box-shadow: 0 3px 12px rgba(0,0,0,0.3);  }
	#menuoverlay-top-menu { top: 140px; }
	#menuoverlay:before { height: 940px; }
	#menuoverlay-top-menu .titel { font-size: 14px; padding-bottom: 10px; }
	#menuoverlay-top-menu li.menumetsubmenuli { width: 480px; padding-right: 0px;  }
	#menuoverlay-top-menu li.menumetsubmenuli:nth-child(3) { clear:both; padding-top: 40px;  }
	#menuoverlay-top-menu li.menumetsubmenuli:nth-child(4) { padding-top: 40px;  }
	#menuoverlay-top-menu a { padding: 8px 0; font-size: 13px; line-height: 140%; }
	#menuoverlay-top #sluiten { height: 50px; width: 50px;  }
	#menuoverlay-top .login{ height: 50px; width: 50px;  }
	
	#menuoverlay #adres { bottom: 25px; line-height: 160%; }
	#menuoverlay #adres .kolom.adres{ width: 170px; }
	#menuoverlay #adres .kolom.telefoon{ width: 150px; }
	#menuoverlay #adres .kolom.email{ width: 220px; }
	
	#menuoverlay-top-menu ul{   width: 960px;   }
	#menuoverlay-top-menu li.menumetsubmenuli { padding-bottom: 30px; }
	#menuoverlay-top-menu .titel { padding-bottom: 0; }	
	
	
	#header{  height: 830px;  } 
	#header div.animate { top: 200px; width: 410px; }
	#header .container.tekst { font-size: 15px; font-weight: bold; }
	#header #kaartje { margin-right: -480px; top: 580px; width: 340px; }
	#header #vinkjes { margin-left: -480px;     top: 660px; }
	#header #vinkjes li {     padding: 0 40px 0 50px;    width: 100%; padding-bottom: 15px; padding-top: 5px; font-size: 14px; }
	
	#intro {    padding: 0px 0 80px; }
	#intro div.container {    padding: 100px 0 0 55%;}
	#intro .bg .circle { top: 80px;}
	
	#diensten {    padding: 100px 0 120px; }
	#diensten .dienst {    width: 25%;		margin-left: 0; }
	#diensten .dienst .bottom .titel { line-height: 150%; }
	#diensten .dienst .bottom .link { margin-left: 30px; }
	#diensten .dienst .top:before, #diensten .dienst .top:after {     margin-left: -60px;    width: 120px;		height: 120px; }
	#diensten .dienst1 .top:after{  background-size: 50px auto;}
	#diensten .dienst2 .top:after{   background-size: 50px auto;}
	#diensten .dienst3 .top:after{  background-size: 50px auto;}
	#diensten .dienst4 .top:after{   background-size: 50px auto;}
	#diensten .dienst .top { height: 120px;	}
	#diensten .dienst .bottom .titel {     font-size: 16px; padding: 0 0px; height: 45px; }
	#diensten .dienst .bottom .tekst {		padding: 0 20px 30px;	}
	
	#review .titel { font-size: 18px; }
	#review .centered{ width: 800px;   }
	
	#details {    padding: 30px 0 40px; }
	#details div.container {    padding: 80px 0 0 55%;}	
	
	#contact {   padding: 50px 0 0px; }
	
	#afsluiting .centered{ width: 800px;   }
	
}


@media screen and (min-width: 740px) and (max-width: 1023px) {

	.centered{	width: 700px;	}
	body{ font-size: 14px; }
	h2{ font-size: 33px; padding-bottom: 15px; }
	.btn { font-size: 14px; }
	
	/* .mobielzichtbaar { display: block; } */
	
	#top .logo {   top: 15px; height: 55px; width: 230px; }
	#top{ height: 80px; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);   }
	
	#menu { top: 15px; }
	#menu .contact .menuitem {  }
	#menu .menuitem, #menu .menumetsubmenuli { display: none; }
	#menu .openmenu .menuitem { display: block; height: 50px; width: 50px;     border-radius: 50px; padding: 0; background: #74B5E4; }
	#menu .openmenu .menuitem:before{ background: url("../img/svg-menu.svg") no-repeat;}
	#menu .openmenu .menuitem:after { content:'Menu'; position: absolute; top: -10px; left: -70px;  }

	#menu .last .menuitem { display: block;  margin-left: 10px; padding: 0 25px; font-size: 14px; height: 50px; line-height: 47px; }
	#menu .login .menuitem { display: block;  height: 50px; width: 50px;     border-radius: 50px; padding: 0;  }

	#menuoverlay-top { top: 25px; }
	#menuoverlay-top .afspraak { margin-left: 10px; padding: 0 25px; font-size: 14px; height: 50px; line-height: 47px; border: 2px solid rgba(255,255,255,0.4); background: #74B5E4; text-decoration: none;  box-shadow: 0 3px 12px rgba(0,0,0,0.3);  }
	#menuoverlay-top-menu { top: 140px; }
	#menuoverlay:before { height: 100vh; }
	#menuoverlay-top-menu .titel { font-size: 14px; padding-bottom: 10px; }
	#menuoverlay-top-menu li.menumetsubmenuli { width: 350px; padding-right: 0; }
	#menuoverlay-top-menu li.menumetsubmenuli:nth-child(3) { clear:both; padding-top: 40px;  }
	#menuoverlay-top-menu li.menumetsubmenuli:nth-child(4) { padding-top: 40px;  }
	#menuoverlay-top-menu a { padding: 6px 0; font-size: 13px; line-height: 140%; }
	#menuoverlay-top #sluiten { height: 50px; width: 50px;  }
	#menuoverlay-top .login{ height: 50px; width: 50px;  }
	
	#menuoverlay #adres { bottom: 25px; line-height: 160%; }
	#menuoverlay #adres .kolom.adres{ width: 170px; }
	#menuoverlay #adres .kolom.telefoon{ width: 130px; }
	#menuoverlay #adres .kolom.email{ width: 220px; }
	#menuoverlay #adres .kolom.socialmedia{ margin-right: 10px; }
	
	#menuoverlay-top-menu ul{   width: 700px;   }
	#menuoverlay-top-menu li.menumetsubmenuli { padding-bottom: 30px; }
	#menuoverlay-top-menu .titel { padding-bottom: 0; }
	
	#header{  height: 830px;  } 
	#header:before { height: 900px; background: url("../img/visual-header-tablet.jpg") no-repeat center bottom;  background-size: auto 100%; }

	#header div.animate { top: 440px; width: 600px; lefT: 50%; margin-left: -300px; text-align: center; }
	#header #kaartje { display: none;}
	#header #vinkjes { margin-left: -350px;     top: 700px; width: 700px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 45px;  }
	#header #vinkjes li {     padding: 0 20px 0 50px;  width: 230px;   padding-bottom: 15px; padding-top: 5px; font-size: 13px; }
	#header .container h1 {		font-size: 26px; padding-bottom: 10px; }
	#header .container.tekst {		font-size: 16px; padding-bottom: 20px; }
	#header .container .btn {	margin-left: 190px; }
	
	#intro {    padding: 0px 0 40px; }
	#intro div.container {    padding: 100px 0 0 45%;}
	#intro .bg .circle { top: 80px;}
	#intro h2 { font-size: 24px; }
	#intro h3 { font-size: 20px; }
	#intro .bg .circle { width: 350px; height: 350px; }
 	#intro .bg { width: 39%; }
	#intro .bg:before { top: 180px; right: 160px;    width: 350px;		height: 350px; }
	#intro .bg .circle:after {     bottom: -100px; left: 180px;	width: 50px;  height: 50px; }

	
	#diensten {    padding: 100px 0 30px; }
	#diensten .dienst {    width: 50%;		margin-left: 0; margin-bottom: 80px; }
	#diensten .dienst .bottom .titel { line-height: 150%; }
	#diensten .dienst .bottom .link { margin-left: 85px; }
	#diensten .dienst .top:before, #diensten .dienst .top:after {     margin-left: -60px;    width: 120px;		height: 120px; }
	#diensten .dienst1 .top:after{  background-size: 50px auto;}
	#diensten .dienst2 .top:after{   background-size: 50px auto;}
	#diensten .dienst3 .top:after{  background-size: 50px auto;}
	#diensten .dienst4 .top:after{   background-size: 50px auto;}
	#diensten .dienst .top { height: 120px;	}
	#diensten .dienst .bottom .titel {     font-size: 16px; padding: 0 100px; height: 45px; }
	#diensten .dienst .bottom .tekst {		padding: 0 50px 30px;	}
	
	#review .titel { font-size: 16px; }
	#review .reviewer { font-size: 14px; }
	#review .centered{ width: 600px;   }
	#review .bg{     width: 35%;  }
	#review .bg:before{   right: -260px; width: 350px; height: 350px; }
	#review .bg:after{   top: 40px; right: 70px; width: 50px; height: 50px; }

	
	
	#details {    padding: 0px 0 40px; }
	#details div.container {    padding: 100px 0 0 45%;}
	#details .bg .circle { top: 80px;}
	#details h2 { font-size: 24px; padding: 0 0 10px; }
	#details h3 { font-size: 20px; }
	#details .bg .circle { width: 350px; height: 350px; }
 	#details .bg { width: 39%; }
	#details .bg:before { top: 180px; right: 160px;    width: 350px;		height: 350px; }
	#details .bg .circle:after {     bottom: -100px; left: 180px;	width: 50px;  height: 50px; }
	
	#contact .centered{ width: 600px;   }
	#contact {   padding: 50px 0 0px; }
	#contact .btn.first {    margin-left: 70px;    margin-right: 10px;}
	
	#afsluiting .centered{ width: 600px;   }
	#afsluiting div.container { height: 220px;     padding: 130px 0 0; }
	#afsluiting {    padding: 120px 0;		font-size: 11px; line-height: 150%; }
	#afsluiting div.container:before { top: 50px; }
	
}


@media screen and (min-width: 1px) and (max-width: 739px) {
	
	body{ font-size: 13px; }
	
	.centered{	width: 300px;	}

	.mobielzichtbaar { display: block; }
	
	#top .logo, #top.vervolgpagina .logo {   top: 15px; height: 50px; width: 105px; background: url("../img/logo-vov-consultancy.svg") no-repeat left center;    background-size: 100% auto  ; }
	#top, #top.vervolgpagina{ height: 80px; background: #fff;  top: auto; bottom: 0px;  box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.2);  }
	
	#menu,  #top.vervolgpagina #menu { top: 13px!important; width: 100%;  }
	#menu .contact .menuitem {  }
	#menu .menuitem, #menu .menumetsubmenuli { display: none; }
	#menu .openmenu { position: absolute; right: 50%; margin-right: -25px; top: -8px;  }
	#menu .openmenu .menuitem {  display: block; height: 50px; width: 50px;   border-radius: 50px; padding: 0; background: #74B5E4; }
	#menu .openmenu .menuitem:before{ background: url("../img/svg-menu.svg") no-repeat;}
	#menu .openmenu .menuitem:after { content:'Menu';  position: absolute; top: 24px; left: 0px; font-weight: bold; right: 0px; text-transform: uppercase; font-size: 10px; text-align: center;  }
	
	#menu .last .menuitem { display: block; background: #fff; color: #000539; padding: 0 5px 0 5px;  font-size: 13px; height: 50px; line-height: 47px; }
	#menu .last .menuitem:before { position: absolute; top: 50%; margin-top: -7px; left: -15px; background: url("../img/svg-afspraak.svg") no-repeat top left; width: 15px; height: 15px; background-size: 100% auto;}
	#menu .last .menuitem span{ display: none; }
	#menuoverlay-top .afspraak { display: none; position: fixed; bottom: 90px; left: 50%; height: 53px; padding: 0; font-size: 15px; text-align: center; line-height: 47px; width: 200px; margin-left: -100px; border: 2px solid rgba(255,255,255,0.4);    background: #74B5E4;    text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,0.3); }

	#menu .last:hover .menuitem, #top.vervolgpagina #menu .last:hover .menuitem { border-color: #fff; background: #fff; color: #74B5E4!important; box-shadow: none; }
	#top.vervolgpagina #menu .last .menuitem {    margin-left: 0px!important; margin-right: 0px!important; color: #000539!important; }

	#menuoverlay-top { position: fixed; top: auto; bottom: 0px; width: 100%; z-index: 10;  }
	
	#menuoverlay:before { height: 100vh;  background: #00489D; }
	

	#menuoverlay .mobielscrol{	position: fixed;	top: 110px;	 right: 0px;	left: 0px;	bottom: 180px;	overflow: scroll;	overflow-x: hidden;	overflow-y: auto;	box-sizing: border-box;	padding-right: 0px;}
	#menuoverlay .mobielscrol::-webkit-scrollbar {    width: 6px; }
	#menuoverlay .mobielscrol::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 6px #ccc;     -webkit-border-radius: 5px;    border-radius: 5px; }
	#menuoverlay .mobielscrol::-webkit-scrollbar-thumb {    -webkit-border-radius: 5px;    border-radius: 5px;    background: #ccc; }
	#menuoverlay .mobielscrol::-webkit-scrollbar-thumb:window-inactive {	background: rgba(0,0,0,0.4); }

	#menuoverlay .logowit { top: 25px; left: 50%; margin-left: -90px; width: 180px; height: 50px; background-position: center top;     }
	#menuoverlay-top-menu { top: auto; position: relative; float: left; width: 100%; padding: 0 40px;  }
	#menuoverlay-top-menu ul { width: 100%; position: relative; float: left; text-align: center; }
	#menuoverlay-top-menu .titel { font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.3); margin-bottom: 10px; }
	#menuoverlay-top-menu li.menumetsubmenuli {  width: 100%; position: relative; float: left; padding-right: 0px;  }
	#menuoverlay-top-menu a { padding: 6px 0; font-size: 14px; line-height: 140%; }
	#menuoverlay-top #sluiten { height: 50px; width: 50px; position: absolute; bottom: 20px; left: 50%; margin-left: -25px;  }
	#menuoverlay-top-menu ul li ul { padding: 0 0 30px 0;  }
	
	#menuoverlay-top .home { height: 50px; line-height: 50px; width: 100px; margin-left: -145px; text-align: center; position: absolute; bottom: 20px; left: 50%; text-transform: uppercase; font-weight: bold;  color: #fff; }
	#menuoverlay-top .home:hover { color: #fff; }
	#menuoverlay-top .contact { height: 50px; line-height: 50px; width: 100px; margin-right: -145px; text-align: center; position: absolute; bottom: 20px; right: 50%; text-transform: uppercase; font-weight: bold;  color: #fff; }
	#menuoverlay-top .contact:hover { color: #fff; }
	#menuoverlay-top .aanvraag { color: #fff!important; text-transform: uppercase; font-weight: bold; border-radius: 65px; position: fixed; bottom: 90px; left: 50%; height: 53px; padding: 0; font-size: 15px; text-align: center; line-height: 47px; width: 240px; margin-left: -120px; border: 2px solid rgba(255,255,255,0.4);    background: #74B5E4;    text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,0.3); }
	#menuoverlay-top .aanvraag:hover{ background: #00489D; }
	
	#menuoverlay-top .scrollsuggestie { position: fixed; right: 30px; bottom: 140px; width: 20px; height: 43px; background: url("../img/visual-scrollsuggestie.gif") no-repeat; background-size: 100% auto; }
	.mobieltelefoon { display: none; }

	#menuoverlay #adres { display: none; }
	
	#header{  height: 760px;  } 
	#header:before { height: 400px; background: url("../img/visual-header-tablet.jpg") no-repeat center bottom;  background-size: auto 100%; }

	#header div.animate { top: 240px; width: 300px; lefT: 50%; margin-left: -150px; text-align: center; }
	#header #kaartje { display: none;}
	#header #vinkjes { margin-left: -150px;     top: 500px; width: 300px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 45px;  }
	#header #vinkjes li {     padding: 0 0 0 50px;  width: 300px;   padding-bottom: 15px; padding-top: 5px; font-size: 13px; }
	#header .container h1 {		font-size: 20px; padding-bottom: 10px; }
	#header .container.tekst {		font-size: 16px; padding-bottom: 20px; }
	#header .container .btn {	margin-left: 30px; }
	
	#intro {    padding: 160px 0 0; }
	#intro div.container {    padding: 100px 0 0 0; text-align: center;}
	#intro h2 { font-size: 18px; }
	#intro h3 { font-size: 14px; }
	#intro .btn {  width: 100%; }
	#intro .bg .circle {   top: 0px; right: 50%;    width: 220px;	margin-right: -110px;	height: 220px; }
 	#intro .bg { width: 100%; }
	#intro .bg:before { top: 50px; right: 50%;    width: 250px;	margin-right: -30px;	height: 250px; }
	#intro .bg .circle:after {     bottom: 0px; left: 230px;	width: 30px;  height: 30px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

	
	#diensten {    padding: 100px 0 30px; }
	#diensten .dienst {    width: 100%;		margin-left: 0; margin-bottom: 50px; }
	#diensten .dienst .bottom .titel { line-height: 150%; }
	#diensten .dienst .bottom .link { margin-left: 60px; }
	#diensten .dienst .top:before, #diensten .dienst .top:after {     margin-left: -60px;    width: 120px;		height: 120px; }
	#diensten .dienst1 .top:after{  background-size: 50px auto;}
	#diensten .dienst2 .top:after{   background-size: 50px auto;}
	#diensten .dienst3 .top:after{  background-size: 50px auto;}
	#diensten .dienst4 .top:after{   background-size: 50px auto;}
	#diensten .dienst .top { height: 120px;	}
	#diensten .dienst .bottom .titel {     font-size: 16px; padding: 0 0px; height: auto; }
	#diensten .dienst .bottom .tekst {		padding: 0 0 20px;	}
	
	#review .titel { font-size: 16px; }
	#review .reviewer { font-size: 14px; }
	#review .centered{ width: 300px;   }
	#review .bg{     width: 35%;  }
	#review .bg:before{   right: -260px; width: 350px; height: 350px; }
	#review .bg:after{   top: 40px; right: 70px; width: 50px; height: 50px; }
	#review { padding-bottom: 80px; }
	
	
	#details {    padding: 110px 0 0; }
	#details div.container {    padding: 100px 0 0 0; text-align: center;}
	#details h2 { font-size: 18px; }
	#details h3 { font-size: 14px; }
	#details .btn {  width: 100%; }
	#details .bg .circle {   top: 0px; right: 50%;    width: 220px;	margin-right: -110px;	height: 220px; }
 	#details .bg { width: 100%; }
	#details .bg:before { top: 50px; right: 50%;    width: 250px;	margin-right: -30px;	height: 250px; }
	#details .bg .circle:after {     bottom: 0px; left: 230px;	width: 30px;  height: 30px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
	
	#contact .centered{ width: 300px;   }
	#contact {   padding: 50px 0 80px; }
	#contact .btn {  width: 100%; margin: 10px 0 0;  }
	#contact .btn.first {    margin: 0;}
	#contact h4 {		font-size: 22px; }
	
	#afsluiting .centered{ width: 300px;   }
	#afsluiting div.container { height: auto;     padding: 20px 0 100px; }
	#afsluiting {    padding: 40px 0;	background: #00489D;	font-size: 11px; line-height: 150%; }
	#afsluiting div.container:before, #afsluiting .bg { display: none; }
	#afsluiting #naarboven { top: -20px; }
	
}

@media screen and (min-width: 1px) and (max-width: 480px) {

}