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;
}

/* 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; }
}