/* Voor Responsive Webdesign */
{
	box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
body {
	--afbeeldingBijschriftContainerHoogte : 430px;
	--achtergrondKleurMenu                : #EEEEEE;
	--bodyAfbeeldingBreedte               : auto;
	--bodyAfbeeldingHoogte                : 360px;
	--fontsizeBijschrift                  : 12px;
	--fontsizeBodyKop                     : 32px;
	--fontsizeParagraafKopTekst           : 20px;
	--fontsizeStandaard                   : 20px;
	--fontsizeTitel                       : 72px;
	--fontsizeMenu                        : 24px;
	--hamburgerBreedte                    : 90px;
	--hamburgerHoogte                     : 60px;
	--kleurPaars                          : #824998;
	--kleurWit                            : #FFFFFF;
	--kleurZwart                          : #000000;
	--kopHoogte                           : 100px;
	--maximaleBreedte                     : 1000px;
	--menuBreedte                         : 280px;
	background                            : var(--kleurWit);
	font-family                           : 'Quicksand';
	font-size                             : var(--fontsizeStandaard);
	line-height                           : 1.2;
	margin                                : 0px;
	padding                               : 0px;
	text-align                            : left;
}

div.paginaContainer {
	margin-left  : auto;
	margin-right : auto;
	width        : var(--maximaleBreedte);
}

div.kopContainer {
	align-content    : center;
	background-color : var(--kleurWit);
	height           : var(--kopHoogte);
	position         : fixed;
	width            : var(--maximaleBreedte);
	z-index          : 999;
}

img.kopAfbeelding {
	height      : var(--hamburgerHoogte);
	margin-left : 10px;
	width       : auto;
}

div.bodyTitel {
	color       : var(--kleurPaars);
	font-family : 'Baloo 2';
	font-size   : var(--fontsizeTitel);
	font-weight : 900;
	margin      : 10px;
	width       : 100%;
}

div.bodyContainer {
	position : absolute;
	top      : var(--kopHoogte);
	width    : var(--maximaleBreedte);    
}

div.bodyKopTekst {
	color       : var(--kleurPaars);
	font-size   : var(--fontsizeBodyKop);
	font-weight : 400;
	margin      : 10px;
}

div.bodyTekst {
	color : var(--kleurZwart);
	margin      : 10px;
}

div.paragraafKopTekst {
	color       : var(--kleurPaars);
	font-size   : var(--paragraafKopTekst);
	font-weight : 700;
	margin      : 10px;
}

img.homeAfbeelding {
	width : 100%;
}

div.menu {
	height     : var(--hamburgerHoogte);
	position   : absolute;
	right      : 0px;
	text-align : right;
	top        : 20px;
}

div.menu:hover div {
	background-color : var(--achtergrondKleurMenu);
	display          : block;
}
	
img.menuHamburgerAfbeelding {
	height   : var(--hamburgerHoogte);
	width    : var(--hamburgerBreedte);
}

img.menuHamburgerAfbeelding:hover div {
	display : block;
}

div.menuInhoud {
	display          : none;
	font-size        : var(--fontsizeMenu);
	padding-left     : 10px;
	position         : relative;
	right            : 0px;
	text-align       : right;
	top              : -10px;
	z-index          : 10;
}

div.menuInhoud a {
    color           : var(--kleurPaars);
    display         : block;
	line-height     : 1.5;
	padding-right   : 15px;
    text-decoration : none;
}

div.menuInhoud a:hover {
	color : var(--kleurZwart);
}

div.bijschrift {
	font-size : var(--fontsizeBijschrift);
}

div.afbeeldingBijschriftFlexContainer {
	align-items    : center;
	display        : flex;
	flex-direction : row;
	flex-wrap      : wrap;
	margin-left    : auto;
	margin-right   : auto;
	width          : var(--maximaleBreedte);
}

div.afbeeldingBijschriftContainer{
	display : inline-block;
	height  : var(--afbeeldingBijschriftContainerHoogte);
	padding : 10px;
}
	
div.bodyAfbeelding {
	height  : var(--bodyAfbeeldingHoogte);
	padding : 10px;
	width   : var(--bodyAfbeeldingBreedte);
}

img.bodyAfbeelding {
	display : block;
	height  : var(--bodyAfbeeldingHoogte);
	width   : var(--bodyAfbeeldingBreedte);
}

/* Specifieke zaken op de contact pagina */
table.contactTabel {
	width : 100%;
}

td.contactKolom {
	vertical-align : top;
	width          : 25%;
}

span.bijschriftOpen {
	font-size  : var(--fontsizeBijschrift);
	font-style : italic;
}
	
a.contact {
	text-decoration : none;
}

a.contact:link {
	color : var(--kleurZwart);
}

a.contact:hover {
	color : var(--kleurPaars);
}

/* ************************************************************************** */
/* 2. Generieke zaken ******************************************************* */
/* ************************************************************************** */
.bold {
	font-weight : bold;
}

.paars {
	color : var(--kleurPaars);
}

.regular {
	font-weight : normal;
}

.schuin {
	font-style : italic;
}
	
.zwart {
	color : var(--kleurZwart);
}

.zwartVet {
	color : var(--kleurZwart);
	font-weight : bold;
}

@media screen and (max-width: 1025px) {
	body {
		--afbeeldingBijschriftContainerHoogte : 370px;
		--bodyAfbeeldingHoogte                : 300px;
		--fontsizeBodyKop                     : 28px;
		--fontsizeTitel                       : 54px;
		--fontsizeMenu                        : 20px;
		--hamburgerBreedte                    : 80px;
		--hamburgerHoogte                     : 50px;
		--kopHoogte                           : 100px;
		--maximaleBreedte                     : 100%;
		--menuBreedte                         : 260px;
	}
	
	div.kopContainer {
		width : 100vw;
	}
}
	
@media screen and (max-width: 725px) {
	body {
		--afbeeldingBijschriftContainerHoogte : auto;
		--bodyAfbeeldingBreedte               : 280px;
		--bodyAfbeeldingHoogte                : auto;
		--fontsizeTitel                       : 40px;
		--fontsizeMenu                        : 18px;
	}
	
}