* {box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}
body {background:#999 url(img/.jpg);background-size:100% auto; background-attachment:fixed;}
table {border-collapse:collapse;}
h1 {text-align: center;}
h2 {color:green;}
a:hover {color:#060; font-weight:900;}
img {border:none;}
.clear {clear:both;}

#hamburger {width:30px; position:fixed; left:15px; top:100px; z-index:99;}
nav {display:none;}
nav, nav .groep {background-color:rgba(240,250,230,0.95); padding:10px;
	z-index:15; font-weight:800; box-shadow: 6px 6px 5px #888888;} /* voor klote IE eerst niet doorzichtig maken van backgroundcolor*/
nav {position:fixed; left:15px; top:100px; color:grey; font-size:110%;}
nav .groep {position:absolute; left:-500px; top:-5px; font-size:90%; column-count:3;
	border:solid green; border-width:1px 1px 1px 0; width:300px;}
nav a,nav .groep a, nav .groep span {display:block;}
nav a, nav .kopgroep, nav span {color:grey; text-decoration:none; font-weight:800;}
nav a:hover, nav .kopgroep:hover {text-decoration:none; color:#060;}
nav .kopgroep:hover .groep{left:70px;}
nav .groep a:before {content: "-";}
nav .groep span:before {content: " ";}
nav span {font-weight:normal; font-size:75%; opacity:30%}
nav .gekozen {color:#060; font-size:110%; cursor:text;}

#totaal {background-color:#ECF2DF; /* voor klote IE eerst niet doorzichtig*/
	filter:alpha(opacity=80);       /* moet voor IE 5+. */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/* moet voor IE 8. */ }
#totaal {max-width:935px; width:100%; margin:30px auto 450px auto;
	padding:10px; border:8px solid green; border-radius:20px;
	position:relative; background-color:rgba(240,250,230,0.7);}
#topkop {color:green; font-size:400%; text-align:center; font-weight:bold; 
	text-shadow: 6px 6px 5px #999; padding:20px;}
#intro {margin:5px 10px; color:#060;}
#inhoud {margin:5px; color:#060;}
.fotoshow {background-color:#F0FAE6;display:flex; justify-content:space-around; 
	flex-wrap:wrap; padding: 0 10px 10px;}
.fotoshow h2 {text-align:center; color:green; font-weight:bold; font-size:150%; width:100%}
.fotoshow div {border-top:solid 1px green; text-align:center; width:75px;}
.fotoshow img {max-width:100%; padding:4px;}
.rechts {float:right; text-align:right; width:600px;}

button {width:200px; font-weight:bold; padding:3px; margin:5px;}
button:hover {text-decoration:underline;}
#counter {display:flex; flex-wrap:nowrap; justify-content:space-between;}

/* fotos */
#smlpics img {box-shadow:6px 6px 5px #888888;}/*{box-shadow:-2px -2px 2px #888;} */
#bigpicvat {position:fixed; top:10px; right:5px; padding:0 8px 5px 8px; display:none; 
	border:4px ridge silver; background-color:#222; border-radius:9px; z-index:9; max-width:95%;}
#bigpicimg {cursor:e-resize; max-width:100%;}
#piccontrol {text-align:left; color:white; position:relative; width:100%; padding:12px 0;}
#piccontrol img {display:inline; box-shadow:0; height:30px; width:auto;}
#exitpng {position:absolute; right:-5px; top:0;}

/* persoonlijke paginas */
.persplaatje {margin:0 9px; box-shadow:10px 10px 5px #888888;}

@media (max-width:600px)
	{#inhoud {margin:5px 3px;}
	.fotoshow div {width:100px;}
	#hamburger {width:40px;}
	nav {font-size:25px;}
	#counter {font-size:15px;}
	}