:root {
	--bg: #f5f6f0;
	--bg-alt: #ffffff;
	--dark-blue: #12244a;
	--orange: #ffa928;
	--turquoise: #28909E;
	--grey: #595a54;
	--white: #ffffff;
	--border: rgba(18,36,74,.10);
	--border-light: rgba(18,36,74,0.08);
	--font-family: "Plus Jakarta Sans", sans-serif;
	--font-size-main: 18px;
	--font-size-medium: 16px;
	--font-size-small: 14px;
	--line-height-main: 1.8;
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-bold: 700;
	--font-extra-bold: 800;
	--header-height: 70px;
	--wrapper-large: 1250px;
	--wrapper-normal: 1140px;
	--wrapper-small: 800px;
	--radius-small: 6px;
	--radius-card: 16px;
	--radius-large: 20px;
	--shadow: 0 10px 30px rgba(18,36,74,.08);
	--transition: .25s ease-in-out;

}



/* ─── RESET ───────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin:0;
	padding:0;

}


html {
	scroll-behavior:smooth;
	overflow-x:hidden;

}


body {
	padding-top:var(--header-height);
	font-family:var(--font-family);
	font-size:var(--font-size-main);
	font-weight:var(--font-normal);
	line-height:var(--line-height-main);
	color:var(--dark-blue);
	background:var(--bg-alt);
	-webkit-font-smoothing:antialiased;

}


img {
	max-width:100%;
	height:auto;

}


a {
	color:inherit;
	text-decoration:none;

}


button,
input,
textarea {
	font-family:var(--font-family);

}



.visually-hidden {
	display:none;

}



/* ─── LAYOUT ──────────────────────────────────────── */


.wrapper {
	width:90%;
	max-width:var(--wrapper-normal);
	min-width:320px;
	margin:0 auto;
}



.full-width {
	position:relative;
	width:100vw;
	left:50%;
	margin-left:-50vw;

}




/* ─── TYPOGRAFIE ─────────────────────────────────── */


h1 {
	font-size:clamp(2rem,5vw,3.4rem);
	font-weight:var(--font-extra-bold) !important;
	line-height:1.1;
	letter-spacing:-.025em;
	color:var(--dark-blue);
	margin-bottom:25px !important;

}

h2 {
	font-size:clamp(1.6rem,3.5vw,2.4rem);
	font-weight:var(--font-bold);
	line-height:1.15;
	letter-spacing:-.02em;
	color:var(--dark-blue);
	margin-bottom:20px;

}

h3 {
	font-size:1.1rem;
	font-weight:var(--font-bold);
	color:var(--dark-blue);

}


p {
	font-size:1rem;
	line-height:1.8;
	color:var(--grey);
	margin-bottom:15px;

}

ul
{
	margin-left: 20px;
	margin-bottom:15px;
}

ul li
{
	font-size:1rem;
	line-height:1.8;
	color:var(--grey);
}

strong {
	font-weight:var(--font-bold);

}

main a {
	color:var(--dark-blue);
	text-decoration:underline;
	text-decoration-color:var(--orange);
	text-decoration-thickness:2px;
	text-underline-offset:3px;

}


main a:hover {
	text-decoration-color:var(--turquoise);

}

.highlighted {
	color: var(--turquoise);
	font-weight: var(--font-bold);
}

