/* Marquee - Image / Brands */

.fzt-marquee-animation-image-container {
    height: var(--height);
    overflow: hidden;
    width: 100%;
}

.fzt-marquee-animation-image-container .fzt-marquee-animation-image-list {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.fzt-marquee-animation-image-container .fzt-marquee-animation-image-list .fzt-marquee-animation-image-item {
    animation-delay: calc( (20s / var(--quantity)) * (var(--position) - var(--quantity)) ) !important;
    border-radius: 12px;
    height: var(--height);
    overflow: hidden;
    position: absolute;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    width: var(--width);
}

.fzt-marquee-animation-image-container .fzt-marquee-animation-image-list .fzt-marquee-animation-image-item img {
  height: auto;
  object-fit: cover;
  width: auto;
}

.fzt-marquee-animation-image-container:hover .fzt-marquee-animation-image-item {
  animation-play-state: paused !important;
  filter: grayscale(1);
}

.fzt-marquee-animation-image-container .fzt-marquee-animation-image-item:hover{
  filter: grayscale(0);
}

/* Marquee - Horizontal */

.fzt-marquee-animation-image-container.horizontal .fzt-marquee-animation-image-list {
  min-width: calc(var(--width) * var(--quantity));
}

.fzt-marquee-animation-image-container.horizontal .fzt-marquee-animation-image-list .fzt-marquee-animation-image-item {
  animation: marquee-horizontal 20s linear infinite;
  left: 100%;
}

.fzt-marquee-animation-image-container.horizontal.reverse .fzt-marquee-animation-image-item {
  animation: marquee-horizontal-reverse 20s linear infinite;
}

@keyframes marquee-horizontal {
  from{
    left: calc(var(--width) * -1);
  }to{
    left: 100%;
  }
}

@keyframes marquee-horizontal-reverse {
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}

/* Marquee - Vertical */

.fzt-marquee-animation-image-container.vertical {
  height: var(--marquee-height);
  width: var(--width);
}

.fzt-marquee-animation-image-container.vertical .fzt-marquee-animation-image-list {
  min-height: calc(var(--height) * var(--quantity));
}

.fzt-marquee-animation-image-container.vertical .fzt-marquee-animation-image-list .fzt-marquee-animation-image-item {
  animation: marquee-vertical 20s linear infinite;
  top: 100%;
}

.fzt-marquee-animation-image-container.vertical.reverse .fzt-marquee-animation-image-item {
  animation: marquee-vertical-reverse 20s linear infinite;
}

@keyframes marquee-vertical {
  from{
    top: calc(var(--height) * -1);
  }to{
    top: 100%;
  }
}

@keyframes marquee-vertical-reverse {
    from{
        top: 100%;
    }to{
        top: calc(var(--height) * -1);
    }
}