/* Footer logo banners ("Some of our Customers" / "Some of our Recent Awards").
   Continuous, linear scroll with faded edges, modelled on the wavesystems.com.au logo tape.
   Customers scroll left, awards scroll right. Driven by /hubfs/scripts/cpx-logo-marquee.js. */
.cpx-our-customers-logos .flexslider.carousel,
.cpx-our-customers-logos .flexslider2.carousel {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.cpx-our-customers-logos .flexslider.carousel .slides,
.cpx-our-customers-logos .flexslider2.carousel .slides {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    margin: 0;
}

.cpx-our-customers-logos .flexslider.carousel .slides > li,
.cpx-our-customers-logos .flexslider2.carousel .slides > li {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    float: none;
    width: 176px !important;
    height: 80px;
    margin-right: 0;
}

/* Compact tape (like wavesystems.com.au): grey heading bar, short band, logos capped at a uniform height,
   no legacy flexslider min-height or the stray <p>/<br> that sat above the logos. */
.cpx-our-customers h2 {
    margin: 0 !important;
    padding: 6px 27px !important;
    line-height: 1.1 !important;
}

.cpx-our-customers-logos .carousel > p,
.cpx-our-customers-logos .carousel > br {
    display: none !important;
}

.cpx-our-customers-logos .flexslider.carousel,
.cpx-our-customers-logos .flexslider2.carousel {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 0 18px !important;
}

.cpx-our-customers-logos .slides > li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cpx-our-customers-logos .slides img {
    width: auto !important;
    height: auto !important;
    max-width: 140px !important;
    max-height: 80px !important;
    margin: 0 !important;
}

#hs_cos_wrapper_our_awards .cpx-our-customers-logos .slides img {
    max-height: 72px !important;
}

.cpx-logo-marquee--left .slides {
    animation: cpx-logo-marquee-left 60s linear infinite;
    will-change: transform;
}

.cpx-logo-marquee--right .slides {
    animation: cpx-logo-marquee-right 60s linear infinite;
    will-change: transform;
}

@keyframes cpx-logo-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes cpx-logo-marquee-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media screen and (max-width: 768px) {
    .cpx-our-customers-logos .flexslider.carousel .slides > li,
    .cpx-our-customers-logos .flexslider2.carousel .slides > li {
        width: 33vw !important;
        height: 60px;
    }

    .cpx-our-customers-logos .flexslider.carousel,
    .cpx-our-customers-logos .flexslider2.carousel {
        padding: 10px 0 14px !important;
    }

    .cpx-our-customers-logos .slides img,
    #hs_cos_wrapper_our_awards .cpx-our-customers-logos .slides img {
        max-width: 100px !important;
        max-height: 60px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpx-logo-marquee--left .slides,
    .cpx-logo-marquee--right .slides {
        animation: none;
    }
}