.elementor-68 .elementor-element.elementor-element-8430032{--display:flex;--min-height:60vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.7;border-style:solid;--border-style:solid;border-width:0px 0px 10px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:10px;--border-left-width:0px;border-color:var( --e-global-color-accent );--border-color:var( --e-global-color-accent );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-8430032:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-8430032 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/image00006.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-8430032::before, .elementor-68 .elementor-element.elementor-element-8430032 > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-8430032 > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-8430032 > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-8430032 > .e-con-inner > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-8430032 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-36abc01{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--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-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-68 .elementor-element.elementor-element-14901f4{text-align:center;}.elementor-68 .elementor-element.elementor-element-14901f4 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:5rem;font-weight:900;text-transform:uppercase;line-height:1.1em;letter-spacing:2px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-4e9820d{text-align:center;}.elementor-68 .elementor-element.elementor-element-4e9820d .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:2.5rem;font-weight:800;text-transform:uppercase;line-height:0.9em;letter-spacing:1px;color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-1bf5ab5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 5px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:5px;--border-left-width:0px;border-color:var( --e-global-color-accent );--border-color:var( --e-global-color-accent );--padding-top:100px;--padding-bottom:0px;--padding-left:100px;--padding-right:50px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-6119d0f .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:2.5rem;font-weight:800;text-transform:uppercase;line-height:0.7em;letter-spacing:1px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-28ccf47{--display:flex;--min-height:85vh;--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;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:none;--border-style:none;--padding-top:75px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-d596cea{--display:flex;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-d596cea:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-d596cea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0001_Hyrox-2-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-d596cea.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-268b0ca{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-268b0ca.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-68 .elementor-element.elementor-element-d3201e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-d3201e7:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-d3201e7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/image00025.webp");background-position:center center;background-size:cover;}.elementor-68 .elementor-element.elementor-element-d3201e7.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-d3201e7.e-con{--flex-grow:2;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-be802c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-be802c9:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-be802c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-be802c9.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-be802c9.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-02cd0ad{text-align:center;}.elementor-68 .elementor-element.elementor-element-02cd0ad .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:3rem;font-weight:800;text-transform:uppercase;line-height:0.9em;letter-spacing:1px;color:#28D100;}.elementor-68 .elementor-element.elementor-element-c65c08f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-c65c08f:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-c65c08f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#121212;}.elementor-68 .elementor-element.elementor-element-c65c08f.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-c65c08f.e-con{--flex-grow:3;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-c5e3a83{text-align:end;}.elementor-68 .elementor-element.elementor-element-c5e3a83 .elementor-heading-title{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-9437c19{text-align:end;}.elementor-68 .elementor-element.elementor-element-9437c19 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.1rem;font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0.5px;color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );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-68 .elementor-element.elementor-element-fc4d6e3.elementor-element{--align-self:flex-end;}.elementor-68 .elementor-element.elementor-element-fc4d6e3{text-align:start;font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-f10c349.elementor-element{--align-self:flex-end;}.elementor-68 .elementor-element.elementor-element-f10c349{text-align:start;font-family:"Montserrat", Sans-serif;font-size:1rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-e8198dc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-e8198dc.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-b408191{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-b408191:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-b408191 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0001_Hyrox-2-1.jpg");background-position:center center;background-size:cover;}.elementor-68 .elementor-element.elementor-element-b408191.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-b408191.e-con{--flex-grow:2;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-33bc88d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-end;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-33bc88d:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-33bc88d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#121212;}.elementor-68 .elementor-element.elementor-element-33bc88d.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-33bc88d.e-con{--flex-grow:3;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-87b6343{text-align:end;}.elementor-68 .elementor-element.elementor-element-87b6343 .elementor-heading-title{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-a6903c3{text-align:end;}.elementor-68 .elementor-element.elementor-element-a6903c3 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.1rem;font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0.5px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-651c32f.elementor-element{--align-self:flex-end;}.elementor-68 .elementor-element.elementor-element-651c32f{text-align:end;font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-e79dd2d.elementor-element{--align-self:flex-end;}.elementor-68 .elementor-element.elementor-element-e79dd2d{text-align:end;font-family:"Montserrat", Sans-serif;font-size:1rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-6cc2797{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-6cc2797:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-6cc2797 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-6cc2797.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-6cc2797.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-3fc9e05{text-align:center;}.elementor-68 .elementor-element.elementor-element-3fc9e05 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:3rem;font-weight:800;text-transform:uppercase;line-height:0.9em;letter-spacing:1px;color:#28D100;}.elementor-68 .elementor-element.elementor-element-9b255ae{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-9b255ae.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-6c59a9b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-6c59a9b:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-6c59a9b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/image00077.webp");background-position:center center;background-size:cover;}.elementor-68 .elementor-element.elementor-element-6c59a9b.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-6c59a9b.e-con{--flex-grow:2;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-ca8d6ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-ca8d6ec:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-ca8d6ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/image00077.webp");background-position:center center;background-size:cover;}.elementor-68 .elementor-element.elementor-element-ca8d6ec.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-ca8d6ec.e-con{--flex-grow:2;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-a6938ca{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-end;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-a6938ca:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-a6938ca > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#121212;}.elementor-68 .elementor-element.elementor-element-a6938ca.e-con:hover{--e-con-transform-scale:1.02;}.elementor-68 .elementor-element.elementor-element-a6938ca.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-68 .elementor-element.elementor-element-7afe7f6{text-align:end;}.elementor-68 .elementor-element.elementor-element-7afe7f6 .elementor-heading-title{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-fea8ca2{text-align:end;}.elementor-68 .elementor-element.elementor-element-fea8ca2 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.1rem;font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0.5px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-124ed39.elementor-element{--align-self:flex-end;}.elementor-68 .elementor-element.elementor-element-124ed39{text-align:end;font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-a814e40.elementor-element{--align-self:flex-end;}.elementor-68 .elementor-element.elementor-element-a814e40{text-align:end;font-family:"Montserrat", Sans-serif;font-size:1rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-229227e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 5px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:5px;--border-left-width:0px;border-color:var( --e-global-color-accent );--border-color:var( --e-global-color-accent );--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-fae318a .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:2.5rem;font-weight:800;text-transform:uppercase;line-height:0.7em;letter-spacing:1px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-8bbd6a6{--display:flex;}.elementor-68 .elementor-element.elementor-element-04daa2a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-1d36e39{--display:flex;--justify-content:space-evenly;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-1d36e39:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-1d36e39 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-1d36e39.e-con:hover{--e-con-transform-scale:1.01;}.elementor-68 .elementor-element.elementor-element-cb000e0 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.6rem;font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0.5px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-9a9b8a9{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:500;line-height:1.6rem;letter-spacing:0.6px;color:var( --e-global-color-text );}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-68 .elementor-element.elementor-element-ce4fbb3 .elementor-icon-wrapper{text-align:end;}.elementor-68 .elementor-element.elementor-element-ce4fbb3.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-ce4fbb3.elementor-view-framed .elementor-icon, .elementor-68 .elementor-element.elementor-element-ce4fbb3.elementor-view-default .elementor-icon{color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-ce4fbb3.elementor-view-framed .elementor-icon, .elementor-68 .elementor-element.elementor-element-ce4fbb3.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-9cb3f47{--display:flex;--justify-content:flex-end;--overlay-opacity:0.6;--border-radius:20px 20px 20px 20px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-9cb3f47:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-9cb3f47 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#121212;background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0000_Hyrox-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-9cb3f47::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .e-con-inner > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-9cb3f47:hover::before, .elementor-68 .elementor-element.elementor-element-9cb3f47:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-9cb3f47:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-9cb3f47 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-9cb3f47.e-con:hover{--e-con-transform-scale:1.01;}.elementor-68 .elementor-element.elementor-element-9cb3f47:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-6e57b13 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.4rem;font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0.5px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-38963b1{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;font-family:"Montserrat", Sans-serif;font-size:1rem;font-weight:500;line-height:1.6rem;letter-spacing:0.6px;color:var( --e-global-color-text );}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-86d600c{padding:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-framed .elementor-icon, .elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-default .elementor-icon{fill:var( --e-global-color-text );color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-framed:has(:hover) .elementor-icon, .elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-default:has(:hover) .elementor-icon, .elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-framed:has(:focus) .elementor-icon, .elementor-68 .elementor-element.elementor-element-86d600c.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon{font-size:7px;}.elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon-box-title, .elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:0.6rem;font-weight:900;text-transform:uppercase;line-height:1em;}.elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-86d600c:has(:hover) .elementor-icon-box-title, .elementor-68 .elementor-element.elementor-element-86d600c:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-b1e7a2f{--display:flex;--justify-content:flex-end;--overlay-opacity:0.6;--border-radius:20px 20px 20px 20px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-b1e7a2f:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-b1e7a2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#121212;background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/Pilates.webp");background-position:bottom center;background-size:cover;}.elementor-68 .elementor-element.elementor-element-b1e7a2f::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .e-con-inner > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-b1e7a2f:hover::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-b1e7a2f > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-b1e7a2f.e-con:hover{--e-con-transform-scale:1.01;}.elementor-68 .elementor-element.elementor-element-b1e7a2f:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-4aec1be .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.4rem;font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0.5px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-2ac769a{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;font-family:"Montserrat", Sans-serif;font-size:1rem;font-weight:500;line-height:1.6rem;letter-spacing:0.6px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-95eb001{padding:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-framed .elementor-icon, .elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-default .elementor-icon{fill:var( --e-global-color-text );color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-framed:has(:hover) .elementor-icon, .elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-default:has(:hover) .elementor-icon, .elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-framed:has(:focus) .elementor-icon, .elementor-68 .elementor-element.elementor-element-95eb001.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon{font-size:7px;}.elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon-box-title, .elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:0.6rem;font-weight:900;text-transform:uppercase;line-height:1em;}.elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-95eb001:has(:hover) .elementor-icon-box-title, .elementor-68 .elementor-element.elementor-element-95eb001:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-accent );}.elementor-68 .elementor-element.elementor-element-d390fea{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:20px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-dots-normal-color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-a6fccc2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 5px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:5px;--border-left-width:0px;border-color:var( --e-global-color-accent );--border-color:var( --e-global-color-accent );--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-64fbe05 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:2.5rem;font-weight:800;text-transform:uppercase;line-height:0.7em;letter-spacing:1px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-ed147e3{--display:flex;}.elementor-68 .elementor-element.elementor-element-45bb1a7{padding:20px 0px 0px 0px;font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:500;line-height:1.6rem;letter-spacing:0.6px;}.elementor-68 .elementor-element.elementor-element-d75c895{--display:flex;--min-height:70vh;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-6dcea02{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-f150cf3{--display:flex;--min-height:70vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-f150cf3:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-f150cf3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0010_BodyMind.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-f150cf3:hover::before, .elementor-68 .elementor-element.elementor-element-f150cf3:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-f150cf3:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-f150cf3 > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-f150cf3 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#00000000;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-f150cf3:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-f150cf3, .elementor-68 .elementor-element.elementor-element-f150cf3::before{--overlay-transition:2s;}.elementor-68 .elementor-element.elementor-element-0832632{text-align:center;}.elementor-68 .elementor-element.elementor-element-0832632 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:900;text-transform:uppercase;line-height:1em;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-161879d.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-161879d{text-align:center;font-family:"Montserrat", Sans-serif;font-size:0.9rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-5880283{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-d8f9cc9{--display:flex;--min-height:70vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-d8f9cc9:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-d8f9cc9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0012_Body-Pump.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-d8f9cc9:hover::before, .elementor-68 .elementor-element.elementor-element-d8f9cc9:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-d8f9cc9:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-d8f9cc9 > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-d8f9cc9 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#00000000;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-d8f9cc9:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-d8f9cc9, .elementor-68 .elementor-element.elementor-element-d8f9cc9::before{--overlay-transition:2s;}.elementor-68 .elementor-element.elementor-element-1a33fb7{text-align:center;}.elementor-68 .elementor-element.elementor-element-1a33fb7 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:900;text-transform:uppercase;line-height:1em;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-f65fa26.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-f65fa26{text-align:center;font-family:"Montserrat", Sans-serif;font-size:0.9rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-607ec12{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-bb8bb6b{--display:flex;--min-height:70vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-bb8bb6b:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-bb8bb6b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0013_Boksen.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-bb8bb6b:hover::before, .elementor-68 .elementor-element.elementor-element-bb8bb6b:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-bb8bb6b:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-bb8bb6b > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-bb8bb6b > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#00000000;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-bb8bb6b:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-bb8bb6b, .elementor-68 .elementor-element.elementor-element-bb8bb6b::before{--overlay-transition:2s;}.elementor-68 .elementor-element.elementor-element-2ff9a7e{text-align:center;}.elementor-68 .elementor-element.elementor-element-2ff9a7e .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:900;text-transform:uppercase;line-height:1em;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-b2ffcc4.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-b2ffcc4{text-align:center;font-family:"Montserrat", Sans-serif;font-size:0.9rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-b057e1f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-3b2b2aa{--display:flex;--min-height:70vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-3b2b2aa:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-3b2b2aa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0008_Buikspierkwartier.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-3b2b2aa:hover::before, .elementor-68 .elementor-element.elementor-element-3b2b2aa:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-3b2b2aa:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-3b2b2aa > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-3b2b2aa > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#00000000;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-3b2b2aa:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-3b2b2aa, .elementor-68 .elementor-element.elementor-element-3b2b2aa::before{--overlay-transition:2s;}.elementor-68 .elementor-element.elementor-element-524a83a{text-align:center;}.elementor-68 .elementor-element.elementor-element-524a83a .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:900;text-transform:uppercase;line-height:1em;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-d4a0817.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-d4a0817{text-align:center;font-family:"Montserrat", Sans-serif;font-size:0.9rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-45054f4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-8d62cbd{--display:flex;--min-height:70vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-8d62cbd:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-8d62cbd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0007_Hardlopen.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-8d62cbd:hover::before, .elementor-68 .elementor-element.elementor-element-8d62cbd:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-8d62cbd:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-8d62cbd > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-8d62cbd > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#00000000;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-8d62cbd:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-8d62cbd, .elementor-68 .elementor-element.elementor-element-8d62cbd::before{--overlay-transition:2s;}.elementor-68 .elementor-element.elementor-element-2f44341{text-align:center;}.elementor-68 .elementor-element.elementor-element-2f44341 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:900;text-transform:uppercase;line-height:1em;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-8c95505.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-8c95505{text-align:center;font-family:"Montserrat", Sans-serif;font-size:0.9rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-029dd67{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-a695f3b{--display:flex;--min-height:70vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-a695f3b:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-a695f3b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fitness-ridderkerk.nl/wp-content/uploads/2026/06/0009_HIIT.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-68 .elementor-element.elementor-element-a695f3b:hover::before, .elementor-68 .elementor-element.elementor-element-a695f3b:hover > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-a695f3b:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-a695f3b > .elementor-background-slideshow:hover::before, .elementor-68 .elementor-element.elementor-element-a695f3b > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#00000000;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-a695f3b:hover{--overlay-opacity:0.5;}.elementor-68 .elementor-element.elementor-element-a695f3b, .elementor-68 .elementor-element.elementor-element-a695f3b::before{--overlay-transition:2s;}.elementor-68 .elementor-element.elementor-element-6463f54{text-align:center;}.elementor-68 .elementor-element.elementor-element-6463f54 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:900;text-transform:uppercase;line-height:1em;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-0e990b9.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-0e990b9{text-align:center;font-family:"Montserrat", Sans-serif;font-size:0.9rem;font-weight:500;}.elementor-68 .elementor-element.elementor-element-54b96bf{--e-n-carousel-swiper-slides-to-display:4;--e-n-carousel-swiper-offset-size:40px;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-dots-normal-color:var( --e-global-color-text );--e-n-carousel-swiper-pagination-spacing:30px;}.elementor-68 .elementor-element.elementor-element-0dc8431{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 5px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:5px;--border-left-width:0px;border-color:var( --e-global-color-accent );--border-color:var( --e-global-color-accent );--padding-top:100px;--padding-bottom:0px;--padding-left:100px;--padding-right:50px;--e-con-transform-transition-duration:500ms;}.elementor-68 .elementor-element.elementor-element-87f9df2 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:2.5rem;font-weight:800;text-transform:uppercase;line-height:0.7em;letter-spacing:1px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-ff41345{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-68 .elementor-element.elementor-element-be73a8c{--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;border-style:solid;--border-style:solid;border-width:0px 0px 0px 5px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:5px;border-color:var( --e-global-color-accent );--border-color:var( --e-global-color-accent );--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-68 .elementor-element.elementor-element-be73a8c:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-be73a8c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#121212;}.elementor-68 .elementor-element.elementor-element-86e3e83{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;font-family:"Montserrat", Sans-serif;font-size:1.2rem;font-weight:500;line-height:1.6rem;letter-spacing:0.6px;color:var( --e-global-color-text );}.elementor-68 .elementor-element.elementor-element-2c7c589{--display:flex;--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-68 .elementor-element.elementor-element-8430032{--min-height:40vh;--padding-top:40px;--padding-bottom:40px;--padding-left:50px;--padding-right:50px;}.elementor-68 .elementor-element.elementor-element-36abc01{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-68 .elementor-element.elementor-element-14901f4 .elementor-heading-title{font-size:3.5rem;}.elementor-68 .elementor-element.elementor-element-4e9820d .elementor-heading-title{font-size:1.6rem;}.elementor-68 .elementor-element.elementor-element-1bf5ab5{--padding-top:50px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-28ccf47{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-268b0ca{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-68 .elementor-element.elementor-element-d3201e7.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-d3201e7{--min-height:20vh;--border-radius:10px 10px 0px 0px;}.elementor-68 .elementor-element.elementor-element-be802c9.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-be802c9{--min-height:14vh;--border-radius:10px 10px 0px 0px;}.elementor-68 .elementor-element.elementor-element-c65c08f.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-c65c08f{--border-radius:0px 0px 10px 10px;}.elementor-68 .elementor-element.elementor-element-c5e3a83.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-c5e3a83{text-align:start;}.elementor-68 .elementor-element.elementor-element-c5e3a83 .elementor-heading-title{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-68 .elementor-element.elementor-element-9437c19.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-9437c19{text-align:start;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-68 .elementor-element.elementor-element-fc4d6e3.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-fc4d6e3{text-align:start;}.elementor-68 .elementor-element.elementor-element-f10c349.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-f10c349{text-align:start;}.elementor-68 .elementor-element.elementor-element-e8198dc{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-68 .elementor-element.elementor-element-b408191.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-b408191{--min-height:20vh;--border-radius:10px 10px 0px 0px;}.elementor-68 .elementor-element.elementor-element-33bc88d.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-33bc88d{--border-radius:0px 0px 10px 10px;}.elementor-68 .elementor-element.elementor-element-87b6343.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-87b6343{text-align:start;}.elementor-68 .elementor-element.elementor-element-87b6343 .elementor-heading-title{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-68 .elementor-element.elementor-element-a6903c3.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-a6903c3{text-align:start;}.elementor-68 .elementor-element.elementor-element-651c32f.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-651c32f{text-align:start;}.elementor-68 .elementor-element.elementor-element-e79dd2d.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-e79dd2d{text-align:start;}.elementor-68 .elementor-element.elementor-element-6cc2797.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-6cc2797{--min-height:13vh;--border-radius:0px 0px 10px 10px;}.elementor-68 .elementor-element.elementor-element-9b255ae{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-6c59a9b.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-6c59a9b{--min-height:20vh;--border-radius:10px 10px 0px 0px;}.elementor-68 .elementor-element.elementor-element-ca8d6ec.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-ca8d6ec{--min-height:20vh;--border-radius:0px 0px 10px 10px;}.elementor-68 .elementor-element.elementor-element-a6938ca.e-con:hover{--e-con-transform-scale:1;}.elementor-68 .elementor-element.elementor-element-a6938ca{--border-radius:0px 0px 10px 10px;}.elementor-68 .elementor-element.elementor-element-7afe7f6.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-7afe7f6{text-align:start;}.elementor-68 .elementor-element.elementor-element-7afe7f6 .elementor-heading-title{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-68 .elementor-element.elementor-element-fea8ca2.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-fea8ca2{text-align:start;}.elementor-68 .elementor-element.elementor-element-124ed39.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-124ed39{text-align:start;}.elementor-68 .elementor-element.elementor-element-a814e40.elementor-element{--align-self:flex-start;}.elementor-68 .elementor-element.elementor-element-a814e40{text-align:start;}.elementor-68 .elementor-element.elementor-element-229227e{--padding-top:50px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-04daa2a{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-9a9b8a9{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:1.1rem;}.elementor-68 .elementor-element.elementor-element-38963b1{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:1.1rem;}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-description{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-68 .elementor-element.elementor-element-2ac769a{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:1.1rem;}.elementor-68 .elementor-element.elementor-element-d390fea{--e-n-carousel-swiper-slides-to-display:2;}.elementor-68 .elementor-element.elementor-element-a6fccc2{--padding-top:50px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-d75c895{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-f150cf3{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-0832632 .elementor-heading-title{font-size:1.5rem;}.elementor-68 .elementor-element.elementor-element-161879d{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-d8f9cc9{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-1a33fb7 .elementor-heading-title{font-size:1.5rem;}.elementor-68 .elementor-element.elementor-element-f65fa26{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-bb8bb6b{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-2ff9a7e .elementor-heading-title{font-size:1.5rem;}.elementor-68 .elementor-element.elementor-element-b2ffcc4{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-3b2b2aa{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-524a83a .elementor-heading-title{font-size:1.5rem;}.elementor-68 .elementor-element.elementor-element-d4a0817{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-8d62cbd{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-2f44341 .elementor-heading-title{font-size:1.5rem;}.elementor-68 .elementor-element.elementor-element-8c95505{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-a695f3b{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-6463f54 .elementor-heading-title{font-size:1.5rem;}.elementor-68 .elementor-element.elementor-element-0e990b9{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-54b96bf{--e-n-carousel-swiper-slides-to-display:2;}.elementor-68 .elementor-element.elementor-element-0dc8431{--padding-top:50px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-ff41345{--padding-top:100px;--padding-bottom:100px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-86e3e83{--container-widget-width:80%;--container-widget-flex-grow:0;width:var( --container-widget-width, 80% );max-width:80%;}.elementor-68 .elementor-element.elementor-element-2c7c589{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-68 .elementor-element.elementor-element-8430032{--min-height:40vh;--padding-top:40px;--padding-bottom:40px;--padding-left:5px;--padding-right:5px;}.elementor-68 .elementor-element.elementor-element-36abc01{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-68 .elementor-element.elementor-element-14901f4{text-align:center;}.elementor-68 .elementor-element.elementor-element-14901f4 .elementor-heading-title{font-size:1.9rem;}.elementor-68 .elementor-element.elementor-element-4e9820d .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-1bf5ab5{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-6119d0f .elementor-heading-title{font-size:1.8rem;line-height:0.8em;}.elementor-68 .elementor-element.elementor-element-28ccf47{--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-68 .elementor-element.elementor-element-02cd0ad .elementor-heading-title{font-size:2rem;}.elementor-68 .elementor-element.elementor-element-c5e3a83 .elementor-heading-title{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-68 .elementor-element.elementor-element-fc4d6e3{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-f10c349{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-87b6343 .elementor-heading-title{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-68 .elementor-element.elementor-element-651c32f{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-e79dd2d{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-3fc9e05 .elementor-heading-title{font-size:2rem;}.elementor-68 .elementor-element.elementor-element-7afe7f6 .elementor-heading-title{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-68 .elementor-element.elementor-element-124ed39{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-a814e40{font-size:1rem;}.elementor-68 .elementor-element.elementor-element-229227e{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-fae318a .elementor-heading-title{font-size:1.8rem;line-height:0.8em;}.elementor-68 .elementor-element.elementor-element-1d36e39{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-cb000e0{padding:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-cb000e0 .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-9a9b8a9{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:0.9rem;}.elementor-68 .elementor-element.elementor-element-ce4fbb3 .elementor-icon{font-size:25px;}.elementor-68 .elementor-element.elementor-element-ce4fbb3 .elementor-icon svg{height:25px;}.elementor-68 .elementor-element.elementor-element-6e57b13{padding:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-6e57b13 .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-38963b1{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:0.8rem;}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-description{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon{font-size:9px;}.elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon-box-title, .elementor-68 .elementor-element.elementor-element-86d600c .elementor-icon-box-title a{font-size:0.7rem;}.elementor-68 .elementor-element.elementor-element-4aec1be{padding:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-4aec1be .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-2ac769a{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon{font-size:9px;}.elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon-box-title, .elementor-68 .elementor-element.elementor-element-95eb001 .elementor-icon-box-title a{font-size:0.7rem;}.elementor-68 .elementor-element.elementor-element-d390fea{--e-n-carousel-swiper-slides-to-display:1;padding:0px 0px 0px 0px;}.elementor-68 .elementor-element.elementor-element-a6fccc2{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-64fbe05 .elementor-heading-title{font-size:1.8rem;line-height:0.8em;}.elementor-68 .elementor-element.elementor-element-45bb1a7{padding:20px 20px 0px 20px;font-size:0.9rem;}.elementor-68 .elementor-element.elementor-element-d75c895{--min-height:50vh;}.elementor-68 .elementor-element.elementor-element-f150cf3{--min-height:50vh;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-0832632 .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-161879d{font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-d8f9cc9{--min-height:50vh;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-1a33fb7 .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-f65fa26{font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-bb8bb6b{--min-height:50vh;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-2ff9a7e .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-b2ffcc4{font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-3b2b2aa{--min-height:50vh;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-524a83a .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-d4a0817{font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-8d62cbd{--min-height:50vh;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-2f44341 .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-8c95505{font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-a695f3b{--min-height:50vh;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-68 .elementor-element.elementor-element-6463f54 .elementor-heading-title{font-size:1.3rem;}.elementor-68 .elementor-element.elementor-element-0e990b9{font-size:0.8rem;}.elementor-68 .elementor-element.elementor-element-54b96bf{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-offset-size:0px;}.elementor-68 .elementor-element.elementor-element-0dc8431{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-68 .elementor-element.elementor-element-87f9df2 .elementor-heading-title{font-size:1.8rem;line-height:0.8em;}.elementor-68 .elementor-element.elementor-element-ff41345{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-be73a8c{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-68 .elementor-element.elementor-element-86e3e83{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:0.9rem;}.elementor-68 .elementor-element.elementor-element-2c7c589{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-68 .elementor-element.elementor-element-d596cea{--width:25%;}.elementor-68 .elementor-element.elementor-element-268b0ca{--width:24.491%;}.elementor-68 .elementor-element.elementor-element-e8198dc{--width:25%;}.elementor-68 .elementor-element.elementor-element-9b255ae{--width:25%;}}@media(max-width:1024px) and (min-width:768px){.elementor-68 .elementor-element.elementor-element-d596cea{--width:100%;}.elementor-68 .elementor-element.elementor-element-268b0ca{--width:100%;}.elementor-68 .elementor-element.elementor-element-e8198dc{--width:100%;}.elementor-68 .elementor-element.elementor-element-9b255ae{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f150cf3 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d8f9cc9 *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb8bb6b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3b2b2aa *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d62cbd *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a695f3b *//* ========================================== 1. DE HOOFDCONTAINER (.hover-kaart) ========================================== */ .hover-kaart { position: relative; overflow: hidden; display: flex !important; /* Forceert de flexbox layout */ flex-direction: column; justify-content: flex-end; /* Zorgt dat de tekst altijd onderin start */ transition: transform 0.4s ease; /* Optioneel: laat de hele kaart subtiel reageren */ } /* De gradient overlay die infadet bij hover */ .hover-kaart::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient van 85% zwart onderin naar volledig transparant bovenin */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; /* Zorgt dat de overlay niet klikbaar is */ z-index: 1; } /* Zorg dat alle directe widgets binnen de container boven de gradient overlay zweven */ .hover-kaart > .e-con, .hover-kaart > .elementor-widget { position: relative; z-index: 2; } /* ========================================== 2. DE TITEL (.hover-kaart-titel) ========================================== */ .hover-kaart-titel { /* De titel hoeft in rust weinig styling, omdat hij automatisch mee omhoog getrokken wordt zodra de uitleg eronder verschijnt. We voegen een transition toe voor eventuele kleurveranderingen. */ transition: color 0.4s ease; } /* ========================================== 3. DE UITLEG (.hover-kaart-uitleg) ========================================== */ .hover-kaart-uitleg { max-height: 0; /* Verbergt de hoogte in ruststand */ opacity: 0; /* Maakt de tekst onzichtbaar */ margin-top: 0 !important; /* Geen ruimte tussen titel en uitleg in ruststand */ transform: translateY(20px); /* Staat initieel 20px lager voor het 'omhoog schuif' effect */ overflow: hidden; /* Zorgt voor de rustige, vloeiende beweging */ transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease, margin 0.4s ease !important; } /* ========================================== 4. HOVER INTERACTIES (De magie) ========================================== */ /* Als er op de KAART wordt gehoverd, activeer de gradient */ .hover-kaart:hover::before { opacity: 1; } /* Als er op de KAART wordt gehoverd, laat de UITLEG tevoorschijn komen */ .hover-kaart:hover .hover-kaart-uitleg { max-height: 300px; /* Ruime max-height zodat alle tekst er altijd in past */ opacity: 1; margin-top: 15px !important; /* Creëert rustig de ruimte tussen titel en uitleg */ transform: translateY(0); /* Schuift elegant naar zijn originele positie */ } /* Optioneel: Als je wilt dat de titel van kleur verandert bij hover (bijv. naar goud/geel) */ /* .hover-kaart:hover .hover-kaart-titel h2 { color: #ffcc00; } *//* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-90cbec1 *//* De hoofdcontainer */ .rooster-systeem-modern { width: 100%; background-color: #000000; /* Gitzwart */ font-family: 'Montserrat', sans-serif; padding: 30px 0; } /* 1. Minimalistische Tekst Tabs (Gecentreerd) */ .rooster-tabs-knoppen { display: flex; gap: 35px; padding-bottom: 20px; margin-bottom: 35px; border-bottom: 1px solid #1a1a1a; justify-content: center; flex-wrap: wrap; } .rooster-vierkant-tab { background: transparent !important; border: none !important; padding: 0 !important; height: auto; width: auto; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all 0.2s ease; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } .tab-dag-nummer { font-size: 2rem; font-weight: 900; color: #ffffff; line-height: 1.1; transition: color 0.2s ease; } .tab-dag-naam { font-size: 0.85rem; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease; } .rooster-vierkant-tab:hover .tab-dag-nummer, .rooster-vierkant-tab:hover .tab-dag-naam { color: #2be000 !important; } .rooster-vierkant-tab.actief { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } .rooster-vierkant-tab.actief .tab-dag-nummer, .rooster-vierkant-tab.actief .tab-dag-naam { color: #2be000 !important; } /* 2. De Kaarten (Lessen) met 5px linker rand */ .les-rij-kader { display: grid; grid-template-columns: 90px 2fr 1.2fr 1fr; gap: 25px; align-items: center; border-radius: 14px; padding: 18px 22px; margin-bottom: 14px; background-color: #121212; /* Diep, luxe donker antraciet */ /* VET: Alleen een dikke gifgroene rand aan de linkerkant */ border: 1px solid rgba(255, 255, 255, 0.02); border-left: 5px solid #2be000 !important; } /* Kolom 1: De Foto */ .kolom-afbeelding { display: flex; align-items: center; } .les-img { width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; object-fit: cover !important; object-position: center center !important; border-radius: 12px !important; } /* Kolom 2: Grote Lesnaam + Trainer */ .kolom-naam-trainer { display: flex; flex-direction: column; gap: 4px; } .les-titel { color: #ffffff; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; } .les-trainer { color: #aaaaaa; font-size: 1rem; font-weight: 400; text-transform: none; } /* Kolom 3: Tijd Badge (Gifgroen gevuld) */ .kolom-tijd { display: flex; justify-content: center; } .les-tijd-badge { background-color: #2be000; color: #000000; padding: 8px 18px; border-radius: 8px; font-size: 1rem; font-weight: 900; letter-spacing: 0.5px; text-align: center; display: inline-block; } /* Kolom 4: Status Knop */ .kolom-status { display: flex; justify-content: flex-end; } .les-status-knop { padding: 8px 20px; border-radius: 8px; font-size: 0.95rem; font-weight: 900; text-transform: uppercase; text-align: center; min-width: 85px; } /* OPEN Status */ .status-open { background-color: #121212; border: 2px solid #2be000; color: #2be000; } /* VOL Status */ .status-vol { background-color: #ff0000; border: 2px solid #ff0000; color: #ffffff; } /* Rustdag tekst */ .rooster-rustdag-box p { font-family: 'Montserrat', sans-serif; } /* Mobiele optimalisatie (Telefoons) */ @media (max-width: 767px) { /* Zorgt dat de datumknoppen dichter op elkaar staan en kleiner worden zodat het op 1 regel past */ .rooster-tabs-knoppen { gap: 12px !important; /* Minder ruimte tussen de knoppen */ padding-bottom: 15px; margin-bottom: 25px; } .tab-dag-nummer { font-size: 1.3rem !important; /* Was 2rem, nu compact op mobiel */ } .tab-dag-naam { font-size: 0.7rem !important; /* Iets kleinere letters voor ma, di, wo, etc. */ letter-spacing: 0px !important; } /* De leskaarten zelf transformeren naar een mobiele layout */ .les-rij-kader { grid-template-columns: 1fr; text-align: center; gap: 15px; padding: 20px; } .les-titel { font-size: 1.2rem; !important; } .kolom-afbeelding, .kolom-tijd, .kolom-status { justify-content: center; } .les-status-knop, .les-tijd-badge { width: 100%; max-width: 200px; } } @media (max-width: 1024px) { .les-titel { font-size: 1.2rem; } .les-tijd-badge { font-size: 0.8rem; } }/* End custom CSS */