:root {
    /* body */
    --body-min-width: 20rem;
    --body-max-width: 100%;
    --body-background-color-rgb: rgb(21, 17, 12);
    --body-background-color: 21, 17, 12;
    /* container */
    --container-width: 160rem;
    /* fonts */
    --font-0: "Albertus", "Philosopher", "Times New Roman", Times, serif;
    --font-1: "Albertus Extra", "Philosopher", "Times New Roman", Times, serif;
    --font-2: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    --font-3: "Intro Book", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    --font-ico: "gwi";
    /* colors */
    --color-light-rgb: rgb(232, 209, 166);
    --color-light: 232, 209, 166;
    --color-dark-rgb: rgb(0, 0, 0);
    --color-dark: 0, 0, 0;
    --color-red-rgb: rgb(255, 39, 39);
    --color-red: 255, 39, 39;
    --color-yellow-rgb: rgb(255, 255, 0);
    --color-yellow: 255, 255, 0;
    --color-orange-rgb: rgb(255, 165, 0);
    --color-orange: 255, 165, 0;
    --color-pink-rgb: rgb(255, 192, 203);
    --color-pink: 255, 192, 203;
    --color-purple-rgb: rgb(128, 0, 128);
    --color-purple: 128, 0, 128;
    --color-blue-rgb: rgb(0, 0, 255);
    --color-blue: 0, 0, 255;
    --color-green-rgb: rgb(0, 187, 0);
    --color-green: 0, 187, 0;
    --color-grey-rgb: rgb(128, 128, 128);
    --color-grey: 128, 128, 128;
    --color-white-rgb: rgb(255, 255, 255);
    --color-white: 255, 255, 255;
    --color-black-rgb: rgb(0, 0, 0);
    --color-black: 0, 0, 0;
    --color-brown-rgb: rgb(165, 42, 42);
    --color-brown: 165, 42, 42;
    --color-aqua-rgb: rgb(0, 255, 255);
    --color-aqua: 0, 255, 255;
    /* color palette */
    --color-0-rgb: rgb(255, 255, 255);
    --color-0: 255, 255, 255;
    --color-1-rgb: rgb(20, 20, 20);
    --color-1: 20, 20, 20;
    --color-2-rgb: rgb(255, 255, 255);
    --color-2: 255, 255, 255;
    --color-3-rgb: #fff;
    --color-3: #fff;
    --color-4-rgb: #fff;
    --color-4: #fff;
    --color-5-rgb: #fff;
    --color-5: #fff;
    --color-6-rgb: #fff;
    --color-6: #fff;
    --color-7-rgb: #fff;
    --color-7: #fff;
    --color-8-rgb: #fff;
    --color-8: #fff;
    --color-9-rgb: #fff;
    --color-9: #fff;
    --color-accent-rgb: rgb(252, 197, 91);
    --color-accent: 252, 197, 91;
    --color-accent-hover-rgb: rgb(240, 175, 44);
    --color-accent-hover: 240, 175, 44;
    --color-accent-2-rgb: rgb(255, 136, 0);
    --color-accent-2: 255, 136, 0;
    --color-accent-2-hover-rgb: rgb(255, 136, 0);
    --color-accent-2-hover: 255, 136, 0;
    /* other colors */
    --color-url-rgb: rgb(243, 223, 154);
    --color-url: 243, 223, 154;
    --color-url-hover-rgb: rgb(255, 255, 0);
    --color-url-hover: 255, 255, 0;
    /* margin */
    --margin: 0.875rem;
    --margin-x2: calc(var(--margin * 2));
    --margin-half: calc(var(--margin) / 2);
    --margin-third: calc(var(--margin) / 3);
    --negative-margin: calc(var(--margin) * -1);
    /* other */
    --border-radius: 0.3125rem;
    --border-width: 1px;
    --border-type: solid;
    --border-color: rgba(77, 63, 50, 0.5);
    --border: var(--border-width) var(--border-type) var(--border-color);
    --shadow: 0px 0.4375rem 3.375rem rgba(36, 30, 10, 0.1);
    /* --thumb-url: url(../images/thumb.jpg); */
    --play: url(../images/play.png);
    --header-dec-left: url(../images/header-dec-left.png);
    --header-dec-right: url(../images/header-dec-right.png);
    --fpnav-width: 26.25rem;
    --fpnav-width-hover: 26.25rem;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
    border-color: rgba(0, 0, 0, 0.15);
}

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    /* 2 */
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

button,
input {
    /* 1 */
    overflow: visible;
}

button,
select {
    /* 1 */
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -0.125rem;
    /* 2 */
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

img {
    border-style: none;
    display: inline-block;
    max-width: 100%;
}

video,
iframe {
    max-width: 100%;
}

a {
    background-color: transparent;
    color: rgba(243, 223, 154, 1);
    color: rgba(var(--color-url), 1);
    transition-duration: 0.2s;
    transition-property: opacity, color, background-color;
    outline: 0;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

/* убираем выделение ссылок пунктирной рамкой в FF и IE */
a:active,
a:focus {
    outline: 0;
}

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

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

/* Firefox 19+ */
:-moz-placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
}

/* Firefox 18- */
:-ms-input-placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
}

:focus::-webkit-input-placeholder {
    color: var(--input-placeholder-color-focus);
}

:focus::-moz-placeholder {
    color: var(--input-placeholder-color-focus);
}

:focus:-moz-placeholder {
    color: var(--input-placeholder-color-focus);
}

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

/* gwi */
[class^="gwi_"]:before,
[class*=" gwi_"]:before {
    margin: 0;
    width: auto;
}

/* list */
ul,
ol {
    padding-left: 1.375em;
    margin: 0.625em 0;
}

/* table */
table {
    border: 1px solid rgba(252, 197, 91, 0.1);
    border: 1px solid rgba(var(--color-accent), 0.1);
    border-collapse: collapse;
    background-color: rgb(17, 17, 17);
    border-radius: 0.125rem;
    color: rgb(235, 235, 235);
}

