/****************************************************************************************************************************/
/* Author: Reina Wijnbergen	*/
/* Copyright (C) 2024 Op Pad in Oene */
/****************************************************************************************************************/
/* 01 root: kleuren */
/* 01-1	algemeen */
/* 05 body */
/* 10 header */
/* 15 headings */
/* 20 topbar */
/* 25 below-top */
/* 30 logo en offcanvasmenu */
/* 35 menu / menu-blogcategorie */
/* 36 card box-shadow */
/* 40 zoeken */
/* 45 site grid-container / @media */
/* 50 banner */
/* 55 icons fontawesome */
/* 60 buttons */
/* 65 top-a */
/* 70 top-b */
/* 75 sidebar-left */
/* 80 sidebar-right */
/* 85 breadcrumbs */
/* 90 main-top */
/* 95 message */
/* 100 artikelen */
/* 105 categorien */
/* 110 velden */
/* 113 tabellen */
/* 115 main-bottom */
/* 120 bottom-a */
/* 125 bottom-b */
/* 130 footer-container */
/* 135 footer: copyright en sitemap */
/* 140 debug */
/* 145 terug naar boven knop */
/* 150 overig*/
/******************************************************************************************/

/* 01 root: kleuren */
:root {
    --groen: #30c200;
    --lichtgroen: rgba(201, 250, 168, 0.5); /*#c9faa8;*/
    --okergeel: #ffb300;
    --wit: #ffffff;
    --donkerblauw: rgba(0, 0, 128, 1);
    --cassiopeia-color-primary: rgba(48, 194, 0, 1); /*groen*/
    --cassiopeia-color-link: rgba(0, 0, 128, 1); /*donkerblauw*/
    --cassiopeia-color-hover: rgba(0, 0, 128, 1) !important; /*donkerblauw*/
   	--cassiopeia-font-weight-heading: 250;
    --btn-primary: #30c200 !important; /*groen*/
    --btn-secondary: #000080 !important; /*donkerblauw*/
    --btn: #30c200 !important; /*groen*/
    --btn-hover: #000080 !important; /*donkerblauw*/
  	--body-font-size:0.90rem;
}

/*-- Leesmeer... onder uitgelijnd op dezelfde hoogte--*/
.com-content-category-blog_items {
  display: flex; /* Zet de kolommen op flexbox */
  flex-wrap: wrap; /* Zorgt voor meerdere rijen */
  gap: 20px; /* Ruimte tussen kolommen */
}
.com-content-category-blog__item { 
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* Zorgt voor uitlijning */
  flex: 0 0 24%; /* Voor vier kolommen */
  box-sizing: border-box;
  padding: 10px; /* Optioneel: ruimte binnen de kolommen */
}
.item-content { 
  flex: 1; /* Neemt beschikbare ruimte in beslag */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
p.readmore {
  margin-top: auto; /* Duwt de "Lees meer" naar de onderkant */
  text-align: center; /* Optioneel: centreren */
}

/* sponsoren */
div.card div.card-body table tbody tr td {
  font-size: 0.9em;
}
/* 100 -foto's */
.flex-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	padding: 10px;
	margin: 20px;
  	gap: 10px 20px;
  	background: var(--lichtgroen);
	}
.flex-container.img {
	padding: 5px;
	margin-top: 10px;
	}
.flex-container p {
  font-size: 0.7rem !important;
  margin: 3px;
}
/*@media (max-width: 320px){
  div.flex-container img.rounded {
    width: 100% !important;
	}
}*/
  /*@media (max-width: 320px) {
  div.com-content-article__body img {
    width: 100%;
  }
}*/


/*-----------------------------------------------------------------------------*/
/* 01-1	algemeen */
a:not([class]) {
  text-decoration:none;
}
/*-----------------------------------------------------------------------------*/
/* 05 body */
/*-----------------------------------------------------------------------------*/
/* 10 header */
.header.container-header {
    background-image: none;
}
header.header.container-header.full-width div.grid-child.container-nav {
  padding: 5px;
}
div#mod-custom111.mod-custom.custom {
  width: 150px;
  height: auto;
}
/*-----------------------------------------------------------------------------*/
/* 15 headings */
h1, h2 {
    font-weight: var(--cassiopeia-font-weight-headings);
    margin-bottom: 0.5rem;
}
h1 {
    color: var(--groen);
  	margin-bottom: 1.5rem;
}
h2, h4, h5 {
    color: var(--donkerblauw);
}

div.com-content-category-blog__item.blog-item div.item-content div.page-header h2 {
  font-size: 1.3rem!important;
  height: 50px;
}
/*span.field-value table tbody tr td.klomp h5 {
  font-size: large;
}
span.field-value table tbody tr {
  height: 55px;
}*/

