/*
#42282f ==> chocolade
#74A558 ==> mintgroen
#d6ccad ==> zanderig geel
#dc9c76 ==> licht oranje
#d6655a ==> roze-oranje, zeg maar
*/

:root {
	--color-choc: #42282f;
	--color-mint: #74A558;
	--color-sand: #d6ccad;
	--color-orange-light: #dc9c76;
	--color-orange-pink: #d6655a;
	--color-green-dark: #004B00;
	--color-li-items: #b1adba;
	--color-prod-1: #ffdc15;
	--color-prod-2: #1577ff;
	--color-prod-3: #008000;
}

@font-face {
    font-family: 'Oswald-Regular';
    src: url('/assets/css/fonts/Oswald-Regular.eot');
    src: local('☺'), 
        url('/assets/css/fonts/Oswald-Regular.woff') format('woff'), 
        url('/assets/css/fonts/Oswald-Regular.ttf') format('truetype'), 
        url('/assets/css/fonts/Oswald-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'aodk';
	src:  url('/assets/css/fonts/aodk-1.5.eot?gh4hfg');
	src:  url('/assets/css/fonts/aodk-1.5.eot?gh4hfg#iefix') format('embedded-opentype'),
	  url('/assets/css/fonts/aodk-1.5.ttf?gh4hfg') format('truetype'),
	  url('/assets/css/fonts/aodk-1.5.woff?gh4hfg') format('woff'),
	  url('/assets/css/fonts/aodk-1.5.svg?gh4hfg#aodk') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}


@font-face {
    font-family: 'average';
    src: url('/assets/css/fonts/averagesans-regular-webfont.woff2') format('woff2'),
         url('/assets/css/fonts/averagesans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'josefin';
    src: url('/assets/css/fonts/josefinsans-regular-webfont.woff2') format('woff2'),
         url('/assets/css/fonts/josefinsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'alegreya';
    src: url('/assets/css/fonts/alegreya-variablefont_wght-webfont.woff2') format('woff2'),
         url('/assets/css/fonts/alegreya-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'aodk' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
	content: "\e986";
}
.icon-x:before {
	content: "\e904";
}
.icon-pijl-links:before {
	content: "\e905";
}
.icon-volgende:before {
	content: "\e909";
}
.icon-vorige:before {
	content: "\e90a";
}
  

  

*:not(dialog) {margin: 0; padding: 0;}
html, body {overflow-x: hidden}
body {
    color:#222; 
    background-color: var(--color-mint);
	font-family: Georgia, "Times New Roman", serif; 
	position: relative;
}

a {
	color: #640000; 
	text-decoration: none;
}
#tekst p a, #r1c1 li a, .complexenBijBeschrijving a, #infoblokje a, #blokjeBronnenEnLastmod a, ul.straatitems li a {
	border-bottom: 1px solid #640000;
	padding-bottom: 2px;
	transition: all 0.2s ease 0s;
}
#tekst p a:hover, .complexenBijBeschrijving a:hover, #infoblokje a:hover, #blokjeBronnenEnLastmod a:hover, ul.straatitems li a:hover {
	text-decoration: none;
	padding-bottom: 1px;
}
#tekst p.tekst-klein {
	font-size: 10px;
}
#tekst h3.uitleg {
	border-top: 1px dashed #fff;
	margin-top: 2em;
	padding-top: 2em;
}

a img {border: 0;}

.clear {clear: both;}
.verberg {display: none !important}
.toon {display: block !important}

h1 {font-family: "Oswald-Regular", sans-serif; font-size: 28px; margin-bottom: 1em;}
h2 {font-family: "Oswald-Regular", sans-serif; font-size: 20px; margin: 0.5em 0 0.3em;}
h3 {font-family: "Oswald-Regular", sans-serif; font-size: 16px; margin: 0.3em 0 0.2em; letter-spacing: 0.5px;}
h4 {font-family: "Oswald-Regular", sans-serif; font-size: 14px; margin: 0.3em 0 0.2em; letter-spacing: 1px;}

dd {padding-left: 1em;}

.flexrow {
	display: flex;
	flex-direction: row;
}

#tekst ul li > ul, #r1c4 ul {
    margin-left: 1em;
}
#r1c1 ul li, #r1c1 ol li {
	margin-bottom: 0.5em;
	line-height: 1.5em;
}
#r1c4 ul li:not(first-child) {
	margin-top: 5px;
}
#r1c4 ul.complexenBijBeschrijving {
	padding-top: 1em;
}
#r1c4 ul:not(.complexenBijBeschrijving) {
    margin-bottom: 1em;
}
#r1c4 ul:not(.complexenBijBeschrijving) li {
    line-height: 1.5em;
}

#header {
    font-family: "Oswald-Regular", sans-serif; 
    color: #eee;
    padding-left: 1em;
    background-color: var(--color-choc); 
    margin-bottom: 1em;
    border-bottom: 1px solid #999;
}
#header h1 {
    font-size: 26px; 
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 99%;
    overflow-x: hidden;
}

#topmenu {margin-top:7px; list-style: none; height: 1.5em; float: right;}
#topmenu li {display: inline-block; padding: 3px; margin-right: 10px; font-size: 13px; letter-spacing: 1px;
    vertical-align: bottom;
}
#topmenu li a {display: block; padding: 3px; font-weight: normal; text-decoration: none; line-height: 25px; color: #eee;}
#topmenu li.actief a {color: var(--color-orange-light);}



#footer {
    font-family: Courier, monospace; width: 100%; padding: 0.5em 0; border-top: 1px solid #999;
    background-color: var(--color-orange-light);
}
#footer p {
    margin: 0 1em 1em;
}
#footer a {
    color: #eee;
}

.tekstpag #tekst ul, .tekstpag #tekst ol {
	margin-left: 1em;
}
.tekstpag #tekst ul li, .tekstpag #tekst ol li {
	margin-bottom: .5em;
	line-height: 1.3em;
}
.tekstpag #tekst_inner {
	width: auto;
	max-width: 600px;
	margin: 0 auto;
	padding: 20px 10px;
	background-color: var(--color-sand);
}

dl.cookielist {
    margin-left: 1em;
    margin-bottom: 1em;
    border: 1px dotted #fff;
    border-width: 1px 0;
}
dl.cookielist dt {
    font-family: monospace;
}

