/* 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 {
	--afbeeldingBijschriftContainerBreedte : 430px;
	--achtergrondKleurMenu                 : #EEEEEE;
	--bodyAfbeeldingBreedte                : 430px;
	--bodyAfbeeldingHoogte                 : auto;
	--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);
	padding-left : 10px;
}

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

div.afbeeldingBijschriftContainer{
	display : inline-block;
	padding : 10px;
	width   : var(--afbeeldingBijschriftContainerBreedte);
}
	
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 {
		--afbeeldingBijschriftContainerBreedte : 370px;
		--bodyAfbeeldingBreedte                : 350px;
		--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 {
		--afbeeldingBijschriftContainerBreedte : auto;
		--bodyAfbeeldingBreedte                : 280px;
		--fontsizeTitel                        : 40px;
		--fontsizeMenu                         : 18px;
	}
	
}