* {box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}
@font-face {font-family:'scriptmt'; src:url("fonts/Precious.ttf")format("truetype");} 
body {background-image:url(img/itbachtergrnd.jpg); background-size:100% auto; 
	background-attachment:fixed; font-size:14px;}
table {border-collapse:collapse;}
h1 {text-align: center;}
h2 {color:green; clear:both;}
a:hover {color:#060; font-weight:900;}
img {border:none;}
.clear {clear:both;}
.klein {font-size:10px; font-style:italic;}
.rood {color:red;}
.i {font-style:italic;}

#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 {width:99%; max-width:935px; min-width:310px; 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:190%; width:100%; margin:20px auto 0 auto; font-family:'scriptmt'; 
	text-shadow:2px 2px 2px gray; text-align:center;}

#topkop {font-size:7vw;}

#intro,.intro2 {margin:5px 10px; color:#060;}
#inhoud {margin:5px 5px;}
.inhoudtekst {background-color:#F0FAE6; padding:10px;}

.citaat {font-size:90%; color:#444; margin:0 10px;}
.pubs {padding:5px 9px; background-color:#F0FAE6 /*E4EFD9*/; }
.pubs li {margin:5px 0;}

#counter {display:flex; flex-wrap:nowrap; justify-content:space-between;}

/* foto  */
button {width:200px; font-weight:bold; padding:3px; margin:5px; height:60px;}
button:hover {text-decoration:underline;}

.fotoshow {display:flex; justify-content:space-around; flex-wrap:wrap;}
.fotoshow div {text-align:center; align-items:center; width:60px; height:auto; 
	border:1px solid green; margin:3px auto; padding:4px; font-size:75%; background-color:#F0FAE6; }
.fotoshow div img{max-width:100%; padding:2px; box-shadow:6px 6px 5px #888888;}
img[src*='brief.gif'] {margin:0!important; padding:0!important; width:15px!important; position:relative; top:0px;}
img[src*='x.jpg'] {width:100px; opacity:0.4}

.fotos1 {background-color:#F0FAE6; width:100%; 
	border:1px solid green; border-bottom:0; margin:5px; padding-left:5px;}
.fotos1 img ,.fotos2 div img{padding:2px; box-shadow:6px 6px 5px #888888; margin:3px 8px 0;}
.fotos2 {display:flex; justify-content:space-between; flex-wrap:wrap;}
.fotos2 div {min-width:270px; width:100%; margin-top:5px; border:1px solid green; border-bottom:0; background-color:#F0FAE6; padding:5px;}
.fotos2 div img {width:70px; height:auto;}

/* in progress image 
@keyframes overscherm {0%{left:-35%; width:30%;} 40%{left:70%; width:30%} 80%{left:40%;} 100%{width:15%;}}
#inprogress {position:absolute; left:40%; top:3px; z-index:222; width:15%; animation:overscherm 30s;} */

@media (min-width:450px)
	{.fotoshow div {width:85px; font-size:90%;}
	.fotos2 div img {width:80px; height: auto;}
	}
@media (min-width:620px)
	{body {font-size:16px;}
	.fotoshow div {width:90px; font-size:100%;}
	.fotos2 div{width:49%;}
	.fotos2:nth-child(odd) {clear:both;}
	.fotos2 div img {width:90px; height:auto;}
	}
@media (min-width:800px)
	{.fotoshow div {width:100px; font-size:100%;}
	.fotos2 div img {width:100px; height: auto;}
	}
@media (min-width:999px) {#topkop {font-size:390%} }

#hoverdiv {position:absolute; left:-1000px; top:0; background-color:transparent; width:1px; }
#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;}

/* voor printen   */
@media print {nav {display:none;}}
/*.copyrgt {position:absolute; bottom:7px; right:20px;} */
/* fotos */


/* persoonlijke paginas 
.persplaatje {margin:0 9px;  box-shadow:10px 10px 5px #888888;} */

