.main {
    align-items: center;
    justify-content: center;
    padding: -0.375rem var(--padding-horizontal) var(--padding-horizontal);
    overflow: hidden;
    height: 387px;
    margin-top: 59px;
}

@media screen and (max-width: 600px) {
	.main {
		padding: 11.625rem var(--padding-horizontal) 2rem
	}
}

.main .background {
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.main .background img,
.main .background video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.main .background:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.main h1 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.75rem;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 1.5rem;
	transform: translateY(2.5rem);
	opacity: 0;
	transition: .5s ease-out;
	transition-delay: 1ms;
	will-change: transform, opacity
}

.main .logo {
	width: 40rem;
	margin-bottom: 3rem;
	transform: translateY(2.5rem);
	opacity: 0;
	transition: .5s ease-out;
	transition-delay: 1ms;
	will-change: transform, opacity
}

@media screen and (max-width: 700px) {
	.main .logo {
		width: 100%
	}
}

.main .logo img {
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain
}

.main .buttons {
	display: flex;
	align-items: center;
	margin-bottom: 4.5rem;
	transform: translateY(2.5rem);
	opacity: 0;
	transition: .5s ease-out;
	transition-delay: 1ms;
	will-change: transform, opacity
}

@media screen and (max-width: 900px) {
	.main .buttons {
		margin-bottom: 5.75rem
	}
}

.main .buttons .play-button {
	position: relative;
	border-radius: 6.26rem;
	border: 1px solid rgba(255, 255, 255, .5);
	padding: 1.5rem 2.25rem;
	color: var(--dark);
	font-size: 1rem;
	line-height: 1rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	margin-right: .5rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center
}

.main .buttons .play-button:before {
	content: "";
	background: #76ff33;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scaleX(.97) scaleY(.9);
	border-radius: 6.25rem;
	z-index: -1;
	transition: .15s
}

.main .buttons .play-button:hover:before {
	transform: translate(-50%, -50%)
}

.main .buttons .download-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	width: 4rem;
	height: 4rem
}

@media screen and (max-width: 900px) {
	.main .buttons .download-button {
		display: none
	}
}

.main .buttons .download-button img {
	width: 1.5rem;
	height: 1.5rem;
	-o-object-fit: contain;
	object-fit: contain
}

.main .buttons .download-button:before {
	content: "";
	background: #ffffff;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(.9);
	border-radius: 50%;
	z-index: -1;
	transition: .15s
}

.main .buttons .download-button:hover:before {
	transform: translate(-50%, -50%)
}

.main .bottom-container {
	display: flex;
	align-items: center;
	width: 100%
}

.main .bottom-container .trailer-button {
	will-change: transform, opacity;
	display: flex;
	align-items: center;
	cursor: pointer;
	align-self: flex-end;
	transform: translate(-2.5rem);
	opacity: 0;
	transition: .5s ease-out;
	transition-delay: 1ms
}

@media screen and (max-width: 900px) {
	.main .bottom-container .trailer-button {
		margin-bottom: 0
	}
}

.main .bottom-container .trailer-button small {
	font-size: .75rem;
	font-weight: 500;
	line-height: 1rem;
	letter-spacing: .0375rem;
	text-transform: uppercase;
	color: #fff;
	margin-right: 1rem;
	transition: .15s ease
}

@media screen and (max-width: 900px) {
	.main .bottom-container .trailer-button small {
		display: none
	}
}

.main .bottom-container .trailer-button .button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	width: 5rem;
	height: 5rem
}

@media screen and (max-width: 600px) {
	.main .bottom-container .trailer-button .button {
		width: 4rem;
		height: 4rem
	}
}

.main .bottom-container .trailer-button .button img {
	width: 1.5rem;
	height: 1.5rem;
	-o-object-fit: contain;
	object-fit: contain
}

@media screen and (max-width: 600px) {
	.main .bottom-container .trailer-button .button img {
		width: 1.5rem;
		height: 1.5rem
	}
}

