/* swiper-css */
/**
* Swiper 11.2.10
* Trimmed to the modules this theme uses: core, navigation, free-mode, fade, a11y.
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 28, 2025
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}
/* theme-style */
/*
Theme Name: Software Shaker
Author: Softwareshaker
Description: Custom theme for softwareshaker.com. Page, block and shared styles live in /css/ and load only where needed (see inc/enqueue.php).
Version: 1.0
*/
@font-face{font-family:'metropolisbold';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-bold-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-bold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolismedium';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-medium-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-medium-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolisregular';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-regular-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolissemi_bold';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-semibold-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-semibold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
:root {
--textColor: #353535;
--textColortwo: #848484;
--backgrondColorGray : #f2f2f2;
--backgrondColorRed : #D32020; /* Orginal #FB4545 */
--backgrondColorRedlight : #F38989;
--backgrondColorPink : #FEEFEE;
--backgrondColorBlack : #353535;
--backgroundBody : #fff;
--bodyFont : 16px;
--tableBorder : #E8E8E8;
/* Font roles. css/global/font-inter.css redefines these when Theme Setting > Lettertype is Inter. */
--font-regular : 'metropolisregular';
--font-medium : 'metropolismedium';
--font-semibold : 'metropolissemi_bold';
--font-bold : 'metropolisbold';
--font-weight-regular : normal;
--font-weight-medium : normal;
--font-weight-semibold : normal;
--font-weight-bold : normal;
}
/* ---------- Base ---------- */
* {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;}
body {background: var(--backgroundBody);font-size:var(--bodyFont);color: var(--textColor);font-family: var(--font-regular); font-weight: var(--font-weight-regular);}
p{margin-bottom: 25px;}
p, li {line-height: 25px;font-size: 16px;}
p:last-child{margin-bottom: 0;}
p a{color:inherit;transition:color .3s ease, text-decoration-color .3s ease;}
p a:hover{color:var(--backgrondColorRed);}
/* Links in running text (no class: not buttons): a fine soft-red underline a little below the text */
p a:not([class]), .left_part li a:not([class]) {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(211,32,32,.45);}
p a:not([class]):hover, .left_part li a:not([class]):hover {text-decoration-color:currentColor;}
a {color: inherit;}
ul, ol {padding-left: 19px;margin-bottom: 25px;}
ul li::marker{color: var(--backgrondColorRed);font-size: 14px;}
html{scroll-behavior: smooth;scroll-padding-top:100px;}
a:focus, .btn:focus, button:focus{outline: none;box-shadow: none;}
input:focus, textarea:focus, select:focus {outline: none;}
input, button, label, textarea, select {font-family: var(--font-regular); font-weight: var(--font-weight-regular);}
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 {margin-bottom: 25px;line-height: 1;font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
h1{font-size:50px;}
h2{font-size:38px;}
h3{font-size:30px;}
h4, .h4{font-size:24px;}
h5, .h5{font-size:20px; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
h6, .h6{font-size:12px;margin-bottom: 0;}
.small_p p{font-size: 13px;line-height: 20px;}
strong{font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
/* Label: pink pill with red text, white on red/dark backgrounds */
.sub_h6 h6, .sub_h6 .h6{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(211,32,32,.1);color:var(--backgrondColorRed);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.hero_section .sub_h6 h6, .hero_section .sub_h6 .h6{background:rgba(255,255,255,.14);color:#fff;}
/* Red line under block titles, centered when the title is centered */
.block_title::after{content:"";display:block;width:56px;height:3px;margin-top:20px;border-radius:2px;background:var(--backgrondColorRed);}
.short_intro_box .block_title::after, .top_title .block_title::after, .intro_section .block_title::after, .cta_section:not(.cta_panel_section) .block_title::after, .video_intro_head .block_title::after, .text-center-all .block_title::after{margin-left:auto;margin-right:auto;}
/* ---------- Layout and Utilities ---------- */
.layout{overflow: clip;}
.wrapper{max-width: 1280px;margin: 0 auto;width: 100%;padding: 0 40px;}
.flex_center{display: flex;justify-content: center;gap: 14px;flex-wrap: wrap;}
.mb-0{margin-bottom: 0 !important;}
.mb-20{margin-bottom: 20px !important;}
.mb-30{margin-bottom: 30px !important;}
.mb-40{margin-bottom: 40px !important;}
.mb-50{margin-bottom: 50px !important;}
.mb-60{margin-bottom: 60px !important;}
.mb-70{margin-bottom: 70px !important;}
.mb-80{margin-bottom: 80px !important;}
.mb-90{margin-bottom: 90px !important;}
.mb-100{margin-bottom: 100px !important;}
.mb-110{margin-bottom: 110px !important;}
.mb-120{margin-bottom: 120px !important;}
.mb-130{margin-bottom: 130px !important;}
.mb-140{margin-bottom: 140px !important;}
.mb-160{margin-bottom: 160px !important;}
.mb-170{margin-bottom: 170px !important;}
.mb-180{margin-bottom: 180px !important;}
.mb-190{margin-bottom: 190px !important;}
.mb-200{margin-bottom: 200px !important;}
/* ---------- Block spacing ----------
Every flexible content block (partial/content-*.php) gets the same vertical
padding and no margin, so two blocks are always 2 x --block-space apart. */
:root{--block-space: 80px;}
.ss_block{padding-top: var(--block-space) !important;padding-bottom: var(--block-space) !important;margin-top: 0 !important;margin-bottom: 0 !important;}
@media only screen and (max-width:1023px){:root{--block-space: 64px;}}
@media only screen and (max-width:600px){:root{--block-space: 48px;}}
/* ---------- Buttons ---------- */
.btn_one{overflow: hidden; text-decoration: none; color: #FFF;font-size: 15px;line-height: 1; font-family: var(--font-medium); font-weight: var(--font-weight-medium);display: inline-flex;cursor: pointer;height: 48px;padding: 0px 24px;border-radius: 5px;border: 1px solid #FFF;}
span.link-effect{position: relative;line-height: inherit;transition: transform .3s;display: flex;align-items: center;}
span.link-effect::before {content: attr(data-hover);height: 100%;position: absolute;top: 100%;width: 100%;font-size: inherit;color: inherit;display: flex;align-items: center;}
.btn_one:hover span.link-effect{-webkit-transform: translateY(-100%);transform: translateY(-100%);}
.btn_one.red{background: var(--backgrondColorRed);border-color: var(--backgrondColorRed);font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
.btn_one.black{background: var(--backgrondColorBlack);border-color: var(--backgrondColorBlack);font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
span.arrow {display: inline-block; margin-left: 8px; width: 13px;height: 13px;background: url("data:image/svg+xml;utf8,") no-repeat center center;background-size: contain;position: relative;top: 50%;transform: translateY(-50%);}
button.btn_one{position: relative;}
/* ---------- Header ---------- */
.navigation > ul{opacity:1;transition:opacity .2s ease;}
/* ---------- Hero ---------- */
.hero_section{padding:200px 0 280px;display:flex;align-items:flex-end;min-height:100vh;max-height:900px;background:#000;position:relative;overflow:hidden;}
.hero_section .wrapper{height:100%;display:flex;align-items:flex-end;}
.banner_img{position:absolute!important;left:0;top:0;width:100%;height:100%;opacity:.4;}
.banner_img .swiper-wrapper{height:100%;}
.banner_img .swiper-slide{height:100%;}
.banner_img img{display:block;width:100%;height:100%;object-fit:cover;}
.hero_section .inner_part{position:relative;z-index:2;width:100%;}
.hero_section .sqr_image{content:"";position:absolute;left:-23px;top:-8px;width:33px;height:32px;background:url("data:image/svg+xml;utf8,") no-repeat center center;background-size:contain;}
.hero_section h1, .hero_section p, .hero_section h6, .hero_section .h6{color:#fff;}
.hero_section h6, .hero_section .h6{text-transform:uppercase;}
.hero_section h6 a, .hero_section .h6 a{text-decoration:none;position:relative;}
.hero_section h6 a:hover, .hero_section .h6 a:hover{text-decoration:none;}
.hero_section h6 a::after, .hero_section .h6 a::after{content:"";width:5px;margin:0 8px;display:inline-block;height:10px;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("data:image/svg+xml;utf8,");}
.hero_section .text_wrap{max-width:628px;}
.hero_section p{margin:20px 0 35px;font-size:18px;max-width:491px;}
.hero_section .right_arrow{position:absolute;right:0;bottom:56px;animation:animate 1s;}
.hero_section::after{pointer-events:none;position:absolute;content:"";right:-555px;bottom:-380px;width:1403px;height:1242px;opacity:.84;background:radial-gradient(52.63% 45.31% at 68% 58.21%,var(--backgrondColorRed) 0%,rgba(251,69,69,0) 100%);z-index:1;}
.hero_section .right_arrow svg{width:100%;height:100%;}
.hero_section h1{width:100%;margin:0;}
/* ---------- Sliders and Cards ---------- */
.short_intro_box{text-align: center;}
.short_intro_box .wrap{max-width: 800px;margin: 0 auto;}
.slider_section{padding: 60px 0 60px;background: var(--backgrondColorGray);position: relative;}
.slider_section .bottom_link{margin-top: 20px;}
.short_intro_box p{line-height: 18px;}
.short_intro_box h2:last-child{margin-bottom: 40px;}
.slider_section .short_intro_box .wrap{max-width: 800px;}
.slider_section .wrapper{position: relative;}
.arrow-right{position: absolute;right: 25px;top: 0;width: 507px;height: auto;pointer-events: none;}
.arrow-left{position: absolute;left: 25px;bottom: 0;width: 507px;height: auto;pointer-events: none;}
.arrow-right img, .arrow-left img {display: block;}
.aos-animate.arrow-right{animation: animate 1s;}
.aos-animate.arrow-left{animation: animateOpp 1s;}
.right_part .arrow-right{z-index:20;}
.bottom_link{display:flex;justify-content:center}
.bottom_link .btn_one{width:auto!important;max-width:max-content;display:inline-flex}
/* ---------- Image and Media ---------- */
.wrapper::before, .wrapper::after, .outer_part::before, .outer_part::after, .arrow-right, .arrow-right *{pointer-events:none!important;}
/* Playing video keeps the 16:9 frame (a fixed height gave a tall black frame on mobile) */
lite-youtube.lyt-activated {
background-image:none !important;
background: inherit;
height:auto;
aspect-ratio:16/9;
}
/* ---------- Benefits ---------- */
.top_title *:last-child{margin-bottom: 0;}
/* ---------- Reviews ---------- */
/* ---------- Pricing ---------- */
.check_list ul{list-style: none;padding-left: 0;}
.check_list li{position: relative;padding-left: 28px;}
.check_list li::before{content: "";position: absolute;left: 0;top: 0;width: 20px;height: 20px;background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9998 4.8125C19.9998 5.40234 19.7654 5.97266 19.3474 6.39062L8.97632 16.7617C8.10523 17.6328 6.69117 17.6328 5.82007 16.7617L0.652106 11.5977C-0.19555 10.7031 -0.160394 9.29297 0.734137 8.44531C1.59742 7.625 2.94898 7.62891 3.80836 8.44531L7.3982 12.0352L16.1912 3.23828C17.0623 2.36719 18.4763 2.36719 19.3474 3.23828C19.7654 3.65625 19.9998 4.22266 19.9998 4.8125Z' fill='%23FB4545'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size: contain;}
.home h2 + p + ol{list-style:decimal;padding-left:20px;}
.home h2 + p + ol > li{padding-left:0;}
.home h2 + p + ol > li::before{display:none;}
.prijzen {background-color: var(--backgrondColorPink); padding: 80px 0 120px 0;}
/* ---------- Contact ---------- */
.arrow-right.ani_opp{right: unset;left: -40px;top: unset;bottom: 0;}
/* ---------- Functionalities ---------- */
.video-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999999;padding:90px 20px 20px}
.video-popup-inner{position:relative;flex:0 0 auto;width:min(1200px,calc(100vw - 40px),calc((100vh - 130px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.video-popup-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-popup-close{position:absolute;top:26px;right:30px;width:56px;height:56px;padding:0;border:0;background:transparent;cursor:pointer;z-index:10;transition:transform .25s ease}
.video-popup-close::before,.video-popup-close::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:3px;background:#fff;border-radius:3px;pointer-events:none;transition:background .25s ease}
.video-popup-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.video-popup-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.video-popup-close:hover{transform:rotate(90deg)}
.video-popup-close:hover::before,.video-popup-close:hover::after{background:var(--backgrondColorRed)}
@media(max-width:767px){.video-popup-overlay{padding:70px 14px 14px}.video-popup-close{top:14px;right:14px;width:42px;height:42px}}
/* ---------- Tabs and Interaction ---------- */
/* ---------- Alignment Utilities ---------- */
.text-center-all{text-align:center;}
.text-center-all *{text-align:inherit;}
.text-center-all .btn_one{margin-left:auto;margin-right:auto;display:inline-block;}
.text-center-all ul, .text-center-all ol {list-style-position:inside;}
.text-center-all ul, .text-center-all ol {padding-left:0;margin:0 auto;display:table;}
.text-center-all li{text-align:left;}
/* ---------- Demo Popup ---------- */
body.popup_open{overflow:hidden;}
/* ---------- Cookie Banner ---------- */
#cookiescript_injected {
position:fixed!important;
bottom:0;
left:0;
width:100%;
z-index:999999;
}
#cookiescript_injected #cookiescript_accept {background-color: #D32020 !important;color: #FFFFFF !important;}
#cookiescript_injected #cookiescript_readmore,#cookiescript_injected a {color: #D32020 !important;}
#cookiescript_injected #cookiescript_link {color: #D32020 !important;}
#cookiescript_injected a#cookiescript_link,#cookiescript_injected a#cookiescript_link span {color: #D32020 !important;}
/* ---------- Compare Table ---------- */
.tabel_scroll {overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 25px;}
.vergelijk_tabel {width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; color: var(--textColor);}
.vergelijk_tabel th, .vergelijk_tabel td {padding: 15px 20px; text-align: left; vertical-align: middle; line-height: 22px; border-bottom: 1px solid var(--tableBorder);}
.vergelijk_tabel thead th {font-family: var(--font-bold); font-weight: var(--font-weight-bold); font-size: 16px; padding-bottom: 13px; border-bottom: 2px solid var(--tableBorder);}
.vergelijk_tabel th:first-child, .vergelijk_tabel td:first-child {width: 32%; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
.vergelijk_tabel td:nth-child(2) {color: var(--textColortwo);}
.vergelijk_tabel th:last-child, .vergelijk_tabel td:last-child {background: var(--backgrondColorPink);}
.vergelijk_tabel thead th:last-child {color: var(--backgrondColorRed); border-bottom-color: var(--backgrondColorPink); border-top-left-radius: 8px; border-top-right-radius: 8px;}
.vergelijk_tabel tbody tr:last-child td {border-bottom: 0;}
.vergelijk_tabel tbody tr:last-child td:last-child {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
/* ---------- Animations ---------- */
@keyframes animate{0%{transform:translateX(100%);}100%{transform:translateX(0);}}
@keyframes animateOpp{0%{transform:translateX(-100%);}100%{transform:translateX(0);}}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* (min-width:1024px) */
@media (min-width:1024px){
.menu-item-has-children>a:hover{color:var(--backgrondColorRed)!important;}
.menu-item-has-children.active>a{background-color:var(--backgroundBody)!important;color:var(--textColor)!important;border-radius:8px 8px 0 0;}
.menu-item-has-children.active>a:hover{color:var(--backgrondColorRed)!important;}
}
/* only screen and (max-width:1279px) */
@media only screen and (max-width:1279px){
.hero_section .right_arrow{max-width: 44vw;}
}
/* only screen and (max-width:1023px) */
@media only screen and (max-width:1023px){
h1{font-size: 40px;}
h2{font-size: 30px;}
h3{font-size: 22px;}
h4, .h4{font-size: 20px;}
h5, .h5{font-size: 16px;line-height: 1.2;}
.wrapper{max-width: 827px;padding: 0 30px;}
.hero_section .text_wrap{max-width: 510px;}
.hero_section {padding: 140px 0 80px;}
.hero_section p{font-size: 16px;}
.hero_section .right_arrow{bottom: 0;}
.slider_section .arrow-right{max-width: 35vw;}
.arrow-right.ani_opp{max-width: 40vw;}
.slider_section .arrow-left{max-width: 35vw;}
.mb-130, .mb-140, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 120px !important;}
.short_intro_box.mb-100{margin-bottom: 50px !important;}
.scroll_stop{overflow: hidden;}
}
/* (max-width:768px) */
@media (max-width:768px){
.pricing_page { padding-top:0; }
#cookiescript_injected {max-height: 90dvh !important;height: auto !important;overflow-y: auto !important;}
}
/* (max-width:767px) */
@media (max-width:767px){
.vergelijk_tabel {font-size: 14px;}
.vergelijk_tabel th, .vergelijk_tabel td {padding: 12px 14px; line-height: 20px;}
}
/* only screen and (max-width:767px) */
@media only screen and (max-width:767px){
h1{font-size: 30px;}
h2{font-size: 25px;}
.hero_section::after {width: 614px;height: 543px;right: -130px;bottom: -250px;}
.hero_section h1{width: 100%;}
.mb-120, .mb-110, .mb-130, .mb-140, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 90px !important;}
}
/* only screen and (max-width:600px) */
@media only screen and (max-width:600px){
h2{font-size: 24px;}
.sub_h6 h6, .sub_h6 .h6{font-size: 10px;}
.block_title::after{width:44px;margin-top:14px;}
.hero_section h1{margin-bottom:0;}
.hero_section h1{width: 100%;overflow-wrap: break-word;word-wrap: break-word;}
.hero_section .text_wrap{max-width: 100%;}
.hero_section p{line-height: 20px;margin-bottom: 28px;}
.btn_one{font-size: 14px;height: 46px;padding: 0px 20px;}
.hero_section .sqr_image{width: 26px;height: 26px;}
span.arrow{width: 11px;height: 11px;margin-left: 5px;}
.hero_section .right_arrow { max-width: 60vw;}
.hero_section.mb-130{margin-bottom: 65px !important;}
p, li {line-height: 20px;font-size: 14px;}
body{font-size: 14px;}
.mb-90, .mb-100, .mb-110, .mb-120, .mb-130, .mb-140 {margin-bottom: 65px !important;}
.mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 80px !important;}
.slider_section .bottom_link{margin-top: 45px;}
.slider_section .arrow-right{right: -80px;max-width: 300px;}
.slider_section .arrow-left{left: -80px;max-width: 300px;}
.slider_section{padding: 50px 0 70px;}
h1, h2, h3, h4, h5, h6, p, .h4, .h5, .h6 {margin-bottom: 20px;}
.short_intro_box p br{display: none;}
.small_p p{font-size: 12px;}
.short_intro_box.mb-100{margin-bottom: 50px !important;}
.hero_section h6, .hero_section .h6{font-size: 11px;}
.short_intro_box.mb-80{margin-bottom: 50px !important;}
.check_list li::before {width: 15px;height: 15px;}
.hero_section{min-height: calc(100vh - 100px);}
.hero_section{min-height: calc(100svh - 100px);}
}
/* only screen and (max-width:400px) */
@media only screen and (max-width:400px){
h1 {
font-size: 28px;
}
}
/* last */
.desktop_hidden{display: none;}
/* sectoren slider start */
.slider_section .bottom_link{margin-top:45px;}
.slider_section .short_intro_box p{max-width:700px;margin-left:auto;margin-right:auto;}
@media only screen and (max-width:600px){
.slider_section .bottom_link{margin-top:35px;}
}
/* sectoren slider end */
/* ---------- Block background (ACF "Achtergrondkleur" on every block except Select Testimonials) ----------
Standaard keeps the block's own background; Wit / Grijs / Rood override it (software_shaker_block_classes()
adds "ss_bg ss_bg--white|grey|red"). Rood is the light pink of the Voordelen block (--backgrondColorPink).
The extra .ss_bg keeps these rules above the block stylesheets. */
.ss_block.ss_bg.ss_bg--white {background:#fff !important;}
.ss_block.ss_bg.ss_bg--grey {background:var(--backgrondColorGray) !important;}
.ss_block.ss_bg.ss_bg--red {background:var(--backgrondColorPink) !important;}
/* Slider edges fade into the block background */
.ss_block.ss_bg--white .wrapper_large::before {background:linear-gradient(88deg,#fff 28.6%,rgba(255,255,255,0) 98.21%);}
.ss_block.ss_bg--white .wrapper_large::after {background:linear-gradient(-88deg,#fff 28.6%,rgba(255,255,255,0) 98.21%);}
.ss_block.ss_bg--grey .wrapper_large::before {background:linear-gradient(88deg,var(--backgrondColorGray) 28.6%,rgba(242,242,242,0) 98.21%);}
.ss_block.ss_bg--grey .wrapper_large::after {background:linear-gradient(-88deg,var(--backgrondColorGray) 28.6%,rgba(242,242,242,0) 98.21%);}
.ss_block.ss_bg--red .wrapper_large::before {background:linear-gradient(88deg,var(--backgrondColorPink) 28.6%,rgba(254,239,238,0) 98.21%);}
.ss_block.ss_bg--red .wrapper_large::after {background:linear-gradient(-88deg,var(--backgrondColorPink) 28.6%,rgba(254,239,238,0) 98.21%);}
/* Rood: the label pill gets a little more contrast on the pink */
.ss_block.ss_bg.ss_bg--red .sub_h6 h6, .ss_block.ss_bg.ss_bg--red .sub_h6 .h6 {background:rgba(211,32,32,.14);}
/* Decorative background arrows / diagonal stripes (div.arrow-right / div.arrow-left with images/half-arrow-*.svg,
the arrow in the front page hero .right_arrow): switched off site-wide */
.arrow-right, .arrow-left, .right_arrow, .ani_arrow_append {display:none !important;}
/* theme-header */
/* =============================================================================
Global: global/header.css
Extracted from style.css. Loaded on every page.
============================================================================= */
.menubar {display: none;}
.header {padding:30px 0;position:fixed;left:0;top:0;width:100%;z-index:10;background-color:transparent;transition:.4s;}
/* Sticky: the background of the dark hero (global/hero.css .ss_hero_box). The colour transitions; the glows (::before)
and the grid (::after) are gradients, which can't be transitioned, so they fade in with their opacity. */
.header::before, .header::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;}
.header::before {background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.header::after {background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.header.sticky::before {opacity:.56;} /* a bit less red than the hero */
.header.sticky::after {opacity:1;}
.header.sticky {background-color:#111214;box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25);padding:10px 0;transform:none;transition:.4s;}
.header ul {padding-left:0;margin-bottom:0;list-style:none;}
.header .wrapper {max-width:1440px;position:relative;}
.header .header_inner {display:flex;justify-content:space-between;gap:20px;align-items:center;}
.header .logo {width:210px;}
.header .right_part {width:calc(100% - 230px);display:flex;justify-content:flex-end;flex-wrap:nowrap;align-items:center;} /* menu and buttons always on one line (see the breakpoints below) */
.header .navigation {margin:0 auto;}
.header .navigation>ul {display:flex;flex-wrap:nowrap;}
.header .navigation>ul>li {display:inline-block;}
.header .navigation a {text-decoration:none;font-size:13px;font-family:var(--font-medium);font-weight:var(--font-weight-medium);}
.header .navigation>ul>li>a {text-transform:uppercase;color:#fff;padding:14px 16px;position:relative;z-index:1;}
.header .navigation>ul>li:has(ul):hover>a, .header .navigation>ul>li.active:has(ul)>a {background:#fff;color:var(--textColor);border-top-left-radius:8px;border-top-right-radius:8px;}
.header .navigation>ul>li:has(ul):hover>a::after, .header .navigation>ul>li.active:has(ul)>a::after {content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:12px;background:#fff;} /* white bridge from the tab to the panel: no strip in between, and the menu stays open while moving down. .active: js/global.js keeps a menu open after the mouse leaves */
/* Caret after menu items with a dropdown, turned up while it is open. All top-level links are
inline-flex so the items with and without a caret stay on one line; ::after is the white bridge,
so the caret is ::before with order:2 (after the text). */
.header .navigation>ul>li>a {display:inline-flex;align-items:center;}
.header .navigation>ul>li.menu-item-has-children>a {gap:6px;}
.header .navigation>ul>li.menu-item-has-children>a::before {content:"";order:2;flex:none;width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu-item-has-children:hover>a::before, .header .navigation>ul>li.menu-item-has-children.active>a::before {transform:rotate(180deg);}
.header .navigation>ul>li:not(:has(ul)):hover>a {color:var(--backgrondColorRed);}
.header .btn_box {flex:none;margin-left:20px;display:flex;align-items:center;gap:8px;}
.header .navigation>ul>li:not(.mega-menu) {position:relative;}
.header .navigation li:not(.mega-menu) .sub-menu {position:absolute;left:50%;top:100%;background:#fff;display:block;padding:18px;border-radius:5px;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;min-width:max-content;}
.header .navigation li:not(.mega-menu):hover .sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation .sub-menu li {display:block;line-height:1;}
.header .navigation li:not(.mega-menu) .sub-menu a, .header .navigation li.mega-menu li ul li a {font-size:12px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li:not(.mega-menu) .sub-menu a:hover {color:var(--backgrondColorRed);}
.header .navigation li:not(.mega-menu) .sub-menu li:not(:last-child) {margin-bottom:5px;}
.header .navigation li.mega-menu .sub-menu {opacity:0;visibility:hidden;pointer-events:none;position:absolute;left:50%;transform:translateX(-50%);top:48px;width:max-content;max-width:1200px;background:#fff;border-radius:5px;display:block;padding:29px 24px;filter:drop-shadow(0 0 4.2px rgba(0,0,0,.25));}
.header .navigation li.mega-menu:hover>.sub-menu, .header .navigation li.mega-menu.active>.sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation li.mega-menu .sub-menu .sub-menu {opacity:1!important;visibility:visible!important;display:block!important;filter:none;}
.header .navigation li.mega-menu li ul {position:relative!important;left:unset!important;top:unset!important;transform:unset!important;padding:0!important;}
.header .navigation li.mega-menu li ul li {display:block;width:100%;}
.header .navigation li.mega-menu .sub-menu a {color:var(--textColor);}
.header .navigation li.mega-menu>ul {display:grid!important;grid-template-columns:repeat(auto-fit,250px);gap:45px;justify-content:start;width:max-content;}
.header .navigation li.mega-menu>ul>ul {display:contents;}
.header .navigation li.mega-menu li .menu-icon {max-width:28px;max-height:24px;}
.header .navigation li.mega-menu>ul>li>a+.menu-item-description {display:block;font-size:11px;color:var(--textColor);margin-top:6px;line-height:1.5;font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;}
.header .navigation li>a[href="#"], .header .navigation li>a[href=""], .header .navigation li>a:not([href]) {pointer-events:none;cursor:default;}
.header .navigation li.mega-menu>ul>li>a[href="#"], .header .navigation li.mega-menu>ul>li>a[href=""], .header .navigation li.mega-menu>ul>li>a:not([href]) {background-image:none!important;border-bottom:none;padding-bottom:0;}
.header .navigation>ul>li.menu-item-has-children>.sub-menu {opacity:0;visibility:hidden;pointer-events:none;}
.header .navigation>ul>li.menu-item-has-children.active>.sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width):not([class*="menu-button"])>a:first-of-type {position:relative;display:block;font-size:14px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--backgrondColorGray);}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type+.menu-item-description {display:block;font-size:11px;color:var(--textColor);margin-top:6px;line-height:1.5;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type[href]:not([href="#"]):not([href=""])::after {content:"Lees meer >";position:absolute;right:0;top:1px;font-size:12px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:var(--textColor);white-space:nowrap;}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:not([href="#"]):not([href=""]):hover, .header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type[href]:not([href="#"]):not([href=""]):hover::after {color:var(--backgrondColorRed);}
/* Software menu (menu item class "menu_products"): compact panel right under the tab, in 2 columns;
every product has a dot, a bold title and a short description, and is clickable as a whole with a
grey background on hover. Menu item class "dot-dark" gives a dark dot (other brand). */
.header .navigation>ul>li.menu_products>.sub-menu {left:auto;top:48px;transform:none;padding:12px;border-radius:0 14px 14px 14px;}
.header .navigation li.menu_products>ul {grid-template-columns:repeat(2,minmax(0,250px));gap:4px;}
.header .navigation li.menu_products>ul>li {position:relative;padding:12px 16px 12px 36px;border-radius:10px;transition:background-color .2s ease;}
.header .navigation li.menu_products>ul>li::before {content:"";position:absolute;left:16px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--backgrondColorRed);}
.header .navigation li.menu_products>ul>li.dot-dark::before {background:var(--textColor);}
.header .navigation li.menu_products>ul>li:hover {background:var(--backgrondColorGray);}
.header .navigation li.menu_products>ul>li>a:first-of-type {display:block;font-size:14px;line-height:1.3;font-family:var(--font-bold);font-weight:var(--font-weight-bold);color:var(--textColor);}
.header .navigation li.menu_products>ul>li>a:first-of-type::after {content:"";position:absolute;inset:0;border-radius:10px;}
.header .navigation li.menu_products>ul>li>a+.menu-item-description {display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#6b6b6b;font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2, .header .navigation li.mega-menu>ul>li.menu-button-pos3, .header .navigation li.mega-menu>ul>li.menu-button-pos4 {grid-row:3;justify-self:left;width:max-content;border-top:none;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2 {grid-column:2;}
.header .navigation li.mega-menu>ul>li.menu-button-pos3 {grid-column:3;}
.header .navigation li.mega-menu>ul>li.menu-button-pos4 {grid-column:1/-1;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2>a, .header .navigation li.mega-menu>ul>li.menu-button-pos3>a, .header .navigation li.mega-menu>ul>li.menu-button-pos4>a {display:inline-flex;width:max-content;}
.header .navigation li.mega-menu>.sub-menu>li[class*="menu-button"]>a {color:var(--textColor);padding:12px 20px 12px 0;border-radius:8px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);text-decoration:none;background-repeat:no-repeat;background-size:11px;background-position:right center;}
.header .navigation li.mega-menu>.sub-menu>li[class*="menu-button"]>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a {font-size:14px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--backgrondColorGray);margin-bottom:14px;background-repeat:no-repeat;background-size:11px;background-position:right calc(50% - 3px);}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.mega-menu>ul>li.full_width {width:100%;display:flex;justify-content:center;border-top:1px solid var(--backgrondColorGray);padding-top:20px;align-items:center;}
.header .navigation li.mega-menu>ul>li.full_width>a {display:inline-flex;align-items:center;gap:10px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li.mega-menu>ul>li.full_width>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.mega-menu>ul>li.full_width li {display:inline-block;width:auto;margin-bottom:0!important;}
.header .navigation li.mega-menu>ul>li.full_width ul {width:auto;}
.header .navigation li.mega-menu>ul>li.full_width ul li a {position:relative;margin-left:32px;}
.header .navigation li.mega-menu>ul>li.full_width ul li a::before {content:"";width:1px;height:26px;position:absolute;left:-16px;top:50%;transform:translateY(-50%);background:var(--backgrondColorGray);}
/* Functies menu (menu item class "menu_arrow"): groups in 4 columns, every function a link with the
same grey hover as the Software menu; under a line the two "Bekijk alle ..." links next to each
other with a small divider. After the general mega-menu rules above, so these win. */
.header .navigation li.menu_arrow>.sub-menu {width:min(1120px, calc(100vw - 48px));max-width:none;padding:24px 28px 14px;border-radius:14px;}
.header .navigation li.menu_arrow>ul {grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 36px;}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a {padding-bottom:8px;margin-bottom:6px;border-bottom-color:#EEEEEE;}
.header .navigation li.menu_arrow .sub-menu .sub-menu li:not(:last-child) {margin-bottom:0;}
.header .navigation li.menu_arrow .sub-menu .sub-menu a {display:block;margin:0 -10px;padding:3px 10px;border-radius:7px;font-size:13px;line-height:1.35;color:#4a4a4a;transition:background-color .2s ease,color .2s ease;}
.header .navigation li.menu_arrow .sub-menu .sub-menu a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation li.menu_arrow>ul::after {content:"";grid-row:3;grid-column:1/-1;align-self:start;border-top:1px solid #EEEEEE;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos2, .header .navigation li.menu_arrow>ul>li.menu-button-pos3 {grid-row:3;width:max-content;padding-top:10px;border-top:none;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos2 {grid-column:1/3;justify-self:end;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos3 {position:relative;grid-column:3/5;justify-self:start;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos3::before {content:"";position:absolute;left:-18px;top:calc(10px + 50% - 14px);width:1px;height:18px;background:#E5E5E5;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a {display:inline-flex;align-items:center;gap:8px;margin:0 -10px;padding:6px 10px;border-radius:7px;font-size:13px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);background-image:none;transition:background-color .2s ease;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a::after {content:"";flex:none;width:12px;height:12px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a:hover::after {transform:translateX(3px);}
/* Sectoren menu (menu item class "menu_sectors"): 2 columns right under the tab, grey hover like the
other menus, and "Alle sectoren" (menu item class "menu_all") under a line. */
.header .navigation>ul>li.menu_sectors>.sub-menu {display:grid;grid-template-columns:repeat(2,220px);gap:2px 6px;left:auto;top:48px;transform:none;width:max-content;min-width:0;padding:12px;border-radius:0 14px 14px 14px;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li {margin:0!important;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li>a {display:block;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.35;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:#4a4a4a;transition:background-color .2s ease,color .2s ease;} /* same font as the Functies links */
.header .navigation>ul>li.menu_sectors>.sub-menu>li>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all {grid-column:1/-1;margin-top:6px!important;padding-top:6px;border-top:1px solid #EEEEEE;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a {display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);} /* like "Bekijk alle functionaliteiten" */
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a::after {content:"";flex:none;width:12px;height:12px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a:hover {color:var(--textColor);}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a:hover::after {transform:translateX(3px);}
/* Overig menu (menu item class "menu_more"): one column, same font and grey hover as Sectoren;
menu item class "menu_external" adds the ↗ icon (a link to another site, opens in a new tab). */
.header .navigation>ul>li.menu_more>.sub-menu {display:grid;grid-template-columns:minmax(240px,max-content);gap:2px;width:max-content;min-width:0;padding:10px;border-radius:0 14px 14px 14px;}
.header .navigation>ul>li.menu_more>.sub-menu>li {margin:0!important;}
.header .navigation>ul>li.menu_more>.sub-menu>li>a {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.35;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:#4a4a4a;white-space:nowrap;transition:background-color .2s ease,color .2s ease;}
.header .navigation>ul>li.menu_more>.sub-menu>li>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation>ul>li.menu_more>.sub-menu>li.menu_external>a::after {content:"";flex:none;width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu_more>.sub-menu>li.menu_external>a:hover::after {transform:translate(2px,-2px);}
/* Every dropdown opens at the same height as the mega menus (48px / 41px from the top of the header
row, the tab's white bridge covers the gap). left:auto keeps a panel at the left edge of its own tab. */
.header .navigation>ul>li:not(.mega-menu) {position:static;}
.header .navigation>ul>li:not(.mega-menu):not(.menu_sectors):not(.menu_more)>.sub-menu {left:auto;top:48px;transform:none;border-radius:0 10px 10px 10px;}
.header .navigation>ul>li.menu_more>.sub-menu {left:auto;top:48px;transform:none;}
@media only screen and (max-width:1279px) {
.header .navigation>ul>li:not(.mega-menu)>.sub-menu, .header .navigation>ul>li.menu_products>.sub-menu {top:41px;}
}
/* Inloggen dropdown in the header (replaces the School button, markup in header.php). Its links come
from the menu item with class "menu_login". Opens on hover, keyboard focus and tap (js/global.js). */
.header .navigation li.menu_login {display:none;} /* shown as the Inloggen button next to Demo aanvragen; the mobile menu keeps it */
.header .login_menu {position:relative;}
.header .login_menu__toggle {align-items:center;gap:8px;background:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.header .login_menu__chevron {display:block;flex:none;transition:transform .2s ease;}
.header .login_menu:hover .login_menu__toggle, .header .login_menu:focus-within .login_menu__toggle, .header .login_menu.open .login_menu__toggle {background:#fff;border-color:#fff;color:var(--backgrondColorRed);}
.header .login_menu:hover .login_menu__chevron, .header .login_menu:focus-within .login_menu__chevron, .header .login_menu.open .login_menu__chevron {transform:rotate(180deg);}
.header .login_menu__list {position:absolute;top:calc(100% + 8px);left:50%;z-index:20;min-width:220px;margin:0;padding:8px;list-style:none;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.header .login_menu__list::before {content:"";position:absolute;left:0;right:0;top:-8px;height:8px;} /* keeps the hover while moving down to the list */
.header .login_menu:hover .login_menu__list, .header .login_menu:focus-within .login_menu__list, .header .login_menu.open .login_menu__list {opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.header .login_menu__list li {display:block;margin:0;}
.header .login_menu__list a {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.3;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);text-decoration:none;white-space:nowrap;transition:background-color .2s ease;}
.header .login_menu__list a svg {display:block;flex:none;color:var(--textColor);transition:transform .2s ease,color .2s ease;}
.header .login_menu__list a:hover, .header .login_menu__list a:focus-visible {background:var(--backgrondColorGray);outline:none;}
.header .login_menu__list a:hover svg {color:var(--backgrondColorRed);transform:translate(2px,-2px);}
/* Google rating (inc/helpers.php software_shaker_header_reviews()): always visible social proof, between the menu and the buttons */
.header .header_reviews {display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:14px;padding:7px 10px;border-radius:999px;color:#fff;font-size:13px;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .2s ease;}
.header .header_reviews:hover, .header .header_reviews:focus-visible {background:rgba(255,255,255,.1);color:#fff;text-decoration:none;outline:none;}
.header .header_reviews_g {display:block;flex:none;width:16px;height:16px;}
.header .header_reviews_stars {position:relative;display:block;color:rgba(255,255,255,.28);font-family:Arial,sans-serif;font-size:13px;letter-spacing:1px;}
.header .header_reviews_stars::before {content:"★★★★★";}
.header .header_reviews_stars::after {content:"★★★★★";position:absolute;left:0;top:0;width:var(--rating);overflow:hidden;color:#ffc400;white-space:nowrap;}
.header .header_reviews_score {font-family:var(--font-bold);font-weight:var(--font-weight-bold);}
.header .header_reviews_count {color:rgba(255,255,255,.65);}
.mobile_menu_slide {display:none;}
#menu .menu-item-description {pointer-events:auto!important;cursor:pointer!important;position:relative;z-index:9999}
/* 1200-1399: menu + Inloggen + Demo aanvragen don't fit at full size, so a bit more compact */
@media only screen and (max-width:1399px) {
.header .logo {width:170px;}
.header .right_part {width:calc(100% - 190px);}
.header .navigation>ul>li>a {padding:14px 10px;white-space:nowrap;}
.header .navigation a {font-size:12px;}
.header .btn_box {margin-left:12px;}
.header .btn_one {font-size:13px;padding:0 14px;height:44px;}
}
@media only screen and (max-width:1279px) {
.header {padding: 25px 0;}
.header .logo {width: 140px;}
.header .right_part {width: calc(100% - 140px);}
.header .wrapper {padding: 0 20px;}
.header .navigation > ul > li > a {padding: 12px 10px;}
.header .btn_box {margin-left: 0;}
.header .btn_one {font-size: 13px;padding: 0 14px;height: 44px;}
.header .navigation a {font-size: 12px;}
.header .navigation li.mega-menu .sub-menu {top: 41px;max-width: 1000px;}
}
/* Hamburger menu (mobile_menu_slide) below 1200: the full menu doesn't fit next to the buttons */
@media only screen and (max-width:1199px) {
.header .wrapper {max-width: 100%;padding: 0 20px;}
.header .navigation {display: none;}
.header .logo {width: 180px;}
.header .right_part {width: calc(100% - 180px);}
.menubar {width: 40px;height: 40px;border-radius: 4px;background: var(--backgrondColorRed);padding: 12px 10px;display: flex;justify-content: center;flex-direction: column;gap: 5px;}
.menubar span {display: block;width: 100%;height: 1px;background: #fff;}
.header .header_inner {gap: 8px;}
.mobile_menu_slide {overflow: auto; color: #fff; opacity:0;visibility:hidden;pointer-events:none;transition:0.4s;padding:30px 0 50px;z-index:11;position:fixed;left:0;top:0;width:100%;height:100%;display:block;background:#0a0a0b;}
/* Background like the dark hero (global/hero.css .ss_hero_box), a bit darker: red glows and a faint grid, fixed behind the scrolling menu */
.mobile_menu_slide::before, .mobile_menu_slide::after {content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;}
.mobile_menu_slide::before {opacity:.4;}
.mobile_menu_slide::before {background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.mobile_menu_slide::after {background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.mobile_menu_slide.show {opacity: 1;visibility: visible;pointer-events: all;}
.mobile_menu_slide ul {margin-bottom:0;padding-left:0;list-style:none;display:unset}
.mobile_menu_slide .outer_part>ul>li>a {padding:15px 0;display:block;font-size: 20px;font-family: var(--font-medium);font-weight: var(--font-weight-medium);text-transform: uppercase;}
.mobile_menu_slide svg path {fill: #fff;}
.mobile_menu_slide .menu-track-trace svg path {fill: transparent;stroke: #fff;}
.mobile_menu_slide a {text-decoration: none;}
.mobile_menu_slide .outer_part>ul>li {border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.mobile_menu_slide .outer_part>ul>li:first-child {border-top:1px solid rgba(255, 255, 255, 0.3);}
.mobile_menu_slide .outer_part>ul>li.mega-menu>ul {padding-top: 15px;}
.mobile_menu_slide .outer_part>ul>li>ul {padding-left: 22px;display: block;}
.mobile_menu_slide .outer_part>ul>li>ul>li>a:not(.menu-item-description) {display:flex;align-items:center;font-family:var(--font-medium);font-weight:var(--font-weight-medium);gap:8px;margin-bottom:12px;font-size:18px;}
.mobile_menu_slide .outer_part>ul>li>ul>li>a {display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;}
.mobile_menu_slide .menu-item-description {font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;font-size:16px;line-height:1.6;display:block;margin-top:-6px;}
.mobile_menu_slide .outer_part .menu-icon {height: 24px;}
.mobile_menu_slide .outer_part li li li a {font-size: 16px;line-height: 32px;}
.mobile_menu_slide .outer_part li li ul {margin-bottom: 20px;display: block;}
.mobile_menu_slide .outer_part li li.full_width {margin-left: -22px;width: calc(100% + 22px);}
.mobile_menu_slide li {position:relative}
.mobile_menu_slide li .arrow {background:url('data:image/svg+xml;utf8,') no-repeat center center;width:50px;height:55px;position:absolute;right:0;top:0;transform:rotate(0);transition:0.4s;cursor:pointer;background-size: 16px;}
.mobile_menu_slide .outer_part li li .arrow {display: none !important;}
.mobile_menu_slide .outer_part li li ul {display: block !important;}
.mobile_menu_slide .cross_icon {width: 100%;text-align: right;margin-bottom: 40px;cursor: pointer;position: sticky;top: 0;z-index: 2;}
.mobile_menu_slide .wrapper {max-width: 100%;padding: 0 20px;}
.menubar {cursor: pointer;}
.mobile_menu_slide li .arrow.open {transform: rotate(180deg);}
}
@media (max-width:767px) {
.header.sticky::before {opacity:.2;} /* the glows are sized for desktop (hero on mobile: .35), a bit less red */
.mobile_menu_slide .menu-item-description {display:block;padding-bottom:24px;}
.mobile_menu_slide::before {opacity:.16;} /* the glows are sized for desktop and would fill the whole narrow menu */
}
@media only screen and (max-width:600px) {
.header .right_part {width:auto;margin-left:auto;} /* only the Google rating is left here */
.header .btn_box {display:none;}
.header .header_reviews {margin-left:0;padding:6px 8px;gap:5px;}
.header .header_reviews_stars, .header .header_reviews_count {display:none;}
.header .header_reviews_score::before {content:"★";margin-right:3px;color:#ffc400;font-family:Arial,sans-serif;font-weight:normal;}
.header .logo {width: 175px;}
.header {padding: 20px 0;}
}
/* Pages with the light hero (body.ss-light-hero, inc/hero.php): dark text and the dark logo while the
header is transparent at the top; once it turns sticky (dark background) the normal styles apply again.
:where() keeps these below the hover and dropdown states. */
.header .logo .logo_dark {display:none;}
body.ss-light-hero .header:not(.sticky) .logo:has(.logo_dark) .logo_light {display:none;}
body.ss-light-hero .header:not(.sticky) .logo .logo_dark {display:block;}
body.ss-light-hero .header:not(.sticky) :where(.navigation>ul>li>a) {color:var(--textColor);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews) {color:var(--textColor);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews_stars) {color:rgba(17,18,20,.2);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews_count) {color:rgba(17,18,20,.6);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews:hover) {background:rgba(17,18,20,.06);}
body.ss-light-hero .header:not(.sticky) :where(.login_menu__toggle) {color:var(--textColor);border-color:rgba(17,18,20,.25);}
body.ss-light-hero .header:not(.sticky) :where(.login_menu:hover, .login_menu:focus-within, .login_menu.open) .login_menu__toggle {border-color:rgba(17,18,20,.12);box-shadow:0 6px 18px rgba(17,18,20,.08);}
/* theme-hero */
/* =============================================================================
Global: global/hero.css
The hero of every page (partial/hero.php, inc/hero.php): a full-width dark band with red glows
and a faint grid. "split": text left, image right. "center": centered text without image.
The buttons are the CTA buttons (style.css .btn_one, css/content-cta.css .cta_panel_button).
============================================================================= */
.ss_hero_box {position:relative;isolation:isolate;overflow:hidden;background:#111214;color:#fff;} /* full width, edge to edge */
.ss_hero_box::before {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);} /* a big, bright glow behind the image */
.ss_hero_box::after {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.ss_hero_box > * {position:relative;z-index:1;}
/* Breadcrumbs + label (.ss_hero_head) sit in a row of their own above the H1; the image is in the row of
the H1..note block (.ss_hero_text), so it is centered next to that block and never rises above the H1. */
.ss_hero_inner {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;align-items:start;column-gap:56px;row-gap:0;min-height:680px;padding:150px 0 90px;}
.ss_hero_head, .ss_hero_text {grid-column:1;min-width:0;}
/* ---------- Breadcrumbs, label, title, text ---------- */
.ss_hero_crumbs ol {display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0 0 24px;padding:0;list-style:none;font-size:14px;line-height:1.4;color:rgba(255,255,255,.55);}
.ss_hero_crumbs li {display:flex;align-items:center;margin:0;font-size:inherit;line-height:inherit;}
.ss_hero_crumbs li + li::before {content:"›";margin:0 9px;color:rgba(255,255,255,.4);}
.ss_hero_crumbs a {color:inherit;text-decoration:none;transition:color .2s ease;}
.ss_hero_crumbs a:hover {color:#fff;}
.ss_hero_crumbs [aria-current] {color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);}
.ss_hero_label {display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 14px;border-radius:999px;background:rgba(211,32,32,.2);color:var(--backgrondColorRedlight);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;}
.ss_hero_label::before {content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--backgrondColorRed);box-shadow:0 0 0 3px rgba(211,32,32,.25);}
.ss_hero .ss_hero_title {max-width:680px;margin:0 0 22px;color:#fff;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:54px;line-height:1.06;letter-spacing:-.025em;overflow-wrap:break-word;}
/* Value proposition (field "Waardepropositie"): the main benefit in one sentence, right under the H1 */
.ss_hero .ss_hero_value {position:relative;max-width:620px;margin:-4px 0 20px;padding-left:16px;color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:21px;line-height:1.4;}
.ss_hero .ss_hero_value::before {content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:2px;background:var(--backgrondColorRed);}
.ss_hero .ss_hero_value:last-child {margin-bottom:0;}
.ss_hero .ss_hero_lead {max-width:590px;margin:0 0 34px;color:rgba(255,255,255,.78);font-size:20px;line-height:1.5;}
.ss_hero .ss_hero_lead a {color:#fff;}
/* ---------- Buttons and note ---------- */
.ss_hero_buttons {display:flex;flex-wrap:wrap;gap:12px;}
/* No align-items on the button: the text must fill its height so the hover copy (span.link-effect::before) stays hidden below it */
.ss_hero_play {flex:none;align-self:center;width:9px;height:10px;margin-right:10px;background:var(--backgrondColorRed);clip-path:polygon(0 0, 100% 50%, 0 100%);}
.ss_hero .ss_hero_note {margin:16px 0 0;color:rgba(255,255,255,.55);font-size:14px;line-height:1.4;}
/* ---------- Image ---------- */
.ss_hero_visual {grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;} /* image, with the partner badge under it */
.ss_hero_inner--head .ss_hero_visual {grid-row:2;}
.ss_hero_media {position:relative;max-width:100%;}
.ss_hero {--hero-img-h:560px;}
.ss_hero_image {display:block;width:auto;max-width:100%;height:auto;max-height:var(--hero-img-h);margin:0 auto;border-radius:14px;filter:drop-shadow(0 28px 50px rgba(0,0,0,.5));}
/* Mockup with wide transparent margins: only the visible part (inline --ratio / --img-*) */
.ss_hero_crop {position:relative;display:block;width:min(100%, calc(var(--hero-img-h) * var(--ratio)));aspect-ratio:var(--ratio);margin:0 auto;overflow:hidden;filter:drop-shadow(0 28px 50px rgba(0,0,0,.5));}
.ss_hero_crop .ss_hero_image {position:absolute;left:var(--img-x);top:var(--img-y);width:var(--img-w);max-width:none;height:auto;max-height:none;border-radius:0;filter:none;}
/* Portrait app screenshots in a phone */
.ss_hero_phone {position:relative;width:272px;max-width:100%;aspect-ratio:1179 / 2556;padding:9px;border-radius:46px;background:#0b0b0c;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 40px 80px rgba(0,0,0,.55);}
.ss_hero_phone::before {content:"";position:absolute;z-index:2;top:19px;left:50%;width:32%;height:22px;border-radius:999px;background:#0b0b0c;transform:translateX(-50%);}
.ss_hero_phone_screen {width:100%;height:100%;overflow:hidden;border-radius:37px;background:#fff;}
.ss_hero_phone_screen img {display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Laptop (or other image) with a phone in front of it, bottom right ("Telefoonscherm") */
.ss_hero_media--combo {width:100%;padding:0 5% 5% 0;}
.ss_hero_media--combo .ss_hero_image {width:100%;max-height:none;}
.ss_hero_media--combo .ss_hero_crop {width:100%;}
.ss_hero_media--combo .ss_hero_combo_phone {position:absolute;right:0;bottom:0;z-index:2;width:23%;padding:5px;border-radius:26px;}
.ss_hero_media--combo .ss_hero_combo_phone::before {top:10px;width:30%;height:11px;}
.ss_hero_media--combo .ss_hero_combo_phone .ss_hero_phone_screen {border-radius:21px;}
/* Floating cards on the image */
.ss_hero_tag {position:absolute;z-index:3;display:flex;align-items:center;gap:12px;max-width:250px;padding:12px 18px 12px 12px;border-radius:12px;background:#fff;color:var(--textColor);box-shadow:0 18px 40px rgba(0,0,0,.35);}
.ss_hero_tag--1 {top:13%;left:-58px;}
.ss_hero_tag--2 {bottom:15%;right:-54px;}
.ss_hero_tag_icon {flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--backgrondColorPink);color:var(--backgrondColorRed);}
.ss_hero_tag_icon::before {content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;background:currentColor;-webkit-mask:var(--hero-icon) center/contain no-repeat;mask:var(--hero-icon) center/contain no-repeat;}
.ss_hero_tag_icon--check {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--clock {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 4.6V8l2.4 1.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--calendar {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.2' width='12' height='10.8' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2 6.6h12M5.4 1.8v2.6M10.6 1.8v2.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--euro {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.4 4.2A5 5 0 1 0 12.4 11.8M2.6 6.8h6.6M2.6 9.2h6.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--chart {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13.5h11M4.5 11V8M8 11V4.5M11.5 11V6.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--file {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.4 1.8H4.6a1.6 1.6 0 0 0-1.6 1.6v9.2a1.6 1.6 0 0 0 1.6 1.6h6.8a1.6 1.6 0 0 0 1.6-1.6V5.4z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.2 2v3.6H13M5.6 8.6h4.8M5.6 11h3.2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_text {display:flex;flex-direction:column;gap:2px;min-width:0;}
.ss_hero_tag_text strong {font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:15px;line-height:1.25;color:#111214;}
.ss_hero_tag_text span {font-size:13px;line-height:1.3;color:var(--textColortwo);}
/* ---------- Partner badge (Theme Setting > Hero; also in the front page hero): dark grey glass card on the dark hero ---------- */
.ss_badge {display:inline-flex;align-items:center;gap:14px;max-width:100%;margin-top:30px;padding:11px 14px 11px 16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(30,31,35,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-align:left;vertical-align:top;}
.ss_badge_logo {flex:none;display:flex;align-items:center;gap:9px;padding-right:14px;border-right:1px solid rgba(255,255,255,.18);}
.ss_badge_plus {color:rgba(255,255,255,.55);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:14px;line-height:1;}
.ss_badge_logo img {display:block;width:auto;max-width:110px;height:20px;object-fit:contain;}
.ss_badge_text {display:flex;flex-direction:column;gap:2px;min-width:0;}
.ss_badge_text strong {color:#fff;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:14px;line-height:1.3;}
.ss_badge_text span {color:rgba(255,255,255,.7);font-size:12.5px;line-height:1.35;}
.ss_badge_check {flex:none;position:relative;width:24px;height:24px;margin-left:6px;border-radius:50%;background:rgba(211,32,32,.2);color:var(--backgrondColorRedlight);}
.ss_badge_check::before {content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.hero_section .ss_badge {margin:0;} /* front page: under the text (the paragraph's margin gives the gap) */
/* ---------- Front page (its own hero): the image right of the title ----------
The title then wraps: "ERP-software voor de bouw & techniek" on two lines, "Onder andere voor" and
the rotating word each on a line of their own (so the layout does not jump when the word changes). */
.ss_home_visual {position:relative;isolation:isolate;min-width:0;pointer-events:none;}
.ss_home_visual::before {content:"";position:absolute;inset:-38% -46% -38% -14%;z-index:-1;background:radial-gradient(closest-side, rgba(211,32,32,.96), rgba(211,32,32,.72) 40%, rgba(211,32,32,.34) 66%, rgba(211,32,32,.1) 86%, transparent 100%);filter:blur(8px);} /* centre a bit right of the image */ /* red glow behind the image, for contrast with the photo */
.ss_home_visual .ss_hero_image {filter:drop-shadow(0 24px 44px rgba(0,0,0,.5));}
.hero_section--visual .right_arrow {display:none;}
@media only screen and (min-width:1024px) {
.hero_section--visual .inner_part {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:center;}
.hero_section--visual .ss_home_visual {margin-right:-20px;} /* a little past the column */
.hero_section--visual .text_wrap {max-width:none;min-width:0;container-type:inline-size;}
.hero_section--visual .hero_heading {width:auto;max-width:100%;}
.hero_section--visual .hero_heading__title {white-space:normal;}
.hero_section--visual .hero_heading__title, .hero_section--visual .hero_heading__subtitle-row {font-size:min(52px, 100cqi / 11.8);} /* "betonboring & zagen" (~11.5em) fits */
.hero_section--visual .hero_heading__subtitle-row {flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;}
.hero_section--visual .hero_bottom {grid-column:1 / -1;}
}
@media only screen and (max-width:1023px) {
.ss_home_visual {display:none;}
.hero_section--visual .right_arrow {display:block;}
}
/* ---------- Centered, without image ---------- */
.ss_hero--center .ss_hero_box::before {background:radial-gradient(860px circle at 50% 120%, rgba(211,32,32,.6), rgba(211,32,32,.24) 38%, rgba(211,32,32,.07) 58%, transparent 72%), radial-gradient(760px 320px at 50% 0%, rgba(211,32,32,.24), transparent 70%), radial-gradient(480px circle at 0% 100%, rgba(211,32,32,.14), transparent 62%);}
.ss_hero--center .ss_hero_box::after {-webkit-mask-image:radial-gradient(ellipse 55% 90% at 50% 60%, #000 15%, transparent 75%);mask-image:radial-gradient(ellipse 55% 90% at 50% 60%, #000 15%, transparent 75%);}
.ss_hero--center .ss_hero_inner {grid-template-columns:minmax(0,1fr);min-height:0;padding:170px 0 96px;text-align:center;}
.ss_hero--center .ss_hero_head, .ss_hero--center .ss_hero_text {max-width:880px;margin:0 auto;}
.ss_hero--center .ss_hero_crumbs ol, .ss_hero--center .ss_hero_buttons {justify-content:center;}
.ss_hero--center .ss_hero_title {max-width:none;}
.ss_hero--center .ss_hero_lead {margin-left:auto;margin-right:auto;}
.ss_hero--center .ss_hero_value {margin-left:auto;margin-right:auto;padding-left:0;}
.ss_hero--center .ss_hero_value::before {display:none;}
.ss_hero--center .ss_hero_title:last-child, .ss_hero_lead:last-child {margin-bottom:0;}
/* ---------- Light version (Theme Setting > Hero > Kleur: Licht, the default) ----------
Near-white (#f5f5f4) with soft red/peach glows and a dotted grid; dark text. Same layout as the dark one. */
.ss_hero--light .ss_hero_box {background:#f5f5f4;color:#111214;}
.ss_hero--light .ss_hero_box::before {background:radial-gradient(760px circle at 74% 56%, rgba(211,32,32,.34), rgba(211,32,32,.13) 38%, transparent 68%), radial-gradient(860px 580px at 100% 0%, rgba(255,150,100,.42), transparent 70%), radial-gradient(660px circle at 0% 100%, rgba(211,32,32,.15), transparent 62%);} /* a big glow behind the image */
.ss_hero--light .ss_hero_box::after {background-image:radial-gradient(rgba(17,18,20,.13) 1px, transparent 1.3px);background-size:22px 22px;}
.ss_hero--light .ss_hero_crumbs ol {color:rgba(17,18,20,.55);}
.ss_hero--light .ss_hero_crumbs li + li::before {color:rgba(17,18,20,.35);}
.ss_hero--light .ss_hero_crumbs a:hover, .ss_hero--light .ss_hero_crumbs [aria-current] {color:#111214;}
.ss_hero--light .ss_hero_label {background:rgba(211,32,32,.1);color:var(--backgrondColorRed);}
.ss_hero--light .ss_hero_label::before {box-shadow:0 0 0 3px rgba(211,32,32,.16);}
.ss_hero--light .ss_hero_title {color:#111214;}
.ss_hero--light .ss_hero_lead {color:rgba(17,18,20,.76);}
.ss_hero--light .ss_hero_value {color:#111214;}
.ss_hero--light .ss_hero_lead a {color:#111214;}
.ss_hero--light .ss_hero_note {color:rgba(17,18,20,.55);}
.ss_hero--light .cta_panel_button--secondary {border-color:rgba(17,18,20,.85);color:#111214;}
.ss_hero--light .cta_panel_button--secondary:hover {border-color:#111214;background:rgba(17,18,20,.05);color:#111214;}
.ss_hero--light .ss_hero_image, .ss_hero--light .ss_hero_crop {filter:drop-shadow(0 24px 44px rgba(17,18,20,.16));}
.ss_hero--light .ss_hero_crop .ss_hero_image {filter:none;}
.ss_hero--light .ss_hero_phone {background:#111214;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 34px 70px rgba(17,18,20,.22);}
.ss_hero--light .ss_hero_phone::before {background:#111214;}
.ss_hero--light .ss_hero_tag {box-shadow:0 16px 36px rgba(17,18,20,.12);}
.ss_hero--light .ss_badge {border-color:rgba(17,18,20,.08);background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 26px rgba(17,18,20,.06);color:#111214;}
.ss_hero--light .ss_badge_logo {border-right-color:rgba(17,18,20,.12);}
.ss_hero--light .ss_badge_plus {color:rgba(17,18,20,.45);}
.ss_hero--light .ss_badge_logo img {filter:brightness(0);opacity:.85;} /* the white logo of the dark hero, in dark */
.ss_hero--light .ss_badge_text strong {color:#111214;}
.ss_hero--light .ss_badge_text span {color:rgba(17,18,20,.6);}
.ss_hero--light .ss_badge_check {background:rgba(211,32,32,.1);color:var(--backgrondColorRed);}
.ss_hero--light.ss_hero--center .ss_hero_box::before {background:radial-gradient(800px circle at 50% 118%, rgba(211,32,32,.3), rgba(211,32,32,.11) 40%, transparent 68%), radial-gradient(900px 440px at 85% 0%, rgba(255,150,100,.4), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.13), transparent 62%);}
@media only screen and (max-width:1279px) {
.ss_hero_inner {column-gap:40px;min-height:620px;padding:140px 0 80px;}
.ss_hero .ss_hero_title {font-size:48px;}
.ss_hero .ss_hero_lead {font-size:18px;}
.ss_hero_tag--1 {left:-24px;}
.ss_hero_tag--2 {right:-20px;}
}
@media only screen and (max-width:1023px) {
.ss_hero_inner {grid-template-columns:minmax(0,1fr);min-height:0;padding:130px 0 64px;}
.ss_hero_inner .ss_hero_visual, .ss_hero_inner--head .ss_hero_visual {grid-column:1;grid-row:auto;margin-top:48px;}
.ss_hero--center .ss_hero_inner {padding:140px 0 72px;}
.ss_hero .ss_hero_title {font-size:42px;}
.ss_hero {--hero-img-h:440px;}
.ss_hero_phone {width:240px;}
.ss_hero_tag--1 {left:-40px;}
.ss_hero_tag--2 {right:-40px;}
}
@media only screen and (max-width:767px) {
.ss_hero--dark .ss_hero_box::before {opacity:.35;} /* the glows are sized for desktop and would fill the whole narrow hero */
.ss_hero_inner {padding:112px 0 48px;}
.ss_hero_inner .ss_hero_visual, .ss_hero_inner--head .ss_hero_visual {margin-top:40px;}
.ss_hero--center .ss_hero_inner {padding:116px 0 56px;}
.ss_hero_crumbs ol {margin-bottom:18px;font-size:13px;}
.ss_hero_label {margin-bottom:18px;font-size:11px;}
.ss_hero .ss_hero_title, .ss_hero--center .ss_hero_title {font-size:36px;line-height:1.08;}
.ss_hero .ss_hero_title br {display:none;}
.ss_hero .ss_hero_value {margin-bottom:16px;font-size:18px;}
.ss_hero .ss_hero_lead {margin-bottom:28px;font-size:17px;}
.ss_hero .ss_hero_lead:last-child {margin-bottom:0;}
.ss_hero_buttons .cta_panel_button {width:100%;min-width:0;}
.ss_hero {--hero-img-h:340px;}
.ss_hero_phone {width:210px;padding:7px;border-radius:36px;}
.ss_hero_phone::before {top:14px;height:17px;}
.ss_hero_phone_screen {border-radius:29px;}
.ss_hero_media--combo .ss_hero_combo_phone {padding:4px;border-radius:18px;}
.ss_hero_media--combo .ss_hero_combo_phone::before {top:7px;height:8px;}
.ss_hero_media--combo .ss_hero_combo_phone .ss_hero_phone_screen {border-radius:14px;}
.ss_hero_tag {padding:9px 12px 9px 9px;gap:9px;}
.ss_hero_tag--1 {left:-28px;}
.ss_hero_tag--2 {right:-28px;}
.ss_hero_tag_icon {width:28px;height:28px;}
.ss_hero_tag_text strong {font-size:13px;}
.ss_hero_tag_text span {font-size:11px;}
}
/* Mobile: the badge without the logo(s), only the text and the check */
@media only screen and (max-width:767px) {
.ss_badge_logo {display:none;}
}
@media only screen and (max-width:600px) {
.ss_badge {gap:12px;padding:10px 12px 10px 14px;}
.ss_badge_text {flex:1;}
.ss_badge_text strong {font-size:13px;}
.ss_badge_text span {font-size:11.5px;}
.ss_badge_check {width:22px;height:22px;margin-left:2px;}
}
@media only screen and (max-width:400px) {
.ss_hero .ss_hero_title, .ss_hero--center .ss_hero_title {font-size:31px;}
.ss_hero_tag--1 {left:-12px;}
.ss_hero_tag--2 {right:-12px;}
}
/* theme-shared-pagination */
/* =============================================================================
shared/pagination.css
Extracted from style.css. Loaded only on: archive-events.php, archive-testimonials.php, archive.php, index.php, page-template/template-functionaliteiten.php, page-template/template-klanten.php, search.php, taxonomy-klanten_category.php
============================================================================= */
.pagination {display: flex;justify-content: center;width: 100%;margin-top: 40px;}
.pagination .wp-pagenavi {display: flex;justify-content: center;gap: 3px;}
.pagination .wp-pagenavi span, .pagination .wp-pagenavi a {min-width: 48px;height: 48px;border: none;padding: 0;margin: 0; border-radius: 10px;text-decoration: none; display: flex;justify-content: center;align-items: center;font-size: 22px; font-family: var(--font-medium);}
.pagination .wp-pagenavi a, .pagination .wp-pagenavi span:not(.current) {font-weight: var(--font-weight-medium);} /* the current page keeps wp-pagenavi's bold */
.pagination .wp-pagenavi a:hover, .pagination .wp-pagenavi .current {background: var(--backgrondColorRed);color: #fff;}
.pagination .wp-pagenavi a.nextpostslink {font-size: 0 !important;background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(https://softwareshaker.com/wp-content/themes/software-shaker/css/shared/%23clip0_80_5807)'%3E%3Cpath d='M8.76641 13.7118C8.24959 13.6908 7.84759 13.2548 7.86856 12.738C7.87726 12.5233 7.95949 12.3182 8.10142 12.157L12.7843 7.52098L8.10145 2.88495C7.73832 2.51966 7.73832 1.92968 8.10145 1.56438C8.4657 1.19714 9.0587 1.19471 9.42597 1.55895C9.42779 1.56074 9.42961 1.56256 9.4314 1.56438L14.7231 6.85605C15.0903 7.22029 15.0927 7.8133 14.7285 8.18057C14.7267 8.18239 14.7249 8.18421 14.7231 8.186L9.43137 13.4776C9.24869 13.6393 9.0101 13.7233 8.76641 13.7118Z' fill='%23353535'/%3E%3Cpath d='M14.0486 8.41077H0.936586C0.419331 8.41077 0 7.99144 0 7.47418C0 6.95693 0.419331 6.5376 0.936586 6.5376H14.0486C14.5659 6.5376 14.9852 6.95693 14.9852 7.47418C14.9852 7.99144 14.5659 8.41077 14.0486 8.41077Z' fill='%23353535'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_80_5807'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: 15px !important;}
.pagination .wp-pagenavi a.nextpostslink:hover {font-size: 0 !important;background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(https://softwareshaker.com/wp-content/themes/software-shaker/css/shared/%23clip0_80_5807)'%3E%3Cpath d='M8.76641 13.7118C8.24959 13.6908 7.84759 13.2548 7.86856 12.738C7.87726 12.5233 7.95949 12.3182 8.10142 12.157L12.7843 7.52098L8.10145 2.88495C7.73832 2.51966 7.73832 1.92968 8.10145 1.56438C8.4657 1.19714 9.0587 1.19471 9.42597 1.55895C9.42779 1.56074 9.42961 1.56256 9.4314 1.56438L14.7231 6.85605C15.0903 7.22029 15.0927 7.8133 14.7285 8.18057C14.7267 8.18239 14.7249 8.18421 14.7231 8.186L9.43137 13.4776C9.24869 13.6393 9.0101 13.7233 8.76641 13.7118Z' fill='%23ffffff'/%3E%3Cpath d='M14.0486 8.41077H0.936586C0.419331 8.41077 0 7.99144 0 7.47418C0 6.95693 0.419331 6.5376 0.936586 6.5376H14.0486C14.5659 6.5376 14.9852 6.95693 14.9852 7.47418C14.9852 7.99144 14.5659 8.41077 14.0486 8.41077Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_80_5807'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: 15px !important;}
.pagination .wp-pagenavi a.previouspostslink {font-size: 0 !important;background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(https://softwareshaker.com/wp-content/themes/software-shaker/css/shared/%23clip0_80_5807)'%3E%3Cpath d='M8.76641 13.7118C8.24959 13.6908 7.84759 13.2548 7.86856 12.738C7.87726 12.5233 7.95949 12.3182 8.10142 12.157L12.7843 7.52098L8.10145 2.88495C7.73832 2.51966 7.73832 1.92968 8.10145 1.56438C8.4657 1.19714 9.0587 1.19471 9.42597 1.55895C9.42779 1.56074 9.42961 1.56256 9.4314 1.56438L14.7231 6.85605C15.0903 7.22029 15.0927 7.8133 14.7285 8.18057C14.7267 8.18239 14.7249 8.18421 14.7231 8.186L9.43137 13.4776C9.24869 13.6393 9.0101 13.7233 8.76641 13.7118Z' fill='%23353535'/%3E%3Cpath d='M14.0486 8.41077H0.936586C0.419331 8.41077 0 7.99144 0 7.47418C0 6.95693 0.419331 6.5376 0.936586 6.5376H14.0486C14.5659 6.5376 14.9852 6.95693 14.9852 7.47418C14.9852 7.99144 14.5659 8.41077 14.0486 8.41077Z' fill='%23353535'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_80_5807'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: 15px !important;transform: rotate(180deg);}
.pagination .wp-pagenavi a.previouspostslink:hover {font-size: 0 !important;background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(https://softwareshaker.com/wp-content/themes/software-shaker/css/shared/%23clip0_80_5807)'%3E%3Cpath d='M8.76641 13.7118C8.24959 13.6908 7.84759 13.2548 7.86856 12.738C7.87726 12.5233 7.95949 12.3182 8.10142 12.157L12.7843 7.52098L8.10145 2.88495C7.73832 2.51966 7.73832 1.92968 8.10145 1.56438C8.4657 1.19714 9.0587 1.19471 9.42597 1.55895C9.42779 1.56074 9.42961 1.56256 9.4314 1.56438L14.7231 6.85605C15.0903 7.22029 15.0927 7.8133 14.7285 8.18057C14.7267 8.18239 14.7249 8.18421 14.7231 8.186L9.43137 13.4776C9.24869 13.6393 9.0101 13.7233 8.76641 13.7118Z' fill='%23ffffff'/%3E%3Cpath d='M14.0486 8.41077H0.936586C0.419331 8.41077 0 7.99144 0 7.47418C0 6.95693 0.419331 6.5376 0.936586 6.5376H14.0486C14.5659 6.5376 14.9852 6.95693 14.9852 7.47418C14.9852 7.99144 14.5659 8.41077 14.0486 8.41077Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_80_5807'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: 15px !important;transform: rotate(180deg);}
@media only screen and (max-width:767px) {
.pagination .wp-pagenavi span, .pagination .wp-pagenavi a {min-width: 30px;height: 30px;font-size: 16px;border-radius: 3px;}
.pagination .wp-pagenavi a.previouspostslink {background-size: 12px !important;}
.pagination .wp-pagenavi a.nextpostslink {background-size: 12px !important;}
}
/* theme-shared-two-columns */
/* =============================================================================
shared/two-columns.css
Extracted from style.css. Loaded only on: block two_col_text, page-template/template-faq.php, page-template/template-klanten.php, taxonomy-klanten_category.php
============================================================================= */
.two_col_section .outer_part {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.two_col_section .left_text {width: 49%;}
.two_col_section .left_text .wrap {max-width: 480px;}
.two_col_section .left_text h2 {line-height: 1.15;}
.two_col_section .right_text h3 {font-size: 18px; margin-bottom: 8px;}
.two_col_section .right_text {width: 49%;}
.two_col_section .right_text .wrap {max-width: 566px;margin-left: auto;padding-left: 34px;border-left: 2px solid var(--backgrondColorGray);}
.two_col_section .right_text .wrap p:first-child {font-size: 18px;line-height: 1.6;}
@media (min-width:1024px) {
.two_col_section .left_text {position: -webkit-sticky; position: sticky; top: 110px; align-self: flex-start;}
}
@media (max-width:767px) {
.two_col_section .right_text .wrap {padding-left: 20px;}
.two_col_section .right_text .wrap p:first-child {font-size: 16px;}
}
@media (max-width: 1023px) {
.two_col_section {padding: 50px 0 0 0;}
.two_col_section .left_text,
.two_col_section .right_text {width: 100%;}
.two_col_section .left_text {margin-bottom: 30px;}
.two_col_section .left_text .wrap {max-width: 100%;}
.two_col_section .right_text .wrap {max-width: 100%; margin-left: 0;}
}
/* content-select-review */
/* =============================================================================
Block: select_review (partial/content-select_review.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.slider_section.review_section {padding: 0;background: #fff;}
.review-cards .review-card {transform: scale(1);transition: 0.4s; background: #fff;padding: 28px 35px 44px;border-radius: 10px;width: 705px;position: relative;overflow: hidden;border: 1px solid var(--backgrondColorGray);}
.review-cards .review-card .star-rating {position: absolute;right: 20px;top: 27px;}
.review-card .name {max-width: 350px;}
.review-card .name p {font-size: 16px;margin-bottom: 25px;}
.review-card .name p strong {color: var(--textColortwo);font-weight: 700;}
.review-card .text p {font-size: 18px;line-height: 28px;color: var(--textColortwo);}
.star-rating {display: inline-block;position: relative;font-size: 30px;line-height: 1;width: 148px; height: 28px;}
.star-rating span {position: absolute;left: 0;top: 0;height: 100%; width: calc(var(--rating) / 5 * 100%);overflow: hidden;}
.star-rating span::before {content: "";display: inline-block; width: 148px; height: inherit;background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain;}
.star-rating::before {content: "";display: inline-block; width: inherit; height: inherit;background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain;}
.review-cards .review-card.swiper-slide-prev {transform: scale(0.9);}
.review-cards .review-card.swiper-slide-next {transform: scale(0.9);}
.review_section .wrapper_large::before {background: linear-gradient(88deg, #fff 28.6%, rgba(229, 227, 220, 0.00) 98.21%);}
.review_section .wrapper_large::after {background: linear-gradient(-88deg, #fff 28.6%, rgba(229, 227, 220, 0.00) 98.21%);}
@media only screen and (max-width:1279px) {
.review-cards .review-card {width: 600px;}
.review-card .text p {font-size: 16px;line-height: 25px;}
}
@media only screen and (max-width:1023px) {
.review-cards .review-card {max-width: 500px;}
}
@media only screen and (max-width:767px) {
.review-cards .review-card {width: 400px;}
.review-card .name {width: 100%;max-width: 100%;text-align: center;}
.review-cards .review-card .star-rating {position: relative; right: unset;top: 0;text-align: center;left: 50%; transform: translateX(-50%);margin-bottom: 15px;}
.review-card .name p {margin-bottom: 5px;}
.review-cards .review-card {padding: 28px 25px 40px;}
}
@media only screen and (max-width:600px) {
.review-cards .review-card {width: 240px;}
.review-card .text p {font-size: 14px;line-height: 20px;}
.review-cards .review-card {padding: 18px;}
.review-card .name p {font-size: 14px;margin-bottom: 0;}
.star-rating, .star-rating span::before {width: 104px;}
.slider_section.review_section .wrapper_large::before, .slider_section.review_section .wrapper_large::after {width: 70px;}
.slider_section.review_section .wrapper_large::before {left: 0;}
.slider_section.review_section .wrapper_large::after {right: 0;}
}
/* theme-shared-sliders */
/* =============================================================================
shared/sliders.css
Extracted from style.css. Loaded only on: block select_category_functionaliteiten, block select_functionaliteiten, block select_review
============================================================================= */
span.arrow_black {display: inline-block; margin-left: 8px; width: 13px;height: 13px;background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0784 5.84475L7.35779 1.12415C7.13573 0.902087 6.77497 0.9017 6.55338 1.12328C6.3318 1.34487 6.33219 1.70563 6.55425 1.92769L10.3012 5.67464L0.805546 5.66565C0.491096 5.66531 0.236641 5.91977 0.236979 6.23422C0.237318 6.54867 0.49232 6.80367 0.80677 6.80401L10.3024 6.813L6.56352 10.5519C6.34194 10.7735 6.34232 11.1343 6.56438 11.3563C6.78644 11.5784 7.14721 11.5788 7.36879 11.3572L12.078 6.64793C12.3008 6.42757 12.3004 6.06681 12.0784 5.84475Z' fill='%23353535'/%3E%3C/svg%3E") no-repeat center center;background-size: contain;}
.wrapper_large {max-width: 1440px;padding: 0;position: relative;margin: 0 auto;overflow: hidden;}
.wrapper_large::before {pointer-events: none; content: "";position: absolute;left: 0;top: 0;width: 421px;background: linear-gradient(88deg, var(--backgrondColorGray) 28.6%, rgba(229, 227, 220, 0.00) 98.21%);z-index: 2;height: 100%;}
.wrapper_large::after {pointer-events: none;content: "";position: absolute;right: 0;top: 0;width: 421px;background: linear-gradient(-88deg, var(--backgrondColorGray) 28.6%, rgba(229, 227, 220, 0.00) 98.21%);z-index: 2;height: 100%;}
.swiperPrev {position: absolute;left: 70px;top: 50%;transform: translateY(-50%);z-index: 3;cursor: pointer;}
.swiperNext {position: absolute;right: 70px;top: 50%;transform: translateY(-50%);z-index: 3;cursor: pointer;}
.swiperPrev:hover svg rect {fill: var(--backgrondColorRed);stroke: var(--backgrondColorRed);}
.swiperNext:hover svg rect {fill: var(--backgrondColorRed);stroke: var(--backgrondColorRed);}
.card_box_item:hover span.arrow_black {background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0784 5.84475L7.35779 1.12415C7.13573 0.902087 6.77497 0.9017 6.55338 1.12328C6.3318 1.34487 6.33219 1.70563 6.55425 1.92769L10.3012 5.67464L0.805546 5.66565C0.491096 5.66531 0.236641 5.91977 0.236979 6.23422C0.237318 6.54867 0.49232 6.80367 0.80677 6.80401L10.3024 6.813L6.56352 10.5519C6.34194 10.7735 6.34232 11.1343 6.56438 11.3563C6.78644 11.5784 7.14721 11.5788 7.36879 11.3572L12.078 6.64793C12.3008 6.42757 12.3004 6.06681 12.0784 5.84475Z' fill='%23fb4545'/%3E%3C/svg%3E") no-repeat center center;background-size: contain;}
.single-functionaliteiten .slider_section.layout_three .card_box_item h5 .arrow_black, .single-functionaliteiten .slider_section.layout_three .card_box_item .h5 .arrow_black {display: none;}
@media only screen and (max-width:1279px) {
.swiperPrev {left: 30px;}
.swiperNext {right: 30px;}
.wrapper_large::before, .wrapper_large::after {width: 240px;}
}
@media only screen and (max-width:1023px) {
.swiperPrev {left: 20px;}
.swiperNext {right: 20px;}
.wrapper_large::before, .wrapper_large::after {width: 170px;}
}
@media only screen and (max-width:600px) {
.wrapper_large::before, .wrapper_large::after {width: 148px;}
.wrapper_large::before {left: -40px;}
.wrapper_large::after {right: -40px;}
.swiperPrev svg, .swiperNext svg {width: 30px;height: 30px;}
.swiperPrev {left: 15px;}
.swiperNext {right: 15px;}
span.arrow_black {width: 13px;height: 11px;margin-right: 5px;background-size: 13px;min-width: 13px;}
}
.slider_section .wrapper_large::before,.slider_section .wrapper_large::after {width:300px;}
@media only screen and (max-width:1023px) {
.slider_section .wrapper_large::before,.slider_section .wrapper_large::after {width:140px;}
}
@media only screen and (max-width:600px) {
.slider_section .wrapper_large::before,.slider_section .wrapper_large::after {width:50px;}
}
/* theme-shared-our-partners */
/* =============================================================================
shared/our-partners.css
Extracted from style.css. Loaded only on: block klanten, page-template/template-klanten.php, taxonomy-klanten_category.php
============================================================================= */
.our_partner_section .outer_part {display: flex;flex-wrap: wrap;position: relative;}
.our_partner_section .left_text {width: 406px;padding-right: 56px;}
.our_partner_section .right_logos {width: calc(100% - 406px);display: flex;flex-wrap: wrap;gap: 0 28px;}
.our_partner_section .right_logos .logo_card {display: grid; width: calc(20% - 23px);text-align: center; justify-content: center; align-items: center;}
.our_partner_section .right_logos.full {width: 100%;gap: 0 55px;}
.our_partner_section .right_logos.full .logo_card {width: calc(20% - 44px); display: flex;align-items: center;justify-content: center;}
.our_partner_section .right_logos.full .logo_card img {max-width: 100%;max-height: 100%;object-fit: contain;}
/* Referenties: boxes of the same height; the width of each logo is set in software_shaker_klant_logo_img() (inc/helpers.php) */
.our_partner_section:not(.klanten_block) .right_logos.full .logo_card {height: 120px;}
.our_partner_section:not(.klanten_block) .right_logos.full .logo_card img {width: auto;height: auto;max-height: 70px;}
@media only screen and (max-width:1023px) {
.our_partner_section .right_logos .logo_card {width: calc(25% - 21px);}
.our_partner_section .right_logos.full .logo_card {width: calc(25% - 42px);}
.our_partner_section .left_text {width: 360px;padding-right: 30px;}
.our_partner_section .right_logos {width: calc(100% - 360px);}
}
@media only screen and (max-width:767px) {
.our_partner_section .left_text {width: 100%;padding-right: 0;margin-bottom: 40px;}
.our_partner_section .right_logos {width: 100%;}
.our_partner_section .left_text .btn_one {display: none;}
.our_partner_section .btn_one.desktop_hidden {display: inline-flex;margin-top: 30px;}
}
@media only screen and (max-width:600px) {
.our_partner_section .right_logos {gap: 0 16px;}
.our_partner_section .right_logos .logo_card {width: calc(25% - 12px);}
.our_partner_section .left_text {margin-bottom: 10px;}
.our_partner_section .right_logos.full {gap: 0 20px;}
.our_partner_section .right_logos.full .logo_card {width: calc(33.33% - 14px);}
.our_partner_section:not(.klanten_block) .right_logos.full .logo_card {height: 92px;}
.our_partner_section:not(.klanten_block) .right_logos.full .logo_card img {max-height: 52px;}
}
/* theme-shared-loader */
/* =============================================================================
shared/loader.css
Extracted from style.css. Loaded only on: page-template/template-functionaliteiten.php, page-template/template-klanten.php
============================================================================= */
.loader {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 30px 0;position: fixed;z-index: 2; left: 0;top: 0;width: 100%;height: 100%;background: rgba(255, 255, 255,0.9);}
.spinner {border: 4px solid rgba(0, 0, 0, 0.1);border-left-color: var(--backgrondColorRed); /* Spinner color */border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;margin-bottom: 10px;}
.loader p {font-size: 14px;color: #333;margin: 0;}
/* theme-shared-filter-blog */
/* =============================================================================
shared/filter-blog.css
Extracted from style.css. Loaded only on: archive.php, index.php, page-template/template-klanten.php, taxonomy-klanten_category.php
============================================================================= */
.all_news .pagination {margin-top: 60px;}
.filter_blog .wrapper {max-width: 1024px;}
.filter_blog ul {padding-left: 0;margin-bottom: 0;display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;}
.filter_blog ul li {list-style-type: none;display: inline-block;}
.filter_blog ul li a {display:block;text-decoration: none;border: 1px solid #979797;color: #979797;border-radius: 101px;padding: 16px 17px;transition: 0.4s;}
.filter_blog ul li.active a, .filter_blog ul li a:hover {color:var(--backgrondColorBlack);border-color: var(--backgrondColorBlack);}
@media only screen and (max-width:767px) {
.filter_blog ul {flex-wrap: nowrap;overflow: auto;justify-content: flex-start;padding-bottom: 15px;}
.filter_blog ul li a {white-space: nowrap;padding: 10px 15px;font-size: 12px;min-width: 80px;text-align: center;}
}
@media only screen and (max-width:600px) {
.filter_blog ul li a {padding: 11px 12px;line-height: 1;}
.filter_blog {margin-bottom: 30px !important;}
.filter_blog .wrapper {padding: 0;}
.filter_blog ul li:first-child {padding-left: 30px;}
}
/* content-cta */
/* ---------- Call to Action ---------- */
.cta_section{text-align:center;}
.cta_section:not(.cta_panel_section) h2{margin-bottom:40px;line-height:1.1;}
.cta_section:not(.cta_panel_section) .outer_part{max-width:900px;margin:0 auto;text-align:center;}
.cta_panel_section{text-align:left;}
.cta_panel{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr);gap:70px;align-items:center;overflow:hidden;padding:52px 64px;border-radius:24px;background:#111214;box-shadow:0 18px 45px rgba(53,53,53,.12);color:#fff;}
/* Same background as the dark hero (global/hero.css .ss_hero_box): red glows and a faint grid, mirrored (glow on the left) */
.cta_panel::before, .cta_panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;transform:scaleX(-1);} /* own rounding: overflow:hidden doesn't clip the transformed layers at the corners */
.cta_panel::before{opacity:.4;background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.cta_panel::after{background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.cta_panel_content{position:relative;z-index:1;max-width:700px;}
.cta_panel_label{display:inline-block;padding:5px 12px;border-radius:999px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.14);color:#fff;margin-bottom:14px;}
.cta_panel h2{margin:0 0 18px;color:#fff;font-size:38px;line-height:1.08;letter-spacing:-.025em;}
.cta_panel_text{max-width:670px;color:rgba(255,255,255,.84);}
.cta_panel_text p{margin:0;color:inherit;font-size:16px;line-height:1.75;}
.cta_panel_note{min-width:230px;text-align:center;white-space:nowrap;color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1.5;}
.cta_panel_actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;} /* buttons and the note under them centred on each other */
.cta_panel_button{min-width:230px;justify-content:center;}
.cta_panel_button .link-effect{justify-content:center;}
.cta_panel_button--secondary{background:transparent;border-color:rgba(255,255,255,.7);}
.cta_panel_button--secondary:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
@media(max-width:900px){
.cta_panel{grid-template-columns:1fr;gap:32px;padding:46px 44px;}
.cta_panel_actions{flex-direction:row;flex-wrap:wrap;}
.cta_panel_note{flex-basis:100%;text-align:left;} /* its own line under the buttons, which sit side by side here */
}
@media(max-width:600px){
.cta_section:not(.cta_panel_section) h2{margin-bottom:20px;}
.cta_section:not(.cta_panel_section) h2 br{display:none;}
.cta_panel{gap:28px;padding:34px 26px;border-radius:18px;}
.cta_panel::before{opacity:.15;} /* like the hero on mobile: the glows are sized for desktop */
.cta_panel_label{font-size:10px;}
.cta_panel h2{font-size:26px;line-height:1.12;}
.cta_panel_text p{font-size:14px;line-height:1.6;}
.cta_panel_note{font-size:12px;text-align:center;white-space:normal;}
.cta_panel_actions{flex-direction:column;align-items:stretch;width:100%;}
.cta_panel_button{width:100%;min-width:0;}
}
/* Optional phone line under the buttons */
.cta_panel_phone {margin:4px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.8);}
.cta_panel_phone a {color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.cta_panel_phone a:hover {color:#fff;text-decoration:none;}
/* theme-font-inter */
/* =============================================================================
Global: global/font-inter.css
Loaded only when Theme Setting > Lettertype is set to Inter (see inc/fonts.php).
Inter is self-hosted (SIL Open Font License), one variable file per subset.
============================================================================= */
/* latin-ext */
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://softwareshaker.com/wp-content/themes/software-shaker/css/global/../../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://softwareshaker.com/wp-content/themes/software-shaker/css/global/../../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
--font-sans : "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-regular : var(--font-sans);
--font-medium : var(--font-sans);
--font-semibold : var(--font-sans);
--font-bold : var(--font-sans);
--font-weight-regular : 400;
--font-weight-medium : 500;
--font-weight-semibold : 600;
--font-weight-bold : 700;
}