h1, .h1 {
font-size: calc(1.1rem + 0.2vw); /* was 1.375rem + 1.5vw nu 1.1rem + 0.2vw gelijk aan H1 bij 1200 scherm */
color: #016799; /* extra om de titelkleur artikel aan te passen */
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 1.3rem; /* 2.5 was veel te groot nu 1.3 */
color: #016799; /* extra om de titelkleur artikel aan te passen */
}
}

h2, .h2 {
font-size: calc(1.1rem + 0.1vw); /* was 1.2821rem + 0.3852vw nu 1.1rem + 0.1vw gelijk aan H2 bij 1200 scherm */
color: #016799; /* extra was titelkleur artikel aan te passen */
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 1.2rem; /* 2rem was veel te groot nu 1.2 */
color: #016799; /* extra was om de titelkleur artikel aan te passen */
}
}

h3, .h3 {
font-size: calc(1.0rem + 0.15vw); /* was 1.3rem + 0.6vw nu 1.0rem + 0.15vw gelijk aan H3 bij 1200 scherm */
color: #016799; /* extra om kleur H3 aan te passen */
}
@media (min-width: 1200px) {
h3, .h3 {
font-size: 1.15rem; /* 1.75 was veel te groot 1.15 */
color: #016799; /* extra om kleur H3 aan te passen */
}
}


h4, .h4 {
font-size: calc(1.0rem + 0.1vw); /* was 1.275rem + 0.3vw nu 1.0rem + 0.1vw gelijk aan H3 bij 1200 scherm */
color: #016799; /* extra om kleur H3 aan te passen */
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.1rem; /* 1.5 was veel te groot 1.1 */
color: #016799; /* extra om kleur H4 aan te passen */

}
}


h5, .h5 {
font-size: 1.05rem; /* 1.25rem standaard nu 1.05 aangepast */
color: #016799; /* extra om kleur H5 aan te passen */
}

h6, .h6 {
font-size: 1.0rem; /* 1rem standaard nu 1.0 aangepast */
color: #016799; /* extra om kleur H6 aan te passen */
}
/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */


footer div.mod-footer {
    display: block;
}

footer div.mod-footer div {
    margin: 2rem;
}
@media (min-width: 1024px) {
    footer div.mod-footer {
        display: inline-flex;
    }

/* EXTRA dit is om de te vette tekst minder vet te maken bij titels, was 700 nu 600 in font weigth: var 700 */
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-weight: var(--cassiopeia-font-weight-headings, 600);
}

b, strong {
color: #016799; /* extra om de vetgedrukte tekst een zachtere en eigen kleur geven, blauw op deze site */
font-weight: 600 !important; /* extra om de vetgedrukte tekst iets minder vet te maken font-weight: 600 was 700? */
}
.container-header {
position: relative;
z-index: 10;
background-color: var(--cassiopeia-color-primary);
background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

:root {
--cassiopeia-color-primary: #FFFF2A;  /* kleur 1 links bg 016799 algemene basis kleur links aanpassen */
--cassiopeia-color-link: #000000;       /* 224faa linkkleur, algemene basis kleur van de link aanpassen */
--cassiopeia-color-hover: #016799;    /* kleur 2 rechts 1b578f en hover kleur, ik heb deze nu zelfde als kleur 1, nu 016799 hiermee vervalt ook de werking van de hover kleur */
}
.container-nav {
    justify-content: center !important;
}