/*-----------------------------------------------------------------------------*/
/* 20 topbar */
/*-----------------------------------------------------------------------------*/
/* 25 below-top */
/*-----------------------------------------------------------------------------*/
/* 30 logo en offcanvasmenu */
/* offcavas menu (https://www.dr-menzel-it.de/blog/offcanvas-menue-fuer-cassiopeia)*/
}
.offcanvas.show {
    background-color: var(--cassiopeia-color-primary);
    /*background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));*/
}
@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;
}
.offcanvas.show {
    background-color: var(--cassiopeia-color-primary);
    opacity: 0.8;
}
.offcanvas-header {
    background-color: var(--cassiopeia-color-secondary);
}
.metismenu.mod-menu .metismenu-item {
    line-height: 2em;
}
/*-----------------------------------------------------------------------------*/
/* 35 menu / menu-blogcategorie */

	/*categorieblog ondernemers en sponsoren*/
div.com-content-category-blog__item.blog-item figure.left.item-image {
  margin-top: 0px;
}
div.com-content-category-blog__item.blog-item {
    background-color: var(--lichtgroen);
  	border-top: var(--groen) solid 5px;
}
.com-content-category-blog__item.blog-item div.item-content div.page-header a {
    text-decoration-line: none;
}
div.com-content-category-blog__item.blog-item div.item-content div.card div.card-body table tbody tr td a {
  text-decoration: none !important;
  color: inherit;
  font-size: inherit !important;
}
div.com-content-category-blog__item.blog-item div.item-content {
    padding: 10px;
}
/*div.com-content-category-blog__item.blog-item div.item-content div.page-header h2 {
    font-size: 1.4em;
}*/
div.com-content-category-blog__item.blog-item {
  background: var(--wit);
}

/*-----------------------------------------------------------------------------*/
/* 36 card box-shadow */
div.com-content-category-blog__item.blog-item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
div.com-content-category-blog__item.blog-item:hover {
  box-shadow: 0 12px 24px 0 rgba(0,0,0,0.3);
}

/*-----------------------------------------------------------------------------*/
/* 40 zoeken */
/*-----------------------------------------------------------------------------*/
/* 45 site grid-container */
@media only screen and (min-width: 992px) {
 div.com-content-category-blog__item.blog-item div.item-content div.card div.card-body table tbody tr td a {
  font-size: 0.8rem;
	}
}
/*-----------------------------------------------------------------------------*/
/* 50 banner */
/*-----------------------------------------------------------------------------*/
/* 55 icons fontawesome */
.fa-home,
.fa-at,
.fa-globe,
.fa-quote-right,
.fa-square-instagram,
.fa-facebook {
    color: var(--groen);
    padding-right: 10px !important;
  	/*vertical-align: top;*/
}
.fas.fa-phone.fa-rotate-180 {
    color: var(--groen);
    padding-left: 10px;
  	/*vertical-align: top;*/
}

/*-----------------------------------------------------------------------------*/
/* 60 buttons */
.btn {
    background-color: var(--btn-primary);
    color: var(--wit);
}
a.btn:hover {
    background-color: var(--donkerblauw);
    color: var(--wit);
  font-weight: 800;
}

/*-----------------------------------------------------------------------------*/
/* 65 top-a en top-b */
/*.container-top-a {
    padding: 2em;
    margin-bottom: 0px;
}*/
div.top-a.card.shadow div.card-body {
  margin: 2em 2em 1em 2em;
}
div.top-a, div.top-b {
    background-color: var(--lichtgroen);
}
div.top-a, div.top-b {
  text-align: center;
  color: var(--donkerblauw) !important;
}
div.top-a h3 {
    color: var(--okergeel) !important;
}*/
div#mod-custom114.mod-custom.custom p a {
  text-decoration: none;
}


/*-----------------------------------------------------------------------------*/
/* 70 top-b */
/*-----------------------------------------------------------------------------*/
/* 75 sidebar-left */
/*-----------------------------------------------------------------------------*/
/* 80 sidebar-right */
/*-----------------------------------------------------------------------------*/
/* 85 breadcrumbs */
/*-----------------------------------------------------------------------------*/
/* 90 main-top */
/*-----------------------------------------------------------------------------*/
/* 95 message */
/*-----------------------------------------------------------------------------*/
/* 100 artikelen */
/* artikel-info*/
    dd.modified {
    display: none;
}
/*---Judith EmoiOne--*/
.EmojiOne {
	width: 20px !important;
	height: auto;
}
/*klomp voor adres*/
/*pan.field-value p img*/
span.field-value table tbody tr td.klomp {
  width: 4rem;
  /*vertical-align: top;*/
}
span.field-value table tbody tr td img {
    width: 100%;
    height: auto;
  padding: 0 10px 0 0;
}

/* img's in volledig artikel */
div.com-content-article__body p img.artikel-img {
  width: 200px !important;
  height: auto;
}
/*-ondertiteling-img-*/
figure.foto-artikel.item-image figcaption.caption {
  font-size: 0.8rem;
  font-style: italic;
}

