:root {
  --marqueeqbg-width: 60vw;
  --marqueeqbg-height: 25vh;
  /* --marqueeqbg-elements: 12; */ /* defined with JavaScript */
  --marqueeqbg-elements-displayed: 6;
  --marqueeqbg-element-width: calc(var(--marqueeqbg-width) / var(--marqueeqbg-elements-displayed));
  --marqueeqbg-animation-duration: calc(var(--marqueeqbg-elements) * 3s);
}

.marqueeqbg {
  /* width: var(--marqueeqbg-width); */
  /* width: var(--marqueeqbg-container-size); */
  width: calc(var(--marqueeqbg-element-width) * var(--marqueeqbg-elements-init));
  height: var(--marqueeqbg-height);
  /* background-color: #fff; */
  color: #eee;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.marqueeqbg:before, .marqueeqbg:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marqueeqbg:before {
  left: 0;
  /* background: linear-gradient(to right, var(--marqueeqbg-bodybg) 0%, transparent 100%);  */
}
.marqueeqbg:after {
  right: 0;
  /* background: linear-gradient(to left, var(--marqueeqbg-bodybg) 0%, transparent 100%); */
}
.marqueeqbg-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marqueeqbg-animation-duration) linear infinite;
}
 .marqueeqbg-content:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
} 
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marqueeqbg-element-width) * var(--marqueeqbg-elements))); }
}
.marqueeqbg-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* width: var(--marqueeqbg-element-width); */
  margin-right: 3vw;
  max-height: 100%;
  white-space: nowrap;
}

.marqueeqbg-content li img {
  height: 130px;

}

.marqueeqbg-content li img.filter {
    filter: sepia(95%) saturate(15%);
    
    }

/* @media (max-width: 800px) {
  html { font-size: 12px; }
  :root {
    --marqueeqbg-width: 90vw;
    --marqueeqbg-height: 25vh;
    --marqueeqbg-elements-displayed: 2;
    
  }
  .marqueeqbg {
    width: calc(var(--marqueeqbg-element-width) * var(--marqueeqbg-elements-init)); 
    height: var(--marqueeqbg-height);
}
  .marqueeqbg:before, .marqueeqbg:after { width: 5rem; }
} */


@media (max-width: 800px) {
  .marqueeqbg{display:none;}
}


.sepia_filter{
	filter:sepia(1);
}
.grayscale_filter{
	filter:grayscale(1)
}