﻿/* style petertermaten.nl - 
kleuren: 
#666666 rgb(102, 102, 102) grijs - #666699 rgb(102, 102, 153 0.5) blauw - 
#808080 rgb(128, 128, 128) grijs menu - #e6e6e6 rgb(230, 230, 230) lichtgrijs menu
 */

body {
	margin:0;
	padding:0;
	background-color: #FFFFFF;
	color: #666666;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1em;
	overflow-y: scroll;
	text-align: center;
}

header {
	width:100%;
	text-align:center;
}
header h1 {
	width:100%;
	margin:0;
	text-align:center;
/*	display:block;
	margin:0;
	padding:0.4em; */
}
header h2 {
	width:100%;
	margin:1em 0 0 0;
	text-align:center;
}
header div {
	width:100%;
	display:block;
}
/*header {
	display:flex;
	justify-content:center;
	align-content:center;
}*/

nav {
	font-family: geometri;
	margin:1em 0;
}

section {
/*	padding:0.5em; */
	color: #333333;
	background-color:;
}

aside {
	padding:0 1em;
	background-color:;
}

footer { 
	width:100%;
	text-align:center;
	background-color:; 
	padding:0.6em;
}

h1, h2 {
	color: #666699;
	font-family: geometri;
	text-align:left;
	word-spacing: 0.1em;
	letter-spacing: 0.1em;
}
h3 {
	color: #666699;
	text-align: left;
	word-spacing: 0.1em;
	letter-spacing: 0.1em;
}
h4 {
	color: #666699;
	text-align: left;
}
p {
}

img {
	max-width:100%;
	height:auto;
/*	border:0.1em #666666 solid; */
}
figure {
	max-width:100%;
	text-align:center;
	display:inline-block;
	margin:0;
	padding:0.5em;
	box-shadow:0px 1px 3px #e6e6e6;
	border-radius:3px;
	margin-bottom:1em;
/*	border:0.1em #666699 solid; 
	border-bottom:0.1em #CC9933 solid; */
}
figure img {
/*	padding:0.5em;*/
	border-top:0.1em #666699 solid; 
	border-bottom:0.1em #666699 solid; 
}

figcaption {
	font-style:italic;
	color:#666699;
	text-align:center;
	font-size:1em;
	}

a {
	font-weight:bold;
	text-decoration:none;
	color:#666699;
	letter-spacing:0.02em;
	word-spacing:0.02em;
}
a:hover {
	color:;
}

table {
	margin:10px 0;
}

table, th, td {
	border-collapse:collapse; 
	border:1px solid ;
}
th, td {
	padding:0 0.5em;
	text-align:left;
}

ul {
	padding:0 1em 0 1em;
	list-style-type:disc;
}
/*
li {
	margin:0;
	padding:0;
}  */
hr {
	color:;
	width:100%;
}

@font-face {
	font-family: geometri;
	src:url('docs/geo415md.woff');
}

.container {
	text-align:left;
}

.flt-L {
	float:left;
}
.flt-R {
	float:right;
}

.textIt {
	font-style: italic;
	text-indent:hanging;
}


/*.logo {
	width:7em;
	min-width:5em;
	padding:0.1em; 
	background-color:; */
}


/* figure classes */
.fotocompl {
	width:600px;
}
.fotocompl-line {
	width:100%;
	margin-bottom:20px;
}
.fotocompl-50 {
	width:50%;
}
.fotocompl-25 {
	width:25%;
}
.fotocompl-10 {
	width:10%;
}

/* foto binnen figure */
.foto-80 {
	max-width:90%;
}
.foto-50 {
	max-width:48%;
}
.foto-30 {
	max-width:33%;
}

/* foto container - ul */

.foto-container {
	display:grid;
	grid-template-columns:auto;
	grid-template-rows:repeat(auto-fill,minmax(5em,1fr));
	grid-gap:0.5em;
	grid-auto-flow:dense;
	list-style:none;
	margin:1em 0;
	max-width:100%;
/*	border:1px #666699 solid;
	background-color:rgba(102, 102, 153, 0.1);
	padding:1em; 
	box-shadow:1px 1px 5px; */
}
.foto-container li {
	border:1px #fff solid;
	background-color:#fff;
	grid-row-start: span 1;
}

.foto-container li.small-r {
	grid-row-start: span 2;
}
.foto-container li.xsmall-r {
	grid-row-start: span 3;
}
.foto-container li img {
	display:block;
	object-fit:cover;
	width:100%;
	height:auto;
	padding:0.5em;
	box-shadow:1px 1px 5px ;
}

/* fotocontainer2 internal bij beelden15-25 */

.foto-container3 {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(10em,1fr));
	grid-template-rows:auto; 
	grid-gap:0.5em;
	grid-auto-flow:dense;
	list-style:none;
	margin:1em 0;
	max-width:100%;
/*	border:1px #666699 solid;
	background-color:rgba(102, 102, 153, 0.1);
	padding:1em; */
}
.foto-container3 li {
	grid-column-start: span 1;
	border-bottom:1px #666699 solid;
}
.foto-container3 li.xsmall {
	grid-column-start: span 2;
}
.foto-container3 li.small {
	grid-column-start: span 3;
}
.foto-container3 li.wide {
	grid-column-start: span 4;
}
.foto-container3 li.wide3 {
	grid-column-start: span 6;
}
.foto-container3 li img {
	display:block;
	object-fit:cover;
	border:1px #666699 solid;
	width:100%;
	height:auto;
	box-shadow:1px 1px 5px ;
	padding:0.5em;
/*	border-radius:3px; */
}


/* foto zoom */
.groot3t10 {
	width:30%; 
	transition: width 3s ease;
}
.groot3t10:hover {
	width:100%;
}



/* foto zoom - class add to responsive */

.zoomTL:hover {
	transform:scale(2,2);
	transform-origin: top left;
}
.zoomTC:hover {
	transform:scale(2,2);
	transform-origin: top center;
}
.zoomTR:hover {
	transform:scale(2,2);
	transform-origin: top right;
}
.zoomBL:hover {
	transform:scale(2,2);
	transform-origin: bottom left;
}
.zoomBC:hover {
	transform:scale(2,2);
	transform-origin: bottom center;
}
.zoomBR:hover {
	transform:scale(2,2);
	transform-origin: bottom right;
}
.zoomCC:hover {
	transform:scale(2,2);
	transform-origin: center center;
}


/* go to top */
#myBtn {
	display: none;
	position: fixed;
	bottom: 20px; /* space from bottom */
	right: 50px; /* space from right */
	z-index: 99;
	cursor:default; /* Add a mouse pointer on hover */
	font-size:x-large;  /* Font size */
	border: none;  /* remove border */
	outline: none; /* remove outline */
	background-color:#666699; 
	color:#fff; 
	padding:0.4em 0.6em; 
	border-radius:50%; 
	opacity:0.7;
}
#myBtn:hover {
	background-color:#666666; 
	color:#fff;
}

