.elementor-15 .elementor-element.elementor-element-cc81bf3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:7px;--padding-bottom:7px;--padding-left:10px;--padding-right:10px;}.elementor-15 .elementor-element.elementor-element-cc81bf3:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-cc81bf3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2C3A66;}.elementor-15 .elementor-element.elementor-element-c7e6a9e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-15 .elementor-element.elementor-element-77abf84 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-15 .elementor-element.elementor-element-77abf84 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-15 .elementor-element.elementor-element-77abf84{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-15 .elementor-element.elementor-element-77abf84 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-15 .elementor-element.elementor-element-77abf84 .elementor-icon-list-item > a{font-family:"Open Sans", Sans-serif;font-size:13px;font-weight:400;}.elementor-15 .elementor-element.elementor-element-77abf84 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-15 .elementor-element.elementor-element-f732a9f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-c9f7703{margin:2px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15 .elementor-element.elementor-element-c9f7703 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-5ff80a4 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-15 .elementor-element.elementor-element-5ff80a4 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-15 .elementor-element.elementor-element-5ff80a4{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-15 .elementor-element.elementor-element-5ff80a4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-15 .elementor-element.elementor-element-5ff80a4 .elementor-icon-list-item > a{font-family:"Open Sans", Sans-serif;font-size:13px;font-weight:400;}.elementor-15 .elementor-element.elementor-element-5ff80a4 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-15 .elementor-element.elementor-element-b843dcd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;--z-index:50;}.elementor-15 .elementor-element.elementor-element-b843dcd:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-b843dcd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-3b0fd4f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-3b0fd4f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-15 .elementor-element.elementor-element-581594c{text-align:start;}.elementor-15 .elementor-element.elementor-element-581594c img{max-width:80%;}.elementor-15 .elementor-element.elementor-element-38e80a7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-menu-toggle{margin:0 auto;}.elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-nav-menu .elementor-item{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:700;}.elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-nav-menu--main .elementor-item{color:#242F53;fill:#242F53;}.elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-nav-menu--main .elementor-item:hover, .elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-15 .elementor-element.elementor-element-1fd5554 .elementor-nav-menu--main .elementor-item:focus{color:#242F53;fill:#242F53;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-15 .elementor-element.elementor-element-dd58361 .elementor-button{background-color:#E43027;border-radius:20px 20px 20px 20px;}.elementor-15 .elementor-element.elementor-element-dd58361 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-15 .elementor-element.elementor-element-b4719b3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-15 .elementor-element.elementor-element-b4719b3:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-b4719b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-54142e1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-54142e1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15 .elementor-element.elementor-element-b01d382{text-align:start;}.elementor-15 .elementor-element.elementor-element-b01d382 img{max-width:80%;}.elementor-15 .elementor-element.elementor-element-4c8aced .elementor-menu-toggle{margin:0 auto;}.elementor-15 .elementor-element.elementor-element-4c8aced .elementor-nav-menu .elementor-item{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:700;}.elementor-15 .elementor-element.elementor-element-4c8aced .elementor-nav-menu--main .elementor-item{color:#242F53;fill:#242F53;}.elementor-15 .elementor-element.elementor-element-4c8aced .elementor-nav-menu--main .elementor-item:hover, .elementor-15 .elementor-element.elementor-element-4c8aced .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-15 .elementor-element.elementor-element-4c8aced .elementor-nav-menu--main .elementor-item.highlighted, .elementor-15 .elementor-element.elementor-element-4c8aced .elementor-nav-menu--main .elementor-item:focus{color:#242F53;fill:#242F53;}.elementor-15 .elementor-element.elementor-element-3960967{--display:flex;}.elementor-15 .elementor-element.elementor-element-3960967:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-3960967 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEF0F6;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-c314216{text-align:center;font-family:"Open Sans", Sans-serif;font-size:13px;font-weight:700;color:#1B2440;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-b4719b3{--z-index:50;}.elementor-15 .elementor-element.elementor-element-54142e1{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-15 .elementor-element.elementor-element-b01d382{width:var( --container-widget-width, 129px );max-width:129px;--container-widget-width:129px;--container-widget-flex-grow:0;}.elementor-15 .elementor-element.elementor-element-b01d382 img{max-width:86%;}.elementor-15 .elementor-element.elementor-element-c314216{font-size:12px;}}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-3b0fd4f{--width:14%;}.elementor-15 .elementor-element.elementor-element-54142e1{--width:14%;}}/* Start custom CSS for icon-list, class: .elementor-element-77abf84 *//* Tekstkleur icon list altijd wit */ .paesen-top-links, .paesen-top-links .elementor-icon-list-text, .paesen-top-links .elementor-icon-list-item, .paesen-top-links .elementor-icon-list-item a, .paesen-top-links .elementor-icon-list-item a span { color: #ffffff !important; } /* Ook hover/focus wit houden */ .paesen-top-links .elementor-icon-list-item a:hover, .paesen-top-links .elementor-icon-list-item a:focus, .paesen-top-links .elementor-icon-list-item a:hover .elementor-icon-list-text, .paesen-top-links .elementor-icon-list-item a:focus .elementor-icon-list-text { color: #ffffff !important; } /* Als er iconen bij staan, ook wit */ .paesen-top-links .elementor-icon-list-icon, .paesen-top-links .elementor-icon-list-icon i, .paesen-top-links .elementor-icon-list-icon svg { color: #ffffff !important; fill: #ffffff !important; }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-1fd5554 *//* ========================================================== PAESEN MEGA MENU — COMPLETE CSS / STRICT HOVER ========================================================== Elementor Nav Menu widget: paesen-mega-menu Menu-item "Ons aanbod": paesen-mega-parent Menu-items: Beton -> transport-label Bouwmaterialen -> transport-label ========================================================== */ /* ========================================================== 1. BASIS ========================================================== */ .paesen-mega-menu { position: relative; z-index: 9999; } .paesen-mega-menu .elementor-nav-menu, .paesen-mega-menu .elementor-nav-menu--main { z-index: 9999; } /* ========================================================== 2. HOOFDITEM "ONS AANBOD" ========================================================== */ .paesen-mega-menu .paesen-mega-parent { position: static !important; } .paesen-mega-menu .paesen-mega-parent > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; } .paesen-mega-menu .paesen-mega-parent > a::after { display: none !important; content: none !important; } /* ========================================================== 3. EIGEN CARET NAAST "ONS AANBOD" ========================================================== */ .paesen-mega-menu .paesen-mega-parent > a > .sub-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; width: 10px !important; height: 10px !important; margin: 0 0 0 5px !important; padding: 0 !important; transform: none !important; } .paesen-mega-menu .paesen-mega-parent > a > .sub-arrow i, .paesen-mega-menu .paesen-mega-parent > a > .sub-arrow svg { display: none !important; } .paesen-mega-menu .paesen-mega-parent > a > .sub-arrow::before { content: ""; display: block; width: 6px; height: 6px; border-right: 2px solid #EF3128; border-bottom: 2px solid #EF3128; transform: rotate(45deg); transform-origin: center; margin-top: -4px; transition: transform 0.22s ease, margin-top 0.22s ease; } .paesen-mega-menu .paesen-mega-parent.paesen-menu-open > a > .sub-arrow::before { transform: rotate(225deg); margin-top: 3px; } /* ========================================================== 4. DESKTOP + TABLET ========================================================== */ @media (min-width: 768px) { /* -------------------------------------------------------- MEGA MENU CONTAINER -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu { position: absolute !important; top: 100% !important; left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(8px) !important; width: min(1120px, calc(100vw - 48px)) !important; margin: 0 !important; padding: 34px 38px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; column-gap: 34px !important; row-gap: 28px !important; background: #ffffff !important; border: 1px solid #D8DEEF !important; border-radius: 26px !important; box-shadow: 0 24px 70px rgba(20, 30, 70, 0.14) !important; overflow: hidden !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; } /* Geen automatische open via :hover of :focus-within. Alleen het bijbehorende JavaScript voegt deze klasse toe. */ .paesen-mega-menu .paesen-mega-parent > .sub-menu, .paesen-mega-menu .paesen-mega-parent:hover > .sub-menu, .paesen-mega-menu .paesen-mega-parent:focus-within > .sub-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(8px) !important; } .paesen-mega-menu .paesen-mega-parent.paesen-menu-open > .sub-menu, .paesen-mega-menu .paesen-mega-parent.paesen-menu-open:hover > .sub-menu, .paesen-mega-menu .paesen-mega-parent.paesen-menu-open:focus-within > .sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu::before, .paesen-mega-menu .paesen-mega-parent > .sub-menu::after { display: none !important; content: none !important; } /* -------------------------------------------------------- KOLOMMEN -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li { position: relative !important; display: block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; text-indent: 0 !important; list-style: none !important; } /* -------------------------------------------------------- KOLOMTITELS -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > a { position: relative !important; display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 0 14px 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #18254A !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; cursor: pointer !important; transition: color 0.2s ease !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > a:hover, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > a:focus { color: #EF3128 !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > a::after { content: "" !important; display: block !important; width: 28px !important; height: 2px !important; margin: 11px 0 0 0 !important; background: #EF3128 !important; border-radius: 999px !important; } /* -------------------------------------------------------- NESTED CARETS DESKTOP WEG -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent .sub-menu .sub-arrow { display: none !important; } /* -------------------------------------------------------- NIVEAU 2 — GEEN INSPRINGING -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; top: auto !important; left: 0 !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; list-style: none !important; pointer-events: auto !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-indent: 0 !important; list-style: none !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a.elementor-sub-item { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-top: 5px !important; padding-right: 0 !important; padding-bottom: 5px !important; padding-left: 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; text-indent: 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #33436F !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; transform: none !important; transition: color 0.2s ease !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a::before, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a::after { display: none !important; content: none !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a:hover, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a:focus { color: #EF3128 !important; background: transparent !important; margin-left: 0 !important; padding-left: 0 !important; transform: none !important; } /* -------------------------------------------------------- NIVEAU 3 — ALLEEN DEZE SPRINGEN IN -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 1px 0 8px 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 14px !important; padding-inline-start: 14px !important; top: auto !important; left: 0 !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; list-style: none !important; pointer-events: auto !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-indent: 0 !important; list-style: none !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { display: block !important; width: 100% !important; margin: 0 !important; padding: 3px 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #33436F !important; background: transparent !important; border: 0 !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; transition: color 0.2s ease !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a::before, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a::after { display: none !important; content: none !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:focus { color: #EF3128 !important; background: transparent !important; } /* -------------------------------------------------------- TRANSPORT LABELS DESKTOP -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent li.transport-label > a { color: #33436F !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; margin: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-indent: 0 !important; background: transparent !important; cursor: default !important; pointer-events: none !important; transform: none !important; transition: none !important; } .paesen-mega-menu .paesen-mega-parent li.transport-label:hover > a, .paesen-mega-menu .paesen-mega-parent li.transport-label:focus-within > a { color: #33436F !important; background: transparent !important; } .paesen-mega-menu .paesen-mega-parent li.transport-label > a::before, .paesen-mega-menu .paesen-mega-parent li.transport-label > a::after { display: none !important; content: none !important; } } /* ========================================================== 5. TABLET ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .paesen-mega-menu .paesen-mega-parent > .sub-menu { width: min(920px, calc(100vw - 32px)) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; padding: 30px !important; } } /* ========================================================== 6. MOBILE ========================================================== */ @media (max-width: 767px) { /* -------------------------------------------------------- A. ENIGE SCROLLCONTAINER = VOLLEDIGE DROPDOWN -------------------------------------------------------- */ .paesen-mega-menu { overflow: visible !important; } .paesen-mega-menu .elementor-widget-container { overflow: visible !important; } .paesen-mega-menu .elementor-nav-menu--dropdown { position: relative !important; width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; max-height: calc(100vh - 70px) !important; max-height: calc(100dvh - 70px) !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; touch-action: pan-y !important; } /* * BELANGRIJK: * GEEN ENKELE CHILD MAG ZELF SCROLLEN. */ .paesen-mega-menu .elementor-nav-menu--dropdown .elementor-nav-menu, .paesen-mega-menu .elementor-nav-menu--dropdown ul, .paesen-mega-menu .elementor-nav-menu--dropdown ul.sub-menu, .paesen-mega-menu .elementor-nav-menu--dropdown li { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; overscroll-behavior: auto !important; touch-action: pan-y !important; } .paesen-mega-menu .elementor-nav-menu--dropdown a { touch-action: pan-y !important; } /* -------------------------------------------------------- B. ONS AANBOD -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent { position: relative !important; } /* * ALLE submenu's BINNEN Ons aanbod * permanent open. */ .paesen-mega-menu .paesen-mega-parent .sub-menu { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; top: auto !important; left: 0 !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; list-style: none !important; pointer-events: auto !important; box-sizing: border-box !important; touch-action: pan-y !important; } /* -------------------------------------------------------- C. NESTED CARETS ALLEMAAL WEG -------------------------------------------------------- */ /* * Alleen carets die BINNEN een sub-menu zitten. * * De caret van "Ons aanbod" zelf staat vóór die * sub-menu en blijft daardoor behouden. */ .paesen-mega-menu .paesen-mega-parent .sub-menu .sub-arrow { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; pointer-events: none !important; } .paesen-mega-menu .paesen-mega-parent .sub-menu .sub-arrow::before, .paesen-mega-menu .paesen-mega-parent .sub-menu .sub-arrow::after, .paesen-mega-menu .paesen-mega-parent .sub-menu .sub-arrow i, .paesen-mega-menu .paesen-mega-parent .sub-menu .sub-arrow svg { display: none !important; content: none !important; } /* * Alle andere theme/Elementor indicators op * nested links eveneens weg. */ .paesen-mega-menu .paesen-mega-parent .sub-menu .menu-item-has-children > a::before, .paesen-mega-menu .paesen-mega-parent .sub-menu .menu-item-has-children > a::after, .paesen-mega-menu .paesen-mega-parent .sub-menu .menu-item-has-children::before, .paesen-mega-menu .paesen-mega-parent .sub-menu .menu-item-has-children::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } /* -------------------------------------------------------- D. NIVEAU 1 VAN MEGA MENU -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li { position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-indent: 0 !important; list-style: none !important; overflow: visible !important; touch-action: pan-y !important; } /* -------------------------------------------------------- E. NIVEAU 2 GEEN INSPRINGING -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; overflow: visible !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li { position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-indent: 0 !important; overflow: visible !important; touch-action: pan-y !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a.elementor-sub-item { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-indent: 0 !important; overflow: visible !important; touch-action: pan-y !important; } /* -------------------------------------------------------- F. BETON + BOUWMATERIALEN = LABEL -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent li.transport-label > a { color: #33436F !important; background: transparent !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-indent: 0 !important; cursor: default !important; /* * Geen klikgedrag. * * Omdat niveau 3 permanent zichtbaar is, * hoeft Beton niets meer te togglen. */ pointer-events: none !important; transform: none !important; transition: none !important; } .paesen-mega-menu .paesen-mega-parent li.transport-label:hover > a, .paesen-mega-menu .paesen-mega-parent li.transport-label:focus > a, .paesen-mega-menu .paesen-mega-parent li.transport-label:focus-within > a { color: #33436F !important; background: transparent !important; } /* -------------------------------------------------------- G. TRANSPORT LABEL CARET EXTRA HARD WEG -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent li.transport-label > a > .sub-arrow, .paesen-mega-menu .paesen-mega-parent li.transport-label .sub-arrow, .paesen-mega-menu .paesen-mega-parent li.transport-label button, .paesen-mega-menu .paesen-mega-parent li.transport-label [class*="toggle"], .paesen-mega-menu .paesen-mega-parent li.transport-label [class*="arrow"] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; pointer-events: none !important; } .paesen-mega-menu .paesen-mega-parent li.transport-label > a::before, .paesen-mega-menu .paesen-mega-parent li.transport-label > a::after, .paesen-mega-menu .paesen-mega-parent li.transport-label::before, .paesen-mega-menu .paesen-mega-parent li.transport-label::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } /* -------------------------------------------------------- H. NIVEAU 3 PERMANENT OPEN ALLEEN DIT NIVEAU SPRINGT IN -------------------------------------------------------- */ .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 2px !important; margin-right: 0 !important; margin-bottom: 8px !important; margin-left: 0 !important; margin-inline-start: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 14px !important; padding-inline-start: 14px !important; top: auto !important; left: 0 !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; list-style: none !important; touch-action: pan-y !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-indent: 0 !important; list-style: none !important; overflow: visible !important; touch-action: pan-y !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a, .paesen-mega-menu .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a.elementor-sub-item { display: block !important; width: 100% !important; margin: 0 !important; padding-top: 4px !important; padding-right: 0 !important; padding-bottom: 4px !important; padding-left: 0 !important; padding-inline-start: 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #33436F !important; background: transparent !important; border: 0 !important; text-align: left !important; text-decoration: none !important; overflow: visible !important; touch-action: pan-y !important; } /* -------------------------------------------------------- I. NESTED SCROLLBAR DEFINITIEF UITSCHAKELEN -------------------------------------------------------- */ /* * Dit is specifiek voor het probleem dat je screenshot * toont: de kleine scrollbar IN "Ons aanbod". * * Geen enkel submenu binnen paesen-mega-parent * mag een scrollbar krijgen. */ .paesen-mega-menu .paesen-mega-parent > .sub-menu, .paesen-mega-menu .paesen-mega-parent > .sub-menu ul, .paesen-mega-menu .paesen-mega-parent > .sub-menu ul.sub-menu { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; scrollbar-width: none !important; overscroll-behavior: auto !important; } .paesen-mega-menu .paesen-mega-parent > .sub-menu::-webkit-scrollbar, .paesen-mega-menu .paesen-mega-parent > .sub-menu ul::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* -------------------------------------------------------- J. TOUCH OVERAL DOORGEVEN AAN HOOFDSCROLL -------------------------------------------------------- */ .paesen-mega-menu .elementor-nav-menu--dropdown * { touch-action: pan-y !important; } } /* ========================================================== 7. GLOBAL SAFETY ========================================================== */ .paesen-mega-menu, .paesen-mega-menu *, .paesen-mega-menu *::before, .paesen-mega-menu *::after { box-sizing: border-box; } .paesen-mega-menu .paesen-mega-parent .sub-menu { box-sizing: border-box !important; }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-4c8aced *//* ========================================================== PAESEN MOBILE MENU — FINAL COMPLETE Alleen voor APARTE Elementor mobile Nav Menu widget CSS class op mobile Nav Menu widget: paesen-mobile-menu CSS class op menu-item "Ons aanbod": paesen-mega-parent CSS class op: Beton -> transport-label Bouwmaterialen -> transport-label Optioneel CTA menu-item: paesen-mobile-cta ========================================================== */ /* ========================================================== MOBILE ONLY ========================================================== */ @media (max-width: 767px) { /* ======================================================== 1. BASIS ======================================================== */ .paesen-mobile-menu { position: relative !important; z-index: 99999 !important; font-family: "Open Sans", sans-serif !important; overflow: visible !important; } .paesen-mobile-menu, .paesen-mobile-menu *, .paesen-mobile-menu *::before, .paesen-mobile-menu *::after { box-sizing: border-box !important; } .paesen-mobile-menu .elementor-widget-container { overflow: visible !important; } /* Hamburger bewust niet custom stylen */ .paesen-mobile-menu .elementor-menu-toggle { position: relative !important; z-index: 1000000 !important; } /* ======================================================== 2. DROPDOWN PANEL DIT IS DE ENIGE SCROLLCONTAINER ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown, .paesen-mobile-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: absolute !important; top: calc(100% + 12px) !important; right: 0 !important; left: auto !important; width: min(92vw, 390px) !important; /* * vh fallback + moderne dvh voor mobiele browsers */ max-height: calc(100vh - 110px) !important; max-height: calc(100dvh - 110px) !important; margin: 0 !important; padding: 18px 18px 20px 18px !important; background: #ffffff !important; border: 1px solid #D8DEEF !important; border-radius: 22px !important; box-shadow: 0 24px 70px rgba(20, 30, 70, 0.18) !important; /* * ZEER BELANGRIJK: * alleen deze container mag scrollen */ overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; touch-action: pan-y !important; z-index: 999999 !important; } /* Mooie kleine scrollbar */ .paesen-mobile-menu .elementor-nav-menu--dropdown::-webkit-scrollbar { width: 4px !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown::-webkit-scrollbar-track { background: transparent !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown::-webkit-scrollbar-thumb { background: #D8DEEF !important; border-radius: 999px !important; } /* ======================================================== 3. CRUCIALE SCROLL RESET GEEN ENKELE CHILD MAG ZELF SCROLLEN ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu, .paesen-mobile-menu .elementor-nav-menu--dropdown ul, .paesen-mobile-menu .elementor-nav-menu--dropdown ul.sub-menu, .paesen-mobile-menu .elementor-nav-menu--dropdown li { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; overscroll-behavior: auto !important; touch-action: pan-y !important; } /* * Hierdoor moet swipen ook werken wanneer je * vinger op een link staat. */ .paesen-mobile-menu .elementor-nav-menu--dropdown a, .paesen-mobile-menu .elementor-nav-menu--dropdown span, .paesen-mobile-menu .elementor-nav-menu--dropdown li { touch-action: pan-y !important; } /* ======================================================== 4. ALGEMENE RESET ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown ul, .paesen-mobile-menu .elementor-nav-menu--dropdown li { list-style: none !important; margin: 0 !important; padding: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; background: transparent !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown a { font-family: "Open Sans", sans-serif !important; text-decoration: none !important; outline: none !important; box-shadow: none !important; text-indent: 0 !important; background: transparent !important; } /* ======================================================== 5. TOP LEVEL Home / Over ons / Ons aanbod / Toonzaal / Jobs / ... ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li { border-bottom: 1px solid #EEF1F7 !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:last-child { border-bottom: 0 !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; margin: 0 !important; padding: 15px 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #18254A !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li > a:hover, .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li > a:focus, .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li.current-menu-item > a, .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li.current-menu-ancestor > a { color: #EF3128 !important; background: transparent !important; } /* ======================================================== 6. CARETS ALLEEN TOP-LEVEL MAG EEN CARET HEBBEN ======================================================== */ /* * Eerst ALLE carets volledig uitschakelen. */ .paesen-mobile-menu .elementor-nav-menu--dropdown .sub-arrow { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; pointer-events: none !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .sub-arrow i, .paesen-mobile-menu .elementor-nav-menu--dropdown .sub-arrow svg, .paesen-mobile-menu .elementor-nav-menu--dropdown .sub-arrow::before, .paesen-mobile-menu .elementor-nav-menu--dropdown .sub-arrow::after { display: none !important; content: none !important; } /* * Optioneel: * normale top-level items die buiten Ons aanbod * een submenu hebben mogen wel hun arrow krijgen. * * Ons aanbod zelf tonen we bewust ZONDER caret, * omdat het permanent open staat. */ .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent).menu-item-has-children > a > .sub-arrow { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; flex: 0 0 24px !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; padding: 0 !important; overflow: visible !important; color: #EF3128 !important; pointer-events: auto !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent).menu-item-has-children > a > .sub-arrow::before { content: "" !important; display: block !important; width: 7px !important; height: 7px !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg) !important; margin-top: -4px !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent).menu-item-has-children > a.highlighted > .sub-arrow::before, .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent).menu-item-has-children > a[aria-expanded="true"] > .sub-arrow::before { transform: rotate(225deg) !important; margin-top: 4px !important; } /* ======================================================== 7. "ONS AANBOD" GEEN ACCORDION MEER ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; color: #EF3128 !important; font-weight: 800 !important; cursor: default !important; } /* * Ons aanbod hoeft niet meer getoggeld te worden. */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > a > .sub-arrow { display: none !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > a::before, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > a::after { display: none !important; content: none !important; } /* ======================================================== 8. ONS AANBOD SUBMENU PERMANENT OPEN ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 4px 0 16px 0 !important; top: auto !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: auto !important; touch-action: pan-y !important; } /* ======================================================== 9. HOOFDCATEGORIEËN BouwExpo / TegelExpo / TuinExpo / MixBeton / Transport & levering ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li { position: static !important; width: 100% !important; margin: 0 !important; padding: 15px 0 13px 0 !important; border-top: 1px solid #EEF1F7 !important; overflow: visible !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li:first-child { border-top: 0 !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > a { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 0 11px 0 !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #18254A !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; cursor: default !important; pointer-events: auto !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > a:hover, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > a:focus { color: #18254A !important; background: transparent !important; } /* rood lijntje */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > a::after { content: "" !important; display: block !important; width: 28px !important; height: 2px !important; margin-top: 9px !important; background: #EF3128 !important; border-radius: 999px !important; } /* absoluut geen caret op categorietitels */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > a > .sub-arrow { display: none !important; } /* ======================================================== 10. NIVEAU 2 Gevelstenen / Dakbedekking / Klinkers / Beton / Bouwmaterialen / ... ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; top: auto !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: auto !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li { position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: visible !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; /* * 16px ruimte voor rood bolletje. */ padding: 7px 0 7px 16px !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; color: #33436F !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; touch-action: pan-y !important; } /* rode bullet niveau 2 */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a::before { content: "" !important; position: absolute !important; display: block !important; left: 0 !important; top: 50% !important; width: 4px !important; height: 4px !important; background: #EF3128 !important; border: 0 !important; border-radius: 999px !important; transform: translateY(-50%) !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a::after { display: none !important; content: none !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a:hover, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a:focus { color: #EF3128 !important; background: transparent !important; } /* ======================================================== 11. BETON + BOUWMATERIALEN NIET KLIKBARE LABELS ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent li.transport-label > a { color: #33436F !important; cursor: default !important; /* * Geen actie wanneer erop wordt getikt. * Swipen gaat door naar parent scrollcontainer. */ pointer-events: none !important; background: transparent !important; transition: none !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent li.transport-label:hover > a, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent li.transport-label:focus-within > a { color: #33436F !important; } /* * ALLE mogelijke indicators bij Beton weg. */ .paesen-mobile-menu .paesen-mega-parent li.transport-label .sub-arrow, .paesen-mobile-menu .paesen-mega-parent li.transport-label button, .paesen-mobile-menu .paesen-mega-parent li.transport-label [class*="toggle"], .paesen-mobile-menu .paesen-mega-parent li.transport-label [class*="arrow"] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; pointer-events: none !important; } .paesen-mobile-menu .paesen-mega-parent li.transport-label::before, .paesen-mobile-menu .paesen-mega-parent li.transport-label::after, .paesen-mobile-menu .paesen-mega-parent li.transport-label > a::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } /* * a::before NIET verwijderen: * dit is ons rode bolletje. */ /* ======================================================== 12. NIVEAU 3 Betonmixers / Betonpompen / Telegoot / Betondumper ALTIJD OPEN ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu { position: static !important; /* * Elementor mag deze nooit meer inklappen. */ display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 0 6px 0 !important; /* * Niveau 3 springt extra in. */ padding: 0 0 0 16px !important; padding-inline-start: 16px !important; top: auto !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: auto !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 5px 0 !important; font-family: "Open Sans", sans-serif !important; /* * Zelfde grootte als niveau 2 */ font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; color: #33436F !important; background: transparent !important; border: 0 !important; text-decoration: none !important; overflow: visible !important; touch-action: pan-y !important; } /* * Geen extra bullet op niveau 3. * De inspringing toont de hiërarchie. */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a::before, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a::after { display: none !important; content: none !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:focus { color: #EF3128 !important; background: transparent !important; } /* ======================================================== 13. NESTED SCROLL DEFINITIEF UITSCHAKELEN ======================================================== */ /* * Geen enkele submenu-UL binnen Ons aanbod mag * nog een eigen scrollbar hebben. */ .paesen-mobile-menu .paesen-mega-parent > .sub-menu, .paesen-mobile-menu .paesen-mega-parent > .sub-menu ul, .paesen-mobile-menu .paesen-mega-parent > .sub-menu ul.sub-menu { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; scrollbar-width: none !important; overscroll-behavior: auto !important; touch-action: pan-y !important; } .paesen-mobile-menu .paesen-mega-parent > .sub-menu::-webkit-scrollbar, .paesen-mobile-menu .paesen-mega-parent > .sub-menu ul::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ======================================================== 14. NORMALE SUBMENU'S BUITEN "ONS AANBOD" ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent) > .sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 12px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent) > .sub-menu > li { margin: 0 !important; padding: 0 !important; border: 0 !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent) > .sub-menu > li > a { display: block !important; width: 100% !important; margin: 0 !important; padding: 7px 0 7px 16px !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; color: #33436F !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; touch-action: pan-y !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent) > .sub-menu > li > a:hover, .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.paesen-mega-parent) > .sub-menu > li > a:focus { color: #EF3128 !important; background: transparent !important; } /* ======================================================== 15. OFFERTE CTA ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mobile-cta { padding-top: 14px !important; border-bottom: 0 !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mobile-cta > a { display: flex !important; align-items: center !important; justify-content: center !important; padding: 14px 20px !important; color: #ffffff !important; background: #EF3128 !important; border: 1px solid #EF3128 !important; border-radius: 999px !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 800 !important; text-align: center !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mobile-cta > a:hover, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mobile-cta > a:focus { color: #ffffff !important; background: #D92720 !important; border-color: #D92720 !important; } /* ======================================================== 16. FINAL TOUCH SAFETY ======================================================== */ .paesen-mobile-menu .elementor-nav-menu--dropdown * { touch-action: pan-y !important; } } /* ========================================================== KLEINE MOBIELE SCHERMEN ========================================================== */ @media (max-width: 420px) { .paesen-mobile-menu .elementor-nav-menu--dropdown { right: -4px !important; width: calc(100vw - 24px) !important; padding: 16px !important; border-radius: 20px !important; max-height: calc(100vh - 100px) !important; max-height: calc(100dvh - 100px) !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .elementor-nav-menu > li > a { padding: 14px 0 !important; font-size: 14px !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > a { font-size: 13.5px !important; } .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > a, .paesen-mobile-menu .elementor-nav-menu--dropdown .paesen-mega-parent > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { font-size: 13.5px !important; } }/* End custom CSS */