/* formulier */
form.cccForm fieldset {border-width: 0; padding: 0; margin-bottom: 1em;}
form.cccForm > fieldset {margin-bottom: 0;}
form.cccForm li fieldset {display: inline;}
form.cccForm legend {font-style: italic; margin-left: 10px; padding: 0 5px; background: #fff;}
form.cccForm ul {list-style: none !important; margin: 0 !important; padding: 0 !important;}
form.cccForm li {margin: 0.5em 0;}
form.cccForm li > label {display: block; padding-right: 1em; max-width: 500px;}
form.cccForm textarea {vertical-align: top; padding: 5px;}
form.cccForm input[type="checkbox"] {vertical-align: middle; }
form.cccForm input[type="text"] {padding: 5px; }
form.cccForm input[type="email"] {padding: 5px; }
form.cccForm button[type="submit"] {padding: 5px; }
input.langveld, textarea.langveld {width: calc(100% - 15px); max-width: 500px;}


/* server-messages, oud */
.msg_error, .msg_notice, .msg_success {padding:.8em;padding-left: 40px;margin-bottom:1em;border:2px solid #ddd;}
.msg_error {background:#FBE3E4 url("/assets/pix/notice-alert.png") no-repeat 3px 5px;color:#8a1f11;border-color:#FBC2C4;}
.msg_notice {background:#C6D3EF url("/assets/pix/notice-info.png") no-repeat 3px 3px; color:#514721;border-color:#5AA2FF;}
.msg_success {background:#E6EFC2 url("/assets/pix/notice-ok.png") no-repeat 3px 3px;color:#264409;border-color:#C6D880;}
.msg_error a {color:#8a1f11;}
.msg_notice a {color:#514721;}
.msg_success a {color:#264409;}

/* server messages in their own bar */
div.messagebar {
	padding:.8em; 
	margin-bottom:1em; 
	margin-top:1em; 
	border:2px solid #ddd;
	display: flex;
}
div.messagebar svg {
	margin-right: 10px;
	flex-shrink: 0;
}
div.messagebar.message-success {
	background-color: #E6EFC2;
	color: #264409;
	border-color:#C6D880;
}
div.messagebar.message-success a {
	color: #264409;
}
div.messagebar.message-info {
	background-color: #C6D3EF;
	color:#162f60;
	border-color:#5AA2FF;
}
div.messagebar.message-info a {
	color:#162f60;
}
div.messagebar.message-error {
	background-color: #fff3cd;
	color: #664d03;
	border-color: #ffdd79;
}
div.messagebar.message-error a {
	color: #8a1f11;
}
div.messagebar.message-danger {
	background-color: #FBE3E4;
	color: #8a1f11;
	border-color:#FBC2C4;
}
div.messagebar.message-danger a {
	color: #8a1f11;
}



@media only screen and (max-device-width: 480px) {
    #header {
        width: 95% !important; padding: 5px;
        -webkit-border-top-left-radius: 15px; 
        -webkit-border-bottom-right-radius: 15px; 
        border-top-left-radius: 15px; 
        border-bottom-right-radius: 15px; 
    }
    #container {width: 100%; }
    h1 {font-size: 20px;}
    h2 {font-size: 17px;}
    h3 {font-size: 16px;}
    #header menu {margin: 4px 0;}
    #header menu li {
        float: none;
        margin-right: -1px;
        font-size: 90%;
    }
    #header menu li a {padding: 3px 0 0; text-decoration: none;}
}


@media screen and (max-width: 900px) {
	.nietOpMobiel {
		display: none !important;
	}
}
@media screen and (min-width: 901px) {
	.nietOpDesktop {
		display: none !important;
	}
}

a.ext::after, .oip_media a:after {
	font-family: 'aodk' !important;
	content: "\e906";
}


#header {margin-bottom: 0}
#subheader {text-align: right;}
#subheader h2 {
	float: left; 
	text-align: left; 
	margin-left: 10px;
	line-height: 35px;
	width: calc(100% - 80px);
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}
#prodmenu {
	padding: 5px; list-style: none; margin: 0;
	background-color: #000;
	width: 80%;
	max-width: 280px;
	position: absolute;
	z-index: 100;
	text-align: left;
	left: calc(-80% - 5px);
	transition: left .2s ease-in;
	border: 1px solid silver;
	border-width: 0 1px 1px 0;
	border-radius: 0 0 10px 0;
	top: 0px;
}
#prodmenu.inbeeld {
	left: 0;
}
#prodmenu a.actief, #prodmenu a:hover {color: #fff}
#prodmenu li a {
	padding-left: 15px;
	display: block;
	color: var(--color-choc);
	font-family: "Oswald-Regular", sans-serif;
	letter-spacing: 1px;
    font-size: 16px;
}
#prodmenu li a.prodkeuze {
	background: url('/assets/pix/pins/kaartikonen-sprite.png?v=0.2') 0 0 / 30px 300px no-repeat; /* 60% van werkelijke maten */
}
#prodmenu li a.prodkeuze.keuze0  {
	background: none;
}
#prodmenu li a.prodkeuze.keuze1  {
	background-position: -9px -5px;
}
#prodmenu li a.prodkeuze.keuze2  {
	background-position: -9px -35px;
}
#prodmenu li a.prodkeuze.keuze3 {
	background-position: -9px -65px;
}
#prodmenu li {
	display: block;
	height: 35px;
	padding: 5px 5px 5px 10px;
	margin: 5px 0;
	background-color: var(--color-mint);
	line-height: 35px;
}
button#prodmenuknop {
	width: 40px;
	height: 40px;
	margin: 5px 5px 5px 0;
	border-width: 0;
	background-color: transparent;
}

#prodmenu a.catkeuze, #prodmenu a.geenkeuze {
	background-image: none;
	padding-left: 0px;
}

#prodmenu span.gaNaarZoek {
	width: calc(100% - 22px - 10px);
	height: 35px;
	margin-bottom: -3px;
	display: inline-block;
    font-size: 16px;
	cursor: pointer;
}
#prodmenu span.gaNaarZoek.actief, #prodmenu span.gaNaarZoek:hover, #prodmenu span.gaNaarZoek:focus {
    color: #eee;
}
#prodmenu span.gaNaarZoek .nietOpDesktop {
	font-family: "Oswald-Regular",sans-serif;
	letter-spacing: 1px;
	font-size: 16px;
	padding-left: 5px;
}
#prodmenu li.sep {
	height: 1px;
	padding: 0;
	background-color: inherit;
	line-height: 2px;
}

@media screen and (min-width: 901px) {
	#prodmenu {padding: 5px 1em; position: static; background-color: transparent; width: 100%; max-width: 100%; border-width: 0}
	#prodmenu a {background-size: 12px 15px; font-size: inherit;}
	#prodmenu li {
		display: inline-block; width: auto; padding: 0 25px 0 0; height: auto; background-color: transparent;
		line-height: 20px;
	}
	#prodmenu li.laatsteOpDesktop {
	    padding-right: 0;
	}
	#prodmenuknop, #subheader h2 {display: none}
	#prodmenu span.gaNaarZoek {height: 20px;}
	#prodmenu li a.prodkeuze.keuze1  {
		background-position: -9px -12px;
	}
	#prodmenu li a.prodkeuze.keuze2  {
		background-position: -9px -42px;
	}
	#prodmenu li a.prodkeuze.keuze3 {
		background-position: -9px -72px;
	}
}

body #container {
    padding: 10px 5px; 
    background-color: #222; 
    border-top: 1px solid #bbb; 
    position: relative;
	/* min-height: calc(100vh - 50px - 4px); 100vh - subheader - paddingVanContainer */
}
@media (min-width: 901px) {
	body.kaart #tekst {
	   min-height: calc(100vh - 655px); /* 100vh - header - subheader - paddingVanContainer  -footer - map - share - sa - zoek*/
	}
	body.tekstpag #tekst {
	   min-height: calc(100vh - 45px - 41px - 20px - 100px); /* 100vh - header - subheader - paddingVanContainer  -footer */
	}
}


#map {
	width:100%; 
	height:200px; 
	float: left;
}
#map.metTransitie {
	transition: height 0.2s ease-out;
}
#tekst {
	color: #111;
	width: 100%; 
	background-color: var(--color-orange-light);
	/* display: table;
	clear: both;  */
}
div#footer {
	background-color: #111;
}
div#footer p {
	margin: 2em 5px;
}
div#footer, #div footer a {
	color: #aaa !important;
}
@media (min-width: 901px) {
	div#footer p {
	    margin: 2em 15px;
	}
}

