@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,800&family=Roboto:ital,wght@1,700&display=swap");
:root {
	--mFont: "Montserrat", sans-serif;
	--mStyle: italic;
	--mWeight: 800;
	--nameDate: "Roboto", sans-serif;
}

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.banner {
	margin: 0 auto;
	min-width: 280px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #020315;
	font-size: 1vw;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
}
.banner div {
	position: absolute;
}
.banner img {
	position: absolute;
}

.logo-wrapper {
	width: 41.6666666667em;
	height: 10.4166666667em;
	top: 3.4em;
	left: -6.5em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 5;
}

.logo {
	position: absolute;
	width: 19.7916666667em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.btn-wrapper {
	width: 100%;
	height: 10.4166666667em;
	top: 50%;
	left: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transform: translate(-49%, 138%);
	-ms-transform: translate(-49%, 138%);
	transform: translate(-49%, 138%);
	z-index: 5;
}

.btn {
	font-size: 1.87em;
	width: 11em;
	height: 2.3em;
	color: #21272b;
	border-radius: 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	z-index: 10;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	background: none !important;
	-webkit-box-shadow:
		inset 0 0 0 0.1em #9ee607,
		0 0 0.2em 0 #9ee607;
	box-shadow:
		inset 0 0 0 0.1em #9ee607,
		0 0 0.2em 0 #9ee607;
	padding: 0.4em;
	position: relative !important;
}
.btn::before {
	content: "";
	width: 100%;
	height: 300%;
	position: absolute;
	background: linear-gradient(
		110deg,
		rgba(255, 255, 255, 0) 35%,
		rgb(255, 255, 255) 45%,
		rgb(255, 255, 255) 55%,
		rgba(255, 255, 255, 0) 65%
	);
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
}
.btn::after {
	content: "";
	width: calc(100% - 0.8em);
	height: calc(100% - 0.8em);
	position: absolute;
	border-radius: 2em;
	-webkit-box-shadow:
		inset 0 0.1em 0 0 #c4fe89,
		0 0 0.4em 0 #9ee607;
	box-shadow:
		inset 0 0.1em 0 0 #c4fe89,
		0 0 0.4em 0 #9ee607;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #9ee607;
	z-index: -1;
}

.wrapper {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

.txt-1-wrapper {
	width: 41.6666666667em;
	height: 18.2291666667em;
	line-height: 1.2;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-41%, 3%) rotate(-4deg);
	-ms-transform: translate(-41%, 3%) rotate(-4deg);
	transform: translate(-41%, 3%) rotate(-4deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 5;
}
.txt-1-wrapper::before {
	content: "";
	width: 30.5729166667em;
	height: 6.5104166667em;
	bottom: -1.7em;
	left: 50%;
	position: absolute;
	-webkit-transform: translateX(-30%) rotate(4deg);
	-ms-transform: translateX(-30%) rotate(4deg);
	transform: translateX(-30%) rotate(4deg);
	background: url(../img/txt-bg.png) no-repeat center center/contain;
}
.txt-1-wrapper .txt-1 {
	font-size: 3.7em;
	width: 100%;
	position: relative;
	font-family: var(--mFont);
	font-style: var(--mStyle);
	font-weight: var(--mWeight);
	text-align: right;
}
.txt-1-wrapper .txt-1 .first {
	font-size: 1.13em;
}
.txt-1-wrapper .txt-1 .second {
	display: block;
	background: -webkit-linear-gradient(#bff937, #84d900);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.txt-1-wrapper .txt-1.shadow {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: transparent;
	text-shadow: 0.05em 0.1em 0.3em #0a0e18;
}

.bg {
	width: 100em;
	height: 62.5em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: url(../img/stadium.jpg) no-repeat center center/contain;
}

.side-left {
	width: 100em;
	height: 52.0833333333em;
	top: 0;
	left: -34em;
	-webkit-transform: translateY(-50%) rotate(-45deg);
	-ms-transform: translateY(-50%) rotate(-45deg);
	transform: translateY(-50%) rotate(-45deg);
	background: -webkit-gradient(linear, left top, right top, color-stop(41%, #67a6e1), color-stop(66%, #cee6f8));
	background: linear-gradient(90deg, #67a6e1 41%, #cee6f8 66%);
	z-index: 3;
}
.side-left::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: -1.8em;
	right: 0;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
	background: -webkit-gradient(linear, left bottom, left top, from(#001f6a), color-stop(50%, #030d2b));
	background: linear-gradient(0, #001f6a 0%, #030d2b 50%);
}
.side-left::after {
	content: "";
	width: 2.6em;
	height: 108%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-1433%, -5.5%) rotate(51deg) skewX(-38deg);
	-ms-transform: translate(-1433%, -5.5%) rotate(51deg) skewX(-38deg);
	transform: translate(-1433%, -5.5%) rotate(51deg) skewX(-38deg);
	background: #0168bc;
}

.teams {
	width: 52.5em;
	height: 41.6666666667em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-48%, -61%);
	-ms-transform: translate(-48%, -61%);
	transform: translate(-48%, -61%);
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 10;
	opacity: 0;
}
.teams__main {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 23.1770833333em;
}
.teams.ev-show {
	animation: show 4s;
}
.teams.ev-show .flag__first img {
	animation: logo-1 4s;
}
.teams.ev-show .flag__second img {
	animation: logo-2 4s;
}
.btn-wrapper.ev-show .btn::before {
	animation: glare 4s linear;
}
@keyframes show {
	from,
	5%,
	to {
		opacity: 0;
	}
	15%,
	90% {
		opacity: 1;
	}
}
@keyframes logo-1 {
	from,
	5%,
	to {
		transform: translate(-80%, -50%);
		opacity: 0;
	}
	15%,
	90% {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}
@keyframes logo-2 {
	from,
	5%,
	to {
		transform: translate(-20%, -50%);
		opacity: 0;
	}
	15%,
	90% {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}
@-webkit-keyframes glare {
	from,
	0.0001%,
	40% {
		-webkit-transform: translate(-100%, -50%);
		transform: translate(-100%, -50%);
		opacity: 1;
	}
	60%,
	to {
		-webkit-transform: translate(100%, -50%);
		transform: translate(100%, -50%);
		opacity: 1;
	}
}
@keyframes glare {
	from,
	0.0001%,
	40% {
		-webkit-transform: translate(-100%, -50%);
		transform: translate(-100%, -50%);
		opacity: 1;
	}
	60%,
	to {
		-webkit-transform: translate(100%, -50%);
		transform: translate(100%, -50%);
		opacity: 1;
	}
}
.name {
	width: 17.7083333333em;
	width: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative !important;
}
.name__txt {
	height: 4.375em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-family: var(--nameDate);
	font-style: italic;
	border-radius: 5em;
	padding: 0 1.6em;
	border: 0.2em solid #fff;
	-webkit-box-shadow:
		inset 0 0 0.8em #29ecff,
		0 0 0.8em #29ecff;
	box-shadow:
		inset 0 0 0.8em #29ecff,
		0 0 0.8em #29ecff;
	text-shadow: 0 0em 0.6em #020f30;
	background:
		radial-gradient(35% 100% at left center, #a8d0f8 0%, #4b8ed4 45%, transparent 100%),
		radial-gradient(35% 100% at right center, #a8d0f8 0%, #4b8ed4 45%, transparent 100%),
		-webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(30, #1d64b7),
				color-stop(50%, #0649a9),
				color-stop(70%, #1d64b7)
			);
	background:
		radial-gradient(35% 100% at left center, #a8d0f8 0%, #4b8ed4 45%, transparent 100%),
		radial-gradient(35% 100% at right center, #a8d0f8 0%, #4b8ed4 45%, transparent 100%),
		linear-gradient(0, #1d64b7 30, #0649a9 50%, #1d64b7 70%);
}
.name__txt span {
	font-size: 1.6em;
}
.side-left-light {
	width: 88.0729166667em;
	height: 66.40625em;
	top: -17em;
	left: -22em;
	background: url(../img/light.png) no-repeat center center / contain;
	z-index: 4;
}
.flag {
	width: 100%;
	height: 18.2291666667em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.flag__main {
	width: 17.96875em;
	height: 17.96875em;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative !important;
	-webkit-filter: drop-shadow(0 0 1.4em rgba(5, 11, 25, 0.7));
	filter: drop-shadow(0 0 1.4em rgba(5, 11, 25, 0.7));
}
.flag__main img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140%;
	display: block;
}

.vs {
	width: 17.416667em;
	height: 13.614583em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -34%);
	-ms-transform: translate(-50%, -34%);
	transform: translate(-50%, -34%);
	background: url(../img/VS.png) no-repeat center center/contain;
}
.vs::before {
	content: "";
	width: 37.416667em;
	height: 26.614583em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -35%);
	-ms-transform: translate(-50%, -35%);
	transform: translate(-48%, -35%);
	position: absolute;
	background: url(../img/light-vs.png) no-repeat center center / contain;
}
.date {
	width: 20.0520833333em;
	height: 4.6875em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, 184%);
	-ms-transform: translate(-50%, 184%);
	transform: translate(-50%, 184%);
	border: 0.3em solid #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-shadow:
		inset 0 0 0.8em 0.3em rgba(65, 230, 248, 0.9),
		0 0 0.8em 0.3em rgba(65, 230, 248, 0.9);
	box-shadow:
		inset 0 0 0.8em 0.3em rgba(65, 230, 248, 0.9),
		0 0 0.8em 0.3em rgba(65, 230, 248, 0.9);
	border-radius: 5em;
	font-family: var(--nameDate);
	font-style: italic;
}
.date > span > span {
	font-size: 2.6em;
	text-shadow: 0 0em 0.6em #020f30;
}

.cof-wrapper {
	width: 36.052083em;
	height: 4.6875em;
	top: 50%;
	left: 50%;

	-webkit-transform: translate(-50%, 315%);
	-ms-transform: translate(-50%, 315%);
	transform: translate(-50%, 315%);
	border: 0.3em solid #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-shadow:
		inset 0 0 0.8em 0.3em rgba(65, 230, 248, 0.9),
		0 0 0.8em 0.3em rgba(65, 230, 248, 0.9);
	box-shadow:
		inset 0 0 0.8em 0.3em rgba(65, 230, 248, 0.9),
		0 0 0.8em 0.3em rgba(65, 230, 248, 0.9);
	border-radius: 5em;
	font-family: var(--nameDate);
	font-style: italic;

	background:
		radial-gradient(
			15% 100% at left center,
			rgba(168, 208, 248, 0.7) 0%,
			rgba(75, 142, 212, 0.7) 45%,
			transparent 100%
		),
		radial-gradient(
			15% 100% at right center,
			rgba(168, 208, 248, 0.7) 0%,
			rgba(75, 142, 212, 0.7) 45%,
			transparent 100%
		),
		-webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(30, rgba(29, 100, 183, 0.6)),
				color-stop(50%, rgba(6, 73, 169, 0.6)),
				color-stop(70%, rgba(29, 100, 183, 0.6))
			);
	background:
		radial-gradient(
			15% 100% at left center,
			rgba(168, 208, 248, 0.6) 0%,
			rgba(75, 142, 212, 0.6) 45%,
			transparent 100%
		),
		radial-gradient(
			15% 100% at right center,
			rgba(168, 208, 248, 0.6) 0%,
			rgba(75, 142, 212, 0.6) 45%,
			transparent 100%
		),
		linear-gradient(0, rgba(29, 100, 183, 0.6) 30%, rgba(6, 73, 169, 0.6) 50%, rgba(29, 100, 183, 0.6) 70%);
}
.cof {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 1em;
}
.cof-col {
	position: relative !important;
}
.cof-wrapper .cof-txt,
.cofs {
	font-size: 2.6em;
	text-shadow: 0 0em 0.6em #020f30;
}

@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
	.btn-wrapper {
		font-size: 1.25em;
		transform: translate(-47%, 151%);
	}
	.side-left {
		left: -32em;
	}
	.bg {
		font-size: 1.3vw;
	}
	.logo-wrapper {
		left: -2em;
	}
	.side-right {
		font-size: 1.05em;
		bottom: -4.5em;
		right: -6.5em;
	}
	.teams {
		font-size: 1.3em;
		transform: translate(-46%, -59%);
	}
}
@media screen and (min-aspect-ratio: 740/360) {
	.bg {
		font-size: 1vw;
	}
	.banner {
		font-size: 0.85vw;
	}
}
@media screen and (orientation: portrait) {
	.teams {
		font-size: 1.75em;
		-webkit-transform: translate(-50%, -62%);
		-ms-transform: translate(-50%, -62%);
		transform: translate(-50%, -62%);
	}
	.side-left-light {
		font-size: 1.5em;
		top: -16em;
		left: -17em;
	}
	.side-left {
		font-size: 1.5em;
		top: 3em;
		left: -32em;
		-webkit-transform: translateY(-50%) rotate(-45deg);
		-ms-transform: translateY(-50%) rotate(-45deg);
		transform: translateY(-50%) rotate(-45deg);
	}
	.side-right {
		font-size: 1.55em;
		bottom: -8.5em;
		right: -6.5em;
	}
	.teams {
		font-size: 1.75em;
		-webkit-transform: translate(-50%, -56%);
		-ms-transform: translate(-50%, -56%);
		transform: translate(-50%, -56%);
	}
	.bg {
		font-size: 2.5em;
		-webkit-transform: translate(-51%, -49%);
		-ms-transform: translate(-51%, -49%);
		transform: translate(-51%, -49%);
	}
	.btn-wrapper {
		font-size: 2em;
		-webkit-transform: translate(-50%, 163%);
		-ms-transform: translate(-50%, 163%);
		transform: translate(-50%, 163%);
	}
	.banner {
		font-size: calc(0.42vw + 0.42vh);
	}
}
@media screen and (max-aspect-ratio: 320/481) {
	.logo-wrapper {
		font-size: 2em;
		top: 3.4em;
		left: -4.5em;
	}
	.txt-1-wrapper {
		font-size: 1.1em;
		-webkit-transform: translate(-47%, 0%) rotate(-4deg);
		-ms-transform: translate(-47%, 0%) rotate(-4deg);
		transform: translate(-47%, 0%) rotate(-4deg);
	}
	.side-right-items {
		font-size: 1.3em;
		-webkit-transform: translate(-37%, -49%);
		-ms-transform: translate(-37%, -49%);
		transform: translate(-37%, -49%);
	}
	.bg {
		font-size: 2.7em;
		-webkit-transform: translate(-48%, -50%);
		-ms-transform: translate(-48%, -50%);
		transform: translate(-48%, -50%);
	}
	.side-right {
		font-size: 1.65em;
		bottom: -8.5em;
		right: -6.5em;
	}
	.teams {
		font-size: 1.75em;
		-webkit-transform: translate(-49%, -75%);
		-ms-transform: translate(-49%, -75%);
		transform: translate(-49%, -75%);
	}
	.btn-wrapper {
		font-size: 2.2em;
		transform: translate(-50%, 79%);
	}
}
@media screen and (max-aspect-ratio: 520/1024) {
	.bg {
		font-size: 3.2em;
		transform: translate(-48.5%, -45.5%);
	}
	.name__txt {
		min-width: 16.885417em;
	}
	.side-right::after {
		-webkit-transform: translate(40%, -53%) rotate(45deg);
		-ms-transform: translate(40%, -53%) rotate(45deg);
		transform: translate(40%, -53%) rotate(45deg);
	}
	.side-right-items {
		font-size: 1.2em;
		-webkit-transform: translate(-29%, -59%);
		-ms-transform: translate(-29%, -59%);
		transform: translate(-29%, -59%);
	}
	.txt-1-wrapper {
		-webkit-transform: translate(-37%, -20%) rotate(-4deg);
		-ms-transform: translate(-37%, -20%) rotate(-4deg);
		transform: translate(-37%, -20%) rotate(-4deg);
	}
	.side-right {
		font-size: 1.45em;
		bottom: -12.5em;
		right: -4.5em;
	}
	.side-left {
		font-size: 1.5em;
		top: -1em;
		left: -37em;
		-webkit-transform: translateY(-50%) rotate(-45deg);
		-ms-transform: translateY(-50%) rotate(-45deg);
		transform: translateY(-50%) rotate(-45deg);
	}
	.logo-wrapper {
		font-size: 1.7em;
		top: 3.1em;
		left: -5.1em;
	}
	.btn-wrapper {
		font-size: 1.5em;
		transform: translate(-50%, 112%);
	}
	.teams {
		font-size: 1.45em;
		-webkit-transform: translate(-49%, -75%);
		-ms-transform: translate(-49%, -75%);
		transform: translate(-49%, -70%);
	}
}

.name__txt {
	min-width: 16em;
}