:root {
  --primary-color: #5FBF75;
  --secondary-color: #3E7FB1;
  --third-color: #6BC9F4;
  --fourth-color: #F5B942;

  --primary-color-light: #A7E3B7;
  --primary-color-dark: #2E5A3A;

  --secondary-color-light: #9EC4DF;
  --secondary-color-dark: #244E73;

  --contrast-color: #F5B942;

  --text-color: #1F2933;
  --light-color: #F4F6F8;
}

/* Steps */
#steps {
  background-color: var(--primary-color-dark);
  color: white;
}

#steps .container>div {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

#steps h1 {
  color: white;
}

#steps h1 span {
  color: var(--third-color);
}

#steps .step {
  position: relative;
  padding: 0.2em 0.8em;
  white-space: nowrap;
  border-radius: 0.2em;
}

#steps .step.current {
  background-color: var(--third-color);
  color: var(--primary-color-dark);
  font-weight: 800;
}

@media (max-width: 599px) {
  #steps .step {
    font-size: 0.8em;
    padding: 0.2em 0.4em;
  }
}

#steps .steps-headline {
  margin: 1em auto 0;
}

#steps .steps-headline h1 {
  color: white;
  margin: 0;
}

@media (max-width: 599px) {
  #steps .steps-headline h1 {
    font-size: 1em;
  }
}

#steps .steps-headline h1 span {
  color: var(--third-color);
}

#steps .inner-divisor {
  height: 4px;
  max-width: 100px !important;
  margin-top: 0.5em;
  border-bottom: 6px dotted var(--secondary-color);
}
  /* Steps */


footer {
  background-color: var(--primary-color-dark);
}

footer .container {
  max-width: 1100px;
}

footer a:hover {
  opacity: 0.75;
}

footer .statements {
  font-size: 0.7em;
}

footer .small {
  font-size: 0.8em;
}