#map.metGrabber {margin-bottom: 15px;}
#kaartgrabber {
	margin: 0;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #ccc;
	height: 8px;
	background-color: #f5f5f5;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGAgMAAACHnudVAAAACVBMVEWmpqb%2F%2F%2F%2F%2B%2Fv7DQT26AAAAFUlEQVQI12MAgdDIAAgdCqHDIicAAB4GAziOJ42xAAAAAElFTkSuQmCC"), 
	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGAgMAAACHnudVAAAACVBMVEWmpqb%2F%2F%2F%2F%2B%2Fv7DQT26AAAAFUlEQVQI12MAgdDIAAgdCqHDIicAAB4GAziOJ42xAAAAAElFTkSuQmCC");
	background-repeat: no-repeat;
	background-position: 25% 0, 75% 0;
	cursor: row-resize;
	position: relative;
	top: 200px;
}
.isTouch #kaartgrabber {
	height: 13px;
	background-position: 25% 3px, 75% 3px;
}
.knopOverKaart {
	position: absolute; 
	right: 7px; 
	padding: 6px; 
	background-color: var(--color-sand); 
	border: 2px solid var(--color-orange-pink); 
	border-radius: 2px; 
	cursor: pointer; 
}
#paneelknop {
	z-index: 101; /* over het paneel heen */ 
	height: 24px; 
	width: 25px;
	padding-left: 5px; 
	top: 12px;
	font-size: 27px;
	color: #777;
	line-height: 25px;
}
#paneelknop.geopend {
	-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);
}
#kaartknop, #layerknop {
	top: 60px;
	z-index: 100; 
	height: 26px; 
	width: 26px; 
	background-color: var(--color-sand) ;
	padding-left: 4px;
	padding-top: 4px;
}
#kaartknop span, #layerknop span {
	background-color: #777;
	border-radius: 15px;
	width: 28px;
	height: 24px;
	padding-top: 4px;
	display: inline-block;
	color: var(--color-sand);
	text-align: center;
	font-size: 20px;
}
#kaartknop.icon-expand span::after {
	content: "\e989";
}
#kaartknop.icon-contract span::after {
	content: "\e98a";
}
#layerknop {
	top: 110px;
}
#layerknop span::after {
	content: "\e90c";
}

select {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(224,224,224,1);
	background-repeat: no-repeat;
	background-position: left;
	border-width: 1px;
	border-radius: 0;
	border-color: #222;
}
select optgroup {
	background-color: #bbb;
}
select option {
	background-color: #fff;
	padding: 5px;
}
select option:hover {
	background-color: #ccc;
	color: #fff;
}

/* warpper oa tbv laag met custom pijltje */
div.iniselboxwrapper, div.selboxwrapper {
	display: block;
	float: left;
	width: 50px;
	overflow-x: hidden;
	height: fit-content;
	position: relative;
}
div.iniselboxwrapper {
	margin-right: 3px;
}
div.selboxwrapper {
	width: 200px;
	min-width: 160px; max-width: calc(100% - 50px - 40px - 10px); 
}
div.iniselboxwrapper select.inifilter {
	width: 150px !important; /* om ellende op safari met lage hoogte bij geringe breedte te omzeilen */
}
div.iniselboxwrapper span, div.selboxwrapper span {
	position: absolute;
	width: 25px;
	height: 30px;
	background-color: #666;
	background-image: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 17.898C9 18.972 10.2649 19.546 11.0731 18.8388L17.3838 13.3169C18.1806 12.6197 18.1806 11.3801 17.3838 10.6829L11.0731 5.16108C10.2649 4.45388 9 5.02785 9 6.1018V17.898Z" fill="%23ddd" transform="rotate(90 12,12)"/></svg>');
	background-repeat: no-repeat;
	background-position: right 1px top 3px;
	background-size: 20px;
	right: 0;
	top: 1px;
	pointer-events: none;
	border-right: 1px solid #222;
	border-left: 3px solid rgba(224,224,224,1);
}

input.knop, button.knop {
	padding: 5px;
	height: 32px;
	-webkit-appearance: none;
	border: 1px solid #333;
	border-radius: 0;
	font-size: 0.9em;
	background-color: rgba(224,224,224,1);
}
input.knop:hover, input.knop:active, button.knop:hover, button.knop:active {
	background-color: rgba(242,242,242,1);
}
#paneel {
	position: absolute; 
	right: -500px; 
	width: 33%; 
	min-width:300px; 
	max-width: 500px; 
	height:700px; 
	overflow-y: hidden;
	z-index: 100; 
	transition: right 0.2s ease-in;
	display: none;
}
#paneel.zonderTransitie {
	transition: none;
}
#paneel div.lst {
	height: 666px; overflow-x: hidden; overflow-y: scroll; border: 2px solid var(--color-green-dark); border-top: 0; 
	background-color: var(--color-mint); padding-left: 5px;
}
div#periode, div#tools {height: 666px; background-color: var(--color-mint); padding: 5px;}
div#periode p, div#tools p {margin: 1em 0;}
#architecten a, #stijlen a, #functies a {display: block; width: 380px; padding: 1px 0;}
#architecten li, #stijlen li, #functies li {padding: 1px 0;}
div.lst li:hover, div.lst li.huidig {color: #eee; background-color: var(--color-green-dark); cursor: pointer;}
div.lst li {color: #111;}
.lst input[type="button"] {padding: 3px;}

#touchselectbox {border: 2px solid var(--color-green-dark); background-color: var(--color-mint); padding: 0 5px 5px;}
#touchselectbox h2 {margin: 0px; display: inline;}
#touchselectbox input, #touchselectbox button {padding: 5px;}
#touchselectbox input, #touchselectbox button, #touchselectbox select {min-height: 30px !important;}
#touchselectbox {padding-top: 10px;}
#touchselectbox fieldset {border-width: 0; padding: 15px 0; }
#touchselectbox select {width: 200px; line-height: 30px; padding-left: 2px;}
#touchselectbox select.inifilter {padding-left: 4px; }
#touchselectbox select.metInifilter {width: 100%; }
#touchselectbox button:not(.selectie) {float: right;}
#touchselectbox input.selectie, #touchselectbox button.selectie {margin: 0 10px 15px 0;}

select#buurten {
	width: 200px; 
	line-height: 30px; 
	padding-left: 2px;
}
div#tools div.selboxwrapper {
	margin-right: 3px;
}

