.elementor-kit-7{--e-global-color-primary:#293646;--e-global-color-secondary:#CD1719;--e-global-color-text:#293646;--e-global-color-accent:#FEF074;--e-global-color-524b6f5:#FFFFFF;--e-global-color-2d99a9b:#3E4A58;--e-global-color-c5ec5fe:#E9EAEC;--e-global-color-a3b959d:#949AA2;--e-global-typography-primary-font-family:"Display";--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:60px;--e-global-typography-secondary-font-family:"Display";--e-global-typography-secondary-font-size:35px;--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-line-height:40px;--e-global-typography-text-font-family:"Display";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:25px;--e-global-typography-accent-font-family:"Display";--e-global-typography-accent-font-size:22px;--e-global-typography-accent-font-weight:800;--e-global-typography-accent-line-height:27px;background-color:var( --e-global-color-2d99a9b );font-family:"Display", Sans-serif;font-size:20px;font-weight:400;line-height:25px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Display", Sans-serif;font-size:22px;font-weight:800;line-height:27px;color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;padding:12px 25px 12px 25px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-2d99a9b );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-accent );}.elementor-kit-7 a:hover{color:var( --e-global-color-524b6f5 );}.elementor-kit-7 h1{font-family:"Display", Sans-serif;font-size:70px;font-weight:800;line-height:75px;}.elementor-kit-7 h2{font-family:"Display", Sans-serif;font-size:50px;font-weight:800;line-height:60px;}.elementor-kit-7 h3{font-family:"Display", Sans-serif;font-size:35px;font-weight:800;line-height:40px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:40px;--e-global-typography-primary-line-height:55px;--e-global-typography-secondary-font-size:30px;}.elementor-kit-7 h1{font-size:50px;line-height:55px;}.elementor-kit-7 h2{font-size:40px;line-height:55px;}.elementor-kit-7 h3{font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --wit:#ffffff; --H1:60px; }
/* Start custom CSS *//* =====================================================================
   Alumar — eigen CSS van de kit
   Bijgewerkt 15 oktober 2026.
   Volgorde: wat overal geldt eerst, daarna per onderdeel.
   Kleuren altijd via de globale variabelen, nooit als losse hexcode.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Tekst
   --------------------------------------------------------------------- */

/* 1.1  Vet is hier het zwaarste gewicht van Red Hat Display. */
strong,
b {
    font-weight: 800 !important;
}

/* 1.2  Gele markering in lopende tekst.
        De achtergrond is een verloop en geen background-color, zodat
        background-size van 0 naar 100% kan lopen. Dat geeft de veeg van links
        naar rechts, als een markeerstift. De ruststand staat al op 100%, dus
        draait de animatie niet, dan staat de markering er gewoon meteen. */
.geel,
mark {
    color: var(--e-global-color-2d99a9b);
    background-color: transparent;
    background-image: linear-gradient(var(--e-global-color-accent), var(--e-global-color-accent));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    padding: 0 5px;
    animation: al-markeer .55s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes al-markeer {
    from { background-size: 0 100%; }
    to   { background-size: 100% 100%; }
}

/* 1.3  Staan er meerdere markeringen achter elkaar, zoals in de kop op Home,
        dan komen ze om beurt op in plaats van alle zes tegelijk. */
mark:nth-of-type(2) { animation-delay: .10s; }
mark:nth-of-type(3) { animation-delay: .20s; }
mark:nth-of-type(4) { animation-delay: .30s; }
mark:nth-of-type(5) { animation-delay: .40s; }
mark:nth-of-type(6) { animation-delay: .50s; }

/* 1.4  Wie in zijn systeem minder beweging vraagt, krijgt de markering
        meteen en zonder veeg. */
@media (prefers-reduced-motion: reduce) {
    .geel,
    mark {
        animation: none;
    }
}


/* ---------------------------------------------------------------------
   2. Knoppen en tabs
   --------------------------------------------------------------------- */

/* 2.1  Afronding van een knop en een tabtitel bij hover. */
.elementor-button:hover,
.e-n-tab-title:hover,
.e-n-tab-title[aria-selected="true"] {
    border-radius: 10px !important;
}

/* 2.2  De tabtitel boven de tabinhoud houden. */
.e-n-tab-title {
    z-index: 3;
}


/* ---------------------------------------------------------------------
   3. Het juridische document van Complianz
        Kan niet in de bouwer: de plugin rendert deze HTML zelf via een
        shortcode. Het document staat op het lichtgrijze blok, dus donkere
        tekst. Primair haalt daar 10,2:1. Geel zou 1,03:1 halen, dus de links
        zijn hier ook donker.
   --------------------------------------------------------------------- */

#cmplz-document {
    color: var(--e-global-color-primary);
}

#cmplz-document p,
#cmplz-document li {
    margin: 0 0 20px;
}

