/* 
 * scrolling ticker css 
 * */

.scrolling-ticker {
	padding: 10px 0;
}

.scrolling-ticker-box {
	--gap: 20px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}

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

.scrolling-content-reverse{
	animation: scroll_reverse 20s linear infinite;
}

.scrolling-content .content-wrapper,
.scrolling-content-reverse .content-wrapper{
	display: inline-flex;
	gap: var(--gap);
	align-items: center;
}

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

.content-wrapper .ticker-icon{
	line-height: 0;
	width: 16px;
	height: 16px;
}

.content-wrapper .ticker-icon svg{
	width: 16px;
	height: 16px;
	fill: var(--e-global-color-primary);
}

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

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

@keyframes scroll_reverse{
	from{
		transform: translateX(-100%);
	}

	to{
		transform: translateX(calc(0 + var(--gap)));
	}
}


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

@media only screen and (max-width: 767px){
	
	.scrolling-ticker-box{
		--gap: 10px;
	}
	
	.content-wrapper .ticker-title{
		font-size: 12px;
		letter-spacing: 0.5px;
	}
	
}