:root {
    --main-bg-color: #f5f5f5; /* smoke */
    --body-bg-color: #f5f5f5; /* smoke */
    --main-color: #8b0000; /* darkred */
    --article-bg-color: #ffffff; /* white */
    --reverse-text-bg-color: #696969; /* dimgray */
    --footer-color:#282828;
    --plaatjes-bg-color: #bfc9ca;
    --nvmg-rood: #c12b2b;
}

/* roboto-regular - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('../fonts/roboto-v30-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/* media
mobile first: iphone 5 portrait is 320*568
375 pixel 2 portrait
568 iphone 5 landscape
800
1024



*/
html {
    overflow-y: scroll;
}

/*
h2, h3, h4, h5, h6 {
    margin:1ex 0 0.5ex 0;
}
p {
    margin:0.5ex 0;
}
*/
figcaption {
    font-size: 0.8em;
}

audio {
    max-width:240px;
}
#partners {
    color:var(--reverse-text-bg-color);
}
#partners a {
    color:var(--reverse-text-bg-color);
}

ul.rij li,ul.rij_video li {
    position: relative;
}

article .youtube {
    width:288px ; /*320*/
    height:162px ; /*180*/
    filter: brightness(70%);
}
.rij span.fa-video, .rij span.fa-youtube, .rij_video span.fa-video, .rij_video span.fa-youtube {
    display:block;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    opacity:1.0;
    color:white;
    font-size:40px;

}


.hide {
    display: none;
}

.wrapper {
    max-width: 1920px;
    margin: auto;
}

.attentie_test_mode {
    display: flex;
    justify-content: flex-end;

}
.attentie {
    color: white;
    background-color: red;
}


article img {
    max-width: 100%;
    height:auto;
}

details > * {
    font-size:1em !important;
    margin-bottom:10px;
}
details span {
    font-size:1em !important;
}

p.compact {
    font-style: normal;
    font-weight: 400;
    font-size:0.85em;
    margin-left:10px;
}

img.plaatje_boven_artikel {
    max-height: 320px;
    max-width: 320px;
    margin-bottom: 20px;
}
/*
@media (min-width: 375px) {
    article img { 
        max-width: 355px ;
    }
}
@media  (min-width: 568px) {
    article img { 
        max-width: 540px ;
    }
}
@media  (min-width: 680px) {
    article img { 
        max-width: 640px ;
    }
}
*/
ul.rij, ul.rij_video {
    display: flex; /* inline-flex */
    flex-direction: row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap: wrap;
    align-content: space-between;
    margin:0;
    padding:0;

}
ul.rij li, ul.rij_video li {
    list-style: none;
    margin:0 10px 5px 0;
    padding:0;

}
ul.rij img, ul.rij_video img {
    height:180px ; /* mobieltje 320 width, plaatje max 640 width en 360 height, dan helft 360 = 180*/
    width:auto;

}

ul.rij_klein_max_NIETMEER {
    display: flex; /* inline-flex */
    flex-direction: row;
    align-items:baseline;
    justify-content:flex-start;
    flex-wrap: wrap;
    align-content: space-between;
    margin:0;
    padding:0;

}
ul.rij_klein_max_NIETMEER li {
    list-style: none;
    margin:0 10px 5px 0;
    padding:0;

}
ul.rij_klein_max_NIETMEER img {
    max-height:150px;
    width: auto;
}

/* collectie */

#zoekform {

    /*color: var(--reverse-text-bg-color);  */
}


form div {
    margin: 5px 0 10px 0;
}

ul#collectie-categorie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-decoration: none;
    list-style:none;
    padding: 10px;
    margin:0 20px;
    gap: 10px;
    background-color: white;
    font-style: normal;
    /*font-size:1.1rem;*/
}

ul.rij2_middel_max, ul.rij2_groot_max {
    display: flex; /* inline-flex */
    flex-direction: row;
    align-items:baseline;
    justify-content:flex-start;
    flex-wrap: wrap;
    align-content: space-around;
    gap: 10px;
    margin:0;
    padding:0;

}
ul.rij2_middel_max li , ul.rij2_groot_max li {
    list-style: none;
    margin:0;
    padding:0;

}



ul.rij2_middel_max figure , ul.rij2_groot_max figure {
    margin:0;
    padding:0;
}
ul.rij2_middel_max img, ul.rij2_groot_max img {

    height:auto;
    width: auto;
}

ul.rij2_middel_max figcaption, ul.rij2_groot_max figcaption {
    font-size: 1em;
}

span.collectie-naam {
    font-weight:bold;
}

/* ------------------- */

ul.rij_klein, ul.rij_middel, ul.rij_groot, ul.rij_portret  {
    display: flex; /* inline-flex */
    flex-direction: row;
    align-items: baseline;
    justify-content:flex-start;
    flex-wrap: wrap;
    align-content: center;
    margin:0;
    padding:10px 10px 10px 0;
    gap:10px;


}
ul.rij_klein li, ul.rij_middel li, ul.rij_groot li, ul.rij_portret li {
    list-style: none;
    margin:0 10px 0 0;
    padding:0;
}
ul.rij_klein img, ul.rij_middel img, ul.rij_groot img, ul.rij_portret img {
    margin:0 ;
    padding:0;
}
ul.rij_klein li, ul.rij_middel li, ul.rij_groot li, ul.rij_portret li { /* dubbel */
    margin:0 ;
    padding:0;
}
ul.rij_klein figure, ul.rij_middel figure, ul.rij_groot figure, ul.rij_portret figure {
    padding:0;
    margin:0;
    background-color: white;
}
ul.rij_klein figcaption, ul.rij_middel figcaption, ul.rij_groot figcaption, ul.rij_portret figcaption, ul.enkel figcaption, ul.rij_klein_max figcaption {

    display:block;
    font-size:0.8em;

    color: var(--reverse-text-bg-color);
    padding:0;
    margin:0;
}




/* r16x9 ----------- */
/* ul li */
ul.rij_klein li img, ul.rij_klein li figcaption,
/* ul li.r16x9 */
ul.rij_klein li.r16x9 img, ul.rij_klein li.r16x9 figcaption,
/* ul.r16x9 li */
ul.rij_klein.r16x9 li img, ul.rij_klein.r16x9 li figcaption,
/* ul.r16x9 li.r16x9 */
ul.rij_klein.r16x9 li.r16x9 img, ul.rij_klein.r16x9 li.r16x9 figcaption,
/* ul.r9x16 li.r16x9 */
ul.rij_klein.r9x16 li.r16x9 img, ul.rij_klein.r9x16 li.r16x9 figcaption,
/* ul.r4x3 li.r16x9 */
ul.rij_klein.r4x3 li.r16x9 img, ul.rij_klein.r4x3 li.r16x9 figcaption,
/* ul.r3x4 li.r16x9 */
ul.rij_klein.r3x4 li.r16x9 img, ul.rij_klein.r3x4 li.r16x9 figcaption
{
    height:auto !important;
    width:160px !important;
}

/* r9x16 ----------- */
/* ul li.r9x16 */
ul.rij_klein li.r9x16 img, ul.rij_klein li.r9x16 figcaption,
/* ul.r9x16 li */
ul.rij_klein.r9x16 li img, ul.rij_klein.r9x16 li figcaption,
/* ul.r9x16 li.r9x16 */
ul.rij_klein.r9x16 li.r9x16 img, ul.rij_klein.r9x16 li.r9x16 figcaption,
/* ul.r9x16 li.r9x16 */
ul.rij_klein.r9x16 li.r9x16 img, ul.rij_klein.r9x16 li.r9x16 figcaption,
/* ul.r4x3 li.r9x16 */
ul.rij_klein.r4x3 li.r9x16 img, ul.rij_klein.r4x3 li.r9x16 figcaption,
/* ul.r3x4 li.r9x16 */
ul.rij_klein.r3x4 li.r9x16 img, ul.rij_klein.r3x4 li.r9x16 figcaption
{
    height:auto !important;
    width:90px !important;
}

/* r4x3 ----------- */
/* ul li.r4x3 */
ul.rij_klein li.r4x3 img, ul.rij_klein li.r4x3 figcaption,
/* ul.r4x3 li */
ul.rij_klein.r4x3 li img, ul.rij_klein.r4x3 li figcaption,
/* ul.r16x9 li.r4x3 */
ul.rij_klein.r16x9 li.r4x3 img, ul.rij_klein.r16x9 li.r4x3 figcaption,
/* ul.r9x16 li.r4x3 */
ul.rij_klein.r9x16 li.r4x3 img, ul.rij_klein.r9x16 li.r4x3 figcaption,
/* ul.r4x3 li.r4x3 */
ul.rij_klein.r4x3 li.r4x3 img, ul.rij_klein.r4x3 li.r4x3 figcaption,
/* ul.r3x4 li.r4x3 */
ul.rij_klein.r3x4 li.r4x3 img, ul.rij_klein.r3x4 li.r4x3 figcaption
{
    height:auto !important;
    width:120px !important;
}

/* r3x4 ----------- */
/* ul li.r3x4 */
ul.rij_klein li.r3x4 img, ul.rij_klein li.r3x4 figcaption,
/* ul.r3x4 li */
ul.rij_klein.r3x4 li img, ul.rij_klein.r3x4 li figcaption,
/* ul.r16x9 li.r3x4 */
ul.rij_klein.r16x9 li.r3x4 img, ul.rij_klein.r16x9 li.r3x4 figcaption,
/* ul.r9x16 li.r3x4 */
ul.rij_klein.r9x16 li.r3x4 img, ul.rij_klein.r9x16 li.r3x4 figcaption,
/* ul.r4x3 li.r3x4 */
ul.rij_klein.r4x3 li.r3x4 img, ul.rij_klein.r4x3 li.r3x4 figcaption,
/* ul.r3x4 li.r3x4 */
ul.rij_klein.r3x4 li.r3x4 img, ul.rij_klein.r3x4 li.r3x4 figcaption
{
    height:auto !important;
    width:90px !important;
}