/* ooit nog buttons van maken? */
input.knop-mon, input.knop-loc, input.knop-weg {
	background-repeat: no-repeat;
	padding-left: 20px !important;
}
input.knop-mon {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 3" width="20" height="30"><rect fill="white" width="2" height="2"/><path fill="%23333" d="m 0,0 2,0 -2,2 1,1 1,-1 z"/></svg>');
	background-size: 15px 20px;
	background-position: 2px 6px;
}
button.knop.knop-loc {
	padding-left: 3px;
}
button.knop.knop-loc:before {
	font-family: 'aodk' !important;
	content: "\e907"; /* pinikoon */
	font-size: 13px;
	padding-right: 4px;
}
input.knop-weg {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="167" height="226.5" viewBox="0 0 167 226.5"><g transform="translate(1.0698663,-65.771083)"><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.564999" width="79.375" height="17.386906" x="35.151787" y="201.46132" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.396532" width="38.722038" height="17.555372" x="123.51398" y="201.37709" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.353617" width="31.915274" height="16.938631" x="20.730022" y="182.6113" transform="matrix(0.80370592,0.59502672,-0.08173476,0.99665412,0,0)" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.564999" width="79.375" height="17.386906" x="57.58839" y="192.64484" transform="rotate(-7.9430138)" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.547041" width="74.499519" height="17.365904" x="25.660261" y="169.39746" transform="matrix(0.98865571,0.15019951,-0.13229302,0.99121065,0,0)" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.564999" width="79.375" height="17.386906" x="82.209824" y="225.65179" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.546686" width="74.312897" height="17.386906" x="-0.79652333" y="225.65178" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.564999" width="79.375" height="17.386906" x="36.625877" y="249.84225" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.388839" width="37.217827" height="17.563065" x="124.98428" y="249.75418" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.338928" width="28.19631" height="17.612976" x="-0.15084343" y="249.72922" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.564999" width="79.375" height="17.386906" x="83.116814" y="274.6377" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.548931" width="74.855354" height="17.402973" x="-0.42394644" y="274.62967" /><circle style="fill:%23ffffff;" cx="61.610123" cy="191.01151" r="45.82" /><circle style="fill:%234d4d4d;" cx="61.226189" cy="190.49403" r="32.5" /><rect style="fill:%234d4d4d;stroke:%23170000;stroke-width:0.564999;stroke-opacity:1" width="3.0238097" height="127.75595" x="167.47708" y="-54.342377" transform="rotate(40.051115)"/></g></svg>');
	background-size: 18px 20px;
	background-position: 1px 3px;
}
button.knop-wis {
	float: none !important;
	color: #333;
}
button.knop-wis:before {
	font-family: 'aodk' !important;
	content: "\e904"; /* icon-x */
	font-size: 10px;
	padding-right: 5px;
}

/* tabmenu in desktop-paneel */
.tabmenu {list-style: none; padding: 0 0 0 0px; margin: 0; border-bottom: 2px solid var(--color-green-dark); height: 30px;}
.tabmenu li {
	float: left; 
	margin: 0 2px; 
	border: 2px solid var(--color-green-dark); 
	-webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; 
	-webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; 
	height: 28px;}
.tabmenu li img {border: 0;}
.tabmenu li a {display: block; padding: 5px; font-size: 13px;}
.tabmenu li a:focus, ul.tabmenu li a:hover {background-color: transparent !important;}
.tabmenu li.actief {background-color: var(--color-mint); border-bottom: 2px solid var(--color-mint); }
.tabmenu li.inactief {background-color: var(--color-green-dark);}
.tabmenu li.inactief:hover {background-color: var(--color-mint);}
.tabmenu li.inactief:hover a {color: #fff;}
.tabmenu a {color: #ccc; text-decoration: none; font-family: sans-serif; font-weight: bold;}
.tabmenu li.actief a {color: #111;}
.tabmenu li a.knop-tools {
	font-size: 20px;
	line-height: 18px;
	padding-left: 7px;
	padding-right: 7px;
}

/* swiper nav-knoppen */
.swiper .navbutton-prev:before {
	font-family: 'aodk' !important;
	content: "\e902";
}
.swiper .navbutton-next:before {
	font-family: 'aodk' !important;
	content: "\e901";
}

/* de fotobalk */
.kleineslider {
	clear: both;
	margin-bottom: 10px;
	padding-top: 10px;
	background-color: #383838;
	height: 0;
	transition: height 0.2s ease-in;
}
.kleineslider img.foto {
	height: 225px;
	width: auto;
}
.kleineslider.metPlaten {
	height: 229px;
	background: #383838 url("data:image/svg+xml;utf8,<svg version='1.0' xmlns='http://www.w3.org/2000/svg' width='450' height='300'><rect width='450' height='300'/><g stroke='%23222' stroke-width='30'><path d='M 98,105 v 90 m -45,-45 h 90' transform='rotate(45 98,150)'/><path d='M 225,105 v 90 m -45,-45 h 90' transform='rotate(45 225,150)'/><path d='M 352,105 v 90 m -45,-45 h 90' transform='rotate(45 352,150)'/></g></svg>") repeat-x;
	background-size: 343px 239px;
}
.kleineslider .navbutton-next, .kleineslider .navbutton-prev {
	width: 40px; 
	height: 40px; 
	position: absolute; 
	top: calc(50% - 20px); 
	background-size: 30px;
	opacity: 0.6;
	z-index: 2;
	color: #fff;
	font-size: 35px;
}
.kleineslider .navbutton-next:hover, .kleineslider .navbutton-prev:hover {
	opacity: 1;
	cursor: pointer;
}
.kleineslider .navbutton-prev {
	left: 5px;
}
.kleineslider .navbutton-next {
	right: 5px;
}
.kleineslider .swiper-slide {
	width: fit-content;
}
.kleineslider .swiper-slide picture {
	margin: 0 5px;
}
.kleineslider .swiper-slide:first-child picture {
	margin-left: 0;
}
.kleineslider .swiper-slide:last-child picture {
	margin-right: 0;
}
@media (min-width: 800px) {
	.kleineslider img.foto {
		height: 300px;
	}
	.kleineslider.metPlaten {
		height: 304px;
		background-size: 456px 314px;
	}
}

/* de fullscreen slider */
div.groteslider {
	width: 100vw;
	height: 100%; /* NB: hier geen vh gebruiken, wordt te hoog op mobiel */
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	overflow-x: hidden;
	z-index: 1000;
	--swiper-theme-color: #eee;
}
div.groteslider .bovenbalk {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 100vw;
	height: 50px;
	background-color: rgba(0,0,0,0.8);
	transition: top 0.2s ease-in;
}
div.groteslider.zonderUI .bovenbalk {
	top: -50px;
}
div.groteslider .bovenbalk .sluitknop {
	position: absolute;
	right: 10px;
	top: 5px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	transition: opacity 0.1s ease-in;
	opacity: 0.6;
}
div.groteslider .bovenbalk .sluitknop:before {
	font-family: 'aodk' !important;
	content: "\e903";
	color: #fff;
	font-size: 40px;
}
div.groteslider .bovenbalk .sluitknop:hover {
	opacity: 1;
}
div.groteslider .bovenbalk .paging {
	position: absolute;
	top: 10px;
	left: 10px;
	color: #eee;
	width: fit-content;
	height: fit-content;
}
div.groteslider .swiper {
	height: 100%; /* NB: hier geen vh gebruiken, wordt te hoog op mobiel */
}
div.groteslider .swiper-slide {
	position: relative;
	height: 100%; /* NB: hier geen vh gebruiken, wordt te hoog op mobiel */
	width: 100vw;
	text-align: center;
	/* also center slide content vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
div.groteslider .swiper-slide img {
	max-height: 100%;
	max-width: 100vw;
	display: block;
}
div.groteslider .swiper-slide .caption {
	position: absolute;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	padding: 10px calc((100vw - min(100vw, 1500px)) / 2);
	width: calc(100vw - (100vw - min(100vw, 1500px)));
	height: fit-content;
	color: #eee;
}
div.groteslider .swiper-slide .caption.metTransitie {
	transition: bottom 0.2s ease-in;
}
div.groteslider .navbutton-next, div.groteslider .navbutton-prev {
	position: absolute;
	top: calc((100% - 50px) / 2);
	width: 50px;
	height: 50px;
	opacity: 0.6;
	background-size: 40px;
	z-index: 3;
	cursor: pointer;
	color: #fff;
	font-size: 40px;
}
.caption a.saalink {
	color: #fff;
	text-decoration: underline;
}
div.groteslider .navbutton-next:hover, div.groteslider .navbutton-prev:hover {
	opacity: 1;
}
div.groteslider .navbutton-prev {
	left: 5px;
	transition: left 0.2s ease-in, opacity 0.1s ease-in;
}
div.groteslider.zonderUI .navbutton-prev {
	left: -50px;
}
div.groteslider .navbutton-next {
	right: 5px;
	transition: right 0.2s ease-in, opacity 0.1s ease-in;
}
div.groteslider.zonderUI .navbutton-next {
	right: -50px;
}
a.licentie {
	color: #fff;
	text-decoration: none;
}
a.licentie:hover {
	text-decoration: underline;
}

/* simpele berichtentoner */
div#berichtbox {
	transition: right 0.2s ease-in;
	width: 200px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 0;right: -210px;
	border: 1px solid silver;
	z-index: 125; 
	padding-left: 5px;
}
div#berichtbox.toon {
	right: 0px;
}
div#berichtbox.neutraal {
	background-color: navy;
}
div#berichtbox.alarm {
	background-color: red;
}

