@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: "Poppins", sans-serif; font-size:16px; font-weight: normal; background: #fff; color: #2B2873; line-height: 200%; } body.noscroll { overflow: hidden; } a{ color: #00A7E1; text-decoration:none; } a:hover{ text-decoration:underline; } h1, h2, h3, h4, h5{ color: #00A7E1; line-height: 130%; } h1 span, h2 span, h3 span{ } h1{ font-size: 40px; padding-bottom: 25px; color: #2B2873; } h2{ font-size: 32px; padding-bottom: 25px; color: #2B2873; } h3{ font-size: 18px; padding-bottom: 15px; color: #00A7E1; } h4{ font-size: 14px; padding-bottom: 25px; color: #2B2873; } #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: 30px; font-size: 15px; font-weight: bold; color: #fff; text-transform: uppercase; background: #2B2873; padding: 0 35px; height: 50px; line-height: 51px; 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: #5BCBF5; 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: #01134D; box-shadow: none; } .btn.transparant:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; border: 2px solid #E0E3EB; 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 #2B2873; } .btn.transparant:hover { background: #2B2873; color: #fff; } .btn.kleur { background: #5BCBF5; color: #fff; box-shadow: none; } .btn.kleur:hover { background: #2B2873; color: #fff; } .btn.wit { background: #F1F1F1; color: #01134D; box-shadow: none; } .btn.wit:hover { background: #5BCBF5; color: #fff; } .btn.voordelen { padding-left: 60px; background: #00A7E1; } .btn.voordelen:after { content:''; position: absolute; top: 7px; left: 10px; width: 35px; height: 35px; border-radius: 100%; background: #2B2873 url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 30%; } .btn.voordelen:hover { background: #2B2873; } .btn.voordelen:hover:after{ background-color: #5BCBF5; } .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 #2B2873; } .btn.transparantwit:hover { background: #2B2873; color: #fff; } .btn.scan { padding-left: 60px; background: #2B2873; color: #fff; box-shadow: none;} .btn.scan:after { content:''; position: absolute; top: 14px; left: 20px; width: 24px; height: 24px; background: url("../img/svg-schoonmaakscan-wit.svg") no-repeat center center; background-size: auto 100%; } .btn.scan:hover { background: #5BCBF5; } .btn.openmenu { padding-left: 70px; background: #fff; color: #5BCBF5; 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: #2B2873; } .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: #5BCBF5; color: #fff; box-shadow: none;} .btn.tel:after { content:''; position: absolute; top: 16px; left: 16px; width: 18px; height: 18px; background: url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 100%; } .btn.tel:hover { background: #5BCBF5; } .btn.tel.wit { background: none; border: 2px solid rgba(255,255,255,0.2); line-height: 47px; } .btn.tel.wit:after { top: 14px; } .btn.tel.wit:hover { background: #5BCBF5; border: 2px solid #5BCBF5; } .btn-leesverder{ background: #2B2873; 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: #5BCBF5; } /* MENU ############################################################################################################################# */ #menu{ position: absolute; top: 20px; right: 0; list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 3; } #menu li{ position: relative; float: left; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;} #menu a{ position: relative; float: left; height: 60px; line-height: 60px; padding: 0 22px 0 22px; 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: 0px; padding-right: 40px; } #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-licht.svg") no-repeat; background-size: auto 100%; } #menu .tel .tel:after{ content:''; position: absolute; top: 50%; margin-top: -3px; right: -15px; width: 6px; height: 6px; border-radius: 100%; background: #00A7E1; } #menu .custom{ margin-right: 15px; } #menu .custom: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 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: 50px; left: 0%; } .submenu{ position: relative; float: left; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); margin-top: 0px; width: 260px; border-radius: 10px; display: none; box-sizing: border-box;} .submenu a{ position: relative!important; float: left!important; font-size: 12px!important; border-right: 0!important; height: auto!important; padding: 15px 20px 15px 20px!important; width: 100%!important; margin: 0!important; line-height: 140%!important; box-sizing: border-box; } .submenu li{ border-bottom: 1px solid rgba(255,255,255,0.3); position: relative; float: left; width: 100%; } .submenu li:first-of-type a{ border-radius: 10px 10px 0 0!important;} .submenu a:hover{ padding-left: 35px!important; text-decoration: none!important; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); } .submenu a:before{ content:''; opacity: 0; position: absolute; top: 21px; left: 10px; width: 4px; height: 4px; border-radius: 100%; background: #fff; transition:all .4s linear; -o-transition:all .4s linear; -moz-transition:all .4s linear; -webkit-transition:all .4s linear; } .submenu a:hover:before{ opacity: 1; left: 20px; } .submenu:after{ position: absolute; bottom: -2px; width: 30px; height: 4px; border-radius: 4px; left: 50%; margin-left: -15px; } .mobilesubmenuitem { display: none; } #menu .mobielmenuzichtbaar { display:none; } #menu a{ color: #1E398D; font-size: 14px; font-weight: bold; text-transform: uppercase; } #menu a.active{ color: #5BCBF5!important; text-decoration: underline; } #menu a:hover{ color: #5BCBF5!important; } #menu a.active:hover{ } #menu .login .menuitem{ background: #fff; height: 55px; width: 55px; box-shadow: 0px 5px 10px rgba(0,0,0,0.1); border-radius: 30px; margin-left: 20px; } #menu .login .menuitem span{ display: none; } #menu .login .menuitem:before{ position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; } #menu .login .menuitem:before{ background: url("../img/svg-login-donker.svg") no-repeat center center; background-size: auto 60%; } #menu .login:hover .menuitem{ background: #1E398D; } #menu .login:hover .menuitem:before{ background: url("../img/svg-login-wit.svg") no-repeat center center; background-size: auto 60%; } #menu .last .menuitem{ background: #5BCBF5; color: #fff; margin-left: 25px; height: 55px; line-height: 55px; padding: 0 30px 0 30px; border-radius: 30px; } #menu .last:hover .menuitem{ background: #2B2873; color: #fff!important; text-decoration: none!important; } #menu .openmenu .menuitem{ background: #1E398D; height: 54px; width: 54px; border-radius: 30px; } #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: #5BCBF5; } #menu .menusplit { background: #E2E2EE; height: 50px; width: 3px; border-radius: 3px; margin: 5px 35px; opacity: 0.7; } #menu .submenu{ border: 1px solid #eee; border-bottom: 15px solid #5BCBF5; background: #fff; } #menu .submenu a{ color: #000!important; } #menu .submenu a:hover{ background:#5BCBF5!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: url("../img/visual-menu.jpg") no-repeat right top; background-size: cover; } #menuoverlay.active { display: block; } #menuoverlay .content{ height: 100vh; z-index: 10000; } #menuoverlay .logowit { position: absolute; top: 30px; left: 0px; width: 275px; height: 55px; background: url("../img/logo-prosabt-finance-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: 170px; } #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: #00A7E1; } #menuoverlay-top #sluiten:hover:before{ background: url("../img/svg-sluiten-wit.svg") no-repeat;} #menuoverlay-top .afspraak { z-index: 1; background:#1c2443; text-transform: uppercase; font-weight: 500; font-size: 16px; line-height: 59px; color: #fff; margin-left: 10px; height: 65px; padding: 0 45px; border-radius: 5px; border: 2px solid transparent; } #menuoverlay-top .afspraak { } #menuoverlay-top .afspraak:hover { border: 2px solid rgba(255,255,255,0.4); background: #1c2443; text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,0.3); } #menuoverlay-top-menu { position: absolute; top: 150px; left: 0px; right: 0; } #menuoverlay-top-menu .titel{ position: relative; float: left; width: 100%; color: #00A7E1; 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 .focusitems{ list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 1; width: 30%; padding-right: 90px; } #menuoverlay-top-menu .focusitemsblok{ padding-bottom: 40px; } #menuoverlay-top-menu .focusitemsblok a { padding: 0 5px 15px 30px; line-height: 120%; color: #fff; } #menuoverlay-top-menu .focusitemsblok a .uitklapsubmenufocustitel{ font-weight: bold; font-size: 16px; color: #fff; padding-bottom: 2px; } #menuoverlay-top-menu .focusitemsblok a .uitklapsubmenufocussubtitel{ font-size: 12px; color:#fff; font-style: italic; opacity: 0.7; } #menuoverlay-top-menu .focusitemsblok a: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%; } #menuoverlay-top-menu .focusitemsblok a:hover .uitklapsubmenufocustitel{ text-decoration: underline; } #menuoverlay-top-menu .focusitemsblok a.zzp:before{ position: absolute; height: 14px; left: 0px; width: 18px; top: 5px; background: url("../img/svg-zzp-kleur.svg") no-repeat top left; background-size: auto 100%; } #menuoverlay-top-menu .focusitemsblok a.vof:before{ position: absolute; height: 14px; left: 0px; width: 18px; top: 5px; background: url("../img/svg-vof-kleur.svg") no-repeat top left; background-size: auto 100%; } #menuoverlay-top-menu .focusitemsblok a.bv:before{ position: absolute; height: 14px; left: 0px; width: 18px; top: 5px; background: url("../img/svg-bv-kleur.svg") no-repeat top left; background-size: auto 100%; } #menuoverlay-top-menu ul{ list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 1; width: 70%; } #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:33%; 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: #00A7E1;; padding: 0 35px; color:#fff; line-height: 55px; height: 55px; } #menuoverlay-top .aanvraag:hover { color: #fff!important; background: #00A7E1 ; text-decoration: none; } /* TOPCONTAINER ############################################################################################################################# */ #top{ position: fixed; top: 0px; left: 0px; z-index: 999; height: 100px; } #top .logo{ position: absolute; top: 20px; left: 0px; width: 275px; z-index: 1; height: 58px; background: url("../img/logo-prosabt-finance.svg") no-repeat left center; background-size: auto 100%; } #uitklapsubmenu{ position: fixed; top: 0px; left: 0; right: 0; background:#fff; z-index: 0; box-shadow: 0 3px 6px rgba(0,0,0,0.1); opacity: 0; display: none; } #uitklapsubmenu .uitklapsubmenu{ padding: 110px 0 30px 0; background: url("../img/svg-watermerk.svg") no-repeat left 160px; background-size: auto 45%; display: none; } #uitklapsubmenu .uitklapsubmenukolommen{ padding: 40px 0 0 480px; border-top: 1px solid #EEEFF7;} #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus{ width: 360px; margin-right: 30px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a { padding: 0 5px 15px 30px; line-height: 120%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a .uitklapsubmenufocustitel{ font-weight: bold; font-size: 16px; color: #2B2873; padding-bottom: 2px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a .uitklapsubmenufocussubtitel{ font-size: 12px; color:#8E9CC6; font-style: italic; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a: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%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a:hover .uitklapsubmenufocustitel{ text-decoration: underline; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a.zzp:before{ position: absolute; height: 14px; left: 0px; width: 18px; top: 5px; background: url("../img/svg-zzp.svg") no-repeat top left; background-size: auto 100%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a.vof:before{ position: absolute; height: 14px; left: 0px; width: 18px; top: 5px; background: url("../img/svg-vof.svg") no-repeat top left; background-size: auto 100%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenufocus a.bv:before{ position: absolute; height: 14px; left: 0px; width: 18px; top: 5px; background: url("../img/svg-bv.svg") no-repeat top left; background-size: auto 100%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenuoverzicht{ width: 280px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenuoverzicht .uitklapsubmenuoverzichttitel{ font-weight: bold; font-size: 16px; padding-bottom: 5px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenuoverzicht a{ font-size: 14px; color: #2B2873; clear: both; padding: 6px 5px 6px 25px; line-height: 130%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenuoverzicht a: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%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenuoverzicht a:before{ transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenuoverzicht a:hover:before{ left: 6px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta{ width: 420px; background: #2B2873; color: #fff; padding: 25px 25px 25px 35px; border-radius: 20px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta .uitklapsubmenuctatitel{ font-size: 20px; font-weight: bold; padding: 5px; line-height: 140%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta .uitklapsubmenuctatitel span{ font-weight: normal; font-style: italic; font-size: 15px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta .uitklapsubmenuctalink{ color: #fff; font-weight: bold; clear: both; padding: 0 5px 0 25px; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta .uitklapsubmenuctalink: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%; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta .uitklapsubmenuctalink:before{ transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta:hover{ background: #00A7E1; } #uitklapsubmenu .uitklapsubmenu .uitklapsubmenucta:hover .uitklapsubmenuctalink:before{ left: 6px; background: url("../img/svg-pijl-rechts-wit.svg") no-repeat top left; background-size: auto 100%;} #top.uitklapactive #uitklapsubmenu { opacity: 1; display: block; } #top.uitklapactive .uitklapsubmenu.uitklapactive { opacity: 1; display: block; } #top:hover #uitklapsubmenu-uit { opacity: 1; display: block; } /* progress ############################################################################### */ #progress{ position: fixed; top: 0px; left: 0px; right: 0px; z-index: 10000; } .progress-container { width: 100%; height: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .progress-bar { position: absolute; height: 4px; background: #00A7E1; width: 0%; top: 2px; border-radius: 5px; } .progress-bar:after{ position: absolute; top: 0; right: -5px; width: 4px; height: 4px; background: #00A7E1; border-radius: 100%; } /* mobielctamenu ############################################################################################################################# */ #mobielctamenu{ display: none; z-index: 100; position: fixed; bottom: 0; left: 0; background: #fff ; 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: #1c2443; } #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; } /* TOP VERVOLG + SCROLL ############################################################################################################################# */ #top.top1off{ background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.1); } #top.top1off #menu{ } #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{ box-shadow: 0 3px 6px rgba(0,0,0,0.1); background: #fff; } #top.vervolgpagina #menu{ } #top.vervolgpagina .logo{ } #top.vervolgpagina #menu .menuitem { } #top.vervolgpagina #menu .last .menuitem { } #top.vervolgpagina #menu .last .menuitem:hover { } #top.vervolgpagina #menu .last .menuitem:after { } /* voordeelblok ############################################################################################################################# */ .voordeelblok{ background: #fff; border-radius: 15px; padding: 30px 30px 30px 105px; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); font-size: 15px; line-height: 150%; } .voordeelblok:before{ position: absolute; top: 20px; left: 25px; background: #fff; width: 60px; height: 60px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); } .voordeelblok.klok:before{ background: url("../img/svg-klok-kleur.svg") no-repeat center center; background-size: 60%; } /* HEADER ############################################################################################################################# */ #header{ height: 1050px; background: #F8F9FD; } #header .bg{ position: absolute; top: 100px; left: 0; right: 0; bottom: 0; overflow: hidden; } #header .bg:before { position: absolute; top: 100px; right: 50%; margin-right: -920px; height: 1065px; width: 780px; background: url("../img/visual-header.png") no-repeat center center; background-size: auto 100%; } #header .bg:before { transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; } #header .bg2 { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; } #header .bg2:before { position: absolute; bottom: 0; left: 50%; margin-left: -1200px; height: 550px; width: 2400px; background: url("../img/visual-header-overlay.svg") no-repeat center top; background-size: 100% auto;} #header .bg2:before { transition: all 1.0s linear; -o-transition: all 1.0s linear; -moz-transition: all 1.0s linear; -webkit-transition: all 1.0s linear; } #header .bg.animate { opacity: 0; } #header .bg.animate-active { opacity: 1; } #header div.banner{ z-index: 1; position: absolute; top: 230px; left:0px; width: 600px; } #header .container h1{ ; padding-bottom: 35px; font-size: 50px; font-weight: bold; line-height: 115%; } #header .container h3{ padding: 30px 40px; line-height: 140%; color: #2B2873; font-size: 19px; background: #fff; font-style: italic; border-radius: 10px; margin-bottom: 30px; box-shadow: 0px 3px 30px rgba(43, 40, 115, 0.2); } #header .container h3:before { position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 30px solid #2B2873; border-right: 30px solid transparent; border-top-left-radius: 10px; } #header .container .btn.voordelen { margin-right: 20px; } #header .voordeelblokken { position: absolute; top: 150px; left: 0; right: 0; bottom: 0; } #header .voordeelblok span{ color: #5BCBF5; font-weight: bold; } #header .voordeelblok.controlling{ position: absolute; width: 340px; right: 0px; top: 0px; padding: 21px 30px 21px 105px; line-height: 140%; font-size: 14px; font-weight: bold; } #header .voordeelblok.controlling:before{ width: 55px; height: 55px; background: #5BCBF5 url("../img/svg-chart-wit.svg") no-repeat center center; background-size: 50%; box-shadow: none; border-radius: 10px; } #header .voordeelblok.salarisadministratie{ position: absolute; width: 320px; right: 430px; top: 200px; padding: 21px 30px 21px 100px; line-height: 140%; font-size: 14px; font-weight: bold; } #header .voordeelblok.salarisadministratie:before{ width: 55px; height: 55px; background: #5BCBF5 url("../img/svg-mensen-wit.svg") no-repeat center center; background-size: 50%; box-shadow: none; border-radius: 10px; } #header .voordeelblok.boekhouding{ position: absolute; width: 380px; right: 430px; top: 420px; padding: 31px 35px 31px 115px; line-height: 140%; font-size: 16px; font-weight: bold; } #header .voordeelblok.boekhouding:before{ top: 35px; left: 30px; background: #5BCBF5 url("../img/svg-boek-wit.svg") no-repeat center center; background-size: 50%; box-shadow: none; border-radius: 10px; } #header .voordeelblok.fiscaal{ position: absolute; width: 305px; right: 50px; top: 560px; padding: 21px 30px 21px 100px; line-height: 140%; font-size: 13px; font-weight: bold; } #header .voordeelblok.fiscaal:before{ width: 50px; height: 50px; background: #5BCBF5 url("../img/svg-stats-wit.svg") no-repeat center center; background-size: 50%; box-shadow: none; border-radius: 10px; } #header .voordeelblokbg { background: #F0F1F8; border-radius: 10px; position: absolute; } #header .voordeelblokbg1 { width: 160px; height: 60px; right: 50%; top: 120px; margin-right: -1000px; } #header .voordeelblokbg2 { width: 140px; height: 60px; right: 50%; top: 130px; margin-right: -90px; } #header .voordeelblokbg3 { width: 110px; height: 50px; right: 50%; top: 390px; margin-right: -190px; } #header .voordeelblokbg4 { width: 90px; height: 50px; right: 50%; top: 650px; margin-right: -140px; } #header.animate div.banner { opacity: 0; transform: translateX(-20px); } #header.animate-active div.banner { opacity: 1; transform: translateX(0px); } #header.animate h1 { opacity: 0; transform: translateY(-5px); transition-property: opacity, transform; } #header.animate-active h1 { opacity: 1; transform: translateX(0px); transition-delay: 0.2s; } #header.animate h3 { opacity: 0!important; transform: translateY(-5px)!important; transition-property: opacity, transform!important; } #header.animate-active h3 { opacity: 1!important; transform: translateX(0px)!important; transition-delay: 0.2s!important; } #header.animate .btn.voordelen { opacity: 0!important; transform: translateY(-5px)!important; transition-property: opacity, transform!important; } #header.animate-active .btn.voordelen { opacity: 1!important; transform: translateX(0px)!important; transition-delay: 0.6s!important; } #header.animate .btn.transparant { opacity: 0; transform: translateY(-5px); transition-property: opacity, transform; } #header.animate-active .btn.transparant { opacity: 1; transform: translateX(0px); transition-delay: 0.8s; } #header.animate .bg:before { opacity: 0; transform: translateY(20px); transition-property: opacity, transform; } #header.animate-active .bg:before { opacity: 1; transform: translateX(0px); transition-delay: 1.0s; } #header.animate .bg2:before { opacity: 0; transform: translateX(160px); transition-property: opacity, transform; } #header.animate-active .bg2:before { opacity: 1; transform: translateX(0px); transition-delay: 0.2s; } #header.animate .voordeelblok.controlling { opacity: 0!important; transform: translateX(30px)!important; transition-property: opacity, transform!important; } #header.animate-active .voordeelblok.controlling { opacity: 1!important; transform: translateX(0px)!important; transition-delay: 2.0s!important; } #header.animate .voordeelblokbg1 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #header.animate-active .voordeelblokbg1 { opacity: 1; transform: translateX(0px); transition-delay: 2.3s; } #header.animate .voordeelblok.salarisadministratie { opacity: 0!important; transform: translateX(-40px)!important; transition-property: opacity, transform!important; } #header.animate-active .voordeelblok.salarisadministratie { opacity: 1!important; transform: translateX(0px)!important; transition-delay: 2.3s!important; } #header.animate .voordeelblokbg2 { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #header.animate-active .voordeelblokbg2 { opacity: 1; transform: translateX(0px); transition-delay: 2.6s; } #header.animate .voordeelblok.boekhouding { opacity: 0!important; transform: translateX(-40px)!important; transition-property: opacity, transform!important; } #header.animate-active .voordeelblok.boekhouding { opacity: 1!important; transform: translateX(0px)!important; transition-delay: 2.9s!important; } #header.animate .voordeelblokbg3 { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #header.animate-active .voordeelblokbg3 { opacity: 1; transform: translateX(0px); transition-delay: 3.2s; } #header.animate .voordeelblok.fiscaal { opacity: 0!important; transform: translateX(30px)!important; transition-property: opacity, transform!important; } #header.animate-active .voordeelblok.fiscaal { opacity: 1!important; transform: translateX(0px)!important; transition-delay: 2.6s!important; } #header.animate .voordeelblokbg4 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #header.animate-active .voordeelblokbg4 { opacity: 1; transform: translateX(0px); transition-delay: 2.9s; } #header:before, #header:after { position: absolute; bottom: 65px; left: 50%; margin-left: -800px; z-index: 10; width: 60px; height: 60px; border-radius: 100%; } #header:before { box-shadow: 0px 3px 30px rgba(43, 40, 115, 0.1); background: #fff; } #header:after { background: url("../img/svg-pijl-beneden-donker.svg") no-repeat center center; background-size: 30% auto; } #header: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: headerpijl; animation-name: headerpijl; } @-webkit-keyframes headerpijl { 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 headerpijl { 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); } } /* blok ############################################################################################################################# */ .blok { padding: 60px; border-radius: 60px; line-height: 160%; font-size: 15px; } .bloksplit { height: 60px;} .blok { background: #F1F3F8; color: #2B2873; } .blok .bloktitel{ font-size: 33px; font-weight: bold; line-height: 130%; padding-bottom: 10px; } .blok .bloktitel span{ font-size: 20px; font-weight: 500; font-style: italic; } .blok .link{ margin-top: 20px; color: #01134D; font-weight: bold; clear: both; padding: 0 5px 0 25px; } .blok .link:before{ position: absolute; height: 15px; left: 3px; width: 9px; top: 3px; background: url("../img/svg-pijl-rechts-kleur.svg") no-repeat top left; background-size: auto 100%; } .blok:hover .link{ color: #fff; } .blok:hover { text-decoration: none!important; background: #2B2873; color: #fff; } .blok.kleur { color: #fff; background: #00A7E1; } .blok.kleur .link{ text-align: center; font-weight: bold; border-radius: 30px; padding: 15px 0; background: #2B2873; margin-top: 20px; color: #fff; } .blok.kleur:hover { background: #2B2873; } .blok.kleur:hover .link{ background: #5BCBF5; } .blok.kleur .link:before{ display: none; } .blok.donker { color: #fff; background: #2B2873; } .blok.donker .link{ text-align: center; font-weight: bold; border-radius: 30px; padding: 15px 0; background: #5BCBF5; margin-top: 20px; color: #fff; } .blok.donker:hover { background: #00A7E1; } .blok.donker:hover .link{ background: #2B2873; } .blok.donker .link:before{ display: none; } .blokvink { padding: 5px 30px 5px 120px; font-style: italic; font-size: 16px; line-height: 165%; } .blokvink:before{ position: absolute; top: 0px; left: 20px; width: 60px; height: 60px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); background: #fff url("../img/svg-vink-kleur.svg") no-repeat center center; background-size: auto 19px; } .blokvink.margin { margin-bottom: 20px; } .blokquote { padding: 5px 30px 5px 125px; line-height: 165%; font-style: italic; font-size: 15px; } .blokquote span{ position: relative; float: left; width: 100%; font-size: 13px; font-weight: bold; color: #00A7E1; padding-top: 5px; } .blokquote:before{ position: absolute; top: 0px; left: 0px; width: 95px; height: 95px; border-radius: 100%; } .blokquote:after{ position: absolute; bottom: -20px; left: -20px; width: 35px; height: 25px; background: url("../img/svg-quoteboven-licht.svg") no-repeat center center; background-size: auto 100%;} .blokquote.top:after{ top: -28px; bottom: auto; } .blokquote.center { padding: 120px 50px 5px 50px; text-align: center; } .blokquote.center:before{ left: 50%; margin-left: -47px; } .blokquote.center:after{ top: -10px; left: 50%; margin-left: 70px; bottom: auto; } .blokquote.quote1:before { background: url("../img/quote/shary-van-plateringen-onderneemster-en-persoonlijk-begeleidster.jpg") no-repeat center center; background-size: cover;} .blokquote.quote2:before { background: url("../img/quote/ibrahim-yildiz-hem-nature-bv.jpg") no-repeat center center; background-size: cover;} .blokquote.quote3:before { background: url("../img/quote/valerie-van-leeuwen.jpg") no-repeat center center; background-size: cover;} .blokquote.quote4:before { background: url("../img/quote/jasper-arnou-finify-partner.jpg") no-repeat center center; background-size: cover;} .blokquote.quote5:before { background: url("../img/quote/shary-van-plateringen-onderneemster-en-persoonlijk-begeleidster.jpg") no-repeat center center; background-size: cover;} /* intro ############################################################################################################################# */ #intro { padding: 50px 0 90px; } #intro .intro{ padding: 0 57% 0 0 ; } #intro .intro:before{ position: absolute; bottom: -80px; right: -40px; width:220px; height: 220px; border-radius: 20px; background: #5BCBF5; z-index: 0; } #intro .intro:after{ position: absolute; top: 0; right: 0; bottom: 0; width: 50%; border-radius: 30px; background: url("../img/visual-intro.jpg") no-repeat center center; background-size: cover; z-index: 0; } #intro .intro:before { transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; } #intro .intro:after { transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; } #intro .intro h2{ font-size: 45px; font-weight: bold; padding-right: 50px; padding-bottom: 5px; } #intro .intro h3{ font-size: 22px; font-weight: 300; padding-bottom: 20px; } #intro .voordeelblok{ position: absolute; bottom: -30px; right: 70px; width: 400px; z-index: 1; } #intro .check{ background: #F8F9FD; padding: 10px 20px 10px 65px; font-size: 18px; font-weight: 600; margin-top: 30px; border-radius: 50px; } #intro .check span{ color: #00A7E1; } #intro .check:before{ position: absolute; top: 10px; left: 10px; width: 35px; height: 35px; background: url("../img/svg-vink-bol-kleur.svg") no-repeat center center; background-size: auto 100%;} #intro .voordeelblok.kwaliteit{ padding: 21px 30px 21px 105px; line-height: 140%; font-size: 15px; font-weight: 600; } #intro .voordeelblok.kwaliteit:before{ background: #5BCBF5 url("../img/svg-star-wit.svg") no-repeat center center; background-size: 50%; box-shadow: none; border-radius: 10px; } #intro .voordeelblok span{ color: #5BCBF5; font-weight: 600; } #intro.animate h2 { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #intro.animate-active h2 { opacity: 1; transform: translateX(0px); transition-delay: 0.2s; } #intro.animate h3 { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #intro.animate-active h3 { opacity: 1; transform: translateX(0px); transition-delay: 0.2s; } #intro.animate .txt { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #intro.animate-active .txt { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #intro.animate .check { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #intro.animate-active .check { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #intro.animate .intro:after { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #intro.animate-active .intro:after { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #intro.animate .intro:before { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #intro.animate-active .intro:before { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #intro.animate .voordeelblok.kwaliteit { opacity: 0; transform: translateX(40px); transition-property: opacity, transform; } #intro.animate-active .voordeelblok.kwaliteit { opacity: 1; transform: translateX(0px); transition-delay: 0.6s; } /* arrowsplit ############################################################################################################################# */ .arrowsplit { height: 50px; background: url("../img/svg-pijl-beneden-donker.svg") no-repeat center center; background-size: auto 13px; } .arrowsplit.animate { opacity: 0; transition-property: opacity, transform; } .arrowsplit.animate-active { opacity: 1; transition-delay: 0.6s; } /* jouwvoordelen ############################################################################################################################# */ #jouwvoordelen { padding: 80px 0 60px 0; z-index: 1; } #jouwvoordelen .jouwvoordelen { background: #F6F8FB; padding: 100px 100px; border-radius: 60px; } #jouwvoordelen .links { width: 50%; padding-right: 60px; } #jouwvoordelen h2{ font-size: 52px; padding: 0 50px 0 0 ; font-weight: bold; } #jouwvoordelen .foto { height: 350px; border-radius: 25px; background: url("../img/visual-voordelen.jpg") no-repeat center center; background-size: cover; margin: 40px 0;} #jouwvoordelen .foto:after { position: absolute; top: 180px; lefT: -30px; width:90px; height: 90px; border-radius: 10px; background: #5BCBF5 url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 30%; } #jouwvoordelen .quote { background: #2B2873 url("../img/svg-quoteboven-wit.svg") no-repeat 30px 90%; background-size: auto 25px; color: #fff; padding: 40px 40px 40px 240px; border-radius: 25px; font-size: 16px; font-style: italic; font-weight: 500; } #jouwvoordelen .quote:before { position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 170px solid #5BCBF5; border-right: 170px solid transparent; border-top-left-radius: 25px;} #jouwvoordelen .quote:after{ position: absolute; top: 45px; left: 50px; width: 130px; height: 130px; border-radius: 100%; border: 8px solid #fff; background: url("../img/quote/omer-yildiz-macka-installatie.jpg") no-repeat center center; background-size: cover; } #jouwvoordelen .rechts { width: 50%; padding-left: 40px; } #jouwvoordelen .txt { font-size: 18px; padding-bottom: 50px; font-weight: bold; } #jouwvoordelen .txt2 { font-size: 18px; padding-bottom: 50px; } .voordelenlijst { padding-bottom: 40px; } .voordelenlijst li { padding: 5px 30px 5px 110px; line-height: 165%; font-size: 16px; margin-bottom: 23px; } .voordelenlijst li:before{ position: absolute; top: 0px; left: 20px; width: 55px; height: 55px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); background: #fff url("../img/svg-vink-kleur.svg") no-repeat center center; background-size: auto 15px; } .voordelenlijst2 { } .voordelenlijst2 li { padding: 5px 30px 5px 110px; line-height: 165%; font-size: 16px; margin-bottom: 23px; } .voordelenlijst2 li:before{ position: absolute; top: 0px; left: 20px; width: 55px; height: 55px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); background: #fff url("../img/svg-kruis-rood.svg") no-repeat center center; background-size: auto 19px; } #jouwvoordelen.animate h2 { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active h2 { opacity: 1; transform: translateX(0px); transition-delay: 0.2s; } #jouwvoordelen.animate .foto { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .foto { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #jouwvoordelen.animate .quote { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .quote { opacity: 1; transform: translateX(0px); transition-delay: 0.6s; } #jouwvoordelen.animate .txt { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .txt { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #jouwvoordelen.animate .voordelenlijst { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #jouwvoordelen.animate .voordelenlijst .voordeel1 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst .voordeel1 { opacity: 1; transform: translateX(0px); transition-delay: 0.5s; } #jouwvoordelen.animate .voordelenlijst .voordeel2 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst .voordeel2 { opacity: 1; transform: translateX(0px); transition-delay: 0.6s; } #jouwvoordelen.animate .voordelenlijst .voordeel3 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst .voordeel3 { opacity: 1; transform: translateX(0px); transition-delay: 0.7s; } #jouwvoordelen.animate .voordelenlijst .voordeel4 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst .voordeel4 { opacity: 1; transform: translateX(0px); transition-delay: 0.8s; } #jouwvoordelen.animate .txt2 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .txt2 { opacity: 1; transform: translateX(0px); transition-delay: 0.9s; } #jouwvoordelen.animate .voordelenlijst2 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst2 { opacity: 1; transform: translateX(0px); transition-delay: 1.0s; } #jouwvoordelen.animate .voordelenlijst2 .voordeel1 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst2 .voordeel1 { opacity: 1; transform: translateX(0px); transition-delay: 1.1s; } #jouwvoordelen.animate .voordelenlijst2 .voordeel2 { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #jouwvoordelen.animate-active .voordelenlijst2 .voordeel2 { opacity: 1; transform: translateX(0px); transition-delay: 1.2s; } /* calltoactionlaag ############################################################################################################################# */ #calltoactionlaag { padding: 50px 0 50px; } #calltoactionlaag .centered { width: 1040px; text-align: center; } #calltoactionlaag h2{ font-size: 52px; text-align: center; padding: 0 50px 5px; font-weight: bold; } #calltoactionlaag h3{ font-size: 28px; font-weight: 300; text-align: center; padding: 0 50px 35px; color: #2B2873; } #calltoactionlaag .btn.kleur{ margin: 0 20px 0 260px; } #calltoactionlaag.animate h2 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #calltoactionlaag.animate-active h2 { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #calltoactionlaag.animate h3 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #calltoactionlaag.animate-active h3 { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } #calltoactionlaag.animate .calltoactionlaagbtns { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #calltoactionlaag.animate-active .calltoactionlaagbtns { opacity: 1; transform: translateY(0px); transition-delay: 0.6s; } /* doelgroepen ############################################################################################################################# */ #doelgroepen { padding: 30px 0 30px; } #doelgroepen .doelgroepen { padding: 0 70px; } #doelgroepen h2{ font-size: 52px; text-align: center; padding: 0 50px 5px; font-weight: bold; } #doelgroepen h3{ font-size: 22px; font-weight: 300; text-align: center; padding: 0 50px 55px; color: #2B2873; } #doelgroepen .kolom { width: 33%; } #doelgroepen .kolom1 { padding-right: 25px; } #doelgroepen .kolom2 { padding-right: 25px; padding-left: 25px; } #doelgroepen .kolom3 { padding-left: 25px; } #doelgroepen.animate .kolom1 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #doelgroepen.animate-active .kolom1 { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #doelgroepen.animate .kolom2 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #doelgroepen.animate-active .kolom2 { opacity: 1; transform: translateY(0px); transition-delay: 0.5s; } #doelgroepen.animate .kolom3 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #doelgroepen.animate-active .kolom3 { opacity: 1; transform: translateY(0px); transition-delay: 0.8s; } /* referenties ############################################################################################################################# */ #referenties { padding: 50px 0 50px 0; z-index: 0; overflow: hidden; background: #fff; color: #000; } #referenties .reviews{ } #referenties h2{ text-align: center; color: #2B2873; font-size: 24px; font-weight: 300; font-style: italic; padding: 0 200px 40px; margin-bottom: 30px; } #referenties h2:before{ position: absolute; width: 40%; left: 30%; height: 3px; border-radius: 3px; bottom: 0; background: #E5E8F5; } #referenties h2:after{ position: absolute; width: 10%; left: 45%; height: 3px; border-radius: 3px; bottom: 0; background: #5BCBF5; } #referenties .centered{ width: 1150px; text-align: center; } #referenties .swiper-button-prev:after, #referenties .swiper-rtl .swiper-button-next:after { content: ''!important; } #referenties .swiper-button-prev:before, #referenties .swiper-rtl .swiper-button-next:before { content: ''!important; } #referenties .swiper-button-next:after, #referenties .swiper-rtl .swiper-button-prev:after { content: ''!important; } #referenties.animate h2 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #referenties.animate-active h2 { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #referenties.animate .referentiesbalk { opacity: 0; transform: translateY(20px); transition-property: opacity, transform; } #referenties.animate-active .referentiesbalk { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } /* diensten ############################################################################################################################# */ #diensten { padding: 30px 0 100px; } #diensten .diensten { padding: 0 70px; } #diensten h2{ font-size: 52px; text-align: center; padding: 0 50px 5px; font-weight: bold; } #diensten h3{ font-size: 22px; font-weight: 300; text-align: center; padding: 0 50px 55px; color: #2B2873; } #diensten .kolom { width: 33%; } #diensten .kolom1 { padding-right: 25px; } #diensten .kolom2 { padding-right: 25px; padding-left: 25px; } #diensten .kolom3 { padding-left: 25px; } #diensten .pakketicoon { position: absolute; top: -30px; right: 50px; width: 75px; height: 75px; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); border-radius: 15px; } #diensten .pakketicoon.ontzorgen { background: #fff url("../img/svg-pakket-ontzorgen.svg") no-repeat center center; background-size: auto 50%;} #diensten .pakketicoon.samenwerken { background: #fff url("../img/svg-pakket-samenwerken.svg") no-repeat center center; background-size: auto 50%;} #diensten .pakketicoon.selectie { background: #fff url("../img/svg-pakket-selectie.svg") no-repeat center center; background-size: auto 50%;} #diensten.animate h2 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #diensten.animate-active h2 { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #diensten.animate h3 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #diensten.animate-active h3 { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } #diensten.animate .kolom1 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #diensten.animate-active .kolom1 { opacity: 1; transform: translateY(0px); transition-delay: 0.8s; } #diensten.animate .kolom2 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #diensten.animate-active .kolom2 { opacity: 1; transform: translateY(0px); transition-delay: 1.0s; } #diensten.animate .kolom3 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #diensten.animate-active .kolom3 { opacity: 1; transform: translateY(0px); transition-delay: 1.2s; } /* softwarebar ############################################################################################################################# */ #softwarebar { padding: 30px 0 30px; } #softwarebar .softwarebar h2{ text-align: center; font-size: 19px; font-weight: 300; color: #2B2873; font-style: italic; } #softwarebar .softwarebar .software{ height: 60px; } #softwarebar .softwarebar .software.exact{ width: 155px; margin-right: 50px; margin-left: 370px; background: url( "../img/exact.svg") no-repeat right center; background-size: auto 32px ; } #softwarebar .softwarebar .software.moneybird{ width: 250px; margin-right: 50px; background: url( "../img/moneybird.svg") no-repeat right center; background-size: auto 40px ; } #softwarebar .softwarebar .software.nmbrs{ width: 165px; margin-right: 50px; background: url( "../img/nmbrs.svg") no-repeat right center; background-size: auto 60px; } #softwarebar .softwarebar .software.finify{ width: 140px; background: url( "../img/finify.svg") no-repeat right center; background-size: auto 50px; } #softwarebar.animate h2 { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #softwarebar.animate-active h2 { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #softwarebar.animate .exact { opacity: 0; transform: translateY(10px); transition-property: opacity, transform; } #softwarebar.animate-active .exact { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } #softwarebar.animate .moneybird { opacity: 0; transform: translateY(10px); transition-property: opacity, transform; } #softwarebar.animate-active .moneybird { opacity: 1; transform: translateY(0px); transition-delay: 0.6s; } #softwarebar.animate .nmbrs { opacity: 0; transform: translateY(10px); transition-property: opacity, transform; } #softwarebar.animate-active .nmbrs { opacity: 1; transform: translateY(0px); transition-delay: 0.8s; } #softwarebar.animate .finify { opacity: 0; transform: translateY(10px); transition-property: opacity, transform; } #softwarebar.animate-active .finify { opacity: 1; transform: translateY(0px); transition-delay: 1.0s; } /* kennismakingsgesprek ############################################################################################################################# */ #kennismakingsgesprek { padding: 70px 0 100px; } #kennismakingsgesprek .kennismakingsgesprek{ padding: 450px 0 0 650px; } #kennismakingsgesprek .kennismakingsgesprek:before{ position: absolute; top: 0; left: 50px; right: 50px; height: 400px; border-radius: 60px; background: url("../img/visual-kennismaken.jpg") no-repeat center center; background-size: cover;} #kennismakingsgesprek .kennismakingsgesprek:before{ transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; } #kennismakingsgesprek .blok{ position: absolute; top: 100px; left: 150px; width: 420px; } #kennismakingsgesprek .contactopties .txt{ width: 420px; padding-right: 80px; border-right: 3px solid #E6E6EF; margin-right: 80px; } #kennismakingsgesprek .contactopties .tel { font-weight: 500; color: #5BCBF5; width: 290px; height: 55px; padding-left: 55px; text-align: left; margin-top: 20px; line-height: normal; } #kennismakingsgesprek .contactopties .tel span{ font-size: 25px; padding-top: 0px; color: #2B2873; } #kennismakingsgesprek .contactopties .tel:before { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-telefoon-donker.svg") no-repeat top left; background-size: 100% auto; } #kennismakingsgesprek .contactopties .tel:hover { text-decoration: none; } #kennismakingsgesprek .contactopties .email{ margin-top: 15px; margin-left: 15px; width: 70px; height: 70px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); background: #fff url("../img/svg-email-donker.svg") no-repeat center center; background-size: auto 18px; } #kennismakingsgesprek .contactopties .email span{ display: none; } #kennismakingsgesprek .contactopties .email:hover { background: #5BCBF5 url("../img/svg-email-wit.svg") no-repeat center center; background-size: auto 20%; } #kennismakingsgesprek .voordeelblok { position: absolute; top: 250px; right: 0px; width: 400px;} #kennismakingsgesprek.animate .kennismakingsgesprek:before { opacity: 0; transform: translateY(20px); transition-property: opacity, transform; } #kennismakingsgesprek.animate-active .kennismakingsgesprek:before { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #kennismakingsgesprek.animate .blok { opacity: 0; transform: translateX(20px); transition-property: opacity, transform; } #kennismakingsgesprek.animate-active .blok { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; transition-property: opacity, transform; } #kennismakingsgesprek.animate .voordeelblok { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #kennismakingsgesprek.animate-active .voordeelblok { opacity: 1; transform: translateX(0px); transition-delay: 0.6s; } #kennismakingsgesprek.animate .txt { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #kennismakingsgesprek.animate-active .txt { opacity: 1; transform: translateY(0px); transition-delay: 0.8s; } #kennismakingsgesprek.animate .tel { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #kennismakingsgesprek.animate-active .tel { opacity: 1; transform: translateY(0px); transition-delay: 1.0s; } #kennismakingsgesprek.animate .email { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #kennismakingsgesprek.animate-active .email { opacity: 1; transform: translateY(0px); transition-delay: 1.2s; } #kennismakingsgesprek.veelgestelde-vragen, #kennismakingsgesprek.veelgestelde-vragen :before, #kennismakingsgesprek.veelgestelde-vragen :after, #kennismakingsgesprek.veelgestelde-vragen div, #kennismakingsgesprek.veelgestelde-vragen span, #kennismakingsgesprek.veelgestelde-vragen a { opacity: 1!important; transform: translateY(0px)!important; transform: translateX(0px)!important; transition-delay: 0s!important; } /* FAQ ############################################################################################################################# */ #faq { padding: 80px 0 80px 0; z-index: 1; } #faq .bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #faq .bg:before { position: absolute; bottom: 0px; right: 0px; width: 100%; height: 200px; } #faq .faq h2{ font-size: 52px; text-align: center; padding: 0 50px 5px; font-weight: bold; } #faq .faq h3{ font-size: 22px; font-weight: 300; text-align: center; padding: 0 50px 55px; color: #2B2873; } #faq .faq { background: #F6F8FB; padding: 100px 200px; border-radius: 60px; } #faq .faqitems{ padding: 0 0 30px; 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: 500; color: #2B2873; } #faq .faqitems .faqitem .nummer{ position: absolute; top: 15px; left: 30px; font-weight: bold; color: #5BCBF5; width: 10px; text-align: right; margin-right: 20px; } #faq .faqitems .faqitem .vraag{ padding: 0px 35px 0 10px; } #faq .faqitems .faqitem .sluiten{ position: absolute; overflow: hidden; width: 0px; opacity: 0; top: 15px; right: 20px; height: 25px; line-height: 25px; color: #fff; background: #2B2873; 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: 5px; right: 20px; height: 55px; width: 25px; background: url("../img/svg-pijl-beneden-donker.svg") no-repeat center center; background-size: 50% auto; } #faq .faqitems .faqitem:hover:after{ background: url("../img/svg-pijl-beneden-kleur.svg") no-repeat center center; background-size: 50% auto; } #faq .faqitems .faqitem:hover .vraag{ color: #5BCBF5; } #faq .faqitems .faqitem:after{ transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s; } #faq .meerfaq { margin-left: 400px; } #faq .meerfaq:hover { } #faq .faqitems .faqitem.active .vraag { font-weight: bold; color: #5BCBF5; } #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:has(+ #uitgelicht) { padding-bottom: 0; } #faq:has(+ #uitgelicht) .faq { border-bottom-right-radius: 0!important; border-bottom-left-radius: 0!important; padding: 100px 200px 30px; } #faq.animate h2 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active h2 { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #faq.animate h3 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active h3 { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } #faq.animate .faqitem1 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active .faqitem1 { opacity: 1; transform: translateY(0px); transition-delay: 0.6s; } #faq.animate .faqitem2 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active .faqitem2 { opacity: 1; transform: translateY(0px); transition-delay: 0.8s; } #faq.animate .faqitem3 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active .faqitem3 { opacity: 1; transform: translateY(0px); transition-delay: 1.0s; } #faq.animate .faqitem4 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active .faqitem4 { opacity: 1; transform: translateY(0px); transition-delay: 1.2s; } #faq.animate .faqitem5 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #faq.animate-active .faqitem5 { opacity: 1; transform: translateY(0px); transition-delay: 1.4s; } /* uitgelicht ############################################################################################################################# */ #uitgelicht { padding: 0px 0 20px; text-align: center; } #uitgelicht .uitgelicht { background: #F6F8FB; padding: 0 200px 100px; border-radius: 60px; border-top-left-radius: 0!important; border-top-right-radius: 0!important; } #uitgelicht h2 {font-weight: bold; color: #fff; font-size: 52px; padding-bottom: 10px; } #uitgelicht h3 { font-size: 25px; color: #fff; padding: 0 180px 0px; } #uitgelicht .uitgelichtblokken { text-align: left; padding: 0 0px; } #uitgelicht .uitgelichtblok { border-radius: 15px; width: 32%; color: #01134D; background: #fff; box-shadow: 0 12px 55px rgba(0,0,0,0.1); } #uitgelicht .uitgelichtblok2 { margin: 0 2%; } #uitgelicht .uitgelichtblok .uitgelichtblokimg{ height: 230px; border-radius: 25px 25px 0 0; } #uitgelicht .uitgelichtblok .uitgelichtblokimg img{ height: 100%; width: 100%; object-fit: cover; object-position: center; border-radius: 25px 25px 0 0; } #uitgelicht .uitgelichtblok .uitgelichtbloktitel{ font-weight: bold; font-size: 20px; padding: 0px 20px 10px 0; line-height: 140%; } #uitgelicht .uitgelichtblok .uitgelichtbloktxt{ font-size: 13px; line-height: 200%; font-weight: 500; } #uitgelicht .uitgelichtblok .uitgelichtblokinhoud{ padding: 40px 50px 40px; } #uitgelicht .uitgelichtblok .uitgelichtbloklink{ margin-top: 20px; color: #01134D; font-weight: bold; clear: both; padding: 0 5px 0 25px; } #uitgelicht .uitgelichtblok .uitgelichtbloklink: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%; } #uitgelicht .uitgelichtblok .uitgelichtblokbol{ position: absolute; top: -30px; right: 30px; width: 60px; height: 60px; border-radius: 100%; background: #5BCBF5; } #uitgelicht .uitgelichtblok .uitgelichtblokbol:before{ position: absolute; bottom: 3px; left: 3px; right: 3px; top: 3px; border: 2px solid #fff; opacity: 0.5; border-radius: 100%; } #uitgelicht .uitgelichtblok .uitgelichtblokbol:after{ position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; background: url("../img/svg-charts-wit.svg") no-repeat center center; background-size: auto 20px; } .uitgelichtblok:hover .uitgelichtblokbol { animation: bounce 0.5s ease-in-out; } @keyframes bounce { 0% { transform: translateY(0); } 30% { transform: translateY(-10px); } /* Gaat omhoog */ 60% { transform: translateY(5px); } /* Veert iets terug */ 100% { transform: translateY(0); } /* Terug naar originele positie */ } /* Specifieke CSS voor het eerste blok om geen marge links te hebben */ #uitgelicht .uitgelichtblok:first-child { margin-left: 0; color: #fff; background: #2B2873; } #uitgelicht .uitgelichtblok:first-child .uitgelichtbloklink{ color: #fff; } #uitgelicht .meernieuws { margin: 50px 0 0 510px; } #uitgelicht .meernieuws:hover { } #uitgelicht.animate .uitgelichtblok { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #uitgelicht.animate-active .uitgelichtblok { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #uitgelicht.animate .uitgelichtblok2 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #uitgelicht.animate-active .uitgelichtblok2 { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } #uitgelicht.animate .uitgelichtblok3 { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #uitgelicht.animate-active .uitgelichtblok3 { opacity: 1; transform: translateY(0px); transition-delay: 0.6s; } #uitgelicht.animate .meernieuws { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #uitgelicht.animate-active .meernieuws { opacity: 1; transform: translateY(0px); transition-delay: 1.0s; } #uitgelicht .uitgelichtblok:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); } #uitgelicht .uitgelichtblok:hover .uitgelichtbloklink{ text-decoration: underline; } /* actueel ############################################################################################################################# */ #actueel { padding: 0; } #actueel .actueel{ padding: 80px 0 40px; border-top: 2px solid #E5E5E5; } #actueel .actueel .txt{ line-height: 160%; } #actueel .actueel .links{ width: 50%; padding-right: 30px; } #actueel .actueel .artikelen{ margin-top: 15px; } #actueel .actueel .artikelen .nieuwsbericht{ background: #fff; color: #2B2873; width: 48%; border-radius: 10px; box-shadow: 0 12px 50px rgba(0,0,0,0.13); } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtimg{ height: 190px; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtimg img{ height: 100%; object-fit: cover; border-radius: 10px 10px 0 0 ; } #actueel .actueel .artikelen .nieuwsbericht .ribbon{ position: absolute; top: 0; right: 0; width: 100px; height: 90px; overflow: hidden; border-radius: 0 10px 0 0; } #actueel .actueel .artikelen .nieuwsbericht .ribbon span{ position: absolute; top: -30px; font-size: 12px; text-transform: uppercase; right: -64px; width: 150px; text-align: center; padding: 50px 0 0 3px; transform: rotate(45deg); color: #fff; font-weight: bold; background: #79A108; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichttitel{ padding: 30px 35px 0; font-weight: bold; font-size: 24px; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtsubtitel{ padding: 0px 35px 0; font-style: italic; font-size: 13px; line-height: 170%; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichttxt{ padding: 10px 35px 0; font-weight: 600; font-size: 13px; line-height: 160%; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtoptie{ margin: 15px 35px 35px; color: #01134D; font-weight: bold; clear: both; padding: 0 5px 0 25px; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtoptie: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%; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtbol{ position: absolute; top: 150px; right: 30px; width: 60px; height: 60px; border-radius: 100%; background: #5BCBF5; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtbol:before{ position: absolute; bottom: 3px; left: 3px; right: 3px; top: 3px; border: 2px solid #fff; opacity: 0.5; border-radius: 100%; } #actueel .actueel .artikelen .nieuwsbericht .nieuwsberichtbol:after{ position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; background: url("../img/svg-charts-wit.svg") no-repeat center center; background-size: auto 20px; } #actueel .actueel .artikelen .nieuwsbericht:hover .nieuwsberichtbol { animation: bounce2 0.5s ease-in-out; } @keyframes bounce2 { 0% { transform: translateY(0); } 30% { transform: translateY(-10px); } /* Gaat omhoog */ 60% { transform: translateY(5px); } /* Veert iets terug */ 100% { transform: translateY(0); } /* Terug naar originele positie */ } #actueel .actueel .artikelen .nieuwsbericht:hover .nieuwsberichtoptie{ text-decoration: underline; } /* adviesgesprek ############################################################################################################################# */ #adviesgesprek { padding: 50px 0 70px; } #adviesgesprek .adviesgesprek{ padding: 90px 57% 90px 90px ; background: #2B2873; color: #fff; border-radius: 30px; } #adviesgesprek .adviesgesprek:before{ position: absolute; top: 0; right: 0; bottom: 0; width: 50%; border-radius: 0 30px 30px 0; background: url("../img/visual-advies.jpg") no-repeat center center; background-size: cover; } #adviesgesprek .adviesgesprek h2{ color: #fff; font-size: 45px; font-weight: bold; padding-right: 50px; } #adviesgesprek .adviesgesprek .btn{ margin-top: 30px; } #adviesgesprek .adviesgesprek .btn.tel{ margin-left: 20px; } #adviesgesprek.animate .adviesgesprek { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #adviesgesprek.animate-active .adviesgesprek { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } #adviesgesprek.animate .btn.kleur:hover{ background: #fff!important; color:#2B2873!important; } #adviesgesprek.animate h2 { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #adviesgesprek.animate-active h2 { opacity: 1; transform: translateX(0px); transition-delay: 0.4s; } #adviesgesprek.animate .txt { opacity: 0; transform: translateX(-20px); transition-property: opacity, transform; } #adviesgesprek.animate-active .txt { opacity: 1; transform: translateX(0px); transition-delay: 0.6s; } #adviesgesprek.animate .btn.kleur { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #adviesgesprek.animate-active .btn.kleur { opacity: 1; transform: translateY(0px); transition-delay: 0.8s; } #adviesgesprek.animate .btn.wit { opacity: 0; transform: translateY(-10px); transition-property: opacity, transform; } #adviesgesprek.animate-active .btn.wit { opacity: 1; transform: translateY(0px); transition-delay: 1.0s; } /* footerlinks ############################################################################################################################# */ #footerlinks { padding: 20px 0 0; } #footerlinks .footerlinks{ padding: 0 0 50px 0; border-bottom: 2px solid #EEEEF4; } #footerlinks .footerkolom{ width: 280px; padding-top: 50px; } #footerlinks .footerkolom:first-child{ width: 340px; } #footerlinks h3{ font-size: 24px; font-weight: bold; } #footerlinks .footerkolom a{ padding: 7px 0; color: #2B2873; font-size: 14px; } #footerlinks .footerkolom a:hover{ color: #5BCBF5; } #footerlinks .contactgegevens{ width: 650px; padding: 55px 50px 55px 70px; border-radius: 15px; background: #fff; box-shadow: 0 13px 40px rgba(0,0,0,0.1); line-height: 170%; } #footerlinks .contactgegevens:before { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 100px solid #5BCBF5; border-left: 100px solid transparent; border-top-right-radius: 15px;} #footerlinks .contactgegevens h3 { padding-bottom: 10px; } #footerlinks .contactgegevens .tel { font-weight: 500; color: #5BCBF5; width: 290px; height: 55px; padding-left: 55px; text-align: left; margin-top: 20px; line-height: normal; } #footerlinks .contactgegevens .tel span{ font-size: 25px; padding-top: 0px; color: #2B2873; } #footerlinks .contactgegevens .tel:before { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-telefoon-donker.svg") no-repeat top left; background-size: 100% auto; } #footerlinks .contactgegevens .tel:hover { text-decoration: none; } #footerlinks .contactgegevens .btn { font-size: 14px; margin-top: 33px; clear: both; } #footerlinks .contactgegevens .email { font-size: 15px; font-weight: bold; color: #2B2873; padding: 10px 10px 10px 65px; margin-top: 33px; margin-left: 35px; text-transform: uppercase; } #footerlinks .contactgegevens .email:before { position: absolute; top: 0px; left: 0; width: 46px; height: 46px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); background: #fff url("../img/svg-email-donker.svg") no-repeat center center; background-size: auto 12px; } #footerlinks .contactgegevens .email:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #footerlinks .contactgegevens .email:hover:before { background: #5BCBF5 url("../img/svg-email-wit.svg") no-repeat center center; background-size: auto 20%; } #footerlinks .contactgegevens .email:hover { color: #5BCBF5; text-decoration: none; } #footerlinks.animate { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #footerlinks.animate-active { opacity: 1; transform: translateY(0px); transition-delay: 0.2s; } /* AFSLUITING ############################################################################################################################# */ #afsluiting { padding: 70px 0 100px; font-size: 13px; z-index: 0; font-weight: 500; color: #2B2873; line-height: 160%; } #afsluiting .bg { position: absolute; bottom: 0; left: 0; right: 0; height: 45px; } #afsluiting .afsluiting { padding-left: 110px; } #afsluiting .afsluiting span{ font-size: 12px; opacity: 0.5; line-height: 145%; } #afsluiting .afsluiting span.info{ padding-top: 3px; } #afsluiting .afsluiting:before { position: absolute; top: 3px; left: 0; width: 80px; height: 50px; background: url("../img/logo-prosabt-finance-symbool.svg") no-repeat left top; background-size: auto 100%; } #afsluiting .softwarebalk { position: absolute; top: -5px; right: 0; } #afsluiting .softwarebalk .software{ height: 45px; } #afsluiting .softwarebalk .software.exact{ width: 105px; margin-right: 50px; background: url( "../img/exact.svg") no-repeat right center; background-size: auto 22px ; } #afsluiting .softwarebalk .software.moneybird{ width: 170px; margin-right: 50px; background: url( "../img/moneybird.svg") no-repeat right center; background-size: auto 27px ; } #afsluiting .softwarebalk .software.nmbrs{ width: 110px; margin-right: 50px; background: url( "../img/nmbrs.svg") no-repeat right center; background-size: auto 40px; } #afsluiting .softwarebalk .software.finify{ width: 90px; margin-right: 10px; background: url( "../img/finify.svg") no-repeat right center; background-size: auto 32px; } #afsluiting a{ color: #2B2873; } #afsluiting a:hover{ color: #5BCBF5; } #afsluiting .afsluiting span:hover{ opacity: 1; } #afsluiting.animate { opacity: 0; transform: translateY(-20px); transition-property: opacity, transform; } #afsluiting.animate-active { opacity: 1; transform: translateY(0px); transition-delay: 0.4s; } /* 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:#2B2873; opacity: 0; display: none; } #contactboloverlay.active{ display: block; opacity: 0.2!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: #2B2873 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: #5BCBF5; 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 #contactbolbg{ background-color: #2B2873; } #contactbol:hover #contactbolicoon{ background-color: #5BCBF5; } #contactbolopties { z-index: 0; position: absolute; bottom: 25px; opacity: 0; right: 225px; width: 320px; height: 380px; 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: 20px; font-weight: bold; line-height: 130%; padding: 0 20px 15px 75px; } #contactbolopties .contactboloptiestitel:before{ position: absolute; top: 0; left: 0; width: 55px; height: 55px; background: #5BCBF5 url("../img/svg-chat-wit.svg") no-repeat 16px 16px; background-size: auto 40%; border-radius: 100%; } #contactbolopties .contactbollink{ margin-top: 15px; color: #01134D; 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: #01134D; 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-kleur.svg") no-repeat center center; background-size: auto 100%; } #contactbolopties .contactboloptie.vraag:before{ background: url("../img/svg-vraag-kleur.svg") no-repeat center center; background-size: auto 100%; } #contactbolopties .contactboloptie.telefoon:before{ background: url("../img/svg-telefoon-kleur.svg") no-repeat center center; background-size: auto 100%; } #contactbolopties .contactboloptie.whatsapp:before{ background: url("../img/svg-whatsapp-kleur.svg") no-repeat center center; background-size: auto 100%; } #contactbolopties .contactboloptie span{ font-weight: bold; color: #00A7E1; } #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: #01134D; text-decoration: none; } #contactbolopties .contactbollink:hover{ color: #5BCBF5; text-decoration: none; } #contactbolopties .contactbollink:hover:before{ background: url("../img/svg-pijl-rechts-donker.svg") no-repeat top left; background-size: auto 100%; } /* meldingsbar ############################################################################################################################# */ #meldingsbar { position: fixed; bottom: 0px; left: 0px; width: 100%; box-sizing: border-box; padding: 8px 20px; background: #00A7E1; text-align: center; text-transform: uppercase; font-size: 10px; line-height: 130%; color: #fff; font-weight: bold; z-index: 10000; }