/* r1x1 ----------- */
/* ul li.r1x1 */
ul.rij_klein li.r1x1 img, ul.rij_klein li.r1x1 figcaption,
/* ul.r1x1 li */
ul.rij_klein.r1x1 li img, ul.rij_klein.r1x1 li figcaption,
/* ul.r16x9 li.r3x4 */
ul.rij_klein.r1x1 li.r1x1 img, ul.rij_klein.r1x1 li.r1x1 figcaption
{
    height:auto !important;
    width:90px !important;
}


/* r16x9 ----------- */
/* ul li */
ul.rij_middel li img, ul.rij_middel li figcaption,
/* ul li.r16x9 */
ul.rij_middel li.r16x9 img, ul.rij_middel li.r16x9 figcaption,
/* ul.r16x9 li */
ul.rij_middel.r16x9 li img, ul.rij_middel.r16x9 li figcaption,
/* ul.r16x9 li.r16x9 */
ul.rij_middel.r16x9 li.r16x9 img, ul.rij_middel.r16x9 li.r16x9 figcaption,
/* ul.r9x16 li.r16x9 */
ul.rij_middel.r9x16 li.r16x9 img, ul.rij_middel.r9x16 li.r16x9 figcaption,
/* ul.r4x3 li.r16x9 */
ul.rij_middel.r4x3 li.r16x9 img, ul.rij_middel.r4x3 li.r16x9 figcaption,
/* ul.r3x4 li.r16x9 */
ul.rij_middel.r3x4 li.r16x9 img, ul.rij_middel.r3x4 li.r16x9 figcaption
{
    height:auto !important;
    width:160px !important;
}

/* r9x16 ----------- */
/* ul li.r9x16 */
ul.rij_middel li.r9x16 img, ul.rij_middel li.r9x16 figcaption,
/* ul.r9x16 li */
ul.rij_middel.r9x16 li img, ul.rij_middel.r9x16 li figcaption,
/* ul.r9x16 li.r9x16 */
ul.rij_middel.r9x16 li.r9x16 img, ul.rij_middel.r9x16 li.r9x16 figcaption,
/* ul.r9x16 li.r9x16 */
ul.rij_middel.r9x16 li.r9x16 img, ul.rij_middel.r9x16 li.r9x16 figcaption,
/* ul.r4x3 li.r9x16 */
ul.rij_middel.r4x3 li.r9x16 img, ul.rij_middel.r4x3 li.r9x16 figcaption,
/* ul.r3x4 li.r9x16 */
ul.rij_middel.r3x4 li.r9x16 img, ul.rij_middel.r3x4 li.r9x16 figcaption
{
    height:auto !important;
    width:90px !important;
}

/* r4x3 ----------- */
/* ul li.r4x3 */
ul.rij_middel li.r4x3 img, ul.rij_middel li.r4x3 figcaption,
/* ul.r4x3 li */
ul.rij_middel.r4x3 li img, ul.rij_middel.r4x3 li figcaption,
/* ul.r16x9 li.r4x3 */
ul.rij_middel.r16x9 li.r4x3 img, ul.rij_middel.r16x9 li.r4x3 figcaption,
/* ul.r9x16 li.r4x3 */
ul.rij_middel.r9x16 li.r4x3 img, ul.rij_middel.r9x16 li.r4x3 figcaption,
/* ul.r4x3 li.r4x3 */
ul.rij_middel.r4x3 li.r4x3 img, ul.rij_middel.r4x3 li.r4x3 figcaption,
/* ul.r3x4 li.r4x3 */
ul.rij_middel.r3x4 li.r4x3 img, ul.rij_middel.r3x4 li.r4x3 figcaption
{
    height:auto !important;
    width:120px !important;
}

/* r3x4 ----------- */
/* ul li.r3x4 */
ul.rij_middel li.r3x4 img, ul.rij_middel li.r3x4 figcaption,
/* ul.r3x4 li */
ul.rij_middel.r3x4 li img, ul.rij_middel.r3x4 li figcaption,
/* ul.r16x9 li.r3x4 */
ul.rij_middel.r16x9 li.r3x4 img, ul.rij_middel.r16x9 li.r3x4 figcaption,
/* ul.r9x16 li.r3x4 */
ul.rij_middel.r9x16 li.r3x4 img, ul.rij_middel.r9x16 li.r3x4 figcaption,
/* ul.r4x3 li.r3x4 */
ul.rij_middel.r4x3 li.r3x4 img, ul.rij_middel.r4x3 li.r3x4 figcaption,
/* ul.r3x4 li.r3x4 */
ul.rij_middel.r3x4 li.r3x4 img, ul.rij_middel.r3x4 li.r3x4 figcaption
{
    height:auto !important;
    width:90px !important;
}

/* r1x1 ----------- */
/* ul li.r1x1 */
ul.rij_middel li.r1x1 img, ul.rij_middel li.r1x1 figcaption,
/* ul.r1x1 li */
ul.rij_middel.r1x1 li img, ul.rij_middel.r1x1 li figcaption,
/* ul.r16x9 li.r3x4 */
ul.rij_middel.r1x1 li.r1x1 img, ul.rij_middel.r1x1 li.r1x1 figcaption
{
    height:auto !important;
    width:90px !important;
}




/* r16x9 ----------- */
/* ul li */
ul.rij_groot li img, ul.rij_groot li figcaption,
/* ul li.r16x9 */
ul.rij_groot li.r16x9 img, ul.rij_groot li.r16x9 figcaption,
/* ul.r16x9 li */
ul.rij_groot.r16x9 li img, ul.rij_groot.r16x9 li figcaption,
/* ul.r16x9 li.r16x9 */
ul.rij_groot.r16x9 li.r16x9 img, ul.rij_groot.r16x9 li.r16x9 figcaption,
/* ul.r9x16 li.r16x9 */
ul.rij_groot.r9x16 li.r16x9 img, ul.rij_groot.r9x16 li.r16x9 figcaption,
/* ul.r4x3 li.r16x9 */
ul.rij_groot.r4x3 li.r16x9 img, ul.rij_groot.r4x3 li.r16x9 figcaption,
/* ul.r3x4 li.r16x9 */
ul.rij_groot.r3x4 li.r16x9 img, ul.rij_groot.r3x4 li.r16x9 figcaption
{
    height:auto !important;
    width:160px !important;
}

/* r9x16 ----------- */
/* ul li.r9x16 */
ul.rij_groot li.r9x16 img, ul.rij_groot li.r9x16 figcaption,
/* ul.r9x16 li */
ul.rij_groot.r9x16 li img, ul.rij_groot.r9x16 li figcaption,
/* ul.r9x16 li.r9x16 */
ul.rij_groot.r9x16 li.r9x16 img, ul.rij_groot.r9x16 li.r9x16 figcaption,
/* ul.r9x16 li.r9x16 */
ul.rij_groot.r9x16 li.r9x16 img, ul.rij_groot.r9x16 li.r9x16 figcaption,
/* ul.r4x3 li.r9x16 */
ul.rij_groot.r4x3 li.r9x16 img, ul.rij_groot.r4x3 li.r9x16 figcaption,
/* ul.r3x4 li.r9x16 */
ul.rij_groot.r3x4 li.r9x16 img, ul.rij_groot.r3x4 li.r9x16 figcaption
{
    height:auto !important;
    width:90px !important;
}

/* r4x3 ----------- */
/* ul li.r4x3 */
ul.rij_groot li.r4x3 img, ul.rij_groot li.r4x3 figcaption,
/* ul.r4x3 li */
ul.rij_groot.r4x3 li img, ul.rij_groot.r4x3 li figcaption,
/* ul.r16x9 li.r4x3 */
ul.rij_groot.r16x9 li.r4x3 img, ul.rij_groot.r16x9 li.r4x3 figcaption,
/* ul.r9x16 li.r4x3 */
ul.rij_groot.r9x16 li.r4x3 img, ul.rij_groot.r9x16 li.r4x3 figcaption,
/* ul.r4x3 li.r4x3 */
ul.rij_groot.r4x3 li.r4x3 img, ul.rij_groot.r4x3 li.r4x3 figcaption,
/* ul.r3x4 li.r4x3 */
ul.rij_groot.r3x4 li.r4x3 img, ul.rij_groot.r3x4 li.r4x3 figcaption
{
    height:auto !important;
    width:120px !important;
}

/* r3x4 ----------- */
/* ul li.r3x4 */
ul.rij_groot li.r3x4 img, ul.rij_groot li.r3x4 figcaption,
/* ul.r3x4 li */
ul.rij_groot.r3x4 li img, ul.rij_groot.r3x4 li figcaption,
/* ul.r16x9 li.r3x4 */
ul.rij_groot.r16x9 li.r3x4 img, ul.rij_groot.r16x9 li.r3x4 figcaption,
/* ul.r9x16 li.r3x4 */
ul.rij_groot.r9x16 li.r3x4 img, ul.rij_groot.r9x16 li.r3x4 figcaption,
/* ul.r4x3 li.r3x4 */
ul.rij_groot.r4x3 li.r3x4 img, ul.rij_groot.r4x3 li.r3x4 figcaption,
/* ul.r3x4 li.r3x4 */
ul.rij_groot.r3x4 li.r3x4 img, ul.rij_groot.r3x4 li.r3x4 figcaption
{
    height:auto !important;
    width:90px !important;
}


