@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; }



.video {    margin-left: 0 !important; }

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

html, body { font-family: 'Merienda', cursive; font-size:14px;	font-weight: normal; background: #fff;	color: #3C522F;	line-height: 200%; }

body.noscroll { overflow: hidden; }

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

h1, h2, h3, h4, h5{	color: #3C522F; line-height: 130%;  }
h1 span, h2 span, h3 span{  }
h1{ font-size: 40px; padding-bottom: 25px; font-weight: bold; }
h2{ font-size: 32px; padding-bottom: 25px; font-weight: bold;  }
h3{ font-size: 18px; padding-bottom: 15px; font-weight: bold; }
h4{ font-size: 14px; padding-bottom: 25px; font-weight: bold; }

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

.centered.smaller { width: 1460px;  }

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

.btn{ border-radius: 50px; font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase;     background: #B8C184;   padding: 0 35px; height: 50px; line-height: 50px;  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: #333; 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 #009239;  }
.btn.transparant:hover { background: #009239;   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); border-radius: 50px;  }
.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 #009239;  }
.btn.transparantwit:hover { background: #009239;   color: #fff;  }

.btn.scan { padding-left: 60px; background: #009239; 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: #009239; }
.btn.openmenu:hover:after { background: url("../img/svg-menu-kleur.svg") no-repeat center center; background-size: auto 100%;  }

.btn.tel { padding-left: 50px; background: #009239; color: #fff; box-shadow: none;}
.btn.tel:after { content:''; position: absolute; top: 16px; left: 16px; width: 18px; height: 18px; background: url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 100%; }
.btn.tel:hover { background: #01319a; }

.btn-leesverder{ background: #B8C184; 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{ border-radius: 50px;  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: #B8C184;   }

.btn.arrow { padding-right: 50px;}
.btn.arrow:after { content:''; position: absolute; top: 50%; margin-top: -7px; right: 19px; width: 8px; height: 14px; background: url("../img/svg-pijl-rechts-wit.svg") no-repeat center center; background-size: auto 100%; }



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

#menu{ position: absolute; top: 20px; 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 .openmenu .menuitem{ margin-left: 10px; margin-right: 5px; height: 54px;  width: 54px; border-radius: 100%;     }
#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: 10px;	padding: 0 25px;  border-radius: 5px; border: 2px solid transparent;   }

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

#menu .menumetsubmenu.active{  }
#menu .menumetsubmenuli{ margin-right: 15px; }
#menu .menumetsubmenuli:before{ position: absolute; top: 50%; margin-top: -3px; right: -2px; width: 10px; height: 6px; background: url("../img/svg-pijl-beneden-kleur-1.svg") no-repeat top left; background-size: auto 100%; }
#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: #3C522F;  font-size: 14px; font-weight: bold; text-transform: uppercase; }
#menu a.active{  color: #B8C184!important; text-decoration: underline; }
#menu a:hover{  color: #B8C184!important; }
#menu a.active:hover{   }

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

#menu .last .menuitem { border-radius: 55px; text-transform: uppercase; background: #B8C184; padding: 0 35px;  color:#fff; line-height: 52px; height: 55px; margin-left: 20px; }
#menu .last:hover .menuitem {  background: #3C522F; color:#fff!important;   text-decoration: none;  }

#menu .menusplit { background: #444; }
.submenu{	border-bottom: 15px solid #B8C184; background: #3C522F;	}
.submenu a{	color: #fff!important;		}
.submenu a:hover{  background:#3C522F!important; color: #B8C184!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: #3C522F; }
#menuoverlay:after { z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom:0; opacity: 1; background: #3C522F url("../img/visual-menu.jpg") no-repeat right top; background-size: cover; }
#menuoverlay.active { display: block; }
#menuoverlay .content{ height: 100vh; z-index: 10000; }
#menuoverlay .logowit { position: absolute; top: 30px; left: 0px; width: 215px; height: 55px;  background: url("../img/logo-blooming-green-wit.svg") no-repeat; background-size: auto 100%; opacity: 0.5; }

#menuoverlay .bg{ z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
#menuoverlay .bg:before{ display: none; position: absolute; bottom: 0; right: 0; width: 650px; height: 300px; }

#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-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%;   }
#menuoverlay #adres .kolom.socialmedia .facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; }
#menuoverlay #adres .kolom.socialmedia .twitter{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-twitter-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .instagram{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%;  }
#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-top { position: absolute; top: 35px; right: 0px;  }
#menuoverlay-top #sluiten { z-index: 1; cursor: pointer; margin-left: 10px; border-radius: 5px; 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: #B8C184; }
#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: 5px; 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-menu { position: absolute; top: 150px; left: 0px;  }
#menuoverlay-top-menu .titel{ position: relative; float: left; width: 100%; color: #B8C184; 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%; }
#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:25%; 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 { border-radius: 53px; color: #fff; text-transform: uppercase; font-weight: bold;  position: fixed; bottom: 40px; right: 100px; height: 53px; padding: 0; font-size: 14px; text-align: center; line-height: 53px; width: 190px; margin-left: -130px;  text-decoration: none;  }
#menuoverlay-top .aanvraag{  background: #B8C184; box-shadow: 0 3px 6px rgb(0 0 0 / 10%); text-shadow: 0 2px 4px rgb(0 0 0 / 20%); }
#menuoverlay-top .aanvraag:hover { background: #B8C184; color: #fff; }

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

#top{ position: fixed; top: 0px; left: 0px;  z-index: 999; height: 80px; }
#top .logo{ position: absolute;	top: 20px;	left: 0px;	width: 235px;	height: 80px;	background: url("../img/logo-blooming-green.svg") no-repeat left center;	background-size: auto 100%; z-index: 2;}

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

#top.top1off{  background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);    }
#top.top1off #menu{ top: 10px; }
#top.top1off .logo{ height: 60px; top: 10px; }
			
#top.top1off #menu .menuitem {    }
#top.top1off #menu .last .menuitem {    }
#top.top1off #menu .last .menuitem:hover {  }
#top.top1off #menu .last .menuitem:after {   }

#top.vervolgpagina{  background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);   }
#top.vervolgpagina #menu{   top: 10px; }
#top.vervolgpagina .logo{  height: 60px; top: 10px; }

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


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


#header{  height: 700px; z-index: 1;  }



#header .bg{ position: absolute; top: 0px; left: 0; right: 0;  height: 700px;  overflow: hidden;  }
#header .bg:before {  position: absolute; top: 0px; right: 0px;   height: 700px;  left: 0px;   background:  url("../img/visual-header.jpg") repeat-x center bottom;  background-size: auto 100%; }
#header:after {  position: absolute; bottom: -30px; z-index: 0; right: 0px;   height: 40px;  left: 0px; background:#fff;  box-shadow: -1px -20px 30px rgba(0,0,0,0.05);  }

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

#header div.banner{	z-index: 1;  position: absolute;	top: 200px;	left:0px; width: 500px;  }
#header .container h1{  padding-bottom: 15px;  font-size: 60px; line-height: 125%; color: #566A3B; }
#header .container h3{  padding-bottom: 15px; line-height: 150%; padding-right: 100px; font-size: 20px; font-style: italic; color: #B8C184;  }
#header .container .btn{  margin: 10px 0 0 0; }


#header div.banner.animate  {  opacity: 0; transform: translateX(-20px);  }
#header div.banner.animate-active  {  opacity: 1; transform: translateX(0px);   }


#header #headerblok { position: absolute; left: 0; top: 600px; width: 100%; z-index: 1; }
#header #headerblok .headerblok{ color: #3C522F; ; width: 31%; height: 180px; padding: 36px 45px 36px 190px; box-shadow: 0px 9px 35px rgba(0,0,0,0.1); background: #fff; overflow: hidden; border-radius: 20px; line-height: 160%; }
#header #headerblok .headerblok1{  }
#header #headerblok .headerblok2{  margin-left: 2.5%; margin-right: 2.5%; }

#header #headerblok .headerblok span.title{ line-height: 120%; color: #566A3B; font-size: 26px; font-weight: 600;  box-sizing: border-box; padding-bottom: 5px;  }
#header #headerblok .headerblok span.txt{ padding-right: 10px; font-size: 15px;  }

#header #headerblok .headerblok:before{ border-radius: 20px 0 0 20px; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 150px; background: #eee;}
#header #headerblok .headerblok:before{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear; }
#header #headerblok .headerblok:hover{  box-shadow: 0 9px 20px rgba(0,0,0,0.2); margin-top: -5px; }

 
#header #headerblok .headerblok:after{ position: absolute; top: 50%; margin-top: -7px; right: 10px; width: 20px; height: 14px; background: url("../img/svg-pijl-rechts-donker.svg") no-repeat center center; background-size: auto 80%;  opacity: 0.2; }
#header #headerblok .headerblok:after{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear; }
#header #headerblok .headerblok:hover:after{  right: 20px; opacity: 1;  background: url("../img/svg-pijl-rechts-kleur.svg") no-repeat center center; background-size: auto 80%; }

#header #headerblok .headerblok1:before{ background: url("../img/visual-tuinontwerp.jpg") no-repeat top left; background-size: cover; }
#header #headerblok .headerblok2:before{ background: url("../img/visual-tuinadvies.jpg") no-repeat top left; background-size: cover; }
#header #headerblok .headerblok3:before{ background: url("../img/visual-workshops.jpg?v=2") no-repeat top left; background-size: cover; }

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



#header #headerblok .headerblok:hover:after{
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-name: headerblokfadeOutUp; 
    animation-name: headerblokfadeOutUp; 
}

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



/* uspbar ############################################################################################################################# */


#uspbar  {   padding: 130px 0 70px;  box-shadow: -1px -20px 30px rgba(0,0,0,0.05); }
#uspbar .uspbar { padding: 0 5%; }
#uspbar .uspbar ul{ position: relative; float: left; width: 100%; }
#uspbar .uspbar li{ position: relative; float: left; width: 33%; line-height: 160%; }
#uspbar .uspbar li.middle{   }
#uspbar .uspbar li.last{   }
#uspbar .uspbar li span{ padding: 0px 50px 0px 75px; }
#uspbar .uspbar li span:after{ position: absolute; top: 0px; left: 1px; width: 46px; height: 46px; background: url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 30% ;}
#uspbar .uspbar li span:before{ position: absolute; top: 0px; left: 0px; width: 46px; height: 46px; border-radius: 100%; background: #B8C184;  }
#uspbar .uspbar li span:before{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }

#uspbar:after  {  background: #B8C184; position: absolute; bottom: 0px; left: 50%; margin-left: -60px; width: 120px; height: 5px; }


#uspbar .uspbar li.animate  {  opacity: 0; transform: translateY(-20px);  }
#uspbar .uspbar li.animate-active  {  opacity: 1; transform: translateY(0px);   }
#uspbar .uspbar li.first  {  transition-delay: 0.3s;  transition-property: opacity, transform;   }
#uspbar .uspbar li.middle  {  transition-delay: 0.4s;  transition-property: opacity, transform;   }
#uspbar .uspbar li.last  {  transition-delay: 0.5s;  transition-property: opacity, transform;   }


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

#intro {  padding: 130px 0 70px;   }

#intro .bg { position: absolute; top: 0px; height: 900px; right: 0; width: 100%; overflow-x: hidden; }
#intro .bg:before { position: absolute; top: 0px;  bottom: 0; left: 0; right: 0; background: url("../img/visual-bg.jpg") no-repeat top center; background-size: cover; }

#intro .centered { width: 1460px; }
#intro .intro{ padding: 30px 55% 0 130px ;  }
#intro .intro:before{ position: absolute; top: 0px; right: 130px; width: 550px; height: 430px; border-radius: 25px; background: url("../img/visual-blooming-green.jpg") no-repeat center center; background-size: cover; }
#intro .intro:after{ position: absolute;  right: 70px; top: -40px; width: 50px; height: 50px; background: url("../img/svg-leaf.svg") no-repeat center center; background-size: contain; }


#intro .intro h2{ font-size: 56px; }
#intro .intro h3{ font-size: 24px; color: #B8C184; }
#intro .intro .txt{  padding: 0 0 40px; }

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


#intro .intro.animate:before  {  transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear;   }
#intro .intro.animate:before  {  opacity: 0; transform: translateX(20px);  transition-delay: 0.3s;  transition-property: opacity, transform;   }
#intro .intro.animate.animate-active:before   {  opacity: 1; transform: translateX(0px);   }


/* review ############################################################################################################################# */

#review {   padding: 70px 0 70px; }
#review .centered { width: 1200px; }
#review .review{ padding: 40px 60px 45px 240px; background: #fff; box-shadow:  0 3px 40px rgba(0,0,0,0.1); border-radius: 25px; }
#review .review:before{ background: #fff url("../img/referenties/review.jpg") no-repeat center center; background-size: cover; position: absolute; top: 40px; left: 50px; width: 125px; height: 125px; border-radius: 100%; border: 10px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
#review .review .sterren { padding-bottom: 5px; margin: 15px 0 10px; }
#review .review .sterren .ster{ width: 22px; height: 22px; background: url("../img/svg-ster.svg") no-repeat top left; background-size: auto 100%; margin-right: 3px; }
#review .review .reviewtxt { padding-bottom: 5px; }
#review .review .reviewer { font-weight: bold; color: #B8C184; }

#review .review.animate  {  opacity: 0; transform: translateY(-20px);  }
#review .review.animate-active  {  opacity: 1; transform: translateY(0px);   }

#review .review.zonderfoto{ padding-left: 70px; } 
#review .review.zonderfoto:before{ display: none; } 



/* review ############################################################################################################################# */

#reviewslider {   padding: 0;  }

#reviewslider .centered { width: 1200px; }
#reviewslider .reviewslider{ padding: 60px 110px;  }
#reviewslider .reviewslider .reviewbg{ z-index: 0; position: absolute; top:20px; left: 50px; right: 50px; bottom: 20px; background: #fff; box-shadow:  0 3px 20px rgba(0,0,0,0.1); border-radius: 25px; }
#reviewslider .reviewslider .sterren { padding-bottom: 5px; margin: 15px 0 10px; }
#reviewslider .reviewslider .sterren .ster{ width: 22px; height: 22px; background: url("../img/svg-ster.svg") no-repeat top left; background-size: auto 100%; margin-right: 3px; }
#reviewslider .reviewslider .reviewtxt { z-index: 1;  padding-bottom: 5px; }
#reviewslider .reviewslider .reviewer { z-index: 1;  font-weight: bold; color: #B8C184; }
.reviewslidercontainer { }


#reviewslider .slideblok { padding: 0 0 40px;  }
#reviewslider .swiper { width: 100%; height: 100%;  }
#reviewslider .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center;        justify-content: center;        -webkit-box-align: center;        -ms-flex-align: center;        -webkit-align-items: center;        align-items: center;      }
#reviewslider .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
#reviewslider .swiper-button-prev {   left: 0px; color: #000; margin-top: -30px; --swiper-navigation-size: 30px; }
#reviewslider .swiper-button-next {  right: 0px; color: #000;  margin-top: -30px; --swiper-navigation-size: 30px; }

#reviewslider.vervolgpagina {  margin-top: 20px;  }
#reviewslider.vervolgpagina .slideblok{  padding: 0 0 40px; }
/* diensten ############################################################################################################################# */


#diensten { padding: 70px 0;  }
#diensten .bg{ position: absolute; top: 0;  left: 0;   right: 0;  bottom: 0; overflow: hidden; }
#diensten .bg:before { position: absolute; bottom: 70px; width: 450px;  right: 50%; margin-right:-950px; height: 650px; background:  url("../img/logo-blooming-green-watermerk.svg") no-repeat top left; background-size: contain; }
#diensten .centered { width: 1440px; }
#diensten h2{ font-size: 40px; padding-bottom: 10px;  }
#diensten h3{ font-size: 24px; color: #B8C184; }
#diensten .txt{ padding: 0 10% 40px; }

#diensten .txtlinks{ width: 50%; padding-right: 220px; }
#diensten .txtlinks:before{ position: absolute; right: -1px; top: 30px; bottom: 0; width: 2px; background: rgba(0,0,0,0.05); }
#diensten .txtrechts{ padding-top: 10px; width: 50%; padding-left: 70px; font-weight: bold; }
#diensten .txtrechts .txt span{ color: #B8C184; }

#diensten .dienstblokken{ width: 50%;}

#diensten .dienstblokken.links{ padding-right: 70px; clear: both; }
#diensten .dienstblokken.links:before{ position: absolute; right: -1px; top: 30px; bottom: 0; width: 2px; background: rgba(0,0,0,0.05); }
#diensten .dienstblokken.rechts{ padding-left: 70px; }

#diensten .dienstblokken .dienstblok{ width: 100%;  border-radius: 25px; padding: 50px 60px 50px 340px; margin-top: 30px; background: #fff; box-shadow: 0 3px 35px rgba(25,38,102,0.10);  }
#diensten .dienstblokken .dienstblok:after{ position: absolute;  right: 20px; top: 20px; width: 31px; height: 30px; background: url("../img/svg-leaf.svg") no-repeat center center; background-size: contain; }
#diensten .dienstblokken .dienstblok:after{     transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear;  -webkit-transition: all .5s linear; }


#diensten .dienstblokken .dienstblok:before{ position: absolute; left: 0; top:0px; bottom: 0; width: 280px; background: #eee; border-radius: 25px 0 0 25px;}
#diensten .dienstblokken .dienstblok1:before{ background: url("../img/visual-diensten-tuinontwerp.jpg") no-repeat center center; background-size: cover; }
#diensten .dienstblokken .dienstblok2:before{ background: url("../img/visual-diensten-tuinadvies.jpg") no-repeat center center; background-size: cover; }
#diensten .dienstblokken .dienstblok3:before{ background: url("../img/visual-diensten-tuinbeplanting.jpg") no-repeat center center; background-size: cover; }
#diensten .dienstblokken .dienstblok4:before{ background: url("../img/visual-diensten-tuinworkshops.jpg") no-repeat center center; background-size: cover; }

#diensten .dienstblokken .dienstblok .titel{ font-weight: bold; font-size: 26px; padding-bottom: 10px; }
#diensten .dienstblokken .dienstblok .text{   }

#diensten .dienstblokken .dienstblok.animate  {  opacity: 0; transform: translateY(-20px); transition-property: opacity, transform;  }
#diensten .dienstblokken .dienstblok.animate-active  {  opacity: 1; transform: translateY(0px);   }
#diensten .dienstblokken .dienstblok2.animate  {  transition-delay: 0.2s;    }
#diensten .dienstblokken .dienstblok3.animate  {  transition-delay: 0.3s;     }
#diensten .dienstblokken .dienstblok4.animate  {  transition-delay: 0.4s;    }


#diensten .dienstblokken .dienstblok:hover:after{  background: url("../img/svg-leaf-donker.svg") no-repeat center center; background-size: contain; }
#diensten .dienstblokken .dienstblok:hover{  box-shadow: 0 3px 35px rgba(25,38,102,0.20); }

#diensten .dienstblokken .dienstblok:hover .titel{  text-decoration: underline;  }

#diensten .btn { margin-left: 600px; margin-bottom: 30px;   }
#diensten .btn.arrow2:after{  position: absolute; top: 20px; left: -180px; width: 130px; height: 60px;  background: url("../img/svg-pijl-getekend.svg") no-repeat center center; background-size:  100% auto; }

.btn.arrow2:after{
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-name: arrowup; 
    animation-name: arrowup; 
}

@-webkit-keyframes arrowup { 
    0% { opacity: 1;  } 
    50% { opacity: 0;   } 
    100% {  opacity: 1;   } 
} 
@keyframes arrowup { 
    0% { opacity: 1;   } 
    50% { opacity: 0;  } 
    100% {  opacity: 1;  } 
} 

#diensten .offerte{ text-align: center; margin-top: 90px; }

/* portfolio ############################################################################################################################# */

#portfolio { padding: 50px 0;  }
#portfolio .portfolio { padding:  0 130px; }
#portfolio .slideblok { padding: 0 0 80px;  }
#portfolio .slideblok:before { z-index: 1; position: absolute; bottom: 50px; left: 50%; margin-left: -70px;  width: 140px; height: 60px; border-radius: 60px; background:#fff; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
#portfolio .slideblok:after{ z-index: 1; position: absolute; right: 50%; bottom: 60px; left: 50%; height:40px; margin-left: -1px; width: 2px; background: rgba(0,0,0,0.05); }
#portfolio .swiper { z-index: 0; width: 100%; height: 100%; border-radius: 25px;  }
#portfolio .swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center;        justify-content: center;        -webkit-box-align: center;        -ms-flex-align: center;        -webkit-align-items: center;        align-items: center;      }
#portfolio .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
#portfolio .swiper-button-prev {  left: 50%; margin-left: -48px; color: #000; margin-top: 170px; }
#portfolio .swiper-button-next { right: 50%; margin-right: -48px; color: #000;  margin-top: 170px; }
#portfolio .swiper-button-prev:after { font-size: 23px; }
#portfolio .swiper-button-next:after { font-size: 23px; }

#portfolio .bg { position: absolute; top: 50px; height: 900px; right: 0; width: 50%; overflow-x: hidden; }
#portfolio .bg:before { position: absolute; top: 0px;  width: 900px; height: 900px; border-radius: 100%; background: #F5F6EE; right:-500px; }

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


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

#faq { padding: 60px 0 100px; overflow-x: hidden; }


#faq .faq{ padding: 0 50% 0 120px; }
#faq .faq:before{ position: absolute; top: -60px; right: -180px; width: 950px; height: 625px; background: url("../img/visual-flower.png") no-repeat top right; background-size: contain; }

#faq h2{ font-size: 56px; padding-bottom: 5px; }
#faq h3{ color: #B8C184; font-size: 26px; padding-bottom: 5px; }

#faq .faqitems{ padding: 40px 0 20px; }
#faq .faqitems li{ cursor: pointer; padding:  0 60px 0 60px; background: #fff; box-shadow: 0 3px 25px rgba(25,38,102,0.10); height: 60px; line-height: 60px; margin-bottom: 15px; border-radius: 60px;  }
#faq .faqitems li:after{ position: absolute; top: 0; right: 0; bottom: 0; width: 60px; background: url("../img/svg-pijl-rechts-kleur.svg") no-repeat center center; background-size: auto 14px; }
#faq .faqitems li .nummer{ position: absolute; top: 18px; left: 18px; height: 24px; border-radius: 100%; line-height: 24px; width: 24px; background: #B8C184; color: #fff; font-weight: bold; text-align: center; }

#faq .faqitems li:hover{ background: #3C522F; 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 .meerfaq { padding: 0 5px 0 30px; font-size: 14px; font-weight: bold; color: #B8C184;  }
#faq .meerfaq:before { position: absolute; top: 5px; left: 0px; width: 16px; height: 16px; background: url("../img/svg-information-kleur.svg") no-repeat left top; background-size: contain; }
#faq .meerfaq:hover {  color: #3C522F;  text-decoration: none; }
#faq .meerfaq:hover:before {  background: url("../img/svg-information.svg") no-repeat left top; background-size: contain; }

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

#contact{  padding: 60px 0 100px;  font-weight: 500; font-size: 13px; color: #fff; }

#contact .bg { position: absolute; top: 0px; height: 690px; right: 0; width: 100%; overflow-x: hidden; }
#contact .bg:before { position: absolute; top: 0px;  bottom: 0; left: 0; right: 0; background: url("../img/visual-bg.jpg") no-repeat top center; background-size: cover; }



#contact .centered { width: 1460px; }
#contact .contact { text-align: center; }

#contact h2{ font-size: 56px; padding-bottom: 5px; }
#contact h3{ color: #B8C184; font-size: 26px; padding-bottom: 40px; }

#contact .contactblokken .contactblok{ text-align: left;  width: 31%; line-height: 180%;  border-radius: 20px; padding: 40px 40px 40px 170px; background: #fff; box-shadow: 0 3px 35px rgba(25,38,102,0.10);  }
#contact .contactblokken .contactblok .titel{ font-weight: bold; font-size: 20px; padding-bottom: 5px; }
#contact .contactblokken .contactblok.middle{ margin: 0 3.5%; }


#contact .contactblokken .contactblok:before { position: absolute; top: 50%; margin-top: -50px; left: 35px; width: 100px; height: 100px;  border-radius: 100%;  }
#contact .contactblokken .contactblok:before { transition: all .2s linear;    -o-transition: all .2s linear;    -moz-transition: all .2s linear;    -webkit-transition: all .2s linear;  }
#contact .contactblokken .contactblok1:before { background: #B8C184 url("../img/svg-contact-email.svg") no-repeat center center; background-size: 100% 42px;}
#contact .contactblokken .contactblok2:before { background: #B8C184 url("../img/svg-contact-telefoon.svg") no-repeat center center; background-size: 100% 42px;}
#contact .contactblokken .contactblok3:before { background: #B8C184 url("../img/svg-contact-afspraak.svg") no-repeat center center; background-size: 100% 42px;}


#contact .contactblokken .contactblok.animate  {  opacity: 0; transform: translateY(-20px);  }
#contact .contactblokken .contactblok2.animate  {  transition-delay: 0.2s;  transition-property: opacity, transform;   }
#contact .contactblokken .contactblok3.animate  {  transition-delay: 0.3s;  transition-property: opacity, transform;   }
#contact .contactblokken .contactblok.animate-active  {  opacity: 1; transform: translateY(0px);   }

#contact .contactblokken .contactblok:hover:before { background-color: #3C522F;  }

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

#afsluiting { padding: 0px 0 150px; font-size: 12px;text-align: center; font-weight: 500;   }
#afsluiting .afsluiting:before { position: absolute; bottom: -100px; left: 50%; margin-left: -75px; width: 150px; height: 55px; background:url("../img/logo-blooming-green-symbool.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: -200px; left: -200px;   width: 300px; height: 300px;  background: #3C522F;   border-radius: 100%; }



#afsluiting a{ ; }
#afsluiting a:hover{ color: #B8C184; }

#afsluiting #naarboven{ z-index: 1; cursor: pointer; position: absolute; bottom: 30px; left: 30px;  width: 50px; height: 50px; background: #B8C184;    box-shadow: 0px 9px 20px rgb(0 0 0 / 15%);  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/monique-verwoert.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:before{ position: absolute;  right: -5px; top: -30px; width: 31px; height: 30px; background: url("../img/svg-leaf.svg") no-repeat center center; background-size: contain; }
#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: #566A3B url(../img/svg-whatsapp-wit.svg) no-repeat center center; background-size: auto 60%;  }
#contactopnemenbol .circle a.telefoon{    top: 0px; left: -25px; background: #566A3B url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 60%;  }
#contactopnemenbol .circle a.email{     top: 30px; left: -30px; background: #566A3B url("../img/svg-email-wit.svg") no-repeat center center; background-size: auto 36%; }

#contactopnemenbol .circle a.whatsapp:hover{   background-color: #3C522F; }
#contactopnemenbol .circle a.telefoon:hover{   background-color: #3C522F; }
#contactopnemenbol .circle a.email:hover{     background-color: #3C522F; }


#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: -90px; bottom: -90px; width: 90px; height: 90px; background: #B8C184; border-radius: 100%;  }

#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: -45px; bottom: -45px;   }      } 
@-webkit-keyframes beforefade {    0% { right: -90px; bottom: -90px;   }     100% {  right: -45px; bottom: -45px;   }      } 
@-moz-keyframes beforefade {     0% { right: -90px; bottom: -90px;   }     100% {  right: -45px; bottom: -45px;   }      }