/* lite-yt-embed */
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
}
/* gradient */
lite-youtube::before {
content: '';
display: block;
position: absolute;
top: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
background-position: top;
background-repeat: repeat-x;
height: 60px;
padding-bottom: 50px;
width: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
/* responsive iframe with a 16:9 aspect ratio
thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
content: "";
display: block;
padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
/* play button */
lite-youtube > .lty-playbtn {
display: block;
width: 68px;
height: 48px;
position: absolute;
cursor: pointer;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
z-index: 1;
background-color: transparent;
/* YT's actual play button svg */
background-image: url('data:image/svg+xml;utf8,');
filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
border: none;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
filter: none;
}
/* Post-click styles */
lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* 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;}
p a:hover{color:var(--backgrondColorRed);}
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);}
/* theme-shared-video-wrapper */
/* =============================================================================
shared/video-wrapper.css
Extracted from style.css. Loaded only on: block software_grid, block text_and_image
============================================================================= */
.video_wrapper_full {border-radius: 5px;}
.video_wrapper_full video, .video_wrapper_full iframe {aspect-ratio: 600/380;position: absolute;left: 0;top: 0;width: 100%;height: auto;object-fit: cover;z-index: -1;opacity: 0;visibility: hidden;pointer-events: none;}
.video_wrapper_full.videoWrapperActive video, .video_wrapper_full.videoWrapperActive iframe {z-index: 1;opacity: 1;visibility: visible;pointer-events: all;}
.video_wrapper_full, .video_wrapper_full * {pointer-events:auto;}
.video_wrapper_full {position:relative;z-index:6;}
.video_wrapper_full iframe {border-radius:5px!important;}
.two_card_grid .video_wrapper_full video, .two_card_grid .video_wrapper_full iframe {aspect-ratio: 590/346;}
/* 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:.7;} /* 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:.5;}
.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:.25;} /* 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:.2;} /* 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;}
}
/* content-text-and-image */
/* =============================================================================
Block: text_and_image (partial/content-text_and_image.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.text_image_section .outer_part {display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-around;}
.text_image_section .outer_part.flex_center {align-items: center;}
.text_image_section .left_part {width: 50%;padding-right: 20px;max-width: 570px;position: relative;z-index: 1;}
.text_image_section .left_part p {margin-bottom: 22px;}
.text_image_section .right_part {width: 50%;position: sticky;top: 20px;transition: 0.4s !important;}
.scroll_top .text_image_section .right_part {top: 90px;}
.text_image_section .right_part img {display: block;border-radius: 5px;}
.text_image_section h6, .text_image_section .h6 {margin-bottom: 8px;}
.text_image_section h2 {margin-bottom: 22px;}
.text_image_section + div {position: relative;z-index: 2;}
.text_image_section.opposite .left_part {order: 2;padding-right: 0;padding-left: 20px;margin-left: auto;}
.text_image_section .flex_center {gap: 0;}
.text_image_section .laptop_icon {position: absolute;right: 0;bottom: -35px;width: 50%;max-width: 329px;z-index: 1;}
.videoWrapperActive .laptop_icon, .videoWrapperActive .mobile_icon {opacity: 0;pointer-events: none;visibility: hidden;}
.text_image_section .mobile_icon {position: absolute;right: 30px;bottom: -12%;width: 25%;max-width: 145px;z-index: 1;}
.media_image {width:100%;height:100%;display:block;z-index:1;}
.media_video {position:relative;height:100%;z-index:7;}
.media_video iframe, .media_video video {height:400px;display:block;position:relative;z-index:8;pointer-events:auto;}
.video_wrapper_full .media_video video {width:100%;height:100%;object-fit:cover;border-radius:10px;z-index:5;}
.video_wrapper_full .media_video, .video_wrapper_full .media_video video, .video_wrapper_full .media_video iframe {opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
.right_part.video_wrapper_full .image_box {z-index:15;}
.right_part .media_video iframe {opacity:1!important;visibility:visible!important;}
.text_image_section::before, .text_image_section::after, .mobile_icon, .mobile_icon * {pointer-events:none!important;}
.media_video iframe, .media_video video {width:100%;height:100%;}
.right_part .image_box {height:unset;}
.media_video {width:100%;}
.media_video lite-youtube {display:block;
width:100%;
aspect-ratio:16/9;
position:relative;}
.media_video lite-youtube iframe {width:100%;
height:100%;
border:0;}
.image_box {display:flex;justify-content:center;align-items:center;}
.media_image {text-align:center;}
.media_image img {display:block;margin:0 auto;}
.text_image_section h3 {font-size: 18px; margin-bottom: 8px;}
.gif-centered {display:block;margin-left:auto;margin-right:auto}
/* Image (or video) with a light red block behind the bottom corner on the text side */
.text_image_section .media_frame {position:relative;isolation:isolate;display:block;width:fit-content;max-width:100%;margin:0 auto;}
.text_image_section .right_part .media_frame > img {margin:0;border-radius:14px;}
.text_image_section .media_frame::before, .text_image_section .media_video::before {content:"";position:absolute;z-index:-1;left:-20px;bottom:-20px;width:calc(60% + 20px);height:calc(60% + 20px);border-radius:16px;background:#F9DFDF;pointer-events:none;}
.text_image_section.opposite .media_frame::before, .text_image_section.opposite .media_video::before {left:auto;right:-20px;}
.text_image_section .media_video lite-youtube, .text_image_section .media_video video {overflow:hidden;border-radius:14px;}
@media (min-width:1024px) {
.video_wrapper_full .image_box {padding-top:0;}
.text_image_section .video_wrapper_full .image_box {position:relative;width:100%;min-height:0px;}
.text_image_section .right_part.video_wrapper_full {position:sticky;top:120px;align-self:flex-start;}
}
@media only screen and (max-width:1279px) {
.text_image_section .left_part {padding-right: 20px;}
.text_image_section.opposite .left_part {padding-left: 20px;}
}
@media (max-width:1024px) {
.text_image_section .video_wrapper_full .image_box {position:relative;width:100%;min-height:0px;}
}
@media only screen and (max-width:1023px) {
.text_image_section .left_part {width: 100%;padding-right: 0;max-width: 100%;order: 2;}
.text_image_section .right_part {width: 100% ; padding-left: 0;margin-bottom: 40px;}
.text_image_section .right_part {position: relative;top: 0 !important;}
.text_image_section .right_part img {max-height: 400px;}
.text_image_section .right_part .media_image img {width: auto;}
.text_image_section.opposite .left_part {padding-left: 0;}
.text_image_section.mobile_opp .right_part {order: 2 !important;margin-bottom: 0;margin-top: 40px;}
.text_image_section.mobile_opp .left_part {order: 1 !important;}
}
@media only screen and (max-width:767px) {
.text_image_section .laptop_icon {max-width: 250px;}
.text_image_section .left_part {order:1 !important;}
.text_image_section .right_part {order:2 !important;margin-top:40px;margin-bottom:0;}
}
@media only screen and (max-width:600px) {
.text_image_section .right_part {margin-bottom: 26px;}
.text_image_section.mobile_opp .right_part {margin-top: 40px;}
.text_image_section .laptop_icon {width: 50%;}
.text_image_section .laptop_icon {bottom: -16px;}
.text_image_section .media_frame::before, .text_image_section .media_video::before {left:-12px;bottom:-12px;width:calc(60% + 12px);height:calc(60% + 12px);border-radius:12px;}
.text_image_section.opposite .media_frame::before, .text_image_section.opposite .media_video::before {left:auto;right:-12px;}
}
/* Desktop: two equal columns with a fixed gap; image and text start at the same height */
@media(min-width:1024px) {
.text_image_section .outer_part {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:96px;align-items:start;}
.text_image_section .outer_part.flex_center {align-items:center;}
.text_image_section .left_part, .text_image_section.opposite .left_part {width:auto;max-width:none;margin:0;padding:0;}
.text_image_section .right_part {width:auto;}
.text_image_section .outer_part .right_part {margin-top:var(--image-offset, 0px);margin-bottom:var(--image-offset, 0px);} /* same space above and below, also where the sticky image stops (with "centreren" on too) */
}
@media (min-width:1024px) and (max-width:1279px) {
.text_image_section .outer_part {column-gap:64px;}
}
/* =============================================================================
Text + image with accordion items: cards (partial/text-image-cards.php)
Intro on top (title left, text right), then the first item as a large card
(dark head + block image/video) with the other items as small cards next to it.
============================================================================= */
/* Eyebrow above the title; the intro text starts on the same line as the title */
.text_image_cards .ti_cards_head {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:96px;align-items:start;margin-bottom:48px;}
.text_image_cards .ti_cards_head_title {display:contents;}
.text_image_cards .ti_cards_head h6, .text_image_cards .ti_cards_head .h6 {grid-column:1;grid-row:1;justify-self:start;margin-bottom:14px;}
.text_image_cards .ti_cards_head h2 {grid-column:1;grid-row:2;margin-bottom:0;}
.text_image_cards .ti_cards_head_text {grid-column:2;grid-row:2;}
.text_image_cards .ti_cards_head_text {font-size:16px;line-height:1.65;color:#5f5f5f;}
.text_image_cards .ti_cards_head_text p {margin:0 0 16px;}
.text_image_cards .ti_cards_head_text > :last-child {margin-bottom:0;}
.text_image_cards .ti_cards_head_text .btn_one {margin-top:8px;}
.text_image_cards .ti_cards_head--solo {grid-template-columns:minmax(0,1fr);} /* no text next to the title: the title may run wider */
.text_image_cards .ti_cards_head--solo h2 {max-width:860px;}
.text_image_cards .ti_cards {--small:3;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-auto-rows:1fr;gap:16px;}
.text_image_cards .ti_card {position:relative;display:flex;align-items:flex-start;gap:16px;min-width:0;padding:24px;background:#fff;border:1px solid #e7e7e7;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.05);transition:box-shadow .3s ease,transform .3s ease;}
.text_image_cards .ti_card--link:hover {box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px);}
.text_image_cards .ti_card--link:has(.ti_card_title a:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.text_image_cards .ti_card_body {flex:1;min-width:0;}
.text_image_cards h3.ti_card_title {margin:0 0 8px;font-size:17px;line-height:1.3;color:var(--textColor);transition:color .3s ease;}
.text_image_cards .ti_card_title a {color:inherit;text-decoration:none;}
.text_image_cards .ti_card_title a:focus-visible {outline:none;}
.text_image_cards .ti_card_title a::after {content:"";position:absolute;inset:0;z-index:0;border-radius:14px;}
.text_image_cards .ti_card--link:hover .ti_card_title {color:var(--backgrondColorRed);}
.text_image_cards .ti_card_text p {margin:0;font-size:14px;line-height:1.6;color:#5f5f5f;}
.text_image_cards .ti_card_text p + p {margin-top:8px;}
.text_image_cards .ti_card_text a {position:relative;z-index:1;color:var(--backgrondColorRed);}
.text_image_cards .ti_card_arrow {display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-top:-3px;border-radius:50%;background:#FBE9E9;color:var(--backgrondColorRed);transition:background-color .25s ease,color .25s ease,transform .25s ease;}
.text_image_cards .ti_card_arrow svg, .text_image_cards .ti_card_link svg {display:block;flex:none;}
.text_image_cards .ti_card--link:hover .ti_card_arrow {background:var(--backgrondColorRed);color:#fff;transform:translateX(2px);}
/* "Bekijk video": opens the video popup (js/global.js) */
.text_image_cards .ti_card_video {position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1;color:var(--backgrondColorRed);}
.text_image_cards .ti_card_video svg {display:block;flex:none;}
.text_image_cards .ti_card_video .arrow {transition:transform .2s ease;}
.text_image_cards .ti_card_video:hover .arrow {transform:translateX(3px);}
/* Large card: spans the rows of the small cards */
.text_image_cards .ti_card--main {grid-row:1 / span var(--small);flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;isolation:isolate;border-color:transparent;background:#111214;color:#fff;}
/* Same background as the dark hero (global/hero.css .ss_hero_box): red glows and a faint grid, under the content */
.text_image_cards .ti_card--main::before, .text_image_cards .ti_card--main::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.text_image_cards .ti_card--main::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%);}
.text_image_cards .ti_card--main::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%);}
.text_image_cards .ti_card--solo {grid-column:1 / -1;}
.text_image_cards .ti_card_head {padding:34px 36px 28px;}
.text_image_cards .ti_card--main h3.ti_card_title {margin-bottom:12px;font-size:28px;line-height:1.15;color:#fff;}
.text_image_cards .ti_card--main .ti_card_text p {font-size:15px;line-height:1.65;color:rgba(255,255,255,.8);}
.text_image_cards .ti_card--main .ti_card_text a {color:#fff;}
.text_image_cards .ti_card_actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px;}
.text_image_cards .ti_card_link {display:inline-flex;align-items:center;gap:8px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:14px;line-height:1;color:#fff;text-decoration:none;}
.text_image_cards .ti_card_link svg {transition:transform .2s ease;}
.text_image_cards .ti_card_link:hover {color:#fff;}
.text_image_cards .ti_card_link:hover svg {transform:translateX(3px);}
.text_image_cards .ti_card--main .ti_card_video {margin-top:0;color:rgba(255,255,255,.8);}
.text_image_cards .ti_card--main .ti_card_video:hover {color:#fff;}
.text_image_cards .ti_card_media {flex:1;display:flex;align-items:center;justify-content:center;padding:0 36px 36px;}
.text_image_cards .ti_card_media img {display:block;width:auto;max-width:100%;height:auto;max-height:420px;margin:0 auto;border-radius:0;}
.text_image_cards .ti_card_media lite-youtube, .text_image_cards .ti_card_media video {display:block;width:100%;max-width:none;overflow:hidden;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.28);}
/* Large card with a link: clickable as a whole (the video stays playable), arrow top right */
.text_image_cards .ti_card--main .ti_card_arrow {position:absolute;top:30px;right:30px;width:32px;height:32px;margin:0;background:rgba(255,255,255,.14);color:#fff;}
.text_image_cards .ti_card--main.ti_card--link .ti_card_title {padding-right:48px;}
.text_image_cards .ti_card--main.ti_card--link:hover .ti_card_title {color:#fff;}
.text_image_cards .ti_card--main.ti_card--link:hover .ti_card_arrow {background:#fff;color:var(--backgrondColorRed);}
.text_image_cards .ti_card--main.ti_card--link:hover .ti_card_link svg {transform:translateX(3px);}
.text_image_cards .ti_card--main .ti_card_link::after {content:"";position:absolute;inset:0;z-index:1;border-radius:14px;}
.text_image_cards .ti_card--main .ti_card_link:focus-visible {outline:none;}
.text_image_cards .ti_card--link:has(.ti_card_link:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.text_image_cards .ti_card--main .ti_card_media, .text_image_cards .ti_card--main .ti_card_video {position:relative;z-index:2;}
@media only screen and (max-width:1279px) {
.text_image_cards .ti_cards_head {column-gap:64px;}
}
@media only screen and (max-width:1023px) {
.text_image_cards .ti_cards_head {grid-template-columns:minmax(0,1fr);margin-bottom:36px;}
.text_image_cards .ti_cards_head h6, .text_image_cards .ti_cards_head h2, .text_image_cards .ti_cards_head_text, .text_image_cards .ti_cards_head .h6 {grid-column:1;grid-row:auto;}
.text_image_cards .ti_cards_head h2 {margin-bottom:22px;}
.text_image_cards .ti_cards {grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;}
.text_image_cards .ti_card--main {grid-row:auto;}
}
@media only screen and (max-width:600px) {
.text_image_cards .ti_card {padding:20px;}
.text_image_cards .ti_card--main {padding:0;}
.text_image_cards .ti_card--main::before {opacity:.35;} /* like the hero on mobile: the glows are sized for desktop */
.text_image_cards .ti_card_head {padding:26px 22px 24px;}
.text_image_cards .ti_card--main h3.ti_card_title {font-size:24px;}
.text_image_cards .ti_card_media {padding:0 22px 22px;}
.text_image_cards .ti_card--main .ti_card_arrow {top:22px;right:22px;}
}
/* "Functies in dit onderdeel": chips to function pages (field text_option > functies) */
.text_image_section .ti_functions {margin:26px 0 30px;}
.text_image_section .ti_functions:last-child {margin-bottom:0;}
.text_image_section .ti_functions_label {margin-bottom:10px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#6b6b6b;}
.text_image_section .check_list .ti_functions_list, .text_image_section .ti_functions_list {display:flex;flex-wrap:wrap;gap:8px;max-height:76px;margin:0;padding:0;overflow:hidden;list-style:none;} /* never more than 2 rows: 2 x 34px chips + 8px gap, a 3rd row stays hidden */
.text_image_section .check_list .ti_functions_list li {display:flex;margin:0;padding:0;line-height:1;} /* flex: the row is exactly as tall as the chip */
.text_image_section .check_list .ti_functions_list li::before {display:none;}
.text_image_section .ti_function {display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;background:#fff;border:1px solid #E3E3E3;border-radius:999px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1.2;color:var(--textColor);text-decoration:none;transition:border-color .2s ease, background-color .2s ease, color .2s ease;}
.text_image_section .ti_function .ss_function_icon {flex:none;width:15px;height:15px;color:var(--backgrondColorRed);}
.text_image_section .ti_function:hover {border-color:rgba(211,32,32,.4);background:#FDF3F3;color:var(--textColor);text-decoration:none;}
.text_image_section .ti_functions + .btn_one {margin-top:0;}
@media only screen and (max-width:600px) {
.text_image_section .ti_functions_list {max-height:72px;}
.text_image_section .ti_function {height:32px;padding:0 11px 0 10px;font-size:12px;}
}
/* Check lists in the text: a bit of air between the points, one size smaller */
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li {margin-bottom:12px;padding-left:26px;font-size:15px;line-height:1.55;}
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li:last-child {margin-bottom:0;}
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li::before {top:3px;width:16px;height:16px;background-size:contain;}
@media only screen and (max-width:600px) {
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li {margin-bottom:10px;font-size:14px;}
}
/* Optional small line under the button ("Geheel vrijblijvend, ...") */
.text_image_section .ti_link_note {margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--textColortwo);}
/* theme-shared-accordion */
/* =============================================================================
shared/accordion.css
Extracted from style.css. Loaded only on: block select_faq, block text_and_image, page-template/template-faq.php
============================================================================= */
.accordian {margin-bottom: 40px;}
.accordian .acc-items {border-bottom: 1px solid var(--backgrondColorGray);padding-left: 18px;}
.accordian .acc-items:first-child {border-top: 1px solid var(--backgrondColorGray)}
.accordian .acc-title {padding: 15px 0;position: relative;cursor: pointer;padding-right: 20px;}
.accordian:not(.not) .acc-title::before {content: "";position: absolute;left: -18px;top: 18px;width: 13px;height: 13px;background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0781 5.8445L7.35755 1.1239C7.13549 0.901843 6.77472 0.901455 6.55314 1.12304C6.33156 1.34462 6.33194 1.70539 6.554 1.92744L10.301 5.6744L0.805302 5.66541C0.490852 5.66507 0.236397 5.91953 0.236735 6.23398C0.237073 6.54842 0.492076 6.80343 0.806525 6.80377L10.3022 6.81276L6.56328 10.5517C6.34169 10.7732 6.34208 11.134 6.56414 11.3561C6.7862 11.5781 7.14696 11.5785 7.36855 11.3569L12.0778 6.64769C12.3006 6.42733 12.3002 6.06656 12.0781 5.8445Z' fill='%23353535'/%3E%3C/svg%3E") no-repeat center center; background-size: contain;}
.accordian:not(.not) .acc-title::after {content: "";position: absolute;right: 14px;top: 18px; transform: rotate(0);transition: 0.4s; width: 15px; height: 10px;background: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 1.97559L7.5 9.47559L0 1.97559L1.38281 0.592773L7.5 6.70898L13.6162 0.592773L15 1.97559Z' fill='%23353535'/%3E%3C/svg%3E") no-repeat center;background-size: contain;display: inline-block;}
.accordian .acc-title.active::after {transform: rotate(180deg);}
.accordian .acc-title h4, .accordian .acc-title .h4 {margin-bottom: 0;font-size: 18px; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
.accordian .acc-content {display: none; margin-bottom:20px;}
.accordian .acc-content p a {color: var(--backgrondColorRed); font-family: var(--font-bold); font-weight: var(--font-weight-bold);text-decoration: underline;}
.accordian .acc-content p a:hover {text-decoration: none;}
.accordian .acc-content p {margin-bottom: 16px;}
.accordian .acc-content ul, .accordian .acc-content li {font-size: 13px;}
@media only screen and (max-width:1023px) {
.accordian .acc-title h4, .accordian .acc-title .h4 {font-size: 16px;}
}
@media only screen and (max-width:600px) {
.accordian:not(.not) .acc-title::before {width: 9px;height: 9px;}
.accordian:not(.not) .acc-title::after {width: 13px;height: 7px;right: 11px;}
.accordian {margin-bottom: 30px;}
.accordian .acc-title h4, .accordian .acc-title .h4 {font-size: 14px;line-height: 20px;}
.accordian .acc-content p, .accordian .acc-content ul, .accordian .acc-content li {font-size: 12px !important;line-height: 1.6;}
}
/* theme-shared-function-cards */
/* =============================================================================
shared/function-cards.css
Extracted from style.css. Loaded only on: block prijzen, block select_category_functionaliteiten, block select_functionaliteiten, block three_grid_layout, page-template/template-functionaliteiten.php
============================================================================= */
.slider_section.layout_three {padding: 80px 0;}
.card_slider_box.flex_center .card_box_item {width: calc(33.33% - 10px);}
.card_box_item {border: 1px solid var(--backgrondColorBlack);border-radius: 5px;padding: 28px 22px;padding-right: 5px;text-decoration: none;}
.card_box_item:not(.not):hover h5, .card_box_item:not(.not):hover .h5 {color: var(--backgrondColorRed);}
.card_box_item h5, .card_box_item .h5 {font-size: 18px;font-family: var(--font-semibold);font-weight: var(--font-weight-semibold);display: flex;align-items: center;margin-bottom: 13px;}
.card_box_item h5 img, .card_box_item .h5 img {margin-right: 12px;}
.card_box_item p {font-size: 14px;line-height: 18px;}
.single-functionaliteiten .slider_section.layout_three .card_box_item h5 img, .single-functionaliteiten .slider_section.layout_three .card_box_item .h5 img {display: none;}
.card_box_item {display:flex;flex-direction:column;position:relative}
.card_box_item:hover .title_arrow {color:var(--backgrondColorRed)}
.card_video_text:hover {color:var(--backgrondColorRed);transform:scale(1.02);transition:transform .25s ease}
.card_video_text:hover~*, .card_video_text:hover+* {color:inherit!important}
.play_icon {width:18px;height:14px;display:inline-block;margin-left:6px;background:no-repeat center/contain;background-image:url("data:image/svg+xml;utf8,");background-color:transparent;clip-path:none;transition:transform .25s ease}
.card_box_item:hover .card_video_text {color:var(--textColor)}
.card_box_item .card_video_text:hover {color:var(--backgrondColorRed)!important}
.card_video_text {margin-top:16px;font-size:14px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:var(--textColor);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-align:left;width:max-content;text-decoration:underline}
@media only screen and (max-width:1023px) {
.card_slider_box.flex_center .card_box_item {width: calc(50% - 7px);}
}
@media only screen and (max-width:767px) {
.card_slider_box.flex_center .card_box_item {width: 100%;}
}
@media only screen and (max-width:600px) {
.card_box_item h5 img, .card_box_item .h5 img {width: 18px;margin-right: 8px;}
.card_box_item h5, .card_box_item .h5 {font-size: 12px;margin-bottom: 12px;line-height: 1;}
.card_box_item p {font-size: 12px;line-height: 16px;}
.card_box_item {padding: 18px 14px;}
.slider_section.layout_three {padding: 60px 0;}
.slider_section.layout_three .card_box_item h5, .slider_section.layout_three .card_box_item .h5 {font-size: 14px;}
.title_arrow {display: inline-flex;}
}
/* theme-shared-tiles */
/* =============================================================================
shared/tiles.css
White tiles, 4 per row, under a left-aligned intro. Loaded only with the
select_functionaliteiten and three_grid_layout blocks (.tiles_section).
A tile with a link is clickable as a whole and shows an arrow next to its title.
============================================================================= */
/* Intro (subtitle, title, text) aligned left with the tiles */
.slider_section.tiles_section .short_intro_box {text-align:left;}
.slider_section.tiles_section .short_intro_box .wrap {margin:0;}
.slider_section.tiles_section .short_intro_box p {margin-left:0;margin-right:0;}
.slider_section.tiles_section .short_intro_box .block_title::after {margin-left:0;margin-right:0;}
.functionality_tiles {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.functionality_tile {position:relative;display:flex;flex-direction:column;width:calc((100% - 72px) / 4);padding:26px 24px 24px;background:#fff;border:1px solid #e7e7e7;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.05);transition:box-shadow .3s ease,transform .3s ease;}
.functionality_tile:has(.functionality_tile_link):hover {box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px);}
.functionality_tile:has(.functionality_tile_link:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.functionality_tile_link, .functionality_tile_body {display:block;flex:1;color:inherit;text-decoration:none;}
.functionality_tile_link:focus-visible {outline:none;}
.functionality_tile_link::after {content:"";position:absolute;inset:0;z-index:0;border-radius:14px;}
.functionality_tile_title {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:17px;line-height:1.3;color:var(--textColor);transition:color .3s ease;}
.functionality_tile_arrow {display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-top:-3px;border-radius:50%;background:#FBE9E9;color:var(--backgrondColorRed);transition:background-color .25s ease,color .25s ease,transform .25s ease;}
.functionality_tile_arrow svg {display:block;}
.functionality_tile:has(.functionality_tile_link):hover .functionality_tile_title {color:var(--backgrondColorRed);}
.functionality_tile:has(.functionality_tile_link):hover .functionality_tile_arrow {background:var(--backgrondColorRed);color:#fff;transform:translateX(2px);}
.functionality_tile_text p {margin:0;font-size:14px;line-height:1.65;color:#5f5f5f;}
.functionality_tile_text p + p {margin-top:10px;}
.functionality_tile_video {position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:28px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1;color:var(--backgrondColorRed);}
.functionality_tile_video svg {display:block;flex:none;}
.functionality_tile_video .arrow {transition:transform .2s ease;}
.functionality_tile_video:hover .arrow {transform:translateX(3px);}
/* Tiles with an icon (select_functionaliteiten, three_grid_layout with "Iconen tonen"): a red icon
square right of the title, on one row, instead of the arrow */
.functionality_tile--icon .functionality_tile_title {align-items:center;margin-bottom:14px;}
.functionality_tile_icon {display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:9px;background:var(--backgrondColorRed);color:#fff;}
.functionality_tile_icon .ss_function_icon {display:block;width:19px;height:19px;}
.functionality_tile--icon .functionality_tile_arrow {display:none;}
.functionality_tiles--5 .functionality_tile {width:calc((100% - 96px) / 5);padding:22px 20px 20px;}
.functionality_tiles--5 .functionality_tile_title {font-size:15px;}
.functionality_tiles--5 .functionality_tile_text p {font-size:13px;line-height:1.6;}
.functionality_tiles--5 .functionality_tile_video {margin-top:22px;}
@media only screen and (max-width:1279px) {
.functionality_tiles--5 .functionality_tile {width:calc((100% - 72px) / 4);}
}
@media only screen and (max-width:1023px) {
.functionality_tile, .functionality_tiles--5 .functionality_tile {width:calc((100% - 24px) / 2);}
}
@media only screen and (max-width:600px) {
.functionality_tiles {gap:16px;}
.functionality_tile, .functionality_tiles--5 .functionality_tile {width:100%;padding:22px 20px 20px;}
}
/* 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{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;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:flex-start;gap:12px;}
.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:.35;} /* 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;}
.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;
}