@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: 'Montserrat', sans-serif;   font-optical-sizing: auto;  font-size:16px;	font-weight: normal; background: #fff;	color: #2A3362;	line-height: 200%; }

body.noscroll { overflow: hidden; }

a{	color: #1DAE8D;  text-decoration:none;  }
a:hover{ text-decoration:underline; }	

h1, h2, h3, h4, h5{	color: #1DAE8D; line-height: 130%;  }
h1 span, h2 span, h3 span{  }
h1{ font-size: 40px; padding-bottom: 25px; color: #2A3362; }
h2{ font-size: 32px; padding-bottom: 25px; color: #2A3362;  }
h3{ font-size: 18px; padding-bottom: 15px; color: #1DAE8D; }
h4{ font-size: 14px; padding-bottom: 25px;  color: #2A3362; }

h1 span.punt{  color: #FCB321; }
h2 span.punt{  color: #FCB321; }
h3 span.punt{  color: #FCB321; }
h4 span.punt{  color: #FCB321; }

#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: 15px; font-weight: bold; color: #fff; text-transform: uppercase;     background: #2A3362;   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: #1DAE8D; 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: #fff; box-shadow: none; }
.btn.transparant:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;      border: 2px solid #D8DCE3;  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 transparent;  }
.btn.transparant:hover {    color: #182048; background: #2A3362; }

.btn.geel { background: #FCB321; color: #2A3362; box-shadow: none; border: 2px solid transparent; }
.btn.geel:hover { background: #182048;   color: #fff;   }
.btn.geel:hover {
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,0.4);
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,0.4);
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,0.4);
}

.btn.groen { background: #1DAE8D; color: #fff; box-shadow: none;  }
.btn.groen:hover { background: #2A3362;   color: #fff;  }

.btn.wit { background: #F1F1F1; color: #707070; box-shadow: none;  }
.btn.wit:hover { background: #1DAE8D;   color: #fff;  }

.btn.lichtbruin { background: #1DAE8D; color: #fff; box-shadow: none;  }
.btn.lichtbruin:hover { background: #6C481A;   color: #fff; box-shadow: none;  }


.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 #2A3362;  }
.btn.transparantwit:hover { background: #2A3362;   color: #fff;  }


.btn.openmenu { padding-left: 70px; background: #fff; color: #1DAE8D; 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: #2A3362; }
.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: #1DAE8D; color: #fff; box-shadow: none;}
.btn.tel:after { content:''; position: absolute; top: 16px; left: 19px; width: 18px; height: 18px; background: url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 100%; }
.btn.tel:hover { background: #2A3362; }

.btn-leesverder{ background: #2A3362; 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: #1DAE8D;   }



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

#menu{ position: absolute; top: 25px; right: 0; list-style: none; margin: 0;z-index: 3;  }

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

#menu a{ position: relative; float: left;   border: 0;	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: 10px;  }
#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 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-donker.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: 45px;	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: #2A3362;  font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 8px 15px 8px 15px;  }
#menu a.active{  color: #1DAE8D!important; text-decoration: underline; }
#menu a:hover{  color: #1DAE8D!important; }
#menu a.active:hover{   }


#menu .last .menuitem{ background: #1DAE8D; color: #fff;  margin-left: 20px;  height: 50px; line-height: 50px;  padding: 0 30px; border-radius: 50px;    }
#menu .last:hover .menuitem{ background: #2A3362; color: #fff!important; text-decoration: none!important;   }

#menu .openmenu {   }
#menu .openmenu .menuitem{ background: #2A3362;  margin-left: 10px; margin-right: 5px; height: 54px;  width: 54px; border-radius: 54px;     }
#menu .openmenu .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -9px; width: 18px; height: 14px;  }
#menu .openmenu .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%; }
#menu .openmenu:hover .menuitem{ background: #1DAE8D;   }
#menu .openmenu:hover .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%; opacity: 1;}


#menu .inloggen {   }
#menu .inloggen .menuitem{ background: #FCB321;  margin-left: 5px;  height: 54px;  width: 54px; border-radius: 54px;     }
#menu .inloggen .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -10px; width: 20px; height: 24px;  }
#menu .inloggen .menuitem:before{ background: url("../img/svg-login-wit.svg") no-repeat center center; background-size: auto 100%; }
#menu .inloggen:hover .menuitem{ background: #1DAE8D;   }
#menu .inloggen:hover .menuitem:before{ }



#menu .menusplit { background: #444; }
#menu .submenu{	border: 1px solid #eee; border-bottom: 15px solid #1DAE8D; background: #fff;	}
#menu .submenu a{	color: #000!important;		}
#menu .submenu a:hover{  background:#1DAE8D!important; color: #fff!important;  }
#menu .submenu:after{  background: #eee;  }


/* 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; bottom:0; opacity: 1; background: #2A3362 url("../img/visual-menu.jpg") no-repeat right top; background-size: cover; }
#menuoverlay:before {  background: #182048;  }

#menuoverlay:after { position: absolute;  bottom: 30px; right: 30px;  width: 400px; height: 450px;  background: url("../img/svg-watermerk-donker.svg") no-repeat top center; background-size: contain;}


#menuoverlay.active { display: block; }
#menuoverlay .content{ height: 100vh; z-index: 10000; }
#menuoverlay .logowit { position: absolute; top: 30px; left: 0px; width: 475px; height: 80px;  background: url("../img/logo-positive-touch-wit.svg") no-repeat top left; 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: rgba(255,255,255,0.8); font-size: 12px; line-height: 160%; }
#menuoverlay #adres a{ color: rgba(255,255,255,0.8); }
#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: 250px; }
#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 .pinterest{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-pinterest-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 .linkedin:hover{  background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat;  background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .facebook:hover{  background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .twitter:hover{  background: url("../img/svg-socialmedia-twitter-hover.svg") no-repeat; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .youtube:hover{  background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .instagram:hover{  background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .pinterest:hover{  background: url("../img/svg-socialmedia-pinterest-hover.svg") no-repeat; background-size: auto 100%;  }
#menuoverlay #adres .kolom.socialmedia .youtube:hover{  background: url("../img/svg-socialmedia-youtube-hover.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: 50px; 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-donker.svg") no-repeat;}
#menuoverlay-top #sluiten:hover { background: #1DAE8D; }
#menuoverlay-top #sluiten:hover:before{ background: url("../img/svg-sluiten-wit.svg") no-repeat;}


#menuoverlay-top .afspraak {padding: 8px 35px 8px 65px; z-index: 1; border-radius: 30px; font-weight: bold; background:#FCB321; text-transform: uppercase;  font-size: 16px;  color: #fff; margin-right: 5px;  border: 2px solid transparent;   }
#menuoverlay-top .afspraak:before{ position: absolute; top: 50%; left: 25px; margin: -11px 0 0 0; width: 22px; height: 22px;     background: url(../img/svg-login-wit.svg) no-repeat center center;   background-size: auto 100%;}
#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; right: 0; }
#menuoverlay-top-menu .titel{ position: relative; float: left; width: 100%; color: #1DAE8D; 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: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 { position: fixed; font-weight: bold; bottom: 30px; right: 30px; font-size: 16px;  border-radius: 55px; border: 0; text-transform: uppercase; background: #1DAE8D;;   padding: 0 35px;  color:#fff; line-height: 55px; height: 55px; }
#menuoverlay-top .aanvraag:hover { color: #fff!important;  background: #1DAE8D ;  text-decoration: none;  }



/* mobielctamenu ############################################################################################################################# */

#mobielctamenu{ display: none; z-index: 100; position: fixed; bottom: 0; left: 0; background: #fff ; background-size: cover;     box-shadow: 0 -3px 6px rgba(0,0,0,0.2); text-align: center; }
#mobielctamenu a { width: 50%; padding: 10px 0; font-weight: 600; text-transform: uppercase;     color: #2A3362; }

#mobielctamenu a.whatsapp { padding-left: 40px; }
#mobielctamenu a.whatsapp:before { position: absolute; top: 14px; left: 20px; width: 18px; height: 18px; background: url("../img/svg-whatsapp-donker.svg") no-repeat top left; background-size: auto 100%; }

#mobielctamenu a.offerte:before { position: absolute; top: 14px; left: 20px; width: 18px; height: 18px; background: url("../img/svg-contact-afspraak-donker.svg") no-repeat top left; background-size: auto 100%; }
#mobielctamenu a.offerte { padding-left: 15px; }

#mobielctamenu .split { position: absolute; top: 0px; bottom: 0; left: 50%; width: 1px; background: #ddd; }


/* progress ############################################################################### */
#progress{ position: fixed; top: 0px; left: 0px; right: 0px; z-index: 10000;  opacity: 1; overflow: hidden;  box-shadow: 0 3px 6px rgba(0,0,0,0.1) }
.progress-container {   width: 100%;  height: 10px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); background: #fff;   }
.progress-bar {  position: absolute; height: 4px;  background: #1DAE8D;  width: 0%; top: 3px; border-radius: 5px;  }
.progress-bar:after{  position: absolute; top: 0; right: -8px; width: 2px; height: 2px; background: #fff; border: 2px solid #FCB321; border-radius: 100%;  }



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

#top{   position: fixed;  top: 10px; left: 0px;  z-index: 999; height: 100px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); background: #fff; }
#top .logo{ position: absolute;	top: 10px;	left: 0px;	width: 405px;	height: 70px; background: url("../img/logo-positive-touch.svg") no-repeat left center;	background-size: auto 95%;}
#top .logo{  top: 5px;	width: 455px;	height: 80px; }




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

#top.top1off{ box-shadow: 0 3px 6px rgba(0,0,0,0.1); background: #fff;}
#top.top1off #menu{ }
#top.top1off #menu:before{ display: none; }
#top.top1off #menu:after{ display: none; }

#top.top1off .logo{   }

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

#top.top1off #progress { opacity: 1; }
#top.vervolgpagina #progress { opacity: 1; }

#top.vervolgpagina{ box-shadow: 0 3px 6px rgba(0,0,0,0.1); background: #fff;}
#top.vervolgpagina #menu{  }
#top.vervolgpagina #menu:before{ display: none; }
#top.vervolgpagina #menu:after{ display: none; }


#top.vervolgpagina .logo{   }


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


#header{  height: 1050px;  }
#header .bg{ position: absolute; top: 0px; left: 0; right: 0;  height: 1200px; overflow: hidden;  background: #202959; }
#header .bg:after {  position: absolute; top: -140px; left: 50%;	 width: 1380px; height: 1850px; margin-left: 0px;  bottom: 0;  background:  url("../img/visual-header.png") no-repeat left top;  background-size: contain; }
#header .bg:before {  position: absolute; height: 470px; left: 0;	 right: 0;  bottom: 10px;  background:  url("../img/svg-boog-blauw.svg") no-repeat top center ;  background-size: cover; }

#header .bg:after, #header .bg2:after{ transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; }
#header .bg:before, #header .bg2:before {  transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear; }


#header .bg2{ position: absolute; top: 0px; left: 0; right: 0; height: 1200px; overflow: hidden;   }
#header .bg2:before {  position: absolute; height: 350px; left: 0;	 right: 0;  bottom: 0;  background:  url("../img/svg-boog-wit.svg") no-repeat top center ;  background-size: cover; }
#header .bg2:after {  position: absolute; height: 100px; width: 100px; left: 50%; margin-left: -50px; border-radius: 100%;   bottom: 100px;; box-shadow: 0px 5px 20px rgba(0,0,0,0.1);  background: #fff  url("../img/logo-positive-touch-symbool.svg") no-repeat center center ;  background-size: auto 70%; }

#header .bol {  position: absolute; height: 115px; width: 115px; right: 50%; margin-right: -720px; border-radius: 100%;   top: 230px;   background: url("../img/svg-studie.svg") no-repeat center center ;  background-size: auto 100%; }


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

#header div.banner{	z-index: 1;  position: absolute;	top: 220px;	left:50%; margin-left: -800px; width: 740px; padding-right: 40px; }
#header .container h1{  color: #fff; padding: 0 0 10px; font-size: 54px; line-height: 105%; text-transform: uppercase; font-weight: 800;  }
#header .container h1 span.container{  color: #1DAE8D; font-size: 37px;  }
#header .container h2{  padding: 0 0 10px; font-size: 21px; font-weight: medium; line-height: 135%; letter-spacing: 1px; text-transform: uppercase;  }
#header .container h4{  padding: 15px 0 5px; font-size: 18px; font-weight: 700; line-height: 135%; color: #FCB321; margin:0;  }

#header .container .txt { color: #fff; font-weight: 600; font-size: 17px; }

#header .voordelen{ width: 95%; margin: 10px 0 30px 0px; background: #182048; color: #fff; border-radius: 20px; padding: 22px 35px; }
#header .voordelen li{  padding: 5px 0 5px 45px; font-size: 17px; font-weight: 600; }
#header .voordelen li:before{ position: absolute; top: 12px; left: 0px; width: 30px; height: 30px; background: url("../img/svg-vink-kleur.svg") no-repeat top left; background-size: 70% auto; }

#header .btn{  height: auto; padding: 20px 35px 20px ; line-height: 130%;   }
#header .btn.opleiding{  padding-left: 60px; background: #1DAE8D; margin-right: 20px; }
#header .btn.opleiding:before{  position: absolute; top: 0; left: 22px; bottom: 0; width: 25px; background: url("../img/svg-boek-wit.svg") no-repeat center center; background-size: auto 30%;}
#header .btn.opleiding:hover{   background: #fff; color: #182048; }
#header .btn.opleiding:hover:before{   background: url("../img/svg-boek-kleur.svg") no-repeat center center; background-size: auto 30%;}



/**/

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

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



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

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


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


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

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

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

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

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

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

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


/* opleidingencursus ############################################################################################################################# */

#opleidingencursus{  padding: 120px 0 120px; }

#opleidingencursus .bg{  position: absolute; top: 0px; bottom: 0px; left: 50%; width: 40px; margin-left: -20px;  }
#opleidingencursus .bg:before{  position: absolute; top: 0px; bottom: 0px; left: 50%; width: 2px; margin-left: -1px; background:#EDEDEF; }
#opleidingencursus .bg:after {  opacity: 0.2;  position: absolute; height: 9px; width: 20px; left: 50%; margin-left: -10px; top: -40px;  background: url("../img/svg-pijl-beneden-donker.svg") no-repeat center center; background-size: auto 100%; }



#opleidingencursus .opleidingencursus {  padding: 0 100px; font-weight: 500; font-size: 18px; }
#opleidingencursus .opleidingencursus .links{  width: 50%; padding-right: 120px; line-height: 220%; }
#opleidingencursus .opleidingencursus .rechts{  width: 50%; padding-left: 100px; line-height: 220%; }



#opleidingencursus h2{  font-size: 32px; padding-right: 30px; padding-bottom: 15px; line-height: 120%; font-weight: 800; text-transform: uppercase; }
#opleidingencursus h3{ font-size: 28px; font-weight: 800; color: #2A3362;  text-transform: uppercase; }
#opleidingencursus h4{ font-size: 18px; color: #1DAE8D; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 15px; }

#opleidingencursus .opleidingencursus .links h3{  font-size: 18px; color: #1DAE8D; font-weight: 500; text-transform: uppercase;  padding: 40px 0 10px; }

#opleidingencursus .opleidingencursusvoorbeelden{ margin-top: 70px;  padding: 0 100px; }
#opleidingencursus .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld {	width: 18%; margin-left: 2.5%; height:252px;	background: #EDEDEF; border-radius: 100%; }
#opleidingencursus .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld1 { margin-left: 0%;background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-1.jpg") no-repeat center center; background-size: cover;}
#opleidingencursus .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld2 { background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-2.jpg") no-repeat center center; background-size: cover;}
#opleidingencursus .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld3 { background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-3.jpg") no-repeat center center; background-size: cover;}
#opleidingencursus .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld4 { background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-4.jpg") no-repeat center center; background-size: cover;}
#opleidingencursus .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld5 { background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-5.jpg") no-repeat center center; background-size: cover;}

/**/
#opleidingencursus.animate .bg  {  opacity: 0; transform: translateY(-20px);  }
#opleidingencursus.animate-active .bg  {  opacity: 1; transform: translateY(0px);   }

#opleidingencursus.animate .opleidingencursus .links  {  opacity: 0; transform: translateX(-20px);  }
#opleidingencursus.animate-active .opleidingencursus .links  {  opacity: 1; transform: translateX(0px);   }

#opleidingencursus.animate .opleidingencursus .rechts  {  opacity: 0; transform: translateX(20px);  }
#opleidingencursus.animate-active .opleidingencursus .rechts  {  opacity: 1; transform: translateX(0px);   }

#opleidingencursus.animate .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld1 { opacity: 0; transform: translateY(-20px); transition-delay: 0.1s;  transition-property: opacity, transform;   }
#opleidingencursus.animate .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld2 { opacity: 0; transform: translateY(-20px); transition-delay: 0.2s;  transition-property: opacity, transform;   }
#opleidingencursus.animate .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld3 { opacity: 0; transform: translateY(-20px); transition-delay: 0.3s;  transition-property: opacity, transform;   }
#opleidingencursus.animate .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld4 { opacity: 0; transform: translateY(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#opleidingencursus.animate .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld5 { opacity: 0; transform: translateY(-20px); transition-delay: 0.5s;  transition-property: opacity, transform;   }

#opleidingencursus.animate-active .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld1 { opacity: 1; transform: translateX(0px);   }
#opleidingencursus.animate-active .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld2 { opacity: 1; transform: translateX(0px);   }
#opleidingencursus.animate-active .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld3 { opacity: 1; transform: translateX(0px);   }
#opleidingencursus.animate-active .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld4 { opacity: 1; transform: translateX(0px);   }
#opleidingencursus.animate-active .opleidingencursusvoorbeelden .opleidingencursusvoorbeeld5 { opacity: 1; transform: translateX(0px);   }




#opleidingencursus .actieblok { width: 90%; margin-left: 5%; padding: 80px 120px 60px; margin-top: 80px; text-align: center;   color: #fff;    background: #182048 url("../img/visual-menu.jpg") no-repeat center center; background-size: cover;   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 60px; font-size: 18px; font-weight: 600;}
#opleidingencursus .actieblok:before {  position: absolute; height: 60px; width: 60px; right: 50%; margin-right: -30px; border-radius: 100%;   top: -30px;   background: url("../img/svg-studie.svg") no-repeat center center ;  background-size: auto 100%; }
#opleidingencursus .actieblok h2 { color: #fff; padding-right: 0; font-size: 32px; }
#opleidingencursus .actieblok .knop { margin-top: 40px; }
#opleidingencursus .actieblok .btn {  margin: 0 auto; float: none; padding: 20px 45px; font-size: 18px; background: #1DAE8D; line-height: 110%; }
#opleidingencursus .actieblok .btn:hover {  background: #FCB321; }

#opleidingencursus .actieblok.rustig { background: none; color: #2A3362; box-shadow: none; }
#opleidingencursus .actieblok.rustig h2{  color: #2A3362;  }
#opleidingencursus .actieblok.rustig:before {    top: -10px;   }


/* cta1 ############################################################################################################################# */

.ctalayer{ text-align: center; padding: 40px 0 40px; z-index: 2; margin-bottom: 100px; }
.ctalayer .cta{ padding: 0 200px; font-size: 18px; }
.ctalayer .cta h2{ font-size: 48px; padding: 0 90px 10px;  text-transform: uppercase; line-height: 110%;  font-weight: 700; }
.ctalayer .cta h3{ font-size: 20px; padding: 0 100px 15px; color: #1DAE8D;  text-transform: uppercase;   }
.ctalayer .cta .txt{  padding: 0 110px 30px; font-weight: 500; }



.ctalayer .cta .ctaopties{  }
.ctalayer .cta .ctaopties .ctaoptie { width: 32%; border-radius: 30px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); height: 240px; }
.ctalayer .cta .ctaopties .ctaoptie:before { z-index: 0; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 25px; background: #eee;  }
.ctalayer .cta .ctaopties .ctaoptie:after { z-index: 0; position: absolute; height: 100px; left: 10px; right: 10px; bottom: 10px; border-radius: 0px 0px 25px 25px;   }
.ctalayer .cta .ctaopties .ctaoptie:after {  background: linear-gradient(to bottom,rgba(24, 32, 72, 0),rgba(24, 32, 72, 0.6)); }
.ctalayer .cta .ctaopties .ctaoptietxt { z-index: 1; position: absolute; bottom: 0px; left: 0; right: 0;  }
.ctalayer .cta .ctaopties .ctaoptietxt .subtitel{ margin-bottom: 40px; color: #fff; font-weight: 800;font-size: 13px; text-shadow: 0 3px 6px rgba(0,0,0,0.3); line-height: 120%;  text-transform: uppercase;  }
.ctalayer .cta .ctaopties .ctaoptietxt .titel{  color: #fff; font-weight: 800;font-size: 27px;  text-shadow: 0 3px 6px rgba(0,0,0,0.3);  line-height: 120%; text-transform: uppercase;  }
.ctalayer .cta .ctaopties .ctaoptie3 .ctaoptietxt .titel{font-size: 25px;    }
.ctalayer .cta .ctaopties .ctaoptietxt:before { position: absolute; bottom: -20px; left: 50%; margin-left: -25px; height: 30px; width: 30px; background: #182048 url("../img/svg-pijl-rechts-wit.svg") no-repeat 12px center; background-size: auto 40%; border-radius: 100%; border: 10px solid #fff; }
.ctalayer .cta .ctaopties .ctaoptietxt:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; }

.ctalayer .cta .ctaopties .ctaoptie:hover .ctaoptietxt:before {  background-color: #1DAE8D; bottom: -24px; }

.ctalayer .cta .ctaopties .ctaoptie:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; }
.ctalayer .cta .ctaopties .ctaoptie1:before { background: url("../img/visual-cta-cursussen.jpg") no-repeat center center; background-size: auto 110%; }
.ctalayer .cta .ctaopties .ctaoptie2:before { background: url("../img/visual-cta-opleidingen.jpg") no-repeat center center; background-size: auto 110%; }
.ctalayer .cta .ctaopties .ctaoptie3:before { background: url("../img/visual-cta-doorstroom.jpg?v=2") no-repeat center center; background-size: auto 110%; }
.ctalayer .cta .ctaopties .ctaoptie2 { margin: 0 2%;  }

.ctalayer .cta .ctaopties .ctaoptie1:hover:before {  background-size: auto 130%; }
.ctalayer .cta .ctaopties .ctaoptie2:hover:before {  background-size: auto 130%; }
.ctalayer .cta .ctaopties .ctaoptie3:hover:before {  background-size: auto 130%; }

.ctalayer .btn.opleiding{  margin-left: 0px; padding: 0 25px 0 45px; }
.ctalayer .btn.opleiding:before{  position: absolute; top: 0; left: 20px; bottom: 0; width: 25px; background: url("../img/svg-boek-wit.svg") no-repeat center center; background-size: auto 30%;}

.ctalayer .cta .ctabuttons{ padding-left: 390px; margin-top: 55px; }
.ctalayer .cta .btn{ width: 430px;  text-align: center; height: auto;  }

.ctalayer .btn-gesprek { color: #2A3362; margin-left: 50px; font-size: 14px; padding:  0 0 0 25px; opacity: 0.6; height: 16px; line-height: 16px; font-weight: 500; margin-top: 20px; clear: both; } 
.ctalayer .btn-gesprek:before {  position: absolute; top: 0; left: 0; width: 28px; height: 16px; background: url("../img/svg-chat-donker.svg") no-repeat top left; background-size: auto 100%; } 
.ctalayer .btn-gesprek:before {  transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } 

.ctalayer .btn-gesprek:hover { opacity: 1; color: #1DAE8D; text-decoration: none!important; } 
.ctalayer .btn-gesprek:hover:before { background: url("../img/svg-chat-kleur.svg") no-repeat top left; background-size: auto 100%;  } 


.ctalayer.animate .cta h2 { opacity: 0; transform: translateY(-20px); transition-delay: 0s;  transition-property: opacity, transform;   }
.ctalayer.animate-active .cta h2{ opacity: 1; transform: translateY(0px);   }

.ctalayer.animate .cta h3 { opacity: 0; transform: translateY(-20px); transition-delay: 0.1s;  transition-property: opacity, transform;   }
.ctalayer.animate-active .cta h3{ opacity: 1; transform: translateY(0px);   }

.ctalayer.animate .cta .txt { opacity: 0; transform: translateY(-20px); transition-delay: 0.3s;  transition-property: opacity, transform;   }
.ctalayer.animate-active .cta .txt{ opacity: 1; transform: translateY(0px);   }

.ctalayer.animate .cta .ctabuttons { opacity: 0; transform: translateY(-20px); transition-delay: 0.5s;  transition-property: opacity, transform;   }
.ctalayer.animate-active .cta .ctabuttons{ opacity: 1; transform: translateY(0px);   }
/**/


/* veiligheid ############################################################################################################################# */

#veiligheid{  padding: 540px 0 80px; z-index: 1; background: #182048; color: #fff;  }


#veiligheid .veiligheid{  padding: 0 150px  0px; }

#veiligheid .bg{  position: absolute; top: -300px;  left: 0; right: 0; height: 900px; background: #fff; overflow: hidden;  }
#veiligheid .bg:before{  position: absolute;top: 0px; height: 800px; left: 0; right: 0;  background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-cirkel.jpg?v=2") no-repeat top center; background-size: cover; }
#veiligheid .bg:after{  position: absolute; height: 500px; bottom: 0px; left: 0; right: 0;  background: url("../img/svg-boog-groenblauw.svg") no-repeat top center; background-size: cover; }


#veiligheid .bg2 { position: absolute; bottom: -100px; left: 0px; right: 0px;   height: 650px; overflow: hidden; }
#veiligheid .bg2:before { position: absolute;  bottom: 0; right: 50%; margin-right: -980px; width: 400px; height: 565px;  background: url("../img/svg-watermerk-donker.svg") no-repeat top center; background-size: contain;}


#veiligheid .veiligheid .links{  width: 50%; padding-right: 50px; font-size: 18px; font-weight: 500; line-height: 220%; }
#veiligheid .veiligheid .rechts{  width: 50%; padding-left: 50px; }

#veiligheid h2{  font-size: 36px; color: #fff;  padding: 0 0px 15px 0; text-transform: uppercase; font-weight: 800; }
#veiligheid h3{ font-size: 23px; color: #fff; padding-right: 0px; padding-bottom: 5px;  font-weight: bold; text-transform: uppercase;}
#veiligheid h4{ font-size: 19px; color: #FCB321; padding-right: 0px; padding-bottom: 5px;  font-weight: 500; text-transform: uppercase;}


#veiligheid .veiligheid ul { padding: 0 40px 0 0; }
#veiligheid .veiligheid ul li{  position: relative; float: left; width: 100%; padding:  0 0px 0 60px; margin-top: 25px; color: #fff; font-size: 16px; line-height: 170%; font-weight: 500; }
#veiligheid .veiligheid ul li span{  font-weight: 700; color: #1DAE8D; text-transform: uppercase; font-size: 18px; }
#veiligheid .veiligheid ul li:before{ content:'';  position: absolute; top: 2px; left: 0px; width: 35px; height: 35px;  background: #1DAE8D; border-radius: 100%; }
#veiligheid .veiligheid ul li:after{ content:'';  position: absolute; top: 2px; left: 0px; width: 35px; height: 35px;  background:  url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 35%;  }


/**/
#veiligheid.animate .bg:before { transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear;  }
#veiligheid.animate .bg:before { opacity: 0; transform: translateY(-20px); transition-delay: 0.2s;  transition-property: opacity, transform;   }
#veiligheid.animate-active .bg:before{ opacity: 1; transform: translateY(0px);   }

#veiligheid.animate .veiligheid h2 { opacity: 0; transform: translateX(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#veiligheid.animate-active .veiligheid h2{ opacity: 1; transform: translateX(0px);   }

#veiligheid.animate .veiligheid h3 { opacity: 0; transform: translateX(-20px); transition-delay: 0.7s;  transition-property: opacity, transform;   }
#veiligheid.animate-active .veiligheid h3{ opacity: 1; transform: translateX(0px);   }

#veiligheid.animate .veiligheid h4 { opacity: 0; transform: translateX(-20px); transition-delay: 0.9s;  transition-property: opacity, transform;   }
#veiligheid.animate-active .veiligheid h4{ opacity: 1; transform: translateX(0px);   }

#veiligheid.animate .veiligheid .txt { opacity: 0; transform: translateX(-20px); transition-delay: 0.6s;  transition-property: opacity, transform;   }
#veiligheid.animate-active .veiligheid .txt{ opacity: 1; transform: translateX(0px);   }

#veiligheid.animate .veiligheid ul { opacity: 0; transform: translateX(-20px); transition-delay: 0.8s;  transition-property: opacity, transform;   }
#veiligheid.animate-active .veiligheid ul{ opacity: 1; transform: translateX(0px);   }


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

#quote{  padding: 40px 0 0px; z-index: 0; background: #182048; color: #fff; }



#quote .quote {  padding: 0 200px;  }

#quote .quote:before{ position: absolute; top: -7px; left: 170px; width: 30px; height: 40px;  background:  url("../img/svg-quoteboven-kleur.svg") no-repeat center center; background-size:contain; }
#quote .quote:after{ position: absolute; bottom: -7px; right: 170px; width: 30px; height: 40px;  background:  url("../img/svg-quoteonder-kleur.svg") no-repeat center center; background-size:contain; }


#quote .quote .quotetxt{  background: #2A3362; box-shadow: inset 1px 2px 5px rgba(0,0,0,0.1);  font-weight: 500;  border-radius: 100px;  padding: 40px 320px 40px 80px; font-size: 20px; font-style: italic;   }
#quote .quote .quotetxt:before{  position: absolute; top: 0; right: 80px; bottom: 0; width: 160px; background: url("../img/svg-vijfsterren.svg") no-repeat center center; background-size: 100% auto ; }
#quote .quote .quotetxt span{  font-weight: 700; }

/**/

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

/* ervaring ############################################################################################################################# */

#ervaring{  padding: 100px 0 60px; margin-bottom: 90px; z-index: 1; height: 900px; }

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

#ervaring .bg2 { position: absolute; top: 0px; left: 0px; right: 0px;   height: 900px; overflow: hidden; }
#ervaring .bg2:before { position: absolute; top: 0px; height: 400px; right: 0px; width: 100%;  background: url("../img/svg-boog-groenblauw-onder.svg") no-repeat bottom center; background-size: cover;}
#ervaring .bg2:after { position: absolute; bottom: 0px; height: 400px; right: 0px; width: 100%;  background: url("../img/svg-boog-groenwit.svg") no-repeat top center; background-size: cover;}


#ervaring .ervaring{ position: absolute; right: 100px; top: 100px; border-radius: 50px;  font-weight: 500; font-size: 15px; line-height: 180%; width: 680px; height: 750px; padding: 60px 80px ; z-index: 1; }
#ervaring .ervaring{ background: #182048; color: #fff; }
#ervaring .ervaring:after {  position: absolute; top: -30px; height: 100px; width: 100px; right: -30px; border-radius: 100%;    background: #fff  url("../img/svg-ervaring.svg") no-repeat center center ;  background-size: auto 100%; }


#ervaring h2{  font-size: 34px; color: #1DAE8D; padding-bottom: 15px; line-height: 120%; font-weight: 800; text-transform: uppercase; }
#ervaring h2 span.wit{   color: #fff;  }

#ervaring .review{ padding: 0px 0 0 140px; margin-top: 40px; font-size: 14px; line-height: 180%; font-style: italic; }
#ervaring .review:before{ position: absolute; top: 0; left: 0px; width: 20px; height: 20px;  background: url("../img/svg-quoteboven-geel.svg") no-repeat center center; background-size: contain; }
#ervaring .review:after{ position: absolute; top: 0; left: 20px; width: 95px; height: 95px; border-radius: 100%; background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-review.jpg") no-repeat center center; background-size: cover; }



/* reviews ############################################################################################################################# */

#reviews{  padding: 0px 0 30px; margin-bottom: 90px; z-index: 1;  }
#reviews .reviews{  padding: 30px 100px 0px 0;  }

#reviews .reviews .review {  font-weight: 500; width: 30%; padding: 0px 0 0 140px; font-size: 14px; line-height: 180%; font-style: italic; }
#reviews .reviews .review .reviewpersoon{  font-weight: bold; color: #1DAE8D; font-style: normal; padding-top: 5px; }
#reviews .reviews .review2 {  margin: 0 5%;  }

#reviews .reviews .review:after{ position: absolute; top: 0; left: 20px; width: 95px; height: 95px; border-radius: 100%;  }
#reviews .reviews .review1:after{  background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-review-1.jpg") no-repeat center center; background-size: cover; }
#reviews .reviews .review2:after{  background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-review-2.jpg") no-repeat center center; background-size: cover; }
#reviews .reviews .review3:after{  background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-review-3.jpg?v=2") no-repeat center center; background-size: cover; }

#reviews h2{  position: absolute; top: -160px; left: 0; font-size: 26px; text-transform: uppercase; border-bottom: 3px solid #F0F2F8; width: 620px; padding: 50px 0 40px 80px; font-weight: 800; }
#reviews h2{  background: url("../img/logo-positive-touch-symbool.svg") no-repeat left center; background-size: 50px auto; }

/**/

#reviews.animate h2 { opacity: 0; transform: translateX(-20px);  transition-property: opacity, transform;   }
#reviews.animate-active h2{ opacity: 1; transform: translateX(0px);   }

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

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

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

/* FAQ ############################################################################################################################# */


#faq {  z-index: 1; margin-bottom: 60px; }



#faq .faq h2{ font-size: 48px; text-align: center; padding: 0 0 10px;  text-transform: uppercase; font-weight: 800; }
#faq .faq h3{ font-size: 20px; text-align: center; padding: 0 5% 45px;  text-transform: uppercase;  font-weight: 500; }

#faq .centered{ width: 1400px; text-align: center;  }
#faq .faq{ padding: 100px 0px 70px; margin-bottom: 20px; background:#EFF1F3;  border-radius: 60px; }

#faq .faq:after { display: none; position: absolute; top: -28px; height: 56px; width: 56px; left: 50%; margin-left: -28px; border-radius: 100%;    background: #fff  url("../img/svg-faq.svg") no-repeat center center ;  background-size: auto 100%; }


#faq .faqitems{ padding: 0px 10% 0px; margin-bottom: 20px;  }
#faq .faqitems .faqitem{ cursor: pointer;  padding: 15px 25px 15px 25px; border-radius: 30px; margin: 5px 0; background: #fff; box-shadow: 0 5px 30px rgb(0,0, 0, 0.1); text-align: left; font-weight: 600; color: #2A3362; }
#faq .faqitems .faqitem .nummer{ position: absolute; top: 15px; left: 30px; font-weight: bold; color: #1DAE8D; width: 10px; text-align: right; margin-right: 20px; }
#faq .faqitems .faqitem .vraag{ padding: 0px 35px 0 30px; }
#faq .faqitems .faqitem .sluiten{  position: absolute; overflow: hidden; width: 0px; opacity: 0; top: 15px; right: 20px; height: 25px; line-height: 25px; color: #fff; background: #2A3362; text-align: center; text-transform: uppercase; font-size: 10px; font-weight: bold; border-radius: 15px; }
#faq .faqitems .faqitem .antwoord{ height: 0px; overflow: hidden; padding: 0 30px; opacity: 0; background: #F2F2F2; border-radius: 10px; }
#faq .faqitems .faqitem:after{ position: absolute; top:9px; right: 12px; height: 45px; width: 45px; background: #1DAE8D url("../img/svg-pijl-beneden-wit.svg") no-repeat center center; background-size: 25% auto; border-radius: 100%; }
#faq .faqitems .faqitem:after{ transition: background .2s linear;    -o-transition: background .2s linear;    -moz-transition: background .2s linear;    -webkit-transition: background .2s; }
#faq .faqitems .faqitem:hover:after { background-color: #2A3362; }


#faq .meerfaq { margin-left: 600px; margin-top: 30px; color: #2A3362; }
#faq .meerfaq:hover { color: #fff; }

#faq .faqitems .faqitem.active .vraag { font-weight: bold; color: #1DAE8D;  }
#faq .faqitems .faqitem.active .antwoord { height: auto; margin: 10px 0; padding: 20px 30px;  opacity: 1; }
#faq .faqitems .faqitem.active .sluiten { width: 120px; opacity: 1;  }
#faq .faqitems .faqitem.active:after {  opacity: 0; }


#faq .faqitems .faqitem ul{ text-align: left; padding: 20px 0 20px 40px; }
#faq .faqitems .faqitem ul li{ list-style: disc;  padding: 5px 0 5px 30px;  list-style-position: outside; }

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

/**/
#faq.animate .faq { opacity: 0; transform: translateY(-20px); transition-delay: 0.0s;  transition-property: opacity, transform;   }
#faq.animate-active .faq { opacity: 1; transform: translateY(0px);   }



/* spreuk ############################################################################################################################# */

#spreuk{  padding: 30px 0 320px; z-index: 0;  }
#spreuk .spreuktxt { width: 650px; color: #fff; font-style: italic; font-size: 40px; line-height: 130%; margin-left: 140px; }
#spreuk .bg { position: absolute; bottom: 0px; left: 0; right: 0; height: 1200px; overflow: hidden;  }
#spreuk .bg:before { position: absolute; top: 0; left: 0%; width: 100%; bottom: 0;  background: url("../img/visual-faq-bg.jpg") no-repeat bottom center; background-size: cover; }
#spreuk .bg:after { position: absolute; top: 0; left: 0%; width: 100%; height: 300px;  background: url("../img/svg-boog-wit-onder2.svg") no-repeat bottom center; background-size: cover; }

/**/
#spreuk.animate .spreuktxt { opacity: 0; transform: translateX(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#spreuk.animate-active .spreuktxt { opacity: 1; transform: translateX(0px);   }

/* partner ############################################################################################################################# */

#partner{  padding: 80px 0 80px; z-index: 0; margin-top: -40px; }

#partner .bg { position: absolute; top: -380px; left: 0; right: 0; height: 600px; overflow: hidden;  }
#partner .bg:after { position: absolute; top: 0; left: 0%; width: 100%; height: 480px;  background: url("../img/svg-boog-groenwit.svg") no-repeat top center; background-size: cover; }
#partner .bg:before { position: absolute; height: 200px; left: 0%; width: 100%; bottom: 0px;  background: #fff; }

#partner .partner{  padding:  0 52% 0 100px; font-weight: 500; font-size: 18px; }
#partner .partner:before{  position: absolute; top: 0; right: 100px; height: 100%; width: 36%; background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-groepslessen.jpg?v=2") no-repeat center center; background-size: cover; border-radius: 20px; }
#partner .partner:after{  display: none; position: absolute; height: 40%; right: 100px; bottom: 0px; width: 36%; background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-presentatie.jpg") no-repeat center center; background-size: cover; border-radius: 0 0 20px 20px; }

#partner h2{ font-weight: bold; font-size: 44px; padding-right: 80px; padding-bottom: 15px; text-transform: uppercase; }

#partner .partner ul { padding: 10px 0 40px; }
#partner .partner ul li{  font-weight: 500; position: relative; float: left; width: 100%; padding:  6px 30px 0 90px; margin-top: 25px;  font-size: 14px; line-height: 180%; }
#partner .partner ul li span{  font-weight: bold; color: #1DAE8D; text-transform: uppercase; font-size: 15px; }
#partner .partner ul li:before{ content:'';  position: absolute; top: 2px; left: 30px; width: 35px; height: 35px;  background: #1DAE8D; border-radius: 100%; }
#partner .partner ul li:after{ content:'';  position: absolute; top: 2px; left: 30px; width: 35px; height: 35px;  background:  url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 35%;  }


/**/
#partner.animate .partner:before { transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear;  }
#partner.animate .partner:before { opacity: 0; transform: translateY(-20px); transition-delay: 0.2s;  transition-property: opacity, transform;   }
#partner.animate-active .partner:before{ opacity: 1; transform: translateY(0px);   }

#partner.animate .partner:after { transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear;  }
#partner.animate .partner:after { opacity: 0; transform: translateY(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#partner.animate-active .partner:after{ opacity: 1; transform: translateY(0px);   }


#partner.animate .partner h2 { opacity: 0; transform: translateX(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#partner.animate-active .partner h2{ opacity: 1; transform: translateX(0px);   }

#partner.animate .partner h3 { opacity: 0; transform: translateX(-20px); transition-delay: 0.6s;  transition-property: opacity, transform;   }
#partner.animate-active .partner h3{ opacity: 1; transform: translateX(0px);   }

#partner.animate .partner .txt { opacity: 0; transform: translateX(-20px); transition-delay: 0.8s;  transition-property: opacity, transform;   }
#partner.animate-active .partner .txt{ opacity: 1; transform: translateX(0px);   }


#partner.animate .partner ul { opacity: 0; transform: translateX(-20px); transition-delay: 1.0s;  transition-property: opacity, transform;   }
#partner.animate-active .partner ul{ opacity: 1; transform: translateX(0px);   }

#partner.animate .partner .txt2 { opacity: 0; transform: translateX(-20px); transition-delay: 1.2s;  transition-property: opacity, transform;   }
#partner.animate-active .partner .txt2{ opacity: 1; transform: translateX(0px);   }



/* cta2 ############################################################################################################################# */

#cta2{  margin-bottom: 0px; }
#cta2.ctalayer .cta h2{ padding: 0 200px 10px;   }


/* regio ############################################################################################################################# */

#regio{  padding: 100px 0; }

#regio .txt{  padding:  0 55% 0 100px; font-weight: 500; font-size: 18px; }
#regio .txt:before{  position: absolute; top: 0; right: 100px; bottom: 0px; width: 39%; background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-leeromgeving.jpg") no-repeat center center; background-size: cover; border-radius: 20px; }

#regio h2{ font-weight: 800; font-size: 52px; padding: 0 300px 10px;  text-align: center; line-height: 110%; }
#regio h3{ font-size: 20px; padding: 0 80px 65px; text-align: center; color: #1DAE8D; text-transform: uppercase; }


/**/
#regio.animate .regio h2 { opacity: 0; transform: translateY(-20px); transition-delay: 0.0s;  transition-property: opacity, transform;   }
#regio.animate-active .regio h2{ opacity: 1; transform: translateY(0px);   }

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

#regio.animate .bg {     transition: all .5s linear;    -o-transition: all .5s linear;    -moz-transition: all .5s linear;    -webkit-transition: all .5s linear;   }
#regio.animate .bg { opacity: 0; transform: translateY(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#regio.animate-active .bg{ opacity: 1; transform: translateY(0px);   }


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

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




/* advies ############################################################################################################################# */

#advies{  padding: 50px 0 0; z-index: 1; }
#advies .advies{  padding: 0 100px 0; font-weight: 500; font-size: 18px; }
#advies .txt{  padding:  60px 50% 100px 80px; background: #1DAE8D; color: #fff; border-radius: 20px; }
#advies .txt .container{  padding-right: 80px; }
#advies .txt:after{  position: absolute; top: 0; right: 0px; bottom: 0px; width: 50%; background: url("../img/visual-holistische-massage-cursussen-en-opleidingen-advies.jpg") no-repeat right center; background-size: cover; border-radius: 0 20px 20px 0; }


#advies h2{ font-weight: 800; font-size: 42px; padding: 0 50px 15px 0;  color: #fff; }
#advies .btn{ margin-top: 30px; margin-right: 20px; border: 2px solid transparent; font-size: 14px; }
#advies .btn.tel{ margin-right: 0px; border: 2px solid #fff; }
#advies .btn.tel:hover{  border: 2px solid transparent; }

#advies .btn.donker:hover{ background: #fff; color: #2A3362;  }
/**/
#advies.animate .advies { opacity: 0; transform: translateY(20px); transition-delay: 0.8s;  transition-property: opacity, transform;   }
#advies.animate-active .advies{ opacity: 1; transform: translateY(0px);   }



/* contact ############################################################################################################################# */

#contact {  padding: 50px 0 50px;  text-align: center; margin-top: 80px;  z-index: 0; }

#contact h2{  font-size: 45px;  padding: 0 18% 15px; font-weight: 800;  }
#contact h2 span.verdeling{  position: relative; float: left; width: 100%; }
#contact h3{  font-size: 24px;  padding: 0 22% 15px; color: #2A3362; }
#contact .txt{ padding: 0 20%; font-weight: 600;  }



#contact .btn{ margin-top: 50px;  }
#contact .btn.first{ margin: 50px 20px 0 540px; background: #2A3362;  }
#contact .btn.first:hover{  background: #1DAE8D;  }
#contact .contactbtns:after{  position: absolute; top: -5px; right: 50%; margin-right: -420px; width: 120px; height: 100px;  background: url("../img/svg-pijl-getekend-donker.svg") no-repeat center center; background-size:  100% auto;  }

#contact .contactbtns: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: contactarrow; 
    animation-name: contactarrow; 
}

@-webkit-keyframes contactarrow { 
    0% { opacity: 0.2;  } 
    50% { opacity: 0;   } 
    100% {  opacity: 0.2;   } 
} 
@keyframes contactarrow { 
    0% { opacity: 0.2;   } 
    50% { opacity: 0;  } 
    100% {  opacity: 0.2;  } 
} 

/**/
#contact.animate h2 { opacity: 0; transform: translateX(-20px); transition-delay: 0.2s;  transition-property: opacity, transform;   }
#contact.animate-active h2{ opacity: 1; transform: translateX(0px);   }

#contact.animate h3 { opacity: 0; transform: translateX(-20px); transition-delay: 0.4s;  transition-property: opacity, transform;   }
#contact.animate-active h3{ opacity: 1; transform: translateX(0px);   }

#contact.animate .txt { opacity: 0; transform: translateX(-20px); transition-delay: 0.6s;  transition-property: opacity, transform;   }
#contact.animate-active .txt{ opacity: 1; transform: translateX(0px);   }


#contact.animate .contactbtns { opacity: 0; transform: translateX(-20px); transition-delay: 0.8s;  transition-property: opacity, transform;   }
#contact.animate-active .contactbtns{ opacity: 1; transform: translateX(0px);   }


#contact.donker .bg { position: absolute; top: -580px; left: 0; right: 0; height: 600px; overflow: hidden;  }
#contact.donker .bg:after { position: absolute; top: 0; left: 0%; width: 100%; height: 480px;  background: url("../img/svg-boog-groenblauw.svg") no-repeat top center; background-size: cover; }
#contact.donker .bg:before { position: absolute; height: 200px; left: 0%; width: 100%; bottom: 0px;  background: #182048; }


#contact.donker { background: #182048;  color: #fff; }
#contact.donker h2{ color: #fff; }
#contact.donker h3{ color:#1DAE8D; }
#contact.donker .btn.first{ margin: 50px 20px 0 580px; background: #fff; color: #2A3362;   }
#contact.donker .btn.first:hover{  background: #1DAE8D; color: #fff;   }
#contact.donker .btn.tel:hover{  background: #fff; color: #2A3362;   }
#contact.donker .btn.tel:hover:after { background: url(../img/svg-telefoon-kleur.svg) no-repeat center center;    background-size: auto 100%; }

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

#afsluiting {  color: #2A3362;  padding: 50px 0 340px;  font-size: 13px; line-height: 180%; text-align: center; font-weight: 500; z-index: 0;   }
#afsluiting .bg { position: absolute; height: 245px; background:#CED3DA; left: 0; right: 0; bottom: 0; overflow: hidden; }
#afsluiting .bg:before { position: absolute; bottom: 0; left: 0; height: 240px; width: 100%; background: url("../img/visual-footer.jpg") no-repeat bottom center; background-size: cover;}
#afsluiting .bg:after { position: absolute; top: 0; left: 50%; height: 5px; width: 600px; margin-left: -300px; background: #FCB321;}

#afsluiting .copyright { padding-top: 130px; margin-top: 20px; }
#afsluiting .copyright:before { position: absolute; top: 0px; left: 0%; width: 100%; height: 100px;  background: url("../img/logo-positive-touch-symbool.svg") no-repeat center center; background-size:  contain; }


#afsluiting .footerlinks{ opacity: 0.5; font-size: 13px; }
#afsluiting a{ color: #2A3362; }
#afsluiting a:hover{ color: #2A3362; }

#afsluiting #naarboven{ z-index: 1; cursor: pointer; position: absolute; bottom: 270px; left: 30px;  width: 50px; height: 50px; background: #1DAE8D;  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{  background: #2A3362; }

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

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

#afsluiting.donker {  background: #182048;  color: #fff; }
#afsluiting.donker a{   color: #fff; }
#afsluiting.donker .copyright:before {  background: url("../img/logo-positive-touch-symbool-wit.svg") no-repeat center center; background-size:  contain; }
#afsluiting.donker .bg {  background:#182048;  }

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

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

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


#contactboloverlay{  position: fixed; bottom: 0px; right: 0px; left: 0px; top: 0; overflow: hidden; z-index: 1999; background:#2A3362; opacity: 0; display: none; }
#contactboloverlay.active{ display: block;  opacity: 0.4!important;  }

#contactbol{  position: fixed; bottom: 0px; right: 0px; width: 100px; height: 100px; overflow: hidden; z-index: 2000; }
#contactbol.active{ overflow: visible;   }

#contactbolicoon{ z-index: 1; cursor: pointer; position: fixed; bottom: 9px; right: -120px; width: 60px; height: 60px; background: #1DAE8D url("../img/svg-chat-wit.svg") no-repeat 17px 17px; background-size: auto 40%; border-radius: 100%;  box-shadow: 0 3px 5px rgba(0,0,0,0.3); }

#contactbolicoon{ 
    -webkit-animation: contactopnemenbol 2s ease 0s 1 normal forwards;
    animation: contactopnemenbol 2s ease 0s 1 normal forwards;
	animation-delay: 2s;
}
#contactbol.active #contactbolicoon{ z-index: 0;    }

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




#contactbolbg{ position: absolute; right: -90px; bottom: -90px; width: 90px; height: 90px; background: #2A3362; border-radius: 100%;  }

#contactbolbg{ 
    -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;   }      } 



#contactbol:hover #contactbolicoon{ background-color: #10A180; }

#contactbolopties { z-index: 0; position: absolute; bottom: 25px; opacity: 0;  right: 225px; width: 320px; height: 380px; height: 350px; padding: 30px 35px; background: #fff; box-shadow: 0px 3px 30px rgba(43, 40, 115, 0.2); border-radius: 20px; }

#contactbol.active #contactbolopties{ opacity: 1; z-index: 1; right: 25px; }

#contactboloptiessluiten { position: absolute; cursor: pointer; top: 25px; right: 25px; width: 17px; height: 17px; background: url("../img/svg-sluiten-donker.svg") no-repeat center center; background-size: auto 100%; opacity: 0.3; }
#contactboloptiessluiten:hover { opacity: 1;  }

#contactbolopties .contactboloptiestitel { font-size: 16px; font-weight: bold; line-height: 120%; padding: 7px 20px 15px 75px; }
#contactbolopties .contactboloptiestitel:before{ position: absolute; top: -3px; left: 0;  width: 55px; height: 55px; background:  #fff url("../img/logo-positive-touch-symbool.svg") no-repeat center center; background-size: auto 70%; border: 4px solid #eee; border-radius: 100%;  }

#contactbolopties .contactbollink{    margin-top: 15px; color: #414161; font-weight: bold; clear: both; padding: 0 5px 0 25px;  }
#contactbolopties .contactbollink:before{ position: absolute; height: 15px; left: 3px; width: 9px; top: 8px; background: url("../img/svg-pijl-rechts-kleur.svg") no-repeat top left; background-size: auto 100%; }

#contactbolopties .contactboloptie{    margin-top: 9px; color: #414161; font-weight: normal; line-height: 140%; font-size: 14px; clear: both; padding: 10px 5px 10px 58px; border-radius: 14px; background: #F6F8FB;  }
#contactbolopties .contactboloptie:before{ position: absolute;  height: 23px; width: 25px; left: 17px;  top: 15px;  }
#contactbolopties .contactboloptie.single:before{  height: 20px; top: 10px;  }
#contactbolopties .contactboloptie.afspraak:before{ background: url("../img/svg-gesprek-donker.svg") no-repeat center center; background-size: auto 100%; }
#contactbolopties .contactboloptie.vraag:before{ background: url("../img/svg-vraag-donker.svg") no-repeat center center; background-size: auto 100%; }
#contactbolopties .contactboloptie.telefoon:before{ background: url("../img/svg-telefoon-donker.svg") no-repeat center center; background-size: auto 100%; }
#contactbolopties .contactboloptie.whatsapp:before{ background: url("../img/svg-whatsapp-donker.svg") no-repeat center center; background-size: auto 100%; }
#contactbolopties .contactboloptie span{ font-weight: bold; color: #1DAE8D; }


#contactbolopties .contactboloptiestitel    {  opacity: 0; transform: translateX(-20px); transition-property: opacity, transform;  }
#contactbolopties .contactbollink    {  opacity: 0; transform: translateX(-20px); transition-property: opacity, transform;  }
#contactbolopties .contactboloptie    {  opacity: 0; transform: translateX(-20px); transition-property: opacity, transform;  }

#contactbol.active #contactbolopties .contactboloptiestitel  {  opacity: 1; transform: translateX(0px);    }
#contactbol.active #contactbolopties .contactbollink  {  opacity: 1; transform: translateX(0px);    }
#contactbol.active #contactbolopties .contactboloptie  {  opacity: 1; transform: translateX(0px);    }

#contactbol.active #contactbolopties .contactboloptiestitel{ transition-delay: 0.2s; }
#contactbol.active #contactbolopties .contactboloptie.afspraak{ transition-delay: 0.4s; }
#contactbol.active #contactbolopties .contactboloptie.vraag{ transition-delay: 0.6s; }
#contactbol.active #contactbolopties .contactboloptie.telefoon{ transition-delay: 0.8s; }
#contactbol.active #contactbolopties .contactboloptie.whatsapp{ transition-delay: 1.0s; }
#contactbol.active #contactbolopties .contactbollink{ transition-delay: 1.2s; }


#contactbolopties .contactboloptie:hover{     color: #fff;  background: #1DAE8D; text-decoration: none;  }
#contactbolopties .contactbollink:hover{     color: #1DAE8D;   text-decoration: none;  }
#contactbolopties .contactbollink:hover:before{  background: url("../img/svg-pijl-rechts-kleur.svg") no-repeat top left; background-size: auto 100%; }
#contactbolopties .contactboloptie:hover span{ color: #fff; }
#contactbolopties .contactboloptie.afspraak:hover:before{ background: url("../img/svg-gesprek-wit.svg") no-repeat center center; background-size: auto 100%; }
#contactbolopties .contactboloptie.vraag:hover:before{ background: url("../img/svg-vraag-wit.svg") no-repeat center center; background-size: auto 100%; }
#contactbolopties .contactboloptie.telefoon:hover:before{ background: url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 100%; }

#contactbolopties .contactboloptie.whatsapp:hover{ background: #1DAE8D;  }
#contactbolopties .contactboloptie.whatsapp:hover:before{ background: url("../img/svg-whatsapp-wit.svg") no-repeat center center; background-size: auto 100%; }