/* bericht in modal venster */
div#modalBg {
	background-color: rgba(0,0,0,0.6);
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	z-index: 125;
}
div#modalBox {
	background-color: #008000;
	color: var(--color-choc);
	width: 33%;
	min-width: 300px;
	max-width: 500px;
	position: fixed;
	z-index: 126;
	top: 100px;
	max-height: calc(100vh - 120px);
	display: none;
	box-shadow: #000 1px 1px 5px;
}
div#modalBox header {
	background-color: var(--color-choc);
	color: #eee;
	font-family: "Oswald Regular", sans-serif;
	font-size: 20px;
	padding: 5px 10px;
}
div#modalBox header .sluitknop::before {
	font-family: 'aodk' !important;
	content: "\e903";
}
div#modalBox header .sluitknop {
	float: right;
	cursor: pointer;
}
div#modalBox article {
	padding: 10px;
}

/* mastodon-modal */
.mstdnModal {
	padding: 5px;
	background-color: var(--color-orange-light);
	list-style: none;
	font-size: 1.2em;
}
.mstdnModal li {
	margin-bottom: 1em;
}
.mstdnModal li label {
	display: block;
	margin-bottom: 1em;
}
.mstdnModal li input[type=text] {
	height: 20px;
	padding: 6px;
	width: 300px;
	max-width: fit-content;
	font-size: 18px;
}
.mstdnModal li.laatste  {
	text-align: right;
}
.mstdnModal li.feedback p {
	background-color: var(--color-orange-pink);
	padding: 5px;
}
.mstdnModal .knop  {
	margin-bottom: 5px;
}

/* zoeken (de type-ahead boxen in het paneel) */
.zoekbox {
	margin: 3px 0 0 2px; 
	vertical-align: top; 
	position: relative; 
	height: 30px;
}
.zoekbox input {
	border: 1px solid #999; border-right: 0; border-radius: 0; 
	height: 25px; position: absolute; top: 0; 
	width: 150px; 
	padding: 0 2px;
	font-size : 15px;
}
.zoekbox span {
	border: 1px solid #999; border-left: 0; background-color: #bbb; color: #fff; height: 25px; 
	display: inline-block; width: 25px; text-align: center; font-family: Arial, sans-serif; 
	cursor: pointer; position: absolute; top: 0; left: 154px;
	line-height: 24px;
	font-size: 14px;
}
input[type="search"] {
	border-radius: 0 !important;
	-webkit-appearance: none;
}

/* het infowindowtje op de kaart */
.maplibregl-popup-close-button {
	width: 30px;
	height: 30px;
	font-size: 20px;
	color: #999;
	border-radius: 0 3px 0 5px;
}
.maplibregl-popup-close-button:hover {
	color: #333;
}
.maplibregl-popup-content {
	padding-top: 10px;
}
.popup h4 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px; 
	margin-bottom: 2px; 
	/* margin-right: 20px;  */
	/* white-space: nowrap;  */
	cursor: pointer;
	line-height: 1.5em;
	padding-left: 25px;
	padding-right: 10px;
}
.popup h4 span {
	display: inline-block;
	width: 18px;
	height: 20px;
	padding: 3px;
	margin-right: 5px;
	position: absolute;
	left: 5px;
	background-repeat: no-repeat;
	background-size: 14px 20px;
	background-position-x: 5px;
}
.popup h4 span.pin-1 {
	background-image: url(/assets/pix/pins/1-1.png);
}
.popup h4 span.pin-1.weg {
	background-image: url(/assets/pix/pins/1-2.png);
}
.popup h4 span.pin-2 {
	background-image: url(/assets/pix/pins/2-1.png);
}
.popup h4 span.pin-2.weg {
	background-image: url(/assets/pix/pins/2-2.png);
}
.popup h4 span.pin-3 {
	background-image: url(/assets/pix/pins/3-1.png);
}
.popup h4 span.pin-3.weg {
	background-image: url(/assets/pix/pins/3-2.png);
}
.popup h4 span.pin-complex {
	background-image: url(/assets/pix/pins/complex.png);
	background-size: 18px 18px;
	background-position-y: 2px;
}
.popup img {
	display: block;
	margin: 10px auto 0;
	max-width: 100%;
	border: 1px solid #fff;
	border-radius: 5px;
}

/* tekstblokken */
#tekst ul.straatitems {margin-left: 1em; padding: 5px;}
#tekst ul.straatitems li {margin: 0.7em 0; line-height: 2.1em}
#tekst ul.straatitems li::marker {color: #eee}
@media ( min-width: 901px ) { 
    #tekst ul.straatitems li {line-height: 1.6em}
}
#tekst p, #tekst div div {margin-bottom: 1em;}
#tekst {
	border-collapse:separate;
	border-spacing:0px;
}

/* grid-indeling tekstvak */
#r1 {
    display: grid;
}
#r1c1, #r1c2, #r1c3, #r1c4 {
	vertical-align: top;
	padding: 5px;
}
@media ( min-width: 901px ) and (max-width: 1050px) { 
    #r1 {
	    /* grid-template-columns: 1fr 1fr 350px; */
	    grid-template-columns: minmax(350px, 1fr) 1fr 1fr;
	}
}
@media ( min-width: 1051px ) { 
    #r1 {
	    /* grid-template-columns: 1fr 1fr 350px; */
	    grid-template-columns: minmax(350px, 1fr) 1fr 350px;
	}
}
#r1c1 {order: 1}
#r1c2 {order: 3}
#r1c3 {order: 4}
#r1c4 {order: 2}
#r1.item #r1c2 {order: 4}
#r1.item #r1c3 {order: 3}

@media (max-width: 900px) {
	#r1c1 {margin-bottom: 0 !important;}
}

