/*-------------------------------------------------------------------------------------------------------

KEYFRAMES

-------------------------------------------------------------------------------------------------------*/

@keyframes carousel {
	from {
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
}

/*-------------------------------------------------------------------------------------------------------

SPONSORS

-------------------------------------------------------------------------------------------------------*/

#sponsors {
    --sponsors-section-height: 11.5;
    --sponsors-section-icon-width: 8.25;
    --sponsors-section-icon-height: 4.125;
    
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    
    position: relative;
    
	background: rgb(250, 250, 250);
    outline: calc(1px / var(--zoom-multiplier, 1)) solid rgb(240, 240, 240);

	width: 100%;
	height: calc(var(--base-page-size) * var(--sponsors-section-height));

	overflow: hidden;
	z-index: 32;
}

#sponsors .carousel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	
	-webkit-filter: brightness(0);
    -moz-filter: brightness(0);
    -o-filter: brightness(0);
	filter: brightness(0);
	
	flex-shrink: 0;
	flex-grow: 0;
	
	width: 400%;
	height: 100%;
	
	animation: carousel 120s linear 0s infinite normal backwards running;
}

#sponsors:hover .carousel {
	animation-play-state: paused;
}

#sponsors .sponsor-item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	opacity: 0.5;
	width: calc(var(--base-page-size) * var(--sponsors-section-icon-width));
	height: calc(var(--base-page-size) * var(--sponsors-section-icon-height));

	transition: opacity var(--transition-medium);
}

#sponsors .sponsor-item:hover {
	opacity: 0.75;
}

#sponsors .sponsor-item img {	
	object-fit: contain;

	width: 100%;
	height: 100%;
}