.blockContainer {
	font: var(--font-regular);
}

.blockContainer.bg-image {
	background-repeat: no-repeat;
	background-position-x: center;
}

.blockContainer input,
.blockContainer textarea,
.blockContainer select,
.blockContainer button {
	font: var(--font-regular);
	font-size: 1rem;
}

.blockContainer p,
.blockContainer ul,
.blockContainer ol,
.blockContainer table {
	font: var(--manrope-regular);
	letter-spacing: 0.075rem;
	margin: 0;
	padding: 10px 0 0 0;
}

.blockContainer p.no-padding,
.blockContainer ul.no-padding,
.blockContainer ol.no-padding,
.blockContainer table.no-padding {
	padding: 0;
}

.blockContainer p.intro-title,
.blockContainer h1.intro-title {
	font: var(--category-regular);
	font-size: clamp(2rem, 6vw, 6.25rem);
	line-height: clamp(2rem, 6vw, 6.25rem);
}

.blockContainer p.intro-subtitle {
	font: var(--manrope-regular);
	font-size: clamp(0.8rem, 6vw, 1.3rem);
	line-height: clamp(0.8rem, 6vw, 1.75rem);
}

.blockContainer p.intro-text {
	font: var(--manrope-regular);
	font-size: 1.35rem;
	line-height: 1.53rem;
}

.blockContainer strong {
	font: var(--manrope-bold);
	letter-spacing: 0.075rem;
}

.blockContainer hr {
	background: none;
	border: 0;
	border-top: 1px solid var(--color-charcoal);
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
}

.blockContainer h1,
.blockContainer h2,
.blockContainer h3,
.blockContainer h4 {
	color: var(--color-savanne);
	font: var(--category-regular);
	padding: 0;
	margin: 0;
}

.blockContainer h1 {
	font-size: 3.25rem;
	line-height: 3.75rem;
}

.blockContainer h2 {
	font-size: clamp(1.75rem, 6vw, 2.75rem);
	line-height: clamp(1.8rem, 6vw, 2.8rem);
}

.blockContainer h3 {
	font-size: clamp(1.5rem, 6vw, 1.75rem);
	line-height: clamp(1.6rem, 6vw, 2.125rem);
}

.blockContainer h4 {
	font-size: clamp(1.2rem, 6vw, 1.5rem);
	line-height: clamp(1.3rem, 6vw, 1.75rem);
}

.blockContainer em,
.blockContainer i,
.blockContainer em strong,
.blockContainer i strong {
	font-style: italic;
}

.blockContainer u,
.blockContainer a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Tabellen tonen zoals ze in de CKEditor staan: zie de .ck-content-regels in
   /css/inzite/cms/ckeditor5/ckeditor5.css. */

.blockContainer figure.table:not(.layout-table) {
	display: table;
	margin: 10px 0 26px 0;
}

.blockContainer figure.table:not(.layout-table) > table {
	width: 100%;
	height: 100%;
	margin: 0;
}

.blockContainer table:not(.layout-table) {
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px double hsl(0, 0%, 70%);
	margin-bottom: 26px;
}

.blockContainer table:not(.layout-table) td,
.blockContainer table:not(.layout-table) th {
	min-width: 2em;
	padding: 0.4em;
	border: 1px solid hsl(0, 0%, 75%);
}

.blockContainer table:not(.layout-table) th {
	text-align: left;
	background: hsla(0, 0%, 0%, 5%);
}

.blockContainer table.layout-table,
.blockContainer table.layout-table td,
.blockContainer table.layout-table th {
	border: none;
}

.blockContainer table.layout-table,
.blockContainer figure.table.layout-table {
	margin-top: 0;
	margin-bottom: 0;
}

.blockContainer ul,
.blockContainer ol {
	margin: 0 0 0 20px;
}

.blockContainer a.button-01,
.ck .button-01,
.blockContainer a.button-02,
.ck .button-02,
.blockContainer a.button-03,
.ck .button-03,
.blockContainer a.button-04,
.ck .button-04,
.blockContainer p.button-04,
.ck p.button-04,
.blockContainer .blockItemType-form form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	text-decoration: none;
	font: var(--category-bold);
	line-height: normal;
	padding: 23px 30px 17px 30px;
	border-radius: 30px;
	letter-spacing: 1.5px;
	transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
	width: fit-content;
}

.blockContainer a.button-01,
.blockContainer a.button-02 {
	margin: 0 5px 5px 0;
}

.blockContainer a.button-03,
.ck .button-03 {
	color: var(--color-savanne);
	padding: initial;
	border: none;
	align-items: baseline;
}

.blockContainer a.button-03::before,
.blockContainer a.button-03::after,
.ck .button-03::before,
.ck .button-03::after {
	content: "";
	display: inline-flex;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: 0 1px;
	font-size: 1rem;
	mask-image: var(--icon-ph-arrow-right);
}

