@charset "utf-8";

/* RESET ############################################################################### */

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%; -webkit-text-size-adjust: none; }

/* BASIC ############################################################################### */

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

.fl{ position: relative; float: left;  }
.fr{ position: relative; float: right;  }
.left, .right{ position: relative; float: left; width: 50%;  }

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

div:before, div:after, ::before, ::after{ content:''; }
a, div, li, ul, .fl, .fr, .left, .right, h1, h2, h3, h4, .container, .content{ box-sizing: border-box; }

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

.noselect {  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; }

img{ max-width: 100%; height: auto; }
img a{ 	border: 0px; outline:none; }
a{ outline:none; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;  }

input[type=submit] { -webkit-appearance: none; }

.transition, .trans{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.transition5{ transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }
.transition10{ transition:all 1s linear; -o-transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; }


/* OPMAAK ############################################################################### */

html, body { font-family: 'Roboto', sans-serif; 	font-size:16px;	font-weight: normal; background: #fff;	color: #000;	line-height: 200%; }

body.noscroll { overflow: hidden; }

a{	color: #3c3c3b;  text-decoration:none;  }
a:hover{ text-decoration:underline; }	

h1, h2, h3, h4, h5{	color: #000; line-height: 130%; font-family: 'Roboto Slab', serif; color: #3c3c3b }
h1 span, h2 span, h3 span{  }
h1{ font-size: 58px; padding-bottom: 25px; font-weight: bold; }
h2{ font-size: 28px; padding-bottom: 25px;   }
h3{ font-size: 18px; padding-bottom: 15px;  }
h4{ font-size: 14px; padding-bottom: 25px; }

#voorbeeldweergave {   position: fixed; bottom: 0; left: 0;  right: 0; padding: 0 8px; letter-spacing: 1px; border-top: 1px solid rgba(255,255,255,0.3); text-align: center; z-index: 10; font-weight: 500; text-transform: uppercase; font-size: 10px;   background: #4849FF;    color: #fff;    box-shadow: 0px -9px 20px rgb(72 73 255 / 30%); }


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

.btn{  font-size: 15px; font-weight: 600; color: #fff; text-transform: uppercase; background: #119dd9; padding: 0 35px; height: 50px; line-height: 50px;  position: relative; float: left; }
.btn{ box-shadow: 0px 9px 15px rgb(17 157 217 / 35%);  transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.btn:hover{  text-decoration: none; background: #e34c95;      box-shadow: 0px 9px 20px rgb(198 14 89 / 30%); }

.btn.transparant { background: none; color: #fff; box-shadow: none;  }
.btn.transparant:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; border: 2px solid #fff; opacity: 0.7; }
.btn.transparant:before { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear; }
.btn.transparant:hover { box-shadow: none; color: #3c3c3b!important; background: #fff;  }
.btn.transparant:hover:before { opacity: 1; }

.btn.play { padding-left: 60px;}
.btn.play:after { content:''; position: absolute; top: 13px; left: 18px; width: 24px; height: 24px; background: url("../img/svg-play.svg") no-repeat center center; background-size: auto 100%; }

.btn-leesverder{ color: #fff!important;  box-shadow: 0px 9px 15px rgb(17 157 217 / 35%); margin-bottom: 30px; font-size: 15px; text-decoration: none!important; font-weight: 600;  margin-right: 10px; text-transform: uppercase;  padding: 0 35px; height: 55px; line-height: 55px;  position: relative; float: left; }
.btn-leesverder{  background: #119dd9; box-shadow: 0px 9px 15px rgb(17 157 217 / 35%);   transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.btn-leesverder:hover{ background: #e34c95;      box-shadow: 0px 9px 20px rgb(198 14 89 / 30%);  }

.btn.wit{ color: #3c3c3b!important; background: #fff;  box-shadow: none;  }
.btn.wit:hover{ color: #fff!important; background: #3c3c3b; box-shadow: none;  }

.btn.red{ color: #fff!important; background: #e94842;  box-shadow: 0px 9px 20px rgb(233 72 66 / 40%);  }
.btn.red .bg{ position: absolute; bottom: 0px; left: 0px; width: 20px; height: 20px; overflow: hidden;  }
.btn.red .bg:before{ position: absolute; top: 0px; right: 4px; width: 25px; height: 25px; background:#fff; border: 3px solid #707070; border-radius: 100%;  }
.btn.red:hover{  text-decoration: none; background: #f7a53c;    box-shadow: 0 8px 16px rgb(247 165 60 / 50%); }

.btn.purple{ color: #fff!important; background: #a5549b;  box-shadow: 0px 9px 20px rgb(165 84 155 / 40%);  }
.btn.purple .bg{ position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; overflow: hidden;  }
.btn.purple .bg:before{ position: absolute; bottom: 0px; left: 4px; width: 25px; height: 25px; background:#fff; border: 3px solid #707070; border-radius: 100%;  }
.btn.purple:hover{  text-decoration: none; background: #e34c95;      box-shadow: 0px 9px 20px rgb(198 14 89 / 30%); }



/* MENU ############################################################################################################################# */

#menu{ position: absolute; top: 25px; right: 0; list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 3;  }
#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 a{ position: relative; float: left;  border: 0;	 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 a.active{   text-decoration: none; }

#menu .tel {   margin-left: 40px; color: #3c3c3b; padding-right: 40px;  }
#menu .tel .tel{ padding-left: 30px; font-weight: bold;  }
#menu .tel .tel:before{ content:''; position: absolute; top: 50%; margin-top: -8px; left: 0px; width: 13px; height: 19px; background: url("../img/svg-telefoon-groen.svg") no-repeat; background-size: auto 100%;  }
#menu .tel .tel:after{ content:''; position: absolute; top: 50%; margin-top: -3px; right: 30px; width: 6px; height: 6px; background: #37b07f;  }


#menu .openmenu .menuitem{ margin-left: 15px; margin-right: 5px; height: 50px;  width: 50px;  background: #119dd9;  box-shadow: 0px 9px 15px rgba(17,157,217,0.35);  border: 4px solid transparent;  }
#menu .openmenu .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -9px; width: 18px; height: 14px; background: url("../img/svg-menu-wit.svg") no-repeat;}
#menu .openmenu:hover .menuitem{ background: #3c3c3b; border: 4px solid #3c3c3b; box-shadow: 0px 9px 20px rgb(0 0 0 / 10%); }
#menu .openmenu:hover .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat;}

#menu .last .menuitem {  margin-left: 20px;	padding: 0 25px;    }

#menu .last:hover .menuitem {  background: #e94842; text-decoration: none;   }

#menu a:hover{   }
#menu a.active:hover{ text-decoration: underline;  }
#menu li:hover{ z-index: 1;   }

#menu .menumetsubmenu.active{  }
#menu .menumetsubmenuli{ margin-right: 5px; }
#menu .menumetsubmenuli:before{ position: absolute; top: 50%; margin-top: -3px; right: 0px; width: 10px; height: 6px; }
#menu .menumetsubmenuli a{  }
#menu .menumetsubmenuli .submenu a{ cursor: pointer!important; }
#menu .menusplit { height: 15px;  }

.submenucontainer{ position: relative; float: left; }
.submenucontainer:hover .submenu{ display: block; }
.submenuklikoverlay{	position: absolute;	top: 50px;	left: 0%;	}
.submenu{	position: relative;	float: left; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); 	margin-top: 0px;	width: 260px;	border-radius: 10px;	display: none;		box-sizing: border-box;}
.submenu a{	position: relative!important;	float: left!important; font-size: 12px!important;	border-right: 0!important;  height: auto!important; padding: 15px 20px 15px 20px!important;		width: 100%!important;		margin: 0!important;	line-height: 140%!important;	box-sizing: border-box;	}
.submenu li{ border-bottom: 1px solid rgba(255,255,255,0.3); position: relative; float: left; width: 100%; }
.submenu li:first-of-type a{ border-radius: 10px 10px 0 0!important;}

.submenu a:hover{ padding-left: 35px!important; text-decoration: none!important; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); }
.submenu a:before{ content:''; opacity:  0; position: absolute; top: 21px; left: 10px; width: 4px; height: 4px; border-radius: 100%; background: #fff;  transition:all .4s linear; -o-transition:all .4s linear; -moz-transition:all .4s linear;  -webkit-transition:all .4s linear; }
.submenu a:hover:before{ opacity:  1; left: 20px;  }
.submenu:after{ position: absolute; bottom: -2px; width: 30px;  height: 4px; border-radius: 4px; left: 50%; margin-left: -15px; }
.mobilesubmenuitem { display: none; }

#menu .mobielmenuzichtbaar { display:none; }


#menu a{ color: #3c3c3b;  font-size: 14px; font-weight: bold; height: 50px; line-height: 50px; padding: 0 18px 0 18px;  }
#menu a.active{  color: #119dd9!important; text-decoration: underline; }
#menu a:hover{   }
#menu a.active:hover{   }
#menu .last .menuitem {  background: #37b07f; color: #fff;    box-shadow: 0px 9px 20px rgba(55,176,127,0.35);  }
#menu .last:hover .menuitem { box-shadow: 0px 9px 20px rgba(232,72,34,0.35); }
#menu .menusplit { background: #3c3c3b; }
.submenu{	border-bottom: 15px solid #3c3c3b;		background: #119dd9;	}
.submenu a{	color: #fff!important;		}
.submenu a:hover{  background:#17b2ad!important;  }
.submenu:after{  background: #fff;  }


/* MENU OVERLAY ############################################################################################################################# */

#bg.onzichtbaar { display: none; }

#menuoverlay { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 10000; display: none; }
#menuoverlay:before { z-index: 0;  position: absolute; top: 0px; left: 0px; right: 0px; height: 1200px; background: #222; }
#menuoverlay:after { z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom:0; opacity: 1; background: #222 url("../img/visual-menu.jpg") no-repeat bottom right; background-size: cover; }
#menuoverlay.active { display: block; }
#menuoverlay .content{ height: 100vh; z-index: 10000; }
#menuoverlay .logowit { position: absolute; top: 40px; left: 0px; width: 380px; height: 60px;  background: url("../img/logo-droohuus-wit.svg") no-repeat; background-size: auto 100%; }

#menuoverlay #adres { z-index: 1; position: absolute; bottom: 45px; left: 0px; color: rgba(255,255,255,0.5); font-size: 12px; line-height: 160%; }
#menuoverlay #adres a{ color: rgba(255,255,255,0.5); }
#menuoverlay #adres a:hover{ color: #fff; }
#menuoverlay #adres span{ font-weight: bold; }
#menuoverlay #adres .kolom.adres{ width: 190px; }
#menuoverlay #adres .kolom.adres2{ width: 190px; }
#menuoverlay #adres .kolom.postbus{ width: 160px; }
#menuoverlay #adres .kolom.telefoon{ width: 170px; }
#menuoverlay #adres .kolom.email{ width: 200px; }
#menuoverlay #adres .kolom.socialmedia a:hover{ margin-top: -3px; }
#menuoverlay #adres .kolom.socialmedia .linkedin{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat; margin-right: 5px;}
#menuoverlay #adres .kolom.socialmedia .twitter{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-twitter-hover.svg") no-repeat; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .linkedin:hover{  background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat;  }
#menuoverlay #adres .kolom.socialmedia .facebook:hover{  background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat; }
#menuoverlay #adres .kolom.socialmedia .twitter:hover{  background: url("../img/svg-socialmedia-twitter-hover.svg") no-repeat; }
#menuoverlay #adres .kolom.socialmedia .youtube:hover{  background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat; }

#menuoverlay-top { position: absolute; top: 35px; right: 0px;  }
#menuoverlay-top #sluiten { z-index: 1; cursor: pointer; margin-left: 10px;  height: 50px;  width: 50px;  background: #fff;  box-shadow: 0 3px 6px rgba(0,0,0,0.10);   }
#menuoverlay-top #sluiten:before{ position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; background: url("../img/svg-sluiten-kleur.svg") no-repeat;}
#menuoverlay-top #sluiten:hover { background: #e94842; }
#menuoverlay-top #sluiten:hover:before{ background: url("../img/svg-sluiten-wit.svg") no-repeat;}
#menuoverlay-top .afspraak { z-index: 1;  background:#000; text-transform: uppercase; font-weight: 500; font-size: 16px; line-height: 59px; color: #fff; margin-left: 10px; height: 65px;	padding: 0 45px; border-radius: 65px; border: 2px solid transparent;   }
#menuoverlay-top .afspraak  {  }
#menuoverlay-top .afspraak:hover { border: 2px solid rgba(255,255,255,0.4); background: #3c3c3b; text-decoration: none;  box-shadow: 0 3px 12px rgba(0,0,0,0.3); }

#menuoverlay-top-menu { position: absolute; top: 170px; left: 0px;  }
#menuoverlay-top-menu .titel{ color: #119dd9; text-transform: uppercase; font-size: 20px; font-weight: 500; padding-bottom: 20px; }
#menuoverlay-top-menu a{ color: #fff; padding: 9px 0; position: relative; float: left; width: 100%; line-height: 140%; }
#menuoverlay-top-menu ul{  list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 1; width: 1600px;   }
#menuoverlay-top-menu li{ position: relative; float: left; width: 100%;  transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear;}
#menuoverlay-top-menu li.menumetsubmenuli{  width: 260px; padding-right: 30px; padding-bottom: 50px; box-sizing: border-box;  }
#menuoverlay-top-menu ul li ul{  width: 100%; padding-right: 50px; box-sizing: border-box;   }
#menuoverlay-top-menu li.menuzondersubmenuli{  clear: both; width: 400px; padding-right: 100px; box-sizing: border-box; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 500; padding-bottom: 20px;  }

.noscrolllayer { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;  }



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

#top{ position: fixed; top: 0px; left: 0px; height: 130px; z-index: 999; }
#top .logo{ position: absolute;	top: 25px;	left: 0px;	width: 380px;	height: 60px;	background: url("../img/logo-droohuus.svg") no-repeat left center;	background-size: auto 100%; z-index: 2;}

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

#top.top1off{ height: 90px; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);   }
#top.top1off #menu{ top: 18px; }
#top.top1off #menu .tel {  }
#top.top1off .logo{  top: 15px; }
																								
#top.vervolgpagina{ height: 90px; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);   }
#top.vervolgpagina #menu{ top: 18px; }
#top.vervolgpagina #menu .tel { }
#top.vervolgpagina .logo{  top: 15px;   }

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

#header{  min-height: 875px;  height: 95vh;  }

#header div.bg{ position: absolute; top: 0px; left: 0; right: 0;  height: 900px;    }
#header div.bg:after {  position: absolute; top: 0px; right: 0px;   height: 1080px;  left: 0px;   background: #fff url("../img/visual-header.jpg") no-repeat center top;  background-size: auto 100%; }

#header div.animate{	z-index: 1;  position: absolute;	top: 260px;	left:0px; width: 600px;  }
#header div.animate h1{	padding-bottom: 15px; }
#header div.animate h21{	padding-bottom: 15px; }
#header div.animate .txt{	padding: 0 50px 30px 0;}


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

#intro { padding: 40px 0 120px 0; }
#intro div.bg{ position: absolute; top: 10px; left: 0px; bottom: 0px; width: 50%; }
#intro div.bg:before{ position: absolute; top: 0px; right: 200px; bottom: 0px; left: 0px; background: url("../img/visual-intro.jpg") no-repeat top right; background-size: auto 100%;}
#intro .intro{ padding: 0 200px 0 50%; }
#intro .intro .txt{ padding-bottom: 30px;}
#intro .intro h2{ font-size: 58px; font-weight: bold;}
#intro .intro h3{ font-size: 28px; }


/* Diensten ############################################################################################################################# */
#visie { padding: 120px 0 320px; z-index: 1; }
#visie .visie{ padding: 100px 10% 400px; background: #119dd9; color: #fff; text-align: center; }
#visie .visie .bg{ position: absolute; top: 0px; right: 0px; width: 100px; height: 100px; overflow: hidden;  }
#visie .visie .bg:before{ position: absolute; bottom: 0px; left: 10px; width: 150px; height: 150px; background:#fff; border: 10px solid #707070; border-radius: 100%;  }
#visie .visie:after{ position: absolute; bottom: -150px; left: 150px; right: 150px; height: 450px; background: url("../img/visual-groepsfoto.jpg") no-repeat center center; background-size: cover;}
#visie .visie h2{ font-size: 50px; font-weight: bold; text-align: center; color: #fff; padding-bottom: 10px; }
#visie .visie h3{ font-size: 24px; font-weight: bold; text-align: center; color: #fff; padding-bottom: 30px; }
#visie .visie .visieblok{ width: 28%; margin: 50px 2.5% 0; padding: 80px 0 0 0; }
#visie .visie .visieblok:before{ position: absolute; top: 0px; left: 50%; margin-left: -25px; width: 50px; height: 50px; background: #fff; border-radius: 100%; }
#visie .visie .visieblok:after{ position: absolute; top: 18px; left: 50%; margin-left: -10px; width: 20px; height: 15px; background:  url("../img/svg-vink groen.svg") no-repeat center center; background-size: auto 100%;}


/* overons ############################################################################################################################# */
#overons { padding: 80px 0 120px 0; }
#overons .overons{ padding: 0 68% 0 0; }
#overons .overons .txt{ padding-bottom: 30px;}
#overons .overons h2{ font-size: 58px; font-weight: bold;}
#overons .overons h3{ font-size: 28px; }
#overons .overons .bewoners{ position: absolute; top: -130px; right: 0px; font-family: 'Caveat', cursive; font-weight: bold; }
#overons .overons .bewoners .naam{ position: absolute; width: 100%; font-size: 30px; text-align: center; }
#overons .overons .bewoners .link{ position: absolute; width: 100%; font-size: 18px; text-align: center; padding-right: 10px; }
#overons .overons .bewoners .bg{ position: absolute; }
#overons .overons .bewoner:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; }
#overons .overons .bewoner:after { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; }
#overons .overons .bewoner { cursor: pointer; }

#overons .overons .bewoner1{ position: absolute; top: 100px; right: 500px; width: 300px; height: 280px; }
#overons .overons .bewoner2{ position: absolute; top: 0px; right: 120px; width: 400px; height: 400px;  }
#overons .overons .bewoner3{ position: absolute; top: 450px; right: 660px; width: 310px; height: 160px;  }
#overons .overons .bewoner4{ position: absolute; top: 450px; right: 300px; width: 310px; height: 310px;  }
#overons .overons .bewoner5{ position: absolute; top: 450px; right: 90px; width: 220px; height: 350px;  }


#overons .overons .bewoner1:after{ box-shadow: 0 20px 40px rgba(0,0,0,0.4);  position: absolute; bottom: 0px; left: 0px; width: 200px; height: 200px; background: url("../img/team/desiree_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .bewoner1 .naam{ top: 0px; left: -70px; font-size: 36px;  }
#overons .overons .bewoner1 .link{ top: 30px; left:-70px;  color: #37b07f;  }
#overons .overons .bewoner1 .bg{ top: 20px; left:-65px;  width: 50px; height: 80px; background: url("../img/svg-pijl-getekend-1.svg") no-repeat top left; background-size: 100% auto; }

#overons .overons .bewoner2:before{ position: absolute; bottom: 0px; left: 90px; width: 240px; height: 240px; background:#f7a53c; box-shadow: 0 8px 16px rgba(247, 165, 60, 0.5); }
#overons .overons .bewoner2:after{  box-shadow: 0 20px 40px rgba(0,0,0,0.4); position: absolute; bottom: 50px; left: 0px; width: 270px; height: 270px; background: url("../img/team/edwin_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .bewoner2 .naam{ top: 0px; left: 30px; }
#overons .overons .bewoner2 .link{ top: 30px; left:30px;  color: #f7a53c;  }
#overons .overons .bewoner2 .bg{ top: 40px; left:310px;  width: 60px; height: 90px; background: url("../img/svg-pijl-getekend-2.svg") no-repeat top left; background-size: 100% auto; }

#overons .overons .bewoner3:before{ position: absolute; top: 30px; right: 0px; width: 130px; height: 130px; background:#37b07f; box-shadow: 0 8px 16px rgba(55, 176, 127, 0.5); }
#overons .overons .bewoner3:after{  box-shadow: 0 20px 40px rgba(0,0,0,0.4); position: absolute; top: 0px; right: 30px; width: 130px; height: 130px; background: url("../img/team/hans.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .bewoner3 .naam{ bottom: 30px; right: 110px; }
#overons .overons .bewoner3 .link{ bottom: 0px; right:110px;  color: #37b07f;  }
#overons .overons .bewoner3 .bg{ top: 20px; left:30px;  width: 80px; height:70px; background: url("../img/svg-pijl-getekend-3.svg") no-repeat top left; background-size: 100% auto; }

#overons .overons .bewoner4:after{ box-shadow: 0 20px 40px rgba(0,0,0,0.4);  position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; background: url("../img/team/marja_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .bewoner4 .naam{ top: 220px; left: -190px; font-size: 42px; }
#overons .overons .bewoner4 .link{ top: 250px; left:-190px;  color: #119dd9;  }
#overons .overons .bewoner4 .bg{ bottom: 0px; left:60px;  width: 90px; height:80px; background: url("../img/svg-pijl-getekend-4.svg") no-repeat top left; background-size: 100% auto; }

#overons .overons .bewoner5:before{ position: absolute; top: 40px; right: 40px; width: 130px; height: 130px; background:#e34c95; box-shadow: 0 8px 16px rgba(227, 76, 149, 0.5); }
#overons .overons .bewoner5:after{ box-shadow: 0 20px 40px rgba(0,0,0,0.4);  position: absolute; top: 0px; left: 0px; width: 130px; height: 130px; background: url("../img/team/miriam_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .bewoner5 .naam{ top: 200px; left: 10px;  }
#overons .overons .bewoner5 .link{ top: 230px; left:20px;  color: #e34c95;  }
#overons .overons .bewoner5 .bg{ top: 170px; left:-10px;  width: 70px; height: 110px; background: url("../img/svg-pijl-getekend-5.svg") no-repeat top left; background-size: 100% auto; }




#overons .overons .desiree:after{  background: url("../img/team2022/desiree_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .edwin:after{  background: url("../img/team2022/edwin_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .hans:after{  background: url("../img/team2022/hans.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .marja:after{  background: url("../img/team2022/marja_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .miriam:after{  background: url("../img/team2022/miriam_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .dennis:after{  background: url("../img/team2022/dennis_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .guus:after{  background: url("../img/team2022/guus_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }
#overons .overons .freek:after{  background: url("../img/team2022/freek_droo-huus.jpg") no-repeat center center; background-size: 110% auto; }


#overons .overons .bewoner:hover:before {     background: #119dd9; box-shadow: 0px 9px 15px rgb(17 157 217 / 35%); }
#overons .overons .bewoner:hover:after { background-size: 100% auto; }
#overons .overons .bewoner:hover .bg { animation: shake 1.5s; animation-iteration-count: infinite; }
@keyframes shake {
  10%, 90% {    transform: translate3d(-1px, 0, 0);  }
  20%, 80% {    transform: translate3d(2px, 0, 0);  }
  30%, 50%, 70% {    transform: translate3d(-4px, 0, 0);  }
  40%, 60% {    transform: translate3d(4px, 0, 0);  }
}

/* sponsering ############################################################################################################################# */

#sponsering { padding: 40px 0 20px 0;  margin-top: 80px; }
#sponsering div.bg{ position: absolute; top: 10px; left: 0px; bottom: 0px; width: 50%; }
#sponsering div.bg:before{ position: absolute; top: 0px; right: 200px; bottom: 0px; left: 0px; background: url("../img/visual-sponsoring.jpg") no-repeat top right; background-size: auto 100%;}
#sponsering .sponsering{ padding: 0 200px 0 50%; }
#sponsering .sponsering .txt{ padding-bottom: 30px;}
#sponsering .sponsering h2{ font-size: 58px; font-weight: bold;}
#sponsering .sponsering h3{ font-size: 28px; }



/* vraag ############################################################################################################################# */

#vraag { padding: 180px 0 60px;  }
#vraag .centered{ width: 1100px; }
#vraag .vraag{ padding: 80px 10% 100px; background: #17b2ad; color: #fff; text-align: center; }
#vraag .vraag .bg{ position: absolute; bottom: 0px; left: 0px; width: 100px; height: 100px; overflow: hidden;  }
#vraag .vraag .bg:before{ position: absolute; top: 0px; right: 10px; width: 150px; height: 150px; background:#fff; border: 10px solid #707070; border-radius: 100%;  }

#vraag .vraag h2{  font-size: 50px; font-weight: bold; text-align: center; color: #fff; padding-bottom: 10px; }
#vraag .vraag .txt{ font-size: 20px; font-weight: bold; text-align: center; color: #fff; padding-bottom: 30px; }
#vraag .vraag .btn{ margin: 0 10px 0 330px; }


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

#contact{ padding: 60px 0 20px; text-align: center; margin-top: 70px; z-index: 1; font-weight: 500; color: #3c3c3b; }
#contact .contact:before { position: absolute; top: -100px; left: 50%; margin-left: -30px; width: 60px; height: 70px; background:url("../img/logo-droohuus-symbool.svg") no-repeat center center; background-size: 100% auto;}
#contact .tel { width: 260px; height: 55px; padding-left: 55px; text-align: left; color: #3c3c3b; margin: 30px 0 30px 690px; line-height: normal; }
#contact .tel span{ font-size: 25px; padding-top: 5px;   }
#contact .tel:before { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-telefoon-donker.svg") no-repeat top left; background-size: 100% auto; }
#contact .tel:hover { text-decoration: none; }





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

#afsluiting { padding: 0 0 100px; font-size: 12px; z-index: 0; text-align: center; font-weight: 500; color: #3c3c3b;  }


#afsluiting a{ color: #3c3c3b; }
#afsluiting a:hover{ color: #119dd9; }

#afsluiting #naarboven{ z-index: 1; cursor: pointer; position: absolute; bottom: 20px; right: 20px;  width: 50px; height: 50px;     background: #37b07f;    box-shadow: 0px 9px 20px rgb(55 176 127 / 35%); }
#afsluiting #naarboven span{ position: absolute; top: 50%; margin: -25px 0 0 -25px; left: 50%; width: 50px; height: 50px; padding: 0;    }
#afsluiting #naarboven span:before{ content:''; background: url(../img/svg-pijl-boven-wit.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; margin: -4px 0 0 -6px; left: 50%; width: 12px; height: 8px; padding: 0;}

#afsluiting #naarboven:hover { background: #119dd9;    box-shadow: 0px 9px 15px rgb(17 157 217 / 35%); }
	
#afsluiting #naarboven:hover span:before{
    -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; -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);  } 
} 


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

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