@font-face {
	font-family: 'InZpire';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('/fonts/Branding-Semilight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/Branding-Semilight.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/Branding-Semilight.woff') format('woff'), /* Pretty Modern Browsers */
	url('/fonts/Branding-Semilight.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/Branding-Semilight.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-display: swap;
}

@font-face {
	font-family: "InZpireBold";
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('/fonts/Branding-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/Branding-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/Branding-Semibold.woff') format('woff'), /* Pretty Modern Browsers */
	url('/fonts/Branding-Semibold.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/Branding-Semibold.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-weight: 600;
	font-display: swap;
}


::placeholder {
	color: #C0AEAE !important;
	opacity: 1 !important;
	font-weight: normal !important;
	font-size: 12pt !important;
}

:-ms-input-placeholder {
	color: #C0AEAE !important;
	font-weight: normal !important;
	font-size: 12pt !important;
}

::-ms-input-placeholder {
	color: #C0AEAE !important;
	font-weight: normal !important;
	font-size: 12pt !important;
}

/* ======== resets and overrides ======== */

* {
	margin: 0;
	padding: 0;
}

	*, *:before, *:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Ankerlinks (zoals "Meer producten" naar #alleproducten) glijden in plaats van springen;
   de JS-scrolls doen dit al. Wie minder beweging heeft ingesteld, houdt de sprong. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

:root {
	/* Kleuren */
	--color-border: #CCC;
	--color-white: #FFF;
	--color-green: #72B533;
	--color-dark-green: #0a5d00;
	--color-gray-light: #F5F5F5;
	--color-link: #1B75BA;
	--primary-blue: #0077C8;
	--secundary-blue: #00ACED;
	--light-blue: #d5f4ff;
	--very-light-blue: #EBF8FE;
	--accent-blue: #0AB9EB;
	--highlight-green: #72B533;
	--text-dark: #000;
	--text-light: #FFF;
	--gray-light: #F5F5F5;
	--gray-medium: #CCC;
	--gray-dark: #E1E1E1;
	/* Typografie */
	--font-main: 'InZpire', sans-serif;
	--font-bold: 'InZpireBold', sans-serif;
	--font-size-h1: 1.6rem;
	--font-size-h2: 1.3rem;
	--font-size-h3: 1.15rem;
	--font-size-p: 1rem;
	--font-size-link: 13pt;
	--font-color: '#000';
	/* Layout */
	--padding-default: 1.2rem;
	--border-radius: 5px;
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	/*	OFFERTE*/ --mw-navy: #003366;
	--mw-orange: #ff6600;
	--mw-orange-hover: #e65c00;
	--mw-ink: #1a1a1a;
	--mw-muted: #6b7280;
	--mw-bg: #f9fafb;
	--mw-card: #ffffff;
	--mw-linkbg: #eef3f8;
	--mw-linkbg-hover: #d9e4f2;
	--radius: 12px;
	--mw-green-light: #dcfce7;
	--mw-orange-light: #ffedd5;
}
[hidden] {
	display: none !important;
}

dialog:focus,
dialog:focus-visible {
	outline: none;
	box-shadow: none;
}

body {
	background-color: #F0F3F5;
	font-family: 'InZpire', 'Segoe UI', Helvetica, Arial;
	display: grid;
	grid-template-areas:
		"nav"
		"main";
	grid-template-rows: auto 1fr;
}

	/* Grid-items hebben default min-width:auto en kunnen dan niet smaller dan hun
	   breedste inhoud - een enkel breed element rekte zo de hele pagina op naar
	   ~984px op mobiel. min-width:0 laat ze gewoon meekrimpen met de viewport. */
	body > * {
		min-width: 0;
	}

em {
	font-style: normal;
}

img {
	border: none;
}


input {
	font-family: 'InZpire', 'Segoe UI', Helvetica, !important;
	font-weight: 600;
}

select {
	font-family: 'InZpire', 'Segoe UI', Helvetica, !important;
	font-weight: 600;
}


h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: var(--color-link);
}

h5 {
	font-size: 1.0em;
}

p {
	color: var(--text-dark);
}

ul {
	margin: 5px 20px;
}

ol {
	margin: 5px 20px;
}

a {
	color: inherit;
	text-decoration: underline;
	font: inherit;
}

.hide {
	display: none;
}

.hideMe {
	display: none;
}

.hideFlex {
	display: none;
}

.hideMe2 {
	display: none !important;
}

/* Voor screenreader headings */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

/* Onder de 1232px is er geen ruimte meer voor auto-marges: dan krijgt
   alle content een normale zijmarge i.p.v. tegen de schermrand te plakken */
@media screen and (max-width: 768px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

	.container.flexRow {
		flex-direction: row;
	}

	/* Brede variant voor embedded tools die meer ruimte nodig hebben (bv. Daisycon energie) */
	.container.container--breed {
		max-width: 1400px;
	}

	/* De Daisycon-tool begrenst zichzelf op 1000px met kunstmatig hoge specificiteit
	   (:not(#\9)-selectors) en meet daarna zijn eigen content-breedte, waardoor hij in
	   een smalle single-column blijft hangen. width:100% doorbreekt dat: de tool meet
	   dan de containerbreedte en rendert zijn volledige sidebar+resultaten-layout. */
	.container--breed .dc-tool {
		max-width: none !important;
		width: 100% !important;
	}

	.container.ebook {
		flex-direction: row;
		align-items: flex-start;
	}

div.centrebutton {
	display: flex;
	justify-content: center;
	margin: 25px;
}

	div.centrebutton a {
		display: flex;
		background: var(--color-link);
		height: 50px;
		border-radius: 5px;
		font-size: 15pt !important;
		font-weight: bold;
		cursor: pointer;
		color: var(--text-light);
		padding: 12px 25px;
		text-decoration: none;
		align-items: baseline;
		justify-content: center;
	}

	div.centrebutton span {
		display: flex;
		background: var(--color-link);
		height: 50px;
		border-radius: 5px;
		font-size: 15pt !important;
		font-weight: bold;
		cursor: pointer;
		color: var(--text-light);
		padding: 12px 25px;
		text-decoration: none;
		align-items: baseline;
		justify-content: center;
	}