/* ─── PENSION TABLE ─────────────────────────────── */
.pension-table {
    width:100%;
    max-width:900px;
    border-collapse:collapse;
    margin:2rem 0;
    background:var(--white);
    font-size:.95rem;
    color:var(--dark-blue);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

/* Header */
.pension-table thead th {
    background:var(--dark-blue);
    color:var(--white);
    font-weight:700;
    /* text-align:center; */
    text-align:left;
    padding:1rem;
    border-bottom:3px solid var(--orange);
}

.pension-table thead th:first-child {
    text-align:left;
}

/* Cellen */
.pension-table td {
    padding:.85rem 1rem;
    border-bottom:1px solid var(--border);
    /* text-align:center; */
}

.pension-table td:first-child {
    text-align:left;
    font-weight:600;
}

/* Afwisselende rijen */
.pension-table tbody tr:nth-child(even) {
    background:#f8fafc;
}

/* Hover */
.pension-table tbody tr:hover {
    background:rgba(0,0,0,.04);
}

/* Laatste rij */
.pension-table tbody tr:last-child td {
    border-bottom:none;
}

/* DC kolom */
.pension-table td:nth-child(2) {
    color:var(--dark-blue);
    /* font-weight:600; */
}

/* CB kolom */
.pension-table td:nth-child(3) {
    /* color:var(--turquoise);
    font-weight:700; */
}

/* Mobiel */
@media(max-width:768px) {
    .pension-table {
        font-size:.85rem;
    }

    .pension-table thead th,
    .pension-table td {
        padding:.75rem .5rem;
    }

    .pension-table thead th:first-child {
        width:55%;
    }
}




/* ─── SECTIES ─────────────────────────────────────── */

section {
	position: relative;
	width: 100vw;
	min-width: 320px;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 70px 0;
}



section.grey {
	background:var(--bg);

}


section.white {
	background:var(--bg-alt);

}


.section-inner {
	width:90%;
	max-width:var(--wrapper-normal);
	margin:0 auto;

}

.section-inner .inner-container {
    max-width: var(--wrapper-small);
    overflow: visible;
}


.overline {
	display:flex;
	align-items:center;
	gap:.55rem;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--grey);
	margin-bottom:1rem;

}


.overline::before {
	content:"";
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--turquoise);
	display:block;

}




/* ─── HEADER ─────────────────────────────────────── */


header#pageHeader {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:var(--header-height);
	background:var(--white);
	border-bottom:2px solid var(--border-light);
	z-index:9999;

}



header#pageHeader .wrapper {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;

}




/* ─── LOGO ───────────────────────────────────────── */


.logo {
	display:flex;
	align-items:center;
	flex-shrink:0;

}



.logo a {
	display:flex;
	align-items:center;

}



.logo img {
	height:50px;
	width:auto;
	display:block;

}



/* ─── HOOFDMENU ─────────────────────────────────── */


.mainMenu {
	flex:1;

}

.mainMenu ul {
	list-style:none;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:.2rem;
	margin-bottom: 0;
}

.mainMenu li a {
	display:block;
	padding:.45rem .8rem;
	font-size:.875rem;
	font-weight:500;
	color:var(--grey);
	border-radius:var(--radius-small);
	transition:var(--transition);

}

.mainMenu li a:hover {
	/* color:var(--dark-blue); */
	color:var(--white);
	background: var(--turquoise);
	box-shadow: var(--shadow);
}

.mainMenu li.active a {
	color:var(--dark-blue);
	font-weight:700;
	text-decoration:underline;
	text-decoration-color:var(--orange);
	text-decoration-thickness:2px;
	text-underline-offset:4px;

}


/* ─── TAALWISSEL ─────────────────────────────────── */


.languageSwitcher {
	margin-left:15px;

}

.languageSwitcher ul {
	list-style:none;

}

.languageSwitcher a {
	display:block;
	padding:5px 12px;
	border:1px solid var(--border);
	border-radius:var(--radius-small);
	font-size:.8rem;
	font-weight:700;
	color:var(--grey);
	transition:var(--transition);
	padding: 8px 12px !important;
}

.languageSwitcher a:hover {
	/* background:var(--dark-blue); */
	/* border-color:var(--dark-blue); */

	color:var(--white);
	border-color:var(--turquoise);
	background: var(--turquoise);
	box-shadow: var(--shadow);

}



/* ─── HAMBURGER ─────────────────────────────────── */


.nav-hamburger {
	display:none;
	width:36px;
	height:36px;
	background:none;
	border:none;
	cursor:pointer;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:5px;

}

.nav-hamburger span {
	display:block;
	width:22px;
	height:2px;
	background:var(--dark-blue);
	border-radius:3px;
	transition:transform .2s ease, opacity .2s ease;
}

.nav-hamburger:hover span {
	background: var(--turquoise);
}

.nav-hamburger.is-active span:nth-child(1) {
	transform:translateY(7px) rotate(45deg);
}

.nav-hamburger.is-active span:nth-child(2) {
	opacity:0;
}

.nav-hamburger.is-active span:nth-child(3) {
	transform:translateY(-7px) rotate(-45deg);
}