/* r1x1 ----------- */
/* ul li.r1x1 */
ul.rij_groot li.r1x1 img, ul.rij_groot li.r1x1 figcaption,
/* ul.r1x1 li */
ul.rij_groot.r1x1 li img, ul.rij_groot.r1x1 li figcaption,
/* ul.r16x9 li.r3x4 */
ul.rij_groot.r1x1 li.r1x1 img, ul.rij_groot.r1x1 li.r1x1 figcaption
{
    height:auto !important;
    width:90px !important;
}






/* portret  ----------- */
ul.rij_portret li img, ul.rij_portret li figcaption
{
    height:auto !important;
    width:150px !important;
}






ul.rij_16_9 {
    display: grid; /* inline-flex */
    grid-template-columns: repeat(auto-fill, minmax(320px, auto));
    align-items:start;
    gap:40px;
    margin:0;
    padding:0;

}
ul.rij_16_9 li {
    /*
    display:flex;
    flex-direction: column;
    */
    list-style: none;
    margin:0; /* 10px 5px 0;*/
    padding:0;


}
ul.rij_16_9 img {
    max-width: 100% !important; /* disable style set in editor */
    height: auto !important;
    margin:0;
    padding:0;

}
ul.rij_16_9 figure {
    margin:0;
    padding:0;
}

ul.rij_16_9 figcaption {
    color:  var(--reverse-text-bg-color);

}





/*
@media (min-width: 640px) {
    ul.rij img {
        height:360px ;       
    }
}                   
*/


h1, div#h1, div#h1_tegel_quicklink {
    font-size: 1.5rem;
    font-weight:600;
}
div#h1 {
    margin:0 0 0 10px;
}


h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.1rem;
}


body {
    text-size-adjust: none;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--body-bg-color);
    color: var(--main-color);

}

.literatuur {
    font-style:oblique;
}



/* Generic styles */

html {
    scroll-behavior: smooth;
}

/*
.header {
  position: sticky;
  top: 0px;
  background-color: var(--body-bg-color);
  z-index: 1000;
}
*/
/*  --------------------------------------------------- */

#home {
    display:grid;
    /*grid-template-areas:"header" "collage" "main" "uitgelicht"   "partners" "sponsors" "footer";*/
    grid-template-areas:"header"   "banner" "linktegels" "vakgebieden" "uitgelicht" "partners" "footer"; /* "donatie_ad" */
    background-color:  var(--main-bg-color);
}
/*

#artikel {
    display:grid;    
    grid-template-areas:"header" "main-varia"  "footer";
    background-color:  var(--main-bg-color);
    grid-template-rows:auto auto auto;
} 

#artikel #main_varia {
    grid-area: main-varia;   
  
}
*/

header {
    grid-area: header;
    display: grid;
    grid-template-rows: auto 1fr ;
    grid-template-areas: "google" "logo_menu" ;

    background-color: var(--main-bg-color);
    color: var(--main-color);
    padding:0;

}

#logo_menu {
    grid-area: logo_menu;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-areas: "tmgnlogo" "menu" ;
    grid-template-rows:auto auto;
    background-color: var(--main-bg-color);
    color: var(--main-color);
    padding:0;

}
#logo_menu_nvmg {
    grid-area: logo_menu;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-areas: "nvmglogo" "menu" ;
    grid-template-rows:auto auto;
    background-color: var(--main-bg-color);
    color: var(--main-color);
    padding:0;

}
#google {
    grid-area: google;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;


    background-color: var(--main-bg-color);
    color: var(--main-color);
    margin: 10px 20px;
    padding:0;
    align-items: baseline;
    gap: 2rem;
}

#tmgnlogo img {
    width:150px;
    margin:10px 0 10px 10px;
}
#nvmglogo img {
    width:150px;
    margin:10px 0 10px 10px;
}

/*  --------------------------------------------------- */

.tegelpagina #menu {
    grid-area: menu;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "mainmenu" "quicklinkmenu";
    align-self:flex-start;
    grid-template-rows:auto auto;
    padding:0;
    margin:10px 0 0 0;
}

#tmgnlogo {
    grid-area: tmgnlogo;
    display: grid;
    grid-template-columns: 1fr;
    align-self:flex-start;
}


.editor #menu {
    grid-area: menu;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "mainmenu" ; /* "quicklinkmenu" */
    grid-area: menu;
    align-self: flex-start;

    grid-template-rows:auto auto;
    padding:0;
    margin:10px 0 0 0;
}

.tegelpagina #mainmenu {
    grid-area: mainmenu;
}

.tegelpagina #quicklinkmenu {
    grid-area: quicklinkmenu;
    display:none;
}



.editor #mainmenu {
    grid-area: mainmenu;
}


.editor #quicklinkmenu {
    /*grid-area: quicklinkmenu;*/
    display:none;
}


#mainmenu ul, .tegelpagina #quicklinkmenu ul {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-decoration: none;
    list-style:none;
    padding: 0 10px 0 10px;
    margin:0;
}



#mainmenu li, .tegelpagina #quicklinkmenu li{
    padding:0;
    margin:0 10px 10px 10px;
    /*
    display: inline-block;
 margin: 0 1rem 0 0;
 padding:0;
    width: auto;
    height: auto;
    text-align: center;
    */

    /* border:  var(--article-bg-color);    */


}
#menu {
    margin: 0;
}
#mainmenu, #quicklinkmenu {
    margin: 10px 0 0 0;
    padding: 0;
}
#mainmenu  a {
    text-decoration: none;
    background-color: var(--main-bg-color);
    color: var(--main-color);
}
#quicklinkmenu  a {
    text-decoration: none;
    background-color: var(--main-bg-color);
    color: var(--reverse-text-bg-color);
}

#vakgebieden a {
    text-decoration: none;
    background-color: var(--article-bg-color);
    color: var(--reverse-text-bg-color);
}

/*
.menu a:link {
    text-decoration: none;    
    background-color: var(--main-bg-color);
    color: var(--main-color);    
}



.menu a:visited {
    text-decoration: none;
    background-color: var(--main-bg-color);
    color: var(--main-color);     
}

.menu a:hover {
    text-decoration: none;
    background-color: var(--main-bg-color);
    color: var(--main-color);      
}

.menu a:active {
    text-decoration: none;
    background-color: var(--main-bg-color);
    color: var(--main-color);    
}

.menu a:hover div {
    background-color: var(--main-bg-color);
    color: var(--main-color);    
}

.menu a:active div {
    background-color: var(--main-bg-color);
    color: var(--main-color);    
}

.menu li.selected div {
    background-color: var(--main-bg-color);
    color: var(--main-color);     
}
*/

/*
.logo {
    grid-area: logo;
    align-self: center;
    margin: 0;
}

.logo img {
    height: 3rem;
    padding: 1rem;
}
*/
/*
.selectstyle {
    grid-area: selectstyle;
    align-self: center;
    margin: 0;
}
*/


#donatie_ad {
    grid-area: donatie_ad;
}

#bigtitle {
    font-size: 40px;
}

/* ------------------------------------------ */

#banner a {
    text-decoration: none;
}

#banner {
    /*
    Bij het kleinste scherm is de foto volledig in beeld, onder en boven ontbreekt niets.
    Is het scherm 320 breed dan is de hoogte 180
    */
    /* mobile first: iPhone 5 is 320px width, met aspect-ration 16:9 is de hoogte 320*9/16=180*/
    grid-area: banner;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;


    min-height:180px;
    max-height:400px;
    margin: 0 0 10px 0;
    padding:0;

    background-image: linear-gradient(rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)), url('uploaded_files/trefpunt.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-weight:500;
    color: white;
}

#bannernvmg {
    /*
    Bij het kleinste scherm is de foto volledig in beeld, onder en boven ontbreekt niets.
    Is het scherm 320 breed dan is de hoogte 180
    */
    /* mobile first: iPhone 5 is 320px width, met aspect-ration 16:9 is de hoogte 320*9/16=180*/
    grid-area: banner;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;


    min-height:400px;
    max-height:1080px;
    margin: 0 0 10px 0;
    padding:0;

    background-image: linear-gradient(rgba(0.0, 0, 0, 0.4),
        rgba(0.0, 0, 0, 0.4)), url('uploaded_files/banner.jpg');



    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-weight:500;
    color: white;
}




#bannertitle {
    /*
        position: relative;
        top: -350px;
        left: 0px;
    */
    text-align: center;
    color: white;



}


#bannertitle .title {

    font-size: 40px /*70px*/;
    margin: 0 0 0 0;
    padding:0;
}



#bannertitle .subtitle {
    display:none;
    /*
    font-size: 24px;
    font-weight:500;
    margin:20px 0 0 0;
    padding:0;
    */
    color: white;
}



#collage {
    display: none;
    height:180px;
    width: auto;
    margin:40px 0 0 0;

}
#collage-a,#collage-b,#collage-c,#collage-d,#collage-e {
    display:none;
}

#collage {


    font-weight:500; /* werkt niet? */


}

#collage .foksdiep {
    /*
    position:relative;
    top:220px;
    */
    color: white;
    display:grid;
    /*grid-template-rows: 2.5rem minmax(5rem,auto) 2rem;*/
    grid-template-rows: 2.5rem minmax(1rem,auto) 2rem;
    border:#ffffff 1px solid;
    border-radius: 10px;
    padding: 0 20px;

}
#collage .kop, #collage .aanwezig, #collage .partner {
    text-align: center;
}
#collage .kop {
    padding: 1rem 0 0 0;
    font-size:2rem;
    font-weight:500;
}
#collage .aanwezig {
    padding: 1rem 0 0 0;

}

#uitgelicht {
    grid-area: uitgelicht;
}