#cmplz-document h2 {
    margin: 50px 0 20px;
    color: var(--e-global-color-2d99a9b);
    font-size: 35px;
    font-weight: 800;
    line-height: 40px;
}

#cmplz-document h3,
#cmplz-document .cmplz-subtitle {
    margin: 0 0 12px;
    color: var(--e-global-color-2d99a9b);
    font-size: 22px;
    font-weight: 800;
    line-height: 27px;
}

#cmplz-document .cmplz-subtitle {
    margin-top: 25px;
}

#cmplz-document ul {
    margin: 0 0 20px;
    padding-left: 25px;
}

#cmplz-document a {
    color: var(--e-global-color-primary);
    text-decoration: underline;
}

#cmplz-document a:hover,
#cmplz-document a:focus {
    color: var(--e-global-color-2d99a9b);
}

#cmplz-document details {
    margin: 0 0 12px;
    padding: 25px;
    border: 1px solid var(--e-global-color-2d99a9b);
}

#cmplz-document summary {
    cursor: pointer;
}

#cmplz-document .name-header,
#cmplz-document .function-header,
#cmplz-document .retention-header {
    font-weight: 800;
}


/* ---------------------------------------------------------------------
   4. Het tandwiel naast Cookiebeleid in de footer
        Dit is een kale <button>, geen knopwidget, dus de bouwer bestuurt hem
        niet. background en color moeten expliciet voor hover, focus en active:
        de reset van hello-elementor zet daar anders een magenta vlak achter.
        De .elementor-kit-7 draagt button mee omdat de thema-stijl sinds 15 oktober 2026
        élke kale <button> opmaakt. Zonder dat extra stukje wint die knopstijl
        en krijgt het tandwiel een donkerblauw vlak met 25px padding.
   --------------------------------------------------------------------- */

.elementor-kit-7 button.al-cookieknop {
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    vertical-align: -3px;
    line-height: 0;
}

.elementor-kit-7 button.al-cookieknop:hover,
.elementor-kit-7 button.al-cookieknop:focus,
.elementor-kit-7 button.al-cookieknop:focus-visible,
.elementor-kit-7 button.al-cookieknop:active {
    background: none;
    background-color: transparent;
    color: var(--e-global-color-accent);
}

/* 4.1  Het tandwiel verschijnt pas als er ook echt een cookiemelding is.
        De knop werkt via de gedelegeerde handler van Complianz. Heeft de site
        geen toestemming nodig, dan laadt die JS niet en doet de knop niets; een
        tandwiel dat niets doet is erger dan geen tandwiel. Kent een browser
        :has() niet, dan blijft de knop verborgen, en dat is de veilige kant. */
.al-cookieknop {
    display: none;
}

body:has(.cmplz-cookiebanner) .al-cookieknop {
    display: inline-block;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Display';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Display';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Display';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Display';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Display';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Display';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-Black.woff2') format('woff2');
}
@font-face {
	font-family: 'Display';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://alumar.be/wp-content/uploads/2026/05/RedHatDisplay-Italic.woff2') format('woff2');
}
/* End Custom Fonts CSS */