@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: 'Montserrat', sans-serif;	font-size:15px;	font-weight: normal; background: #fff;	color: #00489D;	line-height: 200%; }

body.noscroll { overflow: hidden; }

a{	color: #00489D;  text-decoration:none;  }
a:hover{ text-decoration:underline; }	

h1, h2, h3{	color: #00489D; line-height: 120%;  }
h1 span, h2 span, h3 span{ color: #74B5E4; }
h1{ font-size: 56px; padding-bottom: 25px; font-weight: 600; }
h2{ font-size: 38px; padding-bottom: 25px; font-weight: 600; }
h3{ font-size: 30px; padding-bottom: 15px; font-weight: normal; }
h4{ font-size: 22px; padding-bottom: 25px; font-weight: normal; }


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

.btn{ font-size: 15px; font-weight: 600; color: #fff; text-transform: uppercase; background: #00489D; padding: 0 35px; height: 55px; line-height: 55px; border-radius: 55px; position: relative; float: left; }
.btn{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.btn:hover{ background: #3C3C3B; text-decoration: none;  }


.btn.licht{ background: #74B5E4; text-decoration: none;  }
.btn.licht:hover{ background: #3C3C3B; text-decoration: none;  }

.btn-leesverder{ margin-bottom: 30px; font-size: 15px; text-decoration: none!important; font-weight: 600; color: #fff!important; margin-right: 10px; text-transform: uppercase; background: #00489D; padding: 0 35px; height: 55px; line-height: 55px; border-radius: 55px; position: relative; float: left; }
.btn-leesverder{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.btn-leesverder:hover{ background: #3C3C3B; text-decoration: none!important;  }

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

#menu{ position: absolute; top: 35px; right: 0; list-style: none; padding: 0 0 0 0px; 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 a{ position: relative; float: left; height: 65px; line-height: 65px; padding: 0 25px 0 20px; color: #00489D; border: 0;	 font-size: 15px; 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 a.active{  color: #00489D; text-decoration: none; }



#menu .openmenu .menuitem{ margin-left: 10px; height: 64px;  width: 64px; border-radius: 65px; background: #74B5E4;  box-shadow: 0 3px 6px rgba(0,0,0,0.10); border: 4px solid transparent;  }
#menu .openmenu .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -11px; width: 22px; height: 18px; background: url("../img/svg-menu.svg") no-repeat;}
#menu .openmenu:hover .menuitem{ background: #00489D; border: 4px solid #00489D;}
#menu .openmenu:hover .menuitem:before{ background: url("../img/svg-menu.svg") no-repeat;}

#menu .last .menuitem { background:#00489D; line-height: 59px; color: #fff; margin-left: 10px;	padding: 0 35px; border-radius: 65px; border: 2px solid transparent;   }
#menu .last  { float: right; }
#menu .last:hover .menuitem { border: 2px solid rgba(255,255,255,0.4); background: #00489D; text-decoration: none;  box-shadow: 0 3px 12px rgba(0,0,0,0.3); }


#menu .login { float: right;  }
#menu .login .menuitem{  margin-left: 10px; height: 64px;  width: 64px; border-radius: 65px; background: #333;  box-shadow: 0 3px 6px rgba(0,0,0,0.10); border: 4px solid transparent;  }
#menu .login .menuitem span{ display: none;  }
#menu .login .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; background: url("../img/svg-inloggen.svg") no-repeat center center; background-size: auto 100%;}
#menu .login:hover .menuitem{ background: #00489D; border: 4px solid #00489D;}

#menu a:hover{ color: #00489D;   }
#menu a.active:hover{ color: #00489D; 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; background: url("../img/svg-pijl-beneden-blauw.svg") no-repeat; background-size: 100% auto; }
#menu .menumetsubmenuli a{  }
#menu .menumetsubmenuli .submenu a{ cursor: pointer!important; }

#menu .menusplit { height: 15px; background: #00397D; }

.submenucontainer{ position: relative; float: left; }
.submenucontainer:hover .submenu{ display: block; }
.submenuklikoverlay{	position: absolute;	top: 60px;	left: 0%;	}
.submenu{	position: relative;	float: left; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); border-bottom: 15px solid #00397D;	margin-top: 0px;	width: 260px;	border-radius: 10px;	display: none;	background: #00489D;	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;	color: #fff!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; background:#74B5E4!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; background: #74B5E4; height: 4px; border-radius: 4px; left: 50%; margin-left: -15px; }
.mobilesubmenuitem { display: none; }

#menu .mobielmenuzichtbaar { display:none; }

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

#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: #00489D; }
#menuoverlay:after { z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom:0; opacity: 0.1; background: #00489D url("../img/visual-header.jpg") no-repeat right bottom; background-size: cover; }
#menuoverlay.active { display: block; }
#bg.onzichtbaar { display: none; }
#menuoverlay .content{ height: 100vh; z-index: 10000; }

#menuoverlay .logowit { position: absolute; top: 40px; left: 0px; width: 265px; height: 48px; background: url("../img/logo-vov-consultancy-wit.svg") no-repeat; }
#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.telefoon{ width: 170px; }
#menuoverlay #adres .kolom.email{ width: 260px; }

#menuoverlay #adres .kolom.socialmedia a:hover{ margin-top: -3px; }
#menuoverlay #adres .kolom.socialmedia .linkedin{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin-wit.svg") no-repeat; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook-wit.svg") no-repeat; }
#menuoverlay #adres .kolom.socialmedia .linkedin:hover{  background: url("../img/svg-socialmedia-linkedin-wit.svg") no-repeat;  }
#menuoverlay #adres .kolom.socialmedia .facebook:hover{  background: url("../img/svg-socialmedia-facebook-wit.svg") no-repeat; }

#menuoverlay-top { position: absolute; top: 35px; right: 0px;  }
#menuoverlay-top #sluiten { z-index: 1; cursor: pointer; margin-left: 10px; height: 64px;  width: 64px; border-radius: 65px; background: #fff;  box-shadow: 0 3px 6px rgba(0,0,0,0.10); border: 4px solid transparent;  }
#menuoverlay-top #sluiten:before{ position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; background: url("../img/svg-sluiten.svg") no-repeat;}
#menuoverlay-top #sluiten:hover { background: #000539; border: 4px solid #74B5E4;}
#menuoverlay-top #sluiten:hover:before{ background: url("../img/svg-sluiten-wit.svg") no-repeat;}
#menuoverlay-top .afspraak { z-index: 1;  background:#000539; 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  { float: right; }
#menuoverlay-top .afspraak:hover { 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 .login { z-index: 1;  background:#000539; margin-left: 10px; height: 65px; width: 65px;	 border-radius: 65px; border: 2px solid transparent;   }
#menuoverlay-top .login  { float: right; }
#menuoverlay-top .login  span{ display: none; }
#menuoverlay-top .login:hover { 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 .login:before{ position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; background: url("../img/svg-inloggen.svg") no-repeat center center; background-size: auto 100%;}



#menuoverlay-top-menu { position: absolute; top: 220px; left: 0px;  }
#menuoverlay-top-menu .titel{ color: #74B5E4; text-transform: uppercase; font-size: 20px; font-weight: 500; padding-bottom: 20px; }
#menuoverlay-top-menu a{ color: #fff; padding: 10px 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: 400px; padding-right: 100px; padding-bottom: 50px; box-sizing: border-box;  }
#menuoverlay-top-menu ul li ul{  width: 100%; padding-right: 50px; box-sizing: border-box;   }

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


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

#top{ position: fixed; top: 0px; left: 0px; height: 130px; z-index: 1000; }
#top .logo{	position: absolute;	top: 20px;	left: 0px;	width: 265px;	height: 90px;	background: url("../img/logo-vov-consultancy.svg") no-repeat left center;	background-size:  100% auto; 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: 13px; }
#top.top1off #menu .last .menuitem {  margin-left: 10px; }
#top.top1off #menu .openmenu .menuitem{ background: #74B5E4; border: 4px solid #fff;}
#top.top1off #menu .openmenu .menuitem:before{ background: url("../img/svg-menu.svg") no-repeat;}
#top.top1off #menu .openmenu:hover .menuitem{ background: #00489D; border: 4px solid #fff;}
#top.top1off .logo{  top: 15px; height: 65px; }
																									
#top.vervolgpagina{ height: 90px; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);   }
#top.vervolgpagina #menu{ top: 13px; }
#top.vervolgpagina #menu .last .menuitem {  margin-left: 10px; margin-right: 0; }
#top.vervolgpagina #menu .openmenu .menuitem{ background: #74B5E4; border: 4px solid #fff;}
#top.vervolgpagina #menu .openmenu .menuitem:before{ background: url("../img/svg-menu.svg") no-repeat;}
#top.vervolgpagina #menu .openmenu:hover .menuitem{ background: #00489D; border: 4px solid #fff;}
#top.vervolgpagina .logo{  top: 13px; height: 64px; }


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

#header{  height: 930px; height: 95vh; }
#header:before { position: absolute; top: 0px; left: 0px; right: 0px; height: 900px; height: 90vh; background: url("../img/visual-header.jpg") no-repeat center bottom;  background-size: auto 100%; }

#header div.animate{	position: absolute;	top: 280px;	left:0px; width: 600px; text-transform: uppercase;  }
#header .container h1{ font-size: 38px; text-transform: uppercase; padding-bottom: 15px; }
#header .container.tekst{ font-size: 20px; line-height: 160%; padding-bottom: 30px; color: #74B5E4; text-transform: uppercase; }
#header div.animate:after{	position: absolute;	bottom: -40px; left: 0px; }

#header #kaartje { background: #74B5E4; box-shadow: 0 3px 6px rgba(0,0,0,0.30);  padding: 30px 40px 30px 40px; border-radius: 20px; position: absolute; top: 650px; right: 50%; margin-right: -800px; width: 440px; box-sizing: border-box; }
#header #kaartje h4{ color: #fff; font-weight: bold; padding-bottom: 14px; }

#header #vinkjes{position: absolute; top: 780px; left: 50%; width: 70%; margin-left: -800px; }
#header #vinkjes li{ padding: 0 40px 0 50px; width: 370px; font-size: 14px; font-weight: 600; line-height: 150%; }
#header #vinkjes li:before{ content:''; position: absolute; top: 5px; left: 0px; width: 26px; height :20px; background: url("../img/svg-vink.svg") no-repeat top left; background-size: auto 100%; }

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

#intro { padding: 160px 0 120px; }
#intro div.container { padding: 0 160px 0 55%; }
#intro h2 { font-size: 32px; text-transform: uppercase; }
#intro h3 { font-size: 26px; text-transform: uppercase; color: #74B5E4; }

#intro .bg{ position: absolute; top: 0px; left: 0px; width: 45%; }

#intro .bg:before{  z-index: 0; position: absolute; top: 270px; right: 440px; width: 550px; height: 550px; border-radius: 100%; background: #fff; box-shadow: 0 3px 75px rgba(0,0,0,0.15); }
#intro .bg:after{  z-index: 0; position: absolute; top: 60px; right: 500px; width: 150px; height: 150px; border-radius: 100%; background: #F8F8FB;  }

#intro .bg .circle{  z-index: 1; position: absolute; top: 140px; right: 0px; width: 550px; height: 550px; border-radius: 100%; background: #74B5E4 url("../img/visual-woman-pointing.jpg") no-repeat center center; background-size:cover; box-shadow: 0 3px 75px rgba(0,0,0,0.15); }
#intro .bg .circle:after{  position: absolute; bottom: -130px; left: 90px; width: 100px; height: 100px; border-radius: 100%; background: #F8F8FB;  }
/* DIENSTEN ############################################################################################################################# */

#diensten { padding: 160px 0 ; }
#diensten .dienst{ width: 23%; margin-left: 2%; text-align: center; }
#diensten .dienst1{ margin-left: 0%; }

#diensten .dienst .top{ height: 180px; }
#diensten .dienst .top:before, #diensten .dienst .top:after{ position: absolute; left: 50%; margin-left: -90px; width: 180px; height: 180px; border-radius: 100%; background: #00489D; }
#diensten .dienst .top:before{  background: #00489D; }

#diensten .dienst .bottom{ padding: 20px 0 0 0; }
#diensten .dienst .bottom .titel{ font-size: 22px; font-weight: 600; padding-bottom: 20px; height: 75px; line-height: 75px; text-transform: uppercase; padding: 0 50px; }
#diensten .dienst .bottom .titel.multiline{ margin-left: 0%; line-height: 120%; }
#diensten .dienst .bottom .tekst{ padding: 0 50px 30px; }
#diensten .dienst .bottom .link{ width: 180px; margin-left: 95px; color: #fff; text-transform: uppercase; font-weight: 600; padding: 0 30px; height: 55px; line-height: 55px; border-radius: 55px; background: #74B5E4; }

#diensten .dienst:hover .bottom .link{ background: #00489D; }

#diensten .dienst1 .top:after{ background: url("../img/svg-growth.svg") no-repeat center center; background-size: 70px auto;}
#diensten .dienst2 .top:after{ background: url("../img/svg-coaching.svg") no-repeat center center; background-size: 70px auto;}
#diensten .dienst3 .top:after{ background: url("../img/svg-leader.svg") no-repeat center center; background-size: 70px auto;}
#diensten .dienst4 .top:after{ background: url("../img/svg-book.svg") no-repeat center center; background-size: 70px auto;}


/* REVIEW ############################################################################################################################# */

#review { text-align: center; }
#review .centered{ width: 1000px;   }
#review .top{ width: 130px; height: 130px; position: relative; margin: 0 auto; background: #fff url("../img/visual-review.jpg?v=2") no-repeat center center; background-size:cover; border-radius: 100%; border: 10px solid #fff; box-shadow: 0 17px 35px rgba(0,0,0,0.15);  }
#review .titel{ font-weight: 600; text-transform: uppercase; font-style: italic; font-size: 24px; margin-top:20px; }
#review .reviewer{ font-weight: normal; text-transform: uppercase; color:#96C14E; font-size: 20px; margin-top:10px; }

#review .sterren {position: relative; margin: 0 auto;  width: 190px; }
#review .ster { position: relative; float: left; width: 30px; height: 30px; margin-top: 20px;  margin-right: 5px; background:url("../img/svg-ster-blauw.svg") no-repeat center center; background-size: 100% auto;}
#review .ster.licht { width: 30px; height: 30px; background:url("../img/svg-ster-lichtblauw.svg") no-repeat center center; background-size: 100% auto;}

#review .bg{ position: absolute; top: -50px; right: 0px; width: 45%; height: 600px; overflow: hidden; }
#review .bg:before{  z-index: 0; position: absolute; top: 50px; right: -260px; width: 450px; height: 450px; border-radius: 100%; background: #fff; box-shadow: 0 3px 75px rgba(0,0,0,0.10); }
#review .bg:after{  z-index: 0; position: absolute; top: 40px; right: 220px; width: 100px; height: 100px; border-radius: 100%; background: #F8F8FB;  }



/* DETAILS ############################################################################################################################# */

#details { padding: 160px 0 120px; }
#details div.container { padding: 0 160px 0 55%; }
#details h2 { font-size: 32px; text-transform: uppercase; padding: 40px 0 10px;}
#details h3 { font-size: 24px; text-transform: uppercase; color: #74B5E4; }

#details .bg{ position: absolute; top: 0px; left: 0px; width: 45%; }
#details .bg .circle{  z-index: 1; position: absolute; top: 140px; right: 0px; width: 550px; height: 550px; border-radius: 100%; background: #74B5E4 url("../img/visual-woman-showing.jpg") no-repeat center center; background-size:cover; box-shadow: 0 3px 75px rgba(0,0,0,0.15); }
#details .bg .circle:after{  position: absolute; bottom: -130px; left: 90px; width: 100px; height: 100px; border-radius: 100%; background: #F8F8FB;  }

#details .bg:before{  z-index: 0; position: absolute; top: 270px; right: 440px; width: 550px; height: 550px; border-radius: 100%; background: #fff; box-shadow: 0 3px 75px rgba(0,0,0,0.15); }
#details .bg:after{  z-index: 0; position: absolute; top: 60px; right: 500px; width: 150px; height: 150px; border-radius: 100%; background: #F8F8FB;  }


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

#contact { padding: 90px 0 40px; text-align: center; z-index: 1; }
#contact .centered{ width: 1000px;   }
#contact h4 { font-size: 32px; text-transform: uppercase; padding: 40px 0 10px; font-weight: 500; }
#contact .btn.first { margin-left: 260px; margin-right: 10px; }



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

#afsluiting { padding: 120px 0; font-size: 12px; z-index: 0;  }
#afsluiting .centered{ width: 1200px;   }
#afsluiting div.container{ background: #00489D; color: #fff; height: 280px; border-radius :280px; text-align: center; padding: 150px 0 0; z-index: 0;   }
#afsluiting div.container:before{ position: absolute; top: 70px; left: 50%; width: 200px; height: 48px; margin-left: -100px; background: url("../img/logo-vov-consultancy-wit.svg") no-repeat center center; background-size: auto 100%;}
#afsluiting div.container a{ color: #fff;  }

#afsluiting #naarboven{ z-index: 1; cursor: pointer; position: absolute; top: 100px; margin-left: -30px; left: 50%; width: 60px; height: 60px; background: #00489D; border-radius: 100%;  }
#afsluiting #naarboven span{ position: absolute; top: 50%; margin: -25px 0 0 -25px; left: 50%; width: 50px; height: 50px; padding: 0;  border-radius: 100%;   }
#afsluiting #naarboven span:before{ content:''; background: url(../img/svg-pijl-boven-wit.svg) no-repeat center center; position: absolute; top: 50%; margin: -10px 0 0 -10px; left: 50%; width: 20px; height: 20px; padding: 0;}

#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);  } 
} 


#afsluiting .bg{ position: absolute; bottom: 0px; right: 0px; width: 45%; height: 600px; overflow: hidden; }
#afsluiting .bg:before{  z-index: 0; position: absolute; top: 350px; right: -200px; width: 450px; height: 450px; border-radius: 100%; background: #fff; box-shadow: 0 3px 75px rgba(0,0,0,0.10); }
#afsluiting .bg:after{  z-index: 0; position: absolute; top: 0px; right: 200px; width: 100px; height: 100px; border-radius: 100%; background: #F8F8FB;  }



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

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


/* WHATSAPP ############################################################################################################################# */

#whatsappchat{	position: fixed; bottom: 0px; right: 20px; width: 250px; height: 50px; background:#fff; border: 1px solid rgba(0,0,0,0.1); border-bottom: 0; z-index: 1000;}
#whatsappchat.active{	width: 300px;	height: 370px; }

#whatsappchatheader{ height: 50px; line-height: 50px; color: #fff; font-weight: bold; background: #3088C9 url(../img/svg-whatsapp-wit.svg) no-repeat 20px 15px; background-size: 20px 20px; cursor: pointer; overflow: hidden;}
#whatsappchattekst{	padding: 250px 30px 30px 30px;	text-align: center;	font-size: 12px;	line-height: 140%;	background: url(../img/visual-whatsapp.jpg) no-repeat center 20px;	background-size: 80px auto; }
#whatsappchattelefoon{ box-sizing: border-box; position: absolute; top: 130px; left: 0px; width: 100%; font-size: 26px; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1); }
#whatsappchatlogo{	position: absolute;	top: 73px;	right: 124px;	width: 25px;	height: 25px;	background: url(../img/svg-whatsapp-vol.svg) no-repeat;	background-size: 100% auto; }

#whatsappchattelefoon span{	box-sizing: border-box; padding-bottom: 8px;	font-size: 10px;	text-transform: uppercase;	font-weight: normal;}
#whatsappchattelefoon a, #whatsappchattelefoon a:hover{	color: #666!important;	text-decoration: none!important;	cursor: default;	padding-bottom: 10px;}
#whatsappchatoffline{ position: absolute; top: 140px; left: 30px; right: 30px; font-size: 26px; font-weight: bold; padding-bottom: 20px;color: #999;display: none;}
#whatsappchatoffline span{ box-sizing: border-box; padding-bottom: 5px; font-size: 10px; text-transform: uppercase; font-weight: normal; }
#whatsappchatclose{ position: absolute; top: 10px; right: -60px; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.2); text-align: center; line-height: 28px;	color: #fff;font-size: 16px;}
#whatsappchattitel{ position: absolute; top: 0px; left: 0px; padding-left: 60px; right: 0px; height: 50px; }

#whatsappchat.active #whatsappchatclose{ right: 10px; }

#whatsappchat.offline #whatsappchatoffline{ display: block; }
#whatsappchat.offline #whatsappchattelefoon{ display: none; }

#whatsappchat.offline #whatsappchatuitleg{ display: none; }
#whatsappchat.active.offline { height: 275px; }