#linktegels {
    grid-area: linktegels;
}

#partners {
    grid-area: partners;
    margin:10px 0 0 0;
    padding:0;
    display:block;
}

#partners ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    align-content: space-between;
    background-color: var(--article-bg-color);
    margin:0;
    padding:10px 0 10px 0;
    ;
}

#partners li {
    list-style: none;
    margin:0 0 0 20px;

}

#partners figure {
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

#partners img {
    width: 100px;
    margin:0 ;
}

img#nvmg_logo {
    width:150px;
}
img#css_logo {
    width:70px;
}
img#sgf_logo {
    width:160px;
}
img#nvu_logo {
    width:60px;
}
img#nvab_logo {
    width:160px;
}
img#shvb_logo {
    width:80px;
}
#nvvr_logo {
    font-size:30px;
    text-decoration: none;
}
#nvvr_logo a {
    text-decoration: none;
}
/* ------------------------------------------ */




#banner1 img {
    width: 100%;
}

#fgbanner {


}


#fgbanner img {

    width:100%;
}







#main_zonder_varia {
    grid-area:main;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-areas:   "main"; /* op mobieltje onder elkaar */
    margin: 0;
    padding: 0;

}


#main_varia {
    grid-area:main;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-areas:   "main" "varia"; /* op mobieltje onder elkaar */
    margin: 0;
    padding: 0;

}


#main_varia h1 {
    margin:0;
}

main {
    background-color: var(--main-bg-color);
    display:grid;
    grid-area: main;
}

article.twitter {
    max-width: 20rem;
    margin: auto;
}

main article {
    background-color: var(--article-bg-color);
    padding:0;
    /*box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);*/
    margin:10px 0 20px 0;
}



/*
main {
  grid-area: content;
  display: grid;
  height: auto;
  grid-auto-columns: minmax(auto, 75rem);
  margin: auto;
}
*/

#varia {
    grid-area: varia;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fit, 300px); /* ??? */
    padding:0;
    grid-gap:20px;
    margin:0 10px 10px 10px;
}

#varia article {
    background-color: var(--article-bg-color);
    /*box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);*/
    padding:10px;
    ;
    margin:0;
}

#varia img {
    width:100%;
    margin:0;
    padding:0;
}
#varia figure {
    margin:0;
    padding:0;
}





.uitgelicht>ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,  1fr )); /* 280 is 2*20 minder dan 320 */
    /* 280px dus 2 * 280 = 560px + 20px in het midden is max breedte voordat er 2 plaatjes weergeven worden */
    padding: 0;
    margin: 0;
    background-color:var(--main-bg-color);

}

.uitgelicht>ul>li  {
    list-style-type: none;
    background-color:var(--article-bg-color);
    margin: 10px 10px 10px 0;
    padding: 0;
}



.uitgelicht>ul>li>article>figure  {
    /* flex: 0;*/

    margin:0 0 10px 0;
    padding:0;
}
.uitgelicht>ul>li>article>figure>img , .uitgelicht>ul>li>figure>video {
    width: 100%;
    height: auto;
    /*max-height: 180px;*/
}




.uitgelicht>ul>li figcaption {
    font-size:0.8rem;
    text-align: center;
    height:1.6rem;
    color:  var(--reverse-text-bg-color);
}


#artikel figcaption {
    font-size:0.8rem;
    text-align: left;
    color:  var(--reverse-text-bg-color);
}

/*
.uitgelicht article.zonderplaatje {
    display: grid;
    grid-template-rows: 2rem minmax(120px , auto) 2rem;
    background-color: var(--article-bg-color);

    margin: 0 ;
}
*/
.uitgelicht article.metplaatje {
    display: grid;
    grid-template-rows:  auto 3em minmax(120px , auto) ; /* auto 3em minmax(120px , auto) */
    background-color: var(--article-bg-color);
    padding: 0;
    margin: 0 ;
}

.uitgelicht>ul>li h1 {
    /* flex: 0;*/
    font-size: 1.2rem;
    margin: 0;
    padding:0 10px 0 10px; /* 0 10px 0 10px */

}

.uitgelicht>ul>li div {
    /*flex: auto;*/
    font-size: 1rem;
    margin: 0;
    padding: 0 10px 10px 10px;
}
.uitgelicht>ul>li div p {
    padding: 0;
    margin: 0;
}

.uitgelicht div>time {
    display:none;
    /*flex: 0;*/
    font-size: 0.8rem;
    margin: 0;
    padding: 0 1rem;

}



/* tinymce templates -------------------------------*/

.plaatje_omschrijving {
    list-style-type: none;
    padding:0;
}
.plaatje_omschrijving p>img {
    float:left;
    margin:0 1rem 0 0;
}
.plaatje_omschrijving p>img>strong {
    font-size:large;
    color:red;
    border:solid red;
}

.plaatje_omschrijving li::after {
    content: "";
    clear: both;
    display: table;
}

.large {
    font-size:20px;
}
/* -------------------------------*/
#ov9292 {
    height:2rem;
}
/* -------------------------------*/



a:link {
    text-decoration: underline;

    color: var(--main-color);
}

a:visited {
    text-decoration: underline;
    color: var(--main-color);
}

a:hover {
    text-decoration: underline;
    color: var(--main-color);
}

a:active {
    text-decoration: underline;
    color: var(--main-color);
}

#sponsors img {
    width:70px;
    margin:10px;
}

/* ------------------------------------------------- */



#varia {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 0 0 0;
}

#varia ul {
    margin:0;
    padding:0;
}
#varia li {
    list-style: none;
    margin:0 0 10px 0;
}


.sticky {
    position: sticky;
    top:0;
}


#vakgebieden {
    grid-area: vakgebieden;
    /* display: none; */

}

#vakgebieden ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-decoration: none;
    list-style:none;
    padding: 10px;
    margin:0 20px;
    gap: 10px;
    background-color: white;
    font-style: italic;
    /*font-size:1.1rem;*/
}

#vakgebieden li {

    border:var(--reverse-text-bg-color) 1px solid;
    border-radius: 5px;
    padding:3px;
}

#vakgebieden .class_intern {
    border:var(--main-color) 1px solid;
    border-radius: 5px;
    padding:3px;

}

#vakgebieden .class_intern a  {

    color: var(--main-color);
}

footer {
    grid-area:footer;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "socialmedia" ;
    /*grid-template-rows:auto auto;    */
    padding: 1rem;
    background-color: var(--main-bg-color);
    color: var(--footer-color);
    /*border-top: 1px black solid;*/
    margin-top:20px;
}





footer a:link {
    color:  var(--footer-color);
}

footer address {
    grid-area: address;
    text-align: left;
    display:none;
    align-items:center;
    justify-content:center;
}


#socialmedia {
    grid-area: socialmedia;
    display:flex;
    align-items:center;

    text-align: center;

    justify-content:flex-end;

    color:var(--reverse-text-bg-color);
}


#socialmedia * {
    color:var(--reverse-text-bg-color);
}

#socialmedia div {
    height:40px;
    margin:5px 10px 0 10px;
    font-size:35px;
}



/*
#twitter a:link, #youtube a:link {
    color:  var(--reverse-text-bg-color);
}

img#youtube_logo {height:30px;margin:10px 10px 0 10px;}
img#twitter_logo {width:50px;margin:0 10px;}
img#facebook_logo {width:40px;margin:5px 0 0 0;}
*/

img#anbi_logo {
    width:80px;
    margin:0;
}
#creativecommons_in_footer img {
    width:40px;
}
#creativecommons_in_footer {

    display:none;

}



footer address {
    display:none;
}

footer #anbi {
    display:none;
}




table {
    border-collapse: collapse;


}

table, th, td {
    border: 1px solid black;

}

th {
    text-align: left;
}

tbody tr:nth-child(odd) {
    background: var(--main-bg-color);
}

.editor table {
    border:none !important;
    width:100% !important;
}
/*
.editor td:first-of-type { WAAR WAS DEZE VOOR NODIG? geeft probleem bij nvmg artikelen
    width: 120px !important;
}
*/
.editor th, td {
    width: auto !important;
    padding:10px 5px 10px 5px !important;
    border:none !important;
}

.editor td img {
    width: 100px !important;
    height:auto !important;
    padding:0 !important;
}

.tegelpagina>h1, .tegelpagina>h2 {
    margin: 0 0 0 20px;
}
/*
.tegelpagina nav ul#quicklinks {
    display:none;
}
*/
.strikethrough  {
    text-decoration: line-through;
}


.visitekaartje {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-decoration: none;
    list-style:none;
    padding: 0;
    margin:0;

}
.visitekaartje li {
    display: grid;
    grid-template-columns: 100px 200px ;
    padding: 0;
    margin: 10px 0 10px 0;

}

.visitekaartje img {
    width:80px;
}

.visitekaartje .specialisatie {
    font-style: italic;
    min-height: 1.3rem;
}
.visitekaartje .naam {
    font-weight: 600;
    margin:10px 0 10px 0;
}





#catalog .searchresult {
    display: block;
    /*box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2); UIT */
    padding: 10px;
}
#catalog .worldcat {
    display: block;
}


#catalog {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fill,minmax(280px,  1fr ));
    justify-content: space-around;
}
#catalog .titel {
    margin:0;

}
#catalog .auteur {
    margin:0;
    color:  var(--reverse-text-bg-color);
}
#catalog .jaren {
    margin:0;
}
#catalog .locatie {
    margin:0;
}


/*
#catalog .searchresult {
    grid-area: searchresult;
}
#catalog .worldcat {
    grid-area: worldcat;
}
#catalog .searchresult {
    grid-area: worldcat;
}
*/

