html, body {
	min-height:100%; margin: 0; padding: 0;}
body  {
	font-size: 120% ; font-family: Times, serif; font-family: 'Crimson Pro', serif; line-height: 1.75em; background: #efefef; color: #000000;}
div{
	display:block; position: relative; margin:0; padding:0;}
h1{text-align: center; padding-bottom:10px;  }
h1{font-size: 200% }
h2{font-size: 180% }
h3{font-size: 160% }
h4{font-size: 140% }

.slide h1{
	border-bottom: #999 solid 2px; padding-top:20px; padding-bottom:10px;}
.button{
	border:1px solid #999; text-align:center; color:#999; padding:11px; margin:auto; position:relative; display:inline-block}
.button:hover{
	color:#000; border:2px #000 solid; padding:10px}
.wrapper{
	width:90%; max-width:960px; margin:auto; margin-top:15px}
.maincontainer {
	width:auto; padding:2%; background-color:#ffffff; margin-bottom: 50px;}
.donker{
	background-color:#DCD6C4;}
.kleur{
	background-color:#D4D9DD;}
.vpkleur{
	background-color:#E1E5E7;}
.header{
	position:sticky; width:100%; display:block; z-index: 99; padding:0; height:50px; top:0px; margin-bottom:10px;}
#footer{
	text-align:center;}
.navigatie{
	text-align:center; display: block; background-color: #ECECD2; width:100%; margin:auto; }
.navigatie .item{
	display:inline-block;}
.navigatie .item a{
	text-decoration: none; color: #666;  padding:10px; padding-right:10px; display:inline-block; font-size:18px; }
.navigatie .item a:hover{
	color: #fff; background-color: #C4BEAC; color: #000;}

.content{
	margin:auto; max-width:700px; padding:20px;}
.smal h2{text-align:center;}
.Artikel{ 
	width:auto; margin:0; padding-left:10%; padding-right:10%}
.quote{
	background-color:#EFE9D8; padding:15px; }
 .smal{
	width:70%; min-width:300px; max-width:560px; margin:auto;display:block; position:relative; text-align: left; padding-bottom:15px;}
.portret img, .portret {
	max-width:250px; margin:auto; }
.portret{
	background: #F0F0F0; font-size:0.85em; line-height: 100%; text-align: center; padding-bottom:3px; }
.portretrechts{
	padding-left:40px; padding-bottom:20px; max-width:200px; margin:auto; }
.flexcontainer{
	display:flex; align-items: flex-start; flex-wrap: nowrap; justify-content:  space-evenly ;}

.slide{
margin:auto; margin-top:20px; margin-bottom:20px; background-color: #ffffff; }
.dichtbundelcontainer{
	 border-bottom:solid 2px #000; padding:5%}
/*.gedichttitel{
	height:50px;}
.gedicht{	
	width:100%; min-width:250px;position:relative; display:block; margin:15px; }*/
.gedicht{margin-left:10%; margin-bottom:100px; line-height: 150%;}

.sanserif{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size:0.9em;line-height: 150%; font-style:italic; margin-left:50px; background-color: #f5f5f5; padding: 10px; border-bottom: 1px #000 solid;}
.topbeeld{
	text-align:center; margin:auto; max-width:100%; position: relative; display: block;}

/* ordenen vertalingen dmv tabs */
.tabsstart {
	max-width: 1200px; margin: auto;}
.tabs > input {
	display: none;}
.tabsS1 > .contents{
	border-top:1px #999 solid; margin-top:-1px;}
	
	.tabs input:nth-of-type(1):checked ~ .contents .tab:nth-child(1) {
	display: block; }
	.tabs input:nth-of-type(2):checked ~ .contents .tab:nth-child(2) {
	display: block; }
	.tabs input:nth-of-type(3):checked ~ .contents .tab:nth-child(3) {
	display: block; }
	.tabs input:nth-of-type(4):checked ~ .contents .tab:nth-child(4) {
	display: block; }
	.tabs input:nth-of-type(5):checked ~ .contents .tab:nth-child(5) {
	display: block; }

.menulabeltab, .menulabeltab2 {
	display: inline-block; padding:5px; padding-left:10px; padding-right:10px; margin:0; text-align:center; width:30%;}
.gedichtentab{width:25%;}
.gedichtentab2{ width:10%}
.tabsS1  .menulabeltab:hover,  .menulabeltab2:hover {
	cursor: pointer; color:#ffffff; background-color:#C4BEAC; }
.tabsstart  .menulabeltab:hover ,  .menulabeltab2:hover {
	cursor: pointer; opacity:1; }
.tabsS1 > input:checked + .menulabeltab{
	background-color:#C4BEAC; color:#fff;}
.tabsstart > input + .menulabeltab {
	opacity:0.3;}
.tabsstart > input:checked + .menulabeltab{
	opacity:0.8;}
.tab {
	display: none;}


/* Position the image container (needed to position the left and right arrows) */
.container, .slideshow-container {
	max-width: 700px; width:90%; position: relative; margin: auto; }
.slideshow-container {
	padding-top:10px;}
.cursor, .indexthumb {
	cursor: pointer; }
.prev, .next {
	cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: #BDBD9E; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; left:-20px;}
.next {
	left:auto; right: -20px; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {
	background-color: #f1f1f1; color: black; }
.row {
	width:100%; clear: both; border-top:2px #000 solid; text-align: center}
.column{
	display: table}
.active, .indexthumb:hover {
	opacity: 1; }
.SlideImage{
	width:100%; overflow:hidden; background-repeat: no-repeat; background-size: contain; background-image: url(none); background-position: center, center; }
.SlideImage img {
	height:100%;  max-height:450px; margin:auto; display:block; max-width:100%; }



.thumb  {
	height:75px; width:auto; margin:auto; display:inline; }
.indexthumb{
	padding:5px; height:70px; opacity: 0.6;}
.fotoonderschrift{
	text-align:center;}
.letterf{ position:absolute; right:0; display:flex; flex-direction:row; flex-wrap:nowrap; z-index:50;
}
.letterf ul li{ display:inline-block; list-style: none;}
.letterf div{ height:20px; width:30px; padding-bottom:10px;margin:2px; text-align:center; display:grid;}
.letters{font-size:10px;}
.lettern{font-size:14px;}
.letterg{font-size:18px;}
.letters:hover, .lettern:hover, .letterg:hover{cursor:pointer; background-color:#F3F3E1;}
.goBack{
	padding: 5px; padding-bottom: 0; padding-top: 0; border: 1px #bbb solid; font-size: 13px; display: inline; position: absolute; z-index: 50; margin-left: 8px; color: #bbb;}
.goBack:hover{
	cursor:pointer; background-color:#fff;}
.actief{ background-color:#F3F3E1;}
/* The Modal (background) */
.modal {
  display: none; position: fixed; z-index: 99; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(255,255,255,0.7); }

/* Modal Content (image) */
.modal-content {
  margin: auto; display: block; max-width: 700px; }

/* Caption of Modal Image */
#caption {
  margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; }

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; }

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute; top: 15px; left:50%; margin-left:350px; color: #000; font-size: 40px; font-weight: bold; transition: 0.3s; }

.close:hover, .close:focus {
  color: #bbb; text-decoration: none; cursor: pointer; }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%; }
}