@media (any-pointer: fine) {
    :root {	--scrollbarwidth:17px; }
}
@media (any-pointer: coarse) {
    :root {	--scrollbarwidth:0px; }
}
@media (hover: none) and (pointer: coarse) {
   :root { --scrollbarwidth:0px; }
}
@media (hover: none) and (pointer: fine) {
   :root { --scrollbarwidth:0px; }
}
@media (hover: hover) and (pointer: coarse) {
  :root { --scrollbarwidth:0px; }
}
@media (hover: hover) and (pointer: fine) {
   :root { --scrollbarwidth:17px; }
}

:root {
--vw100:calc(100vw - var(--scrollbarwidth) );
--vw50:calc( var(--100vw) * 0.5 );

--bs-gutter-y: 0;
--bs-gutter-x: 24px;
--bs-gutter-row: 24px;
--bs-gutter-double: calc(2 * var(--bs-gutter-x));
--bs-gutter-half: calc(0.5 * var(--bs-gutter-x));
---bs-gutter-x:calc(-1 * var(--bs-gutter-x));
---bs-gutter-double: calc(-2 * var(--bs-gutter-x));
---bs-gutter-half: calc(-0.5 * var(--bs-gutter-x));

--containerwidth	: 1440px;
--widecontentwidth	: 1600px;
--fullcontentwidth	: 2560px;

--headerheight:80px;

--alignfull:var(--vw100);

--widemargin:calc((var(--widecontentwidth) - var(--containerwidth) + var(--bs-gutter-x)) * -0.5);
--fullmargin:calc((var(--vw100) - var(--containerwidth) + var(--bs-gutter-x) ) * -0.5);


--c-1: #F0C84F; /* oker geel */
--c-1-rgb: 240,200,41;

--c-2: #F8E6B0; /* oker geel - licht */
--c-2-rgb: 248,230,176;

--c-3: #EEE4E5; /* zalm roze  */
--c-3-rgb: 238,228,229;

--c-4: #D3EFFF; /* licht blauw */
--c-4-rgb: 211,239,255;

/* --c-5: #F5F0DF; /* off white */ 
/* --c-5-rgb: 245,240,223; */

/* --c-6: #FFE09D; /* licht beige */
/* --c-6-rgb: 255,224,157; */

/* --c-7: #eaa735; /* donker beige */
/* --c-7-rgb: 234,167,53; */

--c-white: #ffffff;
--c-light-grey: #DADADA;
--c-grey: #C6C6C6;
--c-medium-grey: #636363;
--c-dark-grey: #3C3C3B;
--c-black: #000000;

--c-white-rgb: 255,255,255;
--c-light-grey-rgb: 218,218,218;
--c-grey-rgb: 198,198,198;
--c-medium-grey-rgb: 60,60,59;
--c-dark-grey-rgb: 29,29,29;
--c-black-rgb: 0,0,0;

--c-transparent: transparent;

--c-text: var(--c-medium-grey);
--c-text-hover: var(--c-black);

--c-primary: var(--c-medium-grey);
--c-primary-hover: var(--c-black);

--c-secondary: var(--c-1);
--c-secondary-hover: var(--c-black);

--c-tertiary: var(--c-3);
--c-tertiary-hover: var(--c-1);

--c-highlight: var(--c-4);
--c-highlight-hover: var(--c-2);

--c-headers: var(--c-medium-grey);
--c-headers-hover: var(--c-black);

--fw-thin: 100;
--fw-light: 200;
--fw-semilight: 300;
--fw-regular: 400;
--fw-semibold: 500;
--fw-mediumfw-medium: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;

--p-ff: 'lemonde-courrier', sans-serif;
--p-fs: 1.0rem;
--p-fw: var(--fw-semilight);
--p-lh: 1.3333;
--p-ls: 0;

--h-ff: 'lemonde-courrier', sans-serif;
--h-fs: 2.0rem;
--h-fw: var(--fw-semibold);
--h-lh: 1.3333;
--h-ls: 0;

--h1-fs: 3.0rem;
--h2-fs: 1.5rem; 
--h3-fs: 1.25rem;
--h4-fs: 1.1rem;
--h5-fs: 1.0rem;
--h6-fs: 1.0rem;

--h1-fw: var(--fw-bold);
--h2-fw: var(--fw-bold);
--h3-fw: var(--fw-bold);
--h4-fw: var(--fw-bold);
--h5-fw: var(--fw-bold);
--h6-fw: var(--fw-bold);

--h1-mb: 0.5em;
--h2-mb: 1.0em;
--h3-mb: 0.5em;
--h4-mb: 0.5em;
--h5-mb: 0.5em;
--h6-mb: 0.5em;

--fs-xxs: 0.60rem;
--fs-xs: 0.75rem;
--fs-sm: 0.90rem;
--fs-regular: var(--p-fs);
--fs-p: var(--p-fs);
--fs-md: 1.25rem;
--fs-lg: 1.50rem;
--fs-xl: 2.00rem;
--fs-xxl: 3.00rem;


--swiper-theme-color: var(--c-2);

}



@media all and (min-width: 2560px) {
   :root {	
	--alignfull		: var(--fullcontentwidth);
	--fullmargin	: calc( (var(--fullcontentwidth) - var(--containerwidth) + var(--bs-gutter-x) ) * -0.5);
   }
}


@media all and (max-width: 1439.98px) { /* max containerwidth */
   :root {	
	--widecontentwidth	: var(--vw100);
	--widemargin		: var(---bs-gutter-half);
	--fullmargin		: var(---bs-gutter-half);

   }
}

@media all and (max-width: 1199.98px) {
	:root {	
		--containerwidth	: 1140px;
		--widecontentwidth	: var(--vw100);
		--fullcontentwidth	: var(--vw100);

		--alignfull			: var(--vw100);
		
		--widemargin		: var(---bs-gutter-half);
		--fullmargin		: var(---bs-gutter-half);
		
		--font-scale: 100%;

	}
}

@media all and (max-width: 991.98px) {
   :root {	
		--containerwidth	: 960px;
   }
}

@media all and (max-width: 767.98px) {
   :root {	
		--containerwidth	: 720px;
		--headerheight		: 50px;
   }
}

@media all and (max-width: 575.98px) {
   :root {	
		--containerwidth	: 540px;


   }
}