/*
#catalog {
    display: grid;
    grid-auto-rows: auto;    
    grid-template-columns: auto auto auto;
    justify-content: space-around;
}
*/

#catalog div {
    margin:20px 20px 0 0;
}

#catalogus form div {
    margin:0;
}
/*#catalogus form input {width:100%;}*/


.voorbeeldtekst, .resultatengevonden {
    font-style: oblique;
}
/*
#catalogbanner {



    background-image: linear-gradient(rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4)), url('uploaded_files/catalogus.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-weight:500;

    min-height:180px;
    max-height:400px;
    margin: 0 ;
    padding:20px 0 0 0;
}
*/
#catalogus form {
    /*
    text-align: center;
        display:flex;
        flex-wrap: wrap;
        align-items:center;
        justify-content:flex-start;
        column-gap: 20px;
        row-gap:20px;
    */
}

.tegelpagina .sectiontitle, .collectiepagina .sectiontitle {
    color:var(--reverse-text-bg-color);
    background-color: var(--body-bg-color); /*var(--reverse-text-bg-color);*/
    margin:20px 0 10px 0;
    padding:10px;
    font-size: 2em;
    font-weight:600;
    text-align:left; /*: center;*/
}

.tegelpagina .sectiontitle{
    background-color: var(--body-bg-color); /*var(--reverse-text-bg-color);*/
}

.collectiepagina .sectiontitle {
    background-color: var(--article-bg-color); /*var(--reverse-text-bg-color);*/
}

article img.logo {
    max-width:150px;
    max-height:150px;
}

#gebruikerscard {
    display: grid;
    grid-auto-rows: auto;
    grid-gap:20px;
    justify-content: space-around;
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
}


li.gebruiker {
    display: grid;
    grid-template-rows:  auto auto ;

    padding: 10px 0;
    margin:0;
}


.gebruiker .afkorting {
    font-size:1.4em;
    font-weight: 500;
}
.gebruiker .werkgroep {
    margin: 10px 0 0 0;
}


/* AGENDA ------------------------------------------------------------ */

.nameOfMonth {
    /*text-align: center;*/
    font-size:1.3em;
    grid-column:1 / -1;
    text-align:  center;
    height:40px;
}

.jaar {
    /* 320px minimum screenwidth, maximaal 3 codes per dag, 7 dagen (geen weeknummers)
    vanwege scrollbar - 10px? dan 320-10=310
    dan 315 / (7 * 3) = 14.7
    standaar browser font-size is 16px
    dan zou het met font-size 14px moeten passen
    een dag is dan 3*14px=42px width
    maar proefondervindelijk: font-size 13px, dan dag width 3*13=39
    */

    display: grid;
    grid-template-columns: repeat( auto-fit, 273px );    /* 7*3*13 */
    gap:20px;
    margin:20px 0 40px 0;
    font-size: 13px;
}

.week {
    display: grid;
    grid-template-columns:repeat(7, 39px);
    grid-template-rows: 39px;
    gap:0;
    text-align: center;
}
.weeknr {
    color:var(--reverse-text-bg-color);
    display:none;
}

.daybox {
    border: solid 1px var(--reverse-text-bg-color);
}




span.legenda_A, span.legenda_rk_A {
    background-color: red;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}
span.legenda_B {
    background-color: green;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}
span.legenda_C, span.legenda_rk_B {
    background-color: blue;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}
span.legenda_D {
    background-color: purple;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}
span.legenda_E, span.legenda_rk_G {
    background-color: gray;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}
span.legenda_F {
    background-color: orange;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}
span.legenda_G {
    background-color: magenta;
    color:white;
    padding:0 2px 0 2px;
    margin:0 1px 1px 1px;
    font-size:12px;
}

#legenda li {
    list-style: none;
}


.datumblok {
    margin:0 0 10px 0;
    padding:0;
}
.datumblok li {
    list-style: none;
    margin:0;
    padding:0;
}

.dataLi {
    list-style: none;
    margin:0;
    padding:0;

}
.datumDiv {
    font-weight: 600;
    margin:0;
    padding:0;
}
.tijdvantot {

    margin:0;
    padding:0;
}
#lijstweergave {
    margin:0;
    padding:0;
}
.dataList {
    margin:0;
    padding:0;

}





ul#legenda {

    margin:0;
    padding:0;
}

#andere_agenda {
    text-align: right;
    padding:0 10px 0 0;
}

/* --------------------------------------------------------- */



p.plaatje_tekst, .plaatje_in_tekst {
    display:block;
    overflow: auto;

}
p.plaatje_tekst img, .plaatje_in_tekst img {
    float:left;
    padding:0 20px 0 0;
    max-width:180px;
    max-height: 180px;
}
/*


*/

.plaatje_naast_tekst, .plaatje_middel_naast_tekst {
    display: grid;
    grid-template-rows: auto auto;
    list-style: none;
    margin:10px 0 10px 0;
    padding:0;
    max-width:90ch;
    
}
.plaatje_naast_tekst li, .plaatje_middel_naast_tekst li{
    margin:0;
    padding:0;
}
.xplaatje_naast_tekst li:first-child,  .xplaatje_middel_naast_tekst li:first-child{
    text-align: right;
    margin:0 10px 0 0;
}

.plaatje_naast_tekst li+li,  .plaatje_middel_naast_tekst li+li{
    
    margin:0 0 0 10px;
}

.plaatje_naast_tekst img {
    /*max-width: 180px;
    max-height: 180px;
    */
    width:180px !important;
    heigth: auto !important;
}
.plaatje_middel_naast_tekst img {
    /*max-width: 180px;
    max-height: 180px;
    */
    width:320px !important;
    heigth: auto !important;
}

/* donatie ------------------------------------------------- */

#donatie input {
    width: auto;
    margin: 0;
}
#donatie input.radio {
    width: auto;
    margin: 0;
}
#donatie textarea {
    width:auto;
    height:100px
}

#donatie .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "donatie_trefpunt"
        "donatie_paletfonds"
        ;

    gap:20px;
}

#donatie_trefpunt {
    grid-area: donatie_trefpunt;
}
#donatie_paletfonds {
    grid-area: donatie_paletfonds;
}



#donatie_ad {
    display:grid;
    grid-template-columns: auto 1fr;

    background-color: var(--main-bg-color);
    text-align: left;
    margin:0;
    padding:0;

    font-style: oblique;
    font-size:1.25em;


}
#donatie_ad div:first-child {
    background-color: white;
    color: var(--reverse-text-bg-color);
    padding: 10px;
}

#donatie_ad span {


    font-weight:500;

}
#donatie_ad a {
    color: var(--reverse-text-bg-color);
}


/* ----------------------------------- */

#catering, #boekaankoop {
    font-size:1.2em;
}

#catering input[type=number], #boekaankoop input[type=number], #boeken_bestelling input[type=number] {
    width:3em;
}
#catering #vrij, #boekaankoop #vrij {
    width:5em;
}

#boeken_bestelling textarea {
    width: 100%;
    height: 5ex;
}

/* collage ---------------------------------------------------------- */

.gallery1{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 150px;
    grid-auto-flow: row dense;
}
.gallery1 li{
    display:grid;
    justify-items:center;
    align-items:center;
}


.gallery2 {
    display: grid;

    grid-template-columns: repeat(5, 5fr);
    grid-template-rows: repeat(5, 5fr);
    grid-gap:2em;

    grid-auto-flow: column dense;
}
.gallery2 li{
    display:grid;
    justify-items:center;
    align-items:center;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-template-rows: repeat(auto-fit, 260px);
    grid-auto-flow: dense;
    grid-gap: 0.3rem;
}

.gallery li{
    display:grid;
    justify-items:center;
    align-items:center;
}


/* ---------------------------------------------------------- */


#antiquariaatcard {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*
    flex-direction:row;
    
    
    */
    gap:20px;

}
.antiquariaatboek {
    list-style: none;
    display:grid;
    grid-template-rows: 185px fit-content(15px) auto fit-content(15px); /* grid-template-rows: 180px 35px 70px 20px; */
    width:180px;
    gap:0; /* 10px */
    margin:0; /* 10px 10px */


}
img.antiquariaatboekimg {
    max-height: 180px;
    max-width: 180px;

}
/*
#antiquariaatcard .titel {
    min-height: 4ex;
}
*/
#antiquariaatcard .auteur {
    color:  var(--reverse-text-bg-color);
    font-size:14px;
}
#antiquariaatcard .prijs {
    color:  var(--reverse-text-bg-color);
    font-size:14px;
}
/* --------------------------------------------------------------- */


#boekcard {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*
    flex-direction:row;
    
    
    */

}
.boek {
    list-style: none;
    display:grid;
    grid-template-rows: 280px; /*70px 35px 20px;*/
    /*width:280px;*/
    gap:10px;
    margin:10px 10px;


}
img.boekimg {
    max-height: 280px;
    max-width: 280px;

}

/*
#boekcard .titel {
    min-height: 4ex;
}
#boekcard .auteur {
    color:  var(--reverse-text-bg-color);
}
*/

/* --------------------- */
#winkelwagen_button {
    display: flex;
    justify-content: flex-end;
}

/* --------------------------------------------------------------- */


/*
artikellijst {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start; 
   
}
*/

#article_tegels_nvmg {
    background-color: var(--body-bg-color);
}
article h2 {
    color: var(--reverse-text-bg-color);
    margin-top: 20px;
}

ul.artikellijst {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(360px,  1fr ));
    padding: 0;
    margin: 0 0 20px 0;
    background-color: var(--main-bg-color);

}

