:root {
	--logos-marquee-length: 0;
	--ad-partners-marquee-length: 0;
	--images-1-marquee-length: 0;
	--images-2-marquee-length: 0;
	--scroll-text-marquee-length: 0;
}

.marquee_item {
    height: 150px;
	padding: 0 1.5rem;
}
.marquee .marquee_item img {
    height: 100%;
    width: auto;
}
.marquee_item > figure.image-wrapper {
    height: 100%;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}
.marquee_inner {
    display: flex;
    min-width: 400%;
    height: 150px;
    position: absolute;
    overflow: hidden;
    animation: logos 18s linear infinite;
	align-items: center;
}
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 150px;
}
.marquee_item figure > a {
    display: inline-block;
    width: 100%;
    height: 100%;
}


div#images-1-marquee {
    height: 250px;
}

div#images-1-marquee .marquee_item {
    height: 250px;
}

div#images-1-marquee .marquee_inner {
	animation: marquee-1 22s linear infinite;
	height: 250px;
	min-width: 200%;
}
div#images-2-marquee .marquee_inner {
	animation: marquee-2 12s linear infinite;
	height: 250px;
	min-width: 300%;
}
div#ad-platforms-marquee .marquee_inner {
    animation: ad-platforms 18s linear infinite;
}
@keyframes logos {
	0% { left: 0; }
	100% { left: var(--logos-marquee-length); }
}
@keyframes ad-platforms {
	0% { left: 0; }
	100% { left: var(--ad-platforms-marquee-length); }
}
@keyframes marquee-1 {
	0% { left: 0; }
	100% { left: var(--images-1-marquee-length); }
}
@keyframes marquee-2 {
	0% { left: 0; }
	100% { left: var(--images-2-marquee-length); }
}
@keyframes scrolling-text {
	0% { left: 0; }
	100% { left: var(--scroll-text-marquee-length); }
}
div#images-2-marquee {
    height: 250px;
}

div#images-2-marquee .marquee_item {
    height: 250px;
}

#main #logos-marquee:hover .marquee_inner {
	-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
  	animation-play-state: paused;
}
#logos-marquee .marquee_item {
	padding: 1rem;
}
#logos-marquee .marquee_item img,
div#images-2-marquee .marquee_item img,
div#images-1-marquee .marquee_item img {
    height: 100%;
    width: auto;
    max-width: none;
}
div#scroll-text-marquee {
    height: 4.5rem;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3rem;
}
div#scroll-text-marquee .marquee_inner {
    min-width: 500%;
	animation: scrolling-text 30s linear infinite;
}

span.scrolling-text {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 5px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    display: block;
    white-space: pre;
    padding-right: 4rem;
    position: relative;
    padding-left: 1rem;
}
span.scrolling-text::after {
    content: '';
    position: absolute;
    right: 0;
    background-image: url(/wp-content/uploads/2025/06/Star-Green.png);
    width: 35px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    transform: translateX(50%);
}
.marquee_outer+.marquee_outer {
    margin-top: 2rem;
}

#logos-marquee .marquee_item > figure.image-wrapper {
    padding: 1rem;
    border-radius: 8px;
	transition: 0.3s all ease-in-out;
}
#logos-marquee figure.image-wrapper:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
#ad-platforms-marquee,
#ad-platforms-marquee .marquee_inner,
#ad-platforms-marquee .marquee_item {
	height: 75px;
}
div#ad-platforms-marquee .marquee_item img {
    width: auto;
    max-height: 75px;
    max-width: 155px;
    height: auto;
}

@media screen and (max-width: 768px) {
	#logos-marquee,
	#logos-marquee .marquee_inner,
	#logos-marquee .marquee_item {
		height: 75px;
	}
    #logos-marquee .marquee_item {
        height: 75px;
		padding: 0.5rem;
    }
	#logos-marquee .marquee_item > figure.image-wrapper {
		padding: 0.5rem;
	}
	span.scrolling-text::after {
		width: 24px;
		transform: translateX(100%);
	}
	span.scrolling-text {
		font-size: 1.5rem;
		padding-right: 1rem;
		padding-left: 0rem;
	}
	div#scroll-text-marquee .marquee_inner {
		animation: scrolling-text 45s linear infinite;
	}
	div#images-2-marquee .marquee_inner {
		animation: marquee-2 25s linear infinite;
	}
}