/*!
 * ND Aldar logo carousel 1.0.2 (Nobel Digital)
 * For the Enfold Partner/Logo element, layout "Grid", custom CSS class "aldar-logo-carousel".
 * Same look as the old Logo Carousel Slider on www.aldar.ee. The first frame is
 * drawn here before the script runs, so the strip does not jump when it starts.
 */

/* Logos visible at the same time (old Owl breakpoints: 0 / 500 / 768 / 1199 px) */
#top .avia-logo-element-container.aldar-logo-carousel {
	--alc-visible: 2;
	position: relative;
	margin: 0;
	overflow: hidden;
	overflow: clip;
	touch-action: pan-y;
}

@media only screen and (min-width: 500px) {
	#top .avia-logo-element-container.aldar-logo-carousel {
		--alc-visible: 3;
	}
}

@media only screen and (min-width: 768px) {
	#top .avia-logo-element-container.aldar-logo-carousel {
		--alc-visible: 4;
	}
}

@media only screen and (min-width: 1199px) {
	#top .avia-logo-element-container.aldar-logo-carousel {
		--alc-visible: 5;
	}
}

/* No element heading: the section has its own "Meie kaubamärgid" heading above */
#top .avia-logo-element-container.aldar-logo-carousel .avia-smallarrow-slider-heading {
	display: none;
}

/* The strip */
#top .avia-logo-element-container.aldar-logo-carousel .avia-content-slider-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center; /* a logo that is not exactly 3:1 sits in the middle of the row */
	overflow: visible;
	transform: translate3d(calc(-100% / var(--alc-visible) * var(--alc-pos, 0) + var(--alc-drag, 0px)), 0, 0);
}

#top .avia-logo-element-container.aldar-logo-carousel.alc-ready .avia-content-slider-inner {
	transition: transform 1s ease;
}

#top .avia-logo-element-container.aldar-logo-carousel.alc-ready.alc-no-anim .avia-content-slider-inner {
	transition: none;
}

#top .avia-logo-element-container.aldar-logo-carousel.alc-dragging {
	cursor: grabbing;
}

/* Enfold puts the logos in rows of 5; show them as one row */
#top .avia-logo-element-container.aldar-logo-carousel .slide-entry-wrap {
	display: contents;
}

/* One logo cell. The class is repeated on purpose: it must beat Enfold's mobile column rules. */
#top .avia-logo-element-container.aldar-logo-carousel .slide-entry.slide-entry,
.responsive #top #wrap_all .avia-logo-element-container.aldar-logo-carousel .slide-entry.slide-entry {
	flex: 0 0 calc(100% / var(--alc-visible));
	box-sizing: border-box;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 6px;
	float: none;
	clear: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Old plugin: 6px margin + 6px padding around each logo */
#top .avia-logo-element-container.aldar-logo-carousel .slide-entry > .slide-image {
	display: block;
	margin: 0;
	padding: 6px;
	overflow: visible;
	border-radius: 0;
}

#top .avia-logo-element-container.aldar-logo-carousel .slide-entry img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 0;
	box-shadow: none;
	-webkit-user-drag: none;
	transition: transform 0.3s ease;
}

/* A logo without a link: same spacing as a linked one */
#top .avia-logo-element-container.aldar-logo-carousel .slide-entry > img {
	padding: 6px;
}

/* Old plugin hover: logo grows by 5 % */
#top .avia-logo-element-container.aldar-logo-carousel .slide-entry > .slide-image:hover img,
#top .avia-logo-element-container.aldar-logo-carousel .slide-entry > img:hover {
	transform: scale(1.05);
}