.main .bottom-container .trailer-button .button:before {
	content: "";
	background: #ffffff;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(.9);
	border-radius: 50%;
	z-index: -1;
	transition: .15s
}

.main .bottom-container .trailer-button:hover small {
	opacity: .85
}

.main .bottom-container .trailer-button:hover .button:before {
	transform: translate(-50%, -50%)
}

.main .bottom-container .awailable {
	display: flex;
	flex-direction: column;
	margin-right: auto;
	transform: translate(-2.5rem);
	opacity: 0;
	will-change: transform, opacity
}

.main .bottom-container .awailable .text {
	color: #fff;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1rem;
	text-transform: uppercase;
	letter-spacing: .0375rem;
	margin-bottom: 1rem
}

.main .bottom-container .awailable .links {
	display: flex;
	align-items: center
}

.main .bottom-container .awailable .links .link {
	display: flex;
	align-items: center;
	height: 3rem;
	transition: .15s ease
}

@media screen and (max-width: 900px) {
	.main .bottom-container .awailable .links .link {
		height: 2rem
	}
}

.main .bottom-container .awailable .links .link:not(:last-child) {
	margin-right: 2rem
}

@media screen and (max-width: 900px) {
	.main .bottom-container .awailable .links .link:not(:last-child) {
		margin-right: 1rem
	}
}

.main .bottom-container .awailable .links .link:hover {
	opacity: .8
}

.main .bottom-container .awailable .links .link img {
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain
}

.tanks {
	padding: 4rem var(--padding-horizontal) 0;
	width: 100%;
	aspect-ratio: 1920/800;
	opacity: 0;
	transition: .5s ease-out;
	transition-delay: 1ms;
	margin-bottom: 5rem;
	overflow: hidden;
	cursor: none
}

@media screen and (max-width: 900px) {
	.tanks {
		overflow: hidden;
		width: 100vw;
		max-width: 100vw;
		aspect-ratio: unset
	}
}

@media screen and (max-width: 600px) {
	.tanks {
		aspect-ratio: 360/800;
		padding-top: 0
	}
}

.tanks .background-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%
}

.tanks .background-image img,
.tanks .background-image picture {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.tanks .info {
	display: flex;
	flex-direction: column;
	width: 20rem;
	align-self: flex-end;
	margin-bottom: auto;
	z-index: 1
}

@media screen and (max-width: 900px) {
	.tanks .info {
		align-self: flex-start;
		margin-bottom: 14.875rem
	}
}

@media screen and (max-width: 600px) {
	.tanks .info {
		margin-bottom: auto
	}
}

.tanks .info h3 {
	width: 100%;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .0375rem;
	line-height: 1rem;
	text-transform: uppercase;
	color: var(--green);
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem
}

.tanks .info h3:before,
.tanks .info h3:after {
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--white-25) 0%, rgba(255, 255, 255, 0) 100%)
}

.tanks .info h3:before {
	margin-bottom: 1rem
}

.tanks .info h3:after {
	margin-top: 1rem
}

.tanks .info h2 {
	display: flex;
	flex-direction: column;
	color: #fff;
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 2.5rem;
	text-transform: uppercase;
	margin-bottom: 1rem
}

.tanks .info p {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.25rem
}

.tanks .gallery-button {
	display: flex;
	align-items: center;
	cursor: pointer;
	align-self: flex-end;
	text-decoration: none;
	margin-right: 24rem;
	margin-bottom: 12.5rem;
	z-index: 2;
	transition: transform .15s ease;
	cursor: none;
	will-change: left, top, transform
}

.tanks .gallery-button small {
	font-size: .75rem;
	font-weight: 500;
	line-height: 1rem;
	letter-spacing: .0375rem;
	text-transform: uppercase;
	color: #fff;
	margin-right: 1rem;
	white-space: nowrap
}

.tanks .gallery-button .button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	min-width: 5rem;
	min-height: 5rem
}

.tanks .gallery-button .button img {
	width: 1.5rem;
	height: 1.5rem;
	-o-object-fit: contain;
	object-fit: contain
}