@media (min-width: 901px) { /* was 541 */
	#r1c1 p, #r1c1 li, #tekst .oip_media, #r1c1 blockquote {
		max-width: 500px;
	}
	#r1c1, #r1c2, #r1c3, #r1c4 {
		border: 1px dashed #deb9a2;
		padding: 15px;
	}
	#r1c1 {
		padding-right: 1em;
		border-width: 0 2px 0 0;
		order: 2;
        /* grid-area: 1 / 2 / span 1 / span 1; */ 
	}
	#r1c2 {
		border-width: 0;
        order: 3;
        /* grid-area: 1 / 2 / span 1 / span 1; */ 
	}
	#r1c3 {
		border-width: 0 0 0 2px;
        order: 4;
        grid-area: 1 / 3 / span 2 / span 1; 
	}
	#r1c4 {
		border-width: 0 2px 0 0;
		order: 1;
        grid-area: 1 / 1 / span 2 / span 1; 
	}
	#r1c3 > *:first-child {
		border-width: 0px !important;
    	padding-top: 0em !important;
	}
	#r1.item #r1c1 {border-width : 0}
	#r1.item #r1c2 {border-width : 0}
	#r1.item #r1c3 {border-width : 0 0 0 2px}
	#r1.item #r1c4 {border-width : 0 2px 0 0}
}

.tekstpag #r1c1 {order: 1}
.tekstpag #r1c2 {order: 3}
.tekstpag #r1c3 {order: 2; border: 2px dashed #deb9a2; border-width: 2px 0;}
@media (min-width: 901px) { /* was 541 */
	.tekstpag #r1c2 { order: 2;}
	.tekstpag #r1c3 { order: 3; border-width: 0 0 0 2px;}
}



#r1c1 hr + p {margin-top: 1em}
#r1c1 ul, #r1c1 ol {
	padding-left: 1em;
	margin-bottom: 1em;
}
#r1c1 ol {
	padding-left: 2em;
}
p.adressen {font-variant: small-caps; font-size: 90%;}
#tekst p {
	line-height: 1.5em;
}
#tekst blockquote {
	background: #eee url('/assets/pix/krantenpapier.jpg');
	color: #222;
	border-radius: 3px;
	padding: 15px;
	margin-bottom: 1em;
}
#tekst blockquote p:last-child {
	margin-bottom: 0;
}
body.prod_1 blockquote {
	/* @import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@500&display=swap'); */
	font-family: 'alegreya', serif;
	font-size: 108%;
}
body.prod_2 blockquote {
	/* @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap'); */
	font-family: 'josefin', sans-serif;
}
body.prod_3 blockquote {
	/* @import url('https://fonts.googleapis.com/css2?family=Average+Sans&display=swap'); */
	font-family: 'average', sans-serif;
}


#infoblokje dt, #blokjeBronnenEnLastmod dt {font-variant: small-caps; font-size: 90%; color: #333;}
#infoblokje dd, #blokjeBronnenEnLastmod dd {max-width: 500px; margin-left: 1em;}
#infoblokje dd p, #blokjeBronnenEnLastmod dd p {margin-bottom: 1em;}

#infoblokje {
	margin-bottom: 1em;
}
#r1c2 #blokjeBronnenEnLastmod, #blokjeReacties {
	border-top: 1px dashed #deb9a2;
	padding-top: 1em;
}
#blokjeBronnenEnLastmod ul li {
	padding: 5px 0;
}
#r1c3 > *:first-child {
	border-top: 1px dashed #deb9a2;
    padding-top: 1em;
}
#r1c2 h3 {
	font-weight: 200;
}
#blokjeReacties {
	margin-top: 2em;
}
p#rctfrmfb {
	padding: 5px;
	color: #fff;
}
p#rctfrmfb.success {
	background-color: #008000;
}
p#rctfrmfb.fail {
	background-color: red;
}

/* automatisch schalende youtube- en vimeo-video */
.ytbox, .vimeobox {
	max-width: 600px;
	/* margin: 0px auto; */
}
.ytbox > div, .vimeobox > div {
	position: relative;
	padding-bottom: 75%;
	height: 0px;
}
.ytbox iframe, .vimeobox iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.ytbox.noconsent, .vimeobox.noconsent {
	height: 300px;
	background-color: #999;
	cursor: pointer;
	text-align: center;
}
.ytbox.noconsent:before, .vimeobox.noconsent:before {
	font-family: 'aodk' !important;
	content: "\e908";
	font-size: 100px;
	line-height: 300px;
	transition: all ease 0.3s;
}
.ytbox.noconsent:hover:before , .vimeobox.noconsent:hover:before {
	font-size: 150px;
	line-height: 300px;
}
/* openbeelden-video */
#tekst .oip_media {
	background-color: #111;
	border: 1px solid #000;
	font-size: 95%;
	padding: 2px;
	color: #eee;
}
#tekst .oip_media video {
	width: 100%;
}
#tekst .oip_media a {
	color: #aaa !important;
	border-bottom: 0 !important;
}
#tekst .oip_media a:hover {
	color: #eee !important;
}
#tekst .obinfoknop {
	width: 14px; 
	height: 20px; 
	border-radius: 10px;
	border-width: 1px;
	display: inline-block;
	cursor: pointer;
	padding: 0 3px;
	margin-bottom: -3px;
	text-align: center;
	background-color: #626285;
}
#tekst .obinfoknop:hover {
	background-color: #46465F;
}
#tekst .oip_media div.caption {
	margin-bottom: 0;
	line-height: 1.5em;
}

/* caption in de tekst */
p.videocaption {
	font-style: italic;
}

