@font-face {
	font-family: 'ZeitungPro-Extrabold';
	src: url('/beeldbank/fonts/ZeitungPro-Extrabold.eot?#iefix') format('embedded-opentype'),
		 url('/beeldbank/fonts/ZeitungPro-Extrabold.woff2') format('woff2'),
		 url('/beeldbank/fonts/ZeitungPro-Extrabold.woff') format('woff'),
		 url('/beeldbank/fonts/ZeitungPro-Extrabold.ttf') format('truetype'),
		 url('/beeldbank/fonts/ZeitungPro-Extrabold.svg#ZeitungPro-Extrabold') format('svg');
}

.ZeitungPro-Extrabold{
	font-family: 'ZeitungPro-Extrabold';
	font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'ZeitungPro-Regular';
	src: url('/beeldbank/fonts/ZeitungPro-Regular.eot?#iefix') format('embedded-opentype'),
		 url('/beeldbank/fonts/ZeitungPro-Regular.woff2') format('woff2'),
		 url('/beeldbank/fonts/ZeitungPro-Regular.woff') format('woff'),
		 url('/beeldbank/fonts/ZeitungPro-Regular.ttf') format('truetype'),
		 url('/beeldbank/fonts/ZeitungPro-Regular.svg#ZeitungPro-Regular') format('svg');
}

.ZeitungPro-Regular{
	font-family: 'ZeitungPro-Regular';
	font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'OBCPezzi-Regular';
	src: url('/beeldbank/fonts/OBCPezzi-Regular.woff2') format('woff2'),
		 url('/beeldbank/fonts/OBCPezzi-Regular.woff') format('woff'),
		 url('/beeldbank/fonts/OBCPezzi-Regular.ttf') format('truetype');
}

.OBCPezzi-Regular{
	font-family: 'OBCPezzi-Regular';
	font-weight: normal;
    font-style: normal;
}



body {
    font-family: 'ZeitungPro-Regular', Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #e7dcea;
}

.header {
    font-family: 'OBCPezzi-Regular', Arial, sans-serif;
    font-size: 2.5em;/* 4vw; /* past de lettergrootte aan op basis van de viewport-breedte */
    font-weight: normal;
	line-height: 1em;
    margin: 20px 0;
    color: #6e0070;
	padding-top: 1em;
}
.subtitle {
    font-family: 'ZeitungPro-Regular', Arial, sans-serif;
    font-weight: normal;
    font-size: 12pt;
    color: #6e0070;
    margin-bottom: 1em;
}




/* Inhoud = Table of contents (TOC) */
.toc {
  text-align: center;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.toc-grid,
.toc-year,
.toc-items,
.toc-fullwidth {
  font-size: 16px;
}

.toc-grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 20px;
  row-gap: 5px;
  justify-content: center;
  text-align: left;
}

.toc-year {
  color: black;
}

.toc-items {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  gap: 8px;
}

.toc-items a {
  color: inherit;
  text-decoration: none;
}

.toc-fullwidth {
  grid-column: 1 / span 2;
  text-align: left;
}

.toc h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  text-align: center;   /* keep "Inhoud" heading centered */
}
.toc ul {
  list-style-type: disc; /* this puts the bullets in front */
  padding-left: 1.5rem; /* indent for bullets */
  margin: 0;
}
.toc li {
  margin: 0.25rem 0;
}


.leftback-index {
  display: block;
  width: 280px;
  margin: 0 0 10px 0;
  position: absolute;
  mix-blend-mode: multiply;
  opacity: 0.7;
  top: -60px;
  left: calc(15% - 100px); /* centered between left edge and menu */
  z-index: 1000;
}




.leftback-index img {
  display: block;
  width: 280px;
  height: auto;
}


.chapter {
    background-color: #f1e8f3; /* Zet de achtergrondkleur voor elk hoofdstuk */
    text-align: center; /* Zorgt ervoor dat de inhoud van het hoofdstuk gecentreerd is */
    padding: 15px; /* Voegt wat padding toe voor ruimte rond de inhoud */
    margin: 40px auto; /* Centreert het hoofdstuk en voegt verticale marge toe */
    max-width: 1200px; /* Maximale breedte van elk hoofdstuk */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* Optionele schaduw voor diepte */
    border-radius: 15px; /* Voegt afgeronde hoeken toe */
}

.chapter-title {
    font-family: 'ZeitungPro-Regular', Arial, sans-serif;
    font-size: 18px; /* Of een andere gewenste grootte */
	font-weight: normal;
	margin-top: 5px; /* Voegt ruimte toe boven de hoofdstuktitel */
    margin-bottom: 20px; /* Voegt ruimte toe onder de hoofdstuktitel */
}

