:root {

	--houtskool: #172024;
	--kiem: #E1FFA1;
	--salie: #ADC7C2;
	--lichee: #FFA1C2;
	--dauw: #94D6FF;
	--olijf: #6D8563;
	--perzik: #FFC294;

	--bg-color: #ffffff;
	--txt-color: var(--houtskool);
	--footer-color: var(--houtskool);
	--footer-txt-color: var(--kiem);

	

  	--max-width: 1550px;
    --side-margin: calc((100vw - var(--max-width)) / 2);
	--container-padding: clamp(1rem, 5vw, 3rem);
    --gutter: 2rem; 
    --columns: 12;
	--section-margin: 4rem;
	--padding: 2rem;

	--col: calc( 1/12 * (100% - 11 * var(--gutter)));
	--col-span-2: calc( 2/12 * (100% - 11 * var(--gutter)) + 1 * var(--gutter) );
	--col-span-3: calc( 3/12 * (100% - 11 * var(--gutter)) + 2 * var(--gutter) );
	--col-span-4: calc( 4/12 * (100% - 11 * var(--gutter)) + 3 * var(--gutter) );
	--col-span-5: calc( 5/12 * (100% - 11 * var(--gutter)) + 4 * var(--gutter) );
	--col-span-6: calc( 6/12 * (100% - 11 * var(--gutter)) + 5 * var(--gutter) );
	--col-span-8: calc( 8/12 * (100% - 11 * var(--gutter)) + 7 * var(--gutter) );
	--col-span-9: calc( 9/12 * (100% - 11 * var(--gutter)) + 8 * var(--gutter) );	
	--col-span-10: calc( 10/12 * (100% - 11 * var(--gutter)) + 9 * var(--gutter) );
    --container-padding: 2rem; /* Minimale ruimte op mobiel links/rechts */

    /* Berekende breedte voor 10 kolommen */

    --width-10-cols: calc(var(--max-width) * 0.8333); 
    --width-8-cols: calc(var(--max-width) * 0.6667);
	--width-6-cols: calc( 6/12 * (100% - 11 * var(--gutter)) + 5 * var(--gutter) );

	--header-height: 4em;
	--header-bg: rgba(255,255,255,0.75);

	--border-radius: 6px;	
	--border-width: 2px;
	--transition-speed: 460ms;

	--scrollbar-width: calc(100vw - 99vw);

	--font-size:  clamp(1rem, 0.8333rem + 0.4444vw, 1.25rem);
	--font-size-intro: calc(var(--font-size) * 1.5);

  }

  
/*------------------------------------*\
    global settings
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	margin: 0px;
	padding: 0px;
	height: 100%;	
}

body {
	margin: 0px;
	padding: 0px;
	height: 100%;	
	scroll-behavior: smooth;
}


/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}

img {
	max-width:100%;
}
a {
	color: var(--txt-color);
	text-decoration: none;
}

a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid inverse;
}

ul{
	margin: 0;
}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

/* Regular */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Regular.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Regular.woff") format("woff"),
		url("../fonts/Bw Gradual - Regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Regular Italic */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Regular Italic.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Regular Italic.woff") format("woff"),
		url("../fonts/Bw Gradual - Regular Italic.otf") format("opentype");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

/* Medium */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Medium.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Medium.woff") format("woff"),
		url("../fonts/Bw Gradual - Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Medium Italic */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Medium Italic.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Medium Italic.woff") format("woff"),
		url("../fonts/Bw Gradual - Medium Italic.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* Bold */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Bold.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Bold.woff") format("woff"),
		url("../fonts/Bw Gradual - Bold.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* Bold Italic */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Bold Italic.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Bold Italic.woff") format("woff"),
		url("../fonts/Bw Gradual - Bold Italic.otf") format("opentype");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

/* ExtraBold */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - ExtraBold.woff2") format("woff2"),
		url("../fonts/Bw Gradual - ExtraBold.woff") format("woff"),
		url("../fonts/Bw Gradual - ExtraBold.otf") format("opentype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ExtraBold Italic */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - ExtraBold Italic.woff2") format("woff2"),
		url("../fonts/Bw Gradual - ExtraBold Italic.woff") format("woff"),
		url("../fonts/Bw Gradual - ExtraBold Italic.otf") format("opentype");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* Black */
@font-face {  
	font-family: "BwGradual";
	src: 
		url("../fonts/Bw Gradual - Black.woff2") format("woff2"),
		url("../fonts/Bw Gradual - Black.woff") format("woff"),
		url("../fonts/Bw Gradual - Black.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}





html {
	font-family: 'BwGradual', Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: var(--txt-color);
}

body {
	font-size: var(--font-size);
	font-weight: normal;
}


i, em {
	font-family: "BwGradual", Helvetica, Arial, sans-serif;
	font-style: italic;
}

b, strong {
	font-family: "BwGradual", Helvetica, Arial, sans-serif;
	font-weight: bold;
}

h1{
	margin: 1em 0;
	font-size: calc(var(--font-size) * 3);
	font-family: 'BwGradual', Helvetica, Arial, sans-serif;
	font-weight: 900;

	letter-spacing: -0.01em;
	line-height: 1.2;
	color: inherit;
}

h2{
	margin: 1em 0;
	font-size: calc(var(--font-size) * 2.2);
	font-family: 'BwGradual', Helvetica, Arial, sans-serif;
	font-weight: bold;
	letter-spacing: -0.01em;
	width: 100%;
	line-height: 1.2;
	overflow-wrap: break-word;
}
	h1 + article > h2:first-child{
		margin-top: -1em;
	}

h3, h4{
	margin: 0.1rem 0;
	font-size: calc(var(--font-size) * 1.2);
	font-family: 'BwGradual', Helvetica, Arial, sans-serif;
	line-height: 1;
	font-weight: 500;
	color: inherit;
}

.has-small-font-size{
	font-size: calc( var(--font-size) * 0.7 ) !important;
}
.has-large-font-size{
	font-size: calc( var(--font-size) * 2.2 ) !important;
}

.content a {


}

.content a:hover {
	text-decoration: underline dotted;
}

p{

	margin: 1rem 0;
}
p:first-child{
	margin: 0;
}

ul,
ol{
	margin-block-start: 0.1em !important;
	margin: 0;
	padding: 0;
	margin-left: 1em;
}

li{
    list-style-position: outside;
    text-indent: -0.2em;
}

li::marker {
	margin-inline-end:  -0.3em;       
}