/* ─── CONTENT BLOKKEN ────────────────────────────── */


section > p:first-of-type {
	max-width:800px;

}



/* ─── VIDEO GRID ─────────────────────────────────── */


.fields-container {
	list-style:none;
	margin:0;
	padding:0;

}

.field-entry {
	list-style:none;

}

.video-container {
    /* width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: calc(50% - 50vw) !important;
    right: auto !important;
    margin: 0 !important;*/
    padding: 70px 0; 
}

.video-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.25rem;
/* 
    width: 90%;
    max-width: var(--wrapper-normal);
    margin: 0 auto;
	margin-top:2rem; */

}



.video-card {
	display:flex;
	flex-direction:column;
	width:100%;
	padding:0;
	border:1px solid var(--border);
	background:var(--white);
	border-radius:var(--radius-card);
	overflow:hidden;
	cursor:pointer;
	text-align:left;
	box-shadow:none;
	transition:var(--transition);

}

.video-card:hover {
	transform:translateY(-5px);
	box-shadow:var(--shadow);
}

.video-card__image {
	position:relative;
	display:block;
	/* aspect-ratio:16 / 9; */
	overflow:hidden;
	background:#d8dce5;

}

.video-card__image img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:.3s ease;
}

.video-card:hover .video-card__image img {
	transform:scale(1.05);
}



/* play knop */
.video-card__play {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:58px;
	height:58px;
	border-radius:50%;
	border:1px solid var(--white);
	display:flex;
	align-items:center;
	justify-content:center;

}

.video-card__play i {
	color:var(--white) !important;
	font-size:20px;
	margin-left:3px;
}

.video-card:hover .video-card__play {
	border-color:var(--turquoise) !important;
}

.video-card:hover .video-card__play i {
	color:var(--turquoise) !important;
}



.video-card__title {
	padding: 25px 22px;
	font-size:18px;
	line-height: 25px;
	font-weight:600;
	color:var(--dark-blue);

}



/* ─── VIDEO LIGHTBOX / DIALOG ────────────────────── */


.video-lightbox {
	width:min(900px,90vw);
	max-width:900px;
	padding:0;
	border:none;
	border-radius:var(--radius-card);
	background:transparent;
	overflow:hidden;
	margin:auto;

}



.video-lightbox::backdrop {
	background:rgba(0,0,0,.75);
	backdrop-filter:blur(5px);

}



.video-lightbox__inner {
	background:var(--white);
	border-radius:var(--radius-card);
	overflow:hidden;
	position:relative;

}



.video-lightbox__player {
	width:100%;
	aspect-ratio:16 / 9;
	background:#000;
	display:flex;
	align-items:center;
	justify-content:center;

}



.video-lightbox__player iframe {
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	border:0;
	display:block;

}



.video-lightbox__close {
	position:absolute;
	right:15px;
	top:15px;
	z-index:5;
	width:42px;
	height:42px;
	border:0;
	border-radius:50%;
	background:var(--orange);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;

}

.video-lightbox__close i {
	color:var(--dark-blue) !important;
	font-size:18px;
}

.video-lightbox__close:hover
{
	background: var(--turquoise);
}

.video-lightbox__close:hover i
{
	color: var(--white) !important;
}



.video-lightbox__title {
	padding:1rem 1.25rem;
	font-weight:700;
	color:var(--dark-blue);

}



/* ─── FAQ ────────────────────────────────────────── */

.faqItems {

	margin:2rem auto 0;

}

.faqItems article {
	max-width:800px;
	border-bottom:1px solid var(--border);
}

.faqItems .question {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding:1.25rem 0;
	cursor:pointer;
	font-size:1rem;
	font-weight:700;
	color:var(--dark-blue);

}

.faqItems .question::after {
    content: "\e3d4";
    font-family: "Phosphor-Thin";
    /* content: "\2b"; /* fa-plus */ */
    /* font-family: "Font Awesome 7 Free"; */
    font-weight: 900;

    width: 28px;
    height: 28px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;
    background: var(--orange);
    color: #111;

    font-size: 14px;
    line-height: 1;

    transition: all .3s ease;
}