/* allerlei zie-ook-lijsten */
ul.zieooks, menu.index, ul.zoekhits {
	list-style: none;
	margin-bottom: 0.5em;
}
menu.index {
	max-width: 300px;
}
ul.cats {
	list-style: none;
	margin-bottom: 0.5em;
	float: left;
	margin-right: 10px;
}
ul.zieooks li, ul.cats li, menu.index li, ul.zoekhits li {
	margin-bottom: 10px;
}
ul.zieooks li a, ul.cats li a, menu.index li a, ul.zoekhits li a {
	display: block;
	text-decoration: none;
	padding: 10px;
	border: 1px solid #fff !important;
	width: 275px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #111 !important; /* 222 is net donker genoeg voor toegankelijkheid */
}
ul.zieooks li:hover a, ul.cats li:hover a, menu.index li:hover a, ul.zoekhits li:hover a,
ul.zieooks li a:focus, ul.cats li a:focus, menu.index li a:focus, ul.zoekhits li a:focus {
	color: #fff !important; 
	background-color: var(--color-green-dark) !important;
}
ul.zieooks.items li a, menu.index li a, ul.zoekhits.items li a, div#blokjeVorigeVolgende div.item a {
	background-color: var(--color-li-items);
}
ul.zieooks.personen li a, ul.cats.personen li a, menu.index li.personen a, ul.zoekhits.personen li a, div#blokjeVorigeVolgende div.persoon a {
	background-color: #a69e95;
}
ul.zieooks.complexen li a, ul.cats.complexen li a, menu.index li.complexen a, ul.zoekhits.complexen li a, div#blokjeVorigeVolgende div.complex a {
	background-color: #a6a5b0;
}
ul.zieooks.themas li a, ul.cats.themas li a, menu.index li.themas a, ul.zoekhits.themas li a, div#blokjeVorigeVolgende div.thema a  {
	background-color: #b1b9c5;
}
ul.zieooks.stijlen li a, ul.cats.stijlen li a, menu.index li.stijlen a, ul.zoekhits.stijlen li a, div#blokjeVorigeVolgende div.stijl a  {
	background-color: #908895;
}
div.catlijst {
	padding: 1em;
	overflow-y: auto;
}
ul.zieooks.items li.metProdikoon a, menu.indexmenu li a.prodkeuze, ul.zoekhits.items li.metProdikoon a {
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
ul.zieooks.items li.metProdikoon.prod_1 a, menu.indexmenu li a.prodkeuze.keuze1, ul.zoekhits.items li.metProdikoon.prod_1 a {
    background-image: linear-gradient(var(--color-prod-1), var(--color-prod-1)) ;
}
ul.zieooks.items li.metProdikoon.prod_2 a, menu.indexmenu li a.prodkeuze.keuze2, ul.zoekhits.items li.metProdikoon.prod_2 a {
    background-image: linear-gradient(var(--color-prod-2), var(--color-prod-2)) ;
}
ul.zieooks.items li.metProdikoon.prod_3 a, menu.indexmenu li a.prodkeuze.keuze3, ul.zoekhits.items li.metProdikoon.prod_3 a {
    background-image: linear-gradient(var(--color-prod-3), var(--color-prod-3)) ;
}

ul.zieooks.uitklaplijst li:first-child span {
	display: block;
	padding: 10px;
	border: 1px solid #fff !important;
	background-color: var(--color-li-items);
	cursor: pointer;
	position: relative;
	width: 275px;
}
ul.zieooks.uitklaplijst li+li {
	display: none;
}
ul.zieooks.uitklaplijst.toonAlles li+li {
	display: block;
}
i.pijl {
	border: solid #111;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	position: absolute;
	right: 10px;
	top: 13px
}
i.pijl.omlaag {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
i.pijl.omhoog {
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top: 14px;
}
ul.zieooks.uitklaplijst li:first-child:hover * {
	background-color: var(--color-green-dark);
	color: #fff !important; 
	border-color: #fff;
}


/* vorige, volgende */
#r1c3 div#blokjeVorigeVolgende {
	border-top: 1px dashed #deb9a2;
    padding-top: 1em;
    margin-top: 1em;
	max-width: calc(100vw - 20px); /* zelfde als zie-ooks */
}
div#blokjeVorigeVolgende div {
	width: 295px;
	margin-bottom: 2px;
}
div#blokjeVorigeVolgende div+div {
	margin-top: 8px;
}
div#blokjeVorigeVolgende div a {
	display: inline-block;
	text-decoration: none !important;
	padding: 10px 20px;
	color: #111 !important; 
	width: calc(100% - 42px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid #fff !important;
	background-repeat:  no-repeat;
    background-size: 5px 5px;
	background-position: left top;
	position: relative;
}
div#blokjeVorigeVolgende div a:hover {
	color: #fff !important; 
	background-color: var(--color-green-dark);
}
div#blokjeVorigeVolgende div a span.indic {
	width: 20px;
	display: inline-block;
	font-size: 20px;
	position: absolute;
	/* transition: 0.2s ease-in-out; */
}
div#blokjeVorigeVolgende div a span.indic.icon-vorige {
	left: 0;
}
div#blokjeVorigeVolgende div a span.indic.icon-volgende {
	right: 0;
}
/* div#blokjeVorigeVolgende div a:hover span.indic.icon-vorige {
	transform: translateX(-3px);
}
div#blokjeVorigeVolgende div a:hover span.indic.icon-volgende {
	transform: translateX(3px);
} */
div#blokjeVorigeVolgende div.item.prod_1 a {
	background-image: linear-gradient(var(--color-prod-1), var(--color-prod-1));
}
div#blokjeVorigeVolgende div.item.prod_2 a {
	background-image: linear-gradient(var(--color-prod-2), var(--color-prod-2));
}
div#blokjeVorigeVolgende div.item.prod_3 a {
	background-image: linear-gradient(var(--color-prod-3), var(--color-prod-3));
}
@media (max-width: 900px) {
	div#blokjeVorigeVolgende div {
		/* width: calc(100vw - 20px); */
		width: 100%;
	}
}
@media ( min-width: 901px ) and (max-width: 1050px) { 
	div#blokjeVorigeVolgende div {
		width: 230px;
	}
	ul.zieooks li a, ul.cats li a, ul.zieooks.uitklaplijst li:first-child span {
		width: 210px;
	}
}


/* deelknoppen */
#shareknoppen {
	background-color: var(--color-orange-light);
	padding: 10px 5px;
	margin-top: 10px;
}
div.deelspul {
	border-bottom: 0px;
	border-top: 0px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 5px; 
}
@media (min-width: 901px) {
	div.deelspul {
		grid-template-columns: repeat(6, 1fr);
	}
}
div.deelspul div {
	border-top: 0px;
	text-align: center;
	/* width: calc(20% - 10px);
	display: inline-block; */
}
/* div.deelspul div+div {
	margin-left: 8px;
} */
div.deelspul div a {
	border-top: 0px;
	display: block;
	background-color: #626285;
	padding: 8px 4px;
	color: #fff;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.deelspul div a:hover {
	background-color: #46465F;
}
div.deelspul .deelikoon {
	width: 14px; 
	height: 16px; 
	display: inline-block;
	margin-right: 5px;
}
div.deelspul a.mastShare {
	cursor: pointer;
}
.icon-lnk:before {
	content: "\e9cb";
  }
.icon-envlp:before {
	content: "\e900";
}
.icon-bs:before {
	content: "\e90d";
}
div.deelspul .deelikoon.icon-bs {
	margin-right: 7px;
}
.icon-mast:before {
	content: "\e90e ";
}
.icon-fb:before {
	content: "\ea90";
}
.icon-tw:before {
	content: "\ea96";
}
.icon-share::before {
	content: "\ea82";
}
.isIos .icon-share::before {
	content: "\e90b";
}
/* .icon-mast {
	width: 20px !important;
	display: inline-block;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976"><path fill="%23fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/><path fill="%23626285" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/></svg>');
	background-repeat: no-repeat; 
	background-size: 14px;
	background-position-y: 1px;
	margin-right: 3px !important;
} */

/* platen uit het SAA */
#SAPics {
	background-color: var(--color-orange-light);
	padding: 10px 5px;
	margin-top: 10px;
}
#SAPicsLijst {
	margin: 1em 0;
}
#SAPicsLijst div {
	display: inline-block; width: 250px; margin-right: 10px; margin-bottom: 1em; vertical-align: top; word-wrap: break-word;
}
#SAPicsLijst div img {
	border: 1px solid #0f0f0f;
}
a.SAKnop {
	border: 0;
	background-color: #626285;
	padding: 10px 20px;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	margin: 0 auto;
	width: -moz-fit-content;
	width: fit-content;
	display: block;
}
a.SAKnop:hover {
	background-color: #46465F;
}
#SAPicsLijst p.rechthebbende {
	font-size: 90%;
}
p.rechthebbende a, p.archieflink a {
	color: #333;
	border-bottom: 2px solid #deb9a2;
} 
p.rechthebbende a:hover, p.archieflink a:hover {
	color: #111;
} 

