:root{
	
		--content-gap: 128px;
		--content-gap-s: 10px;

        --content-width-xs: 95%;
        --content-width-s: 900px;
        --content-width-m: 1440px;
        --content-width-l: 1800px;
    	--content-width-xl: 1800px;

        --content-width-m-padding: calc( ( 100% - var(--content-width-m) ) / 2 );

        --border-radius: 29px;

        --content-padding-xl: 64px;
        --content-padding-l: 32px;
        --content-padding-m: 16px;
        --content-padding-s: 8px;
	
		--section-padding-xl: 256px;
        --section-padding-l: 128px;
        --section-padding-m: 64px;
        --section-padding-s: 32px;
	 	--section-padding-xs: 16px;
		--section-padding-xxs: 8px;

		--color-geel: #EBA700;
		--color-bordeaux: #772235;

		--color-zwart:#242424;
		--color-licht-zwart: #414141;
		--color-grijs: #707070;
		--color-licht-grijs: #F8F8F8;
		--color-wit: #ffffff;

}      	
			


/*--------------------------------------------------------------------------------------*\
| Character Styles
\*--------------------------------------------------------------------------------------*/
body{
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: var(--color-zwart);
    letter-spacing: 2px;
}

h1 {
    font-family: 'aller', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 65px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--color-zwart);
    margin-top: 0;
    margin-bottom: calc( 1.5 * 24px);
}

h2 {
    font-family: 'aller', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--color-zwart);
    margin-top: 0;
    margin-bottom: 24px;
}
h3, figcaption {
    font-family: 'aller', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--color-zwart);
    margin-top: 0;
    margin-bottom: 24px;
}
h4 {
    font-family: 'aller', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--color-zwart);
    margin-top: 0;
    margin-bottom: 24px;
}
h5 {
    font-family: 'aller', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--color-zwart);
    margin-top: 0;
    margin-bottom: 24px;
}
h6 {
    font-family: 'aller', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--color-zwart);
    margin-top: 0;
    margin-bottom: 24px;
}
p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: 0px;
    color: var(--color-licht-zwart);
    margin-top: 0;
    margin-bottom: 18px;
}
p > a{
    color: var(--color-licht-zwart);
}
a {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: var(--color-licht-zwart);
    margin-top: 0;
    line-height: 1.1;
    font-size: 16px;
}
a.wp-block-button__link{
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: var(--color-licht-zwart);
    margin-top: 0;
	font-weight: 400;
    line-height: 1.1;
    font-size: 16px;
}
li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0px;
    color: var(--color-licht-zwart);
}




/*--------------------------------------------------------------------------------------*\
| Block Color
\*--------------------------------------------------------------------------------------*/
.has-zwart-background-color {
    background-color: var(--color-zwart);
}
.has-licht-zwart-background-color {
    background-color: var(--color-licht-zwart);
}
.has-grijs-background-color{
    background-color: var(--color-grijs);
}
.has-licht-grijs-background-color{
    background-color: var(--color-licht-grijs);
}
.has-wit-background-color{
    background-color: var(--color-wit);
}

.has-bordeaux-background-color{
    background-color: var(--color-bordeaux);
}
.has-geel-background-color{
    background-color: var(--color-geel);
}



	
	

	

/*--------------------------------------------------------------------------------------*\
| Text Color
\*--------------------------------------------------------------------------------------*/
.has-zwart-color {
    color: var(--color-zwart);
}
.has-licht-zwart-color {
    color: var(--color-licht-zwart);
}
.has-grijs-color{
    color: var(--color-grijs);
}
.has-licht-grijs-color{
    color: var(--color-licht-grijs);
}
.has-wit-color{
    color: var(--color-wit);
}

.has-bordeaux-color{
    color: var(--color-bordeaux);
}
.has-geel-color{
    color: var(--color-geel);
}



.has-zwart-color a{
    color: var(--color-zwart);
}
.has-licht-black-color a{
    color: var(--color-licht-zwart);
}
.has-grijs-color a{
    color: var(--color-grijs);
}
.has-licht-grijs-color a{
    color: var(--color-licht-grijs);
}
.has-wit-color a{
    color: var(--color-wit);
}

.has-bordeaux-color a{
    color: var(--color-bordeaux);
}
.has-geel-color a{
    color: var(--color-geel);
}


.has-zwart-color strong{
    color: var(--color-zwart);
}
.has-licht-black-color strong{
    color: var(--color-licht-zwart);
}
.has-grijs-color strong{
    color: var(--color-grijs);
}
.has-licht-grijs-color strong{
    color: var(--color-licht-grijs);
}
.has-wit-color strong{
    color: var(--color-wit);
}

.has-bordeaux-color strong{
    color: var(--color-bordeaux);
}
.has-geel-color strong{
    color: var(--color-geel);
}



ul.has-zwart-color li{
    color: var(--color-zwart);
}
ul.has-licht-black-color li{
    color: var(--color-licht-zwart);
}
ul.has-grijs-color li{
    color: var(--color-grijs);
}
ul.has-licht-grijs-color li{
    color: var(--color-licht-grijs);
}
ul.has-wit-color li{
    color: var(--color-wit);
}

ul.has-bordeaux-color li{
    color: var(--color-bordeaux);
}
ul.has-geel-color li{
    color: var(--color-geel);
}


/*--------------------------------------------------------------------------------------*\
| MEDIA QUERIES
\*--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1800px){

}
@media screen and (max-width: 1800px){
	:root{
		--content-gap: 96px;
	}
}
@media screen and (max-width: 1350px){
	body{
		font-size: 16px;
	}
	h1, body:not(.home) .entry-content h1 {
		font-size: 48px;
	}
	h2 {
		font-size: 32px;
	}
	h3, figcaption {
		font-size: 28px;
	}
	h4 {
		font-size: 26px;
	}
	h5 {
		font-size: 24px;
	}
	h6 {
		font-size: 22px;
	}
	p {
		font-size: 16px;
	}
	a {
		font-size: 14px;
	}
	a.wp-block-button__link{
		font-size: 14px;
	}
	li {
		font-size: 14px;
	}
	:root{
		--content-gap: var(--section-padding-m);
	}
}
@media screen and (max-width: 900px){
	
}
@media screen and (max-width: 768px){
	:root{
		--content-gap: 32px;
	}
	body{
		font-size: 16px;
	}
	h1, body:not(.home) .entry-content h1 {
		font-size: 38px;
	}
	h2 {
		font-size: 26px;
	}
	h3, figcaption {
		font-size: 22px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 20px;
	}
	h6 {
		font-size: 18px;
	}
	p {
		font-size: 14px;
	}
	a {
		font-size: 12px;
	}
	a.wp-block-button__link{
		font-size: 12px;
	}
	li {
		font-size: 12px;
	}

}
@media screen and (max-width: 550px){
	h1, body:not(.home) .entry-content h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 24px;
	}
	h3{
		font-size: 20px;
	}
	h4 {
		font-size: 18px;
	}

}