/* Wijzigen template variabelen */

:root {
  --bs-primary: #99cc33;
  --k4-green: #99cc33;
  --bs-link-hover-color: black;
  --bs-body-bg: #f9f9f9;
}

/* kleur tekst titel elementen */

h1, h2, h3 {
  color: #99cc33;
}

/* kleuren */

.color-primary {
  color: #99cc33;
}

.background-gray {
  background: #eeeeee;
}

/* lead class voor tekst */

.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 300;
  line-height: 30px;
}

/* titel  hoofdartikels */

.page-header {
  padding-bottom: 9px;
  margin: 20px 0 30px;
  border-bottom: 2px solid #ced4da;
}

.page-header-row {
  /*padding-bottom: 9px;*/
  /*margin: 0px 0 00px;*/
  border-bottom: 2px solid #ced4da;
}

/* tekst bij carousel */

.carousel-caption {
  font-size: 36px;
  font-weight: bold;
  color: #99cc33;
  text-shadow: 2px 2px black;
}

/* classes van Joomla */

.blog-item {
  flex-direction: column;
  padding: 0 .5em 1em;
  display: flex;
  overflow: hidden;
}

.blog-items {
  grid-gap: 1em;
  grid-auto-flow: row;
  margin: 0 0 1em;
  display: grid;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
}

.container-component {
  grid-area: comp;
  flex-direction: column;
  flex: 1;
  display: flex;
}

.grid-child {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

/* vertikaal centreren img in artikel via class .k4vertcent */

.k4vertcent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.k4vertcent img {
  margin: 0;
}

/* featured articles blog opmaak via classes in intro tekst */

.k4favintro {
  position: relative;
}

.k4favtitel {
  position: absolute;
  width: 20rem;
  height: 10rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  padding: 25px;
  background: rgba(24,24,24,0.7);
}

.k4favtitel:hover {
  background: rgba(0,0,0,1.0);
}

ul.pimpom {
  list-style-image: url('../../assets/img/pimpompulleke_15x19.png');
}

.k4favtitelh2 {
  background: url("../../assets/img/pimpompulleke_20x25.png") no-repeat;
  padding-left: 30px;
}

.k4favtitel > .k4favtitelchild {
  color: #f9f9f9;
}

.k4favtitel:hover > .k4favtitelchild {
  color: #99cc33;
}

/* kleuren menu onderaan */

.bottommenucolor a:link {
  color: white;
}

.bottommenucolor a:focus {
  color: white;
}

.bottommenucolor a:visited {
  color: white;
}

.bottommenucolor a:hover {
  color: blue;
}

.bottommenucolor a:active {
  color: blue;
}

/* kleuren menu praktisch */

.praktischmenucolor a:link {
  color: black;
}

.praktischmenucolor a:focus {
  color: black;
}

.praktischmenucolor a:visited {
  color: black;
}

.praktischmenucolor a:hover {
  color: blue;
}

.praktischmenucolor a:active {
  color: blue;
}