.tanks .gallery-button .button:before {
	content: "";
	background: #ffffff;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(.9);
	border-radius: 50%;
	z-index: -1;
	transition: .15s
}

.tanks .gallery-button .button:hover:before {
	transform: translate(-50%, -50%)
}

@media screen and (max-width: 900px) {
	.tanks .gallery-button {
		margin-right: auto;
		margin-bottom: 3rem;
		flex-direction: row-reverse
	}

	.tanks .gallery-button .button {
		margin-right: 1rem
	}
}

.animate .main h1,
.animate .main .logo,
.animate .main .buttons,
.animate .main .trailer-button,
.animate .main .awailable,
.animate .news.main-page-news {
	opacity: 1;
	transform: none
}

.animate .tanks {
	opacity: 1
}

.banner-section {
	padding-bottom: 8rem
}

@media screen and (max-width: 900px) {
	.banner-section {
		padding-bottom: 5rem
	}
}

.banner-section .banners-wrapper {
	padding: 0 var(--padding-horizontal) 0;
	display: flex;
	align-items: center;
	border-radius: 1rem;
	position: relative;
	width: 100%;
	overflow: hidden
}

.banner-section .banners-wrapper .banners-slides {
	display: flex;
	align-items: center
}

.banner-section .banners-wrapper .slider-buttons {
	position: absolute;
	right: calc(3rem + var(--padding-horizontal));
	bottom: 3rem;
	display: flex;
	align-items: center;
	opacity: 1;
	transition: .15s ease
}

@media screen and (max-width: 700px) {
	.banner-section .banners-wrapper .slider-buttons {
		right: calc(1rem + var(--padding-horizontal));
		bottom: 1rem
	}
}

.banner-section .banners-wrapper .slider-buttons .slider-button {
	position: relative;
	width: 4rem;
	height: 4rem;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
	transition: .15s ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.banner-section .banners-wrapper .slider-buttons .slider-button.prev {
	transform: rotate(180deg);
	margin-right: .5rem
}

.banner-section .banners-wrapper .slider-buttons .slider-button.swiper-button-disabled {
	opacity: .5;
	pointer-events: none
}

.banner-section .banners-wrapper .slider-buttons .slider-button:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(.9);
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-radius: 50%;
	z-index: -1;
	transition: .15s ease
}

.banner-section .banners-wrapper .slider-buttons .slider-button img {
	width: 1.5rem;
	height: 1.5rem;
	-o-object-fit: contain;
	object-fit: contain
}

.banner-section .banners-wrapper .slider-buttons .slider-button.disabled {
	opacity: .5;
	cursor: default;
	pointer-events: none
}

.banner-section .banners-wrapper .slider-buttons .slider-button:hover:before {
	transform: translate(-50%, -50%)
}

.banner-section .banners-wrapper .banner {
	border-radius: 1rem;
	padding: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: 1px solid var(--white-25);
	box-shadow: 0 5rem 5rem #000000bf;
	height: 45rem;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	transition: .3s ease;
	opacity: 0
}

.banner-section .banners-wrapper .banner.swiper-slide-active {
	opacity: 1
}

@media screen and (max-width: 900px) {
	.banner-section .banners-wrapper .banner {
		aspect-ratio: 1;
		height: auto
	}
}

@media screen and (max-width: 700px) {
	.banner-section .banners-wrapper .banner {
		aspect-ratio: 320/560;
		padding: 1rem
	}
}

.banner-section .banners-wrapper .banner .image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	transition: .3s ease
}

.banner-section .banners-wrapper .banner .image:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 75%;
	border-radius: 10px;
	background: linear-gradient(0deg, #00172e 0%, rgba(0, 23, 46, 0) 100%);
	transition: .15s ease
}

