/* =========================================================
   SiteQode Marquee
   ========================================================= */

.sq-marquee-holder {
	--sq-marquee-width: 0px;
	--sq-marquee-height: 0px;
	--sq-marquee-margin-width: 0px;
	--sq-marquee-margin-height: 0px;
	--sq-marquee-duration: 20s;

	position: relative;
	width: 100%;
	overflow: hidden;
}


/* ---------------------------------------------------------
   Viewport
   --------------------------------------------------------- */

.sq-marquee-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}


/* ---------------------------------------------------------
   Track
   --------------------------------------------------------- */

.sq-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	min-width: max-content;
	will-change: transform;
}


/* ---------------------------------------------------------
   Content Set
   --------------------------------------------------------- */

.sq-marquee-content {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	flex-grow: 0;
	width: max-content;
	min-width: max-content;
	white-space: nowrap;
}


/* ---------------------------------------------------------
   Items
   --------------------------------------------------------- */

.sq-marquee-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	text-decoration: none;
	white-space: nowrap;
}

.sq-marquee-item:hover {
	text-decoration: none;
}


/* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */

.sq-marquee-text {
	display: inline-block;
	white-space: nowrap;
}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.sq-marquee-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.sq-marquee-image img {
	display: block;
	width: clamp(7.5rem, 5.8369rem + 3.4692vw, 10rem);
	max-width: none;
	height: clamp(3.5rem, 2.3359rem + 2.4284vw, 5.25rem);
	object-fit: contain;
}


/* ---------------------------------------------------------
   Icon
   --------------------------------------------------------- */

.sq-marquee-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}

.sq-marquee-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}


/* ---------------------------------------------------------
   Separator
   --------------------------------------------------------- */

.sq-marquee-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	white-space: nowrap;
}

.sq-marquee-separator img {
	display: block;
	width: auto;
	max-width: none;
	height: 1em;
}

.sq-marquee-separator svg {
	display: block;
	width: 1em;
	height: 1em;
}


/* =========================================================
   HORIZONTAL MARQUEE
   ========================================================= */

.sq-marquee-direction-left .sq-marquee-track {
	animation-name: sq-marquee-left;
	animation-duration: var(--sq-marquee-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes sq-marquee-left {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(
			var(--sq-marquee-margin-width),
			0,
			0
		);
	}
}


.sq-marquee-direction-right .sq-marquee-track {
	animation-name: sq-marquee-right;
	animation-duration: var(--sq-marquee-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes sq-marquee-right {
	from {
		transform: translate3d(
			var(--sq-marquee-margin-width),
			0,
			0
		);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}


/* =========================================================
   VERTICAL MARQUEE
   ========================================================= */

.sq-marquee-vertical {
	height: var(--sq-marquee-height);
}

.sq-marquee-vertical .sq-marquee-viewport {
	height: var(--sq-marquee-height);
}

.sq-marquee-vertical .sq-marquee-track {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.sq-marquee-vertical .sq-marquee-content {
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
}

.sq-marquee-content, .sq-marquee-track {
	gap: clamp(0.625rem, 0.1316rem + 1.9737vw, 2.5rem);
}


/* ---------------------------------------------------------
   Top
   --------------------------------------------------------- */

.sq-marquee-direction-top .sq-marquee-track {
	animation-name: sq-marquee-top;
	animation-duration: var(--sq-marquee-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes sq-marquee-top {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(
			0,
			var(--sq-marquee-margin-height),
			0
		);
	}
}


/* ---------------------------------------------------------
   Bottom
   --------------------------------------------------------- */

.sq-marquee-direction-bottom .sq-marquee-track {
	animation-name: sq-marquee-bottom;
	animation-duration: var(--sq-marquee-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes sq-marquee-bottom {
	from {
		transform: translate3d(
			0,
			var(--sq-marquee-margin-height),
			0
		);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}


/* =========================================================
   PAUSE ON HOVER
   ========================================================= */

.sq-marquee-holder[data-settings*='"pauseHover":true'] .sq-marquee-track:hover {
	animation-play-state: paused;
}


/* =========================================================
   REVERSE
   ========================================================= */

.sq-marquee-reverse.sq-marquee-direction-left .sq-marquee-track {
	animation-name: sq-marquee-right;
}

.sq-marquee-reverse.sq-marquee-direction-right .sq-marquee-track {
	animation-name: sq-marquee-left;
}

.sq-marquee-reverse.sq-marquee-direction-top .sq-marquee-track {
	animation-name: sq-marquee-bottom;
}

.sq-marquee-reverse.sq-marquee-direction-bottom .sq-marquee-track {
	animation-name: sq-marquee-top;
}


/* =========================================================
   EDGE FADE
   ========================================================= */

.sq-marquee-edge-fade .sq-marquee-viewport {
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.sq-marquee-edge-fade.sq-marquee-vertical .sq-marquee-viewport {
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);

	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.sq-marquee-vertical {
		height: var(--sq-marquee-height);
	}
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.sq-marquee-track {
		animation-play-state: paused !important;
		animation-duration: 0s !important;
		transform: none !important;
	}
}