li.artikellijstitem {
    list-style: none;
    display: grid;
    grid-template-columns: 100px 1fr ;
    gap:20px;
    margin: 10px 0 10px 0;
    padding: 0;
    background-color: var(--article-bg-color);
    /*border:1px solid;*/
    /*box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);*/

}

img.artikellijstimg {
    max-height: 100px;
    max-width: 100px;
    margin:10px 0 10px 10px;
    padding:0;
}
div.artikellijsttekst {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:10px 10px 10px 0;
}

.artikellijsttekst .titel {
    font-weight:bold;
}


/*
#boekcard .titel {
    min-height: 4ex;
}
#boekcard .auteur {
    color:  var(--reverse-text-bg-color);
}
*/
/* --------------------------------------------------------------- */


ul.uitgaven {
    list-style: none;

    padding: 10px 10px 10px 10px;
    margin: 0 0 20px 0;
    background-color: var(--main-bg-color);

}

li.uitgaveitem {
    list-style: none;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap:20px;
    margin: 0 0 10px 0;
    padding: 10px;
    background-color: var(--article-bg-color);
    /*border:1px solid;*/
    /*box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);*/
    max-width:1000ch;
}

img.uitgaveimg {
    max-height: 180px;
    max-width: 180px;
    margin:10px 0 10px 10px;
    padding:0;
}
div.uitgavetekst {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:10px 10px 10px 0;

}

.uitgavetekst .titel {
    font-style:italic;
}




/* --------------------------------------------------------------- */



div.boeken ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*
    flex-direction:row;
    
    
    */

}
div.boeken ul li  {
    list-style: none;
    display:grid;
    grid-template-rows: 180px 70px 35px 20px;
    width:180px;
    gap:10px;
    margin:10px 10px;


}
div.boeken ul li div img {
    max-height: 180px;
    max-width: 180px;

}
div.boeken ul li div.titel {
    min-height: 4ex;
}
div.boeken ul li div.auteur {
    color:  var(--reverse-text-bg-color);
}

/* --------------------------------------------------------------- */
#periodiek-sgf-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*
    flex-direction:row;
    
    
    */

}
.periodiek-sgf {
    list-style: none;
    display:grid;
    grid-template-rows: auto 40px;
    width:180px;
    gap:10px;
    margin:10px 10px;


}
img.perdiodiek-sgf-img {
    max-height: 180px;
    /*max-width: 180px;*/

}
#periodiek-sgf-card .titel {
    min-height: 4ex;
    text-align: center;
}
#periodiek-sgf-card .auteur {
    color:  var(--reverse-text-bg-color);
}

/* --------------------------------------------------------------- */
#catalogusleesmuseum {
    display:none;
}
#catalogusleesmuseum img {
    width:168px;
    height: auto;
    margin:10px 0 0 0;
}



/* --------------------------------------------------------- */
.twitter-share-button {
    margin:10px 0 0 0;
}

/* ---------------------------------------------------------- */

ul.plattegrond {
    display: grid; /* inline-flex */
    grid-template-columns: repeat(auto-fill, 300px);
    align-items:start;
    gap:40px;
    margin:0;
    padding:0;

}
ul.plattegrond li {
    /*
    display:flex;
    flex-direction: column;
    */
    list-style: none;
    margin:0; /* 10px 5px 0;*/
    padding:0;


}
ul.plattegrond img {
    max-width: 100% !important; /* disable style set in editor */
    height: auto !important;
    margin:0;
    padding:0;

}
ul.plattegrond figure {
    margin:0;
    padding:0;
}

ul.plattegrond figcaption {
    color:  var(--reverse-text-bg-color);
    text-align: center;
}



ul.rij_middel iframe {
    width:320px !important;
    height:180px !important;
}

#google_translate_element {
    height:2ex;
}

/* https://mastery.games/post/the-difference-between-width-and-flex-basis/ */
#instrumenten #catres {
    background-color: var(--main-bg-color);
    padding:20px 0;
}
#instrumenten #catres a {
    text-decoration: none;
}
#instrumenten #catres figure  {
    width:auto;
} /*{height:640px;} /**/
#instrumenten #catres img {
    height:auto;
} /* 100% */

#instrumenten #catres figcaption {
    color:  var(--reverse-text-bg-color);
    text-align: center;
}
#instrumenten label {
    margin:0 5px 0 0;
}
#instrumenten #catres ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content:flex-start;
    list-style:none;
    gap:20px;
}
#instrumenten #catres li {
    flex: 0 1 480px;
}
#instrumenten #catres figure {
    padding:0;
    margin:0;
}


.instrumentenx {
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:20px;
}
.instrumentenx {
    background-color: var(--main-bg-color);
    padding:20px 0;
}
.instrumentenx .afbeelding {
    padding:0;
}
.instrumentenx .tekst {
    padding:10px;
}


.instrumenten2 {
    background-color: var(--main-bg-color);
    padding:20px 0;
}
.instrumenten2 a {
    text-decoration: none;
}
.instrumenten2 figure {
    width:240px;
}
.instrumenten2 img {
    width:100%;
}

.instrumenten2 figcaption {
    color:  var(--reverse-text-bg-color);
    text-align: center;
}

.instrumenten2 ul {
    display:grid;
    grid-auto-flow:column;
    grid-gap:10px;
    margin:30px;
    overflow:auto;
    list-style:none;
    max-width:1024px ;
}
.instrumenten2 > *{
    padding:30px;
}

.instrumenten_index ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    grid-auto-flow:row;
    gap: 0px;
    list-style:none;
}
.instrumenten_index a {
    text-decoration: none;
}


ul.namenindex_letter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    list-style:none;
    gap:20px;
    font-size:1.3em;
}
ul.namenindex_letter a {
    text-decoration: none;
}





.groepfilter ul, .bronfilter ul  {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    list-style:none;
    gap:20px;

}
/*
button.button_as_link {
    

     border: 0;
     background-color: transparent;
     font-size: 1em;
 }
*/

.bladerbutton {
    margin:20px 0 0 10px;
}

.instrumentformbutton, .collectieformbutton {
    margin:10px 10px 0 0;
}



#domusdaglink {
    color:black;
}
div#domusdaglink {
    padding:20px;
}

#domusdaglink #livestream {
    border: 2px solid #8b0000;
    padding: 10px;
}

#domusdaglink img {
    width: auto;
    max-width:320px;
}

#catalogus .input {
    margin:0 0 10px 0;
}
#catalogus .input:first-child {
    margin:15px 0 10px 0;
}
#catalogus .locatiefilter {
    margin:20px 0 0 0;
}
#catalogus .locatiefilter ul {
    margin:0;
    padding:0;
    list-style: none;
}
#catalogus .locatiefilter li {
    margin:0 0 5px 0;
    list-style: none;
}
#catalogus #zoek {
    margin: 10px 0 0 0;
}
#catalogus #zoekresultaat {
    margin: 20px 0 0 0;
}

/*
#linktegels {display:none;}
@media  (min-width: 1080px) {    
    #linktegels {display:block;}
}
*/
#linktegels ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
}
#linktegels li {

    list-style: none;
    margin:0 10px 0 0;
    padding:0;
}
#linktegels img {
    height:auto !important;
    width:280px !important;
    margin:0;
    padding:0;
}

/* =========================================== */

#agendatrefpunt {
    border:none;
    overflow:hidden;
    width:100%;
    height:auto;
    background-color: var(--article-bg-color);
}




/* edge kan dit niet vinden, daarom inline ccs
video {    
    max-width: 100% !important;
    height: auto !important;    
}
*/

/* ========================================================================================== */



/* ========================================================================================== */
/* minimaal 320px width iphone 5 */

