.about-us{font-size:14px;line-height:1.7} .about-us p{max-width:516px} .about-us h1{font-size:64px;line-height:1.2} .about-us h2{font-size:40px;line-height:1.4} .about-us header{padding:180px 0;position:relative} .about-us header .svgWrap{position:absolute;top:0;right:0;z-index:0;height:100%;width:50%;background-image:url(https://cdn.softwaresystemen.nl/nodes/europe.svg);background-repeat:no-repeat;background-size:cover;background-position:left center} .about-us header article{position:relative;z-index:1} .about-us header p{margin-bottom:0} .about-us .site{padding:96px 0;background:#fff;position:relative} .about-us .site::before{content:"";position:absolute;right:0;top:0;width:50%;height:100%;z-index:0;background-image:url(https://cdn.softwaresystemen.nl/nodes/about-us-vergelijk-pagina.webp);background-repeat:no-repeat;background-position:left} .nowebp .about-us .site::before{background-image:url(https://cdn.softwaresystemen.nl/nodes/about-us-vergelijk-pagina.jpg)} .about-us .site article{position:relative;z-index:1} .about-us .site h3,.about-us .site p.small{font-size:14px;line-height:1.7;margin-top:0} .about-us .site a{font-weight:700;text-transform:uppercase;font-size:14px;color:#00829b} .about-us .site a::before{content:'\f054';font-family:'Font Awesome 5 Pro';margin-right:6px;font-size:12px} .about-us .c2a{padding:96px 0;position:relative;background-image:url(https://cdn.softwaresystemen.nl/nodes/home-gratis-erp-wijzer.webp);background-size:cover;background-position:center} .nowebp .about-us .c2a{background-image:url(https://cdn.softwaresystemen.nl/nodes/home-gratis-erp-wijzer.jpg)} .about-us .c2a::after{content:"";z-index:0;position:absolute;top:0;left:0;width:70%;height:100%;background:-moz-linear-gradient(left,rgba(236,240,240,1) 50%,rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(left,rgba(236,240,240,1) 50%,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(236,240,240,1) 50%,rgba(255,255,255,0) 100%)} .about-us .c2a article{position:relative;z-index:1} .about-us .c2a .but{margin-top:8px} .about-us .call{padding:96px 0;position:relative;background-color:#273e54} .about-us .call::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(https://cdn.softwaresystemen.nl/nodes/about-us-callback.webp);background-position:32% 10%;background-size:cover;opacity:.6} .nowebp .about-us .call::before{background-image:url(https://cdn.softwaresystemen.nl/nodes/about-us-callback.jpg)} .about-us .call .right{width:60%;margin-left:40%;position:relative;z-index:1} .about-us .call h2{color:#fff} .about-us .call p{color:#e9ebec} .about-us .call a{font-weight:700} .about-us .call form{margin-top:12px;display:inline-block} .about-us .call input{height:56px;line-height:56px;border:0;float:left;font-size:13px;padding-left:16px} .about-us .call #name{border-right:2px solid #cad3da} .about-us .call #tel{width:140px} .about-us .call button{text-transform:uppercase;height:56px;line-height:56px;font-size:13px;padding:0;display:block;float:left;width:124px} @media screen and (max-width:1024px){ .about-us h1{font-size:40px} .about-us h2{font-size:24px} .about-us header{padding:120px 0} .about-us p{max-width:420px} .about-us .site::before{width:calc(100% - 400px);top:7%;height:88%;background-size:cover} } @media screen and (max-width:900px){ .about-us p{max-width:380px} .about-us header{padding:80px 0} .about-us .site{padding:80px 0} .about-us .site::before{width:calc(100% - 360px)} .about-us .c2a{padding:80px 0} .about-us .call{padding:80px 0} } @media screen and (max-width:800px){ .about-us header .svgWrap{top:-15%;height:140%;width:45%} .about-us .site::before{width:calc(100% - 370px);height:52%;top:10%} .about-us .c2a{background-position:70%} .about-us .c2a::after{background:#ecf0f0;opacity:.9;width:100%} .about-us .call #name,.about-us .call #tel{width:50%} .about-us .call .but{margin-top:8px} } @media screen and (max-width:700px){ .about-us p{max-width:300px} .about-us header .svgWrap{top:-5%;height:110%;width:45%} .about-us .site::before{width:calc(100% - 290px);height:56%;top:8%} } @media screen and (max-width:600px){ .about-us p{max-width:none} .about-us header{padding:198px 0 48px 0} .about-us header .svgWrap{top:-16%;height:95%;width:56%} .about-us .site{padding:32px 0 48px 0} .about-us .site::before{position:static;width:100%;padding-top:82%;display:block;margin:0 auto 16px auto;background-position:56% top;background-size:120%} .about-us .c2a{padding:40px 0;background-image:none} .about-us .call{padding:40px 0} .about-us .call .right{margin-left:0;width:100%} .about-us .call form{width:100%} .about-us .call #name,.about-us .call #tel{width:calc(50% - 62px)} .about-us .call .but{margin-top:0} .about-us .call::before{display:none} } @media screen and (max-width:450px){ .about-us header{padding:216px 0 48px 0} .about-us header .svgWrap{top:-13%;height:84%;width:89%} .about-us .call #name,.about-us .call #tel{width:50%} .about-us .call .but{margin-top:8px} }