td,
th {
    border: 1px solid rgba(252, 197, 91, 0.1);
    border: 1px solid rgba(var(--color-accent), 0.1);
    padding: 0.625em 1em;
}

th {
    color: rgb(204, 190, 156);
    background-color: rgb(27, 24, 23);
    font-weight: bold;
}

tr:where(:nth-child(odd)) {
    background-color: rgb(27, 24, 23);
}

/* scrollbar */
::-webkit-scrollbar {
    width: max(0.375rem, 0.375rem);
    height: max(0.125rem, 0.125rem);
    background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb {
    background-color: #6b4725;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9b6635;
}

/* * {
	scrollbar-width: thin;
	scrollbar-color: #9b6635 #6b4725;
} */
/* Для Firefox */
.scroll {
    scrollbar-width: thin;
    scrollbar-color: #9b6635 rgba(0, 0, 0, 0.4);
}

/* Для Chrome, Safari, Edge */
.scroll::-webkit-scrollbar {
    width: 0.1875rem;
}

.scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.625rem;
}

.scroll::-webkit-scrollbar-thumb {
    background: #9b6635;
    border-radius: 0.625rem;
}

.scroll::-webkit-scrollbar-thumb:hover {
    background: #c29739;
}

/* main */
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: "Albertus", "Philosopher", "Times New Roman", Times, serif;
    font-family: var(--font-0);
    font-size: 100%;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    color: rgba(var(--color-0), 1);
    cursor: default;
    overflow-x: clip;
}

/* @media (--v5) {
		font-size: 87%;
	}

	@media (--v8) {
		font-size: 100%;
	} */
@media (min-width: 1200px) {
    html {
        font-size: calc(max(0.5vw, 0.25rem) + max(0.55vh, 0.25rem))
    }
}

/* @media (min-width: 1200px) AND (max-height: 860px) {
		font-size: calc(max(0.4vw, 4px) + max(0.65vh, 4px));
	} */
@media (min-width: 2060px) {
    html {
        font-size: calc(max(0.4vw, 0.25rem) + max(0.65vh, 0.25rem))
    }
}

@media (min-width: 2600px) AND (min-height: 1000px) {
    html {
        font-size: calc(max(0.2vw, 0.25rem) + max(1.1vh, 0.3125rem))
    }
}

body {
    position: relative;
    z-index: 0;
    overflow-x: clip;
    margin: 0;
    background-color: rgba(21, 17, 12, 1);
    background-color: rgba(var(--body-background-color), 1);
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 20rem;
    min-width: var(--body-min-width);
    display: flex;
    flex-direction: column;
}

.page {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    min-width: 20rem;
    min-width: var(--body-min-width);
    max-width: 100%;
    max-width: var(--body-max-width);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition: 0.3s all;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .page {
        overflow: hidden
    }
}

.section {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
}

