.widget-scrolling-ticker{
	background-color: var(--e-global-color-accent);
	padding: 15px 0;
}

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

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 50s linear infinite;
}

.scrolling-content.scrolling-content-reverse{
	animation: scroll_r 50s linear infinite;
}

.scrolling-content .content-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.scrolling-content .content-wrapper .ticker-icon .icon-wrapper,
.scrolling-content .content-wrapper .ticker-icon .icon-wrapper svg{
	width: 20px;
	height: 20px;
}

.scrolling-content .content-wrapper .ticker-icon .icon-wrapper svg{
	fill: var(--white-color);
}

.scrolling-content .content-wrapper .ticker-title{
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: 17px;
	font-weight: var(--e-global-typography-primary-font-weight);
	text-transform: var(--e-global-typography-primary-text-transform);
	font-style: var(--e-global-typography-primary-font-style);
	line-height: var(--e-global-typography-primary-line-height);
	color: var(--e-global-color-330beae);
	margin: 0;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

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

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

	to{
		transform: translateX(0);
	}
}


@media only screen and (max-width: 1024px){
	
	.widget-scrolling-ticker{		
		padding: 15px 0;
	}

	.scrolling-content .content-wrapper .ticker-icon .icon-wrapper, 
	.scrolling-content .content-wrapper .ticker-icon .icon-wrapper svg{
		width: 20px;
		height: 20px;
	}

	.scrolling-content .content-wrapper .ticker-title{
		font-size: 16px;
	}
	
}

@media only screen and (max-width: 767px){
	
	.widget-scrolling-ticker{		
		padding: 10px 0;
	}
	
	.scrolling-ticker{
		--gap: 20px;
	}
	
	.scrolling-content .content-wrapper{
		gap: 10px;
	}
	
	.scrolling-content .content-wrapper .ticker-icon .icon-wrapper, 
	.scrolling-content .content-wrapper .ticker-icon .icon-wrapper svg{
		width: 18px;
		height: 18px;
	}
	
	.scrolling-content .content-wrapper .ticker-title{
		font-size: 14px;
	}
	
}