@media  (min-width: 360px) {/*  tablet landscape: > 1024px */

    .jaar {
        grid-template-columns: repeat( auto-fit, 312px );    /* 8*3*13 */
    }
    .week {
        grid-template-columns:repeat(8, 39px);
        grid-template-rows: 39px;
    }
    .weeknr {
        display:block;
    }




    /* r16x9 ----------- */
    /* ul li */
    ul.rij_middel li img, ul.rij_middel li figcaption,
    /* ul li.r16x9 */
    ul.rij_middel li.r16x9 img, ul.rij_middel li.r16x9 figcaption,
    /* ul.r16x9 li */
    ul.rij_middel.r16x9 li img, ul.rij_middel.r16x9 li figcaption,
    /* ul.r16x9 li.r16x9 */
    ul.rij_middel.r16x9 li.r16x9 img, ul.rij_middel.r16x9 li.r16x9 figcaption,
    /* ul.r9x16 li.r16x9 */
    ul.rij_middel.r9x16 li.r16x9 img, ul.rij_middel.r9x16 li.r16x9 figcaption,
    /* ul.r4x3 li.r16x9 */
    ul.rij_middel.r4x3 li.r16x9 img, ul.rij_middel.r4x3 li.r16x9 figcaption,
    /* ul.r3x4 li.r16x9 */
    ul.rij_middel.r3x4 li.r16x9 img, ul.rij_middel.r3x4 li.r16x9 figcaption
    {
        height:auto !important;
        width:320px !important;
    }

    /* r9x16 ----------- */
    /* ul li.r9x16 */
    ul.rij_middel li.r9x16 img, ul.rij_middel li.r9x16 figcaption,
    /* ul.r9x16 li */
    ul.rij_middel.r9x16 li img, ul.rij_middel.r9x16 li figcaption,
    /* ul.r9x16 li.r9x16 */
    ul.rij_middel.r9x16 li.r9x16 img, ul.rij_middel.r9x16 li.r9x16 figcaption,
    /* ul.r9x16 li.r9x16 */
    ul.rij_middel.r9x16 li.r9x16 img, ul.rij_middel.r9x16 li.r9x16 figcaption,
    /* ul.r4x3 li.r9x16 */
    ul.rij_middel.r4x3 li.r9x16 img, ul.rij_middel.r4x3 li.r9x16 figcaption,
    /* ul.r3x4 li.r9x16 */
    ul.rij_middel.r3x4 li.r9x16 img, ul.rij_middel.r3x4 li.r9x16 figcaption
    {
        height:auto !important;
        width:180px !important;
    }

    /* r4x3 ----------- */
    /* ul li.r4x3 */
    ul.rij_middel li.r4x3 img, ul.rij_middel li.r4x3 figcaption,
    /* ul.r4x3 li */
    ul.rij_middel.r4x3 li img, ul.rij_middel.r4x3 li figcaption,
    /* ul.r16x9 li.r4x3 */
    ul.rij_middel.r16x9 li.r4x3 img, ul.rij_middel.r16x9 li.r4x3 figcaption,
    /* ul.r9x16 li.r4x3 */
    ul.rij_middel.r9x16 li.r4x3 img, ul.rij_middel.r9x16 li.r4x3 figcaption,
    /* ul.r4x3 li.r4x3 */
    ul.rij_middel.r4x3 li.r4x3 img, ul.rij_middel.r4x3 li.r4x3 figcaption,
    /* ul.r3x4 li.r4x3 */
    ul.rij_middel.r3x4 li.r4x3 img, ul.rij_middel.r3x4 li.r4x3 figcaption
    {
        height:auto !important;
        width:240px !important;
    }

    /* r3x4 ----------- */
    /* ul li.r3x4 */
    ul.rij_middel li.r3x4 img, ul.rij_middel li.r3x4 figcaption,
    /* ul.r3x4 li */
    ul.rij_middel.r3x4 li img, ul.rij_middel.r3x4 li figcaption,
    /* ul.r16x9 li.r3x4 */
    ul.rij_middel.r16x9 li.r3x4 img, ul.rij_middel.r16x9 li.r3x4 figcaption,
    /* ul.r9x16 li.r3x4 */
    ul.rij_middel.r9x16 li.r3x4 img, ul.rij_middel.r9x16 li.r3x4 figcaption,
    /* ul.r4x3 li.r3x4 */
    ul.rij_middel.r4x3 li.r3x4 img, ul.rij_middel.r4x3 li.r3x4 figcaption,
    /* ul.r3x4 li.r3x4 */
    ul.rij_middel.r3x4 li.r3x4 img, ul.rij_middel.r3x4 li.r3x4 figcaption
    {
        height:auto !important;
        width:180px !important;
    }

    /* r1x1 ----------- */
    /* ul li.r1x1 */
    ul.rij_middel li.r1x1 img, ul.rij_middel li.r1x1 figcaption,
    /* ul.r1x1 li */
    ul.rij_middel.r1x1 li img, ul.rij_middel.r1x1 li figcaption,
    /* ul.r16x9 li.r3x4 */
    ul.rij_middel.r1x1 li.r1x1 img, ul.rij_middel.r1x1 li.r1x1 figcaption
    {
        height:auto !important;
        width:180px !important;
    }




    /* r16x9 ----------- */
    /* ul li */
    ul.rij_groot li img, ul.rij_groot li figcaption,
    /* ul li.r16x9 */
    ul.rij_groot li.r16x9 img, ul.rij_groot li.r16x9 figcaption,
    /* ul.r16x9 li */
    ul.rij_groot.r16x9 li img, ul.rij_groot.r16x9 li figcaption,
    /* ul.r16x9 li.r16x9 */
    ul.rij_groot.r16x9 li.r16x9 img, ul.rij_groot.r16x9 li.r16x9 figcaption,
    /* ul.r9x16 li.r16x9 */
    ul.rij_groot.r9x16 li.r16x9 img, ul.rij_groot.r9x16 li.r16x9 figcaption,
    /* ul.r4x3 li.r16x9 */
    ul.rij_groot.r4x3 li.r16x9 img, ul.rij_groot.r4x3 li.r16x9 figcaption,
    /* ul.r3x4 li.r16x9 */
    ul.rij_groot.r3x4 li.r16x9 img, ul.rij_groot.r3x4 li.r16x9 figcaption
    {
        height:auto !important;
        width:320px !important;
    }

    /* r9x16 ----------- */
    /* ul li.r9x16 */
    ul.rij_groot li.r9x16 img, ul.rij_groot li.r9x16 figcaption,
    /* ul.r9x16 li */
    ul.rij_groot.r9x16 li img, ul.rij_groot.r9x16 li figcaption,
    /* ul.r9x16 li.r9x16 */
    ul.rij_groot.r9x16 li.r9x16 img, ul.rij_groot.r9x16 li.r9x16 figcaption,
    /* ul.r9x16 li.r9x16 */
    ul.rij_groot.r9x16 li.r9x16 img, ul.rij_groot.r9x16 li.r9x16 figcaption,
    /* ul.r4x3 li.r9x16 */
    ul.rij_groot.r4x3 li.r9x16 img, ul.rij_groot.r4x3 li.r9x16 figcaption,
    /* ul.r3x4 li.r9x16 */
    ul.rij_groot.r3x4 li.r9x16 img, ul.rij_groot.r3x4 li.r9x16 figcaption
    {
        height:auto !important;
        width:180px !important;
    }

    /* r4x3 ----------- */
    /* ul li.r4x3 */
    ul.rij_groot li.r4x3 img, ul.rij_groot li.r4x3 figcaption,
    /* ul.r4x3 li */
    ul.rij_groot.r4x3 li img, ul.rij_groot.r4x3 li figcaption,
    /* ul.r16x9 li.r4x3 */
    ul.rij_groot.r16x9 li.r4x3 img, ul.rij_groot.r16x9 li.r4x3 figcaption,
    /* ul.r9x16 li.r4x3 */
    ul.rij_groot.r9x16 li.r4x3 img, ul.rij_groot.r9x16 li.r4x3 figcaption,
    /* ul.r4x3 li.r4x3 */
    ul.rij_groot.r4x3 li.r4x3 img, ul.rij_groot.r4x3 li.r4x3 figcaption,
    /* ul.r3x4 li.r4x3 */
    ul.rij_groot.r3x4 li.r4x3 img, ul.rij_groot.r3x4 li.r4x3 figcaption
    {
        height:auto !important;
        width:240px !important;
    }

    /* r3x4 ----------- */
    /* ul li.r3x4 */
    ul.rij_groot li.r3x4 img, ul.rij_groot li.r3x4 figcaption,
    /* ul.r3x4 li */
    ul.rij_groot.r3x4 li img, ul.rij_groot.r3x4 li figcaption,
    /* ul.r16x9 li.r3x4 */
    ul.rij_groot.r16x9 li.r3x4 img, ul.rij_groot.r16x9 li.r3x4 figcaption,
    /* ul.r9x16 li.r3x4 */
    ul.rij_groot.r9x16 li.r3x4 img, ul.rij_groot.r9x16 li.r3x4 figcaption,
    /* ul.r4x3 li.r3x4 */
    ul.rij_groot.r4x3 li.r3x4 img, ul.rij_groot.r4x3 li.r3x4 figcaption,
    /* ul.r3x4 li.r3x4 */
    ul.rij_groot.r3x4 li.r3x4 img, ul.rij_groot.r3x4 li.r3x4 figcaption
    {
        height:auto !important;
        width:180px !important;
    }


    /* r1x1 ----------- */
    /* ul li.r1x1 */
    ul.rij_groot li.r1x1 img, ul.rij_groot li.r1x1 figcaption,
    /* ul.r1x1 li */
    ul.rij_groot.r1x1 li img, ul.rij_groot.r1x1 li figcaption,
    /* ul.r16x9 li.r3x4 */
    ul.rij_groot.r1x1 li.r1x1 img, ul.rij_groot.r1x1 li.r1x1 figcaption
    {
        height:auto !important;
        width:180px !important;
    }





}


@media  (min-width: 375px) {/*  tablet landscape: > 1024px */

    .jaar {
        grid-template-columns: repeat( auto-fit, 336px );    /* 8*3*14 */
        font-size: 14px;
    }
    .week {

        grid-template-columns:repeat(8, 42px);
        grid-template-rows: 42px;
        text-align: center;
    }
    main article {
        padding: 10px;
    }

}


@media  (min-width: 414px) {/*  tablet landscape: > 1024px */

    .jaar {
        grid-template-columns: repeat( auto-fit, 360px );    /* 8*3*14 */
        font-size: 15px;
    }
    .week {

        grid-template-columns:repeat(8, 45px);
        grid-template-rows: 45px;
        text-align: center;
    }


    li.artikellijstitem {
        grid-template-columns: 150px 1fr ;
        margin: 10px 10px 10px 10px;
    }
    img.artikellijstimg {
        max-height: 150px;
        max-width: 150px;
    }

}



