:root {
	--bruin: #a67a53;
  	--donkerbruin: #593d24;
	--blauw: #1b4e59;
  	--wit: #fefbea; /* #ffffff; */
	--siennabruin: rgba(245, 231, 218, 1); 	/* #f5e7da; */
	--cassiopeia-color-primary: rgba(166, 122, 83, 1);
	--cassiopeia-color-link: #a67a53; /*rgba(27, 78, 89, 1);*/
	--cassiopeia-color-hover: #1b4e59; /*rgba(27, 78, 89, 1);*/
  	--cassiopeia-font-weight-headings,400;
  	--btn-primary: #a67a53 !important;
  	--btn-secondary: #a67a53 !important;
  	--btn-color: #ffffff !important;
}
/* actief menu-item: achtergrond bruin */
li.nav-item.current.active {
  background-color: var(--bruin) !important;
  border-radius: 5px;
}
li.nav-item.current.active a{
  color: white !important;
  text-decoration: none; 
}
li.nav-item.current.active a.legenda-menu img{
  border: 2px solid white;
  margin-left: 10px;
}
/* bovenstaande nog toevoegen aan petervisser.nl */

div.offline-card div.header {
  background-image: none;
}
div.offline-card div.header div.logo-icon {
  display: none;
}
html body.site div.outer div.offline-card div.login form#form-login fieldset div.mod-login__submit.form-group{
  display: none;
}


.fa-sitemap {
  padding-right: 10px;
}

/*--vergrootglasje--*/
a.wfpopup.wf-zoom-image span.wf-icon-zoom-image > svg {
  fill: var(--bruin);
  width: 40px;
  opacity: 1;
}

.back-to-top-link:hover {
  background-color: var(--bruin) !important;
  color: white !important;
  opacity: 1;
}
div.site-grid {
  border-left: 3vw solid var(--siennabruin); 
}
/*--debug--*/
html body.site.com_content.wrapper-static.view-featured.no-layout.no-task.itemid-101 div#mod-custom182.mod-custom.custom table tbody tr td {
  font-size: 0.8em;
}

/*--imagemap-artikel #75 met #mod-custom113: Plaatsen waar Visserschilderijen zijn--*/
@media (max-width: 825px) {
   html body.site.com_content.wrapper-static.view-article.no-layout.no-task.itemid-126.has-sidebar-right div.site-grid div.grid-child.container-component main div.com-content-article.item-page div.com-content-article__body div.card {
    display: none !important;
  }
}
/*--imagemap-artikel #75 met Legenda--*/
@media (max-width: 825px) {
html body.site.com_content.wrapper-static.view-featured.no-layout.no-task.itemid-101 div.site-grid div.grid-child.container-component div.main-top.card div.card-body div#mod-custom166.mod-custom.custom div div.main-bottom.card.legenda {
  	 display: none !important;
  }
}
/*--hover-effect bij Overzicht van alle schilderijen--module 166*/
div.bord.shadow {
   transition: transform .2s;
}
div.bord.shadow:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
}
/*--overzicht van alle schilderijen--*/
div#mod-custom166.mod-custom.custom {
  width: 95%;
  margin: auto;
}
#mod-custom166 {
  padding-bottom: 20px;
}
.bord.shadow {
  width: 150px;
  height: 190px;
  float: left;
  margin: 10px;
  border-radius: 5px;
  background: white;
} 
div.bord.shadow h6 {
  text-align: center;
}
.img-bord{
  	display: block; 
  	margin-left: auto; 
  	margin-right: auto; 
	height: 100px;
  	border: 2px groove var(--bruin);
}
img.status {
  	width: 25px;
  	height: 10px;
  	margin-top: 5px;
  	border: none !important;
}
div.bord.shadow p {
  	font-size: 0.75rem;
  	font-style: italic;
  	text-align: center;
}

/*--legenda boven Overzicht van alle schilderijen --*/
div#mod-custom166.mod-custom.custom div div.card.legenda {
  width: 100%;
}
/*div#mod-custom166.mod-custom.custom div.shadow {
  padding: 16px;
}*/
/*--button tekst--*/
.tekst button.btn.btn-primary a {
  color: var(--wit) !important;
}

