<!-- Laatst aan gewerkt: 20260320  dbs13662797-mobile-V3  -->
/* van de site MM.COM - stijlMM-mobile  -- */
/* EM is relative to the parent element's font size, so if you wish to scale the element's size based on its parent's size, use EM. REM is relative to the root (HTML) font size, so if you wish to scale the element's size based on the root size, no matter what the parent size is, use REM.  */

@media screen and (max-width:441px) {
.PIXELaanwijzer { top: 0px; width: 95%; height: 5px; background-color: red; } }

@media screen and (min-width:441px) and (max-width:600px){
.PIXELaanwijzer { top: 0px; width: 95%; height: 5px; margin: auto; background-color: lightblue;  } }

@media screen and (min-width:601px) and (max-width: 765px) {
.PIXELaanwijzer { width: 95%; height: 5px; background-color: yellow; } }

@media screen and (min-width: 766px) and (max-width: 1024px) {
.PIXELaanwijzer { width: 95%; height: 5px; background-color: orange; } }

@media screen and (min-width: 1024px) and (max-width: 1200px ) {
.PIXELaanwijzer { width: 95%; height: 5px; background-color: lightgreen; } }

@media screen and (min-width: 1201px) and (max-width: 1400px ) {
.PIXELaanwijzer { width: 100%; height: 5px; background-color: red; } }

@media screen and (min-width: 1401px) and (max-width: 1500px ) {
.PIXELaanwijzer { width: 100%; height: 5px; background-color: yellow; } }

@media screen and (min-width: 1501px) {
.PIXELaanwijzer { width: 100%; height: 5px; background-color: lightblue; } }

