@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn,  img, ins, kbd, q, s, samp,
small, strike,  sub, sup, tt, var,u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
	width: 100%;
	height: 100%;
	min-height: 100%;	
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight: 300;
	background: #F6F6F6;
	color: #000;
	line-height: 185%;
	-webkit-text-size-adjust: none;
}

div{
	box-sizing: border-box;
}

a{	color: #000; 
	text-decoration:none; 
	outline:none; 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}
a:hover{ text-decoration:underline; }	
img a{ 	border: 0px;outline:none; }

h1, h2, h3{	color: #000; line-height: 120%; font-family: 'PT Serif', serif;  }
h1 span, h2 span, h3 span{ position: relative; float: left;	border-bottom: 3px solid #DDDDDD; padding: 0 5px 20px 0;}


/* ############################################################################### */

h1, h2, h3, .container, .content{
	position: relative;
	float: left;
	width: 100%;
}

h2{ font-size: 52px; padding-bottom: 25px; }
h3{ font-weight: 700; }

#bg{}

.centered{
	position: relative;
	width: 1260px;
	margin: 0 auto 0 auto;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

.transition{
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

#gebruikerstest input{ display: none; }
.mobielzichtbaar { display: none; }

.links, .rechts{position: relative; float: left; width: 50%; }
.links { padding-right: 50px; }
.rechts { padding-left: 50px; }

/* BUTTONS ############################################################################################################################# */


.btn{
	position: relative;
	float: left;
	padding: 10px 20px;
	background: #364385;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

.btn:after{
	content:'';
	position: absolute;
	top: 1px;
	right: 1px;
	left: 1px;
	bottom: 1px;
	border: 4px solid #fff;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}


.btn.arrow{
	padding-right: 50px;
	background: #0052A0 url(../img/icon-pijl-beneden-wit.svg) no-repeat 90% center;
	background-size: 15px auto;
}

.btn.trans{	background: none; color: #213279; margin-left: 10px; }

.btn:hover{ 	background: #67C7ED; text-decoration:none; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5); }
.btn:hover:after{  }
.btn.trans:hover { 	background: none; color: #000; box-shadow: none; text-decoration: underline; }


.btn.trans.pijl{	background: url(../img/svg-pijl-blauw-beneden.svg) no-repeat 97% center; padding-right: 35px; background-size: 12px auto; color: #213279; margin-left: 10px; }


.mobadviesenofferte{
	display: none;
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	color: #23327B;
	font-weight: bold;
	background: #fff;
	border-top: 4px solid #fff;
	border-bottom: 4px solid #23327B;
	
	text-transform: uppercase;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.mobadviesenofferte:after{
	content:'';
	position: absolute;
	top: 0px;
	right: 4px;
	left: 4px;
	bottom: 4px;
	border: 1px solid #ddd;
}

.mobadviesenofferte:hover{
	background: #23327B;
	color: #fff;
	text-decoration: none;
	border-top: 4px solid #23327B;
	border-bottom: 4px solid #0052A0;
}
.mobadviesenofferte:hover:after{
	border: 1px solid rgba(255,255,255,0.4);
}

/* ############################################################################################################################# */


#talenselect{
	position: relative;
	float: right;
	width: 30px;
	height: 45px;
	margin-top: 23px;
	cursor: pointer;
}


#talenselect:before{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 45px;
	background: url(../img/talen/nl.svg) no-repeat  center 15px;
	background-size: 15px 10px;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

#talenselect.en:before{ background: url(../img/talen/gb.svg) no-repeat  center 15px; background-size: 15px 10px; }

#talenselect:after{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 45px;
	background: url(../img/svg-driehoek-beneden.svg) no-repeat  center 30px;
	background-size: 7px auto;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

.talen{
	position: relative;
	top: 43px;
	left: 0px;
	width: 30px;
	height: 52px;
	display: none;
	border: 1px solid #ddd;
	background: #fff;
}

.talen .taal {
	position: relative;
	float: left;
	width: 100%;

	height: 25px;
	background:blue;
}

.talen .taal.nl{ background: url(../img/talen/nl.svg) no-repeat  center center;	background-size: 15px 10px; border-bottom: 1px solid #ddd; opacity: 0.3; filter: grayscale(); }
.talen .taal.en{ background: url(../img/talen/gb.svg) no-repeat  center center;	background-size: 15px 10px; opacity: 0.3; filter: grayscale(); }

.talen .taal:hover{ background-color: #eee; }
#talenselect:hover .talen{ display: block; }
#talenselect:hover:after{ background-position: center 34px; }
#talenselect.nl .talen .taal.nl{ opacity: 1; filter: none; }
#talenselect.en .talen .taal.en{ opacity: 1;  filter: none; }



#menubtn-pop{
	position: absolute; 
	top: 15px; 
	right: 50%; 
	margin-right: -350px;
	padding: 0 20px 0 50px; 
	height: 40px;
	line-height: 40px;
	color: #22327A; 
	font-weight: 600; 
	background: url(../img/svg-menupopup.svg) no-repeat 15px center; 
	background-size: 15px auto;
	border-radius: 5px; 
	cursor: pointer;
	display: none;
	text-transform: uppercase;
}

#menubtn-pop:hover, #menubtn-pop.active{ background-color: #ddd;	color: #333; }

#menu{
	position: absolute;
	top: 5px;
	right: 42px;
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 1;
}

#menu li{ 
	position: relative; 
	float: left; 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

#menu li:first-child{ }
#menu .first .menuitem {}
#menu .menuitem{}



#menu a{
	position: relative;
	float: left;
	padding: 28px 7px 28px 7px;
	color: #000;
	font-size: 13px;
	font-weight: 500;
	text-transform:uppercase;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
	border-bottom: 3px solid transparent;
}

#menu .home {  }
#menu .home .menuitem{ margin-top: 22px; height: 37px; width: 32px;  padding: 0; border: 0; margin-right: 15px; }
#menu .home span{ display: none; }
#menu .home .menuitem, #menu .home .menuitem:hover{ background: url(../img/svg-home.svg) no-repeat center center; background-size: 14px; }
#menu .home:after{ content:''; position: absolute; top: 33px; right: 7px; bottom: 8px; width: 1px; background:#ddd; }
#menu .home:hover .menuitem{  opacity: 0.8;  }
#menu .home:hover:after {  }


#menu .contact .menuitem { 
	background:#23327B url(../img/svg-telefoon-wit.svg) no-repeat 16px center; 
	background-size:  9px auto; 
	border: 0;
	color: #fff; 
	margin-left: 20px; 
	margin-top: 20px;
	padding: 0 14px 0 35px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
}
#menu .contact:hover .menuitem { background-color:#3147AE; text-decoration:none;  }

#menu .contact .menuitem:after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    left: -5px;
    bottom: -5px;
    border: 1px solid #23327B;
    transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
}



#menu a.active:hover{ color: #000; }
#menu a:hover{ text-decoration: underline;   }
#menu li:hover{ z-index: 1;   }
#menu a.active{ border-bottom: 3px solid #23327B; color: #23327B; text-decoration: none; }
#menu .menumetsubmenu.active{ color: #000;	text-decoration: underline; }

#menu .menumetsubmenuli{}
#menu .menumetsubmenuli a{  }
#menu .menumetsubmenuli .submenu a{ cursor: pointer!important; }

#menu .menumetsubmenuli:before { 
	content: '';
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 5px;
	opacity: 0.3;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

#menu .menumetsubmenuli:hover:before { bottom: -5px; opacity: 1; }

#menu #menucontact #split{
	position: relative;
	float: left;
	height: 20px;
	width: 1px;
	background: #ddd;
	margin:  30px 25px 0 15px;
	border-radius: 0;
}


#menu #menucontact a.telefoon:hover { text-decoration: none; }

.submenucontainer{ position: relative; float: left; }
.submenucontainer:hover .submenu{ display: block; }

.submenuklikoverlay{
	position: absolute;
	top: 50px;
	left: 50%;
	margin-left: -120px;
}

.submenu{
	position: relative;
	float: left;
	margin-top: 25px;
	width: 240px;
	border-radius: 5px;
	display: none;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
	text-align: center;
	box-sizing: border-box;
}


.submenu a{
	position: relative!important;
	float: left!important;
	width: 100%!important;
	color: #000!important;
	margin: 0!important;
	font-size: 11px!important;
	padding: 10px 15px 10px 15px!important;
	line-height: 140%!important;
	box-sizing: border-box;
	font-weight: 600!important;
	text-shadow: none!important;
	opacity: 0.8;
}

.submenu li{ border-bottom: 1px solid #eee; position: relative; float: left; width: 100%; }
.submenu li:last-child{ border-bottom: 1px solid #fff; }
.submenu li:hover { background: #eee; opacity: 1; }
.submenu a:hover{ }

.mobilecta{ display: none; text-align: center; text-transform: uppercase; color: #fff; font-weight: bold; background: #23327B; padding: 10px 0;}
.mobilesubmenuitem { display: none; }

/* TOPCONTAINER ############################################################################################################################# */


#top{ position: fixed; top: 0px; left: 0px; height: 90px; z-index: 100; background: rgba(255,255,255, 0.55); border-bottom: 1px solid rgba(255,255,255,0.7); }

#top .logo{
	position: absolute;
	top: 42px;
	left: 0px;
	width: 300px;
	height: 68px;
	background: url(../img/logo-dorr-bedrijfsrecherche.svg) no-repeat left center;
	background-size: auto 80%;
}


/* TOP VERVOLG + SCROLL ############################################################################################################################# */

#top.top1off{  background:#fff!important; box-shadow: 0 2px 2px rgba(0,0,0,0.1); }
#top.top1on #menu{	}
#top.top1off #menu{	}
#top.top1off .logo{ top: 15px; height: 60px;	}
#top.top1on #menu .menuitem {	 }
#top.top1off #menu .menuitem {	 }
#top.top1off #menu .menuitem:hover {  ;}
#top.top1off #menu .menuitem.active {  }
#top.top1off #menu .menuitem.active:hover { }
#top.top1off .submenucontainer:hover .submenu{  }
#top.top1off  .menumetsubmenuli{}
#top.top1off #menubtn-pop{	top: 14px;}
																									
#top.vervolgpagina .logo{ top: 15px; height: 60px;  }
#top.vervolgpagina { background: rgba(255,255,255, 0.8); }
#top.vervolgpagina #menu .menuitem{}
#top.vervolgpagina #menu a:hover{}
#top.vervolgpagina #menu a.active{	}
#top.vervolgpagina #menu a.active:hover{}
#top.vervolgpagina a.telefoon{ }
#top.vervolgpagina #menu .menuitem:hover{  }

#top.vervolgpagina.top1off #menu, #top.vervolgpagina.top1on #menu{  }
#top.vervolgpagina.top1off .logo{}


/* HEADER ############################################################################################################################# */

#header{ height: 800px;  background: url(../img/visual-header-1.jpg?v=3) no-repeat top right; background-size: cover; }

#header div.container{	position: absolute;	top: 220px;	left:0px;	width: 620px;}
#header .container h1{ font-size: 52px; padding: 0 0 25px 0; text-transform: uppercase; }
#header .container h1 span{ padding: 0; margin: 0; border: 0; }
#header .container h1:before { content:''; opacity: 0.2; position: absolute; top: -10px; left: -23px; width: 20px; height: 15px; background: url(../img/svg-quoteboven.svg)no-repeat;}
#header .container h1 span:last-of-type:after { content:''; opacity: 0.2; position: absolute; bottom: 5px; right:  -23px; width: 20px; height: 15px; background: url(../img/svg-quoteonder.svg)no-repeat;}
#header .container span.tekst{ font-size: 25px; line-height: 140%; font-family: 'PT Serif', serif; padding-bottom: 25px; box-sizing: border-box; padding-right: 180px; }

#header .headerbtn { position: relative; float: left; border: 1px solid #23327B; padding: 4px; font-weight: 500; } 
#header .headerbtn span{ position: relative; float: left; height: 40px; line-height: 40px; padding: 0 20px; background: #23327B; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 500; } 
#header .headerbtn:hover span{ 	background: #67C7ED; text-decoration:none;  }
#header .headerbtn:hover {  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3); border-color: #67C7ED; }



#header:before { content:''; position: absolute; bottom: 0px; left: 0px; width: 100%; top: 0px;  background: url(../img/visual-header-fade.png) repeat-x center bottom; }
#header:after { content:''; position: absolute; bottom: 0px; left: 0px; width: 50%; height: 120px; opacity: 0.2; background: #fff; }

#header{ -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;}

@keyframes fadein { 		from { opacity: 0; }    to   { opacity: 1; }}
@-moz-keyframes fadein { 	from { opacity: 0; }    to   { opacity: 1; }}
@-webkit-keyframes fadein { from { opacity: 0; }    to   { opacity: 1; }}
@-ms-keyframes fadein { 	from { opacity: 0; }    to   { opacity: 1; }}
@-o-keyframes fadein { 		from { opacity: 0; }    to   { opacity: 1; }}


#header div.container.animate{ -webkit-animation: slidein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: slidein 1s; /* Firefox < 16 */
        -ms-animation: slidein 1s; /* Internet Explorer */
         -o-animation: slidein 1s; /* Opera < 12.1 */
            animation: slidein 1s;
}

@keyframes slidein { 			from { opacity: 0; left: -30px; }    to   	{ opacity: 1; left: 0; }}
@-moz-keyframes slidein { 		from { opacity: 0; left: -30px; }    to   	{ opacity: 1; left: 0; }}
@-webkit-keyframes slidein { 	from { opacity: 0; left: -30px; }    to   	{ opacity: 1; left: 0; }}
@-ms-keyframes slidein { 		from { opacity: 0; left: -30px; }    to   	{ opacity: 1; left: 0; }}
@-o-keyframes slidein { 		from { opacity: 0; left: -30px; }    to   	{ opacity: 1; left: 0; }}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/* INTRO ############################################################################################################################# */

#intro { background:#23327B url(../img/svg-watermerk-blauw.svg) no-repeat; background-position: right 30px bottom 50px; background-size: 250px auto;  }
#intro .links { width: 40%; color: #fff; padding: 70px 110px 20px 0; }

#intro .rechts { width: 60%; background: #fff; padding: 55px 70px; margin-top: -190px; }
#intro .rechts h2{padding-bottom: 15px; }
#intro .rechts:before { content:''; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; border: 1px solid rgba(255,255,255,0.2); }
#intro .rechts span { font-size: 20px;  font-family: 'PT Serif', serif; border-bottom: 3px solid #DDDDDD; padding-bottom: 20px; margin-bottom: 20px;  }

#intro ul { font-size: 20px;  font-family: 'PT Serif', serif; color: #fff; padding: 0 0 50px; box-sizing: border-box; position: relative; float: left; width: 100%;  }
#intro ul li{ box-sizing: border-box; padding: 10px 10px 10px 50px; background: url(../img/svg-vink-wit.svg) no-repeat left 17px; background-size: 20px auto;  }
#intro ul li{ margin-left: -10px; opacity: 0;  transition:all .3s linear; -o-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear; }
#intro ul li.animate{ margin-left: 0;  opacity: 1; }

/* RECHERCHE ############################################################################################################################# */

#bedrijfsrecherche { background: #F6F6F6; padding: 90px 0 90px 0; }
#bedrijfsrecherche div.container{ padding-right: 47%;  }
#bedrijfsrecherche div.container span.container{ font-size: 20px; font-family: 'PT Serif', serif; padding-bottom: 15px;  }
#bedrijfsrecherche:before{  content:''; position: absolute; bottom: 0px; top: 0px; left: -30px; width: 100%; background:url("../img/visual-laag-recherche-2020.jpg") no-repeat center center; background-size: auto 100%;}
#bedrijfsrecherche:before{  opacity: 0; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }

#bedrijfsrecherche .btn { width: 43%; margin: 10px 10px 0 0; text-align: center; padding: 10px 0; }

#bedrijfsrecherche .btn { opacity: 0;  transition:all .3s linear, background .2s linear, box-shadow .2s linear; -o-transition:all .3s linear, background .2s linear, box-shadow .2s linear; -moz-transition:all .3s linear, background .2s linear, box-shadow .2s linear; -webkit-transition:all .3s linear, background .2s linear, box-shadow .2s linear; }

#bedrijfsrecherche .btn { opacity: 1; } /* animate */
#bedrijfsrecherche:before{ opacity: 1; left: 0px;  }/* animate */

/* PRIVEDETECTIVE ############################################################################################################################# */

#privedetective { padding: 90px 0 90px 0;  }
#privedetective div.container{ padding-left: 50%;  }
#privedetective div.container span.container{ font-size: 20px; font-family: 'PT Serif', serif; padding-bottom: 15px;  }
#privedetective:before{ opacity: 0; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; content:''; position: absolute; bottom: 0px; top: 0px; left: -50px; width: 50%; background:url(../img/visual-laag-privedetective-2020.jpg?v=2) no-repeat right center; background-size: auto 100%;}

#privedetective .btn { width: 40%; margin: 10px 10px 0 0; text-align: center; }

#privedetective .btn { opacity: 0;  transition:all .3s linear, background .2s linear, box-shadow .2s linear; -o-transition:all .3s linear, background .2s linear, box-shadow .2s linear; -moz-transition:all .3s linear, background .2s linear, box-shadow .2s linear; -webkit-transition:all .3s linear, background .2s linear, box-shadow .2s linear; }

#privedetective .btn { opacity: 1; } /* animate */
#privedetective:before{ opacity: 1; left: 0; } /* animate */




/* BEVEILIGING ############################################################################################################################# */

#beveiliging { background: #F6F6F6; padding: 90px 0 90px 0; }
#beveiliging div.container{ padding-right: 47%;  }
#beveiliging div.container span.container{ font-size: 20px; font-family: 'PT Serif', serif; padding-bottom: 15px;  }
#beveiliging:before{  content:''; position: absolute; bottom: 0px; top: 0px; left: -30px; width: 100%; background:url(../img/visual-laag-beveiliging.jpg?v=2022) no-repeat right -400px top 0; background-size: auto 100%;}
#beveiliging:before{  opacity: 0; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }

#beveiliging .btn { width: 43%; margin: 10px 10px 0 0; text-align: center; padding: 10px 0; }

#beveiliging .btn { opacity: 0;  transition:all .3s linear, background .2s linear, box-shadow .2s linear; -o-transition:all .3s linear, background .2s linear, box-shadow .2s linear; -moz-transition:all .3s linear, background .2s linear, box-shadow .2s linear; -webkit-transition:all .3s linear, background .2s linear, box-shadow .2s linear; }

#beveiliging .btn { opacity: 1; } /* animate */
#beveiliging:before{ opacity: 1; left: 0;  }/* animate */

/* ACTUEEL ############################################################################################################################# */

#actueel{ padding: 60px 0 60px 0;  background: #fff; border-top: 1px solid #eee; }
#actueel h3{ padding: 30px 0 30px 0; font-size: 20px; font-weight: normal; }
#actueel .links a{ position: relative; float: left; padding: 5px 0; font-size: 14px; box-sizing: border-box; text-transform: uppercase; width:50%;  font-weight: bold; color: #1F3279; background: url(../img/svg-pijl-blauw-rechts.svg) no-repeat 85% center; background-size: 7px auto; }
#actueel .links a:hover{  padding: 5px 0 5px 5px; background-position: 87% center; box-shadow: none; }
#actueel .links span.blogintro { font-family: 'PT Serif', serif; font-size: 20px; padding-bottom: 20px;  }

#actueel .rechts { padding: 0; }

#actueel .rechts .blogartikel { margin: 20px 0; min-height: 120px; }
#actueel .rechts .blogartikel .links{ position: absolute; top: 0px; left: 0px; width: 130px; height: 130px; background:#ddd; padding: 0; }
#actueel .rechts .blogartikel .links img{  width: 130px; height: 130px;    object-fit: cover;  max-height: 130px; }
#actueel .rechts .blogartikel .rechts{ padding-left:160px; width: 100%; box-sizing: border-box; }
#actueel .rechts .blogartikel .rechts .blogtitel{ position: relative; float: left; font-family: 'PT Serif', serif; font-size: 20px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
#actueel .rechts .blogartikel .rechts .blogcategorie{ position: relative; float: left; width: 100%; font-family: 'PT Serif', serif; font-size: 14px;  }
#actueel .rechts .blogartikel .rechts .blogtekst{ position: relative; float: left; width: 100%; font-size: 14px;   }
#actueel .rechts .blogartikel .rechts .blogleesverder{ font-weight: bold; color: #23327B; }
#actueel .rechts .blogartikel .rechts .blogleesverder:hover{ text-decoration: underline; }

#actueel .rechts .blogartikel:hover .rechts .blogtitel {  border-bottom: 1px solid #364385; }
#actueel .rechts .blogoverzicht {  position: relative; float: left; color: #203279; font-size: 14px; text-transform: uppercase; font-weight: bold; margin-top: 20px; padding: 8px 30px 8px 0; background:url(../img/svg-pijl-blauw-rechts.svg) no-repeat 95% center; background-size: 8px auto; }
#actueel .rechts .blogoverzicht:hover {  text-decoration: none; background:url(../img/svg-pijl-blauw-rechts.svg) no-repeat 98% center; background-size: 8px auto; }

#actueel .blogonderwerp { opacity: 0;  transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear;  }
#actueel .links .btn:after { display: none; }
#actueel .blogonderwerp.animate { opacity: 1; }

/* MEERINFO ############################################################################################################################# */

#meerinfo{padding: 60px 0 120px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; z-index: 1; }
#meerinfo .bg {  position: absolute; top: -40px; left: -50px; bottom: 40px; width: 50%; background:#23327B url(../img/svg-watermerk-blauw.svg) no-repeat; background-position: left 20px bottom 30px; background-size: 250px auto; }
#meerinfo .bg:before { 	content:'';	position: absolute;	top: 1px;	right: 1px;	left: 0px;	bottom: 1px;	border: 4px solid #fff; border-left: 0; }
#meerinfo .bg:after { 	content:'';	position: absolute;	top: 0px;	right: 0px;	left: 0px;	bottom: 0px;	border: 1px solid #B7BCD1; border-left: 0; }

#meerinfo .links{ color: #fff; margin-top: -40px; padding-right: 100px; }
#meerinfo .links h2{ color: #fff; }
#meerinfo .links h2 span{ border-color: #3A498F; }
#meerinfo .links a{ font-size: 18px; color: #fff; border-bottom: 1px solid #3A498F; padding: 10px 0; background: url(../img/svg-pijl-wit-rechts.svg) no-repeat 97% center; background-size: auto 11px; }
#meerinfo .links a:hover{  background-position:  98% center; border-bottom: 1px solid #4F61B7; padding-left: 5px; }

#meerinfo .rechts { padding: 0; }
#meerinfo .rechts .quote{ box-sizing: border-box; padding: 0 10%; }
#meerinfo .rechts .quote .quotetitel { font-family: 'PT Serif', serif; font-weight: bold; font-size: 14px;  padding: 0 0 60px 0;   }
#meerinfo .rechts .quote .quotetitel span{ position: relative;  border-bottom: 3px solid #ddd; padding: 0 5px 30px 0;  }
#meerinfo .rechts .quote .quotetekst { font-family: 'PT Serif', serif; font-size: 28px; padding-bottom: 50px; line-height: 140%; }



#meerinfo .links .meestbekeken{ opacity: 0;  transition:all .5s linear, padding .2s linear, background-position .2s linear; -o-transition:all .5s linear, padding .2s linear, background-position .2s linear; -moz-transition:all .5s linear, padding .2s linear, background-position .2s linear; -webkit-transition:all .5s linear, padding .2s linear, background-position .2s linear; }
#meerinfo .links .meestbekeken.animate { opacity: 1; }

/* CONTACT ############################################################################################################################# */

#contact{ background: #fff; padding: 60px 0 60px 0; z-index: 0; }
#contact h3{ padding-top: 30px; }
#contact .tel{ padding-left: 40px; font-weight: 300; font-size: 30px; margin-top: 20px; width: 400px; color: #213279; background: url(../img/svg-telefoon.svg) no-repeat left center; background-size: auto 26px; }
#contact .tel:hover{ text-decoration: none; }
#contact .links{ padding-right: 100px; }

#contact .rechts form{ margin-top: 30px; }
#contact .rechts .input{ position: relative; float: left; width: 45%; margin: 0 5px 5px 0;  padding: 0 0 0 45px; box-sizing: border-box;    border-radius: 4px; border: 1px solid #eee; box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); }
#contact .rechts .input.full{ width: 91%; }

#contact .rechts .input:after { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 45px; background: #23327B; border-radius: 4px 0 0 4px; }
#contact .rechts .input input, #contact .rechts .input textarea { padding: 17px 25px 15px 15px; box-sizing: border-box; font-size: 12px; font-style: italic; border: 0; background: 0; outline-style: none; }
#contact .rechts .input input {  width: 100%; }

#contact .rechts .input textarea { height: 100px; font-family: 'Roboto'; width: 100%; resize: none; }
#contact .rechts .input textarea::-webkit-scrollbar { width: 6px; }
#contact .rechts .input textarea::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #ccc; -webkit-border-radius: 5px; border-radius: 5px; }
#contact .rechts .input textarea::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: #ccc; }
#contact .rechts .input textarea::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,0,0.4); }
#contact .rechts .input:hover{ box-shadow: inset 4px 4px 6px rgba(0,0,0,0.3); border-color: #ddd; }

#contact .rechts .input.bedrijf:after { background: #23327B url(../img/svg-bedrijf.svg) no-repeat center center; background-size: 18px auto; }
#contact .rechts .input.naam:after { background: #23327B url(../img/svg-gebruiker.svg) no-repeat center center; background-size: 17px auto; }
#contact .rechts .input.email:after { background: #23327B url(../img/svg-email.svg) no-repeat center center; background-size: 18px auto; }
#contact .rechts .input.telefoon:after { background: #23327B url(../img/svg-telefoon-wit.svg) no-repeat center center; background-size: 14px auto; }
#contact .rechts .input.vraag:after { background: #23327B url(../img/svg-vraag.svg) no-repeat center 14px; background-size: 18px auto; }

#contact .rechts input[type=submit] { position: relative; float: left; border: 0; margin: 5px; padding: 15px 20px 15px 55px; cursor: pointer; text-transform: uppercase; font-weight: bold; outline-style: none;  color: #fff; background: #23327B url(../img/svg-verzenden-wit.svg) no-repeat 16px center; background-size: 21px auto; }
#contact .rechts .submit { position: relative; float: left; border: 1px solid #23327B; margin-top: 15px; }    
#contact .rechts .submit:hover{ border-color: #3147AE; }
#contact .rechts .submit:hover input[type=submit]{ background-color: #3147AE; }

#contact .rechts .verplicht { padding-top: 10px; font-size: 12px; color: #666; font-style: italic; }    
   
    
    



/* MAPS ############################################################################################################################# */

#kaart { height:400px; background: #000 url(../images/fancybox_loading.gif) no-repeat center center; }
#mapscrolloverlay{ position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; }




#contactmap_container{
	position: relative;
	float: left;
	width:100%;
	margin-top: 0px;
	z-index: 0;
}

#contactovergang .content{	
	padding: 40px 200px 40px 200px;
	width: 760px;
	text-align: center;
	font-size: 19px;
	line-height: 33px;
	font-weight: 300;
	font-style: italic;
}


#map_container {
	position: relative;
	float: left;
	width:100%;
	height:400px;
	background: #000 url(../images/fancybox_loading.gif) no-repeat center center;
}

#mapscrolloverlay{
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
}


/* LOCATIES ############################################################################################################################# */

#locaties{ background: #fff; padding: 60px 0 60px 0; }
#locaties .rechts { margin-top: -30px; }
#locaties .locatie{ position: relative; float: left; width: 33.3%; padding: 0 15px 15px 0; font-size: 14px; line-height: 150%; }
#locaties .locatie span{ font-family: 'PT Serif', serif; padding-bottom: 3px; font-size: 16px; font-weight: bold; }
#locaties .locatie a{ color: #22327A; text-decoration: underline; }
#locaties .locatie a:hover{ color: #22327A; text-decoration: none; }
#locaties .links{ padding-right: 100px; }
#locaties .links a{ color: #22327A; text-decoration: underline; }
#locaties .links a:hover{ color: #22327A; text-decoration: none; }

/* DORRBALK ############################################################################################################################# */

#dorrbalk{ transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear;height: 200px; background: url(../img/logo-dorr-bedrijfsrecherche.svg) no-repeat center 150px; background-size: auto 60px; border-top: 1px solid #ddd; }
#dorrbalk{ background-position: center center;  }

/* SITEMAP ############################################################################################################################# */

#sitemap{ background: #23327B; font-size: 13px;	color: #fff; padding: 60px 0 60px 0; }
#sitemap .sitemap { padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255, 0.2); }
#sitemap .sitemap .kolom{ position: relative; float: left; width: 25%; padding-right: 50px;  }
#sitemap .sitemap .kolom .container{ box-sizing: border-box;  }
#sitemap .sitemap .kolom .container:hover{ padding-left: 5px; }
#sitemap .sitemap h3{ font-size: 17px; color: #fff; padding-bottom: 10px;  }
#sitemap .sitemap a{ color: rgba(255,255,255,0.7); position: relative; float: left; width: 100%; padding: 5px 0; line-height: 120%; }
#sitemap .sitemap a:hover{  color: #fff; text-decoration: underline; }
#sitemap .certificaten{ padding-top: 50px; }
#sitemap .certificaat{ position: relative; float: left; width: 30%; padding-right: 50px; color: rgba(255,255,255,0.7); }
#sitemap .certificaat:nth-child(2){ background: url(../img/visual-bpob.png) no-repeat left center; padding-left: 90px; width: 40%; }

/* AFSLUITING ############################################################################################################################# */

#afsluiting{ font-size: 11px;	color: #666; text-align: center; padding: 60px 0 60px 0; }
#afsluiting a:hover{ color: #000; text-decoration: underline; }


#naarboven{ height: 220px; background: #0D7CCE; z-index: 2; box-shadow: 2px 2px 7px rgba(0,0,0,0.5); }

#naarboven #btn-naarboven{
	position: absolute;
	top: 70px;
	left: 50%;
	width: 80px;
	padding-top: 65px;
	margin-left: -40px;
	color: #fff;
	font-size: 11px;
	text-align: center;
	text-transform: uppercase;
	background: url(../img/icon-pijl-naarboven-wit.svg) no-repeat top center;
	background-size: 50px 50px;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
	cursor: pointer;
}

#naarboven #btn-naarboven span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	color: #fff;
	background: url(../img/icon-pijl-naarboven-wit-arrow.svg) no-repeat center 18px;
	background-size: 22px 11px;
}

#naarboven #btn-naarboven:hover{  padding-top: 60px;}

#naarboven #btn-naarboven:hover span{
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-name: fadeOutUp; 
    animation-name: fadeOutUp; 
}

@-webkit-keyframes fadeOutUp { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(3px); 
		transform: translateY(3px); 
    } 
    50% { 
        opacity: 0.6; 
        -webkit-transform: translateY(-3px); 
		transform: translateY(-3px); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(-5px); 
		transform: translateY(-5px); 
    } 
} 
@keyframes fadeOutUp { 
    0% { 
        opacity: 1; 
        transform: translateY(3px); 
    } 
    50% { 
        opacity: 0.6; 
        -webkit-transform: translateY(-3px); 
		transform: translateY(-3px);
    } 
    100% { 
        opacity: 0; 
		-webkit-transform: translateY(-5px); 
        transform: translateY(-5px); 
    } 
} 

#quicknaarboven { 
 	position: fixed;
	right: 0px;
	bottom: 50px;
	width: 40px;
	height: 40px;
	background: #0D7CCE url(../img/icon-pijl-naarboven-wit-arrow.svg) no-repeat center center;
	background-size: auto 20%;
	border: 2px solid #fff;
	border-right: 0;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	border-radius: 5px 0 0 5px;
	display: none;
	cursor: pointer;
	z-index: 20000;
}

/* FANCYBOX ############################################################################################################################# */

#fancybox-overlay {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90% !important;
}

#fancybox-wrap {   position: fixed; }