/*--legenda--*/
div.main-bottom.card.legenda {
    /*border: none;*/
  	width: 100%;
}
#mod-custom115{
	border-top: 2px solid var(--bruin);
	padding-top: 15px;
}
div.main-bottom.card.legenda div.card-body {
  padding-top: 30px;
}
div#mod-custom115.mod-custom.custom h4 {
  font-size: medium !important;
}

/*--legenda boven Overzicht van alle schilderijen--*/
html body.site.com_content.wrapper-static.view-featured.no-layout.no-task.itemid-192 div.site-grid div.grid-child.container-component div.main-top.card div.card-body div#mod-custom166.mod-custom.custom div.shadow
padding_30px;
div#mod-custom166.mod-custom.custom div div.legenda img {
  width: 20px;
  height: 10px;
}

/*--?--*/
.divider {
  color: var(--bruin);
  padding-right: 10px;
}
a:hover, a:focus {
  color: #23527c;
  text-decoration: underline;
}

  /*--footer--*/
#mod-custom124, #mod-custom125, #mod-custom126 {
  width: 33%;
  padding: 20px;
}
@media only screen and (max-width: 991px){
	footer.container-footer.footer.full-width div.grid-child mod-custom124, #mod-custom124, #mod-custom125, #mod-custom126 {
  		width: 100%;
  		border-bottom: 1px solid var(--wit);
  		margin-bottom: 30px;
		}
}
div#mod-custom124.mod-custom.custom a:hover {
  color: var(--bruin);
}

/*--modules main-top--*/
div.main-top.card div.card-body .mod-custom.custom p img {
  border: 10px groove var(--bruin); 
}

/*--menu-sidebar-right--
div.sidebar-right.card div.card-body ul.mod-menu.mod-list.nav a {
 text-decoration: none; 
}*/

/*content templates-artikelen--*/
.flex-container-artikel {
	display: flex;
  	flex-direction: row;
  	margin-bottom: 20px;
	padding: 0;
	border-bottom: 1px solid var(--grijs);
    }
.flex-item-left {
	width: 300px !important;
    }
.flex-item-left-religie {
	width: 200px !important;
    }
.flex-item-left img {
  	padding-right: 20px;
	min-width: 300px !important;
    }
.flex-item-left p {
	font-style: italic;
    font-size: 0.8em !important;
    padding: 10px;	
	}
.flex-item-right {
	padding-left: 20px !important;
    }
@media (max-width: 600px) {
	.flex-container-artikel {
		flex-wrap: wrap;
	}
	.flex-item-left {
		order: 1;
	width: 100%;
	}
	.flex-item-right {
		order: 2;
	}
}

/*--legenda-onder-sidebar--*/
a.legenda-menu span.image-title {
  padding-left: 10px;
}

/*.legenda img {
    width: 1em;
    height: 1em;
}
.legenda-menu {
    padding-right: 0.5em;
}
img.legenda-menu {
    width: auto;
    height: 0.8em;
}*/
.legenda {
    float: left;
    padding-right: 15px;
    font-size: 1em;
    line-height: 2em;
}

/*--logo--*/
div.navbar-brand a.brand-logo img {
  width: 200px !important;
  height: auto;
}


/*div.boxed.shadow div.flex-item-right ul {
	list-style-image: url('/images/status-schilderij.svg');
    }*/

/*--tabs &accorions--*/
div.site-grid div.grid-child.container-component main div.com-content-article.item-page div.com-content-article__body div div h6{
  font-size: 0.9rem;
}
/*--tabs: minder padding--*/
/*div.site-grid div.grid-child.container-component main div.com-content-article.item-page div.com-content-article__body div div {
  padding: 10px;
}*/

/*--artikelen: na float--*/
.clearfix {
  overflow: auto;
}

main div.com-content-article.item-page div.page-header h1 {
   padding-bottom: 1.5rem;
}
div.boxed.shadow div.flex-item-right h2 {
  padding-bottom: 1.5rem;
}