/* zoeken */
#zoeksectie {
	background-color: var(--color-mint);
	height: auto;
	padding: 15px 5px;
	display: none;
}
#zoeksectie.actief {
	display: block;
}
.zoeken input[type=search] {
	width: 100%;
	padding: 10px 45px 10px 10px;
	border: 1px solid #aaa;
	font-family: Georgia,"Times New Roman",serif;
	font-size: 16px;
	height: 41px;
}
.zoeken {
	position: relative;
}
.zoeken button {
	position: absolute;
	display: block;
	width: 40px;
	height: 39px;
	right: 1px;
	top: 1px;
	background-color: var(--color-li-items);
	border: 0px #ccc;
	color: #eee;
	font-size: 18px;
}
.zoeken button:active {
	outline: none;
}
.zoeken button::-moz-focus-inner {
	border:0;
}
#zoeksectieInner div + div {
	display: none;
	position: relative;
}
#zoeksectieInner div + div.actief, #zoeksectieInner div + div.actief #zoekresultaten {
	display: block;
}
#zoekresultatenknoppen {
	position: absolute;
	width: 100%;
	z-index: 2;
}
#zoekresultatenknoppen button {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255,255,255,0.5);
	background-color: var(--color-li-items);
	color: #eee;
}
#zoekresultatenknoppen button:first-child {
	position: absolute;
	right: 55px;
}
#zoekresultatenknoppen button:first-child:before {
	font-family: 'aodk' !important;
	content: "\e907"; /* pinikoon */
	font-size: 18px;
}
#zoekresultatenknoppen button+button {
	position: absolute;
	right: 0;
	font-size: 16px;
}
ul.zoekhits li a {
	color: #333;
	width: calc(100% - 22px);
}
#zoeksectie li a:hover {
	color: #111;
}
#zoekresultaten > p:first-child {
	min-height: 40px;
	max-width: calc(100% - 110px);
}
#zoekresultaten, #zoekresultaten h3 {
	margin-top: 1em;
}
#zoekresultaten h3 + p {
	margin-bottom: 0.5em;
}

/* op de startpagina */
ul.hoeWerkt li {
	line-height: 1.7em;
}
ul.hoeWerkt li span::before {
	content: '↓';
}

/* dialoog */
#kaartlaagdialoog {
	background-color: var(--color-mint);
	width: 300px;
}
#kaartlaagdialoog::backdrop {
	background-color: rgba(0,0,0,.5);
}
#kaartlaagdialoog p {
	margin-bottom: 1em !important;
}
#kaartlaagdialoog h3 {
	font-size: 22px;
	margin-bottom: 0.5em;
}
#kaartlaagdialoog h5 {
	margin-bottom: 0.2em;
}
#kaartlaagdialoog label {
	background-color: var(--color-li-items);
	display: block;
	padding: 5px;
	cursor: pointer;
}
#kaartlaagdialoog label.inline {
	display: inline-block;
	margin-right: 10px;
}
#kaartlaagdialoog div {
	text-align: right;
}
#kaartlaagdialoog div:first-child {
	float: right;
}




/* range dinges */
/* #opacitytoolBox input[type=range]::-webkit-slider-runnable-track, #opacitytoolBox input[type=range]::-moz-range-track {
	background: var(--color-green-dark);
} */

/* phone and also some tablets */
@media (max-width: 900px) { /* was 540 */

	#container {padding: 2px !important; width: calc(100% - 4px);}
	/* #map {width:316px; height:380px;} */
	#header {display: none}
	
	#infoblokje {clear: both;}
	#infoblokje dd {margin-left: 10px;}
	
	#blokjeBronnenEnLastmod dd {margin-left: 20px;}
	
	ul.zieooks.uitklaplijst li:first-child span {width: auto}
	
	ul.zieooks {
		max-width: calc(100vw - 20px);
	}
	ul.zieooks li a {
		width: calc(100% - 22px);
	}
}
@media (min-width: 901px) {
	#shareknoppen, #SAPics {
		padding: 10px 15px;
	}
	#zoeksectie.actief {
		padding: 15px;
	}
	ul.hoeWerkt li span::before {
		content: '↗';
	}
	#zoeksectieInner {
		width: 860px;
		margin: 0 auto;
	}
}

 /* even geduld aub */
.spinner {
  color: #fff;
  position: fixed;
  width: 64px;
  height: 64px;
	display: block;
	top: calc(50vh - 32px);
	left: calc(50vw - 32px);
	z-index: 1001;
}
.spinner div {
  transform-origin: 32px 32px;
  animation: spinner 1.2s linear infinite;
}
.spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}
.spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

button.mooieknop {
	border-radius: 5px;
	background-color: #004B00;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	border: 0;
	letter-spacing: 1px;
	font-size: larger;
}
button.mooieknop:hover, button.mooieknop:focus {
	background-color: #008000;
}

.center {
	text-align: center;
}


#cookiebanner {
	position: fixed;
	width: calc(100vw - 10px);
	padding: 0 5px;
	bottom: 0;
	z-index: 10;
	background-color: var(--color-green-dark);
	border-top: 2px solid var(--color-choc);
	box-shadow: 0 30px 70px rgba(0,0,0,.3);
	font-size: 1rem;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	overflow-y: scroll;
	height: 80px; 
	transition-property: bottom;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	
	display: grid;
	grid-template-columns: 1fr 90px;
	align-items: center;

}
#cookiebanner p:first-child {
	padding-right: 1em;
	color: var(--color-sand);
}
#cookiebanner p a {
	text-decoration: underline;
	color: var(--color-sand);
}
#cookiebanner.verbergCcBalk {
	bottom: -150px;
}
#cookiebanner button {
	background-color: var(--color-choc);
	height:38px;
	width: 80px;
	border:none;
	font-size:18px;
	font-weight:bold;
	color:#eee;
	border-radius: 5px;
	cursor: pointer;
	margin: 0 auto;
}
#cookiebanner button:hover, #cookiebanner button:focus  {
	background-color: #000;
	color:#fff;
}
@media screen and (min-width: 901px) {
	#cookiebanner {
		width: calc(100vw - 30px);
		padding: 0 15px;
		grid-template-columns: 750px 90px;
	}
}

div.vandaag {
	margin-top: 3em;
	padding-top: 2em;
	border-top: 1px dashed #fff;
}
p.vandaag {
	font-family: Oswald-regular;
}
div.anniversarium:has(p) + div.anniversarium:has(p) {
	padding-top: 1em;
}
p.anniversarium {
	max-width: 350px;
	width: 75vw;
	padding: 5px;
	border: 1px solid #fff;
	background-color: bisque;
}
@media (min-width: 800px) {
	div.anniversaria {
		display: grid;
		grid-template-columns: 350px 350px;
		gap: 2em;
	}
}
div.botd {
	margin: 2em auto 0;
	background-color: var(--color-sand);
	border: 1px solid #fff;
	max-width: 450px;
	padding: 5px;
}
div.botd-inner p {
	margin: 0 !important;
}
div.botd-inner img {
	max-height: 300px;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}
.prod_0 #r1c2:has(div.botd) {
	text-align: center;
}
.prod_0 #r1c2:has(div.botd) menu.index {
	margin-left:  auto;
	margin-right:  auto;
}
.prod_0 #r1c2:has(div.botd) p.anniversarium  {
	margin-left:  auto;
	margin-right:  auto;
	max-width: 450px;
}

div.special {
	background-color: bisque;
	border: 1px solid #fff;
	padding: 5px 10px;
}