/* Open */
.faqItems article.active .question::after {
    /* content: "\f068"; /* fa-minus */ */
    background: var(--turquoise);
    color: var(--white);
}

.faqItems .answer {
	max-height:0;
	overflow:hidden;
	padding:0 0 0 0;
	opacity:0;
	transition:
		max-height .35s ease,
		opacity .25s ease,
		padding .35s ease;

}

.faqItems article.active .answer {
	max-height:500px;
	opacity:1;
	padding:0 48px 1.5rem 0;

}

.faqItems .answer p {
	color:var(--grey);
}



/* ─── ACCORDEON  ─────────────────────────────── */


.accordeon article {
    max-width:800px;
    border-bottom:1px solid var(--border);
}

.accordeon .question {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:1.25rem 0;
    margin:0;
    cursor:pointer;
    font-size:1rem;
    font-weight:600;
    color:var(--dark-blue);
}

.accordeon .question::after {
	content: "\e3d4";
    font-family: "Phosphor-Thin";
    /* content:"\2b"; /* fa-plus */ */
    /* font-family:"Font Awesome 7 Free"; */
    font-weight:300;
    width:28px;
    height:28px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:var(--orange);
    color:#111;
    font-size:18px;
    transition:
        background .3s ease,
        transform .3s ease;
}

.accordeon article.active .question::after {
    /* content:"\f068"; fa-minus */
    /* font-weight:900; */
    background:var(--turquoise);
    color:var(--white);
    transform: rotate(45deg);
    transition: transform var(--transition);
}

.accordeon .question:hover::after{
	background: var(--turquoise);
	color: var(--white);
	box-shadow: var(--shadow);
}

.accordeon .answer {
    max-height:0;
    overflow:hidden;
    padding:0;
    opacity:0;
    transition:
        max-height .35s ease,
        opacity .25s ease,
        padding .35s ease;
}

.accordeon article.active .answer {
    max-height:99999px;
    opacity:1;
    padding:0 48px 1.5rem 0;
}

.accordeon .answer p {
    color:var(--grey);
}

.accordeon .answer a {
    color:var(--dark-blue);
}

.accordeon .answer ul {
    padding-left:1.5rem;
}



/* ─── CAO CATEGORIE MENU ─────────────────────────── */

.edocmancategoriesmenu {
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin:0 0 2rem 0;
	padding:0;
	max-width:800px;

}


.edocmancategoriesmenu li {
	margin:0;
	padding:0;

}


.edocmancategoriesmenu li.parent {
	display: none;
}



.edocmancategoriesmenu a {
	display:inline-flex;
	align-items:center;
	padding:6px 15px;
	border-radius:100px;
	font-size:.8rem;
	font-weight:600;
	border:1px solid rgba(18,36,74,.22);
	background:transparent;
	color:var(--grey);
	cursor:pointer;
	transition:
		background .15s ease,
		color .15s ease,
		border-color .15s ease;
			white-space:nowrap;
			text-decoration:none;

}



/* hover */

.edocmancategoriesmenu a:hover {
	border-color:var(--turquoise);
	color:var(--dark-blue);
	box-shadow: var(--shadow);
}



/* actieve categorie */

.edocmancategoriesmenu li.active a,
.edocmancategoriesmenu a.active {
	background:var(--orange);
	color:#111;
	border-color:var(--orange);

}



/* subcategorie icoontjes/verwijder Joomla opmaak */

.edocmancategoriesmenu sup {
	display: none;

}



/* mobiele weergave */

@media(max-width:600px){
	.edocmancategoriesmenu {
		flex-direction:column;
		align-items:flex-start;
	}

	.edocmancategoriesmenu a {
		width:auto;
	}

}

/* ─── EDOCMAN SEARCH INLINE ─────────────────────── */

.search_notification {
	margin: 25px 0;
	padding: 14px 20px;
	border-left: 4px solid var(--turquoise);
	background: var(--bg-alt);
	box-shadow: var(--shadow);
	border-radius: var(--radius-small);
}

.search_notification p {
	margin: 0;
	font-size: var(--font-size-medium);
	line-height: 1.6;
	color: var(--grey);
	font-weight: var(--font-normal);
}

.search_notification .keyword {
	color: var(--dark-blue);
	font-weight: var(--font-bold);
}

