body {
	font-family: "Satoshi", sans-serif;
	font-weight: 500;
	font-size: 20px;
	text-align: center;
}

.game-cs2 ~ .bg-img { background-image: url('../mockups/ingame_cs2.jpg'); }
.game-lol ~ .bg-img { background-image: url('../mockups/ingame_lol.jpg'); }
.game-val ~ .bg-img { background-image: url('../mockups/ingame_valorant.jpg'); }

#sponsors {
	position: absolute;
	width: 12em;
	height: 4em;
	/*background-color: rgba(var(--black-rgb), 0.5);*/
	background: rgba(var(--black-rgb), 0.65);
}
#sponsors.big {
	width: 480px;
	height: 180px;
	font-size: 30px;
}
#sponsors.ingame {
	width: 311px;
	height: 90px;
	bottom: 550px;
	right: 17px;
}
#sponsors.game-cs2 {
	left: 50%;
	transform: translateX(-50%);
	right: auto;
	width: 412px;
	height: 90px;
	bottom: 37px;
}
#sponsors.game-lol {
	left: 16px;
	right: auto;
	width: 276px;
	height: 100px;
	bottom: 16px;
}
#sponsors.game-val {
	left: auto;
	right: 17px;
	width: 310px;
	height: 90px;
	bottom: 550px;
}

#sponsors.fullscreen:before,
#sponsors[class*="game-"]:before {
	content: '';
}

#sponsors:before {
	content: 'Partners';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	font-size: 1em;
}
#sponsors:after {
}
#sponsor-items {
	position: relative;
	left: 1.25em;
	right: 1.25em;
	top: 1em;
	bottom: 1em;
	width: calc(100% - 2.5em);
	height: calc(100% - 2em);
	overflow: hidden;
}
#sponsor-items .item {
	position: absolute;
	left:0; right:0;
	top:0; bottom:0;
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
	overflow: hidden;

	animation-name: sponsor-hide-anim;
	animation-duration: 1s;
	opacity: 0;
}
#sponsor-items .item.visible {
	animation-name: sponsor-show-anim;
	opacity:1;
}

#sponsors.game-lol .item {
	animation-name: none;
}

.banner#sponsors {
	background-color: transparent;
	left: 0;
	top: 0;
	width: 512px;
	height: 256px;
}

.delay .item {
	animation-delay: 1s;
}

.sponsors {
	bottom: var(--bottom-offset);
	right: var(--right-offset);
}
.sponsors.ticker {
	bottom: calc(100px + 60px + 10px);
}
.top {
	top: 100px;
	bottom: auto;
}
.left {
	left: 125px;
	right: auto;
}
.center {
	left: 50%;
	transform: translateX(-50%);
	right: auto;
}

#sponsors.fullscreen {
    left: 1em;
    right: 1em;
    top: 1em;
    bottom: 2em;
    font-size: 60px;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
}

@keyframes sponsor-hide-anim {
    0% {
      opacity:1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity:0;
    }
}
@keyframes sponsor-show-anim {
    0% {
      opacity:0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity:1;
    }
}
@keyframes sponsor-hide-quick {
 0%,100% { opacity: 0; }
}
@keyframes sponsor-show-quick {
 0%,100% { opacity: 1; }
}

/* Match decoration */
.sponsor-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: -1;
	color: var(--primary-color);
	z-index: 10;
	height: 100%;
}
.corners:before,
.corners:after {
	content: '';
	position: absolute;
	border: 3px solid;
	width: 1em;
	height: 1em;
}
.corners:before {
	border-right-width: 0;
	left: 0;
}
.corners:after {
	border-left-width: 0;
	right: 0;
}
.corners-top:before,
.corners-top:after {
	border-bottom-width: 0;
	top: 0;
}
.corners-bottom:before,
.corners-bottom:after {
	border-top-width: 0;
	bottom: 0;
}