@media  (min-width: 568px) {
    audio {
        max-width:none;
    }
    div#h1 {
        margin:0 0 0 20px;
    }
    #bannertitle .subtitle {
        display:block;
        font-size: 20px;
    }
    main article {
        padding: 20px;
    }
    .uitgelicht>ul {
        padding: 0 0 0 20px;
    }

    .uitgelicht>ul>li {
        list-style-type: none;
        background-color:var(--article-bg-color);
        /*box-shadow: 0 0 3px 3px rgba(0, 0, 0, .2);*/

        margin: 10px 20px 10px 0;
        padding: 0;

        /*border: 1px solid var(--main-color);*/
    }
    .visitekaartje img {
        width:100px;
    }
    .visitekaartje li {
        display: grid;
        grid-template-columns: 120px 220px ;
        padding: 10px;
        margin: 10px 20px 10px 0;
        /* box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2); UIT */
    }

    #catalog {
        display: grid;
        grid-auto-rows: auto;
        grid-template-columns: repeat(auto-fill,minmax(320px,  1fr ));
        justify-content: space-around;
    }
    .tegelpagina .sectiontitle {
        padding:20px;
    }
    .jaar {
        grid-template-columns: repeat( auto-fit, 384px );    /* 8*3*14 */
        font-size: 16px;
    }
    .week {
        grid-template-columns:repeat(8, 45px);
        grid-template-rows: 45px;
        text-align: center;
    }

    .datumblok {
        display: grid;
        grid-template-columns:100px auto;

        margin: 0 0 10px 0;
        padding:0;
    }
    .datumblok li {
        list-style: none;
        margin:0;
        padding:0;
    }

    .dataLi {
        display: grid;
        grid-template-columns: 20px 100px auto; /* tijd omschrijving*/

        margin:0;
        padding:0;

    }
    .datumDiv {
        font-weight: normal;
        margin:0;
        padding:0;
    }
    #lijstweergave {
        margin:0;
        padding:0;
    }
    .dataList {
        margin:0;
        padding:0;
        display: grid;
        gap: 5px;
    }


}

@media  (min-width: 800px) {
    ul.rij2_middel_max, ul.rij2_groot_max {
        gap: 20px;
    }


    ul.rij2_middel_max img {
        max-height:360px;

        max-width: 360px;
    }
    ul.rij2_groot_max img {
        max-height:640px;

        max-width: 640px;
    }

    ul.rij2_middel_max figcaption {


        max-width: 360px;
    }
    ul.rij2_groot_max figcaption {


        max-width: 640px;
    }


    .plaatje_naast_tekst {
        grid-template-columns: 200px 1fr;
    }
    
    
    .plaatje_middel_naast_tekst {
        grid-template-columns: 320px 1fr;
    }
    
    
    #banner {
        padding:60px 0 0 0;
    }
    #bannertitle .title {
        font-size: 70px;
        margin: 0 0 0 0;
        padding:0;
    }
    #bannertitle .subtitle {
        font-size: 24px;
    }
    #bannernvmg #bannertitle .subtitle {
        font-size: 30px;
    }

    .uitgelicht>ul {
        grid-template-columns: repeat(auto-fill,minmax(300px,  1fr )); /* 280 is 2*20 minder dan 320 */
    }





    /* r16x9 ----------- */
    /* ul li */
    ul.rij_groot li img, ul.rij_groot li figcaption,
    /* ul li.r16x9 */
    ul.rij_groot li.r16x9 img, ul.rij_groot li.r16x9 figcaption,
    /* ul.r16x9 li */
    ul.rij_groot.r16x9 li img, ul.rij_groot.r16x9 li figcaption,
    /* ul.r16x9 li.r16x9 */
    ul.rij_groot.r16x9 li.r16x9 img, ul.rij_groot.r16x9 li.r16x9 figcaption,
    /* ul.r9x16 li.r16x9 */
    ul.rij_groot.r9x16 li.r16x9 img, ul.rij_groot.r9x16 li.r16x9 figcaption,
    /* ul.r4x3 li.r16x9 */
    ul.rij_groot.r4x3 li.r16x9 img, ul.rij_groot.r4x3 li.r16x9 figcaption,
    /* ul.r3x4 li.r16x9 */
    ul.rij_groot.r3x4 li.r16x9 img, ul.rij_groot.r3x4 li.r16x9 figcaption
    {
        height:auto !important;
        width:640px !important;
    }

    /* r9x16 ----------- */
    /* ul li.r9x16 */
    ul.rij_groot li.r9x16 img, ul.rij_groot li.r9x16 figcaption,
    /* ul.r9x16 li */
    ul.rij_groot.r9x16 li img, ul.rij_groot.r9x16 li figcaption,
    /* ul.r9x16 li.r9x16 */
    ul.rij_groot.r9x16 li.r9x16 img, ul.rij_groot.r9x16 li.r9x16 figcaption,
    /* ul.r9x16 li.r9x16 */
    ul.rij_groot.r9x16 li.r9x16 img, ul.rij_groot.r9x16 li.r9x16 figcaption,
    /* ul.r4x3 li.r9x16 */
    ul.rij_groot.r4x3 li.r9x16 img, ul.rij_groot.r4x3 li.r9x16 figcaption,
    /* ul.r3x4 li.r9x16 */
    ul.rij_groot.r3x4 li.r9x16 img, ul.rij_groot.r3x4 li.r9x16 figcaption
    {
        height:auto !important;
        width:360px !important;
    }

    /* r4x3 ----------- */
    /* ul li.r4x3 */
    ul.rij_groot li.r4x3 img, ul.rij_groot li.r4x3 figcaption,
    /* ul.r4x3 li */
    ul.rij_groot.r4x3 li img, ul.rij_groot.r4x3 li figcaption,
    /* ul.r16x9 li.r4x3 */
    ul.rij_groot.r16x9 li.r4x3 img, ul.rij_groot.r16x9 li.r4x3 figcaption,
    /* ul.r9x16 li.r4x3 */
    ul.rij_groot.r9x16 li.r4x3 img, ul.rij_groot.r9x16 li.r4x3 figcaption,
    /* ul.r4x3 li.r4x3 */
    ul.rij_groot.r4x3 li.r4x3 img, ul.rij_groot.r4x3 li.r4x3 figcaption,
    /* ul.r3x4 li.r4x3 */
    ul.rij_groot.r3x4 li.r4x3 img, ul.rij_groot.r3x4 li.r4x3 figcaption
    {
        height:auto !important;
        width:480px !important;
    }

    /* r3x4 ----------- */
    /* ul li.r3x4 */
    ul.rij_groot li.r3x4 img, ul.rij_groot li.r3x4 figcaption,
    /* ul.r3x4 li */
    ul.rij_groot.r3x4 li img, ul.rij_groot.r3x4 li figcaption,
    /* ul.r16x9 li.r3x4 */
    ul.rij_groot.r16x9 li.r3x4 img, ul.rij_groot.r16x9 li.r3x4 figcaption,
    /* ul.r9x16 li.r3x4 */
    ul.rij_groot.r9x16 li.r3x4 img, ul.rij_groot.r9x16 li.r3x4 figcaption,
    /* ul.r4x3 li.r3x4 */
    ul.rij_groot.r4x3 li.r3x4 img, ul.rij_groot.r4x3 li.r3x4 figcaption,
    /* ul.r3x4 li.r3x4 */
    ul.rij_groot.r3x4 li.r3x4 img, ul.rij_groot.r3x4 li.r3x4 figcaption
    {
        height:auto !important;
        width:360px !important;
    }


    /* r1x1 ----------- */
    /* ul li.r1x1 */
    ul.rij_groot li.r1x1 img, ul.rij_groot li.r1x1 figcaption,
    /* ul.r1x1 li */
    ul.rij_groot.r1x1 li img, ul.rij_groot.r1x1 li figcaption,
    /* ul.r16x9 li.r3x4 */
    ul.rij_groot.r1x1 li.r1x1 img, ul.rij_groot.r1x1 li.r1x1 figcaption
    {
        height:auto !important;
        width:360px !important;
    }


    ul.rij_middel iframe {
        width:560px !important;
        height:314px !important;
    }


}



@media  (min-width: 812px) {/*  tablet landscape: > 1024px */
    .maand {
        /* box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2); UIT */
    }
}



@media  (min-width: 1024px) {
    ul.rij2_middel_max img {
        max-height:480px;

        max-width: 480px;
    }


    ul.rij2_middel_max figcaption {


        max-width: 480px;
    }



    article p {
        max-width:100ch;
    } /* was 120 */
    article li {
        max-width:90ch;
    } /* 10 minder dan p */
    .uitgelicht>ul {
        grid-template-columns: repeat(auto-fill,minmax(340px,  1fr )); /* 280 is 2*20 minder dan 320 */
    }
    #gebruikerscard {
        display: grid;
        grid-auto-rows: auto;
        grid-gap:20px;
        justify-content: space-around;
        grid-template-columns: repeat(auto-fill,minmax(640px,  1fr )); /* 280 is 2*20 minder dan 320 */
        /* 280px dus 2 * 280 = 560px + 20px in het midden is max breedte voordat er 2 plaatjes weergeven worden */
        padding: 0;
        margin: 0;
    }
    li.gebruiker {
        display: grid;
        grid-template-columns:  170px auto ;
        /* box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2); UIT */
        padding: 10px 0;
        margin:0;
    }
    /*
    #donatie .wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "donatie_trefpunt" "donatie_jaarlijks" "donatie_paletfonds";

        gap:20px;
    }
    */
    #collage-a,#collage-b,#collage-c,#collage-d,#collage-e,#collage-f {
        display:block;
    }

    #collage {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
        grid-auto-rows: minmax(360px, auto);
    }

}


@media  (min-width: 1080px) {
    .tegelpagina #quicklinkmenu {
        /*grid-area: quicklinkmenu;*/
        display:block;
    }



}

@media  (min-width: 1200px) {


    #logo_menu {
        grid-template-columns: 180px 1fr ;
        grid-template-areas: "tmgnlogo menu" ;
    }


}

@media  (min-width: 1366px) {

    #main_varia {
        grid-template-areas:   "varia main";
        grid-template-columns: 300px 1fr;
    }
    #customers #main_varia {
        grid-template-areas:   "varia main";
        grid-template-columns: 0px 1fr;
    }
    .editor #quicklinkmenu {
        /*grid-area: quicklinkmenu;*/
        display:block;
    }
    #catalogusleesmuseum  {
        display:block;
    }

}