.edocmansearch {
	max-width:800px;
	margin-bottom:1.5rem;
}


.edocmansearch .search_table {
	width:100%;
	border-collapse:collapse;
	display:block;
}


.edocmansearch .search_table tbody {
	display:flex;
	gap:.75rem;
	align-items:center;
}


.edocmansearch .search_table tr {
	display:block;
}


.edocmansearch .search_table td {
	display:block;
	padding:0;
}


/* Zoekveld */

.edocmansearch input[type="text"] {
	width:100%;
	min-width:0;
	padding:11px 16px;
	border:1px solid rgba(18,36,74,.20);
	border-radius:var(--radius-small);
	font-family:'Plus Jakarta Sans', sans-serif;
	font-size:.9rem;
	color:var(--grey);
	background:var(--white);
	outline:none;
	transition:
		border-color .15s ease,
		box-shadow .15s ease;
}


.edocmansearch input[type="text"]:focus {
	border-color:var(--orange);
	box-shadow:0 0 0 3px rgba(255,169,40,.13);

	color:var(--dark-blue);
}

.edocmansearch tr:first-child {
	flex:1;

}

/* Knop */

.edocmansearch .search_button {
	height:100%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:11px 45px 11px 24px;
	border-radius:var(--radius-small);
	background:var(--orange);
	color:var(--dark-blue);
	border:1px solid var(--orange);
	font-weight:600;
	cursor:pointer;
	white-space:nowrap;
	transition:opacity .15s ease;
	position:relative;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23111' stroke-width='35' stroke-linecap='round' d='M220 40a180 180 0 1 0 0 360 180 180 0 0 0 0-360zm130 310 120 120'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 18px center;
	background-size:16px;
}

.edocmansearch .search_button:hover
{
	background-color: var(--turquoise);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='35' stroke-linecap='round' d='M220 40a180 180 0 1 0 0 360 180 180 0 0 0 0-360zm130 310 120 120'/%3E%3C/svg%3E");
	border-color: var(--turquoise);
	color: var(--white);
}


@media(max-width:600px){
	.edocmansearch .search_table tbody {
		flex-direction:column;
		align-items:stretch;
	}

	.edocmansearch .search_button {
		width:100%;
	}

}

/* ─── DOCUMENT LIST ─────────────────────────────── */

.cao-list .document {
	display:flex;
	align-items:stretch;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:var(--radius-large);
	overflow:hidden;
	margin-bottom:1rem;
	transition:box-shadow .18s ease,border-color .18s ease;
	padding: 0;
}

.cao-list .document:hover {

	transform:translateY(-5px);
	box-shadow:var(--shadow);
	border-color:rgba(18,36,74,.18);
	background:var(--white);
}

/* Linker inhoud */

.cao-list .document .inner {
	flex:1;
	display:flex;
	align-items:stretch;
	min-width:0;
	padding: 15px;
}


/* PDF icoon */

.cao-list .document-icon {
	flex-shrink:0;
	width:45px;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	color:var(--dark-blue);
	width: 25px;
  height: 25px;
  margin-right: 5px;
  padding-top: 5px;
}


.cao-list .document-icon svg {
	width:20px;
	height:20px;
}

/* Details */

.cao-list .document-details {
	flex:1;
	min-width:0;
	padding:0 1.25rem 0.1rem 0.5rem;
	display:flex;
	flex-direction:column;
	gap:.35rem;
}


/* Titel */

.cao-list .title-container {
	display:flex;
	align-items:flex-start;
}


.cao-list .document-details .title-container a {
	
	color:var(--dark-blue) !important;
	text-decoration:none;

	font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s ease;
}


.cao-list .document-details .title-container a:hover {
	color:var(--turquoise) !important;
}


/* Categorie */

.cao-list .document-category {
	font-size:.82rem;
	color:var(--grey);
	line-height:1.38;
}


.cao-list .document-category a {
	color:var(--grey);
	text-decoration:none;
}


.cao-list .document-category a:hover {
	color:var(--dark-blue);
}


/* Beschrijving */

.cao-list .document-description {
	font-size:.85rem;
	color:var(--grey);
	line-height:1.5;
}