/*--imagemap--
@media screen and (max-width: 767px) {
	html body.site.com_content.wrapper-static.view-article.no-layout.no-task.itemid-118.has-sidebar-right div.site-grid div.grid-child.container-component main div.com-content-article.item-page div.com-content-article__body {
		display: none;
  	}
}*/

/*--Oene3x, */
@media screen and (max-width: 450px) {
 div.boxed.shadow {
    display: grid;
   	grid-template-columns: 1fr !important;
  	}
  .flex-item-left img {
    width: 100%;
  }
}
.boxed {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
  padding: 10px;
  border-top: solid 3px var(--bruin);
  margin-bottom: 20px;
}
div.boxed.shadow div.flex-item-left img {
  border: 4px groove var(--bruin);
}
div.boxed.shadow div.flex-item-right {
  padding-left: 10px;
}
div.boxed.shadow div.flex-item-left p {
  font-style: italic;
  font-size: .8em;
}
/*sidebar-rigth--*/
div.sidebar-right.card div.card-body ul.mod-menu.mod-list.nav {
  font-size: 0.9rem;
}
div.sidebar-right.card {
  padding-right: 5px;
}
/*--Persbericht op top-a--
div.top-a.card > div.card-body {
  border: 4px groove var(--bruin);
}*/

/*--Menu Schilderijen: lijst met alle categorieen: aantal schilderijen--*/
div.com-content-categories__item-title span.badge.bg-info {
  background-color: var(--btn-primary) !important;
  font-weight: normal;
}
div.com-content-categories__item-title a {
  padding-right: 25px;
}

/*--categorie-blog
div.com-content-category-blog__item.blog-item {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
    padding: 10px;
}
figure.left.item-image img {
  width: 100%;
}
.blog-items.boxed div.com-content-category-blog__item.blog-item figure.left.item-image img {
	border: 5px groove var(--bruin);
}
.figcaption {
  font-style: italic;
  font-size: .8em;
}
figure.left.item-image figcaption.caption {
  font-style: italic;
  font-size: .8em;
}
/*.boxed div.com-content-category-blog__item.blog-item div.item-content {
	padding: 0;
}*/
a:not([class]) {
  text-decoration: none;
}
/*--button--*/
.btn-secondary {
  background-color: var(--bruin);
  color: var(--wit);
}
.btn-secondary:hover {
  background-color: var(--cassiopeia-color-hover);
  color: white;
}
.opmaak > button> a:hover {
  background-color: var(--bruin);
  color: white;
}

/*--het Dorp Oene (1) Inleiding--*/
.grid-container {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    /*margin-top: 0;*/
}
.grid-item {
    text-align: center;
}

/*--h1 t/m h6--*/
h1, h2, h3, h4, h5, h6 {
  color: var(--bruin);
  font-weight: var(--cassiopeia-font-weight-headings,400);
}
.card-header {
  color: var(--bruin);
}

/*--header, logo en menu--*/
header.header.container-header, .footer {
  background-image: none;
}
.container-nav {
  padding-bottom: 0 !important;
}
/*--banner-carousel--
#mod-custom209 {
  background-color: van(--siennabruin) !important;
}*/

 /*--Jumbotronmodule--*/
.jbcontent210 h2 {
    text-shadow: 1px 1px 2px black, 1px 1px 2px #f2bf91;
}
.jbcontent210 p {
    font-size: 1.5rem;
  text-shadow: 1px 1px 2px black, 1px 1px 2px #f2bf91;
}

/*--legenda-onder-sidebar--*/
a.legenda-menu span.image-title {
  padding-left: 10px;
}

/*.legenda img {
    width: 1em;
    height: 1em;
}
.legenda-menu {
    padding-right: 0.5em;
}
img.legenda-menu {
    width: auto;
    height: 0.8em;
}*/
.legenda {
    float: left;
    padding-right: 15px;
    font-size: 0.9em;
    line-height: 2em;
}

