:root {
	/*--line-height: 163%;*/

	--font-outfit: "Outfit", sans-serif;
	--font-inria: "Inria Sans", serif;
	--font-size: 18px;

	--font-regular: normal normal var(--font-size)/var(--line-height) var(--font-outfit);
	--font-bold: bold normal var(--font-size)/var(--line-height) var(--font-outfit);
	--font-headings: normal normal var(--font-size)/var(--line-height) var(--font-inria);
}

.blockContainer table {
	width: 100%;
}

.blockContainer ul {
	line-height: 125%;
}

.blockContainer :is(h1, h2, h3, h4) {
	font: var(--font-headings);
	font-weight: bold;
}

.blockContainer h1 {
	font-size: 2.18rem;
	margin-bottom: 10px;
}

.blockContainer h2 {
	font-size: 1.6875rem;
	margin-bottom: 10px;
}

.blockContainer h3 {
	font-size: 1.6rem;
}

.blockContainer h4 {
	font-size: 1.4rem;
}

.blockContainer.blockColor-2 :is(a, p, h1, h2, h3, h4),
.blockContainer.blockColor-0 :is(a, p, h1, h2, h3, h4) {
	color: var(--color-06);
}

.blockContainer div h2 {
	font-size: 2rem;
}

/* ** Kleuren **
	-1 Geen
	 0 Wit
	 1 Zwart
	 2 Grijs
	 3 Lichtblauw
	 4 Donkerblauw
*/



/* GEEN */
.blockContainer.blockColor--1,
.superBlockContainer.blockColor--1,
.blockColor--1 .blockItem .ckEditor {
	background-color: transparent;
}

/* WIT */
.blockContainer.blockColor-0,
.rounded-corner-wrapper.blockColor-0,
.superBlockContainer.blockColor-0,
.blockColor-0 .blockItem .ckEditor {
	background-color: var(--color-00);
}

/* ZWART */
.blockContainer.blockColor-1,
.rounded-corner-wrapper.blockColor-1,
.superBlockContainer.blockColor-1,
.blockColor-1 .blockItem .ckEditor {
	background-color: var(--color-01);
}

/* GRIJS */
.blockContainer.blockColor-2,
.rounded-corner-wrapper.blockColor-2,
.superBlockContainer.blockColor-2,
.blockColor-2 .blockItem .ckEditor {
	background-color: var(--color-04);
}

.blockContainer.blockColor--1 :is(p, h1, h2, h3, h4, a),
.superBlockContainer.blockColor--1 :is(p, h1, h2, h3, h4, a),
.blockColor--1 .blockItem .ckEditor,
.blockContainer.blockColor-0 :is(p, h1, h2, h3, h4, a),
.superBlockContainer.blockColor-0 :is(p, h1, h2, h3, h4, a),
.blockColor-0 .blockItem .ckEditor,
.blockContainer.blockColor-2 :is(p, h1, h2, h3, h4, a),
.superBlockContainer.blockColor-2 :is(p, h1, h2, h3, h4, a),
.blockColor-2 .blockItem .ckEditor {
	color: var(--color-03);
}

/* LICHTBLAUW */
.blockContainer.blockColor-3,
.rounded-corner-wrapper.blockColor-3,
.superBlockContainer.blockColor-3,
.blockColor-3 .blockItem .ckEditor {
	background-color: var(--color-02);
}

/* DONKERBLAUW */
.blockContainer.blockColor-4,
.rounded-corner-wrapper.blockColor-4,
.superBlockContainer.blockColor-4,
.blockColor-4 .blockItem .ckEditor {
	background-color: var(--color-03);
}

.blockContainer.blockColor-1 :is(p, h1, h2, h3, h4, a),
.superBlockContainer.blockColor-1 :is(p, h1, h2, h3, h4, a),
.blockColor-1 .blockItem .ckEditor,
.blockContainer.blockColor-4 :is(p, h1, h2, h3, h4, a),
.superBlockContainer.blockColor-4 :is(p, h1, h2, h3, h4, a),
.blockColor-4 .blockItem .ckEditor {
	color: var(--color-00);
}

.blockContainer div h2 {
	font-size: 1.95rem;
}

.blockContainer:has(.blockColor--1, .blockColor-0, .blockColor-1, .blockColor-2, .blockColor-3, .blockColor-4) a.button,
.blockContainer.blockColor-0 a.button,
.blockContainer.blockColor-1 a.button,
.blockContainer.blockColor-2 a.button,
.blockContainer.blockColor-3 a.button,
.blockContainer.blockColor-4 a.button {

}

.blockContainer.blockColor--1 a.button,
.blockContainer.blockColor-0 a.button,
.blockContainer.blockColor-1 a.button,
.blockContainer.blockColor-2 a.button,
.blockContainer.blockColor-3 a.button,
.blockContainer.blockColor-4 a.button {
	background-color: var(--color-00);
	border: var(--color-00) solid 1px;
	border-radius: 20px;
	color: var(--color-03);
	display: inline-block;
	font-size: 1rem;
	padding: 6px 30px;
	text-transform: revert;
	transition: background-color .3s, color .3s;
	width: auto;
}

.blockContainer.blockColor-0 a.button {
	background-color: var(--color-07);
	color: var(--color-00);
}

.blockContainer.blockColor--1 a.button:hover,
.blockContainer.blockColor-0 a.button:hover,
.blockContainer.blockColor-1 a.button:hover,
.blockContainer.blockColor-2 a.button:hover,
.blockContainer.blockColor-3 a.button:hover,
.blockContainer.blockColor-4 a.button:hover {
	background-color: var(--color-03);
	border: var(--color-00) solid 1px;
	color: var(--color-00);
}

.smallTextGrey {
	color: var(--color-09);
	font-size: 0.6667rem;
	line-height: 0;
}

a.download {
	border-bottom: 1px solid var(--color-02);
	color: var(--color-03);
	display: block;
	font: var(--font-inria);
	padding: 15px 0;
	position: relative;
	text-decoration: none;
	font-size: 1.5rem;
}

p a.download:first-child {
	border-top: 1px solid var(--color-02);
}

a.download:before {
	background-color: currentColor;
	color: var(--color-02);
	content: '';
	display: inline-block;
	float: left;
	height: 0;
	mask-image: var(--icon-fa-download);
	padding-bottom: 20px;
	position: absolute;	right: 0;
	top: 20px;
	width: 20px;
	-webkit-mask-image: var(--icon-fa-download);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

p.largeText {
	font: var(--font-headings);
	font-size: 2.77rem;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.blockContainer h1 {
		font-size: 1.8rem;
		line-height: 1.15;
	}

	.blockContainer h2,
	.blockContainer div h2 {
		font-size: 1.4rem;
		line-height: 1.2;
	}
}