.cao-list .document-description p {
	margin:0;
	font-size: 1rem !important;
	color: var(--grey) !important;
}


/* Datum */

.cao-list .document-details > p {
	margin:0;
	font-size:.82rem;
	color:var(--grey);
}


.cao-list .downloadbtn {
	flex:0 0 64px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--orange);
	color:#111;
	text-decoration:none;
	transition:background .2s ease,opacity .2s ease;
}


.cao-list .downloadbtn::before {
	content: "\e20a";
    font-family: "Phosphor-Thin";
    font-weight: normal;
    font-size: 20px;
}

/* .cao-list .downloadbtn::before {
	content:"\f019";
	font-family:"Font Awesome 7 Free";
	font-weight:900;
	font-size:20px;
} */

/* .cao-list .downloadbtn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236,136v64a12,12,0,0,1-12,12H32a12,12,0,0,1-12-12V136a12,12,0,0,1,12-12H72a4,4,0,0,1,0,8H32a4,4,0,0,0-4,4v64a4,4,0,0,0,4,4H224a4,4,0,0,0,4-4V136a4,4,0,0,0-4-4H184a4,4,0,0,1,0-8h40A12,12,0,0,1,236,136Zm-110.83-5.17a4,4,0,0,0,5.66,0l48-48a4,4,0,1,0-5.66-5.66L132,118.34V24a4,4,0,0,0-8,0v94.34L82.83,77.17a4,4,0,0,0-5.66,5.66ZM196,168a8,8,0,1,0-8,8A8,8,0,0,0,196,168Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236,136v64a12,12,0,0,1-12,12H32a12,12,0,0,1-12-12V136a12,12,0,0,1,12-12H72a4,4,0,0,1,0,8H32a4,4,0,0,0-4,4v64a4,4,0,0,0,4,4H224a4,4,0,0,0,4-4V136a4,4,0,0,0-4-4H184a4,4,0,0,1,0-8h40A12,12,0,0,1,236,136Zm-110.83-5.17a4,4,0,0,0,5.66,0l48-48a4,4,0,1,0-5.66-5.66L132,118.34V24a4,4,0,0,0-8,0v94.34L82.83,77.17a4,4,0,0,0-5.66,5.66ZM196,168a8,8,0,1,0-8,8A8,8,0,0,0,196,168Z'/%3E%3C/svg%3E") center / contain no-repeat;
} */


.cao-list .downloadbtn:hover {
	background:var(--turquoise);
	color:var(--white);
}


/* Mobiel */

@media(max-width:1015px) {

	.cao-list .document {
		flex-direction:column;
	}

	.cao-list .document .inner {
		width:100%;
	}

	.cao-list .document-icon {
		width:40px;
	}

	.cao-list .document-details {
		padding:1rem;
	}

	.cao-list .downloadbtn {
		flex:0 0 52px;
		width:100%;
	}

	.cao-list .downloadbtn::before {
		font-size:18px;
	}

}


/* ─── BUTTONS ───────────────────────────────────── */


.btn-secondary {
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:13px 24px;
	background:var(--orange);
	color:#111 !important;
	border-radius:var(--radius-small);
	font-size:.875rem;
	font-weight:700;
	border:none;
	cursor:pointer;
	transition:var(--transition);

}



.btn-secondary:hover {
	background:var(--turquoise);
	text-decoration:none;
	color: var(--white) !important;
}

.btn-secondary:hover i
{
	color: var(--white);
}



/* ─── FOOTER ─────────────────────────────────────── */

footer#pageFooter {
    background: var(--white);
    border-top: 1px solid var(--border-light);
    padding: 2rem 0;
}

footer#pageFooter .wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
    align-items: start;
}

footer#pageFooter .logo {
    margin-bottom: .75rem;
}

footer#pageFooter .logo img {
    height: 30px;
}

footer#pageFooter p {
    margin: 0;
    font-size: .75rem;
    color: var(--grey);
    line-height: 1.6;
}


.footerMenu ul {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footerMenu a {
    font-size: .8rem;
    color: var(--grey);
    text-decoration: none;
    transition: color .2s ease;
}

.footerMenu a:hover {
    color: var(--dark-blue);
}

footer#pageFooter .wrapper > p:last-child {
    justify-self: end;
    text-align: right;
}