/*--table--*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
/* rows: kleur om en om */
tr:nth-of-type(odd) {
    background: rgba(83, 151, 166, 0.2);
}
/*tabelheader*/
tbody th {
    background: rgba(83, 151, 166, 1);
    color: white;
    font-weight: bold;
}
th:first-of-type {
    border-right: 1px solid white;
}
/*header en datacellen*/
td,
th {
    padding: 6px;
    border: 1px solid rgba(83, 151, 166, 0.2);
    text-align: left;
    vertical-align: top;
}
/*--offcanvas-metismenu--*/
.offcanvas.show {
  background-color: var(--cassiopeia-color-primary);
  opacity: 0.8;
  background-image: none;
}
@media (min-width: 992px) {
  .offcanvas-start {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
    position: relative;
    width: 100%;
    margin-top: 1rem;
  }
  .offcanvas .metismenu.mod-menu .mm-collapse {
    background-color: transparent;
  }
  .offcanvas .metismenu.mod-menu .metismenu-item > a {
    color: #fff;
  }
}
.offcanvas-header > *:only-child {
  margin-left: auto;
}
/*--extra-css-*/
.offcanvas-header {
  background-color: var(--cassiopeia-color-secondary);
}
.metismenu.mod-menu .metismenu-item {
 line-height: 2em;
}

/*--footer--*/
footer.container-footer.footer.full-width {
  margin-top: 0px;
}

.footer {
  background-color: var(--blauw);
}
footer.container-footer.footer.full-width div.grid-child {
  align-items: flex-start;
  padding-top: 5px;
}
#mod-custom203, #mod-custom204, #mod-custom205 {
  width: 33%;
  padding: 20px;
}
@media only screen and (max-width: 991px){
	footer.container-footer.footer.full-width div.grid-child #mod-custom203, #mod-custom204, #mod-custom205 {
  		width: 100%;
  		border-bottom: 1px solid var(--wit);
  		margin-bottom: 30px;
		}
}
/*--debug--*/
div#mod-custom207 > table {
	font-size: 0.7em;
  	width: 100%;
}
div#mod-custom207 > td {
  width: 50%;
}

/*--imagemap--
@media screen and (min-width: 768px) {
    #bootstrap_a_menu_item_192 {
        display: none;
    }
}*/

#imagecontainer {
    margin: auto;
    max-width: 1150px;
}

#cssimagemap {
    position: relative;
    /*line-height: 0;*/
}

#cssimagemap img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border: 1px solid #eaeaea;
    border-radius: 5px;
}

#cssimagemap a {
    position: absolute;
    padding-top: 4px;
    font-size: 50%;
    line-height: 1.25em;
    text-align: center;
    width: calc(70/(1150/100)*1%);
    /*calc(breedte hotspot in px/(breedte afbeelding/100)*1%) */
    height: calc(40/(900/100)*1%);
    /*calc(hoogte hotspot in px/(hab/100)*1%) */
    border-radius: 3px;
    border: 1px solid white;
    box-shadow: 2px 2px 2px #9d9d9c;
}

#cssimagemap div {
    position: absolute;
    padding-top: 4px;
    font-size: 50%;
    line-height: 1.25em;
    text-align: center;
    width: calc(70/(1150/100)*1%);
    height: calc(40/(900/100)*1%);
    border-radius: 3px;
    border: 1px solid white;
    box-shadow: 2px 2px 2px #9d9d9c;
}

#cssimagemap a:hover {
    background: #5397a6;
    color: white;
}

div#cssimagemap p {
    margin-bottom: 30px;
    font-size: 0.8em;
    line-height: 1.25em;
}

.rood {
    background: #A30021;
    color: white;
    z-index: 5;
}

.geel {
    background: #ffff00;
    color: black;
    border: #A30021 1px solid;
    z-index: 1;
}

.blauw {
    background: #0066cc;
    color: white;
    z-index: 3;
}

.groen {
    background: #99cc66;
    color: white;
    z-index: 4;
}

.oranje {
    background: #ffa500;
    color: black;
    border: #A30021 1px solid;
    z-index: 2;
}

#zwartsluis {
    left: calc(455/(1150/100)*1%);
    /* calc(x coördinaat linker bovenhoek hotspot in px /(breedte afbeelding/100)*1%) */
    top: calc(1/(900/100)*1%);
    /* calc(y coördinaat linker bovenhoek hotspot in px /(hoogte afbeelding/100)*1%) */
}

