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

@media screen and (min-width: 1024px) and (max-width: 1319px) {
	
	.centered{	width: 960px;	}
	body{ font-sizE: 15px; }
	
	h2{ font-size: 36px; padding-bottom: 15px; }
	
	#top .logo, #top.top1off .logo, #top.vervolgpagina .logo {  height: 42px;     top: 20px; }
	
	.btn { font-size: 13px; }
	
	
	
	
	#menu #menucontact { display: none; }
	#menu .contact .menuitem { margin-left: 15px; }
	#menu a { font-size: 11px;   }
	#menu .contact .menuitem { background: #23327B;  padding: 0 15px 0 15px; font-size: 12px; }
	
	#header { height: 650px; }
	#header div.container { width: 440px; top: 180px; }
	#header .container h1 { font-size: 38px; }
	#header .container span {  }
	#header:after { height: 80px; }
	#header .container span.tekst { padding-right: 0; }
	
	#intro h2{ font-size: 36px; padding-bottom: 15px; }
	#intro  ul { font-size: 16px; }
	#intro .rechts{ padding: 50px; margin-top: -120px; }
	
	#bedrijfsrecherche { padding: 60px 0; }
	#bedrijfsrecherche div.container { padding-right: 40%; }
	#bedrijfsrecherche:before {  background: url(../img/visual-laag-recherche-2020.jpg?v=2) no-repeat left -120px center; background-size: auto 100%; }
	#bedrijfsrecherche.animate:before { background: url(../img/visual-laag-recherche-2020.jpg?v=2) no-repeat left -200px center; background-size: auto 100%;  }

	#privedetective { padding: 60px 0; }
	#privedetective div.container { padding-left: 40%; }
	
	
	 
	
	
	#beveiliging { padding: 60px 0; }
	#beveiliging div.container { padding-right: 40%; }

	#beveiliging:before {  background: url(../img/visual-laag-beveiliging.jpg?v=20200) no-repeat right -400px top 0; background-size: auto 100%; }

	
	
	#actueel { padding-bottom: 60px; }

	
	#locaties .links, #locaties .rechts { width: 100%; margin: 0; padding: 0; }
	#locaties .rechts { margin-top: 30px; }

}


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

	.centered{	width: 700px;	}
	h2{ font-size: 42px; padding-bottom: 15px; }
	
	#talenselect{ float: none; position: absolute; right: 50%; margin: 10px -220px 0 0; }
	#menu { right: 0;  }
	#menu .home:after { display: none;  }
	
	#menubtn-pop { display: block; border: 1px solid #ddd; }
	#menu{ position: relative; float: left; top: auto; width: 100%; margin-top: 70px; display: none; z-index: 1;  background: #0052A0;  }
	#menu li{ width: 100%; padding: 0; background: none; border-top: 1px solid rgba(255,255,255,0.1); } 
	#menu .contact .menuitem, #menu a, #menu .menumetsubmenu, #menu .home .menuitem, #menu .home .menuitem:hover{ border-radius: 0; padding: 10px 0px 10px 0px; margin: 0px!important; width: 100%; text-align: center; font-weight: 600; background: #0052A0 ; color: #fff;	}

	#menu .home .menuitem { background: none; margin: 0; height: auto; }
	#menu .home span { display: block; text-align: center; }
	#menu .home:hover { margin: 0; }
	#menu #menucontact, #menu .zoeken{ display:none; }
	#menu .contact .menuitem:hover, #menu a:hover, #menu .home .menuitem:hover{  background: #004284; border: 0;  }
	#menu .contact .menuitem:after { display: none; }
	#menu a{ border: 0!important; }
	#menu a.active{  }
	#menu a.active, #menu .home .menuitem.active{ border-radius: 0; background: #004284 ; color: #fff;  }
	#menu a.active:hover{ border-radius: 0; background: #004284; color: #fff; text-decoration: underline; }
	#menu .menumetsubmenuli:after { display:none; }
	
	#menu .menumetsubmenuli { padding: 0; background: none; }
	.submenucontainer{ width: 100%; }
	.submenuklikoverlay{ position: relative; float: left; width: 100%; top: auto; left: auto; right: auto;  margin: 0; }
	.submenu{ margin-top: 0; width: 100%; padding: 0; border: 0; margin: 0; top: auto;} 
	.submenu ul, .submenu li{ position: relative; float: left; margin: 0; padding: 0; width: 100%;  border: 0!important } 
	.submenu a{ font-size: 10px!important; opacity: 1; background: #23327B!important; padding: 10px 0px 10px 0px!important; margin-left: 0px; width: 100%!important; text-align: center; font-weight: 600;  color: #fff!important;  border: 0!important; }
	.submenu a:hover{  color: #fff !important; background: #1C2864!important;}
	
	.mobilesubmenuitem { display: block; }
	
	.mobilecta{
		display: block;
		background: none;
		width: auto;
		position: absolute;
		top: 10px;
		right: 50%;
		margin-right: -200px;
		color: #23327B;
		font-size: 13px;
	}
	
	#top .centered { width: 100%;  }
	#top { background: none;  position: fixed; min-height: 70px; top: auto; height: auto; box-shadow: none; box-shadow: 0 2px 2px rgba(0,0,0,0.1);  }
	
	#top.top1on #menu { margin-top: 99px!important; }
	#top.top1off #menu { margin-top: 74px!important; }
	#top.top1off #menu .menuitem, #top.top1on #menu .menuitem { margin-top: 0!important; }
	#top.top1off .menumetsubmenuli { padding: 0!important; }
	#top.top1off .submenucontainer:hover .submenu{ margin-top: 0!important; }
	
	#top.vervolgpagina #menu .menuitem{ color: #fff; }
	#top.vervolgpagina #menu a.active{ color: #fff!important; }

	#top .logo, #top.top1off .logo, #top.vervolgpagina .logo { top: 12px!important; height: 50px; left: 50%; margin-left: -350px; }
	#top.vervolgpagina #menu .menuitem { margin-top: 0!important; }
	
	
	#top.vervolgpagina, #top {  background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,0.05); }
	
	#header { height: 550px; background: url(../img/visual-header-1-mobiel.jpg) no-repeat  top center; margin-top: 0px;   background-size:  auto 100%; }
	#header div.container { width: 420px; top: 140px; }
	#header .container h1 { font-size: 34px; }
	#header .container span {  }
	#header:before, #header:after { display:none; }
	#header .container span.tekst { padding-right: 0;     font-size: 23px; }
	
	#intro  ul { font-size: 15px;  position: relative; float: left; width: 100%; padding: 0; }
	#intro  ul li{  position: relative; float: left; width: 100%;  box-sizing: border-box; margin: 0;     padding: 10px 30px 10px 50px;}
	
	#intro { padding: 30px 0; background: #fff; }
	#intro:before { content:''; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0; background:#23327B; }
	#intro .rechts:before { display: none; }
	#intro .rechts  { padding: 40px 55px; margin-top: -120px; font-size: 15px; line-height: 180%; }
	#intro .rechts h2 { font-size: 40px; }
	#intro .rechts span {		font-size: 15px; line-height: 180%; }
	#intro .links {    width: 40%;    color: #fff;    padding: 40px 90px 20px 0;}
	
	#bedrijfsrecherche {  padding: 290px 0 50px 0; }
	#bedrijfsrecherche div.container { padding-right: 0%; }
	#bedrijfsrecherche div.container:before { content:''; position: absolute; top: -130px; left: -200px; width: 100%; height: 200px; background: url(../img/visual-whitefade.png) no-repeat top center; background-size: 100% 100%; }
	#bedrijfsrecherche h2 { padding-bottom: 30px; }
	#bedrijfsrecherche:before {  background: url(../img/visual-laag-recherche-2020.jpg?v=2) no-repeat  right center; bottom: auto; height: 360px; background-size: auto 100%; }
	#bedrijfsrecherche.animate:before { background: url(../img/visual-laag-recherche-2020.jpg?v=2) no-repeat right center; background-size: auto 100%;  }

	#privedetective { padding: 290px 0 50px 0; }
	#privedetective div.container { padding-left: 0%; }
	#privedetective h2 { padding-bottom: 30px; }
	#privedetective div.container:before { content:''; position: absolute; top: -130px; left: -200px; width: 100%; height: 200px; background: url(../img/visual-whitefade.png) no-repeat top center; background-size: 100% 100%; }
	#privedetective:before { bottom: auto; height: 360px; left: 0; width: 100%; background: url(../img/visual-laag-privedetective-2020.jpg) no-repeat right -260px center;background-size: auto 200%; }
	
	
	#beveiliging { padding: 290px 0 50px 0; }
	#beveiliging div.container { padding-right: 0%; }
	#beveiliging div.container:before { content:''; position: absolute; top: -130px; left: -200px; width: 100%; height: 200px; background: url(../img/visual-whitefade.png) no-repeat top center; background-size: 100% 100%; }
	#beveiliging h2 { padding-bottom: 30px; }
	#beveiliging:before {  background: url(../img/visual-laag-beveiliging.jpg?v=20200) no-repeat  right center; bottom: auto; height: 360px; background-size: auto 100%; }
	#beveiliging.animate:before { background: url(../img/visual-laag-beveiliging.jpg?v=20200) no-repeat right center; background-size: auto 100%;  }
	
	#actueel { padding: 30px 0 80px 0; }
	#actueel .links, #actueel .rechts { width: 100%; margin: 0; padding: 0; }
	#actueel .rechts { margin-top: 50px; }
	#actueel .blogartikel .links { width: 130px; }
	#actueel .blogartikel .rechts { padding-left: 160px; width: 100%; margin-top: 5px; }
	
	#meerinfo { padding: 15px 0 70px 0; }
	#meerinfo .links, #meerinfo .rechts { width: 100%; margin: 0; padding: 0; }
	#meerinfo .rechts { margin-top: 80px; }
	#meerinfo .bg { height: 440px; width: 100%; bottom: auto; left: 0; }
	#meerinfo .bg:before { border-right: 0; }
	
	
	#contact .links, #contact .rechts { width: 100%; margin: 0; padding: 0; }
	#contact .rechts { margin-top: 50px; }
	
	#map_container { height: 250px; }
	
	#locaties .links, #locaties .rechts { width: 100%; margin: 0; padding: 0; }
	#locaties .rechts { margin-top: 30px; }
	
	#sitemap {     padding: 30px 0 40px 0; }
	#sitemap .sitemap .kolom { width: 50%; padding-top: 30px; }
	#sitemap .sitemap { padding-bottom: 30px; }
	#sitemap .certificaten {     padding-top: 15px; }
	#sitemap .certificaat { width: 60%; margin-top: 30px; line-height: 150%;  }
	#sitemap .certificaat:nth-child(2) { width: 60%; }
}


@media screen and (min-width: 1px) and (max-width: 739px) {
	
	body{ font-size: 13px; }
	h2{ font-size: 30px; padding-bottom: 15px; }
	
	#quicknaarboven { display: block; }
	
	.centered{	width: 300px;	}
	.mobielzichtbaar { display: block; }

	
	#talenselect{ float: none; position: absolute; right: 50%; margin: 10px -100px 0 0; }
	#menu { right: 0;  }
	#menu .home:after { display: none;  }
	
	
	#menubtn-pop { display: block; width: 40px; height: 35px; padding: 0; margin-right: -150px; top: 15px; background: #ddd url(../img/svg-menupopup.svg) no-repeat center center;  background-size: 15px auto;}
	#menubtn-pop span{ display: none; }


	#menu{ position: relative; float: left; top: auto; width: 100%; margin-top: 70px; display: none; z-index: 1;   background: #0052A0;  }
	#menu li{ width: 100%; padding: 0; background: none;} 
	#menu .contact .menuitem, #menu a, #menu .menumetsubmenu, #menu .home .menuitem, #menu .home .menuitem:hover{ border-radius: 0; padding: 10px 0px 10px 0px; margin: 0px!important; width: 100%; text-align: center; font-weight: 600; background: #0052A0 ; color: #fff;	}

	#menu .home .menuitem { background: none; margin: 0; height: auto; }
	#menu .home span { display: block; text-align: center; }
	#menu .home:hover { margin: 0; }
	#menu #menucontact, #menu .zoeken{ display:none; }
	#menu .contact .menuitem:hover, #menu a:hover, #menu .home .menuitem:hover{  background: #004284; border: 0;  }
	#menu .contact .menuitem:after { display: none; }
	#menu a{ border: 0!important; }
	#menu a.active{  }
	#menu a.active, #menu .home .menuitem.active{ border-radius: 0; background: #004284 ; color: #fff;  }
	#menu a.active:hover{ border-radius: 0; background: #004284; color: #fff; text-decoration: underline; }
	#menu .menumetsubmenuli:after { display:none; }
	
	#menu .menumetsubmenuli { padding: 0; background: none; }
	.submenucontainer{ width: 100%; }
	.submenuklikoverlay{ position: relative; float: left; width: 100%; top: auto; left: auto; right: auto;  margin: 0; }
	.submenu{ margin-top: 0; width: 100%; padding: 0; border: 0; margin: 0; top: auto;} 
	.submenu ul, .submenu li{ position: relative; float: left; margin: 0; padding: 0; width: 100%;  border: 0!important } 
	.submenu a{ font-size: 10px!important; opacity: 1; background: #23327B!important; padding: 10px 0px 10px 0px!important; margin-left: 0px; width: 100%!important; text-align: center; font-weight: 600;  color: #fff!important;  border: 0!important; }
	.submenu a:hover{  color: #fff !important; background: #1C2864!important;}
	
	.mobilesubmenuitem { display: block; }
	
	#top .centered { width: 100%;  }
	#top.vervolgpagina, #top {  background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,0.05); }
	#top {  position: fixed;  min-height: 120px;  height: auto; border-top: 5px solid #0052A0;  }

	.mobilecta { display: block;  }
	
	#top.top1on #menu { margin-top: 99px!important; }
	#top.top1off #menu { margin-top: 74px!important; }
	#top.top1off #menu .menuitem, #top.top1on #menu .menuitem { margin-top: 0!important; }
	#top.top1off .menumetsubmenuli { padding: 0!important; }
	#top.top1off .submenucontainer:hover .submenu{ margin-top: 0!important; }
	
	#top.vervolgpagina #menu .menuitem{ color: #fff; }
	#top.vervolgpagina #menu a.active{ color: #fff!important; }
	
	#top .logo, #top.top1off .logo, #top.vervolgpagina .logo  { top: 12px!important; width: 260px; left: 50%; margin-left: -150px; height: 47px;   background-size: auto 100%; }
	#top.vervolgpagina #menu .menuitem { margin-top: 0!important; }
	
	#header { height: 310px; background: url(../img/visual-header-1-mobiel.jpg) no-repeat  top center; margin-top: 50px;   background-size:  auto 100%; }
	#header div.container { width: 200px; top: 120px; }
	#header .container h1 { font-size: 26px; padding-bottom: 20px; }
	#header .container h1.en.uit {   font-size: 21px; padding-bottom: 20px; }
	#header .container span.tekst { display: none;  font-size: 17px; padding-right: 0; }
	#header .container .headerbtn { display: none; }
	#header:before, #header:after { display:none; }
	
	#header .container h1:before { background-size: 80% auto; top: -5px; }
	#header .container h1 span:last-of-type:after { bottom: -7px; background-size: 80% auto;}
	
	#intro .links, #intro .rechts { width: 100%; margin: 0; padding: 0; }
	#intro .rechts { margin-top: 80px; }
	
	#intro  ul { font-size: 15px;  position: relative; float: left; width: 100%; padding: 0; }
	#intro  ul li{ position: relative; float: left; width: 100%; box-sizing: border-box; margin: 0;     padding: 10px 30px 10px 50px;}
	
	#intro { padding: 30px 0; background: #fff; }
	#intro:before { content:''; position: absolute; left: 0px; top: 0px; right: 0px; height: 430px; background:#23327B; }
	#intro .rechts:before { display: none; }
	#intro .introtekst { font-size: 22px; line-height: 140%; font-family: 'PT Serif', serif; text-align: center; padding-bottom: 40px; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.2) }
	#intro .introtekst .btn{   margin: 25px 0 0 65px; background: #fff; color: #23327B; font-family: 'Roboto'; text-transform: uppercase; font-size: 14px; }
	#intro .introtekst .btn:after { opacity: 0.3;  border: 1px solid #fff; background: none; top: -5px; bottom: -5px; left: -5px; right: -5px; }
	#intro .rechts .btn { width: 100%; box-sizing: border-box; text-align: center; }
	#intro .rechts h2 { font-size: 38px; }
	
	
	#bedrijfsrecherche {  padding: 260px 0 50px 0; }
	#bedrijfsrecherche div.container { padding-right: 0%; }
	#bedrijfsrecherche h2 { padding-bottom: 30px; }
	#bedrijfsrecherche:before {  background: url("../img/visual-laag-recherche-2020.jpg?v=2") no-repeat  right center; bottom: auto; height: 220px; background-size: auto 100%; }
	#bedrijfsrecherche.animate:before { background: url(../img/visual-laag-recherche-2020.jpg?v=2) no-repeat right center; background-size: auto 100%;  }
	#bedrijfsrecherche .btn { width: 100%; box-sizing: border-box; }
	#bedrijfsrecherche .btn.mobielzichtbaar.active { display: none; }
	#bedrijfsrecherche .btn.mobielzichtbaar {opacity: 1; }
	#bedrijfsrecherche .mogelijkheden { display: none; display: block; }
	#bedrijfsrecherche .mogelijkheden.active { display: block; }
	
	#privedetective { padding: 260px 0 50px 0; }
	#privedetective div.container { padding-left: 0%; }
	#privedetective h2 { padding-bottom: 30px; }
	#privedetective:before { bottom: auto; height: 220px; left: 0; width: 100%; background: url(../img/visual-laag-privedetective-2020.jpg) no-repeat right -60px center;background-size: auto 150%; }
	#privedetective .btn { width: 100%; box-sizing: border-box;  }
	#privedetective .btn.mobielzichtbaar.active { display: none; }
	#privedetective .btn.mobielzichtbaar {opacity: 1; }
	#privedetective .mogelijkheden { display: none; display: block; }
	#privedetective .mogelijkheden.active { display: block; }
	
	
	#beveiliging {  padding: 260px 0 50px 0; }
	#beveiliging div.container { padding-right: 0%; }
	#beveiliging h2 { padding-bottom: 30px; }
	#beveiliging:before {  background: url(../img/visual-laag-beveiliging.jpg?v=20200) no-repeat  right center; bottom: auto; height: 220px; background-size: auto 100%; }
	#beveiliging.animate:before { background: url(../img/visual-laag-beveiliging.jpg?v=20200) no-repeat right center; background-size: auto 100%;  }
	#beveiliging .btn { width: 100%; box-sizing: border-box; }
	#beveiliging .btn.mobielzichtbaar.active { display: none; }
	#beveiliging .btn.mobielzichtbaar {opacity: 1; }
	#beveiliging .mogelijkheden { display: none; }
	#beveiliging .mogelijkheden.active { display: block; }
	
	
	#actueel { padding: 30px 0 80px 0; }
	#actueel .links, #actueel .rechts { width: 100%; margin: 0; padding: 0; }
	#actueel .links a { width: 100%; background-position: 95% center; }
	#actueel .links a:hover { background-position: 98% center; }
	#actueel .rechts { margin-top: 50px; }
	#actueel .blogartikel .links { width: 70px!important; height: 70px!important;  }
	#actueel .blogartikel .links img{ width: 70px!important; height: 70px!important;  }
	#actueel .blogartikel .rechts { padding-left: 95px!important; width: 100%; margin-top: 0px; }

	
	#meerinfo { padding: 15px 0 70px 0; }
	#meerinfo .links, #meerinfo .rechts { width: 100%; margin: 0; padding: 0; }
	#meerinfo .rechts { margin-top: 80px; }
	#meerinfo .bg { height: 400px; width: 100%; bottom: auto;  left: 0;  }
	#meerinfo .bg:before { border-right: 0; }
	#meerinfo .rechts .quote .quotetekst { font-size: 16px; padding-bottom: 20px; }
	#meerinfo .rechts .quote .quotetitel span { border: 0;  }
	#meerinfo .rechts .quote .quotetitel { padding: 0 0 10px 0; }
	
	#contact { padding: 30px 0 30px 0; }
	#contact .links, #contact .rechts { width: 100%; margin: 0; padding: 0; }
	#contact .rechts { margin-top: 50px; }
	#contact .rechts .input { width: 98%; margin: 5px 0 0 0; }
	#contact .rechts .input.full { width: 98%; margin: 5px 0 0 0; }
	#contact .tel { width: 100%; box-sizing: border-box;  }
	
	#map_container { height: 250px; }
	
	#locaties { padding: 30px 0 30px 0; }
	#locaties .links, #locaties .rechts { width: 100%; margin: 0; padding: 0; }
	#locaties .rechts { margin-top: 30px; }
	#locaties .locatie { width: 100%; }
	
	#dorrbalk { display: none; }
	
	#sitemap {     padding: 20px 0 40px 0; }
	#sitemap .sitemap .kolom { width: 100%; padding-top: 30px; padding-right: 0; }
	#sitemap .sitemap { padding-bottom: 30px; }
	#sitemap .certificaten {     padding-top: 15px; }
	#sitemap .certificaat { width: 100%; margin-top: 30px; line-height: 150%;  padding-right: 0; }
	#sitemap .certificaat:nth-child(2) { width: 100%; padding-right: 0; }
	
	#afsluiting { padding: 30px 0 80px 0; }
}

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

}