.bg--white {
  background: #ffffff !important;
}

.color--white {
  color: #ffffff !important;
}

.bg--black {
  background: #000000 !important;
}

.color--black {
  color: #000000 !important;
}

.bg--blue {
  background: #004797 !important;
}

.color--blue {
  color: #004797 !important;
}

.bg--darkblue {
  background: #212B59 !important;
}

.color--darkblue {
  color: #212B59 !important;
}

.bg--purple {
  background: #8C1D82 !important;
}

.color--purple {
  color: #8C1D82 !important;
}

.bg--orange {
  background: #F08300 !important;
}

.color--orange {
  color: #F08300 !important;
}

.bg--pastelblue {
  background: #E8EDFF !important;
}

.color--pastelblue {
  color: #E8EDFF !important;
}

.bg--pastelorange {
  background: #FBE9D5 !important;
}

.color--pastelorange {
  color: #FBE9D5 !important;
}

:root {
  --marquee-width: 100vw;
  --marquee-height: 20vh;
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 30s);
}
@media screen and (max-width: 1200px) {
  :root {
    --marquee-elements-displayed: 4;
  }
}
@media screen and (max-width: 992px) {
  :root {
    --marquee-elements-displayed: 3;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --marquee-elements-displayed: 2;
  }
}
@media screen and (max-width: 576px) {
  :root {
    --marquee-elements-displayed: 1.5;
    --marquee-animation-duration: calc(var(--marquee-elements) * 20s);
  }
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  overflow: hidden;
  position: relative;
  height: 80px;
}

.marquee-content {
  list-style: none;
  height: 80px;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
  }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: var(--marquee-element-width);
  white-space: nowrap;
  height: 80px;
}

.marquee-content li img {
  max-width: 200px;
  max-height: 80px;
  width: auto;
  height: auto;
  filter: grayscale(100%) brightness(200%) contrast(90%);
  opacity: 0.8;
}

/*# sourceMappingURL=style.css.map */