.elementor-13562 .elementor-element.elementor-element-d81a0a0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery-item .gallery-caption{display:none;}/* Start custom CSS for image-gallery, class: .elementor-element-d81a0a1 *//* A continuously scrolling logo row, edge to edge. The scroll is a CSS
   animation rather than a carousel: a carousel's autoplay stops on a click
   and does not always resume. It does not pause on hover either.

   Logo size and spacing follow the screen width, so about ten logos are on
   screen on any desktop, even where the wide logos sit together. At 1920px:
   32px tall, at most 104px wide, 64px apart. The floors keep them legible on
   laptops and phones. */
.elementor-13562 .elementor-element.elementor-element-d81a0a1 {
    --ahjo-logo-gap: clamp(40px, 3.33vw, 64px);
    --ahjo-logo-height: clamp(26px, 1.67vw, 32px);
    --ahjo-logo-width: clamp(84px, 5.4vw, 104px);
    overflow: hidden;
}

/* Two identical rows side by side: the script in the HTML widget below makes
   the copy. The gap at the seam is the same gap as between the logos. */
.elementor-13562 .elementor-element.elementor-element-d81a0a1 .elementor-image-gallery {
    display: flex;
    gap: var(--ahjo-logo-gap);
    width: max-content;
}

.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ahjo-logo-gap);
    margin: 0 !important;
    animation: ahjo-logos-scroll 140s linear infinite;
}

/* The gallery's own column widths and spacing are switched off. */
.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery-item {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: none !important;
    height: var(--ahjo-logo-height);
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery-icon {
    line-height: 0;
}

/* The logos have different shapes, so both height and width are capped and
   the image is fitted inside the box, on a common centre line. */
.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery-item img {
    width: auto !important;
    height: auto !important;
    max-width: var(--ahjo-logo-width) !important;
    max-height: var(--ahjo-logo-height) !important;
    object-fit: contain;
    border: 0 !important;
}

/* An SVG with only a viewBox has no width of its own, and in a row that
   shrinks to its content width: auto collapses it to nothing. SVG logos get the
   full box instead, and object-fit keeps their shape inside it. */
.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery-item img[src$=".svg"] {
    width: var(--ahjo-logo-width) !important;
    height: var(--ahjo-logo-height) !important;
}

/* The shift is the row's own width plus the seam gap, so the copy lands
   exactly where the original started and the wrap is invisible. */
@keyframes ahjo-logos-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--ahjo-logo-gap)));
    }
}

/* The row is shorter on a phone, so the same 140s loop would crawl. */
@media (max-width: 899px) {
    .elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery {
        animation-duration: 90s;
    }
}

/* Motionless alternative: the row stays put and can be scrolled by hand. The
   copy is pointless, because nothing loops. */
@media (prefers-reduced-motion: reduce) {
    .elementor-13562 .elementor-element.elementor-element-d81a0a1 {
        overflow-x: auto;
    }

    .elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery {
        animation: none;
    }

    .elementor-13562 .elementor-element.elementor-element-d81a0a1 .ahjo-logos-clone {
        display: none;
    }
}

/* WordPress puts a <br> after every row of the gallery's column count. In
   the flex row each one is an empty item with a gap on both sides, which
   doubled the space after every sixth logo. */
.elementor-13562 .elementor-element.elementor-element-d81a0a1 .gallery > br {
	display: none;
}/* End custom CSS */