@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, .trans5{ transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }
.transition10, .trans10{ transition:all 1s linear; -o-transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; }




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

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

body.noscroll { overflow: hidden; }

a{	color: #79BBAC;  text-decoration:none;  }
a:hover{ text-decoration:underline; }	

h1, h2, h3, h4, h5{	; line-height: 130%; font-weight: bold; }
h1 span, h2 span, h3 span{ font-weight: bold; }
h1{ font-size: 50px; padding-bottom: 25px;  }
h2{ font-size: 40px; padding-bottom: 25px;  }
h3{ font-size: 20px; padding-bottom: 15px;  }
h4{ font-size: 16px; 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: bold; color: #fff; text-transform: uppercase;     background: #79BBAC;   padding: 0 40px; height: 60px; line-height: 60px;  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: #000; text-decoration: none;  }
.btn:before{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.btn:after{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }



.btn.transparant { background: none; color: #707070; box-shadow: none;  }
.btn.transparant:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;     border: 2px solid #E5E5E5; border-radius: 50px;  }
.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:before {   border: 2px solid #79BBAC;  }
.btn.transparant:hover { background: #79BBAC;   color: #fff;  }

.btn.wit { background: none; color: #707070; box-shadow: none;  }
.btn.wit:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;     border: 2px solid #E5E5E5; border-radius: 50px;  }
.btn.wit:before { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear; }
.btn.wit:hover:before {   border: 2px solid #4F3622;  }
.btn.wit:hover { background: #4F3622;   color: #fff;  }

.btn.zwart { background: #000; color: #fff; box-shadow: none;  }
.btn.zwart:hover { background: #79BBAC;   color: #fff;  }

.btn.transparantwit { background: none; color: #fff; box-shadow: none;  }
.btn.transparantwit:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;     border: 2px solid rgba(255,255,255,0.2);   }
.btn.transparantwit:before { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear; }
.btn.transparantwit:hover:before {   border: 2px solid #79BBAC;  }
.btn.transparantwit:hover { background: #79BBAC;   color: #fff;  }

.btn.scan { padding-left: 60px; background: #79BBAC; color: #fff; box-shadow: none;}
.btn.scan:after { content:''; position: absolute; top: 14px; left: 20px; width: 24px; height: 24px; background: url("../img/svg-schoonmaakscan-wit.svg") no-repeat center center; background-size: auto 100%; }
.btn.scan:hover { background: #01319a; }

.btn.openmenu { padding-left: 70px; background: #fff; color: #3c3c3b; box-shadow: none; font-weight: bold; font-size: 16px;}
.btn.openmenu:after { content:''; position: absolute; top: 16px; left: 20px; width: 24px; height: 18px; background: url("../img/svg-menu.svg") no-repeat center center; background-size: auto 100%; }
.btn.openmenu:hover { color: #79BBAC; }
.btn.openmenu:hover:after { background: url("../img/svg-menu-kleur.svg") no-repeat center center; background-size: auto 100%;  }

.btn.tel { padding-left: 55px; padding-right: 35px; background: #D8E9F1; color: #000; box-shadow: none;}
.btn.tel:after { content:''; position: absolute; top: 21px; left: 22px; width: 18px; height: 18px; background: url("../img/svg-telefoon-donker.svg") no-repeat center center; background-size: auto 100%; }
.btn.tel:hover { background: #000; color: #fff;  }
.btn.tel:hover:after {  background: url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 100%;  }

.btn-leesverder{ background: #79BBAC; 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{  color: #fff!important;  transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.btn-leesverder:hover{ text-decoration: none!important; background: #3c3c3b;   }



/* 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; height: 60px; line-height: 60px; padding: 0 18px 0 18px;  border: 0;	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: 10px;  padding-right: 20px;  }
#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-kleur.svg") no-repeat; background-size: auto 100%;  }
#menu .tel .tel:after{ content:''; position: absolute; top: 50%; margin-top: -3px; right: -5px; width: 6px; height: 6px;  background: #79BBAC;  }


#menu .openmenu .menuitem{ margin-left: 10px; margin-right: 5px; height: 54px;  width: 54px;     }
#menu .openmenu .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -9px; width: 18px; height: 14px; }


#menu .last .menuitem { line-height: 49px; margin-left: 30px;	padding: 0 25px;    }


#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: #000;  font-size: 14px; font-weight: bold; text-transform: uppercase; }
#menu a.active{  color: #79BBAC!important; text-decoration: underline; }
#menu a:hover{   }
#menu a.active:hover{   }
#menu .tel {    color: #000;   }

#menu .openmenu .menuitem{  background: #000;    }
#menu .openmenu .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%;}
#menu .openmenu:hover .menuitem{ background: #F8C200;    }
#menu .openmenu:hover .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%;}

#menu .last .menuitem {  text-transform: uppercase; background: #79BBAC; color:#fff; line-height: 52px; height: 55px;  }
#menu .last:hover .menuitem {  background: #000;  text-decoration: none;  }

#menu .menusplit { background: #3c3c3b; }
.submenu{	border-bottom: 15px solid #3c3c3b; background: #CB893F;	}
.submenu a{	color: #fff!important;		}
.submenu a:hover{  background:#79BBAC!important;  }
.submenu:after{  background: #fff;  }

#menu .openmenu { }


#menu .talen{ margin-right: 30px;  }
#menu .talen:before{ position: absolute; top: 15px; right: -15px; bottom: -5px; border-right: 2px solid #eee; }
#menu .taal{ width: 24px; height: 24px; border: 2px solid #fff; padding: 0; border-radius: 100%; box-shadow: 0 3px 10px rgba(0,0,0,0.2); margin: 18px 15px 0 0;  }
#menu .taal:hover{ box-shadow: 0 6px 10px rgba(0,0,0,0.3);  }
#menu .taal.taalnl{ background: url("../img/svg-taal-nl.svg") no-repeat center center; background-size: cover;}
#menu .taal.taalen{ background: url("../img/svg-taal-en.svg") no-repeat center center; background-size: cover;}
#menu .taal.uit{ filter: grayscale(100%); opacity: 0.2;}




/* 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: #333; }
#menuoverlay:after { z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom:0; opacity: 1; background: #333 url("../img/visual-menu.jpg") no-repeat center center; background-size: cover; }
#menuoverlay.active { display: block; }
#menuoverlay .content{ height: 100vh; z-index: 10000; }
#menuoverlay .logowit { position: absolute; top: 25px; left: 0px; width: 240px; height: 60px;  background: url("../img/logo-meuleman-schilderwerken-wit.svg") no-repeat; background-size: auto 100%; }

#menuoverlay .bg{ z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; }

#menuoverlay #adres { z-index: 1; position: absolute; bottom: 45px; left: 0px; color: #fff; font-size: 12px; line-height: 160%; }
#menuoverlay #adres a{ color: #fff; }
#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.svg") no-repeat; background-size: auto 100%; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook.svg") no-repeat; background-size: auto 100%; margin-right: 5px;}
#menuoverlay #adres .kolom.socialmedia .twitter{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-twitter.svg") no-repeat; background-size: auto 100%; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube.svg") no-repeat; background-size: auto 100%; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .instagram{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram.svg") no-repeat; background-size: auto 100%; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .tiktok{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-tiktok.svg") no-repeat; background-size: auto 100%; margin-right: 5px; }
#menuoverlay #adres .kolom.socialmedia .linkedin:hover{  background: url("../img/svg-socialmedia-linkedin-wit.svg") no-repeat;  background-size: auto 100%; }
#menuoverlay #adres .kolom.socialmedia .facebook:hover{  background: url("../img/svg-socialmedia-facebook-wit.svg") no-repeat; background-size: auto 100%; }
#menuoverlay #adres .kolom.socialmedia .twitter:hover{  background: url("../img/svg-socialmedia-twitter-wit.svg") no-repeat; background-size: auto 100%; }
#menuoverlay #adres .kolom.socialmedia .youtube:hover{  background: url("../img/svg-socialmedia-youtube-wit.svg") no-repeat; background-size: auto 100%; }
#menuoverlay #adres .kolom.socialmedia .instagram:hover{  background: url("../img/svg-socialmedia-instagram-wit.svg") no-repeat; background-size: auto 100%; }
#menuoverlay #adres .kolom.socialmedia .tiktok:hover{  background: url("../img/svg-socialmedia-tiktok-wit.svg") no-repeat; background-size: auto 100%; }

#menuoverlay-top { position: absolute; top: 35px; right: 0px;  }
#menuoverlay-top #sluiten { z-index: 1; cursor: pointer; margin-left: 10px; border-radius: 100%; 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.svg") no-repeat;}
#menuoverlay-top #sluiten:hover { background: #DC0125; }
#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: #1c2443; text-decoration: none;  box-shadow: 0 3px 12px rgba(0,0,0,0.3); }

#menuoverlay-top #talen{ position: absolute; top: 10px; right: 10px; width: 150px;  height: 30px; }
#menuoverlay-top #talen .taal{ width: 34px; height: 34px; border: 2px solid #fff; border-radius: 100%; box-shadow: 0 2px 4px rgba(0,0,0,1); margin-right: 15px;  }
#menuoverlay-top #talen .taal:hover{ margin-top: -5px; }
#menuoverlay-top #talen .taal.taalnl{ background: url("../img/svg-taal-nl.svg") no-repeat center center; background-size: cover;}
#menuoverlay-top #talen .taal.taalfr{ background: url("../img/svg-taal-fr.svg?v=2") no-repeat center center; background-size: cover;}
#menuoverlay-top #talen .taal.taalen{ background: url("../img/svg-taal-en.svg") no-repeat center center; background-size: cover;}

#menuoverlay-top #talen .taal.uit{ filter: grayscale(100%); opacity: 0.2;}




#menuoverlay-top-menu { position: absolute; top: 120px; left: 0px; width: 100%;  }
#menuoverlay-top-menu .titel{ position: relative; float: left; width: 100%; color: #79BBAC; text-transform: uppercase; font-size: 13px; font-weight: 500; padding-bottom: 25px; }
#menuoverlay-top-menu .titel:after{ position: absolute; top: 30px; left: 0; right: 30px; border-top: 1px solid #fff; opacity: 0.1; }
#menuoverlay-top-menu a{ color: #fff; padding: 5px 0; position: relative; float: left; width: 100%; line-height: 140%; text-shadow: 0 2px 3px rgba(0,0,0,0.1); }
#menuoverlay-top-menu ul{  list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 1; width: 100%;   }
#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:20%; 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;  }

#menuoverlay-top .aanvraag {  color: #fff; background: #79BBAC!important; text-transform: uppercase; font-weight: bold;  position: fixed; bottom: 40px; right: 40px; height: 53px; padding: 0 30px; font-size: 14px; text-align: center; line-height: 53px; margin-left: -130px;  text-decoration: none;  }
#menuoverlay-top .aanvraag{  background: #fff; box-shadow: 0 3px 6px rgb(0 0 0 / 10%); }
#menuoverlay-top .aanvraag:hover { background: #3c3c3b; color: #fff; }

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

#top{ position: fixed; top: 0px; left: 0px;  z-index: 999; height: 100px; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }
#top .logo{ position: absolute;	top: 15px;	left: 0px;	width: 270px;	height: 65px;	background: url("../img/logo-meuleman-schilderwerken.svg") no-repeat left center;	background-size: auto 100%; z-index: 2;}

#top:before{ position: absolute; top: 0; left: 50%; width: 440px; margin-left: -560px; height: 90px; background: url("../img/svg-verf-6.svg") no-repeat bottom center; background-size: contain; }

#top.animate  {  opacity: 0; }
#top.animate-active  {  opacity: 1;  }


/* progress ############################################################################### */
#progress{ position: fixed; top: 0px; left: 0px; right: 0px; z-index: 10000;   }
.progress-container {  width: 100%;  height: 8px; background: #fff;  box-shadow: 0 1px 3px rgba(0,0,0,0.2);  }
.progress-bar {  position: absolute; height: 4px;  background: #79BBAC;  width: 0%; top: 2px; border-radius: 5px;  }

/* TO

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

#top.top1off{   }
#top.top1off #menu{  }
#top.top1off #menu a {  }
#top.top1off #menu a.active {  }
#top.top1off #menu .tel {  }
#top.top1off .logo{  }


#top.top1off #menu .last .menuitem {  color: #fff; }
#top.top1off #menu .last .menuitem:hover {   color: #fff;  }
#top.top1off #menu .last .menuitem:after {   }

#top.vervolgpagina{   }
#top.vervolgpagina #menu{  }
#top.vervolgpagina #menu a {}
#top.vervolgpagina #menu a.active {  }
#top.vervolgpagina #menu .tel { }
#top.vervolgpagina .logo{  }


#top.vervolgpagina #menu .last .menuitem {   }
#top.vervolgpagina #menu .last .menuitem:hover {  }
#top.vervolgpagina #menu .last .menuitem:after {   }

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

#header{  z-index: 1; min-height: 850px;  margin-top: 100px;  }
#header .centered { }
#header .bg{ position: absolute; top: 40px; left: 0; right: 0;  height: 520px;  overflow: hidden;  }
#header .bg .blok{ width: 375px; height: 375px; background: #eee; margin-left: 30px;  }
#header .bg .blok:before{ position: absolute; top: 50%; left: 50%; background: #fff; width: 44px; height: 44px; margin: -22px 0 0 -22px;  }

#header .bg .blok1{  margin-left: 0px; background: url("../img/visual-header-1.jpg") no-repeat center center; background-size: cover; }
#header .bg .blok2{  background: url("../img/visual-header-2.jpg") no-repeat center center;  background-size: cover; }
#header .bg .blok3{  background: url("../img/visual-header-3.jpg") no-repeat center center;  background-size: cover; }
#header .bg .blok4{  background: url("../img/visual-header-4.jpg") no-repeat center center;  background-size: cover; }

#header .container h1{ color: #000; padding: 0 0 15px;  font-size: 50px; line-height: 110%; font-weight: bold;   }
#header .container .txt{  font-size: 15px; font-weight: 600; margin-bottom: 20px; line-height: 150%;  }

#header .container .btn.tel{  margin-left: 20px;  }


#header div.banner{	z-index: 1;  position: absolute; left: 0px;	top: 450px; width: 520px;   }



#header #usp{ position: absolute; top: 470px; width: 950px; right: 0;  }
#header #usp .usp{  }
#header #usp .usp .uspitem{ width: 50%; padding: 0px 0 0 100px; margin-bottom: 30px;  }
#header #usp .usp .uspitem.uspvink .usptitel{ font-weight: bold; font-size: 16px; line-height: 150%; }
#header #usp .usp .uspitem.uspvink .usptxt{  font-size: 14px; line-height: 150%; }
#header #usp .usp .uspitem.uspvink:before{ position: absolute; top: 5px; left: 30px; width: 50px; height: 50px; background:url("../img/svg-vink.svg") no-repeat center center; background-size: auto 15px; }

#header #usp .usp .uspitem.uspvink1:before{ background-color: #F8C200; }
#header #usp .usp .uspitem.uspvink2:before{ background-color: #79BBAC; }
#header #usp .usp .uspitem.uspvink3:before{ background-color: #1E87AC; }
#header #usp .usp .uspitem.uspvink4:before{ background-color: #B6A7B1; }



#header #certificaten{ position: absolute; top: 680px; width: 920px; right: 0; padding-top: 50px; border-top: 4px solid #f5f5f5; border-radius: 2px; }
#header #certificaten img{ width: auto; height: 48px; margin-left: 45px; }
#header #certificaten img:first-of-type{  margin-left: 0px; }

#header.animate div.banner  {  opacity: 0; transform: translateX(-20px);  transition-delay: 0.3s;  transition-property: opacity, transform; }
#header.animate-active div.banner  {  opacity: 1; transform: translateX(0px);   }


#header.animate .blok1{ opacity: 0; transform: translateY(-20px); transition-delay: 0.2s;  transition-property: opacity, transform; }
#header.animate-active .blok1 { opacity: 1; transform: translateY(0px); }

#header.animate .blok2{ opacity: 0; transform: translateY(-20px); transition-delay: 0.4s;  transition-property: opacity, transform; }
#header.animate-active .blok2 { opacity: 1; transform: translateY(0px); }

#header.animate .blok3{ opacity: 0; transform: translateY(-20px); transition-delay: 0.6s;  transition-property: opacity, transform; }
#header.animate-active .blok3 { opacity: 1; transform: translateY(0px); }

#header.animate .blok4{ opacity: 0; transform: translateY(-20px); transition-delay: 0.8s;  transition-property: opacity, transform; }
#header.animate-active .blok4 { opacity: 1; transform: translateY(0px); }


#header.animate .uspvink1{ opacity: 0; transform: translateY(-20px); transition-delay: 1.0s;  transition-property: opacity, transform; }
#header.animate-active .uspvink1 { opacity: 1; transform: translateY(0px); }

#header.animate .uspvink2{ opacity: 0; transform: translateY(-20px); transition-delay: 1.2s;  transition-property: opacity, transform; }
#header.animate-active .uspvink2 { opacity: 1; transform: translateY(0px); }

#header.animate .uspvink3{ opacity: 0; transform: translateY(-20px); transition-delay: 1.4s;  transition-property: opacity, transform; }
#header.animate-active .uspvink3 { opacity: 1; transform: translateY(0px); }

#header.animate .uspvink4{ opacity: 0; transform: translateY(-20px); transition-delay: 1.6s;  transition-property: opacity, transform; }
#header.animate-active .uspvink4 { opacity: 1; transform: translateY(0px); }


#header.animate #certificaten{ opacity: 0; transform: translateY(-20px); transition-delay: 1.8s;  transition-property: opacity, transform; }
#header.animate-active #certificaten { opacity: 1; transform: translateY(0px); }

/* blokken ############################################################################################################################# */

#blokken {  padding: 100px 0 0px; z-index: 0; text-align: center; z-index: 1;  }


#blokken .centered{   width: 1200px; }
#blokken  h2{ font-size: 40px; padding-bottom: 5px;  font-weight: 900; }
#blokken  h3{ font-size: 26px; padding-bottom: 35px;  font-weight: 900; }

#blokken .blok {  width: calc((100% - (4 * 20px)) / 4); margin: 0 10px;   height: 300px;  background: #79BBAC; font-size: 22px; font-weight: bold; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,0.4);  }
#blokken .blok span{  position: absolute;   left: 0;  right: 0;  bottom: 0; padding: 20px;  z-index: 1;  }
#blokken .blok:before {   position: absolute;  height: 60px;  left: 0;  right: 0;  bottom: 0;  background: linear-gradient(to bottom, transparent 0%, black 100%);  }
#blokken .blok:after {   position: absolute;  height: 0px;  left: 0;  right: 0;  bottom: 0;  background: #79BBAC; }
#blokken .blok:after {       transition: all .2s linear;    -o-transition: all .2s linear;    -moz-transition: all .2s linear;    -webkit-transition: all .2s linear; }
#blokken .blok:hover:after {     height: 10px;  }

#blokken .blok.blok1 {  background:  url("../img/services/schilderen.jpg") no-repeat center center; background-size: cover;}
#blokken .blok.blok2 {  background:  url("../img/services/glaszetten.jpg") no-repeat center center; background-size: cover;}
#blokken .blok.blok3 {  background:  url("../img/services/behangen.jpg") no-repeat center center; background-size: cover;}
#blokken .blok.blok4 {  background:  url("../img/services/overig.jpg") no-repeat center center; background-size: cover;}

/* methode ############################################################################################################################# */

#methode {  padding: 100px 0 80px; z-index: 0; text-align: center;  }

#methode .bg{ position: absolute; top: -80px;  bottom: 0; right: 0; width: 50%; overflow: hidden; }
#methode .bg2{ position: absolute; top: -80px; left: 0; bottom: 0;  width: 50%; overflow: hidden; }

#methode .bg:before{ position: absolute; top: 0; right: 0; margin-right: -700px; width: 100%; height: 450px; background: url("../img/svg-verf-1.svg") no-repeat left center; background-size: auto 100%;; }
#methode .bg2:before{ position: absolute; top: 250px; left: 0; margin-left: -850px; width: 100%; height: 650px; background: url("../img/svg-verf-2.svg") no-repeat right center; background-size: auto 100%;; }

#methode .centered{   width: 1000px; }
#methode  h2{ font-size: 40px; padding-bottom: 15px;  font-weight: 900; }

#methodeblokken .blokken{ margin-top: 80px; }
#methodeblokken .blokken .blok{ width: 47%;   padding: 160px 60px 50px }
#methodeblokken .blokken .blok .blokbg{ position: absolute; top: 60px; left: 0; right: 0; height: 80px; }
#methodeblokken .blokken .blok1 .blokbg{ background: url("../img/svg-ambacht.svg") no-repeat center top; background-size: auto 80%; }
#methodeblokken .blokken .blok2 .blokbg{ height: 70px; background: url("../img/svg-kwaliteit.svg") no-repeat center top; background-size: auto 100%; }

#methodeblokken .blokken .blok1{ margin-right: 6%; ;	 }
#methodeblokken .blokken .blok1{ background: #DFEEF7;	 }
#methodeblokken .blokken .blok2{ background: #ECF5F2;	 }

#methodeblokken .blokken .blok .nummer{ position: absolute; top: 30px; right: 30px;  width: 40px; height: 40px; text-align: center; line-height: 40px; font-weight: bold; font-size: 15px; background: #fff; color: #fff;	 }

#methodeblokken .blokken .blok1 .nummer{  color: #459ACE;	 }
#methodeblokken .blokken .blok2 .nummer{  color: #79BBAC;	 }

#methodeblokken .blokken .blok .titel{ text-align: center; font-weight: 900; font-size: 28px; }
#methodeblokken .blokken .blok .subtitel{ text-align: center; font-weight: normal; font-style: italic; font-size: 20px; line-height: 150%; margin-top: 5px;  }
#methodeblokken .blokken .blok .lijst{  margin-top: 10px; text-align: left; font-size: 15px; line-height: 180%; }

#methodeblokken .blokken .blok .lijst li{ padding: 0 0 0 50px;  margin: 20px 0 0;  line-height: 140%;  }
#methodeblokken .blokken .blok .lijst li:before{ position: absolute; width: 25px; height: 25px; top: 4px; left: 0; background: url("../img/svg-vink-wit.svg") no-repeat center center; background-size: 50% auto;}

#methodeblokken .blokken .blok .lijst li.blauw:before{ background-color: #459ACE; }
#methodeblokken .blokken .blok .lijst li.geel:before{ background-color: #F8C200; }
#methodeblokken .blokken .blok .lijst li.groen:before{ background-color: #79BBAC; }
#methodeblokken .blokken .blok .lijst li.paars:before{ background-color: #4E3652; }

#methodeblokken .blokken .blok .lijst .lijsttitel{ font-size: 18px; font-weight: bold; padding-bottom: 5px; }
#methodeblokken .blokken .blok .lijst .lijstsubtitel{ font-size: 14px; font-weight: normal;  line-height: 150%; }




#methode .methodeintro.animate  {  opacity: 0; transform: translateY(-10px);  }
#methode .methodeintro.animate-active  {  opacity: 1; transform: translateY(0px);   }

#methodeblokken .blokken .blok1.animate  {  opacity: 0; transform: translateY(-10px);  }
#methodeblokken .blokken .blok1.animate-active  {  opacity: 1; transform: translateY(0px);   }

#methodeblokken .blokken .blok2.animate  {  opacity: 0; transform: translateY(-10px);  transition-delay: 0.1s;  transition-property: opacity, transform;  }
#methodeblokken .blokken .blok2.animate-active  {  opacity: 1; transform: translateY(0px);   }


#methodeblokken .blokken .blok1 .nummer.animate  {  opacity: 0; transform: translateX(-10px); transition-delay: 0.2s;  transition-property: opacity, transform; }
#methodeblokken .blokken .blok1 .nummer.animate-active  {  opacity: 1; transform: translateX(0px);   }

#methodeblokken .blokken .blok2 .nummer.animate  {  opacity: 0; transform: translateX(-10px);  transition-delay: 0.3s;  transition-property: opacity, transform;  }
#methodeblokken .blokken .blok2 .nummer.animate-active  {  opacity: 1; transform: translateX(0px);   }

#methodeblokken .blokken .blok1 .blokbg.animate  {  opacity: 0; transform: translateY(-10px); transition-delay: 0.4s;  transition-property: opacity, transform; }
#methodeblokken .blokken .blok1 .blokbg.animate-active  {  opacity: 1; transform: translateY(0px);   }

#methodeblokken .blokken .blok2 .blokbg.animate  {  opacity: 0; transform: translateY(-10px);  transition-delay: 0.5s;  transition-property: opacity, transform;  }
#methodeblokken .blokken .blok2 .blokbg.animate-active  {  opacity: 1; transform: translateY(0px);   }

#methodeblokken .blokken .blok1 .titel.animate  {  opacity: 0; transform: translateX(-10px); transition-delay: 0.6s;  transition-property: opacity, transform; }
#methodeblokken .blokken .blok1 .titel.animate-active  {  opacity: 1; transform: translateX(0px);   }

#methodeblokken .blokken .blok2 .titel.animate  {  opacity: 0; transform: translateX(-10px);  transition-delay: 0.7s;  transition-property: opacity, transform;  }
#methodeblokken .blokken .blok2 .titel.animate-active  {  opacity: 1; transform: translateX(0px);   }

#methodeblokken .blokken .blok1 .subtitel.animate  {  opacity: 0; transform: translateX(-10px); transition-delay: 0.8s;  transition-property: opacity, transform; }
#methodeblokken .blokken .blok1 .subtitel.animate-active  {  opacity: 1; transform: translateX(0px);   }

#methodeblokken .blokken .blok2 .subtitel.animate  {  opacity: 0; transform: translateX(-10px);  transition-delay: 0.9s;  transition-property: opacity, transform;  }
#methodeblokken .blokken .blok2 .subtitel.animate-active  {  opacity: 1; transform: translateX(0px);   }


#methodeblokken .blokken .blok1 .lijst.animate  {  opacity: 0; transform: translateX(-10px); transition-delay: 1.0s;  transition-property: opacity, transform; }
#methodeblokken .blokken .blok1 .lijst.animate-active  {  opacity: 1; transform: translateX(0px);   }

#methodeblokken .blokken .blok2 .lijst.animate  {  opacity: 0; transform: translateX(-10px);  transition-delay: 1.1s;  transition-property: opacity, transform;  }
#methodeblokken .blokken .blok2 .lijst.animate-active  {  opacity: 1; transform: translateX(0px);   }


/* cta ############################################################################################################################# */

#cta { text-align: center; padding: 50px 0; }
#cta .cta{ padding: 0 320px; }
#cta .btns{ padding-top: 50px; }
#cta .btns .offerte{ margin-left: 250px; margin-right: 20px; }

#cta h2{ padding-bottom: 10px; font-size: 48px; }
#cta h3{ padding-bottom: 10px;  color: #79BBAC; font-size: 28px; }

#cta2 { text-align: center; padding: 50px 0; }
#cta2 .cta2{ padding: 0 320px; }
#cta2 .btns{ padding-top: 50px; }
#cta2 .btns .offerte{ margin-left: 250px; margin-right: 20px; }

#cta2 h2{ padding-bottom: 10px; font-size: 48px; }
#cta2 h3{ padding-bottom: 10px;  color: #79BBAC; font-size: 28px; }


/* quote ############################################################################################################################# */

#quote {   margin: 50px 0;  }

#quote .bg{ position: absolute; top: 0px;  bottom: 0; right: 0; width: 100%; overflow: hidden; }
#quote .bg:before{ position: absolute; top: 0; left: 100px; width: 100%; height: 300px; background: url("../img/svg-verf-3.svg") no-repeat center center; background-size: 1500px 100%; }

#quote .centered{ width: 1200px;  z-index: 1; }


#quote .quoteitems{ margin-top: -150px; background: #fff; border-radius: 20px; box-shadow: 0px 5px 30px rgba(0,0,0,0.15); }
#quote .quoteitems:before{ position: absolute; top: -10px; height: 10px; left: 50%; width: 320px; margin-left: -160px; background: #79BBAC; border-radius: 10px 10px 0 0; }

#quote .quoteitem{ min-height: 150px;  color: #000; padding: 70px 70px 70px 290px;  }

#quote .quoteitem .afbeelding{ position: absolute; top: 60px; left: 90px; box-shadow: 0px 5px 30px rgba(0,0,0,0.15); width: 135px; height: 135px; background: url("../img/review/review.jpg") no-repeat center center; background-size: auto 100%; border-radius: 100%; border: 10px solid #fff; }

#quote .quoteitem .titel{  font-size: 23px; font-weight: 600; font-style: italic; }
#quote .quoteitem .subtitel{ margin-top: 5px; font-weight: bold; font-size: 13px; color: #79BBAC; }
#quote .quoteitem .text{  margin-top: 10px;  font-size: 15px; line-height: 170%; }

#quote .sterren .ster{ height: 20px; margin: 5px 0;  }
#quote .sterren .ster{ height: 20px; width: 20px; margin-right: 6px; background: url("../img/svg-ster.svg") no-repeat center center; background-size: auto 100%; }



#quote .quoteitems.animate{ opacity: 0; transition-delay: .5s; }
#quote .quoteitems.animate-active{ opacity: 1; }

#quote .quoteitems.animate:before{ opacity: 0; transition-delay: 1s; }
#quote .quoteitems.animate-active:before{ opacity: 1; }
#quote .quoteitems.animate:after{ opacity: 0; transition-delay: 1s; }
#quote .quoteitems.animate-active:after{ opacity: 1; }


#quote .quoteitem ol{ text-align: left; padding: 20px 0 20px 40px; }
#quote .quoteitem ol li{ list-style: decimal;  padding: 5px 0 5px 30px;  list-style-position: outside; }


/* projecten ############################################################################################################################# */

#projecten{ padding: 120px 0 50px; overflow-x: hidden;  }
#projecten h2{ padding-bottom: 5px;  }
#projecten .bekijkalles{ position: absolute; top: 10px; right: 0; padding: 10px 30px; font-size: 14px; color: #fff; font-weight: bold; background: #79BBAC;  }
#projecten .bekijkalles:hover{ background: #000; text-decoration: none;  }

#projecten .txt{ padding-right: 600px;  }


#projecten #projectenblokken{ margin-top: 20px; overflow: hidden !important; padding: 20px 10px 50px 20px; width: 1640px; margin-left: -20px; }
#projecten #projectenblokken .bgleft{ position: absolute; top: 0; left: -30px; bottom: 0; width: 30px; box-shadow: 10px 0px 5px #fff; z-index: 500; }
#projecten #projectenblokken .bgright{ position: absolute; top: 0; right: -30px; bottom: 0; width: 30px; box-shadow: -5px 0px 5px #fff; z-index: 500; }

#projecten #projectenblokken .projectenblok{   }
#projecten #projectenblokken .projectenblok .projectenimg img{ width: 100%; height: 510px!important; object-fit: contain; object-position: center; }

#projecten .controls{ position: absolute; top: 2px; right: 210px;   }
#projecten .controls.noalles{  right: 60px;   }
#projecten .controls .swiper-button-next { position: absolute; right: -55px!important; left: auto!important; top: 30px!important;  background: #D8E9F1 url("../img/svg-pijl-rechts-kleur2.svg") no-repeat center center; background-size: auto 16px;   height: 52px!important; width: 52px!important;  }
#projecten .controls .swiper-button-prev { position: absolute; left: -55px!important; right: auto!important; top: 30px!important;  background: #D8E9F1 url("../img/svg-pijl-links-kleur2.svg") no-repeat center center; background-size: auto 16px;  height: 52px!important; width: 52px!important;  }

#projecten .controls .swiper-button-next:hover { background: #000 url("../img/svg-pijl-rechts-wit.svg") no-repeat center center; background-size: auto 16px;     }
#projecten .controls .swiper-button-prev:hover { background: #000 url("../img/svg-pijl-links-wit.svg") no-repeat center center; background-size: auto 16px;    }



/* overons ############################################################################################################################# */
#overons {  padding: 50px 0 150px;   }

#overons .bg { position: absolute; top: 150px; height: 650px; left: 0; width: 50%; overflow-x: hidden; }
#overons .bg:before { position: absolute;   left: 0;  top: 0px;  margin-left: -450px; width: 100%; height: 650px; background: url("../img/svg-verf-4.svg") no-repeat right center; background-size: auto 100%; }

#overons .overons{ padding: 20px 0 30px 57% ;  }
#overons .overons:before{ position: absolute; top: 0px; left: 20px; width: 44%;  bottom: 0; background: url("../img/visueel-overons.jpg") no-repeat center center; background-size: cover; }
#overons .overons h2{ font-size: 42px; padding-bottom: 20px;  }
#overons .overons .txt{  padding: 0 0 30px 0px; }
#overons .overons .zwart{  margin-right: 20px; }
#overons .overons.animate  {  opacity: 0;   }
#overons .overons.animate-active  {  opacity: 1;  }
#overons .overons.animate:before  {  transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear;   }
#overons .overons.animate:before  {  opacity: 0; transform: translateX(20px);  transition-delay: 0.3s;  transition-property: opacity, transform;   }
#overons .overons.animate.animate-active:before   {  opacity: 1; transform: translateX(0px);   }


/* faq ############################################################################################################################# */

#faq { padding: 50px 0 50px; overflow-x: hidden; }
#faq .faq{ padding: 80px 52% 80px 0px; }
#faq .faq:before{ position: absolute; top: 90px; right: 180px; width: 450px; height: 450px;  background: url("../img/visueel-faq1.jpg") no-repeat top center; background-size: cover; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }
#faq .faq:after{ position: absolute; top: 320px; right: 20px; width: 300px; height: 300px;  background: url("../img/visueel-faq2.jpg") no-repeat top center; background-size: cover; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }


#faq.animate .faq:before  {  opacity: 0; transform: translateX(20px);  transition-delay: 0.1s;  transition-property: opacity, transform;   }
#faq.animate.animate-active .faq:before   {  opacity: 1; transform: translateX(0px);   }
#faq.animate .faq:after  {  opacity: 0; transform: translateY(-20px);  transition-delay: 0.3s;  transition-property: opacity, transform;   }
#faq.animate.animate-active .faq:after   {  opacity: 1; transform: translateY(0px);   }

#faq .bg { position: absolute; top: 0px; right: 0; bottom: 0;  width: 50%; overflow: hidden; }
#faq .bg:before{ position: absolute; top: 0px; right: 0; margin-right: -100px; width: 100%; height: 650px; background: url("../img/svg-verf-2b.svg") no-repeat right center; background-size: auto 100%;; }


#faq h2{ font-size: 56px; padding-bottom: 5px; }
#faq h3{ font-size: 26px; padding-bottom: 5px; }
#faq .faqitems{ padding: 10px 0 20px;  }
#faq .faqitems li{ cursor: pointer; padding:  20px 60px 20px 60px; line-height: 150%; background: #E8F2F7; color: #000!important;  min-height: 60px; margin-bottom: 15px;  }
#faq .faqitems li:after{ position: absolute; top: 0; right: 0; bottom: 0; width: 60px; background: url("../img/svg-pijl-rechts-wit.svg") no-repeat center center; background-size: auto 14px; }
#faq .faqitems li .nummer{ position: absolute; top: 18px; left: 18px; height: 24px;  line-height: 24px; width: 24px; background: #fff; color: #459ACE; font-weight: bold; text-align: center; }
#faq .faqitems li:hover{ background: #79BBAC; color: #fff; }
#faq .faqitems .faqitem.animate  {  opacity: 0; transform: translateY(-20px);  }
#faq .faqitems .faqitem.animate-active  {  opacity: 1; transform: translateY(0px);   }
#faq .faqitems .faqitem2.animate  {  transition-delay: 0.2s;  transition-property: opacity, transform;   }
#faq .faqitems .faqitem3.animate  {  transition-delay: 0.3s;  transition-property: opacity, transform;   }
#faq .faqitems .faqitem4.animate  {  transition-delay: 0.4s;  transition-property: opacity, transform;   }
#faq .faqitems .faqitem5.animate  {  transition-delay: 0.5s;  transition-property: opacity, transform;   }
#faq .meerfaq { padding: 0 5px 0 0px; font-size: 14px;  color: #000;  }
#faq .meerfaq:hover {  color: #459ACE;  text-decoration: none; }


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

#afsluiting { padding: 50px 0 80px; font-size: 12px;text-align: center; font-weight: 500;   }
#afsluiting .afsluiting {  padding: 130px 0 0; line-height: 150%; }
#afsluiting .afsluiting:before {  position: absolute; top: 0px; left: 50%; margin-left: -75px; width: 150px; height: 95px; background:url("../img/logo-meuleman-schilderwerken-staand.svg") no-repeat center center; background-size: auto 100% ;}

#afsluiting .bg { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 150px; overflow: hidden;  }
#afsluiting .bg:before {  position: absolute; bottom: -80px; left: -80px;   width: 200px; height: 200px;  background:  url("../img/svg-verf-rond2.svg") no-repeat center center; background-size: contain }

#afsluiting a{ ; }
#afsluiting a:hover{ color: #855D53; }

#afsluiting #naarboven{ z-index: 1; cursor: pointer; position: absolute; bottom: 30px; left: 30px;  width: 50px; height: 50px; background: #F8C200;  border-radius: 100%;  }
#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 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; }


/* CONTACTOPNEMEN ############################################################################################################################# */

#contactopnemenbol { position: fixed; bottom: 0px; right: 0px; width: 100px; height: 100px; overflow: hidden; z-index: 2000; }
#contactopnemenbol .circle{ position: fixed; bottom: 9px; right: -120px; width: 70px; height: 70px; background: #fff url("../img/fedor-meuleman.jpg") no-repeat center center; background-size: cover; border-radius: 100%; border: 2px solid #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3); }
#contactopnemenbol .circle{ 
    -webkit-animation: contactopnemenbol 2s ease 0s 1 normal forwards;
    animation: contactopnemenbol 2s ease 0s 1 normal forwards;
	animation-delay: 2s;
}

@keyframes contactopnemenbol {  
	0% { opacity: 0; -webkit-transform: rotate(359deg); right: -120px; }   
	100% { opacity: 1; -webkit-transform: rotate(0deg); right: 10px; }  
}
@-webkit-keyframes contactopnemenbol { 
	0% { opacity: 0; -webkit-transform: rotate(359deg); right: -120px; }   
	100% { opacity: 1; -webkit-transform: rotate(0deg); right: 10px; }   
}
@-moz-keyframes contactopnemenbol {  
	0% { opacity: 0; -webkit-transform: rotate(359deg); right: -120px; }   
	100% { opacity: 1; -webkit-transform: rotate(0deg); right: 10px; }  
}

#contactopnemenbol .circle a.contactoptie{ position: absolute;  width: 20px; height: 20px; background: #fff; border-radius: 100%;  opacity: 0; }
#contactopnemenbol .circle a.whatsapp{   top: -23px; left: -5px; background: #79BBAC url(../img/svg-whatsapp-wit.svg) no-repeat center center; background-size: auto 60%; }
#contactopnemenbol .circle a.telefoon{   top: 0px; left: -25px; background: #1E87AC url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 60%; }
#contactopnemenbol .circle a.email{    top: 30px; left: -30px; background: #F8C200 url("../img/svg-email-wit.svg") no-repeat center center; background-size: auto 36%;}
#contactopnemenbol .circle a.whatsapp:hover{   background-color: #79BBAC; }
#contactopnemenbol .circle a.telefoon:hover{   background-color: #79BBAC; }
#contactopnemenbol .circle a.email:hover{   background-color: #79BBAC; }

#contactopnemenbol .circle a.whatsapp{ 
    -webkit-animation: circlefade 2s ease 0s 1 normal forwards;
    animation: circlefade 2s ease 0s 1 normal forwards;
	animation-delay: 4s;
}

#contactopnemenbol .circle a.telefoon{ 
    -webkit-animation: circlefade 2s ease 0s 1 normal forwards;
    animation: circlefade 2s ease 0s 1 normal forwards;
	animation-delay: 4.5s;
}

#contactopnemenbol .circle a.email{ 
    -webkit-animation: circlefade 2s ease 0s 1 normal forwards;
    animation: circlefade 2s ease 0s 1 normal forwards;
	animation-delay: 5s;
}

@keyframes circlefade {     0% { opacity: 0;   }     100% {  opacity: 1;   }      } 
@-webkit-keyframes circlefade {     0% { opacity: 0;   }     100% {  opacity: 1;   } } 
@-moz-keyframes circlefade {     0% { opacity: 0;   }     100% {  opacity: 1;   } } 

#contactopnemenbol .circle .hi{  position: absolute; top: -30px; left: 30px; width: 40px; height: 40px;   background:  url(../img/svg-hi.svg) no-repeat center center; background-size: auto 100%;  opacity: 1; }


#contactopnemenbol .circle .hi{ 
    -webkit-animation: hifade 2s ease 0s 1 normal forwards;
    animation: hifade 2s ease 0s 1 normal forwards;
	animation-delay: 5s;
}

@keyframes hifade {     0% { opacity: 1;   }     100% {  opacity: 0;   }      } 
@-webkit-keyframes hifade {     0% { opacity: 1;   }     100% {  opacity: 0;   }      } 
@-moz-keyframes hifade {     0% { opacity: 1;   }     100% {  opacity: 0;   } } 

#contactopnemenbol .circle .overlay{ position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;  border-radius: 100%;  }

#contactopnemenbol:before { position: absolute; right: -120px; bottom: -120px; width: 120px; height: 120px; background:  url("../img/svg-verf-rond.svg") no-repeat center center; background-size: contain  }

#contactopnemenbol:before{ 
    -webkit-animation: beforefade 1s ease 0s 1 normal forwards;
    animation: beforefade 1s ease 0s 1 normal forwards;
	animation-delay: 3s;
}

@keyframes beforefade {     0% { right: -90px; bottom: -90px;   }     100% {  right: -35px; bottom: -45px;   }      } 
@-webkit-keyframes beforefade {    0% { right: -90px; bottom: -90px;   }     100% {  right: -35px; bottom: -45px;   }      } 
@-moz-keyframes beforefade {     0% { right: -90px; bottom: -90px;   }     100% {  right: -35px; bottom: -45px;   }      } 


/* ENGELS ############################################################################################################################# */

body.lang-en  {  }