@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100..900&display=swap";
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* animation: none !important; */
}
html,
body,
.eventfull,
.eventfull * {
	cursor: pointer;
}
.eventfull {
	font-size: 1vh;
	margin: 0 auto;
	max-width: 336px;
	max-height: 280px;
	width: 120em;
	height: 100em;
	aspect-ratio: 3 / 4;
	background: #002f2e;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	color: #fff;
	font-style: italic;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.variant-art {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.variant-layer {
	position: absolute;
	display: none;
	max-width: none;
}
.custom-splash {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
	max-width: none;
	z-index: 0;
}
.brand-logo {
	position: absolute;
	top: 6.5%;
	left: 50%;
	transform: translateX(-50%);
	width: 23%;
	height: auto;
	display: none;
	z-index: 20;
	pointer-events: none;
}
.eventfull.variant-1 .brand-logo,
.eventfull.variant-2 .brand-logo,
.eventfull.variant-3 .brand-logo {
	display: block;
}
.eventfull.variant-none .brand-logo,
.eventfull.has-custom-splash .brand-logo {
	display: none;
}
.eventfull.has-custom-splash .custom-splash {
	display: block;
}
.eventfull.has-custom-splash .variant-layer,
.eventfull.has-custom-splash .main-img,
.eventfull.has-custom-splash .container::before {
	display: none !important;
}
.eventfull.variant-none {
	background: #061333;
}
.eventfull.variant-none .variant-layer,
.eventfull.variant-none .main-img,
.eventfull.variant-none .container::before {
	display: none !important;
}
.eventfull.variant-2,
.eventfull.variant-3 {
	background: #001034;
}
.eventfull.variant-3 {
	background: #190765;
}
.eventfull.variant-2 .container::before,
.eventfull.variant-3 .container::before,
.eventfull.variant-2 .main-img,
.eventfull.variant-3 .main-img {
	display: none;
}
.eventfull.variant-2 .container,
.eventfull.variant-3 .container {
	z-index: 2;
}
.eventfull.variant-2 .team-name,
.eventfull.variant-3 .team-name {
	color: #061b46;
}
.eventfull.variant-2 .team-name::before,
.eventfull.variant-3 .team-name::before {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.32);
}
.eventfull.variant-2 .cof,
.eventfull.variant-3 .cof {
	color: #fff;
}
.eventfull.variant-2 .cof::before,
.eventfull.variant-3 .cof::before,
.eventfull.variant-2 .np-content__item--feed-wrap .date-time::before,
.eventfull.variant-3 .np-content__item--feed-wrap .date-time::before {
	background: #017df4;
}
.eventfull.variant-3 .cof::before,
.eventfull.variant-3 .np-content__item--feed-wrap .date-time::before {
	background: #2d6eff;
}
.eventfull.variant-2 .btn,
.eventfull.variant-3 .btn {
	background: #017df4;
}
.eventfull.variant-3 .btn {
	background: #ffffff;
}
.eventfull.variant-3 .btn-txt {
	color: #190765;
}
.eventfull.variant-2 .legal,
.eventfull.variant-3 .legal {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.45);
}
.eventfull.variant-2 .v2-bg,
.eventfull.variant-2 .v2-vector-a,
.eventfull.variant-2 .v2-vector-b,
.eventfull.variant-2 .v2-vector-c1,
.eventfull.variant-2 .v2-vector-c2,
.eventfull.variant-2 .v2-vector-d1,
.eventfull.variant-2 .v2-vector-d2,
.eventfull.variant-2 .v2-triangles-a,
.eventfull.variant-2 .v2-triangles-b,
.eventfull.variant-2 .v2-zigzag-a,
.eventfull.variant-2 .v2-zigzag-b,
.eventfull.variant-3 .v3-bg,
.eventfull.variant-3 .v3-strokes,
.eventfull.variant-3 .v3-chevron-left,
.eventfull.variant-3 .v3-chevron-right,
.eventfull.variant-3 .v3-triangle-left,
.eventfull.variant-3 .v3-triangle-right {
	display: block;
}
.v2-bg,
.v3-bg {
	width: 132%;
	height: 112%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	opacity: 0.07;
}
.v2-bg {
	opacity: 0.09;
}
.v3-bg {
	opacity: 0.04;
}
.v2-vector-a {
	left: -16.87%;
	top: 58.87%;
	width: 43.75%;
	height: 50.94%;
}
.v2-vector-b {
	left: 67%;
	top: -12%;
	width: 43%;
	height: 56%;
	transform: rotate(-90deg) scaleX(-1);
}
.v2-vector-c1 {
	left: 3.54%;
	top: 80.19%;
	width: 27.86%;
	height: 32.45%;
}
.v2-vector-c2 {
	left: -14.76%;
	top: 46.23%;
	width: 27.86%;
	height: 32.45%;
}
.v2-vector-d1 {
	left: 63.5%;
	top: -14%;
	width: 31%;
	height: 35%;
	transform: rotate(178deg);
}
.v2-vector-d2 {
	left: 85.5%;
	top: 8.5%;
	width: 31%;
	height: 35%;
	transform: rotate(178deg);
}
.v2-triangles-a {
	left: -1.88%;
	top: -1.23%;
	width: 23.34%;
	height: 29.24%;
}
.v2-triangles-b {
	left: 102.86%;
	top: 69.72%;
	width: 23.34%;
	height: 29.24%;
	transform: rotate(180deg) scaleY(-1);
}
.v2-zigzag-a {
	left: 17.8%;
	top: 9.5%;
	width: 7.42%;
	height: 1.88%;
}
.v2-zigzag-b {
	left: 78.9%;
	top: 77.7%;
	width: 7.42%;
	height: 1.88%;
}
.v3-strokes {
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.16;
}
.v3-chevron-left {
	left: 5.87%;
	top: 8.3%;
	width: 5.21%;
	height: 21.71%;
	transform: rotate(180deg) scaleX(-1);
}
.v3-chevron-right {
	left: 88.1%;
	top: 68.87%;
	width: 5.21%;
	height: 21.71%;
}
.v3-triangle-left {
	left: 0.75%;
	top: 65.28%;
	width: 26.96%;
	height: 33.58%;
}
.v3-triangle-right {
	left: 86.14%;
	top: 3.3%;
	width: 10.92%;
	height: 22.74%;
}
.container::before {
	font-size: 4em;
	content: "";
	width: 65em;
	height: 18.6em;
	bottom: -15em;
	left: -15em;
	position: absolute;
	background: radial-gradient(50% 49%, #024d4a 45%, transparent 100%);
	background: radial-gradient(50% 50%, #024d4a 45%, transparent 100%);
}
.container {
	width: 80em;
	height: 8em;
	position: relative;
}
.inner-wrapper {
	width: 128em;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.container div,
.container img {
	position: absolute;
}
.logo-wrapper,
.btn-wrapper {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-wrapper {
	font-size: 1.8em;
	top: -24em;
	left: 50%;
	transform: translateX(-50%);
	height: 10.24em;
	z-index: 10;
	display: none;
}
.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 31.84em;
	height: 16.12em;
	background: none;
	z-index: 30;
}
.btn-wrapper {
	font-size: 2em;
	bottom: -16.5em;
	left: 50%;
	transform: translateX(-50%);
	width: 29.12em;
	height: 10.24em;
	z-index: 10;
}
.btn {
	font-size: 5em;
	width: 3.4em;
	height: 1em;
	background: #cc072e;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewX(-12deg);
}
.btn-txt {
	font-size: 2.5em;
	color: #fff;
	position: relative;
	z-index: 1;
}
.bg {
	width: 84.4em;
	height: 32em;
	top: 50%;
	transform: translateY(-50%);
	left: 19.76em;
	background: url(../img/bg.jpg) no-repeat center center/contain;
	z-index: 1;
}
.np-content__item--feed-wrap {
	font-size: 4em;
	width: 12em;
	height: 3.46em;
	font-weight: 900;
	top: 50%;
	left: 8.55em;
	transform: translateY(-58%);
	z-index: 20;
}
.date-wrapper {
	width: 5.5em;
	height: 0.85em;
	left: 0.2em;
}
.date-time__animation {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) skewX(-7deg);
}
.np-content__item--feed-wrap .date-time {
	font-size: 0.5em;
	width: 11em;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewX(7deg);
	z-index: 5;
}
.np-content__item--feed-wrap .date-time::before {
	content: "";
	width: 98%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -52%) skewX(-7deg);
	position: absolute;
	background: #e31b23;
	z-index: -1;
}
.content-wrapper {
	font-size: 2.5em;
	width: 71em;
	height: 10em;
	top: 50%;
	left: 50%;
	transform: translate(-83%, -59%);
}
.main-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.main-wrapper div {
	position: relative;
}
.team-name {
	font-size: 0.62em;
	width: 13.2em;
	height: 100%;
	color: #044f4d;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}
.team-name::before {
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	transform: skewX(-10deg);
	top: 0;
	left: 0;
	z-index: -1;
}
.team__wrapper {
	height: 1.2em;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 0.3em;
	opacity: 0;
	position: relative;
}
.team__wrapper::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewX(-10deg);
	box-shadow: 0 0.1em 0.3em 0 rgba(0, 0, 0, 0.5);
	z-index: -1;
}
.cof {
	font-size: 0.6em;
	width: 3.2em;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #256446;
}
.cof::before {
	content: "";
	width: 3.7em;
	height: 100%;
	top: 0;
	transform: skewX(-10deg);
	position: absolute;
	background: #a7cc0d;
	z-index: -1;
}
.team__wrapper-1 .cof::before {
	left: 0;
}
.team__wrapper-2 .cof::before {
	right: 0;
}
.legal {
	font-size: 2.9em;
	width: 100%;
	letter-spacing: 0.05em;
	white-space: pre-line;
	position: absolute;
	left: 50%;
	bottom: 0.4em;
	transform: translateX(-50%);
	z-index: 12;
}
.main-img {
	top: 50%;
	left: 50%;
	z-index: 1;
}
.items-1 {
	width: 2.96em;
	height: 5.12em;
	background: url(../img/bg-items-1.png) no-repeat center center / contain;
	transform: translate(272%, 153%);
}
.items-2 {
	width: 12.96em;
	height: 24.48em;
	background: url(../img/bg-items-2.png) no-repeat center center / contain;
	transform: translate(-47%, -39%);
}
.items-3 {
	width: 2.64em;
	height: 4.08em;
	background: url(../img/bg-items-3.png) no-repeat center center / contain;
	transform: translate(250%, -396%);
}
.items-4 {
	width: 3.36em;
	height: 5.28em;
	background: url(../img/bg-items-4.png) no-repeat center center / contain;
	transform: translate(1192%, -324%);
}
.items-5 {
	width: 19.4em;
	height: 36.24em;
	background: url(../img/bg-items-5.png) no-repeat center center / contain;
	transform: translate(191%, -54%);
}
.eventfull.ev-show .team__wrapper-1 {
	animation: team-name-1 4s forwards;
}
.eventfull.ev-show .team__wrapper-2 {
	animation: team-name-2 4s forwards;
}

.eventfull.ev-show .date-time__animation {
	animation: date 4s forwards;
}
.eventfull.ev-static .team__wrapper-1 {
	animation: none;
	opacity: 1;
	transform: rotate(-6deg);
}
.eventfull.ev-static .team__wrapper-2 {
	animation: none;
	opacity: 1;
	transform: rotate(2deg);
}
.eventfull.ev-static .date-time__animation {
	animation: none;
	clip-path: inset(0 0 0 0);
	opacity: 1;
}
.eventfull.ev-static .btn {
	animation: none;
	box-shadow: 0 0 0.3em 0 #017df4;
}

@keyframes date {
	from,
	5%,
	95%,
	to {
		clip-path: inset(0 50% 0 50%);
		opacity: 0;
	}
	10%,
	90% {
		opacity: 1;
	}
	15%,
	85% {
		clip-path: inset(0 0% 0 0%);
		opacity: 1;
	}
}

@keyframes team-name-1 {
	from,
	5%,
	95%,
	to {
		transform: translateY(-0.8em) rotate(-6deg);
		opacity: 0;
	}
	15%,
	85% {
		transform: translateY(0) rotate(-6deg);
		opacity: 1;
	}
}
@keyframes team-name-2 {
	from,
	5%,
	95%,
	to {
		transform: translateY(0.8em) rotate(2deg);
		opacity: 0;
	}

	15%,
	85% {
		transform: translateY(0) rotate(2deg);
		opacity: 1;
	}
}
.eventfull.ev-show .btn {
	animation: btn 4s forwards;
}
@keyframes btn {
	from,
	30%,
	40%,
	50%,
	60%,
	to {
		box-shadow: 0 0 0 0 #017df4;
	}
	35%,
	45%,
	55% {
		box-shadow: 0 0 0.3em 0 #017df4;
	}
}
@keyframes item-1 {
	from,
	50%,
	to {
		transform: translateY(0);
		opacity: 1;
	}
	25%,
	75% {
		transform: translateY(-2%);
		opacity: 1;
	}
}
@keyframes item-2 {
	from,
	50%,
	to {
		opacity: 0.2;
	}
	25%,
	75% {
		opacity: 1;
	}
}
@keyframes item-3 {
	from,
	50%,
	to {
		transform: translateY(0);
		opacity: 1;
	}
	25%,
	75% {
		transform: translateY(5%);
		opacity: 1;
	}
}
@keyframes item-6 {
	from,
	50%,
	to {
		opacity: 1;
	}
	25%,
	75% {
		opacity: 0.2;
	}
}

@media screen and (max-aspect-ratio: 336/280) {
	.eventfull {
		font-size: 1vh;
	}
}
@media screen and (max-aspect-ratio: 336/279) {
	.eventfull {
		font-size: 0.833333333333vw;
	}
}
@media screen and (min-width: 336px) and (min-height: 280px) {
	.eventfull {
		font-size: 2.8px;
	}
}

/* Variant layer overrides. */
.eventfull.variant-1 {
	background: #001034;
}
.eventfull.variant-1 .container::before,
.eventfull.variant-1 .main-img,
.eventfull.variant-none .container::before,
.eventfull.variant-none .main-img {
	display: none !important;
}
.eventfull.variant-1 .container {
	z-index: 2;
}
.eventfull.variant-1 .team-name {
	color: #061b46;
}
.eventfull.variant-1 .team-name::before {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.32);
}
.eventfull.variant-1 .cof {
	color: #fff;
}
.eventfull.variant-1 .cof::before,
.eventfull.variant-1 .np-content__item--feed-wrap .date-time::before {
	background: #017df4;
}
.eventfull.variant-1 .btn {
	background: #017df4;
}
.eventfull.variant-1 .legal {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.45);
}
.eventfull.variant-1 .v1-shapes {
	display: block;
}
.v1-shapes {
	inset: 0;
	width: 100%;
	height: 100%;
}