@media (max-width:750px) {

	footer#pageFooter .wrapper {
		grid-template-columns:1fr;
		text-align:left;
		gap:1.5rem;
	}

	.footerMenu ul {
		flex-direction:column;
		gap:.5rem;
		align-items:flex-start;
	}

	footer#pageFooter .wrapper > * {
		width:100%;
	}

}



/* ─── BACK TO TOP ───────────────────────────────── */


.totop {
	position:fixed;
	right:25px;
	bottom:100px;
	width:50px;
	height:50px;
	background:var(--orange);
	border-radius:50%;
	display:none;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:1000;

}

.totop.show {
	display:flex;

}

.totop i {
	color:#111 !important;

}

.totop:hover
{
	background: var(--turquoise);
	/* transform:translateY(-5px); */
	box-shadow:var(--shadow);
}

.totop:hover i
{
	color: var(--white) !important;
}







/* ─── TABLET / KLEINERE DESKTOP ───────────────────── */


@media (max-width: 1150px) {

	.wrapper {
		width:92%;
	}

	.mainMenu ul {
		gap:0;
	}

	.mainMenu li a {
		padding:.4rem .6rem;
	}


}



/* ─── TABLET ─────────────────────────────────────── */


@media (max-width: 960px) {

	body {
		padding-top:var(--header-height);
	}

	/* header */

	header#pageHeader .wrapper {
		gap:15px;
	}

	.mainMenu {
		display:none;
	}
	.mainMenu.is-open {
		display:block;
		position:absolute;
		top:101%;
		left:0;
		width:100%;
		padding:1rem 4%;
		background:var(--white);
		border-bottom:1px solid var(--border-light);
		box-shadow:0 12px 24px rgba(0,0,0,.08);
	}

	.mainMenu.is-open ul {
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:.25rem;
	}

	.mainMenu.is-open li a {
		padding:10px;
		border-bottom: 1px solid rgba(18,36,74,0.06);
	}

	.languageSwitcher {
		margin-left:auto;
	}

	.nav-hamburger {
		display:flex;
	}


	/* content */

main .wrapper {
	max-width:none;
	width:100%;
}


main article {
	width:100%;
}


.com-content-article__body {
	width:100%;
}


section {
	width:100%;
	padding:5.5rem 0;

}


.section-inner {
	width:90%;
	max-width:var(--wrapper-normal);
	margin:0 auto;

}



	h1 {
		font-size:clamp(2rem,6vw,3rem);
	}


	/* video's */

	.video-grid {
		grid-template-columns:repeat(2,1fr);
	}



}



/* ─── MOBIEL ─────────────────────────────────────── */


@media (max-width:600px) {

	.wrapper {
		width:90%;
	}

	/* spacing */


	section {
		padding:3rem 0;
	}

	.section-inner {
		width:90%;
	}


	/* typography */
	h1 {
		font-size:2rem;
		margin-bottom:20px;
	}


	h2 {
		font-size:1.6rem;
	}


	p {
		line-height:1.7;
	}

	/* video's */

	.video-grid {
		grid-template-columns:1fr;
		gap:1rem;
	}


	.video-card__play {
		width:50px;
		height:50px;
	}


	.video-card__title {
		padding:.85rem 1rem;
	}


	/* dialog */

	.video-lightbox {
		width:95vw;
	}


	.video-lightbox__close {
		width:36px;
		height:36px;
	}


	/* FAQ */

	.faqItems {
		margin-top:1rem;
	}


	.faqItems .question {
		font-size:.95rem;
	}


	.faqItems .answer {
		padding-left:0;
	}


	/* documenten */

	.document-row {
		flex-direction:row;
	}


	.document-content {
		padding:.9rem;
	}


	.document-download {
		width:45px;
	}

}



/* ─── EXTRA KLEINE SCHERMEN ─────────────────────── */


@media (max-width:380px) {

	h1 {
		font-size:1.75rem;
	}


	h2 {
		font-size:1.45rem;
	}


	.video-card__play {
		width:45px;
		height:45px;
	}

	.totop {
		width:42px;
		height:42px;
		right:15px;
		bottom:80px;
	}


}