.headerCta header{margin-bottom:208px} .home .headerErpTool{margin-bottom:0} .home .headerConsult{margin-bottom:0} .home .articles{background:0 0;padding:56px 0} .home .articles h2{font-size:24px;line-height:1.5;margin-bottom:16px} .home .articles h3{font-size:16px;line-height:1.5;color:#fff} .home .articles article{display:flex;justify-content:space-between} .home .articles article>div{width:calc((100% / 3) - 32px)} .home .articles .div{width:32px;position:relative;display:none} .home .articles .div::before{content:"";position:absolute;top:0;left:50%;height:100%;width:1px;background:#f0f0f0} .home .articles .top{height:154px;display:flex;flex-direction:column-reverse;padding:12px 16px;margin-bottom:24px;background-color:#fff;background-size:cover;background-position:center;position:relative;transition:background-color .2s;-moz-transition:background-color .2s;-ms-transition:background-color .2s;-webkit-transition:background-color .2s;-o-transition:background-color .2s} .home .articles .top~a{margin-top:18px;color:#00829b;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .home .articles .top~a::before{content:"\f054";font-family:"Font Awesome 5 Pro";margin-right:3px;font-size:10px;top:-1px;position:relative} .home .articles .top h3{position:relative;z-index:2;text-shadow:0 0 10px rgba(0,0,0,.3)} .home .articles .top .gradient{position:absolute;bottom:0;left:0;width:100%;height:75%;z-index:1;opacity:.9} .home .articles .top~a:nth-of-type(5){color:#00829b;display:inline-block;font-weight:700;text-transform:uppercase} .home .articles .top~a:nth-of-type(5)::before{display:none} .home .articles.two article>div{width:calc(50% - 32px)} .home .articles.two article>.div{width:32px} .home .articles .label{position:absolute;left:16px;top:0;color:#fff;font-weight:700;padding:1px 8px 0 8px;line-height:23px;font-size:11px;text-transform:uppercase;z-index:2;letter-spacing:.02em} .home .articles .label .fa{font-weight:400;margin-right:4px;font-size:14px;position:relative;top:1px} .home .hh{padding:80px 0;display:none} .home .hh article{display:flex;margin:0 0 0 calc((100vw - 1176px)/ 2);transition:width .1s} .home .hh .half{width:540px;display:flex;background:#fff;transition:width .1s} .home .hh .half+.half{margin-left:48px} .home .hh .half .content{display:flex} .home .hh .half .text{width:564px;padding:184px 56px 32px 56px;background-size:100% auto;background-repeat:no-repeat;position:relative} .home .hh .half .text::before{content:"";top:0;left:0;position:absolute;width:100%;height:200px;z-index:0} .home .hh .half .text::after{content:"";top:200px;left:0;position:absolute;width:100%;height:calc(100% - 200px);z-index:0} .home .hh .half .text>*{position:relative;z-index:1} .home .hh .half h2{font-size:24px;line-height:1.3;margin:0 0 4px 0;color:#fff} .home .hh .half p{font-size:16px;line-height:1.5;margin:0;color:rgba(255,255,255,.8)} .home .hh .half .list{width:0;overflow:hidden;transition:width .1s} .home .hh .half .list ul{width:588px} .home .hh.active article{width:1774px} .home .hh .half.active{width:1128px} .home .hh .half.active .list{width:588px} .home .hh .half.fases .text{background-color:#2f475c;background-image:url(https://cdn.softwaresystemen.nl/nodes/home-fases.webp)} .nowebp .home .hh .half.fases .text{background-image:url(https://cdn.softwaresystemen.nl/nodes/home-fases.jpg)} .home .hh .half.fases .text::before{background:-moz-linear-gradient(top,rgba(47,71,92,0) 0,rgba(47,71,92,1) 100%);background:-webkit-linear-gradient(top,rgba(47,71,92,0) 0,rgba(47,71,92,1) 100%);background:linear-gradient(to bottom,rgba(47,71,92,0) 0,rgba(47,71,92,1) 100%)} .home .hh .half.fases .text::after{background:#2f475c} .home .hh .half.fases ul{display:flex;float:none;flex-wrap:wrap;padding:24px 0} .home .hh .half.fases li{padding:0;height:auto;line-height:2.9;width:25%;font-weight:700} .home .hh .half.fases li a{color:#188593;font-weight:700;display:inline-block;height:auto;position:relative} .home .hh .half.fases ul{padding:0;counter-reset:fases;display:flex;flex-direction:column;height:242px} .home .hh .half.fases li{margin-bottom:15px;white-space:nowrap;counter-increment:fases;position:relative} .home .hh .half.fases li a::before{content:counter(fases);position:absolute;top:-3px;left:-6px;background:#28939e;color:#fff;line-height:1;border-radius:100%;width:20px;height:20px;padding-top:5px;text-align:center;font-size:11px;z-index:2} .home .hh .half.fases svg{display:inline-block!important;width:40px;height:50px;margin:-7px 12px 0 0;position:relative;z-index:1} .home .hh .half.fases svg .stw{fill:#00bec7} .home .hh .half.sector .text{background-color:#323232;background-image:url(https://cdn.softwaresystemen.nl/nodes/home-sector.webp)} .nowebp .home .hh .half.sector .text{background-image:url(https://cdn.softwaresystemen.nl/nodes/home-sector.jpg)} .home .hh .half.sector .text::before{background:-moz-linear-gradient(top,rgba(50,50,50,0) 0,rgba(50,50,50,1) 100%);background:-webkit-linear-gradient(top,rgba(50,50,50,0) 0,rgba(50,50,50,1) 100%);background:linear-gradient(to bottom,rgba(50,50,50,0) 0,rgba(50,50,50,1) 100%)} .home .hh .half.sector .text::after{background:#323232} .home .hh .half.sector ul{display:flex;float:none;flex-wrap:wrap;padding:24px 0} .home .hh .half.sector li{margin-bottom:16px} .home .hh .half.sector .fal,.home .hh .half.sector .far,.home .hh .half.sector .fas{color:#00bec7;font-size:22px;display:inline-block;width:40px;height:40px;position:relative;top:3px;border:1px solid #00bec7;border-radius:100%;text-align:center;padding-top:9px;margin-right:5px} .home .hh .half.sector .fa-truck{padding-left:2px} .home .hh .half.sector .fa-clipboard-list{padding-top:7px;padding-left:1px;font-size:23px} .home .hh .half.sector .fa-traffic-cone{padding-left:1px;padding-top:7px} .home .hh .half.sector .fa-forklift{font-size:20px;padding-left:2px} .home .hh .half.sector .fa-euro-sign{padding-right:3px} .home .hh .half.sector .fa-laptop-code{font-size:20px} .home .hh .half.sector .fa-graduation-cap{padding-top:8px} .home .hh .half.sector .fa-briefcase{padding-top:8px} .home .hh .half.sector .fa-university{padding-top:6px;font-size:23px} .home .hh .half.sector .fa-key{padding-left:2px;padding-top:7px} .home .compare{padding:120px 0;position:relative;background:#fff;overflow:hidden} .home .compare::before{content:"";position:absolute;top:0;left:-20%;width:75%;height:100%;background:#32475a;transform:skew(-15deg);z-index:2;opacity:.96} .home .compare .text{width:50%;position:relative;z-index:3;max-width:560px} .home .compare h2{color:#fff} .home .compare h2 span{font-family:BebasNeue,Arial,sans-serf;font-size:96px;line-height:1;display:block;font-weight:400;text-indent:-.01em} .home .compare p{margin:0 0 20px 0;color:#c1d1de} .home .compare .but{font-size:13px;padding:12px 16px} .home .compare .logos{position:absolute;top:0;left:-68px;width:calc(100% + 136px);height:100%;z-index:1;display:flex;flex-wrap:wrap;align-content:space-around} .home .compare .logos .row{display:flex;justify-content:space-between;width:100%} .home .compare .logos .row div{width:136px;height:90px;background-color:#fff;background-size:contain;background-position:center;background-repeat:no-repeat;transform:scale(.6)} .home .compare .logos .row .lazyImage.loaded{animation:fadeIn 1s both;-moz-animation:fadeIn 1s both;-ms-animation:fadeIn 1s both;-o-animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both} .home .about{padding:104px 0 88px 0;margin-bottom:-32px;position:relative;overflow:hidden} .home .about article{display:flex;align-items:center} .home .about .text{width:50%;padding:0 16px 16px 0} .home .about h2{font-family:BebasNeue,Arial,sans-serf;font-size:64px;line-height:1;margin-bottom:2px} .home .about h3{font-size:24px;line-height:1.25;letter-spacing:-.05em;letter-spacing:-.015em;max-width:380px} .home .about p{font-size:16px;line-height:1.6;margin:8px 0 10px 0;color:#59738a} .home .about a{color:#00829b;font-weight:700;font-size:16px} .home .about a::before{content:"\f054";font-family:"Font Awesome 5 Pro";margin-right:3px;font-size:11px} .home .about .svgWrap{position:absolute;top:-25%;right:0;z-index:-1;height:150%;width:50%;background-image:url(https://cdn.softwaresystemen.nl/nodes/europe.svg);background-repeat:no-repeat;background-size:cover;background-position:left center} .newC2aHeader{padding:72px 0;color:#fff;background-image:url(https://cdn.softwaresystemen.nl/nodes/home-gratis-erp-wijzer.webp);background-size:cover;position:relative;background-repeat:no-repeat;background-position:center top} .nowebp .newC2aHeader{background-image:url(https://cdn.softwaresystemen.nl/nodes/home-gratis-erp-wijzer.jpg)} .newC2aHeader::before{content:"";width:60%;height:100%;background:rgba(22,163,177,.9);position:absolute;top:0;left:-10%;transform:skew(-15deg)} .newC2aHeader article{position:relative} .newC2aHeader .text{width:47%} .newC2aHeader h2{font-size:42px;line-height:50px;color:inherit;letter-spacing:-.01em} .newC2aHeader ul{margin:8px 0 16px 0} .newC2aHeader li{padding-left:17px;position:relative;list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)} .newC2aHeader li::before{content:"\f00c";font-weight:700;font-family:"Font Awesome 5 Pro";color:#6aff8d;position:absolute;top:0;left:0} .newC2aHeader li+li{margin-top:7px} header.home{position:relative} .wijzer{height:480px;background-color:#788490;background-image:url(https://cdn.softwaresystemen.nl/nodes/new-subheader.webp);background-size:cover;background-position:left;background-repeat:no-repeat} .nowebp .wijzer{background-image:url(https://cdn.softwaresystemen.nl/nodes/new-subheader.jpg)} .wijzer h2{font-size:32px;line-height:44px;font-weight:400;color:#fff} .wijzer .text{font-size:13px;line-height:20px;width:540px;margin-left:50%;margin-bottom:8px;color:#fff} .wijzer .but{margin-top:10px;float:left} .wijzer p{margin:9px 0 4px 0} .wijzer ul{margin-bottom:8px} .wijzer ul li{padding-left:16px;position:relative} .wijzer ul li::before{content:"\2022";position:absolute;left:0;font-weight:700;top:2px} .wijzer .counter{margin-top:10px;color:#fff} .wijzer .counter span{box-shadow:0;color:#748a9a} .counter{color:#748a9a;font-weight:700;float:left;margin:16px 0 0 16px;line-height:64px;font-size:13px} .counter span{background:#fff;margin-right:3px;padding:5px;border-radius:3px;box-shadow:0 0 5px #d9dee1} .homeC2A{background-image:url(https://cdn.softwaresystemen.nl/nodes/home-c2a-hero.webp);background-repeat:no-repeat;background-position:center;padding:96px 0;position:relative} .nowebp .homeC2A{background-image:url(https://cdn.softwaresystemen.nl/nodes/home-c2a-hero.jpg)} .homeC2A::before{content:"";position:absolute;top:0;left:0;height:40px;width:100%;background:linear-gradient(to bottom,rgba(236,240,240,1) 0,rgba(255,255,255,0) 100%);background:-moz-linear-gradient(top,rgba(236,240,240,1) 0,rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(top,rgba(236,240,240,1) 0,rgba(255,255,255,0) 100%)} .homeC2A h1{font-size:32px;line-height:40px} .homeC2A p{margin:16px 0 24px 0;max-width:50%} .homeC2A ul{margin:16px 0 24px 0} .homeC2A ul li{position:relative} .homeC2A ul li::before{content:"\f00c";font-weight:700;font-family:"Font Awesome 5 Pro";color:#3cb9c4;font-size:20px;position:relative;top:2px;margin-right:4px} .homeC2A ul li+li{margin-top:12px} @media screen and (max-width:1434px){ .newC2aHeader{background-size:auto 480px} } @media screen and (max-width:1300px){ .home .compare .logos .row div:nth-child(11),.home .compare .logos .row div:nth-child(12){display:none} .home .about{padding:64px 0 48px 0;margin-bottom:0} .home .about .svgWrap{width:60%} } @media screen and (max-width:1200px){ .newC2aHeader h2{font-size:32px;line-height:42px;max-width:410px} .newC2aHeader::before{width:65%} .newC2aHeader .text{width:53%} .home .articles{padding:24px 0} .home .fases .consultant{left:-56px} .home .compare .logos .row div:nth-child(10),.home .compare .logos .row div:nth-child(9){display:none} .wijzer{position:relative} .wijzer::after{position:absolute;top:0;right:0;width:100%;height:100%;content:"";background:rgba(120,132,144,.5);background:-moz-linear-gradient(left,rgba(120,132,144,0) 30%,rgba(120,132,1440,1) 50%);background:-webkit-linear-gradient(left,rgba(120,132,144,0) 30%,rgba(120,132,144,1) 50%);background:linear-gradient(to right,rgba(120,132,144,0) 30%,rgba(120,132,144,1) 50%)} .wijzer .text{width:50%;position:relative;z-index:2} .wijzer h2{font-size:32px;line-height:48px} .wijzer .counter{display:none} } @media screen and (max-width:1024px){ .home .articles article>div{width:calc((100% / 3) - 24px)} .home .articles .div{width:24px} .home .articles.two article>div{width:calc(50% - 24px)} .home .articles.two .div{width:24px} .home .fases .index{padding:32px 24px 16px 32px} .home .compare{padding:72px 0} .home .compare .logos .row div{transform:scale(.5)} .home .about{padding:64px 0 48px 0} .home .about .svgWrap{height:130%;top:-15%;width:60%} .wijzer .text br{display:none} } @media screen and (max-width:900px){ .home .articles{padding:32px 0} .home .articles article{flex-wrap:wrap} .home .articles article>div{width:100%} .home .articles article>div+div{margin-top:16px} .home .articles.two article>div{width:100%} .home .articles .div{display:none} .home .articles .top{width:calc(50% - 24px);margin-right:24px;float:left} .home .articles .top+a{margin-top:19px} .home .compare::before{width:75%} .home .compare .text{width:50%} .home .compare h2{font-size:24px;line-height:32px} .home .compare h2 span{font-size:70px} .home .fases{padding:32px 0} .home .fases .consultant{left:auto;right:53%;width:540px;z-index:-1;top:auto;bottom:-32px} .home .about .text{width:50%} .home .about h2{font-size:48px;margin-bottom:5px} .home .about h3{font-size:16px;line-height:24px} .home .about .text p{font-size:13px;line-height:21px} } @media screen and (max-width:800px){ .home .about{padding:40px 0 24px 0} .home .about article{display:block} .home .about h3{max-width:none} .home .about .text{width:65%} .home .about .svgWrap{height:100%;top:0;width:45%} .wijzer{background-position:-100px center} .wijzer h2{font-size:24px;line-height:32px;font-weight:700} .homeC2A{background-size:cover} .homeC2A h3{font-size:24px;line-height:32px;font-weight:700;margin-bottom:16px} } @media screen and (max-width:700px){ .home .articles .top{margin-bottom:0} .home .articles article>div+div{margin-top:40px} .home .fases{padding:48px 0 24px} .home .fases .index{width:100%;padding:0;background:0 0} .home .fases ul{background:#fff;padding:24px 24px 0 24px;margin-top:24px;height:314px;clear:both} .home .fases .consultant{right:24px;transform:scaleX(-1);width:226px;bottom:auto;top:-56px;background-position:center top} .home .fases .dashed{display:none} .home .about .text{width:100%;padding:0} .home .about .svgWrap{height:70%;width:70%;top:-13%;z-index:-2} .home .about{padding-top:50%} .home .about::before{content:"";position:absolute;top:0;left:0;height:60%;width:100%;z-index:-1;background:-moz-linear-gradient(top,rgba(255,255,255,0) 40%,rgba(236,240,240,1) 90%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 40%,rgba(236,240,240,1) 90%);background:linear-gradient(to bottom,rgba(255,255,255,0) 40%,rgba(236,240,240,1) 90%)} } @media screen and (max-width:640px){ .home .fases ul{height:488px} .home .fases li{width:50%} } @media screen and (max-width:600px){ .home .articles .top{width:100%;margin-right:0;float:none} .home .articles .top+a{margin-top:16px} .home .fases h2{width:100%} .home .fases p{width:100%;font-size:13px} .home .fases ul{margin-top:24px} .home .fases .consultant{display:none} .home .about h2{font-size:48px} .home .about h3{font-size:16px} .home .about p{font-size:13px} .home .about a{font-size:13px} .wijzer{height:auto;background-size:auto 600px;background-position:left -120px} .wijzer article{position:static;padding:0} .wijzer::after{display:none} .wijzer .t,.wijzer .tc{display:block} .wijzer .text{width:100%;margin:0;position:relative;padding:50% 0 0 0} .wijzer .text>div{background:#788490;padding:0 24px 24px 24px} .wijzer .text::before{position:absolute;z-index:-1;top:0;right:0;width:100%;padding-top:50%;content:"";background:rgba(120,132,144,.5);background:-moz-linear-gradient(top,rgba(120,132,144,0) 60%,rgba(120,132,144,1) 100%);background:-webkit-linear-gradient(top,rgba(120,132,144,0) 60%,rgba(120,132,144,1) 100%);background:linear-gradient(to bottom,rgba(120,132,144,0) 60%,rgba(120,132,144,1) 100%)} .wijzer .but{float:none} .homeC2A{text-align:left;padding:40px 0;background-image:none;background:#fff} .homeC2A p{max-width:none} .homeC2A::before{display:none} .homeC2A br{display:none} .homeC2A ul li{padding-left:24px} .homeC2A ul li::before{position:absolute;left:0} } @media screen and (max-width:500px){ .home .compare{padding:144px 0 32px 0} .home .compare::before{transform:skewY(3deg);transform-origin:left top;width:100%;left:0;top:104px} .home .compare .text{width:100%} .home .compare .logos{width:1000%;flex-wrap:nowrap;height:112px;left:0;animation:logos-Slide 120s both linear infinite} .home .compare .logos .row{align-items:center} .home .compare .logos .row div{transform:scale(.6)} .home .compare .logos .row{width:20%} @keyframes logos-Slide{ 0%{left:0} 50%{left:-900%} 100%{left:0} } .wijzer{background-size:auto 430px;background-position:left -90px} } @media screen and (max-width:450px){ .home .fases ul{height:auto;display:block;padding-bottom:8px} .home .fases li{width:100%} }