@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(--vw100) * 0.5 );

--bs-gutter-y: 0;
--bs-gutter-x: 24px;
--bs-gutter-row: 24px;

--gy: var(--bs-gutter-y);
--gx: var(--bs-gutter-x);
--gxd: calc(2 * var(--gx));
--gxh: calc(0.5 * var(--gx));
--ngx:	calc(-1 * var(--gx));
--ngxd: calc(-2 * var(--gx));
--ngxh: calc(-0.5 * var(--gx));

--containerwidth	: 1140px;  /* vul beneden ook max containerwidth in */
--widecontentwidth	: 1400px;
--fullcontentwidth	: calc(2560px - var(--scrollbarwidth) );

--font-scale: 100%;

--headerheight:120px;

--widemargin:calc((var(--widecontentwidth) - var(--containerwidth) + var(--gx)) * -0.5);
--fullmargin:calc((var(--vw100) - var(--containerwidth) + var(--gx) ) * -0.5);


--c-1: #3C3C3B; /* donkerbruin */
--c-1-rgb: 60,60,59;

--c-2: #E44018; /* rood */
--c-2-rgb: 228,64,24;

--c-3: #B9A76C; /* beige */
--c-3-rgb: 185,167,108;

--c-4: #3A8C80; /* zeegroen */
--c-4-rgb: 58,140,128;

--c-5: #EE8159; /* oranje */
--c-5-rgb: 238,129,89;

--c-6: #36647E; /* blauw */
--c-6-rgb: 54,100,126;

--c-7: #ECEBDF; /* off-white */
--c-7-rgb: 236,235,223;


--c-white: #ffffff;
--c-white-rgb: 255,255,255;

--c-light-grey:#F7F7F7;
--c-light-grey-rgb: 237,237,237;

--c-grey: #C6C6C6;
--c-grey-rgb: 198,198,198;

--c-medium-grey: #B4ABA1;
--c-medium-grey-rgb: 83,83,77;

--c-dark-grey: #4f4f4f;
--c-dark-grey-rgb: 29,29,29;

--c-black: #000000;
--c-transparent: transparent;


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

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

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

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

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

--c-headers: var(--c-1);
--c-headers-hover: var(--c-1);

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

--p-ff: 'raleway', sans-serif;
--p-fs: 1.00rem;
--p-fw: var(--fw-regular);
--p-lh: 1.25;
--p-ls: 0;
--p-c: var(--c-text);

--h-ff: 'raleway', sans-serif;
--h-fs: 2.00rem;
--h-fw: var(--fw-semilight);
--h-lh: 1.25;
--h-ls: 0;
--h-c: var(--c-headers);


--h1-fs: 2.50rem;
--h2-fs: 2.00rem; 
--h3-fs: 1.50rem;
--h4-fs: 1.00rem;
--h5-fs: 1.00rem;
--h6-fs: 1.00rem;

--h1-lh: 1.25;
--h2-lh: 1.25;
--h3-lh: 1.25;
--h4-lh: 1.25;
--h5-lh: 1.25;
--h6-lh: 1.25;

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

--h1-mb: 1rem;
--h2-mb: 0;
--h3-mb: 0;
--h4-mb: 0;
--h5-mb: 0;
--h6-mb: 0;
	
--h1-c: var(--c-headers);
--h2-c: var(--c-headers);
--h3-c: var(--c-headers);
--h4-c: var(--c-headers);
--h5-c: var(--c-headers);
--h6-c: var(--c-headers);
	
--fs-xxxxs: 0.5rem;
--fs-xxxs: 0.6rem;
--fs-xxs: 0.75rem;
--fs-xs: 0.80rem;
--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: 2.50rem;
--fs-xxxl: 3.00rem;
--fs-xxxxl: 4.00rem;

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

--u-border-radius: .25rem .25rem .25rem .25rem;
--u-border-radius-xs: 0.1rem 0.1rem 0.1rem 0.1rem;

--u-button-ff: var(--p-ff);
--u-button-fw: var(--fw-medium);

--u-button-fs: var(--fs-p);
--u-button-tt: none;
--u-button-padding: .375em 3em .375em 3em;

--u-button-border: 3px solid var(--c-3);
--u-button-border-radius: var(--u-border-radius);

--u-button-color: var(--c-1);
--u-button-bg-color: var(--c-3);

--u-button-outline-border: 3px solid var(--c-3);	
--u-button-outline-color: var(--c-3);	
--u-button-outline-bg-color: var(--c-white);	

--u-button-hover-border: 3px solid var(--c-3);	
--u-button-hover-color: var(--c-1);	
--u-button-hover-bg-color: var(--c-white);	

--u-button-outline-hover-border: 3px solid var(--c-3);	
--u-button-outline-hover-color: var(--c-1);	
--u-button-outline-hover-bg-color: var(--c-3);	

--slideDistance : 100px;
--slideDistanceNeg : -100px;					   

}


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


@media all and (max-width: 1139.98px) { /* max containerwidth */
   :root {	
	--widecontentwidth	: var(--vw100);
	--widemargin		: var(--ngxh);
	--fullmargin		: var(--ngxh);
   }
}

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

		--alignfull			: var(--vw100);
		
		--widemargin		: var(--ngxh);
		--fullmargin		: var(--ngxh);
		
		--font-scale		: 95%;
	}
}

@media all and (max-width: 991.98px) {
   :root {	
		--containerwidth	: 960px;
		--headerheight		: 50px;
		--font-scale		: 90%;
   }
}

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

		--font-scale		: 100%;

   }
}

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

   }
}

@media all and (max-width: 413.98px) {
   :root {	
		--font-scale: 90%;
   }
}