.blockContainer a.button-03::before,
.ck .button-03::before {
	width: 0;
}

.blockContainer a.button-04,
.blockContainer p.button-04,
.ck .button-04 {
	font-size: 0.75rem;
	padding: 10px 16px 5px 16px;
}

.blockContainer a.button-01,
.ck .button-01,
.blockContainer .blockItemType-form form button {
	background-color: var(--color-savanne);
	color: var(--color-cotton-white) !important;
	border: 1px solid var(--color-savanne);
}

.blockContainer a.button-01.active,
.blockContainer a.button-01:hover,
.blockContainer .blockItemType-form form button:hover {
	background-color: var(--color-deep-navy);
	border: 1px solid var(--color-deep-navy);
}

.blockContainer .blockItemType-form form button i {
	font-size: 1.2rem;
	margin-right: 5px;
}

.blockContainer a.button-02,
.ck .button-02 {
	background-color: transparent;
	color: var(--color-cotton-white) !important;
	border: 1px solid var(--color-cotton-white);
}

.blockContainer a.button-02.active,
.blockContainer a.button-02:hover {
	background-color: var(--color-cotton-white);
	color: var(--color-charcoal) !important;
}

.blockContainer a.button-04,
.blockContainer p.button-04,
.ck .button-04 {
	background-color: var(--color-pink);
	color: var(--color-cotton-white) !important;
	border: 1px solid var(--color-pink);
}

.blockContainer a.button-04.active,
.blockContainer a.button-04:hover {
	background-color: var(--color-pink);
	color: var(--color-cotton-white) !important;
}

.blockContainer a.button-03.active,
.blockContainer a.button-03:hover {
	color: var(--color-cotton-white);
}

.blockContainer .articleBlock.layout1 .article a.button-03.active,
.blockContainer .articleBlock.layout1 .article a.button-03:hover {
	color: var(--color-deep-navy);
}

.blockContainer.blockColor-0,
.superBlockContainer.blockColor-0 {
	background-color: var(--color-deep-navy);
	color: var(--color-cotton-white);
}

.blockContainer.blockColor-0 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4),
.superBlockContainer.blockColor-0 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4) {
	color: var(--color-cotton-white);
}

.blockContainer.blockColor-1,
.superBlockContainer.blockColor-1 {
	background-color: var(--color-cotton-white);
	color: var(--color-deep-navy);
}

.blockContainer.blockColor-1 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4),
.superBlockContainer.blockColor-1 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4) {
	color: var(--color-deep-navy);
}

.blockContainer.blockColor-2,
.superBlockContainer.blockColor-2 {
	background-color: var(--color-savanne);
	color: var(--color-cotton-white);
}
.blockContainer.blockColor-2 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4),
.superBlockContainer.blockColor-2 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4) {
	color: var(--color-cotton-white);
}

.blockContainer.blockColor-3,
.superBlockContainer.blockColor-3 {
	background-color: var(--color-pink);
	color: var(--color-deep-navy);
}

.blockContainer.blockColor-3 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4),
.superBlockContainer.blockColor-3 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4) {
	color: var(--color-deep-navy);
}

.blockContainer:has(.marquee).blockColor-3 *,
.superBlockContainer:has(.marquee).blockColor-3 * {
	color: var(--color-savanne);
}

.blockContainer.blockColor-4,
.superBlockContainer.blockColor-4 {
	background-color: var(--color-charcoal);
	color: var(--color-cotton-white);
}

.blockContainer.blockColor-4 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4),
.superBlockContainer.blockColor-4 *:not(strong):not(i):not(em):not(u):not(h1):not(h2):not(h3):not(h4) {
	color: var(--color-cotton-white);
}

.blockContainer .blockItemContent h1,
.blockContainer .blockItemContent h2,
.blockContainer .blockItemContent h3,
.blockContainer .blockItemContent h4,
.blockContainer.ckEditor h1,
.blockContainer.ckEditor h2,
.blockContainer.ckEditor h3,
.blockContainer.ckEditor h4 {
	color: var(--color-savanne);
}

.blockContainer.blockColor-2 .blockItemContent h1,
.blockContainer.blockColor-2.ckEditor h1,
.ck h1,
.blockContainer.blockColor-2 .blockItemContent h2,
.blockContainer.blockColor-2.ckEditor h2,
.ck h2,
.blockContainer.blockColor-2 .blockItemContent h3,
.blockContainer.blockColor-2.ckEditor h3,
.ck h3,
.blockContainer.blockColor-2 .blockItemContent h4,
.blockContainer.blockColor-2.ckEditor h4,
.ck h4 {
	color: var(--color-deep-navy);
}
