.module-events #submenu {
  display: block !important;
}

@media (min-width: 992px) {
    .module-events .heading-image {
        max-width: 50%;
        padding-bottom: 28.125% !important;
    }
}


/* Define a custom CSS property '--num' that can be animated as an integer */
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

/* Basisstijl voor animatie-elementen */
.number-animation {
  --num: 0;
  counter-reset: num var(--num);
  display: inline-block;
  font-size: 2rem;
  margin: 10px;
  position: relative;
}

/* Toon de teller */
.number-animation::after {
  content: counter(num);
}

/* Pseudo-element voor '+' teken, standaard verborgen */
.number-animation::before {
  content: "+";
  opacity: 0;
  margin-left: 0.2ch; /* kleine ruimte na het getal */
}

/* Animaties per doelwaarde */
.number-animation--21 {
  animation: count-to-21 2s linear forwards;
}
.number-animation--270 {
  animation: count-to-270 3s linear forwards;
}
.number-animation--1200 {
  animation: count-to-1200 5s linear forwards;
}
.number-animation--1400 {
  animation: count-to-1400 6s linear forwards;
}

/* Keyframes voor tellen */
@keyframes count-to-21   { from { --num: 0; } to { --num: 21; } }
@keyframes count-to-270  { from { --num: 0; } to { --num: 270; } }
@keyframes count-to-1200 { from { --num: 0; } to { --num: 1200; } }
@keyframes count-to-1400 { from { --num: 0; } to { --num: 1400; } }

/* Keyframes voor '+' teken, verschijnt na vertraging gelijk aan animatieduur */
.number-animation--21::before {
  animation: show-plus 1s linear 2s forwards; /* vertraging = 2s */
}
.number-animation--270::before {
  animation: show-plus 1s linear 3s forwards; /* vertraging = 3s */
}
.number-animation--1200::before {
  animation: show-plus 1s linear 5s forwards; /* vertraging = 5s */
}
.number-animation--1400::before {
  animation: show-plus 1s linear 6s forwards; /* vertraging = 6s */
}

@keyframes show-plus {
  from { opacity: 0; }
  to   { opacity: 1; }
}

footer{
    background-color: #5b89ba;
    color: #fff;
}
footer .headline {
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.social-icons li a {
	background-color: rgba(255,255,255,.2);
}
dl.headlines.headlines-footer dd .text-muted {
	color: rgba(255,255,255,.5);
}
footer a,
dl.headlines.headlines-footer dd a {
	color: #ddd;
    color: rgba(255,255,255,.7);
}
footer a:focus,
footer a:hover,
dl.headlines.headlines-footer dd a:focus,
dl.headlines.headlines-footer dd a:hover {
	color: #fff;
}

footer {
    border-top: var(--congresus-header-border) !important;
    border-bottom: var(--congresus-header-border) !important;
}



.logo {
    /* ... jouw logo styling ... */
}

:root {
  /* Pas hier de headerkleur aan */
  --congresus-header-color: #5b89ba;
  --congresus-header-text-color: #ffffff;

  /* Gele lijn: pas kleur/dikte hier aan */
  --congresus-header-border: 4px solid #f5d000; /* gele lijn */
}

/* Algemene Congresus-header */
header,
.congresus-header,
#header,
.site-header {
  background-color: var(--congresus-header-color) !important;
  color: var(--congresus-header-text-color) !important;

  /* Gele lijn onder de header */
  border-bottom: var(--congresus-header-border) !important;
}

/* Eventuele tekst/links in de header */
header a,
.congresus-header a,
#header a,
.site-header a {
  color: var(--congresus-header-text-color) !important;
}


.instagram-media {
    max-width: 540px !important;  /* breedte blijft hetzelfde */
    width: 100% !important;
    min-width: 500px !important;
}

/* Het echte iframe langer maken */
.instagram-media iframe {
    height: 900px !important;  /* maak langer (pas aan naar wens) */
}