/*Globale overwrite voor border-radius op alle elementen (deze is nu conform huisstijl op 0) & voor text kleur*/
:root {
    --border-radius: 0px;
    --utrecht-document-color: #333 !important;
}

/*Font styling*/
h1,
h2,
h3 {
    text-transform: uppercase;
}

h4 {
    color: #e20d18;
}

/*Font aanpassing van producten/diensten blokje / CTA*/
h3 span.link.link__text {
    font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
}

/*Rode achtergrond navigatie*/
.header {
    background-color: #e20d18;
    margin-bottom: 0px;
    color: #FFFFFF !important;
}

/*Iets meer ruimte aan het witte welkomst blok;*/
.grid__welcome.plugin {
    padding: 2rem;
}

/*Fix voor raar haakje bij dropdowns*/
.header .primary-navigation.primary-navigation__authenticated .subpage-list:before {
    display: none;
}

.primary-navigation.primary-navigation__main .subpage-list:before,
.primary-navigation.primary-navigation__authenticated .subpage-list:before {
    display: none;
}

.header .primary-navigation .button--transparent.primary-navigation--toggle.flatpickr-clear,
.primary-navigation .button.button--transparent.primary-navigation--toggle {
    color: #FFF;
}

.header .primary-navigation:not(.primary-navigation--dismissed)[class*="--open"] .primary-navigation__list-item .button.primary-navigation--toggle,
.primary-navigation:not(.primary-navigation--dismissed)[class*="--open"] .primary-navigation__list-item .primary-navigation--toggle.flatpickr-clear {
    color: #FFF;
}

/*Fix voor menubalk bugs*/
.header nav.header__actions {
    padding: 0;
}

.header nav.header__actions .form {
    gap: 0;
}

/*Header afbeelding breedte*/
.main-image {
    max-width: 95%;
}

/*Banner styling voor zogenoemde park lijn*/
.banner {
    position: relative;
}

/*Dit is de rode park lin die boven op de header-image zit*/
.banner:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
    min-height: 30%;
    width: 100%;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg width='877' height='375' viewBox='0 0 877 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M874.05 2.5L874.061 300.653C860.6 293.897 847.764 285.956 835.707 276.921L835.705 276.92L788.673 241.741C707.182 180.794 586.713 194.371 520.846 271.924L520.845 271.925L489.411 308.966C425.296 384.458 310.793 394.06 235.004 330.327L234.998 330.322L83.014 203.241C27.4571 156.659 -1.98326 77.0275 3.05524 2.5H874.05Z' stroke='%23E20E18' stroke-width='5'/%3E%3C/svg%3E") no-repeat 101% -5px;
}

/*Dit is de het rode vlak achter de header-image*/
.banner:after {
    content: "";
    overflow: hidden;
    position: absolute;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg width='877' height='375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M876.55 0H.73c-5.864 75.874 23.844 157.503 80.678 205.157L233.395 332.24c76.842 64.619 192.915 54.885 257.922-21.655l31.434-37.043c65.012-76.546 183.992-89.955 264.424-29.799l47.033 35.179a256.364 256.364 0 0 0 42.353 25.747L876.55 0Z' fill='%23E20E18'/%3E%3C/svg%3E") no-repeat 101% -5px;
    min-height: 100%;
    background-color: #fff;
    right: 0;
    width: 100%;
    z-index: -1;
}

/*Styling voor bolletjes die voorkomen in een lijst (ul li structure)*/
li::marker {
    color: #e20d18;
}

/*Primary button styling (en hover)*/
.button.button--primary {
    text-transform: uppercase;
    font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
}

.button.button--primary:hover {
    background-color: #FFF;
    color: var(--color-body);
}

.cta-button {
    margin-top: 1rem;
}

/* Verplaats bovenste balk naar rechts  */
@media screen and (min-width: 768px) {
    .accessibility-header {
        padding-right: 100px;
    }

    .accessibility-header__list {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 768px) {
    .grid__main .plugin {
		padding-top: 10px;
	}

.main-image {
	max-width: 100%;
}

	/*Banner aanpassing mobiel*/
	.banner:before {
display:none;
		top: -130px;
		z-index: 0;
	}

	.banner:after {
display:none;
	}

	.main-image {
		height: 200px;
    }

	.search__mobile .form {
		gap: 0;
		padding: 0;
	}

}

/*Pas marge van zoekbalk aan op mobiel */
.search__mobile {
    margin: unset;
}

/*Verberg login 
.login-tab--container {
    display: none;
}*/

/*Icoontje naast naam moet wit blijven */
.nav-login__icon .material-icons-outlined  {
	color: white !important;
}