body 			{ font-family: "optima", sans serif; background-color: #FFFDF6; }
bodyINDEX 		{ font-family: "optima", sans serif; background-color: #FFFDF6; background-image: ./pixBODY/Rothenburg-05.jpg; }
bodyDETAILS 	{ font-family: "optima", sans serif; background-color: #999; }

.SITE			{ display: flex; flex-direction: column; justify-content: flex-start; width: 96%; max-width: 1300px; height: max-content; margin: auto; background-color: #FFFDF6; color: #FFF; z-index: 0 ; flex-wrap: wrap; box-sizing: border-box; } 

.SITEdetails	{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100vw; height: 100vh; margin: auto;  background-color: #333; }
.PIJLterug		{ width: 50px; height: auto; top: 0px;  }

.SITEwit		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 50%; max-width: 40rem; height: max-content; margin: 0 auto; background-color: #FFFDF6; padding-left: max(3rem); }

/* A A A A A A A A A A A A A - DIT IS VOOR ALLE ARCHIEF-TXT - PAGINAS */
.contARCHtxt	{ display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; width: 100%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; border-bottom: 1px solid #0F3; }
.ARCHkop		{ display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; width: 100%; height: 1.875rem; font-size: 0.875rem; background-color: #CCC; margin: auto; }
.ARCHid			{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHjaar		{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHtitelNL	{ display: flex; flex:10; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHtekstNL	{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHafb		{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHmateriaal	{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHondergrond { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHcatNR		{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHkodeNieuw  { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHdocNR 		{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHmapNR 		{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; }
.ARCHafbFIT		{ object-fit: contain; width: 80%; max-height: 6.25rem; padding: 5px; flex-wrap: wrap; margin: auto; border: 1px solid #CCC; }

/* ------- Voor de archiefpagina DOCUMENTEN  --------  */
.ARCHdocsCONT	{ display: flex; flex-direction: row; width: 100%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; background-color: #FFFDF6; margin: 0.625rem; }
.ARCHdocTXT		{ display: flex; flex: 5; height: max-content; background-color: #FFFDF6; padding: 0.625rem; }
.ARCHdocIMG		{ display: flex; flex: 1; height: max-content; background-color: #FFFDF6; }

/* ------- Voor de archiefpagina FOTO  --------  */
.ARCHfotoKOP	{ display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; width: 100%; height: 1.875rem; font-size: 0.875rem; background-color: #CCC; margin: auto; }
.ARCHfotoID		{ display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; }
.ARCHfotoJAAR	{ display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; }		
.ARCHfotoTXT	{ display: flex; flex:14; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; }
.ARCHfotoCATnr	{ display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; }
.ARCHfotoIMG	{ display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; }
.ARCHfotoNR		{ display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; }
.ARCHfotoFIT2	{ object-fit: contain; width: 70px; height: max-content; flex-wrap: wrap; margin: auto; }

/* A A A A A A A A -------- AGENDA ---------------------*/
.contAGENDAoud	{ display: flex; flex-direction: row; justify-content: flex-start; align-content: center; width: 95%; height: max-content; font-size: 0.875rem; flex-wrap: wrap; background-color: #FFC;  margin: auto; }
.agendaTXToud	{ width: 100%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; overflow: hidden;  padding: 5px; }
.contAGENDA		{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 95%; height: max-content; font-size: 0.875rem; flex-wrap: wrap; background-color: #FFF; margin: auto; }
.agendaTXTenIMG { display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 18.75rem; height: max-content; font-size: 0.875rem; background-color: #FFC; margin: auto; flex-wrap: wrap;  background-color: #FFF; border: 1px solid black; margin: 0.625rem; border-radius: 5px; }
.agendaTITEL	{ width: 18.75rem; height: max-content; text-align: center; font-style: italic; font-size: 1.125rem; line-height: 1.5rem; font-weight: bold; color: #666;  padding: 0.625rem; }
.agendaTXT		{ display: flex; width: 18.75rem; height: 12.5rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: center; color: #000; overflow: hidden; padding: 5px;  flex-wrap: wrap; margin: auto; }
.agendaIMG		{ display: flex; width: 18.75rem; height: 12.5rem;  border-radius: 5px; flex-wrap: wrap; margin: auto; }
.agendaIMGfit	{ object-fit: contain; width: 80%; height: max-content; padding: 5px; flex-wrap: wrap; border-radius: 5px; margin: auto; }
.agendaJAAR		{ width: 12.5rem; height: 0.625rem; padding: 5px; flex-wrap: wrap;  text-align: left; }

/* A A A A A A A A ----------- A HREF INSTELLINGEN   ---------*/
a				{ font-size: 1.125rem; line-height: 1.25rem; color: #333; text-decoration: none; }
a.href			{ font-size: 1.125em; line-height: 1.25rem; color: #000; text-decoration: none; }
a.active		{ font-size: 0.875rem; color: blue; text-decoration: none; border: 1px dotted blue; height: max-content; background-color:#93d3fc; border-radius: 5px; padding: 5px; }
a.archief		{ font-size: 1.125rem; line-height: 1.25rem; color: #fff; text-decoration: none; }
a.artikelen     { font-size: 0.875rem; line-height: 1rem; color: blue; text-decoration: none; }
a.home			{ font-size: 0.875rem; line-height: 1rem; color: #000; text-decoration: none; text-align: left; } 
a:hover		    { font-size: 1rem; line-height: 1rem; color: rgb(148, 4, 4); text-decoration: none; }
a.hoverARCHIEF	{ font-size: 0.875rem; line-height: 1rem; color: #333; text-decoration: none; }
a.fontsizeh1	{ font-size: 1.125rem; font-weight: bold; line-height: 1.25rem; text-decoration: underline; }
a.font18		{ font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; text-decoration: none; }
a.font48		{ font-size: 3rem; font-weight: normal; line-height: 1.75rem; text-decoration: none; }
a.index			{ font-size: 0.875rem; text-decoration: none; color: #999 ; }
a.KOPregel2 	{ font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #666; }
a.left			{ font-size: 1.125rem; text-align: left; font-weight: normal; line-height: 1.25rem; color: #666; }
a.left24		{ font-size: 1.5rem; text-align: left; font-weight: normal; line-height: 1.5rem; color: #666; }
a.leftMENU		{ font-size: 1.5rem; text-align: left; font-weight: normal; line-height: 1.25rem; color: #FFF; }
a.links			{ font-size: 1.2rem; line-height: 1.5rem; color: #999; text-decoration: none; }
a.link			{ font-size: 0.875rem; line-height: 1rem; color: #000; text-decoration: none; }
a:link18		{ font-size: 1.125rem; line-height: 1rem; color: #000; text-decoration: none; }
a.mail			{ font-size: 0.875rem; font-weight: normal; line-height: 0.75rem; color: #666; }
a.menu			{ font-size: 0.875rem; color: #000; text-decoration: none; line-height:1rem; }
a.nieuwsbrief	{ font-size: 1.2rem; line-height: 1.5rem; color: white; text-decoration: none; }
a.selMENU		{ font-size: 0.75rem; font-weight: normal; line-height: 0.75rem; color: #333; }
a.wit			{ font-size: 0.875rem; font-weight: normal; line-height: 0.75rem; color: #FFF; }
a.witTXT		{ font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; height: auto; color: #FFF; }
a.groot			{ font-size: 1.5rem; font-weight: normal; line-height: 2.3rem; height: auto; color: #000; }

/* D D D D D D D ------------- DETAILS ------------ */
.DETAILS 		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100vw; height: 100vh; margin: auto; background-color: #333; } 
.detailsIMGenTXT { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 100%; height: auto; }
.detailsIMG	    { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 150%; height: auto; padding: 10px; } 
.detailsTXT		{ text-align: left; width: 100%; font-size: 1rem; line-height: 1.125rem; color: #FFF; padding: 10px; }
.detailsTXTwit	{ text-align: left; max-width: 60%; min-width: 380px; font-size: 0.875rem; line-height: 1.125rem; color: #FFF; padding: 10px; }
.detailsIMGfit	{ object-fit: contain; max-width: 60%; min-width: 380px; height: auto; }

.TXTdetails		{ width: 100%; font-size: 0.875rem; font-weight: normal; line-height: 1.5rem; color: #FFF; }

/*  F F F F F F F F F F F F --------------------------*/	
/* float tekst om een plaatje een  VOOR DE PAGINA HOMMAGE */
.floatIMGenCAP	   { display: inline-block; flex-direction: column; justify-content: center; text-align: center; width: 100%; height: auto; }
/*.floatIMG		   { text-align: center; width: 22rem; } */
.floatIMGfit	   { object-fit: cover; object-position: center; width: 80%; height: auto; }
.floatCAP		   { width: 90%; height: max-content; font-size: 12px; line-height: 14px; font-style: italic; padding: 20px; }

/* float tekst om een plaatje een  VOOR DE PAGINA HOMMAGE */
.floatIMGenCAP-L	{ display: flex; flex-direction: column; width: 24rem; height:  max-content; margin: auto; }
.floatIMG-L			{ text-align: center; width: 22rem; padding: 10 15px 0 0; }
.floatIMGfit-L		{ text-align: center; object-fit: contain; width: 24rem; height: auto; padding: 0 10 0 0 ; }
.floatCAP-L			{ height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5 0 5 0 ; }

.floatIMGenCAP-L1	{ text-align: left; display: flex; flex-direction: column; width: 18.75rem; height: max-content; padding: 5 5 5 5; }
.floatIMG-L1		{ text-align: left; padding: 10 5px 0 0; }
.floatIMGfit-L1	    { object-fit: contain; width: 18.75rem; height: auto; }
.floatCAP-L1		{ height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5 0 5 0 ; }

.floatIMGenCAP-L2	{ text-align: left; display: flex; flex-direction: row; justify-content: flex-start; width: 3.125rem; height: max-content; }
.floatIMG-L2		{ text-align: left; }
.floatIMGfit-L2	    { object-fit: contain; width: 3rem; height: auto; }
.floatCAP-L2		{ height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; }

.floatIMGenCAP-C	{ text-align: center; display: flex; flex-direction: column; width: 12.5rem; height: max-content; margin: auto;  }
.floatIMG-C			{ text-align: center; padding: 5px 5px 5px 5px; }
.floatIMGfit-C		{ object-fit: contain; width: 12.5rem; height: max-content; padding: 5px 0.625rem 0px 0px; }
.floatCAP-C			{ height: max-content; text-align: left; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; }

.floatIMGenCAP-C1	{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 24rem; height: auto; margin: auto; flex-wrap: wrap; }
.floatIMG-C1		{ text-align: center; width: 24rem; }
.floatIMGfit-C1	    { text-align: center; object-fit: contain; width: 90%; height: auto; padding: 5px 0px 0px 0px; margin: auto; }
.floatCAP-C1		{ height: max-content; text-align: center; font-size: 0.875rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; }

.floatIMGenCAP-C2	{ text-align: center; display: flex; flex-direction: column; width: 22rem; height: auto; margin: auto; flex-wrap: wrap; }
.floatIMG-C2		{ text-align: center; width: 22rem; }
.floatIMGfit-C2	    { object-fit: contain; width: 100%; height: auto; padding: 15px 0px 0px 0px; margin: auto; }
.floatCAP-C2		{ height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; }

.floatIMGenCAP-R	{ text-align: right; display: flex; flex-direction: column; width: 12.5rem; height:  auto; }
.floatIMG-R			{ text-align: right; padding: 0 10 0 5px; }
.floatIMGfit-R		{ object-fit: contain; width: 12.5rem; height: auto;  padding: 5px 0px 0px 0.625rem; }
.floatCAP-R			{ height: max-content; text-align: left; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 10px 0px; }

.FOOTER				{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: auto; flex-wrap: wrap;  margin: auto; background-color: #bae2fc; border-radius: 5px; }
.footerItem1		{ width: 85%; height: auto; font-size: 1.125rem; line-height: 1.5rem; color:#666; text-align: center; background-color: #bae2fc; flex-wrap: wrap; padding: 1.25rem;  }
.footerItem2		{ width: 10%; height: auto; text-align: right; background-color: #bae2fc; flex-wrap: wrap; }
.footerItem3		{ width: 100%; height: auto; text-align: left; font-size: 12px; color: #999;  background-color: #bae2fc; flex-wrap: wrap; padding: 5px; }

/* FORMULIER STYLING  */
form 		{ display: flex; flex-direction: row;  justify-content: center; margin: auto; width: 99%; font-size: 20px; flex-wrap: wrap; }
input		{ width:   95%; font-size: 18px; color: #999; height: 30px; padding: 5px; border-radius: 5px; }
.afmTXThok	{ width: 400px; height: 1.75rem; padding: 5px; } */
textarea	{ width:   95%; height: 150px; border-radius: 5px; font-size: 24px; }
.myBtn		{ display: flex; width: 20%; height: 50px; border: 1px solid #ededed; margin: 5px; }
.btn		{ display: flex; flex: 1; width: 50%; height: 70px; border: 1px solid #ededed; color: #000; }

/* ¨s  - Kijk hieronder bij ZZZZZ ZOEKVENSTER  ------------*/

/* h h h h h H H H --------  H  elementen -----------------*/
.hr			    { color: #ededed; }

h				{ font-size: 0.8rem; font-weight: normal; line-height: 1.1rem; }
h-bold		    { font-size: 0.8rem; font-weight:   bold; line-height: 1.1rem; }
h1				{ font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; }
h1-bold		    { font-size: 1.1rem; font-weight:   bold; line-height: 1.4rem; }
h2				{ font-size: 1.4rem; font-weight:   bold; line-height: 1.5rem; }
h3				{ font-size:   2rem; font-weight:   bold; line-height:   3rem; }

/* ----- EEN DIV DIE IN HET MIG+DDEN VAN DE PAGINA STAAT ----*/

.CENTRUM        { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; }
.contINLOGGEN   { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; }
.inlogCont      { display: flex; width: 200px; height: 300px; background-color: rgb(192, 244, 192); padding: 10px; }

/* ------  I I I I I I I I ------------ IMAGE - LOSSE PLAATJES IN DE NIEUWSBRIEVEN--------------- */
.IMGnieuws      { display: flex; width: 400px; height: auto; flex-wrap: wrap; text-align: center; }

/* ------  I I I I I I I I ------------IMAGE EN TEKST --------------- */
.contIMGenTXT	{ display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 12.4rem; height: auto; padding: 0.625rem; margin: 10px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; }
.contTITEL		{ width:  12.5rem; height: max-content; text-align: center; font-style: italic; font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; color: #999;  padding: 0 0 5px 0 ; }
.contONDERtitel	{ width:  12.5rem; height: 3.125rem; font-size: 1rem; line-height: 1rem; font-weight: normal; text-align: left; color: #000; overflow: hidden;  padding: 5px 0 0 0 ; }
.contIMG		{ width:  12.5rem; height:  12.5rem; border-radius: 5px; text-align: center; padding: 0.625rem 0 0 0 ; margin: auto; }
.contTXT		{ width: 9.375rem; height: 11.25rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; }
.contIMGfit		{ object-fit: contain; width: 20rem; height: auto; border-radius: 5px; }


@media screen and (max-width: 481px) {
/* --------- FORMAAT voor de plaatjes - knoppen op de INDEX PAGINA - Pixelaanwijzer is yellow */ 
.contIMGenTXT1		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 90%; height: auto; padding: 5px; background-color: #fff9e6; flex-wrap: nowrap; margin: 10px; }
.contTITEL1			{ width: 600px; height: auto; text-align: center; font-size: 1.5rem; font-style: normal; line-height: 1.6rem; color: #06F;  padding: 10px 0px 10px 0px ; }
.contONDERtitel1	{ width: 300px; height: 8.625rem; font-size: 1.2rem; line-height: 1.5rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; }
.contIMG1			{ width: 350px; height: auto; border-radius: 5px; text-align: center; }
.contTXT1			{ width: 600px; height: 10.625rem; font-size: 0.5rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; padding: 5px; }
.contIMGfit1		{ object-fit: contain; width: 18rem; height: 18rem; border-radius: 5px; margin: auto; } }

@media screen and (min-width: 482px) and (max-width: 768px) {
/* --------- FORMAAT voor de plaatjes - knoppen op de INDEX PAGINA - Pixelaanwijzer is yellow */ 
.contIMGenTXT1		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 90%; height: auto; padding: 5px; background-color: #fff9e6; flex-wrap: nowrap; margin: 10px; }
.contTITEL1			{ width:   90%; height: auto; text-align: center; font-size: 1.5rem; font-style: normal; line-height: 1.6rem; color: #06F;  padding: 10px 0px 10px 0px ; }
.contONDERtitel1	{ width:  auto; height: 8.625rem; font-size: 1.2rem; line-height: 1.5rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px;  }
.contIMG1			{ width: 350px; height: auto; border-radius: 5px; text-align: center; }
.contTXT1			{ width: 600px; height: 10.625rem; font-size: 0.5rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; padding: 15px; }
.contIMGfit1		{ object-fit: contain; width: 18rem; height: 18rem; border-radius: 5px; margin: auto; padding: 5px; } }


@media screen and (min-width: 769px) {
/* --------- FORMAAT voor de plaatjes - knoppen op de INDEX PAGINA */  
.contIMGenTXT1		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 90%; height: auto; padding: 10px; margin: 5px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; flex-wrap: nowrap; border-radius: 5px; }
.contTITEL1			{ width: 10.625rem; height: max-contet; text-align: center; font-size: 1.5rem; font-style: normal; line-height: 1.6rem; color: #06F;  padding: 10px 0px 10px 0px ; }
.contONDERtitel1	{ width: 10.625rem; height: 10.625rem; font-size: 1rem; line-height: 1.2rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; }
.contIMG1			{ width: 10.625rem; height: 10.625rem; border-radius: 5px; text-align: center; }
.contTXT1			{ width: 10.625rem; height: 10.625rem; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; padding: 5px;overflow: hidden; }
.contIMGfit1		{ object-fit: contain; width: 10.625rem; height: 10.625rem; border-radius: 5px; margin: auto; } }

/* ---------I I I I I I I I ------------IMAGE EN TEKST 2 ---------------  test voor IMG Amsterdam Verdwijnd en ARCHfotopagina   */
.contIMG2enTXT2	{ display: flex; flex-direction: column; justify-content: space-evenly; align-content: center; width: max-content; height: 370px; padding: 5px; margin: auto; }
.contTITEL2			{ width: 12.5rem; height: max-content; text-align: left; font-style: italic; font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; color: #999; padding: 5px; }
.contONDERtitel2	{ width: 9.375rem; height: 11.875rem; font-size: 0.875rem; line-height: 1rem; font-weight: normal; text-align: left; color: #000; overflow: hidden;  padding: 5px; }
.contIMG2			{ width: auto; height: 21.25rem; margin: auto; border-radius: 5px; }
.contTXT2			{ width: 15.625rem; height: 12.5rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; }
.contIMGfit2		{ object-fit: cover; width: auto; height: 12.5rem; border-radius: 5px; margin: auto; }
.contTXTfit2		{ width: 12.5rem; height: 12.5rem; border-radius: 5px; margin: auto; overflow: hidden; }

.image { width: 500px; height: auto; }

/* ------  I I I I I I I I ------------IMAGE EN TEKST 3 --------------- */
.contIMGenTXT3		{ display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 12.5rem; height: auto; padding: 0.625rem; margin: 10px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; }
.contTITEL3			{ width:  12.5rem; height: max-content; text-align: center; font-style: italic; font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; color: #999;  padding: 0 0 5px 0 ; }
.contONDERtitel3	{ width:  12.5rem; height: 3.125rem; font-size: 1rem; line-height: 1rem; font-weight: normal; text-align: left; color: #000; overflow: hidden;  padding: 5px 0 0 0 ; }
.contIMG3			{ width:  12.5rem; height:  12.5rem; border-radius: 5px; text-align: center; padding: 0.625rem 0 0 0 ; margin: auto; }
.contTXT3			{ width: 9.375rem; height: 11.25rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; overflow: hidden;  padding: 5px; }
.contIMGfit3		{ object-fit: contain; max-width: 12.5rem; height: 12.5rem; border-radius: 5px; margin: auto; }

/* ------  I I I I I I I I ------------IMAGE EN TEKST 4 KUNSTPAGINA  --------------- */
@media screen and (max-width: 481px) {
.contIMGenTXT4		{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 95%; height: max-content; padding: 0.625rem; margin: 5px;  background-color: #fff9e6; border-radius: 10px; box-shadow: 5px 5px 5px #ededed; }
.contTITEL4			{ width: 100%; height: auto; text-align: center; font-style: normal; font-size: 1.5rem; line-height: 1.7rem; font-weight: normal; color: #999;  margin: auto; padding: 0.625rem 0 0 0; }
.contTITEL4WIT		{ width: 12.5rem; height: 3.125rem; text-align: center; font-style: normal; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; color: #FFFFFF;  margin: auto; padding: 0.625rem 0 0 0; background-color: #333;}
.contIMG4			{ width: 90%; height: max-content; border-radius: 5px; text-align: center; }
.contTXT4			{ width: 100%; height: auto; font-size: 1.2rem; line-height: 1.4rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; }
.contIMGfit4		{ object-fit: contain;  width: 95%; height: auto; margin: auto; } }

/* pixelaanwijzer is lightBlue */
@media screen and (min-width: 482px) and (max-width: 550px) {
.contIMGenTXT4		{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; height: max-content; padding: 0.625rem; margin: 5px; background-color: #fff9e6; border-radius: 10px; box-shadow: 5px 5px 5px #ededed; }
.contTITEL4			{ width: 90%; height: auto; text-align: center; font-style: normal; font-size: 1rem; line-height: 1.2rem; font-weight: normal; color: #969;  margin: auto; padding: 0.625rem; }
.contTITEL4WIT		{ width: 12.5rem; height: 3.125rem; text-align: center; font-style: normal; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; color: #FFFFFF;  margin: auto; padding: 0.625rem 0 0 0; background-color: #333;}
.contIMG4			{ width: 90%; height: max-content; border-radius: 5px; text-align: center; }
.contTXT4			{ width: 90%; height: auto; font-size: 1rem; line-height: 1.2rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; }
.contIMGfit4		{ object-fit: contain; width: 95%; height: auto; margin: auto; } }

/* pixelaanwijzer is yellow */
@media screen and (min-width: 551px) and (max-width: 768px) {
.contIMGenTXT4		{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 17rem; height: max-content; padding: 0.625rem; margin: auto; background-color: #fff9e6; border-radius: 10px; box-shadow: 5px 5px 5px #ededed; }
.contTITEL4			{ width: auto; height: auto; text-align: center; font-style: normal; font-size: 1.2rem; line-height: 1.2rem; font-weight: normal; color: #969;  margin: auto; padding: 0.625rem; }
.contTITEL4WIT		{ width: 12.5rem; height: 3.125rem; text-align: center; font-style: normal; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; color: #FFFFFF;  margin: auto; padding: 0.625rem 0 0 0; background-color: #333;}
.contIMG4			{ width: 90%; height: max-content; border-radius: 5px; text-align: center; }
.contTXT4			{ width: 90%; height: auto; font-size: 1rem; line-height: 1.2rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; }
.contIMGfit4		{ object-fit: contain; width: 95%; height: auto; margin: auto; } }

@media screen and (min-width: 769px) {
.contIMGenTXT4		{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 17rem; height: max-content; padding: 0.625rem; margin: auto; background-color: #fff9e6; border-radius: 10px; box-shadow: 5px 5px 5px #ededed; }
.contTITEL4			{ width: auto; height: auto; text-align: center; font-style: normal; font-size: 1.2rem; line-height: 1.4rem; font-weight: normal; color: #969;  margin: auto; padding: 0.625rem; }
.contTITEL4WIT		{ width: 12.5rem; height: 3.125rem; text-align: center; font-style: normal; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; color: #FFFFFF;  margin: auto; padding: 0.625rem 0 0 0; background-color: #333; }
.contIMG4			{ width: 90%; height: max-content; border-radius: 5px; text-align: center; }
.contTXT4			{ width: 90%; height: auto; font-size: 1rem; line-height: 1.2rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; }
.contIMGfit4		{ object-fit: contain; width: 99%; height: auto; margin: auto; } }

.TITenIMGenTXT		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: center; width: 11.25rem; height: 43.125rem; padding: 5px;  flex-wrap: wrap; }
.TIT				{ width: 11.25rem; height: 6.25rem; font-size: 0.75rem; line-height: 0.875rem; color:#000; padding: 5px; text-align: left; }	
.IMG2				{ width: 11.25rem; height: 12.5rem; margin: auto; }
.TXT2				{ width: 11.25rem; height: 9.375rem; font-size: 0.75rem; line-height: 0.875rem; color:#000; padding: 5px; text-align: left; overflow: hidden; }		
.imgFIT				{ object-fit: contain; width: 11.25rem; height: 12.5rem; margin: auto; }

/* ------- NO WAPPING BETWEEN IMAGE AND CAPTION -------- */

.nowrapDIV			{ width: max-content; height: auto; flex-wrap: nowrap; }
.nowrapIMGenTXT 	{ display: flex; flex-direction: column; width: 15rem; height: max-content; margin: auto; flex-wrap: nowrap; }
.nowrapIMG			{ width: 15rem; height: 15.625rem; margin: auto; flex-wrap: nowrap; }
.nowrapTXT			{ width: 14rem; height: 1.25rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; flex-wrap: nowrap; }
.nowrapIMGfit		{ object-fit: contain; width: 12.5rem; height: auto; margin: auto; flex-wrap: nowrap; }

/* K K K K K K K ----------------  KAARTEN BESTELLEN  ----------------- */
@media screen and (max-width: 700px) {
.KAARTEN				{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 80%; height: max-content; margin: auto; background-color: #FFFDF6; z-index: 0 ; flex-wrap: wrap; } /* pagina container  */
.kaartTXTenIMG		{ display: flex; flex-direction: row; justify-content: center; width: 380px; height: auto; flex-wrap: wrap; border-radius: 5px; border-radius: 10px; margin: 10px; background-color: #efefef; } /* kaart container  */
.kaartIMG			{ display: flex; justify-content: center; width: 100%; height: max-content; margin: auto; }
.kaartTXT1			{ text-align: center; width: 95%; height: max-content; font-size: 1.4rem; line-height: 1.7rem; color: #000; padding: 1rem; }			
.kaartTXT2			{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; }			
.kaartTXT3			{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 100%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem;  }			
.kaartAANTAL		{ display: flex; width: 50%; height: 50px; font-size: 1.2rem; line-height: 1.4rem; color:#000; margin: 10px; }	
.kaartIMGfit-LIG	{ object-fit: contain; width: 99%; height: auto;  margin: auto; padding: 10px; }
.kaartIMGfit-ST	{ object-fit: contain; width: auto; height: 380px;  margin: auto; }
.kaartADRES			{ width: 100%; height: max-content; background-color: #567; } 
.itemKaartAdres	{ width: 100%; height: auto; padding: 5px; border-radius: 5px; margin: auto; }  }

/* K K K K K K K ----------------  KAARTEN BESTELLEN  ----------------- */
@media screen and (min-width: 701px) {
.KAARTEN				{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 80%; max-width: 1200px; height: max-content; margin: auto; background-color: #FFFDF6; z-index: 0 ; flex-wrap: wrap; } /* pagina container  */
.kaartTXTenIMG		{ display: flex; flex-direction: row; justify-content: center; width: 380px; height: auto; flex-wrap: wrap; border-radius: 5px; border-radius: 10px; margin: 10px; background-color: #efefef; } /* kaart container  */
.kaartIMG			{ display: flex; justify-content: center; width: 100%; height: max-content; margin: auto; text-align: right; }
.kaartTXT1			{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 95%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; }
.kaartTXT2			{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 95%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; }	
.kaartTXT3			{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 40%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; }			
.kaartAANTAL		{ display: flex; width: 50%; height: 50px; font-size: 1.2rem; line-height: 1.5rem; color:#000; margin: 10px; }	
.kaartIMGfit-LIG	{ object-fit: contain; width: 95%; height: auto;  margin: auto; }
.kaartIMGfit-ST	{ object-fit: contain; width: auto; height: 340px;  margin: auto; }

.kaartADRES			{ display: flex; flex-direction: column; justify-content: center; width: 90%; height: max-content; margin: auto; background-color: #567; padding: 10px; border-radius: 10px; margin: auto; } 
.itemKaartAdres	{ width: 100%; height: auto; padding: 5px; border-radius: 5px; margin: auto; } }

/* K K K K K K K  --------------------- KOLOMMEN INSTELLINGEN - - - - - - - - -------- */
@media screen only (max-width: 870px){
.KOLOMMEN2		{ display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 100%; height: max-content; margin: auto; }
.kolomLINKS		{ display: flex; flex-direction: column; width: 100%; height: max-content; align-content: center; padding: 10px; border: 2px dotted red; }
.kolomRECHTS	{ display: flex; flex-direction: column; width: 100%; height: max-content; align-content: center; padding: 10px; border: 2px dotted red; } }

.KOLOMMEN2		{ display: flex; flex-direction: row; justify-content: flex-start; align-content: center; width: 100%; height: max-content; margin: auto; }
.kolomLINKS		{ display: flex; flex-direction: column; width: 100%; height: max-content; padding: 10px; }
.kolomRECHTS	{ display: flex; flex-direction: column; width: 100%; height: max-content; padding: 10px; }

/* K K K K K K K  --------------------- ALLERLEI KOP INSTELLINGEN - - - - - - - - -------- */

.KOProw			{ position: sticky; top: 0px; display: flex; flex-direction: row; justify-content: space-evenly; width: 100%; height: auto; background-color: #bae2fc; z-index: 6; align-items: center; margin: auto; } /* hier staat het MENUlinks in */
/* Dit is het hok waar de menu icons in staan  en bepaald ook de hoogte van het hok En bepaald ook de plaats*/
.KOPitemICONS	{ display: flex; flex-direction: column; justify-content: center; width: auto; height: auto; background-color: #bae2fc; z-index: 5; }

.KOPtitel  		{ position: sticky; top: 0px; display: flex; flex-direction: row; justify-content: center; text-align: center; width: 99%; height: auto; background-color: #bae2fc; padding: 20px; font-size: 1.5rem; color: #999; }

/* Hier staat de KOP in  NIET MEER de kop liep uit de site? Dit kan weg */
.KOPcolumn		{ position: fixed; top: 0rem; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 80%; height: auto; flex-wrap: wrap;  margin: auto; background-color: #bae2fc; border: 7px solid #d3ecfc; z-index: 4; }
.itemKOPcolumn { width: 100%; height: max-content; font-size: 2rem; line-height: 2.5rem; color: #666; text-align: center; background-color: #bae2fc; flex-wrap: wrap; background-color: #bae2fc; padding: 0.4rem; border-top: 1px solid #9ed7fb; border-left: 0.063rem solid #9ed7fb; border: 0.063rem solid #93d3fc; } /* Stichting vrienden van de schilder Martin Monnickendam */

/*  -------------------- GRIJZE ACHTERGRONDEN IN DE KOP VOOR DE DETAILS PAGINAS --------- */

/* de oude achtergrondkleur was #bae2fc   */
.KOPregel1		{ display: flex; width: 100%;  height: max-content; font-size: 1.25rem; font-weight: normal; line-height: 1.25rem; color: #666; justify-content: center; text-align: center; flex-wrap: wrap; background-color:#FFF; padding: 5px 0px 5px 0px;  }
.itemKOPregel1 { display: flex; flex:  1; justify-content: center; align-items: center;  height: max-content; flex-wrap: wrap; padding: 5px 0px 5px 1.25rem; background-color: #bae2fc; } /* regel voor het hamburgermenu */

.KOPregel2		{ display: flex; justify-content: center; align-items: center; text-align: center; width: 100%;  height: max-content; font-size: 1.125rem; font-weight: normal; line-height: 1.25rem; color: #999; flex-wrap: wrap; background-color: #FFFDF6; padding: 5px 0px 5px 0px; }
.itemKOPregel2ORG { position: sticky; top: 0rem; display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; height: max-content; font-size: 1.5rem; font-weight: normal; color: #FFF; line-height: 32px; flex-wrap: wrap; background-color: #bae2fc; padding: 1.25rem 0px 1.25rem 0px; border: 7px solid #d3ecfc; }/* Stichting vrienden van de schilder Martin Monnickendam (1874-1943) */

.KOPregel3		{ display: flex; flex-direction: row; justify-content: center; text-align: center; width: 100%; height: max-content; font-size: 1.5rem; line-height: 1.8rem; font-weight: normal; color: #000;  flex-wrap: wrap; border-radius: 5px; background-color: #FFFDF6; padding: 10px 0px 10px 0px; margin: auto; }  
.item1KOPregel3 { display: flex; flex-direction: row; justify-content: center; width: auto; height: max-content; flex-wrap: wrap; font-size: 1.125rem; line-height: 1.75rem; font-weight: normal; color: #666; text-align: center; padding: 1.25rem; margin: auto; background-color: #FFFDF6; z-index: 3; }
.item2KOPregel3 { display: flex; flex-direction: row; justify-content: center; width: 100%; height: max-content; flex-wrap: wrap; font-size: 1rem; line-height: 1.2rem; font-weight: normal; color: #666; text-align: center;  margin: auto; background-color: #FFFDF6; z-index: 3; padding: 5px;}
.item3KOPregel3 { display: flex; flex-direction: row; justify-content: center; width: 90%; height: max-content; flex-wrap: wrap; font-size: 1.125rem; line-height: 1.2rem; font-weight: normal; color: #666; text-align: center;  margin: auto; background-color: #FFFDF6; z-index: 3; padding: 5px; margin: 10px; }

.KOPregel4		{ display: flex; width: 99%; height: max-content; font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; color: #333; justify-content: center; text-align: center; flex-wrap: wrap; margin: auto; padding: 5px 5px 20px 5px; background-color: #FFFDF6; }
.KOPregel5		{ position: sticky; top: 90px; display: flex; width: 80%; height: 40px; font-size: 1.75rem; font-weight: normal; line-height: 32px; color: #66C; justify-content: center; text-align: center; flex-wrap: wrap; background-color: #FFF; margin: auto; padding: 5px 0px 5px 0px; }
.KOPregel6		{ position: sticky; top: 9.375rem; display: flex;  width: 80%; height: max-content; font-size: 0.875rem; font-weight: normal; line-height: 1.5rem; color: #333; justify-content: flex-start; text-align: center; flex-wrap: wrap; background-color: #FFF; margin: auto; }

.KOPfoto	{ display: flex; flex-direction: row; justify-content: space-evenly; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6;  }
.itemKOPfoto{ display: flex; width: 400px; height: auto; margin: 5px; }
.KOPfotoFIT	{ object-fit: contain; width: 100%; flex: 1; }
.KOPfotoCAP	{ display: flex; width: auto; height: max-content; flex-wrap: wrap; text-align: left;  font-size: 0.75rem; font-style: italic; color: #000; margin: auto;  padding: 5px 0 0 0 ; background-color: #999; padding: 0.625rem; }

/* FOTO KOP MET DRIE PLAATJES OP EEN RIJ BIJ PAGINA NIEUWSBRIEVEN*/

@media screen and (min-width:300px) and (max-width:550px) {
.KOP3nieuwsbrieven	{ display: flex; flex-direction: column; justify-content: flex-start;  align-items: center; width: auto; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; margin: auto; }
.KOP3plaatjes		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 70%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; }
.KOP3plaatjesIMG	{ width: 100%; margin: auto;  }
.KOP3plaatjesFIT	{ object-fit: contain; width: 100%; height: auto; }
.KOP3plaatjesCAP	{ display: flex; width: 100%; height: auto; flex-wrap: wrap; font-size: 14px; font-style: italic; line-height: 1.2 rem; color: #000; background-color: #FFFDF6; } }

@media screen and (min-width:550px) {
.KOP3nieuwsbrieven	{ display: flex; flex-direction: row; justify-content: space-between;  width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; margin: auto; }
.KOP3plaatjes		{ display: flex; flex-direction: row; justify-content: center;  width: 30%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; padding: 5px; }
.KOP3plaatjesIMG	{  width: 100%; margin: auto;  }
.KOP3plaatjesFIT	{ object-fit: contain; width: 100%; height: auto; }
.KOP3plaatjesCAP	{ display: flex; width: 100%; height: auto; flex-wrap: wrap; font-size: 14px; font-style: italic; line-height: 1.2 rem; color: #000; background-color: #FFFDF6; } }

.KOPfotoART		{ display: flex; flex-direction: row; width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; z-index: 0; }
.KOPfotoFitART	{ object-fit: contain; width: 100%; height: auto; margin: auto; align-content: center; }
.KOPfotoCapART	{ display: flex; width: 99%; height: max-content; flex-wrap: wrap; font-size: 0.8rem; font-style: italic; color: #000; line-height: 1.2 rem; margin: auto;  padding: 5px; background-color: #FFFDF6; z-index: 0; }

.KOPartikelHommage	{ column-count: 2; column-width: 45%; column-gap: 15px; display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: auto; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 0; }
.KOPartikelIMGhommage{ display: flex; width: 90%; height: auto; flex-wrap: wrap; }
.KOPartikelTXThommage{ display: flex; width: 100%; height: auto; font-size: 22px; line-height: 26px; color: #999; padding: 15px 0px 15px 0px; flex-wrap: wrap; }
.KOPartikelFIThommage{ object-fit: contain; width: 100%; height: auto; margin: auto; align-content: center;  flex-wrap: wrap; }

/* KOP MET TWEE PLAATJES OP EEN RIJ */
.KOPfoto2Platen		{ display: flex; flex-direction: row; justify-content: center; width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; }
.KOPfoto2PlatenIMG	{ flex: 1; margin: auto; padding: 0.625rem; }
.KOPfoto2PlatenFIT	{ object-fit: contain; width: 90%; height: auto; }

.KOPfoto2PlatenCAP	{ display: flex; width: auto; height: max-content; flex-wrap: wrap; text-align: center;  font-size: 0.8rem; font-style: italic; line-height: 1.2rem; color: #000; margin: auto;  padding: 10px; background-color: #FFFDF6; }

/* KOP MET DRIE PLAATJES OP EEN RIJ */
.KOPfoto3Platen		{ display: flex; flex-direction: row; justify-content: center;  width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; margin: auto; }
.KOPfoto3PlatenIMG	{ flex: 1; margin: auto; padding: 0.625rem; }
.KOPfoto3PlatenFIT	{ object-fit: contain; width: 100%; height: auto; }
.KOPfoto3PlatenCAP	{ display: flex; width: 100%; height: auto; flex-wrap: wrap; text-align: left; font-size: 0.8rem; font-style: italic; line-height: 1.2 rem; color: #000; margin: auto;  padding: 10px; background-color: #FFFDF6; }

/* KOP MET VIER PLAATJES OP EEN RIJ */
.KOPfoto4Platen		{ column-count: 4; column-width: 90%; column-gap: 0.625rem; width: 100%; height: auto; flex-wrap: wrap; background-color: #FFFDF6; justify-content: space-between; padding: 0.625rem 0 0 0 ; }
.KOPfoto4PlatenIMG	{ width: 80%; min-width: 6.25rem; height: auto; flex: 1; margin: auto; }
.KOPfoto4PlatenFIT	{ object-fit: contain; width: 100%; height: auto; }
.KOPfoto4PlatenCAP	{ display: flex; justify-content: flex-start; align-content: flex-start; width: 100%; height: max-content; flex-wrap: wrap; font-size: 0.75rem; font-style: italic; margin: auto;  padding: 5px ; background-color: #FFFDF6; }
 
/* Dit is om 'losse' koppen te centreren */
.KOPcenter 		    { width: 100%; height: max-content; font-size: 1.5rem; line-height: 1.5rem; text-align: center; margin: auto; background-color: #FFF; }

.KOPkunstArchief	{ display: flex; flex-direction: row; width: 80%; height: max-content; flex-wrap: wrap; margin: auto;  }
.IMGkunstFitArchief { object-fit: contain; width: 77px; height: auto; }
.IMGfotoFitArchief 	{ object-fit: contain; width: 77px; height: auto; }

.KUNSTselectie      { display: flex; flex-direction: column; justify-content: flex-start; height: auto; flex-wrap: wrap;  }
.itemKUNSTselectie  { display: flex; width: 100%; height: auto; flex-wrap: wrap; }
.KUNSTcaption       { display: flex; width: 100%; height: max-content; padding: 5px; font-size: 12px; font-style: italic; color: #000; }
.KUNSTimgFIT        { object-fit: contain; width: 100%; height: auto; flex-wrap: wrap; }

/* MENU archief - keuze kunst foto en docs Aparte instellingen ivm de hoogte */
.menuARTIKELEN		{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: max-content; z-index: 4; flex-wrap: wrap; margin: auto; }
.itemMENUartikelen1	{ display: flex; width: 98%; font-size: 20px; line-height: 22px; padding: 10px; background-color: #FFFDF6; }
.itemMENUartikelen2	{ display: flex; width: 98%; font-size: 20px; line-height: 22px; padding: 10px; background-color: #FFFDF6; }

.menuARTIKELENknop	{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 100%; height: max-content; font-size: 12px; line-height: 18px; flex-wrap: wrap; margin: auto; margin: 15px; }
.itemMENUartikelKNOP{ display: flex; width: 170px; height: 80px; font-size: 12px; line-height: 18px; padding: 10px; background-color: #FFFDF6; margin: 5px; }

.menuNIEUWSBRIEFknop{ display: flex; flex-direction: row; justify-content: space-evenly; align-content: center; width: 100%; height: max-content; font-size: 0.875rem; line-height: 18px; z-index: 4; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; border-radius: 5px; }
.itemMENUnieuwsbriefKNOP{ display: flex; text-align: center; width: 50px; height: 20px; font-size: 0.875rem; line-height: 18px; padding: 5px; background-color: #FFFDF6; border-radius: 5px; margin: 5px; flex-wrap: wrap; }

.menuARCHIEF		{ position: sticky; top: 65px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;  width: 100%; height: max-content; flex-wrap: wrap; z-index: 8; }
.itemMENUarchief	{ display: flex; flex: 1; justify-content: center; height: max-content; color: #FFF; padding: 0.625rem; background-color: #bae2fc;  z-index: 8; margin: 5px;  border-radius: 5px; }

/* M M M M M M ---------- MENU EN BLOKJES VOOR MENU Kunst-ARCHIEF ----------------- */
/* include in: MENUKNOPselPASTELS  = */
.MENUKNOPPENselKUNST			{ display: flex; flex-direction: row; justify-content: space-between;  align-items: center; align-content: center; width: 100%; height: max-content; padding: 5px 0 0 0 ; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 4; }
.itemMENUKNOPPENselKUNST   { width: 5rem; height: 5rem; }
.itemMENUKNOPPENselKUNSTfit{ object-fit: cover; width: 5rem; height: 5rem; }

/* HET NIEUWE MENU - */
/* Dit geeft een zwarte streep boven aan de site */
.MENUlinkerKant		{ position: sticky; display: flex; flex-direction: column; justify-content: flex-start;  align-items: flex-start; width: 50%; height: max-content; background-color: #bae2fc; padding: 0rem 0rem 0rem 2rem; z-index: 10; margin-left: 0.625; background-color: #ededed; opacity: 0.8; }
/* Dit zijn de hokjes van het menu utgevouwen */
.MENUitem		{ display: flex; justify-content: center;  margin: 6px; font-size: 2,5em; width: 96%; height: 40px; display: flex; background-color: #FFFDF6; }

/* ---------- Kok voor de onderstaande pijlen in de KOP -----*/
.PAGpijlen  	{ display: flex; flex-direction: row; justify-content: space-evenly; width: 120px; height: 50px; }
/* Dit is voor het KOPmenu voor de pijl voor de VOLGENDE PAGINA in de KOP  */
.PIJLvolgendePAG{ width: 50px; height: 50px;  margin-right: 5px; border-radius: 50px; }
.PIJLvorigePAG 	{ width: 50px; height: 50px; border-radius: 50px; }

/* --------- NIEUWSBRIEVEN -------*/
.nieuwsbrieven a:hover { font-size: 1.5rem; line-height: 2rem; color: #03F; }

/* NIEUWE 1 LANGE SMALLE PAGINA 
.PAGINAnieuw { background-color: #683; margin: 5px; } */

.paginaINTRO	{ column-count: 2; column-width: 95%; column-gap: 20px; width: 96%; height: max-content: font-size: 24px; line-height: 28px; color: #333; margin: auto; padding: 20px; background-color: #ededed; flex-wrap: wrap; border: 3px dotted green; }

/* P P P P P P P  -------------- ALLES VOOR DE DOCUMENTEN PAGINA  --  EN   ---   PAGINATION ------------------------- */

/* ---------- TABELLEN ---------------*/

table		{ width: 100%; }

tr			{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: left; }
tr.bio		{ width: 100%; height: max-content; text-align: left; font-size: 0.875rem; line-height: 1.125rem; color: #000; }
.center		{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: center; }
.top		{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem;  vertical-align: top; }

td			{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align:  left; }
td.right	{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: right; }
td.archief	{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align:    top; text-align:   left; padding: 2px; overflow: hidden; }
td.archief2	{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align: middle; text-align: center; padding: 2px; overflow: hidden; border: 2px dotted green; }
td.archief3	{ font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align: middle; text-align:  right; padding: 2px; overflow: hidden; }
td.breedte1	{ font-size: 0.875rem; font-weight: normal; line-height: 0.875rem; text-align: left; width:  5rem; min-height: 1.25rem; }
td.breedte2	{ font-size: 0.875rem; font-weight: normal; line-height: 0.875rem; text-align: left; width: 18.75rem; height: 1.25rem; flex-wrap: wrap; }

.pagination 	{ width:  100%; height: 540px;  background-color: #FFF; }
.paginationLinks{ display: flex; flex-wrap: wrap; width: 100%; height: max-content; padding: 0.625rem 0px 1.25rem 0px; margin: auto;  background-color: #FFFDF6; z-index: 3;  }
.numberofpages	{ position: absolute; left: 12.5rem; top:  1.25rem; width:  740px; height:  1.25rem; z-index: 1;  }

.contentPagination{ display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: max-content;  margin: auto; padding: 0.625rem; background-color: #FFFDF6; }

/* Dit zijn de instellingen voor de PAGINERING */

#nextPrevious	{ position: absolute; left: 20px; top: 10px; width: 150px; height: 30px; }
#previous		{ position: relative; left: 10px; top:  0px; width:  50px; height: 30px; }
#next			{ position: relative; left: 50px; top:  0px; width:  50px; height: 30px; }

#numberofpages	{ position: absolute; left: 200px; top:  20px; width:  740px; height:  20px; z-index: 1; }
#pagdisplayTop	{ position: absolute; left: 200px; top:  50px; width:  740px; height:  20px; border:#999 1px solid; padding: 5px 0px 0px 5px; }
#contentPagination	{ position: absolute; left: 5px; top:  70px; width:  865px; height: 560px; font-size: 12px; background: url("http://www.martinmonnickendam.nl/pix/paginakleur2.gif");  background: #ffffff ; }
#pagdisplayBottom{ position: absolute; left: 200px; top: 580px; width:  740px; height:  20px; border:#999 1px solid;  padding: 5px 0px 0px 5px; }

.pnum 			{ padding-left: 5px; padding-right: 5px; background-color: #FFF; border: 1px solid gray; }
.pnum a			{ text-decoration: none; font-family: Arial, 'Times new Roman', sans-serif; color: #000; }
/*current page link slightly larger and different color*/
.pnum_current	{ font-weight: bold; color: #F00; padding-left: 5px; padding-right: 5px; background-color: #FFF; border: 1px solid #CCC; }
.pLinks1		{ width: 900px; height: 1.25rem; padding: 2px 0px 1px 5px ; border: #999 1px solid; /*allow room for first and prev links*/ }
.pLinks2		{ width: 900px; height: 1.25rem; padding: 5px 0px 5px 5px ; border: #999 1px solid; /*tweak number till page links don't move*/ }
.resultaten		{ width: 25rem; height: 1.25rem; margin: auto; border: 2px dotted red; }

/* -----------------   EINDE PAGINATION ----------------- */

/* P P P P P P  ---------------PUBLICATIES ---------------*/
.RESULTpub		{ display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; width: 99%; height: max-content; font-size: 0.875rem; color: #000; flex-wrap: wrap; margin: auto; }
.contPUBresult	{ display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; width: 100%; height: auto; font-size: 0.875rem; color: #000; flex-wrap: wrap; margin: auto; margin: 5px 0px 5px 0px; background-color: #ccfbe1; border-radius: 5px; }
.PUBjaar			{ display: flex; height: auto; justify-content: flex-start; align-items: flex-start; font-size: 0.875rem; color: #000; flex-wrap: wrap; margin: auto; padding: 5px; border: 1px solid black; }
.PUBtxt			{ display: flex; width: 70%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; color: #000; margin: 5px; }
.PUBimg			{ display: flex; width: 200px; height: auto; flex-wrap: wrap; margin: auto; border-radius: 5px; }
.PUBimgFIT		{ object-fit: contain; width: 200px; max-width: 16rem; height: auto; padding: 5px; flex-wrap: wrap; border-radius: 5px; }
.PUBdetail		{ display: flex; width: 99%; height: auto; flex-wrap: wrap; }
.PUBdetailFIT	{ object-fit: contain; width: 99%; height: auto; padding: 5px; flex-wrap: wrap; }

/* R R R R R R  --------------RESULT ROW------------------ */

.RESULT		{ display: flex; flex-direction: row; justify-content: space-evenly; align-content: flex-start; width: 100%; height: max-content; flex-wrap: wrap; margin: auto;  padding: 0.625rem; background-color: #FFFDF6; }
.RESULTcolumn{ display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 100%; height: max-content; flex-wrap: wrap; margin: auto;  padding: 0.625rem; background-color: #FFFDF6; }

@media screen and (max-width: 481px) {
.RESULTrow	{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: auto; width: 95%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; z-index: 0; } }

@media screen and (min-width: 482px) and (max-width: 768px) {
.RESULTrow	{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: auto; width: 95%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; z-index: 0; } }

@media screen and (min-width: 769px) {
.RESULTrow	{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: auto; width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; z-index: 0; } }  

/* R R R R R R  --------------RESULT COLUMN------------------ */
.RESULTcolumnHALF{ display: flex; flex-direction: column; justify-content: space-evenly; align-content: flex-start;  font-size: 24px; font-weight: normal; line-height: 28px; width: 100%; height: auto; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; padding: 5px; border: 3px dotted red; }

@media screen and (max-width: 481px) {
.RESULTcolumn1	{ column-count: 1; column-width: 100%;  font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; padding: 5px; } }

.RESULTcolumn1DOCS	{ column-count: 1; column-width: 700px;  font-size: 0.875rem; font-weight: normal; line-height: 1.125rem; color: #333; width: 95%; height: max-content; flex-wrap: wrap; padding: 0.625rem; margin: auto; background-color: #FFFDF6; }

/* ---- DIT GAAT OVER RESULTcolumn2  ---- 
------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 401px) {
.RESULTcolumn2	{ column-count: 1; column-width: 70%; column-gap: 10px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 401px) and (max-width: 550px) {
.RESULTcolumn2	{ column-count: 1; column-width: 100%; column-gap: 20px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 551px) and (max-width: 768px) {
.RESULTcolumn2		{ column-count: 1; column-width: 100%; column-gap: 30px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 769px) and (max-width: 1024px) {
.RESULTcolumn2		{ column-count: 2; column-width: 100%; column-gap: 30px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 1025px) and (max-width: 1200px) {
.RESULTcolumn2		{ column-count: 2; column-width: 100%; column-gap: 30px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 1201px) and (max-width: 1400px) {
.RESULTcolumn2		{ column-count: 2; column-width: 100%; column-gap: 30px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 1401px) and (max-width: 1600px) {
.RESULTcolumn2		{ column-count: 3; column-width: 100%; column-gap: 30px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

@media screen and (min-width: 1601px) {
.RESULTcolumn2		{ column-count: 3; column-width: 100%; column-gap: 30px; column-rule: 2px solid #ccc; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } }

/* ------------------------------------------------------------------------------------------------------------- */

.RESULTcolumnBIO	{ column-count: 1; column-width: 18.75rem; column-gap: 1.3rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFaea; padding: 0.625rem; }

.RESULTcolumn3		{ column-count: 3; column-width: 18.75rem; column-gap: 1.875rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; color: #333; width: 95%; height: max-content; flex-wrap: wrap; margin: auto; text-align: center; background-color: #FFFDF6; z-index: 0; padding: 10px;  }

.RESULTcolumn3DON	{ column-count: 3; column-width: 18.75rem; column-gap: 15px; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 1.25rem 0px 1.25rem 0; background-color: #FFFDF6; z-index: 0; }
.RESULTcolumn3AP	{ column-count: 3; column-width: 18.75rem; column-gap: 1.875rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 1.25rem; z-index: 0; }
.RESULTcolumn80pro{ column-count: 3; column-width: 18.75rem; column-gap: 1.875rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 1.25rem; background-color: #FFF; z-index: 0; }
.RESULTcolumn250	{ column-count: 20; column-width: 77px; column-gap: 0.625rem; margin: auto; width: 100%; height: 5rem; overflow: hidden; margin: 0.625rem; } /* voor de kop van de archiefpaginaas kleine plaatjes */
.RESULTcolumn4		{ column-count: 4; column-width: 12.5rem; column-gap: 15px; display: flex; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1000px; height: auto; margin: 0.625rem;  flex-wrap: wrap; background-color: #FFFDF6; }
.RESULTcolumn5		{ column-count:  5; column-width: 9.375rem; column-gap: 15px; font-size: 0.875rem; font-weight: normal; line-height: normal; width: 80%; height: auto; margin: auto; padding: 0.625rem; }
.RESULTcolumn6		{ column-count:  6; column-width: 800px; column-gap: 15px; font-size: 0.875rem; font-weight: normal; line-height: normal; width: 80%; height: auto; margin: auto; padding: 0.625rem; }
.RESULTcolumn20	{ column-count: 20; column-width: 15rem; column-gap: 20px; font-size: 1rem; font-weight: normal; line-height: normal; color: #FFF; width: 80%; height: auto; margin: auto; padding: 1rem; }

.RESULTfotoTXT { width: 60%; height: max-content; border: 1px solid black; }
.RESULTindex	{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; align-content: flex-start; width: 100%; height: max-content; flex-wrap: wrap; gap: 0.625rem; margin: auto; padding: 0.625rem; background-color: #FFF; }
.RESULTkunstTXT{ width: 100%; min-width: 33.125rem; height: max-content; margin: auto; }
.RESULTmenuBalk{ display: flex; flex-direction: column; justify-content: flex-start; width: 80%; height: max-content; }
.RESULTtxt		{ text-align: justify; max-width: 100%; height: max-content; flex-wrap: wrap; margin: auto; border: 1px solid #666; padding: 0.625rem; background-color: #FFF; }

/*  S S S S S S -----------SHADOW  ------   box-shadow: 0.625rem 5px 5px red;   */

/* T T T T T T  ------------- TEKST CONTAINERS ---------  */
.TEKST			{ width:  80%; height: auto; background-color: #FFF; }
.TEKSTjustify	{ width: 100%; height: auto; background-color: #FFF; text-align: justify; }
.TEKSTbgkleur	{ width:  80%; height: auto; background-color: #FFFDF6; }
.TEKSTbio		{ width: 100%; height: auto; background-color: #FFFDF6; padding: 5px; }
.TEKSTart		{ width:  80%; height: max-content; background-color: #FFFDF6; padding: 0.625rem; overflow: hidden; }

.ARTIKELtxt		{ display: flex; font-size: 0.875rem; font-weight: normal; font-family: "optima"; line-height: 1rem; text-align: justify; width: 100%; height: max-content; flex-wrap: wrap; padding: 1.25rem; }
.txtARTIKEL		{ display: flex; font-size: 0.875rem; font-weight: normal; font-family: "optima"; line-height: 1rem; text-align: justify; width: 100%; height: max-content; flex-wrap: wrap; padding: 1.25rem; }

/* ------------- Z Z Z Z Z Z Z Z Z ----------ZOEKVENSTER ---------------*/

/* .zoekVensterTXT{ position: sticky; top: 60px; display: flex; flex-direction: row; justify-content: center; align-content: center; width: 100%; height: 50px; background-color:#456 ;margin: auto; border: 1px solid black; text-align:center; } */
.zoekVenster 	{ position: sticky; top: 100px; display: flex; flex: 1; flex-direction: row; justify-content: center; align-content: center; width: 100%; height: auto; background-color:#FFFDF6 ; margin: auto; padding: 5px 0 10px 0; z-index: 7; }
.aantalRows		{ display: flex; width: 100%; height: max-content; font-size: 0.875rem; font-weight: normal; line-height: 1.125rem; color: #000; justify-content: center; align-content: center; flex-wrap: wrap;  background-color:#FFFDF6; padding: 15px 0px 15px 0px;  z-index: 1; }
/*.count			{ display: flex; width: 100%; height: max-content; font-size: 0.875rem; font-weight: normal; line-height: 1.125rem; color: #000; justify-content: center; align-content: center; flex-wrap: wrap;  background-color:#FFFDF6; padding: 15px 0px 15px 0px;  z-index: 1; } /* waarvoor is dit? */

.zoekVENSTERselecties{ display: flex; width: 100%; height: max-content; background-color:#FFFDF6 ; margin: auto; text-align: center; padding: 15px 0 15px 0; z-index: 2; border: 1px solid black; }

/* DIT IS HET NIEUWE HOK VOOR DE ZOEK VOORSTELLEN OP DE ARCHIEF PAGINA (S)  (20250606) */
.zoekVoorstel	{ display: flex; flex-direction: column; width: 12.5rem; height: max-content; border: 1px solid black; }
.zoekItems		{ margin-left: 15px; width: max-content; height: max-content; display: flex; padding: 0px 5px 5px 0px; }

/* --------   UITSCHUIF MENUlinkerKant  --------- */

/* Dit komt uit: https://www.w3schools.com/howto/howto_js_sidenav.asp  Slide Overlay (de eerste optie) */
/* The side navigation menu */
.sidenav {
height: max-content; /* 100% Full-height - 25rem dan kan die scrollen*/  /* 20250521 - Dit heb ik veranderd Was 100% Dit verander wel. */
width: 0; /* 0 width - change this with JavaScript */  /* 20250521 - Dit heb ik veranderd. Was 0  en nu veranderd er was wanneer je dit uitzet */
position: fixed; /* Stay in place */
top:  0px; /* Stay at the top */
left: 0px;
background-color: #FFFDF6;
border-radius: 5px; 
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 25px; 
/* padding: 0px 0px 0px 0.625rem; /* Place content 3.75rem from the top DIT IS DE LINKER MARG EMAAR DAN ZIEN WE EEN BLAUWE STREEP ? */
transition: 0.7s; /* 0.5 second transition effect to slide in the sidenav */
z-index: 10; /* Stay on top */
opa==city: 0.8; 
/* overflow-y: scroll; /* 20250521 - Dit heb ik veranderd. Stond uit. Voegt vertical scrollbar toe. */
}

/* The navigation menu links  / DE TEKST DUS*/
.sidenav a {
padding: 20px;
font-size: 24px;
text-decoration: none;
color: #666;  /* 20250521 - Dit heb ik veranderd. Was #000 zwart veranderd naar grijs*/
display: block;
transition: 0.5s;
z-index: 10; /* Stay on top */
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
line-height: 1.5rem;
color: #FC0;  /* 20250521 - Dit heb ik veranderd Was #999 Veranderd naar zwart */
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 20px;
right: 45px;
margin-left: 35px;
z-index: 8;
}