@media screen and (max-width: 900px) {
	.banner-section .banners-wrapper .banner .image:after {
		background: radial-gradient(100% 100% at 0% 100%, #001926 0%, rgba(0, 25, 38, .75) 50%, rgba(0, 25, 38, 0) 100%)
	}
}

.banner-section .banners-wrapper .banner .image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.banner-section .banners-wrapper .banner .info {
	display: flex;
	flex-direction: column;
	width: 30rem;
	transition: .3s ease;
	margin-bottom: 1.5rem
}

@media screen and (max-width: 900px) {
	.banner-section .banners-wrapper .banner .info {
		width: 100%
	}
}

.banner-section .banners-wrapper .banner .info .timer {
	display: flex;
	align-items: center;
	margin-bottom: 1rem
}

.banner-section .banners-wrapper .banner .info .timer .time {
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	height: 1.5rem;
	padding: 0 .25rem;
	background: #ffee00;
	font-weight: 500;
	margin-right: .625rem;
	border-radius: .25rem;
	color: var(--dark);
	text-transform: uppercase
}

@media screen and (max-width: 600px) {
	.banner-section .banners-wrapper .banner .info .timer .time {
		font-size: .875rem;
		height: 1.125rem
	}
}

.banner-section .banners-wrapper .banner .info .timer .time div {
	margin-right: .375rem
}

.banner-section .banners-wrapper .banner .info .timer span {
	font-size: .75rem;
	font-weight: 500;
	color: var(--orange);
	letter-spacing: .0375rem;
	line-height: 1rem;
	text-transform: uppercase
}

.banner-section .banners-wrapper .banner .info h3 {
	color: #fff;
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 2.5rem;
	text-transform: uppercase;
	margin-bottom: 1rem
}

.banner-section .banners-wrapper .banner .info p {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.25rem
}

.banner-section .banners-wrapper .banner a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	border-radius: 6.25rem;
	border: 1px solid rgba(255, 255, 255, .5);
	padding: 0 2.25rem;
	color: var(--dark);
	font-size: .875rem;
	line-height: .875rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	height: 4rem;
	transition: .3s ease
}

@media screen and (max-width: 460px) {
	.banner-section .banners-wrapper .banner a {
		font-size: 0
	}

	.banner-section .banners-wrapper .banner a:after {
		content: "";
		width: 1.5rem;
		height: 1.5rem;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTggMTJDMTggMTMuNjU2OSAxOS4zNDMxIDE1IDIxIDE1QzIyLjY1NjkgMTUgMjQgMTMuNjU2OSAyNCAxMkMyNCAxMC4zNDMxIDIyLjY1NjkgOSAyMSA5QzE5LjM0MzEgOSAxOCAxMC4zNDMxIDE4IDEyWk05IDEyQzkgMTMuNjU2OSAxMC4zNDMxIDE1IDEyIDE1QzEzLjY1NjkgMTUgMTUgMTMuNjU2OSAxNSAxMkMxNSAxMC4zNDMxIDEzLjY1NjkgOSAxMiA5QzEwLjM0MzEgOSA5IDEwLjM0MzEgOSAxMlpNMyAxNUMxLjM0MzE1IDE1IDAgMTMuNjU2OSAwIDEyQzAgMTAuMzQzMSAxLjM0MzE1IDkgMyA5QzQuNjU2ODUgOSA2IDEwLjM0MzEgNiAxMkM2IDEzLjY1NjkgNC42NTY4NSAxNSAzIDE1WiIgZmlsbD0iIzAwMTkyNiIvPg0KPC9zdmc+DQo=);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat
	}
}

.banner-section .banners-wrapper .banner a:before {
	content: "";
	background: #ffffff;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scaleX(.97) scaleY(.9);
	border-radius: 6.25rem;
	z-index: -1;
	transition: .15s
}

.banner-section .banners-wrapper .banner a:hover:before {
	transform: translate(-50%, -50%)
}

@media screen and (max-width: 700px) {
	.banner-section .banners-wrapper .banner a {
		opacity: 1
	}
}

.banner-section .banners-wrapper:hover .banner {
	border-color: var(--gray);
	outline: 1px solid var(--gray)
}

.banner-section .banners-wrapper:hover .banner .image {
	transform: scale(1.02)
}