.container {
    max-width: calc(160rem + 0.875rem * 4);
    max-width: calc(var(--container-width) + var(--margin) * 4);
    width: 100%;
    min-width: 0;
    padding-right: calc(0.875rem * 2);
    padding-right: calc(var(--margin) * 2);
    padding-left: calc(0.875rem * 2);
    padding-left: calc(var(--margin) * 2);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.container_fluid {
    max-width: 100%;
}

.spacer {
    flex-grow: 1;
    min-height: 12.5rem;
}

.compensate-navigation {
    height: var(--navigation-height);
    box-sizing: border-box;
}

[data-section-bg] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -10;
    background-color: transparent;
    background-image: url(../images/hero/bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* link */
.link {
    text-decoration: underline;
    color: currentColor;
}

.link:hover {
    text-decoration: none;
}

.link_tdn {
    text-decoration: none;
}

.link_hover_tdu:hover {
    text-decoration: underline;
}

/* gwtab */
[data-tab] {
    display: none;
    opacity: 0;
    -webkit-animation: tab 1s ease forwards;
    animation: tab 1s ease forwards;
}

@-webkit-keyframes tab {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tab {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ttl */
.ttl {
    position: relative;
    z-index: 0;
    padding-left: 1.875rem;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 1);
    color: rgba(var(--color-0), 1);
    font-family: "Albertus", "Philosopher", "Times New Roman", Times, serif;
    font-family: var(--font-0);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
}

@media (min-width: 1200px) {
    .ttl {
        font-size: 1.375rem
    }
}

.ttl:before {
    display: block;
    content: "";
    width: 1rem;
    height: 1rem;
    border: 0.1875rem solid rgb(255, 235, 165);
    filter: drop-shadow(0 0 0.5rem rgba(255, 213, 44, 1));
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    box-sizing: border-box;
}

/* heading */
.heading {
    color: rgba(255, 255, 255, 1);
    color: rgba(var(--color-0), 1);
    font-family: "Albertus", "Philosopher", "Times New Roman", Times, serif;
    font-family: var(--font-0);
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 1.25rem;
    gap: 1.25rem;
    box-sizing: border-box;
    margin: 0;
    line-height: 1.2;
}

@media (min-width: 540px) {
    .heading {
        font-size: 1.625rem
    }
}

@media (min-width: 840px) {
    .heading {
        font-size: 2.125rem
    }
}

@media (min-width: 1200px) {
    .heading {
        font-size: 2.5rem
    }
}

.heading:after {
    display: none;
    content: "";
    background-color: transparent;
    background-image: url(../images/heading-decor.png);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    width: 8.8125rem;
    height: 1.9375rem;
    min-width: 0;
}

@media (min-width: 1050px) {
    .heading:after {
        display: block
    }
}

.heading_bb {
    padding-bottom: 1.25rem;
    border-bottom: 0.125rem solid #928a7e;
}

@media (min-width: 1200px) {
    .heading_bb {
        padding-bottom: 2.875rem;
        border-bottom: 0.25rem solid #928a7e
    }
}

.heading_bt {
    padding-top: 1.25rem;
    border-top: 0.125rem solid #928a7e;
}

@media (min-width: 1200px) {
    .heading_bt {
        padding-top: 2.875rem;
        border-top: 0.25rem solid #928a7e
    }
}

.heading_mb {
    margin-bottom: 1.25rem;
}

@media (min-width: 1200px) {
    .heading_mb {
        margin-bottom: 2.5rem
    }
}

.heading_mt {
    margin-top: 1.25rem;
}

@media (min-width: 1200px) {
    .heading_mt {
        margin-top: 2.5rem
    }
}

/* list */
:root {
    --list-marker-top: 0.4em;
}

.list {
    --list-li-padding: 1.5rem;
    padding-left: 0;
    list-style-type: none;
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}

@media (min-width: 840px) {
    .list {
        --list-li-padding: 2.125rem
    }
}

.list_type_1 {
    --list-marker-content: none;
    --list-li-padding: 0;
    list-style-type: none;
    font-size: 1rem;
    grid-gap: 0.625rem;
    gap: 0.625rem;
    text-align: center;
}

@media (min-width: 840px) {
    .list_type_1 {
        --list-marker-top: 0.5em;
        --list-marker-content: "";
        --list-li-padding: 2.125rem;
        font-size: 1.875rem;
        grid-gap: 1.875rem;
        gap: 1.875rem;
        text-align: left
    }
}

.list li {
    position: relative;
    z-index: 0;
    padding-left: var(--list-li-padding);
}

.list li:before {
    content: var(--list-marker-content);
    display: inline-block;
    position: absolute;
    top: 0.4em;
    top: var(--list-marker-top);
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 0.1875rem solid rgb(255, 235, 165);
    filter: drop-shadow(0 0 0.5rem rgba(255, 213, 44, 1));
    box-sizing: border-box;
    transform: rotate(45deg);
}

/* tblbox */
.tblbox {
    max-width: 100%;
    overflow: auto;
    min-width: 0;
}

.tblbox>table {
    width: 100%;
    min-width: 56.25rem;
}

/* itm */
.itm {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 0.875rem;
    gap: 0.875rem;
    line-height: 1.3;
}

.itm__img {
    display: block;
    flex-shrink: 0;
}

.itm__content {
    /* margin: auto 0; */
    box-sizing: border-box;
}

.itm-list {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}

/* servers-desktop */
@media (min-width: 1200px) {
    .servers-desktop {
        display: none
    }
}

/* preload */
.preload {
    background-color: rgb(21, 17, 12);
    min-width: 20rem;
    min-width: var(--body-min-width);
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s cubic-bezier(0.64, 0.14, 0.34, 1.32);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0.625rem;
}

.preload__logo {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.preload_fade {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.4);
}

@-webkit-keyframes preanimateout {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes preanimateout {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
    }
}

.preload__progress {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 0;
    height: 0.3125rem;
    background: rgb(200, 129, 107);
}

.preload__items {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 0.625rem;
    gap: 0.625rem;
    margin-top: 0.9375rem;
}

.preload__item {
    width: 0.625rem;
    height: 0.625rem;
    background: rgb(196, 196, 196);
    border-radius: 50%;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* gw-anime */
[data-gw-anime] {
    opacity: 0;
    transition: 1s all;
}

[data-gw-anime-custom] {
    opacity: 1;
}

.zoomIn {
    -webkit-animation: zoomIn 1s ease forwards;
    animation: zoomIn 1s ease forwards;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.zoomInDown {
    -webkit-animation: zoomInDown 1s ease forwards;
    animation: zoomInDown 1s ease forwards;
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-5vh);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-5vh);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.zoomInUp {
    -webkit-animation: zoomInUp 1s ease forwards;
    animation: zoomInUp 1s ease forwards;
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(5vh);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(5vh);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fadeIn {
    -webkit-animation: fadeIn 1s ease forwards;
    animation: fadeIn 1s ease forwards;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeInLeft {
    -webkit-animation: fadeInLeft 1s ease forwards;
    animation: fadeInLeft 1s ease forwards;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation: fadeInRight 1s ease forwards;
    animation: fadeInRight 1s ease forwards;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInUp {
    -webkit-animation: fadeInUp 1s ease forwards;
    animation: fadeInUp 1s ease forwards;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(5vh);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(5vh);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInDown {
    -webkit-animation: fadeInDown 1s ease forwards;
    animation: fadeInDown 1s ease forwards;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-5vh);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-5vh);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.turnRight {
    -webkit-animation: turnRight 1s ease forwards;
    animation: turnRight 1s ease forwards;
    transform-origin: center;
}

@-webkit-keyframes turnRight {
    0% {
        opacity: 0;
        transform: translateX(-15%) rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

@keyframes turnRight {
    0% {
        opacity: 0;
        transform: translateX(-15%) rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

.turLeft {
    -webkit-animation: turLeft 1s ease forwards;
    animation: turLeft 1s ease forwards;
    transform-origin: center;
}

@-webkit-keyframes turLeft {
    0% {
        opacity: 0;
        transform: translateX(15%) rotate(15deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

@keyframes turLeft {
    0% {
        opacity: 0;
        transform: translateX(15%) rotate(15deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

/* btn */
:root {
    --btn-scale: 1;
}

@media (min-width: 1050px) {
    :root {
        --btn-scale: 1
    }
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    /* font-weight: 700; */
    line-height: 1;
    cursor: pointer;
    transition: 0.2s all;
    flex-shrink: 0;
    text-shadow: none;
    position: relative;
    z-index: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    font-weight: 400;
    font-size: calc(1rem * 1);
    font-size: calc(1rem * var(--btn-scale));
    color: rgb(255, 235, 165);
    text-decoration: none;
    grid-gap: calc(0.625rem * 1);
    gap: calc(0.625rem * 1);
    grid-gap: calc(0.625rem * var(--btn-scale));
    gap: calc(0.625rem * var(--btn-scale));
    padding: calc(0.3125rem * 1);
    padding: calc(0.3125rem * var(--btn-scale));
    min-height: calc(3.125rem * 1);
    min-height: calc(3.125rem * var(--btn-scale));
    width: calc(12.5rem * 1);
    width: calc(12.5rem * var(--btn-scale));
    background-color: rgba(30, 24, 17, 0.6);
    border: 0.125rem solid rgb(255, 235, 165);
    border-radius: calc(0.9375rem * 1);
    border-radius: calc(0.9375rem * var(--btn-scale));
    text-transform: uppercase;
}

@media (min-width: 840px) {
    .btn {
        padding: calc(0.625rem * 1);
        padding: calc(0.625rem * var(--btn-scale));
        min-height: calc(4.625rem * 1);
        min-height: calc(4.625rem * var(--btn-scale));
        width: calc(17.5rem * 1);
        width: calc(17.5rem * var(--btn-scale));
        font-size: calc(1.375rem * 1);
        font-size: calc(1.375rem * var(--btn-scale))
    }
}

.btn:hover {
    /* background-color: rgba(255, 235, 165, 0.6); */
    /* color: rgba(30, 24, 17, 1); */
    color: #fff;
    box-shadow: inset 0 0 2.875rem 0.9375rem rgba(255, 235, 165, 0.5);
    letter-spacing: 0.1em;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 840px) {
    .btn_size_middle {
        width: calc(21.875rem * 1);
        width: calc(21.875rem * var(--btn-scale))
    }
}

@media (min-width: 840px) {
    .btn_size_long {
        width: calc(25rem * 1);
        width: calc(25rem * var(--btn-scale))
    }
}

.btn_size_auto {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: calc(0.3125rem * 1) calc(1rem * 1);
    padding: calc(0.3125rem * var(--btn-scale)) calc(1rem * var(--btn-scale));
    letter-spacing: 0;
}

@media (min-width: 840px) {
    .btn_size_auto {
        padding: calc(0.625rem * 1) calc(1.5rem * 1);
        padding: calc(0.625rem * var(--btn-scale)) calc(1.5rem * var(--btn-scale))
    }
}

.btn_size_auto:hover {
    padding: calc(0.3125rem * 1) calc(1rem * 1);
    padding: calc(0.3125rem * var(--btn-scale)) calc(1rem * var(--btn-scale));
    letter-spacing: 0;
}

@media (min-width: 840px) {
    .btn_size_auto:hover {
        padding: calc(0.625rem * 1) calc(1.5rem * 1);
        padding: calc(0.625rem * var(--btn-scale)) calc(1.5rem * var(--btn-scale))
    }
}

/* lang */
:root {
    --lang-font-size: 0.875rem;
    --lang-item-border: 1px solid rgb(138, 127, 101);
    --lang-item-border-radius: 50%;
    --lang-item-width: 2.5rem;
    --lang-item-height: 2.5rem;
    --lang-gap: 0.625rem;
}

@media (min-width: 840px) {
    :root {
        --lang-font-size: 1.5rem;
        --lang-item-border: 1px solid rgb(138, 127, 101);
        --lang-item-border-radius: 50%;
        --lang-item-width: 4.375rem;
        --lang-item-height: 4.375rem;
        --lang-gap: 1.875rem
    }
}

.lang {
    position: relative;
    z-index: 0;
}

.lang_pos {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    z-index: 36;
}

@media (min-width: 840px) {
    .lang_pos {
        right: 1.875rem;
        top: calc(9.125rem / 2 - 2.5rem / 2);
        top: calc(9.125rem / 2 - var(--lang-item-height) / 2)
    }
}

.lang__current {
    position: relative;
    z-index: 0;
}

.lang__current:after {
    display: none;
    content: "";
    background-color: transparent;
    background-image: url(../images/lang/arrow.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 3.6875rem;
    height: 4.8125rem;
    position: absolute;
    pointer-events: none;
    top: 3.25rem;
    transform: rotate(-90deg);
    left: 0.5rem;
}

@media (min-width: 840px) {
    .lang__current:after {
        display: block
    }
}

.lang__list {
    position: absolute;
    top: calc(100% + 0.625rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-gap: 0.625rem;
    gap: 0.625rem;
    grid-gap: var(--lang-gap);
    gap: var(--lang-gap);
    left: 0;
    opacity: 0;
    transform: translateY(-1.875rem);
    transition: 0.2s all;
    visibility: hidden;
    z-index: 2;
}

@media (min-width: 840px) {
    .lang__list {
        top: calc(100% + 3.125rem)
    }
}

.lang__list:after {
    display: block;
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 3.125rem;
}

.lang:hover .lang__list {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.lang__item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 2.5rem;
    width: var(--lang-item-width);
    height: 2.5rem;
    height: var(--lang-item-height);
    box-sizing: border-box;
    color: rgba(255, 255, 255, 1);
    color: rgba(var(--color-0), 1);
    font-size: 0.875rem;
    font-size: var(--lang-font-size);
    text-shadow: 0 0.1875rem 0 rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 0;
}

.lang__item:hover {
    color: rgb(255, 235, 165);
}

.lang__item:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border-radius: var(--lang-item-border-radius);
    border: 1px solid #857a63;
    background-color: rgba(52, 47, 56, 0.5);
    z-index: -1;
    transition: 0.2s all;
    pointer-events: none;
}

.lang__item:hover:before {
    filter: brightness(120%);
    transform: scale(1.1);
    background-color: rgb(85, 71, 62);
}

.lang__item:after {
    content: "";
    display: none;
    position: absolute;
    left: -0.625rem;
    top: -0.625rem;
    right: -0.625rem;
    bottom: -0.625rem;
    border-radius: 50%;
    border: 1px solid rgb(88, 81, 66);
    z-index: -1;
    transition: 0.2s all;
    pointer-events: none;
}

@media (min-width: 840px) {
    .lang__item:after {
        display: block
    }
}

.lang__item:hover:after {
    opacity: 0;
    transform: scale(0.9);
}

.lang__ico {
    transition: 0.2s all;
}

.lang__item:hover .lang__ico {
    filter: drop-shadow(0 0 0.625rem rgba(255, 213, 44, 1));
}

/* nav */
:root {
    /* nav */
    --nav-height: auto;
}

[data-section="nav"] {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-direction: row;
    /* margin-top: 50px; */
    visibility: visible;
    /* transform: translateY(0); */
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1200px) {
    [data-section="nav"] {
        display: flex;
        margin-top: 0;
        z-index: 6;
        transition: var(--fpnav-transition-duration) all;
        position: absolute;
        /* left: var(--fpnav-width); */
        left: 0;
        right: 0;
        top: 0;
        height: auto;
        height: var(--nav-height);
        display: flex
            /* padding-left: var(--fpnav-width); */
    }
}

/* .fpnav:hover ~ [data-section="nav"],
.fpnav:hover ~ .fp [data-section="nav"] {
	padding-left: var(--fpnav-width-hover);
} */
[data-section-nav-bg] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-bottom: 0.25rem solid #bbac8b;
    background-color: rgba(22, 15, 2, 0.5);
    transition: var(--fpnav-transition-duration) all;
}

@media (min-width: 1200px) {
    [data-section-nav-bg] {
        -webkit-clip-path: polygon(26.25rem 0,
                100% 0,
                300% 300%,
                26.25rem 100%);
        clip-path: polygon(26.25rem 0,
                100% 0,
                300% 300%,
                26.25rem 100%);
        -webkit-clip-path: polygon(var(--fpnav-width) 0,
                100% 0,
                300% 300%,
                var(--fpnav-width) 100%);
        clip-path: polygon(var(--fpnav-width) 0,
                100% 0,
                300% 300%,
                var(--fpnav-width) 100%)
    }
}

@media (min-width: 1200px) {

    .fpnav:hover~[data-section="nav"] [data-section-nav-bg],
    .fpnav:hover~.fp [data-section="nav"] [data-section-nav-bg] {
        -webkit-clip-path: polygon(26.25rem 0,
                100% 0,
                300% 300%,
                26.25rem 100%);
        clip-path: polygon(26.25rem 0,
                100% 0,
                300% 300%,
                26.25rem 100%);
        -webkit-clip-path: polygon(var(--fpnav-width-hover) 0,
                100% 0,
                300% 300%,
                var(--fpnav-width-hover) 100%);
        clip-path: polygon(var(--fpnav-width-hover) 0,
                100% 0,
                300% 300%,
                var(--fpnav-width-hover) 100%)
    }
}

[data-section-nav-bg]:before {
    display: block;
    content: "";
    background-color: rgba(163, 163, 163, 0.4);
    height: 0.125rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.375rem;
    pointer-events: none;
}

[data-section-nav-bg]:after {
    display: block;
    content: "";
    background-color: transparent;
    background-image: url(../images/nav/decor.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 65.3125rem;
    height: 4.25rem;
    position: absolute;
    left: calc(50% - 32.625rem);
    bottom: -2.875rem;
    pointer-events: none;
}

[data-container="nav"] {
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-direction: row;
}

@media (min-width: 1200px) {
    [data-container="nav"] {
        padding: 0
    }
}

.nav {
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    color: rgba(255, 255, 255, 1);
    color: rgba(var(--color-0), 1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-gap: 0 0.625rem;
    gap: 0 0.625rem;
    width: 100%;
    min-height: 9.125rem;
}

@media (min-width: 1200px) {
    .nav {
        display: grid;
        grid-template-columns: 1fr 26.25rem 1fr;
        min-height: 9.125rem
    }
}

.nav__side {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav__side_2 {
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .nav__side_2 {
        padding-right: 11.25rem;
        justify-content: flex-end
    }
}

/* footer */
:root {
    /* footer */
    --footer-height: 7.5rem;
}

[data-section="footer"] {
    border-top: 0.25rem solid #bbac8b;
    background-color: rgba(22, 15, 2, 0.5);
    box-sizing: border-box;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* margin-top: 50px; */
@media (min-width: 1200px) {
    [data-section="footer"] {
        margin-top: 0;
        z-index: 6;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 7.5rem;
        height: var(--footer-height);
        display: flex;
        padding: 0
    }
}

[data-section="footer"]:before {
    display: block;
    content: "";
    background-color: rgba(163, 163, 163, 0.4);
    height: 0.125rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0.375rem;
    pointer-events: none;
}

[data-section="footer"]:after {
    display: block;
    content: "";
    background-color: transparent;
    background-image: url(../images/footer/decor.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 65.3125rem;
    height: 5.625rem;
    position: absolute;
    left: calc(50% - 32.625rem);
    top: -2.375rem;
    pointer-events: none;
}

.footer {
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    color: rgba(255, 255, 255, 1);
    color: rgba(var(--color-0), 1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-gap: 0.625rem;
    gap: 0.625rem;
}

@media (min-width: 1200px) {
    .footer {
        height: 7.5rem;
        height: var(--footer-height);
        flex-direction: row
    }
}

.footer__links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 0.5rem;
    gap: 0.5rem;
    color: rgb(255, 235, 165);
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    margin-top: 0.1875rem;
}

@media (min-width: 1200px) {
    .footer__links {
        justify-content: flex-start
    }
}

.footer__links-devider {
    display: inline-block;
}

.footer__links-devider:after {
    display: block;
    content: "|";
}

.footer__links-item {
    color: inherit;
    text-decoration: none;
}

.footer__links-item:hover {
    text-decoration: underline;
}

.footer__content {
    text-transform: uppercase;
}

.footer__copyright {
    font-size: 0.875rem;
}

.footer__desc {
    color: rgb(110, 118, 133);
    font-size: 0.625rem;
}

.footer__side {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (min-width: 1200px) {
    .footer__side_1 {
        justify-content: flex-start;
        padding-right: 1.25rem;
        flex-shrink: 0
    }
}

@media (min-width: 1200px) {
    .footer__side_2 {
        justify-content: flex-end
    }
}

@media (min-width: 1200px) {
    .footer__content {
        text-align: left
    }
}

.footer__tracks {
    display: none;
}

@media (min-width: 1200px) {
    .footer__tracks {
        flex-grow: 1;
        display: flex;
        min-width: 0;
        align-self: stretch
    }
}

/* consent */
[data-section="consent"] {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    -webkit-animation: consentShow 1s ease forwards;
    animation: consentShow 1s ease forwards;
    background: rgba(247, 247, 247, 0.2);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    box-shadow: 0 0 3.75rem #000;
}

[data-container="consent"] {
    max-width: 93.75rem;
}

@-webkit-keyframes consentShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes consentShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.consent {
    color: #fff;
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    font-size: 0.875rem;
    box-sizing: border-box;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    display: grid;
    align-items: center;
    text-align: center;
    grid-gap: 1.25rem 3.125rem;
    gap: 1.25rem 3.125rem;
}

@media (min-width: 680px) {
    .consent {
        grid-template-columns: 1fr auto;
        font-size: 1rem;
        text-align: left;
        padding-top: 1rem;
        padding-bottom: 1.25rem
    }
}

@media (min-width: 1200px) {
    .consent {
        padding-top: 1.375rem;
        padding-bottom: 1.375rem;
        font-size: 1.25rem
    }
}

@media (min-width: 680px) {
    .consent__btns {
        text-align: right
    }
}

/* player */
[data-container="player"] {}

.player {
    width: 100%;
    position: relative;
    z-index: 0;
    height: 100vh;
    min-height: 37.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 15rem 0;
}

@media (min-width: 1200px) {
    .player {
        justify-content: flex-end;
        padding: 12.5rem 16.25rem;
        min-height: 56.25rem
    }
}

.player__box {
    max-width: 43.125rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.player__control {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 1rem;
    gap: 1rem;
}

.player__to {
    background-color: transparent;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    transition: 0.2s all;
}

.player__to:hover {
    filter: brightness(1.2);
}

.player__to_prev {
    background-image: url(../images/player/btn-prev.png);
}

.player__to_next {
    background-image: url(../images/player/btn-next.png);
}

.player__play {
    background-color: transparent;
    width: 12.125rem;
    height: 12.125rem;
    position: relative;
    z-index: 0;
    outline-offset: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s all;
}

.player__play:hover {
    filter: brightness(1.2);
}

.player__play:before {
    content: "";
    display: block;
    background-image: url(../images/player/play-bg.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12.125rem;
    height: 12.125rem;
    border-radius: 50%;
    transition: 0.2s all;
    pointer-events: none;
}

.player__play:after {
    content: "";
    display: block;
    background-image: url(../images/player/play-start.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12.125rem;
    height: 12.125rem;
    pointer-events: none;
}

.player__play[data-player-play="true"]:after {
    background-image: url(../images/player/play-pause.png);
}

.player__bar {
    margin-top: 0.625rem;
    font-size: 1.25rem;
    font-family: "Intro Book", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-3);
    text-transform: uppercase;
    color: #d6d5d8;
}

.player__time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.875rem;
    font-family: "Intro Book", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-3);
    color: #cfad7f;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    margin-top: 0.5rem;
    pointer-events: none;
    /* font-feature-settings: "lnum";
	font-variant-numeric: lining-nums; */
}

.player__time-left {}

.player__time-current {
    color: #fbc55b;
}

.player__time-duration {}

.player__progress {
    margin-top: 2.5rem;
    filter: drop-shadow(0 0 0.5rem rgba(253, 234, 164, 0.5));
}

[data-player="progress"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.4375rem;
    background: #555356;
    /* fallback */
    border-radius: 0.25rem;
    outline: none;
    cursor: pointer;
    transition: background 0.1s ease;
}

[data-player="progress"]::-webkit-slider-runnable-track {
    height: 0.625rem;
    background: transparent;
    /* overridden via JS */
    border-radius: 0.1875rem;
}

[data-player="progress"]::-moz-range-track {
    height: 0.625rem;
    background: transparent;
    border-radius: 0.1875rem;
}

[data-player="progress"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #fde9a4;
    border: 0;
    margin-top: -0.5rem;
    position: relative;
    z-index: 1;
}

[data-player="progress"]::-moz-range-thumb {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #fde9a4;
    border: 0;
    position: relative;
    z-index: 1;
}

.player__heading {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 0;
    gap: 0;
    position: relative;
    z-index: 0;
}

.player__heading-dec-left {
    flex-grow: 1;
    height: 2.9375rem;
    position: relative;
    z-index: 0;
}

.player__heading-dec-left:after {
    content: "";
    display: block;
    background-color: transparent;
    background-image: url(../images/player/h-dec-left.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 11.3125rem;
    height: 2.9375rem;
    position: absolute;
    right: 0;
    top: 0.3125rem;
}

.player__heading-dec-right {
    flex-grow: 1;
    height: 2.9375rem;
    position: relative;
    z-index: 0;
}

.player__heading-dec-right:after {
    content: "";
    display: block;
    background-color: transparent;
    background-image: url(../images/player/h-dec-right.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 11.3125rem;
    height: 2.9375rem;
    position: absolute;
    left: 0;
    top: 0.3125rem;
}

.player__title {
    text-align: center;
    font-size: 2.5rem;
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    font-weight: bold;
    color: rgb(255, 255, 255);
    line-height: 1.1;
    position: relative;
    z-index: 0;
}

@media (min-width: 540px) {
    .player__title {
        font-size: 3.25rem
    }
}

.player__volume {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 5.625rem;
    grid-gap: 1rem;
    gap: 1rem;
    display: none;
}

@media (min-width: 1200px) {
    .player__volume {
        display: flex;
        right: 5rem;
        top: 50%;
        transform: translateY(-50%)
    }
}

.player__volume-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-writing-mode: bt-lr;
    writing-mode: vertical-lr;
    direction: rtl;
    background: transparent;
    background: #555356;
    /* fallback */
    border-radius: 0.25rem;
    outline: none;
    cursor: pointer;
    transition: background 0.1s ease;
    width: 0.375rem;
    height: 11.25rem;
}

@media (min-width: 1200px) {
    .player__volume-range {
        height: 18.75rem
    }
}

.player__volume-range::-webkit-slider-runnable-track {
    width: 0.375rem;
    background: transparent;
    /* overridden via JS */
    border-radius: 0.1875rem;
}

.player__volume-range::-moz-range-track {
    width: 0.375rem;
    background: transparent;
    border-radius: 0.1875rem;
}

.player__volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: #fff;
    border: 0;
    margin-left: -0.25rem;
    position: relative;
    z-index: 1;
}

.player__volume-range::-moz-range-thumb {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: #fff;
    border: 0;
    position: relative;
    z-index: 1;
}

.player__volume-icon {
    background-color: transparent;
    background-image: url(../images/player/volume.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 1.4375rem;
    height: 2.125rem;
}

.player__btns {
    margin-top: 3.625rem;
}

.player__btn {
    color: #fff;
    min-width: 17.5rem;
    min-height: calc(3.75rem * 1);
    min-height: calc(3.75rem * var(--btn-scale));
}

@media (min-width: 840px) {
    .player__btn {
        min-height: calc(6.25rem * 1);
        min-height: calc(6.25rem * var(--btn-scale));
        width: calc(25rem * 1);
        width: calc(25rem * var(--btn-scale))
    }
}

.player__btn-ico {
    margin-right: 1.625rem;
    font-size: 2.5rem;
}

/* logo */
:root {
    --logo-height: auto;
}

.logo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    width: 100%;
}

.logo__img {
    display: block;
    margin: 0;
    width: 100%;
}

.logo__img_hover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    width: 100%;
}

.logo:hover .logo__img_hover {
    -webkit-animation: logo 0.3s ease;
    animation: logo 0.3s ease;
}

@-webkit-keyframes logo {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    20% {
        opacity: 0.3;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes logo {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    20% {
        opacity: 0.3;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* online */
.online {
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 0.5rem;
    gap: 0.5rem;
}

.online__status {
    color: #fabca6;
    font-size: 1.5625rem;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 0.5rem;
    gap: 0.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 0.3125rem #e71c1c) drop-shadow(0 0 0.3125rem #e71c1c);
    margin-right: 0.625rem;
}

.online__marker {
    border-radius: 50%;
    background-color: #fabca6;
    width: 0.75rem;
    height: 0.75rem;
    display: inline-block;
}

.online__count {
    font-size: 1.875rem;
    color: #d5ad72;
    line-height: 1;
}

@media (min-width: 540px) {
    .online__count {
        font-size: 2.5rem
    }
}

.online__text {
    font-size: 0.875rem;
    line-height: 1;
    color: #cdcdcd;
    text-transform: uppercase;
}

@media (min-width: 540px) {
    .online__text {
        font-size: 1.125rem
    }
}

/* schedule */
.schedule {
    background-color: rgba(0, 0, 0, 0.7);
    border-right: 0.25rem solid #89857b;
    box-sizing: border-box;
    width: 26.25rem;
    padding-right: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.schedule_pos {
    max-height: 37.5rem;
    height: auto;
    width: 100%;
    margin-bottom: 2.5rem;
}

@media (min-width: 1200px) {
    .schedule_pos {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 8.5rem;
        z-index: 10;
        width: 26.25rem;
        max-height: none;
        margin-bottom: 0
    }
}

.schedule__head {
    box-sizing: border-box;
    padding: 2.125rem 1.25rem 1.25rem 2.125rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.schedule__head-title {
    font-size: 1.5625rem;
    text-transform: uppercase;
}

.schedule__head-subtitle {
    font-size: 1.125rem;
    text-transform: uppercase;
}

.schedule__head-name {
    color: #ba8f50;
}

.schedule__container {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-mask: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgb(0, 0, 0) 0.625rem,
            rgb(0, 0, 0) calc(100% - 0.625rem),
            rgba(0, 0, 0, 0) 100%);
    mask: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgb(0, 0, 0) 0.625rem,
            rgb(0, 0, 0) calc(100% - 0.625rem),
            rgba(0, 0, 0, 0) 100%);
}

.schedule__list {
    display: grid;
    grid-gap: 0.5rem;
    gap: 0.5rem;
    box-sizing: border-box;
    padding-right: 1.25rem;
    padding-bottom: 0.625rem;
}

.schedule__data {
    text-align: right;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffeba5;
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    margin-top: 0.625rem;
}

.schedule__data-day {
    color: #fff;
}

.schedule__item {
    min-height: 4.875rem;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    padding-left: 0.9375rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    color: #fff;
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    grid-gap: 0.5rem;
    gap: 0.5rem;
    line-height: 1.1;
}

.schedule__item:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border: 0.125rem solid #756b4a;
    border-left: 0;
    border-radius: 0.3125rem;
    background-color: rgba(75, 56, 32, 0.3);
    -webkit-mask: linear-gradient(to left, rgba(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    mask: linear-gradient(to left, rgba(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}

.schedule__time {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.125rem;
    color: #dfc064;
}

.schedule__time:before {
    content: "";
    display: block;
    width: 0.375rem;
    height: 0.375rem;
    background-color: #ffeba5;
    transform: rotate(45deg);
    margin-right: 0.75rem;
}

/* tracks */
.tracks {
    overflow-x: auto;
    min-width: 0;
    flex-grow: 1;
    align-self: stretch;
    display: flex;
    -webkit-mask: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgb(0, 0, 0) 0.625rem,
            rgb(0, 0, 0) calc(100% - 0.625rem),
            rgba(0, 0, 0, 0) 100%);
    mask: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgb(0, 0, 0) 0.625rem,
            rgb(0, 0, 0) calc(100% - 0.625rem),
            rgba(0, 0, 0, 0) 100%);
    box-sizing: border-box;
    padding: 0.625rem 0.625rem;
}

@media (min-width: 1200px) {
    .tracks {
        overflow-x: hidden;
        padding: 0 0.625rem
    }
}

.tracks__list {
    display: flex;
}

.tracks__item {
    align-self: stretch;
    font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-width: 23.25rem;
    box-sizing: border-box;
    padding: 0.625rem 1.25rem;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.tracks__title {
    font-size: 1.25rem;
    color: #ffeba5;
    text-transform: uppercase;
    line-height: 1;
}

.tracks__time {
    font-size: 1.25rem;
    color: #fff;
    font-family: "Intro Book", "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-3);
}

.tracks__item-decor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: transparent;
    background-image: url(../images/tracks/item-decor.png);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: center bottom;
    pointer-events: none;
}

.tracks__item-decor:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.25rem;
    background-color: rgb(255, 235, 165);
    box-shadow:
        0 0.25rem 1.5rem rgba(0, 0, 0, 0.8),
        0 0 1.3125rem rgba(255, 213, 44, 0.43);
}

.tracks__item:hover .tracks__item-decor,
.tracks__item_active .tracks__item-decor {
    opacity: 1;
    transform: scaleX(1);
}

.tracks__divider {
    width: 0.1875rem;
    height: 3.5rem;
    background-color: #676158;
    align-self: center;
}

.tracks-mobile {
    display: flex;
    margin-bottom: 1.875rem;
}

@media (min-width: 1200px) {
    .tracks-mobile {
        display: none
    }
}

/* def */
.pr {
    padding-right: var(--margin);
}

.pl {
    padding-left: var(--margin);
}

.pt {
    padding-top: var(--margin);
}

.pb {
    padding-bottom: var(--margin);
}

.mr {
    margin-right: var(--margin);
}

.ml {
    margin-left: var(--margin);
}

.mt {
    margin-top: var(--margin);
}

.mb {
    margin-bottom: var(--margin);
}

.m {
    margin: var(--margin);
}

.mra {
    margin-right: auto;
}

.mla {
    margin-left: auto;
}

.mta {
    margin-top: auto;
}

.ma {
    margin: auto;
}

.mba {
    margin-bottom: auto;
}

.mr0 {
    margin-right: 0;
}

.ml0 {
    margin-left: 0;
}

.mt0 {
    margin-top: 0;
}

.mb0 {
    margin-bottom: 0;
}

.m0 {
    margin: 0;
}

/* colors */
.color-light {
    color: rgba(var(--color-light), 1);
}

.color-dark {
    color: rgba(var(--color-dark), 1);
}

.color-red {
    color: rgba(var(--color-red), 1);
}

.color-yellow {
    color: rgba(var(--color-yellow), 1);
}

.color-orange {
    color: rgba(var(--color-orange), 1);
}

.color-pink {
    color: rgba(var(--color-pink), 1);
}

.color-purple {
    color: rgba(var(--color-purple), 1);
}

.color-blue {
    color: rgba(var(--color-blue), 1);
}

.color-green {
    color: rgba(var(--color-green), 1);
}

.color-grey {
    color: rgba(var(--color-grey), 1);
}

.color-white {
    color: rgba(var(--color-white), 1);
}

.color-black {
    color: rgba(var(--color-black), 1);
}

.color-brown {
    color: rgba(var(--color-brown), 1);
}

.color-aqua {
    color: rgba(var(--color-aqua), 1);
}

/* color palette */
.color-0 {
    color: rgba(var(--color-0), 1);
}

.color-1 {
    color: rgba(var(--color-1), 1);
}

.color-2 {
    color: rgba(var(--color-2), 1);
}

.color-3 {
    color: rgba(var(--color-3), 1);
}

.color-4 {
    color: rgba(var(--color-4), 1);
}

.color-5 {
    color: rgba(var(--color-5), 1);
}

.color-6 {
    color: rgba(var(--color-6), 1);
}

.color-7 {
    color: rgba(var(--color-7), 1);
}

.color-8 {
    color: rgba(var(--color-8), 1);
}

.color-9 {
    color: rgba(var(--color-9), 1);
}

.color-accent {
    color: rgba(var(--color-accent), 1);
}

.color-url {
    color: rgba(var(--color-url), 1);
}

/* other */
.clear {
    clear: both;
}

.hidden {
    display: none;
}

.text-decoration-underline {
    text-decoration: underline;
}

.text-decoration-none {
    text-decoration: none;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* flex */
.flex,
.d-flex {
    display: flex;
}

.justify-content-start {
    justify-content: start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: end;
}

/* fs */
.fs_minus_5 {
    font-size: 0.5em;
}

.fs_minus_4 {
    font-size: 0.6em;
}

.fs_minus_3 {
    font-size: 0.7em;
}

.fs_minus_2 {
    font-size: 0.8em;
}

.fs_minus_1 {
    font-size: 0.9em;
}

.fs_plus_1 {
    font-size: 1.1em;
}

.fs_plus_2 {
    font-size: 1.2em;
}

.fs_plus_3 {
    font-size: 1.3em;
}

.fs_plus_4 {
    font-size: 1.4em;
}

.fs_plus_5 {
    font-size: 1.5em;
}

/* font-family */
.font-family-0 {
    font-family: var(--font-0);
}

.font-family-1 {
    font-family: var(--font-1);
}

.font-family-2 {
    font-family: var(--font-2);
}

.font-family-3 {
    font-family: var(--font-3);
}

.font-family-4 {
    font-family: var(--font-4);
}

/* width */
.w-100 {
    width: 100%;
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%;
}