.chapter-title .hash {
  font-size: 0.8em;
  text-decoration: none;
  opacity: 0.7;
}
.chapter-title .hash:hover,
.chapter-title .hash:focus {
  opacity: 1;
  text-decoration: underline;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
	margin: 0 auto; /* Centreert de gallery */
    padding: 0 20px;
    margin-bottom: 40px; /* Voegt ruimte toe aan de onderkant van het hoofdstuk */
    max-width: 1200px; /* Maximale breedte van de gallery */
}
.gallery .image-container {
    width: calc(25% - 10px); /* verander naar 20% om 5 kolommen te maken, naar 25% voor 4 kolommen, 33.333% voor 3 kolommen, etc*/
    margin-bottom: 20px;
}
.gallery img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.gallery .image-title {
    font-family: 'ZeitungPro-Regular', Arial, sans-serif;
    font-size: 9pt;
    margin-top: 5px;
}

.image-container {
    position: relative;
    /* Andere stijlen... */
}

.image-container img {
    /* Stijlen voor uw afbeeldingen, zoals breedte en hoogte */
    display: block; /* Dit zorgt ervoor dat de img-elementen geen ruimte onder zich hebben */
}

.image-container .hover-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Zwarte achtergrond met enige transparantie */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Maakt de tekst standaard onzichtbaar */
    transition: opacity 0.3s; /* Voor een soepele overgang */
    pointer-events: none; /* Zorgt ervoor dat de link nog steeds klikbaar is */
}

.image-container a:hover .hover-text {
    opacity: 1; /* Maakt de tekst zichtbaar bij muis-over */
}

.footer {
    text-align: center;
    padding: 20px;
    font-family: 'ZeitungPro-Regular', Arial, sans-serif;
    font-size: 8pt;
    margin-top: 40px;
    margin-bottom: 80px;
    color: black;
    text-decoration: none; /* Verwijdert de onderstreping van links */
}

.footer .footer-line1 {
    font-family: 'OBCPezzi-Regular', Arial, sans-serif;
    font-size: 18pt;
    margin-bottom: 10px; /* Ruimte tussen de twee regels */
}

.footer .footer-line2 {
    /* De stijl is al ingesteld door de standaard footer stijlen */
}

.footer,
.footer a {
    color: #333; /* Zorgt ervoor dat alle tekst in de footer zwart is */
    text-decoration: none; /* Verwijdert de onderstreping van links */
}

.footer a:hover,
.footer a:visited,
.footer a:active {
    color: #333; /* Specifieke kleur voor hover, visited en active staten van het e-mailadres */
}

.footer-email:hover,
.footer-email:visited,
.footer-email:active {
    color: #333; /* Specifieke kleur voor hover, visited en active staten van het e-mailadres */
}


@media (max-width: 1200px) {
    .gallery {
        max-width: 100%; /* Maakt de gallery volledige breedte onder 1200px */
        padding: 20px 50px; /* Verhoogt de zij-padding voor grotere marges */
    }
    .image-container {
        width: calc(33.333% - 10px); /* Past de breedte aan voor drie kolommen */
    }
    .chapter {
        margin: 20px 20px; /* Voegt 20px marge toe aan linker- en rechterzijde */
        padding: 20px; /* Behoudt padding binnen het hoofdstuk */
    }
}
@media (max-width: 900px) {
    .gallery .image-container {
        width: calc(50% - 10px);
    }
    .chapter {
        margin: 20px 20px; /* Voegt 20px marge toe aan linker- en rechterzijde */
        padding: 20px; /* Behoudt padding binnen het hoofdstuk */
    }
	
	.header {
    	margin-top: 120px;
  	}
}

@media (max-width: 700px) {
    .header {
        font-size: 2em; /* Grotere lettergrootte voor kleinere schermen */
        width: 70%; /* Past de breedte aan naar 70% */
        margin: 0 auto; /* Centreert de header */
        margin-bottom: 20px; /* Voegt 20 pixels witruimte toe onder de header */
    }
	.leftback-index {
        font-size: 5.5vw; /* Grotere lettergrootte voor kleinere schermen */
    }
	.subtitle {
		font-size: 10pt;
        width: 70%; /* Past de breedte aan naar 70% */
        margin: 0 auto; /* Centreert de header */
	}
	.footer .footer-line1 {
		font-family: 'OBCPezzi-Regular', Arial, sans-serif;
		font-size: 15pt;
	}

	.header {
    	margin-top: 130px;
  	}

}

@media (max-width: 600px) {
    .gallery .image-container {
        width: 100%;
    }
    .chapter {
        margin: 20px 12px; /* Voegt 10px marge toe aan linker- en rechterzijde */
        padding: 20px; /* Behoudt padding binnen het hoofdstuk */
    }

	.header {
    	margin-top: 140px;
  	}
	
	.leftback-index img {
    	width: 250px;
  	}

    .toc {
      padding: 0 20px;
    }

}



/* Stijlen voor niet bezochte links */
a:link {
    color: #6e0070;      /* Maakt de link grijs */
    text-decoration: none; /* Geen onderstreping */
}

/* Stijlen voor bezochte links */
a:visited {
    color: #6e0070;     /* Maakt de link grijs */
    text-decoration: none; /* Geen onderstreping */
}

/* Stijlen voor muis-over (hover) en focus-toestand voor zowel bezochte als niet bezochte links */
a:hover, a:focus {
    color: #00ff00;     /* Maakt de link grijs */
    text-decoration: none; /* Verwijdert de onderstreping bij hover/focus */
}