/*
 * Image Scrolling Ticker CSS
 * */

.image-scrolling-ticker{
	--gap: 80px;
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}

.image-scrolling-ticker:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(90deg, var(--e-global-color-secondary) 0%, transparent 50%, var(--e-global-color-secondary) 100%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.bg-color .image-scrolling-ticker:before{
	background: linear-gradient(90deg, var(--bg-color) 0%, transparent 50%, var(--bg-color) 100%);
}

.image-scrolling-ticker .image-scrolling-content{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--gap);
	min-width: 100%;
	animation: imgscroll 20s linear infinite;
}

@keyframes imgscroll{
	from{
		transform: translateX(0);
	}to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.image-scrolling-ticker:hover .image-scrolling-content{
	animation-play-state: paused;
}

.image-scrolling-content .content-wrapper{
	margin: 0;
	line-height: 0;
	overflow: hidden;
}

.image-scrolling-content .content-wrapper img{
	width: 100%;
	max-width: 170px;
}

@media only screen and (max-width: 1024px){

	.image-scrolling-content .content-wrapper img{
		max-width: 130px;
	}
}

@media only screen and (max-width: 767px){

	.image-scrolling-ticker{
		--gap: 20px;
	}
	
	.image-scrolling-content .content-wrapper img{
		max-width: 80px;
	}
	
}