.fas.fa-circle {
  font-size: 0.6em;
  color: var(--groen);
}
.kadotip {
  background: var(--lichtgroen);
  padding: 1em 1em 0.1em 1em;
}
/* ---uitgezet, omdat ik niet weet wat het doet 
@media screen and (min-width: 576px) {
  span.field-value p img {
    width: 4rem;
  	height: auto;
  }
}
/* Medium devices (tablets, 768px and up)
@media screen and (min-width: 768px) {
  span.field-value p img {
  	width: 5rem;
  	height: auto;
	}
}
/* Large devices (desktops, 992px and up)
@media screen and (min-width: 992px) {
  	span.field-value p img {
  	width: 5rem;
  	height: auto;
	}
}
/* X-Large devices (large desktops, 1200px and up)
@media screen and (min-width: 1200px) {
  	span.field-value p img {
  	width: 6rem;
  	height: auto;
	}
}
/* XX-Large devices (larger desktops, 1400px and up)
@media screen and (min-width: 1400px) {
  	span.field-value p img {
  	width: 5rem;
  	height: auto;
	}
}
/*quote-sponsoren*/
i.fas.fa-quote-left {
    color: var(--okergeel);
    font-size: 2rem;
    padding: 5px;
}
/*border links in artikelen*/
.com-content-article {
    padding: 20px;
    border-left: 3px solid var(--okergeel);
}
/* geen bootstrap */

figure.foto-artikel img {
  width: 100%;
}
div.com-content-article.item-page div.com-content-article__body p img {
  width: 100%;
}
/* sponsoren */
.card {
  margin-bottom: 20px;
}
.card-body {
  padding: 10px;
}
div.com-content-category-blog__item.blog-item figure.left.item-image a img {
   width: 100% !important;
}
/*-----------------------------------------------------------------------------*/
/* 105 categorien */
/*-----------------------------------------------------------------------------*/
/* 110 velden */
ul.fields-container {
    padding-left: 0;
}

li.field-entry.adres-postcode-woonplaats2 {
    list-style: none;
}

li.field-entry.adres-postcode-woonplaats2 img {
    margin-right: 10px;
    /*margin-left: 10px;*/
}
/*-----------------------------------------------------------------------------------------*/
/* 115 main-bottom */
/*-----------------------------------------------------------------------------------------*/
/* 120 bottom-a */
/*-----------------------------------------------------------------------------------------*/
/* 125 bottom-b */
/*-----------------------------------------------------------------------------------------*/
/* 130 footer-container */
/*-----------------------------------------------------------------------------------------*/
/*  footer: copyright en sitemap */
#mod-custom115>table:nth-child(1) {
    width: 100vw;
}
div#mod-custom115.mod-custom.custom table tbody tr td {
    width: 50%;
}
.container-footer {
    background-image: none;
    background-color: var(--okergeel);
}
#mod-custom115 {
    font-size: 0.8rem !important;
}
footer.container-footer.footer.full-width div.grid-child {
  padding: 10px;
}
/*-----------------------------------------------------------------------------------------*/
/* 140 debug */
div.achtergrond-debug p {
  	font-size: 0.5rem;
  	padding: 20px;
  	z-index: 2;
}
.achtergrond-debug {
  background-image: linear-gradient(#61b7f0, white) !important;
  height: 25vh;
}
	.grasstrook {
      	position: absolute;
		bottom: 0px;
		right: 0px;
     	z-index: 1;
        }
	.fietser-alleen {
		width: 12%;
		height: auto;
		bottom: 8px;
		position: absolute;
		animation: mymove1 40s infinite;
		animation-timing-function: linear;
        }
      	@keyframes mymove1 {
            from {
                right: 0%;
            }

            to {
                right: 100%;
            }
       	 }
        .fietsers-twee {
            width: 15%;
            height: auto;
            bottom: 8px;
            position: absolute;
            animation: mymove2 30s infinite;
            animation-timing-function: linear;
        }
        @keyframes mymove2 {
            from {
                left: 0%;
            }

            to {
                left: 100%;
            }
        }
        .jongen-step {
            width: 11%;
            height: auto;
            bottom: 8px;
            position: absolute;
            animation: mymove3 60s infinite;
            animation-timing-function: linear;
        }
        @keyframes mymove3 {
            from {
                left: 0%;
            }

            to {
                left: 100%;
            }
        }

/*-----------------------------------------------------------------------------------------*/
/* 145 terug naar boven knop*/
#back-top {
  background-color: var(--groen);
  color: var(--wit);
  /*margin-bottom: 50px;
  margin-right: 50px;*/
}
/*-----------------------------------------------------------------------------------------*/

/* 150 overig*/
/*h2::before {
  content: "Read this -";
}*/
/*-----------------------------------------------------------------------------------------*/