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

body {
	--achtergrondKleurMenu : #EEEEEE;
	--bijschriftTekst      : 12px;
	--kleurGoud            : #996600;
	--kleurGroen           : #003300;
	--kleurLichtGroen      : #CCCC33;
	--kleurWit             : #FFFFFF;
	--kleurZwart           : #000000;
	--fontsizeMenu         : 18px;
	--hamburgerBreedte     : 90px;
	--hamburgerHoogte      : 60px;
	--kopHoogte            : 100px;
	--paragraafKopTekst    : 16px;
	--paragraafTekst       : 16px;
	--maximaleBreedte      : 800px;
	--menuBreedte          : 280px;
	font-family            : Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	margin                 : 0px;
	padding                : 0px;
}

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;
	top              : 0px;
	width            : var(--maximaleBreedte);
	z-index          : 999;
}

div.menu {
	height     : var(--hamburgerHoogte);
	position   : absolute;
	right      : 10px;
	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);
	line-height      : 1.2;
	padding-left     : 10px;
	position         : relative;
	right            : 10px;
	text-align       : right;
	top              : -10px;
	z-index          : 10;
}

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

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

img.kopImage {
	height : auto;
	margin-left : 10px;
	margin-right : 10px;
	width  : var(--maximaleBreedte);
}

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

div.bodyTekst {
	color        : var(--kleurZwart);
	font-size    : var(--paragraafTekst);
	font-weight  : normal;
	line-height  : 28px;
	margin-left  : 10px;
	margin-right : 10px;
}

img.image400 {
	height       : auto;
	margin-left  : 10px;
	margin-right : 10px;
	width        : 400px;
}

img.image500 {
	height       : auto;
	margin-left  : 10px;
	margin-right : 10px;
	width        : 500px;
}

img.image700 {
	height       : auto;
	margin-left  : 10px;
	margin-right : 10px;
	width        : 700px;
}

img.image800 {
	height       : auto;
	margin-left  : 10px;
	margin-right : 10px;
	width        : 760px;
}

div.paragraafKopTekst {
	font-size    : var(--paragraafKopTekst);
	font-weight  : 700;
	line-height  : 28px;
	margin-left  : 10px;
	margin-right : 10px;
}

div.bijschrift {
	font-size    : var(--bijschriftTekst);
	line-height  : 21px;
	margin-left  : 10px;
	margin-right : 10px;
}
	
/* ************************************************************************** */
/* 2. Generieke zaken ******************************************************* */
/* ************************************************************************** */
.bold {
	font-weight : bold;
}

.goud {
	color : var(--kleurGoud);
}

.groen {
	color : var(--kleurGroen);
}

.lichtgroen {
	color : var(--kleurLichtGroen);
}

.regular {
	font-weight : normal;
}

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

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

@media screen and (max-width: 800px) {
	body {
		--fontsizeMenu                        : 16px;
		--hamburgerBreedte                    : 80px;
		--hamburgerHoogte                     : 50px;
		--kopHoogte                           : 90px;
		--maximaleBreedte                     : 100%;
		--paginaBreedte                       : 100%
		--menuBreedte                         : 260px;
	}
	
	div.paginaContainer {
		margin-left  : 0px;
		margin-right : 0px;
	}
	
	img.image800 {
		width : 700px;
	}


}

@media screen and (max-width: 625px) {
	body {
		--fontsizeMenu : 15px;
	}	

	img.image400 {
		width  : 300px;
	}
	
	img.image500 {
		width : 350px;
	}
	
	img.image700 {
		width : 500px;
	}

	img.image800 {
		width : 500px;
	}

@media screen and (max-width: 525px) {	
	img.image500 {
		width : 95%;
	}
	
	img.image700 {
		width : 95%;
	}
	
	img.image800 {
		width : 95%;
	}
}