#voorst {
    left: calc(525/(1150/100)*1%);
    top: calc(553/(900/100)*1%);
}

#zalk {
    left: calc(385/(1150/100)*1%);
    top: calc(70/(900/100)*1%);
}

#hattem {
    left: calc(438/(1150/100)*1%);
    top: calc(145/(900/100)*1%);
}

#wezep {
    left: calc(380/(1150/100)*1%);
    top: calc(160/(900/100)*1%);
}

#elburg {
    left: calc(265/(1150/100)*1%);
    top: calc(210/(900/100)*1%);
}

#heerde {
    left: calc(439/(1150/100)*1%);
    top: calc(250/(900/100)*1%);
}

#vorchten {
    left: calc(502/(1150/100)*1%);
    top: calc(223/(900/100)*1%);
}

#nijbroek {
    left: calc(510/(1150/100)*1%);
    top: calc(400/(900/100)*1%);
}

#wapenveld {
    left: calc(445/(1150/100)*1%);
    top: calc(200/(900/100)*1%);
}

#liederholthuis {
    left: calc(525/(1150/100)*1%);
    top: calc(183/(900/100)*1%);
}

#hoonhorst {
    left: calc(690/(1150/100)*1%);
    top: calc(150/(900/100)*1%);
}

#welsum {
    left: calc(496/(1150/100)*1%);
    top: calc(310/(900/100)*1%);
}

#vaassen {
    left: calc(393/(1150/100)*1%);
    top: calc(413/(900/100)*1%);
}

#laren {
    left: calc(740/(1150/100)*1%);
    top: calc(490/(900/100)*1%);
}

#garderen {
    left: calc(250/(1150/100)*1%);
    top: calc(485/(900/100)*1%);
}

#vilsteren {
    left: calc(730/(1150/100)*1%);
    top: calc(100/(900/100)*1%);
}

#hoonhorst2 {
    left: calc(670/(1150/100)*1%);
    top: calc(120/(900/100)*1%);
}

#raalte {
    left: calc(660/(1150/100)*1%);
    top: calc(258/(900/100)*1%);
}

#heerde2 {
    left: calc(428/(1150/100)*1%);
    top: calc(280/(900/100)*1%);
}

#olst {
    left: calc(550/(1150/100)*1%);
    top: calc(330/(900/100)*1%);
}

#heino {
    left: calc(590/(1150/100)*1%);
    top: calc(220/(900/100)*1%);
}

#veessen {
    left: calc(500/(1150/100)*1%);
    top: calc(265/(900/100)*1%);
}

#wijhe {
    left: calc(553/(1150/100)*1%);
    top: calc(290/(900/100)*1%);
}

#oldebroek {
    left: calc(325/(1150/100)*1%);
    top: calc(207/(900/100)*1%);
}

#welsum2 {
    left: calc(490/(1150/100)*1%);
    top: calc(350/(900/100)*1%);
}

#oene {
    left: calc(425/(1150/100)*1%);
    top: calc(340/(900/100)*1%);
}

#epe {
    left: calc(355/(1150/100)*1%);
    top: calc(330/(900/100)*1%);
}

#epe2 {
    left: calc(360/(1150/100)*1%);
    top: calc(300/(900/100)*1%);
}

#nijbroek2 {
    left: calc(460/(1150/100)*1%);
    top: calc(430/(900/100)*1%);
}

#wilp {
    left: calc(510/(1150/100)*1%);
    top: calc(456/(900/100)*1%);
}

#gorssel {
    left: calc(590/(1150/100)*1%);
    top: calc(525/(900/100)*1%);
}

#laren2 {
    left: calc(715/(1150/100)*1%);
    top: calc(520/(900/100)*1%);
}

#lochem {
    left: calc(770/(1150/100)*1%);
    top: calc(560/(900/100)*1%);
}

#hummelo {
    left: calc(630/(1150/100)*1%);
    top: calc(800/(900/100)*1%);
}

#garderen2 {
    left: calc(235/(1150/100)*1%);
    top: calc(515/(900/100)*1%);
}
/*--eind--*/