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

.trans :before{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
.trans :after{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }


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

html, body { font-family: 'Montserrat', sans-serif; 	font-size:20px;	font-weight: normal; background: #fff;	color: #2C2969;	line-height: 200%; }

body.noscroll { overflow: hidden; }

a{	color: #2C2969;  text-decoration:none;  }
a:hover{ color: #8DC63F; text-decoration:underline; }	

h1, h2, h3, h4, h5{	 line-height: 130%; color: #2C2969; }
h1 span, h2 span, h3 span{ color: #8DC63F; }
h1{ font-size: 46px; padding-bottom: 25px; font-weight: bold;  }
h2{ font-size: 66px; padding-bottom: 15px; font-weight: bold;   }
h3{ font-size: 36px; padding-bottom: 15px;  }
h4{ font-size: 24px; padding-bottom: 15px; }

.meerinfo { cursor: help;  }

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

.btn{ font-size: 18px; border-radius: 65px; font-weight: 600; color: #fff; text-transform: uppercase; background: #2C2969; padding: 0 35px; height: 65px; line-height: 65px;  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-color: #8DC63F; color: #fff; text-decoration: none;  cursor: pointer;  }

#home { }

/* topp ############################################################################### */
#top { position: fixed; height: 100px; z-index: 1000;  }

#top .top{ padding: 30px 0 0;  }
#top .logo{ width: 275px; height: 80px; background: url("../img/pesapesa.svg") no-repeat left top; background-size: auto 100%; }

#top #menu{ }
#top #menu .menuitem{ padding: 10px 15px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; }
#top #menu .menuitem.cta{ padding: 10px 30px; background: #8DC63F; color: #fff; border-radius: 50px; margin-left: 30px;  }
#top #menu .menuitem.cta:hover{  background: #2C2969; text-decoration: none;  }

#top.top1off {  background: #fff; box-shadow: 1px 1px 12px rgba(0,0,0,0.1);  }
#top.top1off .top{ padding: 20px 0 0;  }
#top.top1off .logo{ height: 65px; }


#top .openmenu{ display:none; width: 50px; height: 50px; border-radius: 100%; background: #2C2969;  cursor: pointer;  }
#top .openmenu:after{ content:'Menu'; position: absolute;text-align: right; height: 50px; line-height: 50px; font-weight: bold; text-transform: uppercase; left: -60px;}
#top .openmenu:before{ position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -9px; width: 18px; height: 14px; background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%;}
#top .openmenu:hover { background: #8DC63F;    }
#top .openmenu:hover:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%;}

#top .openmenu.active:after{ content:'Close'; }
#top .openmenu.active:before{  margin: -9px 0 0 -9px; width: 18px; height: 18px; background: url("../img/svg-sluiten-wit.svg") no-repeat; background-size: auto 100%;}
#top .openmenu.active:hover:before{ background: url("../img/svg-sluiten-wit.svg") no-repeat; background-size: auto 100%; }




#uitklapmenu { display: none; position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 999; }
#uitklapmenu .bg { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: #1C1850; opacity: 0.96;  }
#uitklapmenu.active { display: block;  }
#uitklapmenu .uitklapmenu { padding-top: 130px; }
#uitklapmenu .uitklapmenu:before { position: absolute; top: 30px; left: 50%; margin-left: -100px; width: 200px; height: 65px; background:url("../img/pesapesa-wit.svg") no-repeat center top; background-size: 100% auto; }
#uitklapmenu .uitklapmenuitem{ color: #fff;  padding: 10px 0; font-size: 14px; margin: 5px 0; text-align: center; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; }
#uitklapmenu .uitklapmenuitem.cta{ padding: 10px 30px; background: #8DC63F; color: #fff; border-radius: 50px; margin: 30px 10% 0; width: 80%;   }
#uitklapmenu .uitklapmenuitem.cta:hover{  background: #2C2969; text-decoration: none;  }

#uitklapmenu .close{ cursor: pointer; color: #fff; font-weight: bold; text-transform: uppercase; position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; }
#uitklapmenu .close:before{ position: absolute; top: -50px; left: 50%; border-radius: 100%; margin: 0 0 0 -20px; width: 40px; height: 40px; background: #fff;}
#uitklapmenu .close:after{ position: absolute; top: -39px; left: 50%; margin: 0 0 0 -9px; width: 18px; height: 18px; background: url("../img/svg-sluiten.svg") no-repeat; background-size: auto 100%;}

#uitklapmenu .close:hover{  color: #8DC63F;}
#uitklapmenu .close:hover:before{  background: #8DC63F;}

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

#header{ margin-top: 120px;  }

#header .bg{ position: absolute; top: 0; right: 0; left: 0px; height: 800px; overflow-x: hidden;   }
#header .bg:before{ position: absolute; top: 0;  bottom: 0; left: 50%; margin-left: -150px; width: 1000px; background: url("../img/visual-tablet.png") no-repeat left top; background-size: 100% auto; }
#header .bg:after{ position: absolute; top: 80px; left: 50%; margin-left: 350px; width: 350px; height: 700px; background: url("../img/visual-phone.png") no-repeat left top; background-size: contain; }

#header .bg2{ position: absolute; top: -110px; right: 0; width: 50%; height: 1100px; overflow-x: hidden; }
#header .bg2:before{ position: absolute; top: 0;  left: 450px; width: 700px; height: 700px; background: #F6FAFB; border-radius: 100%; }
#header .bg2:after{ position: absolute; top: 350px;  left: 600px; width: 700px; height: 700px; background: #8DC63F; border-radius: 100%; }

#header .header { height: 800px; padding: 80px 65% 0 0 ; }
#header .header:before { position: absolute; bottom: 50px; left: 50%; margin-left: -12px; width: 24px; height: 14px; background: url("../img/svg-pijl-beneden.svg") no-repeat center center; background-size: auto 100%; }
#header .header h1{ text-transform: uppercase; }
#header .header .container{ font-size: 26px; padding-bottom: 30px; }

#header .bg.animate:before{ opacity: 0; margin-left: -100px; transition: opacity .6s ease-out, margin .6s ease-out;    -o-transition: opacity .6s ease-out, margin .6s ease-out;    -moz-transition: opacity .6s ease-out, margin .6s ease-out;    -webkit-transition: opacity .6s ease-out, margin .6s ease-out; } 
#header .bg.animate.animate-active:before {  opacity: 1; margin-left: -150px; }

#header .bg.animate:after{ opacity: 0; top: 40px; transition: opacity .6s ease-out, top .6s ease-out;    -o-transition: opacity .6s ease-out, top .6s ease-out;    -moz-transition: opacity .6s ease-out, top .6s ease-out;    -webkit-transition: opacity .6s ease-out, top .6s ease-out; } 
#header .bg.animate.animate-active:after { transition-delay: 0.5s; opacity: 1; top: 80px; }

#header .header.animate{ opacity: 0; margin-left: -20px; transition: opacity .6s ease-out, margin .6s ease-out;    -o-transition: opacity .6s ease-out, margin .6s ease-out;    -moz-transition: opacity .6s ease-out, margin .6s ease-out;    -webkit-transition: opacity .6s ease-out, margin .6s ease-out; } 
#header .header.animate.animate-active { transition-delay: 0.2s; opacity: 1;  margin-left: 0px; }


/* HOW ############################################################################### */

#how{ text-align: center; padding: 0 0 50px; }
#how .benefits{ text-align: left; padding: 50px 5% 50px 15%; font-weight: 500; }
#how .benefits ul{ width: 50%; font-weight: 500; }
#how .benefits li{ position: relative; float: left; width: 100%; padding: 14px 60px 14px 70px; }
#how .benefits li:before{ position: absolute; top: 12px; left: 0; width: 40px; height: 40px; background: url("../img/svg-vink.svg") no-repeat top left; background-size: auto 100%;}

#how .details{ padding: 50px 10%; }
#how .details h2{ font-size: 46px; }

#how .illustration{ height: 500px; background: url("../img/svg-how-does-pesapesa-work.svg") no-repeat center top; background-size:contain;}

#how .method{ text-align: left; padding: 50px 5% 50px 15%; font-weight: 500; }
#how .method ul{ width: 50%; font-weight: 500; }
#how .method li{ position: relative; float: left; width: 100%; padding: 14px 60px 14px 70px; }
#how .method li:before{ position: absolute; top: 12px; left: 0; width: 40px; height: 40px; background: url("../img/svg-vink.svg") no-repeat top left; background-size: auto 100%;}

#how .bg{ position: absolute; top: -150px; left: 0; width: 50%; height: 700px; overflow-x: hidden; }
#how .bg:before{ position: absolute; top: 0;  right: 800px; width: 700px; height: 700px; background: #F6FAFB; border-radius: 100%; }

#how:after{ position: absolute; bottom: 0px; left: 50%; margin-left: -220px; width: 440px; height: 2px; background: url("../img/svg-split.svg") no-repeat top center; background-size: cover; }


/* STORY ############################################################################### */

#story{ text-align: center; padding: 100px 0 50px; }
#story .story{ padding: 0 10%; }

#story .visual{ height: 400px; margin: 60px 0; background: url("../img/the-story-behind-pesapesa.jpeg") no-repeat center center; background-size: cover; border-radius: 30px; }

#story .quote{ font-size: 25px; background: #fff; padding: 50px 160px; box-shadow: 1px 1px 12px rgba(0,0,0,0.1); border-radius: 30px; }
#story .quote:before{ position: absolute; top:40px; left: 40px; width: 25px; height: 20px; background: url("../img/svg-quoteboven.svg") no-repeat left top; background-size: auto 100%; }
#story .quote:after{ position: absolute; bottom:40px; right: 40px; width: 25px; height: 20px; background: url("../img/svg-quoteonder.svg") no-repeat left top; background-size: auto 100%; }

#story .textcolumn{ text-align: left; font-size: 16px; padding: 80px 0; }
#story .textcolumn.left{ padding-right: 40px; }
#story .textcolumn.right{ padding-left: 40px; }

#story:after{ position: absolute; bottom: 0px; left: 50%; margin-left: -220px; width: 440px; height: 2px; background: url("../img/svg-split.svg") no-repeat top center; background-size: cover; }

/* GETTING STARTED ############################################################################### */

#started{ text-align: center; padding: 100px 0 150px; }
#started .started{ padding: 0 10%; }

#started .started .apple{ border-radius: 8px; margin-left: 320px; margin-top: 40px; width: 314px; height:90px; margin-right: 20px; background: url("../img/svg-app-apple.svg") no-repeat left top; background-size: contain; }
#started .started .apple:before{ position: absolute; top: -50px;  left: -200px; width: 180px; height: 150px; background: url("../img/svg-pijl-rechts.svg") no-repeat top left; background-size: contain;}

#started .started .android{ border-radius: 8px; width: 314px; margin-top: 40px; height:90px; background: url("../img/svg-app-android.svg") no-repeat left top; background-size: contain; }
#started .started .android:before{ position: absolute; top: -50px; right: -220px; width: 180px; height: 150px; background: url("../img/svg-pijl-links.svg") no-repeat top left; background-size: contain;}

#started .bg{ position: absolute; top: -300px; right: 0; width: 50%; height: 700px; overflow-x: hidden; }
#started .bg:before{ position: absolute; top: 0;  left: 800px; width: 700px; height: 700px; background: #F6FAFB; border-radius: 100%; }

#started:after{ position: absolute; bottom: 0px; left: 50%; margin-left: -220px; width: 440px; height: 2px; background: url("../img/svg-split.svg") no-repeat top center; background-size: cover; }

#started .started .apple:hover{ box-shadow: 0 5px 15px rgb(0,0, 0, 0.3);    }
#started .started .android:hover{ box-shadow: 0 5px 15px rgb(0,0, 0, 0.3);    }

/* company ############################################################################### */

#companyform { padding: 60px 0 ; text-align: center; }
#companyform .companyform{ padding: 0 10%; }


#formcontainer{ text-align: left; width: 70%; margin-left: 15%; font-size: 16px;    box-shadow: 1px 1px 12px rgba(0,0,0,0.1);    border-radius: 30px;  margin-top: 40px; ; padding: 60px 80px ; }

#companyform textarea{	border: 1px solid rgba(0,0,0,0.1); background: #fff;	width:100%;	height: 123px;	padding: 25px; box-sizing: border-box;	border-radius: 3px;	    font-family: 'Montserrat', sans-serif;}
#companyform input[type=text], #companyform input[type=email], #companyform input[type=tel]{	border: 1px solid rgba(0,0,0,0.1); background: #fff;	width:100%;	padding: 0 15px; box-sizing: border-box;  height: 40px; line-height: 40px;	border-radius: 3px;	font-family: 'Montserrat', sans-serif; }
#companyform select{	border: 1px solid rgba(0,0,0,0.1); background: #fff  url("../img/svg-pijl-beneden-donker-1.svg") no-repeat 96% center; background-size: 10px auto;	width:100%;	padding: 0 15px; box-sizing: border-box;  height: 40px; line-height: 40px;	border-radius: 3px;    font-family: 'Montserrat', sans-serif;	-webkit-appearance: none;	}
#companyform input[type=submit]{	  background: #8DC63F;    border-radius: 50px; color: #fff;    font-family: 'Montserrat', sans-serif; border: 0;		position: relative; 	float: left; 	height: 50px; 	line-height: 47px; 	font-size: 16px; 	font-weight: 600; 		padding: 0 25px;    transition:all .2s linear;     -o-transition:all .2s linear;     -moz-transition:all .2s linear;     -webkit-transition:all .2s linear;	cursor: pointer;	-webkit-appearance: none;	}
#companyform input[type=submit]:hover{ color: #fff;	background:  #2C2969;  text-decoration: none; ;}

#companyform textarea, #companyform input[type=text], #companyform select, #companyform input[type=email], #companyform input[type=tel] { outline-style: none; }

#companyform .tabel{position: relative;float: left; width: 100%; margin: 0px 0px 10px 0px; }
#companyform .tabel .kolom1{  position: relative; float: left; width: 30%; padding-right: 50px; box-sizing: border-box; text-align: left; font-weight: bold; }
#companyform .tabel .kolom2{ position: relative; float: left; width: 70%; padding: 0 0 10px 0; box-sizing: border-box; }
#companyform .tabel .kolom2.marge{ padding: 20px 0; }
#companyform .verplicht {  font-size: 10px;  text-align: left; padding-top: 20px; }



#companyform:after{ position: absolute; bottom: 0px; left: 50%; margin-left: -220px; width: 440px; height: 2px; background: url("../img/svg-split.svg") no-repeat top center; background-size: cover; }



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

#faq { padding: 100px 0 30px 0; z-index: 1; overflow: hidden; }
#faq .faq h3{  padding-bottom: 35px;   }

#faq .centered{ width: 1150px; text-align: center;  }
#faq .faqitems{ padding: 0 10% 30px; margin-bottom: 20px; font-size: 16px;  }
#faq .faqitems .faqitem{  padding: 10px 25px 10px 25px; border-radius: 25px; margin: 10px 0; background: #fff; box-shadow: 0 5px 15px rgb(0,0, 0, 0.08); text-align: left; font-weight: 500; color: #000; }
#faq .faqitems .faqitem .nummer{ position: absolute; top: 10px; left: 30px; font-weight: bold; color: #8DC63F; width: 10px; text-align: right; margin-right: 20px; }
#faq .faqitems .faqitem .vraag{ padding: 0px 35px; }
#faq .faqitems .faqitem .sluiten{  position: absolute; overflow: hidden; width: 0px; opacity: 0; top: 15px; right: 20px; height: 25px; line-height: 25px; color: #fff; background: #8DC63F; 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: #f5f5f5; border-radius: 10px; }
#faq .faqitems .faqitem:after{ position: absolute; top: 0px; right: 20px; height: 55px; width: 25px; background: url("../img/svg-pijl-beneden.svg") no-repeat center center; background-size: 50% auto; }
#faq .faqitems .faqitem:after{ transition: all .2s linear;    -o-transition: all .2s linear;    -moz-transition: all .2s linear;    -webkit-transition: all .2s; }

#faq .faqitems .faqitem.active .vraag { font-weight: bold; color: #8DC63F;  }
#faq .faqitems .faqitem.active .antwoord { height: auto; margin: 10px 0; padding: 20px 30px;  opacity: 1; }
#faq .faqitems .faqitem.active .sluiten { width: 90px; 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 .faqitems .faqitem:hover{ color: #fff; background: #2C2969; }
#faq .faqitems .faqitem.active:hover{ color: #2C2969; background: #fff; }

#faq:after{ position: absolute; bottom: 0px; left: 50%; margin-left: -220px; width: 440px; height: 2px; background: url("../img/svg-split.svg") no-repeat top center; background-size: cover; }

#faq .faqitems .faqinklappen{  cursor: pointer;  position: absolute; top: 0; left: 0; right: 0; height: 50px;  display: none;	}
#faq .faqitems .faqitem.active  .faqinklappen{ display: block;	}

#faq .faqitems .faquitklappen{  cursor: pointer;  position: absolute; top: 0; left: 0; right: 0; height: 50px;   display: block;	}
#faq .faqitems .faqitem.active .faquitklappen{ display: none;	}



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

#afsluiting { margin-top: 100px;  padding:140px 0 120px; line-height: 160%; font-size: 12px; z-index: 0; text-align: center; font-weight: 500;   }
#afsluiting:before { position: absolute; top: 0; right: 0; left: 0; height: 100px; background: url("../img/pesapesa-symbol.svg") no-repeat top center; background-size: auto 100%;}
#afsluiting a:hover{ color: #8DC63F; }