@font-face {
	font-family: 'HeadingMedium';
	src: url('/css/fonts/Heading-Pro-Medium-Bold.woff2') format('woff2'), url('/css/fonts/Heading-Pro-Medium-Bold.woff') format('woff'), url('/css/fonts/Heading-Pro-Medium-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'HeadingMedium';
	src: url('/css/fonts/Heading-Pro-Medium-Regular.woff2') format('woff2'), url('/css/fonts/Heading-Pro-Medium-Regular.woff') format('woff'), url('/css/fonts/Heading-Pro-Medium-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'HeadingMedium';
	src: url('/css/fonts/Heading-Pro-Medium-Light.woff2') format('woff2'), url('/css/fonts/Heading-Pro-Medium-Light.woff') format('woff'), url('/css/fonts/Heading-Pro-Medium-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Heading';
	src: url('/css/fonts/Heading-Pro-Bold.woff2') format('woff2'), url('/css/fonts/Heading-Pro-Bold.woff') format('woff'), url('/css/fonts/Heading-Pro-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Heading';
	src: url('/css/fonts/Heading-Pro-Regular.woff2') format('woff2'), url('/css/fonts/Heading-Pro-Regular.woff') format('woff'), url('/css/fonts/Heading-Pro-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Heading';
	src: url('/css/fonts/Heading-Pro-Light.woff2') format('woff2'), url('/css/fonts/Heading-Pro-Light.woff') format('woff'), url('/css/fonts/Heading-Pro-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-light: #f5ead7;
	--color-dark: #050e14;
	--color-accent: #fa5400;
	--color-accent-dl1: #f7b42e;
	--color-accent-dl2: #00a9e3;
	--color-accent-dltb: #d70f00;
	--color-accent-dltb-alt: #af1900;
	--color-accent-dltb-alt-old: #8c1400;
	--color-accent-green: #3f8f72;
	--color-uv-dark-1: #00a9e3;
	--color-uv-dark-2: #120f87;
	--color-uv-dark-3: #050e14;
	--color-uv-light-1: #f5ead7;
	--color-uv-light-2: #ffe48c;
	--color-uv-light-3: #f7b42e;
	--color-front: var(--color-light);
	--color-bg: #0f0f0f;
	--color-red: #ff0209;
	--color-red-dark: #b70000;
	--color-red-hover: #e7333a;
	--color-red-shadow: #990105;
	--color-red-alt: #da2128;
	--color-gold: #fbbc05;
	--color-gray: #6b6b6b;
	--color-gray-light: #bababa ;
	--color-gray-medium: #808080;
	--color-gray-dark: #191919;
	--color-green: #3ab236;
	--color-placeholder: #acb1bf;
	--color-border: rgba(255, 255, 255, .3);
	--color-border-hover: rgba(255, 255, 255, .6);
	--color-on: #00c408;
	--font-head: 'Heading', 'Arial', sans-serif;
	--font-text: 'HeadingMedium', 'Arial', sans-serif;
}

/***
	The new CSS reset - version 1.11.2 (last updated 15.11.2023)
	GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
	Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
	- The "symbol *" part is to solve Firefox SVG sprite bug
	- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Fix mobile Safari increase font-size on landscape mode */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
	cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
	list-style: none;
}

/* For images to not be able to exceed their container */
img {
	max-inline-size: 100%;
	max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
	border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
	-webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
	white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
	-webkit-appearance: revert;
			appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
	all: revert;
	box-sizing: border-box;
}

/* reset default text opacity of input placeholder */
::placeholder {
	color: unset;
}

/* fix the feature of 'hidden' attribute.
	 display:revert; revert to element instead of attribute */
:where([hidden]) {
	display: none;
}

/* revert for bug in Chromium browsers
	 - fix for the content editable attribute will work properly.
	 - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	-webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
	-webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
	all: revert;
	box-sizing: border-box;
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
	display: none;
}

body ::selection,
body ::-moz-selection {
	background: var(--color-light);
	color: var(--color-bg);
	text-shadow: none !important;
}

::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}
:-ms-input-placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

a {
	transition: all .3s;
}

b,strong {
	font-weight: 500;
}

.hideMe {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	width: 1px;
	overflow: hidden;
}

.off {
	display: none;
}

.lazybg, .lazybg::after, .lazybg::before {
	background-image: none !important;
}

.wrapper {
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
}

.icons::before {
	content: '';
	margin-right: 10px;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: var(--color-light);
	-webkit-mask: no-repeat center center / 100% 100%;
	        mask: no-repeat center center / 100% 100%;
}
.samsung .icons::before {
	background: var(--color-red);
	padding: 1px;
}
.icons.icon-arrow::before {
	-webkit-mask-image: url('/img/icons/mega.svg#arrow');
	        mask-image: url('/img/icons/mega.svg#arrow');
}
.icons.icon-arrow-thebeast::before {
	-webkit-mask-image: url('/img/icons/mega.svg#arrow-thebeast');
	        mask-image: url('/img/icons/mega.svg#arrow-thebeast');
}
.icons.icon-bell::before {
	-webkit-mask-image: url('/img/icons/mega.svg#bell');
	        mask-image: url('/img/icons/mega.svg#bell');
}
.icons.icon-biometric::before {
	-webkit-mask-image: url('/img/icons/mega.svg#biometric');
	        mask-image: url('/img/icons/mega.svg#biometric');
}
.icons.icon-check::before {
	-webkit-mask-image: url('/img/icons/mega.svg#check');
	        mask-image: url('/img/icons/mega.svg#check');
}
.icons.icon-chevron::before {
	-webkit-mask-image: url('/img/icons/mega.svg#chevron');
	        mask-image: url('/img/icons/mega.svg#chevron');
}
.icons.icon-chevrons::before {
	-webkit-mask-image: url('/img/icons/mega.svg#chevrons');
	        mask-image: url('/img/icons/mega.svg#chevrons');
}
.icons.icon-clock::before {
	        mask-image: url('/img/icons/mega.svg#clock');
}
.icons.icon-close::before {
	-webkit-mask-image: url('/img/icons/mega.svg#close');
	        mask-image: url('/img/icons/mega.svg#close');
}
.icons.icon-cog::before {
	-webkit-mask-image: url('/img/icons/mega.svg#cog');
	        mask-image: url('/img/icons/mega.svg#cog');
}
.icons.icon-copy::before {
	-webkit-mask-image: url('/img/icons/mega.svg#copy');
	        mask-image: url('/img/icons/mega.svg#copy');
}
.icons.icon-cross::before {
	-webkit-mask-image: url('/img/icons/mega.svg#cross');
	        mask-image: url('/img/icons/mega.svg#cross');
}
.icons.icon-download::before {
	-webkit-mask-image: url('/img/icons/mega.svg#download');
	        mask-image: url('/img/icons/mega.svg#download');
}
.icons.icon-edit::before {
	-webkit-mask-image: url('/img/icons/mega.svg#edit');
	        mask-image: url('/img/icons/mega.svg#edit');
}
.icons.icon-filter::before {
	-webkit-mask-image: url('/img/icons/mega.svg#filter');
	        mask-image: url('/img/icons/mega.svg#filter');
}
.icons.icon-fingerprint::before {
	-webkit-mask-image: url('/img/icons/mega.svg#fingerprint');
	        mask-image: url('/img/icons/mega.svg#fingerprint');
}
.icons.icon-flag::before {
	-webkit-mask-image: url('/img/icons/mega.svg#flag');
	        mask-image: url('/img/icons/mega.svg#flag');
}
.icons.icon-flash::before {
	-webkit-mask-image: url('/img/icons/mega.svg#flash');
	        mask-image: url('/img/icons/mega.svg#flash');
}
.icons.icon-globe::before {
	-webkit-mask-image: url('/img/icons/mega.svg#globe');
	        mask-image: url('/img/icons/mega.svg#globe');
}
.icons.icon-history::before {
	-webkit-mask-image: url('/img/icons/mega.svg#history');
	        mask-image: url('/img/icons/mega.svg#history');
}
.icons.icon-hourglass::before {
	-webkit-mask-image: url('/img/icons/mega.svg#hourglass');
	        mask-image: url('/img/icons/mega.svg#hourglass');
}
.icons.icon-info::before {
	-webkit-mask-image: url('/img/icons/mega.svg#info');
	        mask-image: url('/img/icons/mega.svg#info');
}
.icons.icon-link::before {
	-webkit-mask-image: url('/img/icons/mega.svg#link');
	        mask-image: url('/img/icons/mega.svg#link');
}
.icons.icon-location::before {
	-webkit-mask-image: url('/img/icons/mega.svg#location');
	        mask-image: url('/img/icons/mega.svg#location');
}
.icons.icon-log::before {
	-webkit-mask-image: url('/img/icons/mega.svg#log');
	        mask-image: url('/img/icons/mega.svg#log');
}
.icons.icon-logout::before {
	-webkit-mask-image: url('/img/icons/mega.svg#logout');
	        mask-image: url('/img/icons/mega.svg#logout');
}
.icons.icon-mail::before {
	-webkit-mask-image: url('/img/icons/mega.svg#mail');
	        mask-image: url('/img/icons/mega.svg#mail');
}
.icons.icon-mailfull::before {
	-webkit-mask-image: url('/img/icons/mega.svg#mailfull');
	        mask-image: url('/img/icons/mega.svg#mailfull');
}
.icons.icon-newsletter::before {
	-webkit-mask-image: url('/img/icons/mega.svg#newsletter');
	        mask-image: url('/img/icons/mega.svg#newsletter');
}
.icons.icon-off::before {
	-webkit-mask-image: url('/img/icons/mega.svg#off');
	        mask-image: url('/img/icons/mega.svg#off');
}
.icons.icon-pin::before {
	-webkit-mask-image: url('/img/icons/mega.svg#pin');
	        mask-image: url('/img/icons/mega.svg#pin');
}
.icons.icon-platforms::before {
	-webkit-mask-image: url('/img/icons/mega.svg#platforms');
	        mask-image: url('/img/icons/mega.svg#platforms');
}
.icons.icon-refresh::before {
	-webkit-mask-image: url('/img/icons/mega.svg#refresh');
	        mask-image: url('/img/icons/mega.svg#refresh');
}
.icons.icon-security::before {
	-webkit-mask-image: url('/img/icons/mega.svg#security');
	        mask-image: url('/img/icons/mega.svg#security');
}
.icons.icon-share::before {
	-webkit-mask-image: url('/img/icons/mega.svg#share');
	        mask-image: url('/img/icons/mega.svg#share');
}
.icons.icon-play::before {
	-webkit-mask-image: url('/img/icons/mega.svg#play');
	        mask-image: url('/img/icons/mega.svg#play');
}
.icons.icon-question::before {
	-webkit-mask-image: url('/img/icons/mega.svg#question');
	        mask-image: url('/img/icons/mega.svg#question');
}
.icons.icon-search::before {
	-webkit-mask-image: url('/img/icons/mega.svg#search');
	        mask-image: url('/img/icons/mega.svg#search');
}
.icons.icon-sort::before {
	-webkit-mask-image: url('/img/icons/mega.svg#sort');
	        mask-image: url('/img/icons/mega.svg#sort');
}
.icons.icon-support::before {
	-webkit-mask-image: url('/img/icons/mega.svg#support');
	        mask-image: url('/img/icons/mega.svg#support');
}
.icons.icon-ticket::before {
	-webkit-mask-image: url('/img/icons/mega.svg#ticket');
	        mask-image: url('/img/icons/mega.svg#ticket');
}
.icons.icon-upvote::before {
	-webkit-mask-image: url('/img/icons/mega.svg#upvote');
	        mask-image: url('/img/icons/mega.svg#upvote');
}
.icons.icon-user::before {
	-webkit-mask-image: url('/img/icons/mega.svg#user');
	        mask-image: url('/img/icons/mega.svg#user');
}
.icons.icon-visibility::before {
	-webkit-mask-image: url('/img/icons/mega.svg#visibility');
	        mask-image: url('/img/icons/mega.svg#visibility');
}
.icons.icon-warn::before {
	-webkit-mask-image: url('/img/icons/mega.svg#warn');
	        mask-image: url('/img/icons/mega.svg#warn');
}

.icons.icon-game::before {
	-webkit-mask-image: url('/img/icons/dl.png');
	        mask-image: url('/img/icons/dl.png');
	height: auto;
	aspect-ratio: 128 / 91;
	width: 20px;
}
.icons.icon-game.icon-reversed::before {
	-webkit-mask-image: url('/img/icons/dl_reverse.png');
	        mask-image: url('/img/icons/dl_reverse.png');
	aspect-ratio: 1 / 1;
}
.icons.icon-game.icon-dl1::before {
	background: var(--color-accent-dl1);
}
.icons.icon-game.icon-dl2::before {
	background: var(--color-accent-dl2);
}
.icons.icon-game.icon-dltb::before {
	background: var(--color-accent-dltb);
}

.btns {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
}
.btns.stretch {
	justify-content: space-between;
}

.btn {
	font: 600 18px/18px var(--font-head);
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 14px 40px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	text-align: center;
	transition: .3s;
	color: var(--color-front);
	background: var(--color-red);
	width: 100%;
	max-width: 470px;
	-webkit-mask: url('/img/masks/button_lumi.svg') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/button_lumi.svg') no-repeat center center / 100% 100%;
}
.btn.narrow {
	width: auto;
}
.btn:hover {
	background: var(--color-red-hover);
}
:is(.btn.upper,button.upper) {
	text-transform: uppercase;
}
.btn.reversed {
	-webkit-mask: none;
	        mask: none;
	background: none;
}
.btn.reversed::before {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: var(--color-red);
	-webkit-mask: url('/img/masks/button_lumi.svg#outer') no-repeat center center / 100% 98%;
	        mask: url('/img/masks/button_lumi.svg#outer') no-repeat center center / 100% 98%;
	mask-mode: luminance;
	transition: background-color .3s;
}
.btn.reversed:hover::before {
	background-color: var(--color-front);
}

.btn__taped {
	--btn-taped-color: var(--color-dark);
	--btn-taped-color-hover: var(--color-front);
	--btn-taped-bg: var(--color-front);
	--btn-taped-bg-hover: var(--color-accent);
	--svg-icons: var(--btn-taped-color);
	padding: 22px 24px 18px;
	position: relative;
	font: 500 24px/24px var(--font-head);
	color: var(--btn-taped-color);
	text-transform: uppercase;
	text-align: center;
	min-width: 250px;
	max-width: 100%;
	cursor: pointer;
	transition: color .3s;
	display: inline-block;
	z-index: 0;
	border-radius: 0;
	border: none;
}
.btn__taped.btn__taped--reverse {
	--btn-taped-color: var(--color-front);
}
html[data-theme="light"] .btn__taped {
	--btn-taped-color: var(--color-light);
}
.btn__taped.btn__taped--medium {
	padding: 18px 24px 17px;
	font-size: 20px;
	line-height: 20px;
}
.btn__taped.btn__taped--narrow {
	min-width: 150px;
}
.btn__taped.btn__taped--wide {
	width: 100%;
}
.btn__taped > svg {
	width: 18px;
	height: 18px;
	margin-right: 15px;
}
.btn__taped.btn__taped--medium > svg {
	width: 15px;
	height: 15px;
}
.btn__taped.btn__taped--notbtn {
	cursor: default;
}
.btn__taped.btn__taped--multi {
	display: inline-block;
}
.btn__taped.btn__taped--green {
	--btn-taped-bg-hover: var(--color-accent-dltb);
}
.btn__taped.btn__taped--green.btn__taped--notbtn {
	--btn-taped-bg-hover: var(--color-accent-dltb-alt);
}
.btn__taped.btn__taped--orange {
	--btn-taped-bg-hover: var(--color-accent);
}
.btn__taped.btn__taped--blue {
	--btn-taped-bg-hover: var(--color-accent-dl2);
}
.btn__taped.btn__taped--yellow {
	--btn-taped-bg-hover: var(--color-accent-dl1);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped.btn__taped--gold {
	--btn-taped-bg-hover: var(--color-uv-light-2);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped.btn__taped--greenbg {
	--btn-taped-bg: var(--color-accent-dltb);
	--btn-taped-bg-hover: var(--color-front);
	--btn-taped-color-hover: var(--color-dark);
	--btn-taped-color: var(--color-light);
}
.btn__taped.btn__taped--greenbg.btn__taped--notbtn {
	--btn-taped-bg: var(--color-accent-dltb-alt);
}
.btn__taped.btn__taped--orangebg {
	--btn-taped-bg: var(--color-accent);
	--btn-taped-bg-hover: var(--color-front);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped.btn__taped--bluebg {
	--btn-taped-bg: var(--color-accent-dl2);
	--btn-taped-bg-hover: var(--color-front);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped.btn__taped--yellowbg {
	--btn-taped-bg: var(--color-accent-dl1);
	--btn-taped-bg-hover: var(--color-front);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped.btn__taped--goldbg {
	--btn-taped-bg: var(--color-uv-light-3);
	--btn-taped-bg-hover: var(--color-uv-light-2);
	--btn-taped-color: var(--color-dark);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped:is(.btn__taped--greenbg,.btn__taped--orangebg,.btn__taped--bluebg):not(.btn__taped--label) {
	--btn-taped-color: var(--color-front);
	--btn-taped-color-hover: var(--color-dark);
}
.btn__taped.btn__taped--label {
	font-size: 65px;
	line-height: 65px;
	padding: 12px 24px 6px;
}
.btn__taped.btn__taped--medium.btn__taped--label {
	font-size: 35px;
	line-height: 35px;
}
html[data-theme="light"] .btn__taped.btn__taped--reverse {
	--btn-taped-color: var(--color-dark);
}
html[data-theme="light"] .btn__taped:is(.btn__taped--greenbg,.btn__taped--orangebg,.btn__taped--bluebg,.btn__taped--yellowbg):hover {
	--btn-taped-color-hover: var(--color-light);
}
@media (prefers-color-scheme: light) {
	html[data-theme="system"] .btn__taped.btn__taped--reverse {
		--btn-taped-color: var(--color-dark);
	}
	html[data-theme="system"] :is(.btn__taped.btn__taped--greenbg,.btn__taped.btn__taped--orangebg,.btn__taped.btn__taped--bluebg,.btn__taped.btn__taped--yellowbg):hover {
		--btn-taped-color-hover: var(--color-light);
	}
}
.btn__taped.btn__taped--whitebg {
	--btn-taped-bg: #fff;
}
.btn__taped.btn__taped--greybg {
	--btn-taped-bg: #bcbcbc;
}
.btn__taped.btn__taped--on:not(.btn__taped--notbtn,.btn__taped--reverse),
.btn__taped:not(.btn__taped--notbtn,.btn__taped--reverse):hover {
	color: var(--btn-taped-color-hover);
	--svg-icons: var(--btn-taped-color-hover);
}
.btn__taped.btn__taped--on.btn__taped--reverse,
.btn__taped.btn__taped--reverse:hover {
	color: var(--btn-taped-bg-hover);
}
.btn__taped:hover > svg {
	--svg-icons: var(--btn-taped-color-hover);
}
.btn__taped.btn__taped--on.btn__taped--reverse,
.btn__taped.btn__taped--reverse:hover > svg {
	--svg-icons: var(--btn-taped-bg-hover);
}
.btn__taped.btn__taped--multi span {
	background: linear-gradient(var(--btn-taped-bg-hover) 0%, var(--btn-taped-bg-hover) 100%) no-repeat center center, var(--btn-taped-bg);
	background-size: 0 100%;
	transition: transform .3s, background-size .3s;
	-webkit-mask: url('/img/masks/taped_front_lumi.svg') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/taped_front_lumi.svg') no-repeat center center / 100% 100%;
	padding: 8px 24px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 26px;
}
.btn__taped:not(.btn__taped--multi)::before {
	content: ' ';
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: linear-gradient(var(--btn-taped-bg-hover) 0%, var(--btn-taped-bg-hover) 100%) no-repeat center center, var(--btn-taped-bg);
	background-size: 0 100%;
	transition: transform .3s, background-size .3s;
	-webkit-mask: url('/img/masks/taped_front_lumi.svg') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/taped_front_lumi.svg') no-repeat center center / 100% 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.btn__taped.btn__taped--smudge:not(.btn__taped--multi)::before {
	background: url('/img/masks/taped_smudge.png') no-repeat center center / 100% 100%, linear-gradient(var(--btn-taped-bg-hover) 0%, var(--btn-taped-bg-hover) 100%) no-repeat center center / 0 100% var(--btn-taped-bg);
}
.btn__taped.btn__taped--green:not(.btn__taped--multi)::before,
.btn__taped.btn__taped--greenbg:not(.btn__taped--multi)::before {
	background: url('/img/masks/taped_smudge_dltb.png') no-repeat center center / 100% 100%, linear-gradient(var(--btn-taped-bg-hover) 0%, var(--btn-taped-bg-hover) 100%) no-repeat center center / 0 100% var(--btn-taped-bg);
	background-blend-mode: luminosity, normal;
}
.btn__taped.btn__taped--gold:not(.btn__taped--multi)::before,
.btn__taped.btn__taped--goldbg:not(.btn__taped--multi)::before {
	background: linear-gradient(var(--btn-taped-bg-hover) 0%, var(--btn-taped-bg-hover) 100%) no-repeat center center / 0 100%, url('/img/masks/taped_gold.jpg') no-repeat center center / 100% 100% var(--btn-taped-bg);
	background-blend-mode: soft-light, normal;
}
.btn__taped.btn__taped--goldbg.btn__taped--goldbg-darkhover:not(.btn__taped--multi)::before {
	background-blend-mode: multiply, normal;
}
.btn__taped.btn__taped--right:not(.btn__taped--multi)::before {
	background-position: right center;
}
.btn__taped.btn__taped--reverse.btn__taped--multi span,
.btn__taped.btn__taped--reverse:not(.btn__taped--multi)::before {
	-webkit-mask-image: url('/img/masks/taped_front_lumi.svg#outer');
	        mask-image: url('/img/masks/taped_front_lumi.svg#outer');
	mask-mode: luminance;
}
.btn__taped:not(.btn__taped--reverse,.btn__taped--noband)::after {
	content: ' ';
	width: 90%;
	aspect-ratio: 296 / 45;
	background: linear-gradient(var(--btn-taped-bg-hover) 0%, var(--btn-taped-bg-hover) 100%) no-repeat center center, var(--btn-taped-bg);
	background-size: 0 100%;
	-webkit-mask: url('/img/masks/taped_back_lumi.svg') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/taped_back_lumi.svg') no-repeat center center / 100% 100%;
	position: absolute;
	left: -10px;
	bottom: -6px;
	transform: rotate(-5deg);
	transition: background-size .3s .15s;
	z-index: -2;
	min-height: 70%;
}
.btn__taped.btn__taped--multi::after {
	width: 80%;
	aspect-ratio: 227 / 45;
	left: 16px;
	bottom: 16px;
}
.btn__taped.btn__taped--topright::after {
	left: initial;
	bottom: initial;
	right: 4px;
	top: -10px;
	transform: rotate(4deg);
	width: 80%;
	aspect-ratio: 237 / 45;
}
.btn__taped.btn__taped--bottomright::after {
	left: initial;
	right: -9px;
	bottom: -9px;
	transform: rotate(4deg);
	width: 80%;
	aspect-ratio: 237 / 45;
}
.btn__taped.btn__taped--topright.btn__taped--multi::after {
	width: 60%;
	right: 28px;
	top: 1px;
}
.btn__taped.btn__taped--on:not(.btn__taped--notbtn).btn__taped--multi span,
.btn__taped.btn__taped--on:not(.btn__taped--notbtn)::before,
.btn__taped.btn__taped--on:not(.btn__taped--notbtn)::after,
.btn__taped:not(.btn__taped--notbtn).btn__taped--multi:hover span,
.btn__taped:not(.btn__taped--notbtn):hover::before,
.btn__taped:not(.btn__taped--notbtn):hover::after {
	background-size: 100% 100%;
}
.btn__taped:not(.btn__taped--notbtn):active::before {
	transform: translate(2px, 2px);
}
.btn__taped .btn__taped--icon {
	display: none;
}

.mask__taped {
	position: relative;
	isolation: isolate;
	--mask-taped-bg: var(--color-light);
	--mask-taped-bg-hover: var(--color-uv-light-2);
}
.mask__taped.mask__taped--dl1:hover {
	--mask-taped-bg-hover: var(--color-accent-dl1);
}
.mask__taped.mask__taped--dl2:hover {
	--mask-taped-bg-hover: var(--color-accent-dl2);
}
.mask__taped.mask__taped--dltb:hover {
	--mask-taped-bg-hover: var(--color-accent-dltb);
}
.mask__taped .mask__taped--wrapper {
	position: relative;
	background: var(--mask-taped-bg);
	-webkit-mask: url('/img/masks/frame.svg#outer') no-repeat center center / 100% 100%, url('/img/masks/frame.svg#inner') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/frame.svg#outer') no-repeat center center / 100% 100%, url('/img/masks/frame.svg#inner') no-repeat center center / 100% 100%;
}
.mask__taped::before,
.mask__taped::after {
	content: '';
	position: absolute;
	left: -6px;
	top: -14px;
	z-index: -1;
	width: 55%;
	aspect-ratio: 659 / 120;
	background: var(--mask-taped-bg);
	-webkit-mask: url('/img/masks/taped_back_lumi.svg') no-repeat 0 0 / 100% 100%;
	        mask: url('/img/masks/taped_back_lumi.svg') no-repeat 0 0 / 100% 100%;
	transform: rotate(-3deg);
	pointer-events: none;
	transition: opacity .3s;
}
.mask__taped.mask__taped--nobands::before,
.mask__taped.mask__taped--nobands::after {
	content: none;
}
.mask__taped::after {
	top: unset;
	left: unset;
	right: -6px;
	bottom: -14px;
}
.mask__taped .mask__taped--inner {
	-webkit-mask: url('/img/masks/frame.svg#inner') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/frame.svg#inner') no-repeat center center / 100% 100%;
	overflow: hidden;
}
.mask__taped.mask__taped--hover::before,
.mask__taped.mask__taped--hover::after,
.mask__taped.mask__taped--hover .mask__taped--wrapper {
	transition: opacity .3s, background-color .3s;
}
.mask__taped.mask__taped--hover:hover::before,
.mask__taped.mask__taped--hover:hover::after,
.mask__taped.mask__taped--hover:hover .mask__taped--wrapper {
	background-color: var(--mask-taped-bg-hover);
}
.mask__taped .btn__taped {
	position: absolute;
	right: -2px;
	bottom: 0;
	z-index: 2;
	font-size: 38px;
	padding: 15px 70px 15px 30px;
	rotate: -.75deg;
	cursor: pointer;
}
.mask__taped:hover .btn__taped {
	--btn-taped-bg: var(--color-accent-dltb);
}
.mask__taped .btn__taped::before {
	transition: background .3s, color .3s;
}
.mask__taped .btn__taped span::after {
	content: ' ';
	position: absolute;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background: var(--color-dark);
	-webkit-mask: linear-gradient(#000, #000), url('/img/icons/mega.svg#play') no-repeat center center / 15px 15px;
	        mask: linear-gradient(#000, #000), url('/img/icons/mega.svg#play') no-repeat center center / 15px 15px;
	-webkit-mask-composite: source-out;
	        mask-composite: subtract;
	transition: background .3s, color .3s;
}

/* Sections */

.section-mask-both {
	-webkit-mask: url('/img/masks/mega.svg#section-top') repeat-x left -115px / 100vw 150px, linear-gradient(to bottom, transparent 34px, var(--color-dark) 34px, var(--color-dark) calc(100% - 59px), transparent calc(100% - 60px)), url('/img/masks/mega.svg#section-bottom') repeat-x left calc(100% + 89px) / 100% 150px;
					mask: url('/img/masks/mega.svg#section-top') repeat-x left -115px / 100vw 150px, linear-gradient(to bottom, transparent 34px, var(--color-dark) 34px, var(--color-dark) calc(100% - 59px), transparent calc(100% - 60px)), url('/img/masks/mega.svg#section-bottom') repeat-x left calc(100% + 89px) / 100% 150px;
}
.section-mask-bottom {
	-webkit-mask: url('/img/masks/mega.svg#section-bottom') repeat-x left calc(100% + 89px) / 100% 150px, linear-gradient(to top, transparent 59px, var(--color-dark) 60px);
					mask: url('/img/masks/mega.svg#section-bottom') repeat-x left calc(100% + 89px) / 100% 150px, linear-gradient(to top, transparent 59px, var(--color-dark) 60px);
}
.section-mask-top {
	-webkit-mask: url('/img/masks/mega.svg#section-top') repeat-x left -115px / 100vw 150px, linear-gradient(to bottom, transparent 34px, var(--color-dark) 34px);
					mask: url('/img/masks/mega.svg#section-top') repeat-x left -115px / 100vw 150px, linear-gradient(to bottom, transparent 34px, var(--color-dark) 34px);
}

/* Avatar */
.avatar {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	position: relative;
	overflow: hidden;
}
.avatar .editAvatar {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: color(from var(--color-front) srgb r g b / .3);
	transition: opacity .3s, background-color .3s;
	opacity: .5;
}
.avatar .editAvatar:hover {
	opacity: 1;
	background-color: color(from var(--color-front) srgb r g b / .2);
}
.avatar .editAvatar > div {
	height: 50%;
	transition: background-color .3s;
	position: relative;
	background: url('/img/icons/mega.svg#edit') no-repeat center center / 20px 20px color(from var(--color-front) srgb r g b / .1);
	cursor: pointer;
}
.avatar .editAvatar > div.avatarDelete {
	background-image: url('/img/icons/mega.svg#cross');
	border-top: 1px solid var(--color-bg);
}
.avatar .editAvatar > div:hover {
	background-color: color(from var(--color-front) srgb r g b / .3);
}

/* page nav */
.page-nav {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 82px;
	z-index: 20;
}

.page-nav::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	/* height: 83px; */
	background: rgba(0, 0, 0, 0.6);
	transition: background-color 0.75s;
	height: 103px;
	pointer-events: none;
	-webkit-mask: url('/img/masks/mega.svg#section-bottom') repeat-x left calc(100% + 118px) / 100% 150px, linear-gradient(to top, transparent 29px, var(--color-dark) 30px);
	        mask: url('/img/masks/mega.svg#section-bottom') repeat-x left calc(100% + 118px) / 100% 150px, linear-gradient(to top, transparent 29px, var(--color-dark) 30px);
}

@media (prefers-color-scheme: light) {
	html[data-theme="system"] .page-nav__sublist-container,
	html[data-theme="system"] .page-nav::before {
		background: color(from var(--color-light) srgb r g b / .8);
	}
	html[data-theme="system"] .page-nav__logo img {
		content: url('/img/logos/dl_dark_small_en.png');
	}
	html[data-theme="system"] .page-nav__list-item a:not(.btn__taped):hover,
	html[data-theme="system"] .page-nav__sublist-item a:not(.btn__taped):hover {
		color: var(--color-uv-dark-2);
	}
}
html[data-theme="light"] .page-nav__sublist-container,
html[data-theme="light"] .page-nav::before {
	background: color(from var(--color-light) srgb r g b / .8);
}
html[data-theme="light"] .page-nav__logo img {
	content: url('/img/logos/dl_dark_small_en.png');
}
html[data-theme="light"] .page-nav__list-item a:not(.btn__taped):hover,
html[data-theme="light"] .page-nav__sublist-item a:not(.btn__taped):hover {
	color: var(--color-uv-dark-2);
}

.page-nav--scroll::before {
	background: rgba(0, 0, 0, 0.7);
}

.page-nav__wrapper {
	max-width: unset;
	padding-inline: 100px;
	height: 100%;
	display: flex;
	align-items: center;
}

.page-nav__logo {
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page-nav__logo > * {
	height: 100%;
	align-content: center;
}
.page-nav__logo .logo_outpost img {
	height: 40px;
	vertical-align: middle;
}
.page-nav__logo .page-nav__logo--dl img {
	height: 100%;
}

.page-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
	height: 100%;
}

.page-nav__list--main {
	margin-left: auto;
}
.page-nav__list--main + .page-nav__list--user {
	margin-left: 12px;
}

.page-nav__list-item {
	height: 100%;
	display: flex;
	align-items: center;
}

.page-nav__list-item > :is(a, span) {
	padding: 10px;
	transition: color 0.3s;
	position: relative;
	color: var(--color-light);
}

.page-nav__list-item a:hover,
.page-nav__sublist-item a:hover {
	color: var(--color-uv-light-2);
}
.page-nav__list-item :hover > .icons:not(.icon-game)::before,
.page-nav__sublist-item :hover > .icons:not(.icon-game)::before {
	background-color: var(--color-uv-light-2);
}

.page-nav__list-item > a::after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 0;
	height: 6px;
	width: 100%;
	-webkit-mask: url("/img/masks/mega.svg#line") no-repeat 0 0% / 100% 24px;
	        mask: url("/img/masks/mega.svg#line") no-repeat 0 0% / 100% 24px;
	background: var(--color-yellow);
	transform-origin: 50%;
	transform: scale(0);
	transition: transform 0.2s;
}

.page-nav__list-item > a:hover::after {
	transform: scale(1);
}

.page-nav__list-item--selected a {
	color: var(--color-yellow);
}

.page-nav__list-item--anniversary.page-nav__list-item--selected a,
.page-nav__list-item--anniversary a {
	color: #dec88e;
}

.page-nav__list-item--buy {
	margin-inline: 30px;
}

.page-nav__list-item .btn {
	padding-inline: 20px;
	transition: 0.3s;
}

.page-nav__list-item .btn:hover {
	color: var(--color-light);
}

.page-nav__list-item .btn::after {
	display: none;
}

.page-nav__list-item--spacer {
	width: 1px;
	height: 39px;
	background: linear-gradient(to bottom, transparent, var(--color-front), transparent);
	margin-inline: 20px;
}

.page-nav__list-item--po > a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-nav__list-item--po > span::before {
	content: ' ';
	margin-right: 6px;
	background: url('/img/icons/outpost_light_small.png') no-repeat center center / 100% 100%;
	width: 16px;
	height: 16px;
}

.page-nav__list-item--with-sublist {
	position: relative;
}

.page-nav__list-item--with-sublist > span,
.page-nav__sublist-item--with-sublist > span,
.page-nav__card > span {
	border-radius: 5px;
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: background-color .3s;
}

.page-nav__list-item--with-sublist:hover > span,
.page-nav__list-item--with-sublist-open > span,
.page-nav__sublist-item--with-sublist:hover > span,
.page-nav__card > span:hover {
	background-color: rgba(209, 209, 209, 0.09);
}

.page-nav__list-item--with-sublist > span::after,
.page-nav__sublist-item--with-sublist > span::after,
.page-nav__card > span::before {
	content: '';
	width: 12px;
	height: 12px;
	-webkit-mask: url('/img/icons/mega.svg#chevron') no-repeat 0 0 / 12px 12px;
	        mask: url('/img/icons/mega.svg#chevron') no-repeat 0 0 / 12px 12px;
	background: var(--color-front);
	transition: transform 0.3s;
	margin-left: 12px;
	transform: rotate(90deg);
}
@media (prefers-color-scheme: light) {
	.page-nav__list-item--with-sublist:hover > span,
	.page-nav__list-item--with-sublist-open > span,
	.page-nav__sublist-item--with-sublist:hover > span,
	.page-nav__card > span:hover {
		background-color: rgba(0, 0, 0, 0.09);
	}
}
html[data-theme="light"] .page-nav__list-item--with-sublist:hover > span,
html[data-theme="light"] .page-nav__list-item--with-sublist-open > span,
html[data-theme="light"] .page-nav__sublist-item--with-sublist:hover > span,
html[data-theme="light"] .page-nav__card > span:hover {
	background-color: rgba(0, 0, 0, 0.09);
}

.page-nav__list-item--with-sublist:hover > span::after,
.page-nav__list-item--with-sublist-open > span::after {
	transform: rotate(-90deg);
}

.page-nav__list-item--with-sublist:hover > .page-nav__sublist-container,
.page-nav__list-item--with-sublist-open > .page-nav__sublist-container {
	opacity: 1;
	pointer-events: all;
}

.page-nav__sublist-container {
	position: absolute;
	left: 0px;
	top: calc(100% - 15px);
		min-width: 100%;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 20px;
	text-transform: none;
	font-weight: 400;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	-webkit-mask: url('/img/masks/frame.svg#inner') no-repeat center center / 100% 100%;
	        mask: url('/img/masks/frame.svg#inner') no-repeat center center / 100% 100%;
}

.page-nav__sublist .page-nav__sublist-item > :is(a, span) {
	display: block;
	padding: 8px 24px;
	white-space: nowrap;
	color: var(--color-light);
}
.page-nav__sublist .page-nav__sublist-item > :is(a, span):hover {
	color: var(--color-uv-light-2);
}

.page-nav__sublist .page-nav__sublist-item:first-child > :is(a, span) {
		padding-top: 16px;
}

.page-nav__sublist .page-nav__sublist-item:last-child > :is(a, span) {
		padding-bottom: 16px;
}

.page-nav__sublist-item--with-icon {
	font-size: 16px;
	line-height: 24px;
}

.page-nav__sublist .page-nav__sublist-item--with-icon > :is(a, span) {
	padding-block: 12px;
}

.page-nav__sublist .page-nav__sublist-item--with-icon > :is(a, span) {
	display: flex;
	align-items: center;
}

.page-nav__sublist-item--with-icon svg {
	width: 16px;
	margin-right: 12px;
	transform: translateY(-1px);
}

.page-nav__sublist-item--secondary {
	background: rgba(255, 255, 255, 0.1);
}

.page-nav__sublist-item--upper {
	font-size: 14px;
	text-transform: uppercase;
}

.page-nav__sublist-item--external > a {
	position: relative;
}

.page-nav__sublist-item--external > a::after {
	content: '';
	/* background: url('img/external-link.svg') no-repeat 50% 50% / contain; */
	width: 16px;
	height: 16px;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.page-nav__sublist-item--with-sublist,
.page-nav__sublist-item--with-sublist > span {
	position: relative;
	cursor: pointer;
}

.page-nav__sublist-item--with-sublist > span::after {
	margin-left: auto;
}

.page-nav__sublist-item--with-sublist:hover > span::after,
.page-nav__sublist-item--with-sublist.page-nav__list-item--with-sublist-open > span::after {
	transform: rotate(-90deg);
}

.page-nav__sublist-item--with-sublist > .page-nav__sublist-container {
	position: relative;
	border-top-left-radius: 0;
	opacity: 0;
	max-height: 0;
	pointer-events: none;
	transition: max-height .3s, opacity 0.3s;
	background: none;
	mask: none;
}
.page-nav__sublist-item--with-sublist > .page-nav__sublist-container .page-nav__sublist-item > :is(a, span) {
	padding: 5px 24px 5px 55px;
}

.page-nav__sublist-item--with-sublist:hover > .page-nav__sublist-container,
.page-nav__list-item--with-sublist:hover .page-nav__sublist-item--with-sublist.page-nav__list-item--with-sublist-open > .page-nav__sublist-container,
.page-nav__list-item--with-sublist.page-nav__list-item--with-sublist-open .page-nav__sublist-item--with-sublist.page-nav__list-item--with-sublist-open > .page-nav__sublist-container {
	opacity: 1;
	pointer-events: all;
	max-height: 200px;
}

.page-nav__list-item--lang > .page-nav__sublist-container {
	left: -8px;
		text-transform: uppercase;
}

.page-nav__list-item--user > .page-nav__sublist-container {
	left: unset;
		right: 0;
}

.page-nav__list-item--user .page-nav__sublist-item--with-sublist > .page-nav__sublist-container {
	left: unset;
	right: 100%;
	border-top-left-radius: 6px;
	border-top-right-radius: 0;
}

.page-nav__list-item--user > span {
		background: none !important;
}

.page-nav__list-item--user .tokens {
	display: flex;
	align-items: center;
}
.page-nav__list-item--user .tokens img {
	width: 32px;
}

.page-nav__user-avatar {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		display: grid;
		place-items: center;
}
body:not(.logged) .page-nav__user-avatar {
	transition: background .3s;
	cursor: pointer;
}
body:not(.logged) .page-nav__user-avatar:hover {
	background: rgba(255,255,255,.15);
}

.page-nav__user-avatar.icons::before {
	margin-right: 0;
	width: 20px;
	height: 20px;
	opacity: .5;
}

.page-nav__user-avatar svg {
		width: 20px;
		height: 20px;
		opacity: 0.5;
}

.page-nav__user-avatar img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		transition: opacity .3s, transform .3s;
}

.page-nav__user-info {
	padding: 16px 24px;
	display: grid;
	grid-template-columns: max-content 1fr;
	-moz-column-gap: 8px;
	     column-gap: 8px;
	row-gap: 4px;
	align-items: center;
}

.page-nav__user-info .page-nav__user-avatar {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 44px;
	height: 44px;
}

.page-nav__user-nick {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.page-nav__user-email {
	font-size: 12px;
	line-height: 1;
}

.page-nav__mobile-button {
	width: 45px;
	height: 35px;
	display: none;
	place-items: center;
	position: relative;
	cursor: pointer;
}
body.samsung .page-nav__mobile-button {
	background: var(--color-red);
}

.page-nav__mobile-button span,
.page-nav__mobile-button span::before,
.page-nav__mobile-button span::after {
	content: '';
	display: block;
	position: relative;
	background: var(--color-front);
	width: 25px;
	height: 3px;
	transition: top .15s .25s, bottom .15s .25s, transform .15s;
	transform-origin: 50% 50%;
}

.page-nav__mobile-button span::before {
	top: -8px;
}
.page-nav__mobile-button span::after {
	bottom: -5px;
}

.page-nav__mobile-button--active span,
.page-nav__mobile-button--active span::before,
.page-nav__mobile-button--active span::after {
	transition: top .15s, bottom .15s, transform .15s .25s;
}

.page-nav__mobile-button--active span {
	transform: rotate(45deg);
}

.page-nav__mobile-button--active span::before {
	top: 0;
}

.page-nav__mobile-button--active span::after {
	bottom: 3px;
	transform: rotate(-90deg);
}

.page-nav__card {
	display: none;
}

body:not(.logged) .page-nav__list--user .tokens,
body:not(.logged) .page-nav__list--user .page-nav__sublist-container {
	display: none;
}
body:not(.logged) .page-nav__list--user .page-nav__list-item :hover > .icons:not(.icon-game)::before {
	background-color: var(--color-light);
}
body:not(.logged) .page-nav__list--user .page-nav__list-item--with-sublist > span::after {
	content: none;
}
body:not(.logged) .page-nav__user-avatar img {
		transform: scale(.5);
		opacity: .2;
}

@media only screen and (max-width: 1700px) {
	.page-nav__wrapper {
		padding-inline: 80px;
	}
}

@media only screen and (max-width: 1440px) {
	.page-nav__wrapper {
		padding-inline: 40px;
	}
}

@media only screen and (max-width: 1100px) {
	.page-nav__wrapper {
		padding-inline: 20px;
	}

	.page-nav__list-item--buy {
		margin-inline: 15px;
	}
}

@media only screen and (max-width: 991px) {
	.page-nav {
		height: 62px;
	}

	.page-nav::before {
		height: 83px;
	}

	.page-nav.loaded::before {
		height: 93px;
	}

	.page-nav__wrapper {
		justify-content: space-between;
		gap: 10px;
		padding-inline: 0;
	}

	.page-nav__logo {
		position: relative;
		z-index: 2;
		height: 40px;
		margin-inline: 10px auto;
		gap: 5px;
	}
	.page-nav__logo .logo_outpost img {
		height: 32px;
	}

	.page-nav__list--main + .page-nav__list--user {
		margin-left: 0;
	}

	.page-nav__mobile-button {
		display: grid;
		position: static;
		z-index: 5;
	}

	.page-nav__list--main,
	.page-nav__card {
		position: absolute;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		padding: 80px 20px;
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		background: rgba(0, 0, 0, 0.95);
		transform: translateX(-100%);
		transition: transform 0.3s;
		font-size: 24px;
	}
	@media (prefers-color-scheme: light) {
		html[data-theme="system"] .page-nav__list--main,
		html[data-theme="system"] .page-nav__card {
			background: color(from var(--color-light) srgb r g b / .95);
		}
		.page-nav__card > span {
			border-color: rgba(0, 0, 0, .15);
		}
		.page-nav__card > span:hover {
			background-color: rgba(0, 0, 0, 0.15);
		}
	}
	html[data-theme="light"] .page-nav__list--main,
	html[data-theme="light"] .page-nav__card {
		background: color(from var(--color-light) srgb r g b / .95);
	}
	html[data-theme="light"] .page-nav__card > span {
		border-color: rgba(0, 0, 0, .15);
	}
	html[data-theme="light"] .page-nav__card > span:hover {
		background-color: rgba(0, 0, 0, 0.15);
	}

	.page-nav__card {
		display: flex;
	}

	.page-nav__card--user {
		transform: translateX(100%);
	}

	.page-nav--show-mobile-menu .page-nav__list--main,
	.page-nav__card--show {
		transform: translateX(0);
	}

	.page-nav__list--user {
		top: 0;
	}

	.page-nav__list-item {
		height: auto;
	}

	.page-nav__list-item > a::after {
		display: none;
	}

	.page-nav__list-item--spacer {
		display: none;
	}

	.page-nav__list-item--lang {
		display: none;
	}

	.page-nav__list-item--buy {
		margin: 50px 0 0;
		width: 100%;
		max-width: 320px;
		justify-content: center;
	}

	.page-nav__list-item .btn {
		font-size: 18px;
		width: 100%;
	}

	.page-nav__list--main .page-nav__list-item > :is(a, span) {
		padding-inline: 30px;
	}

	.page-nav__list-item--po > span::before {
		width: 20px;
		height: 20px;
	}

	.page-nav__sublist-item--with-icon {
		font-size: 24px;
		line-height: 30px;
	}

	.page-nav__list--main .page-nav__list-item--with-sublist > span::after {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-60%) rotate(0);
	}

	.page-nav__list--main .page-nav__list-item--with-sublist > span:hover::after {
		transform: translateY(-60%) rotate(0) translateX(5px);
	}

	.page-nav__list-item--user {
		z-index: 2;
	}

	.page-nav__list-item--with-sublist-open > span {
		background: none;
	}

	.page-nav__list-item--with-sublist:hover > .page-nav__sublist-container,
	.page-nav__list-item--with-sublist-open > .page-nav__sublist-container,
	.page-nav__sublist-item--with-sublist:hover > .page-nav__sublist-container {
		opacity: 0;
		pointer-events: none;
	}

	.page-nav__card {
		font-family: var(--font-head);
	}

	.page-nav__card > .page-nav__sublist-container {
		position: static;
		opacity: 1;
		pointer-events: all;
		align-items: center;
	}

	.page-nav__card .page-nav__user-info {
		padding-inline: 0;
	}

	.page-nav__card > span {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding-block: 8px;
		font-weight: 500;
		transition: background-color .3s;
	}

	.page-nav__card > span::before {
		transform: translateX(-7px) rotate(180deg);
		position: relative;
		top: -2px;
	}

	.page-nav__card > span:hover::before {
		transform: translateX(-10px) rotate(180deg);
	}

	.page-nav__card > span svg {
		display: none;
	}

	.page-nav__list--user + .page-nav__card--user > span {
		display: none;
	}
}

@media only screen and (max-width: 575px) {
	.page-nav {
		height: 58px;
	}

	.page-nav::before {
		height: 53px;
	}

	.page-nav.loaded::before {
		height: 85px;
	}
	.page-nav__list--main,
	.page-nav__card {
		font-size: 5vw;
	}
	.page-nav__list-item > :is(a, span) {
		padding: 1.2vw;
	}
	.page-nav__sublist .page-nav__sublist-item > :is(a, span) {
		padding: 2vw 1vw;
	}
}


/* page footer */
.page-footer {
	background: #000;
	position: relative;
}

.page-footer__social-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 42px;
	padding-block: 30px;
}

.page-footer__social-list a {
	display: block;
	width: 30px;
}

.page-footer__social-list svg {
	display: block;
	filter: brightness(35%);
	transition: filter 0.3s;
	max-height: 30px;
}

.page-footer__social-list a:hover svg {
	filter: brightness(55%);
}

.page-footer__logo-langs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 24px;
}

.page-footer__logo-techland svg {
	height: 34px;
}

.page-footer__langs {
	position: relative;
	height: 34px;
}

.changeLangBtn {
	position: absolute;
	bottom: 0px;
	right: 0;
	height: 34px;
	overflow: hidden;
	z-index: 10;
	color: var(--color-gray);
	font-size: 16px;
	font-weight: 400;
	line-height: 34px;
	text-transform: uppercase;
	width: max-content;
}

.changeLangBtn:not(.flags)::before,
.changeLangBtn::after {
	content: '';
	position: absolute;
	background: var(--color-gray);
	right: 10px;
	bottom: 12px;
	width: 12px;
	height: 12px;
	-webkit-mask: url('/img/icons/mega.svg#chevron') no-repeat center center / 100% 100%;
	        mask: url('/img/icons/mega.svg#chevron') no-repeat center center / 100% 100%;
}

.changeLangBtn::before {
	left: 6px;
	bottom: 8px;
	width: 18px;
	height: 18px;
	-webkit-mask-image: url('/img/icons/mega.svg#globe');
	        mask-image: url('/img/icons/mega.svg#globe');
}

.changeLangBtn::after {
	transition: transform 0.3s;
	transform: rotate(90deg);
}

.changeLangBtn.on {
	height: auto;
	background: #000;
}

.changeLangBtn.on::after {
	transform: rotate(-90deg);
}

.changeLangBtn.on li:nth-child(1) {
	display: none;
}

.changeLangBtn li a {
	display: block;
	padding-inline: 34px 30px;
	color: var(--color-gray);
}
.changeLangBtn.flags li a {
	padding-inline: 15px 30px;
}
.changeLangBtn li a img {
	height: 16px;
	vertical-align: middle;
}

.changeLangBtn a:hover {
	color: var(--color-gray-light);
}

.changeLangBtn.on li a:hover {
	background: #3b3b3b;
}

.page-footer__links-rating {
	padding-block: 30px;
	background: var(--color-bg);
}

.page-footer__links-rating .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.page-footer__links {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-footer__links a {
	color: var(--color-gray);
}
.page-footer__links a:hover {
	text-decoration: underline;
	color: var(--color-gray-light);
}

.page-footer__links-primary {
	display: flex;
	gap: 80px;
	font-size: 16px;
	font-weight: 400;
	color: var(--color-gray);
	text-transform: uppercase;
}

.page-footer__links-secondary {
	display: flex;
	gap: 48px;
	font-size: 16px;
	font-weight: 300;
	color: var(--color-gray-medium);
}

.page-footer__rating img {
	height: 70px;
}

@media only screen and (max-width: 1200px) {
	.page-footer__social-list {
		flex-wrap: wrap;
		gap: 24px;
	}

	.page-footer__logo-langs {
		flex-direction: column-reverse;
		gap: 24px;
	}

	.changeLangBtn {
		right: 50%;
		transform: translateX(50%);
	}

	.page-footer__links-rating .wrapper {
		flex-direction: column-reverse;
		gap: 24px;
		text-align: center;
	}

	.page-footer__links-primary,
	.page-footer__links-secondary {
		flex-wrap: wrap;
		-moz-column-gap: 40px;
		     column-gap: 40px;
		row-gap: 12px;
		justify-content: center;
	}
}