a,font,p,span {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none
}

.container,.section,.wrapper {
    position: relative;
    z-index: 1
}

.btn,.btn-group,.logo,.section-title {
    display: flex
}

.btn:after,.btn:before,.card:after,.card:before {
    content: "";
    top: 0;
    position: absolute
}

.btn-arrow:hover,.btn:hover,.nav__languages-item:hover .nav__languages-item-icon img {
    filter: brightness(120%)
}

.header__container-text,.header__top-container-text {
    text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 15px #fff
}

.card:after,.gameplay__item,.header__inner,.header__top-container,.nav__links-dropbox,.stages__item,.stages__item-stage {
    pointer-events: none
}

.footer__cpr-links li a:hover,.text-area a:hover {
    color: var(--font-primary-hover-color)
}

.footer__cpr-links,.footer__links,.nav__languages,.nav__languages-stroke ul,.nav__links,.nav__links-dropbox {
    list-style-type: none
}

.footer__links li a:hover,a,font,p,span {
    text-decoration: none
}

.classes__item,.classlist__item,.features__item,.gameplay__nav,.info__item,.socials__item,.stages__item {
    align-self: stretch
}

a,abbr,acronym,address,applet,article,aside,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,img,ins,kbd,label,legend,li,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}

*,:after,:before {
    box-sizing: border-box
}

a,p,span {
    color: inherit
}

.nav__open i.bi-list,body {
    font-size: 20px
}

.text-area,body {
    line-height: 1.5em
}

button,input,select,textarea {
    outline: 0;
    border: none
}

button,select {
    cursor: pointer
}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#detach-button-host {
    display: none
}

:root {
    --font-primary: "Angelus Medieval";
    --font-secondary: "Strong Sword";
    --font-primary-color: #981515;
    --font-primary-hover-color: #c51b1b;
    --font-secondary-color: #42312a;
    --font-secondary-hover-color: #61483e;
    --font-light-color: #4f4e4c;
    --font-light-hover-color: #696865;
    --font-alt-primary-color: #ede7e1;
    --font-alt-primary-hover-color: white;
    --font-alt-secondary-color: #d4c4b3;
    --font-alt-secondary-hover-color: #e6ddd4;
    --font-alt-light-color: #b3aeac;
    --font-alt-light-hover-color: #9b9491;
    --primary-color: #981515;
    --primary-hover-color: #c51b1b;
    --primary-alt-color: #cba66b;
    --primary-alt-hover-color: #d8bd91;
    --page-gap-x: 160px;
    --page-nav-height: 94px
}

@media (max-width: 1920px) {
    :root {
        --page-nav-height:82px
    }

    body {
        font-size: 17px
    }
}

@media (max-width: 1680px) {
    :root {
        --page-gap-x:130px
    }
}

body {
    min-height: 100vh;
    font-family: var(--font-secondary);
    color: var(--font-secondary-color);
    font-weight: 400;
    background-color: #eee7df
}

.text-area,input {
    font-size: 1em;
    font-family: var(--font-secondary);
    color: var(--font-secondary-color)
}

input {
    line-height: 1em
}

input::-webkit-input-placeholder {
    color: var(--font-light-color);
    transition: opacity .2s ease-in-out,transform .2s ease-in-out
}

input::-moz-placeholder {
    color: var(--font-light-color);
    transition: opacity .2s ease-in-out,transform .2s ease-in-out
}

input:-moz-placeholder {
    color: var(--font-light-color);
    transition: opacity .2s ease-in-out,transform .2s ease-in-out
}

input:-ms-input-placeholder {
    color: var(--font-light-color);
    transition: opacity .2s ease-in-out,transform .2s ease-in-out
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
    transform: translateX(20px)
}

input:focus::-moz-placeholder {
    opacity: 0;
    transform: translateX(20px)
}

input:focus:-moz-placeholder {
    opacity: 0;
    transform: translateX(20px)
}

input:focus:-ms-input-placeholder {
    opacity: 0;
    transform: translateX(20px)
}

.wrapper {
    width: 100%
}

.container {
    width: calc(100% - var(--page-gap-x) * 2);
    max-width: 1600px;
    margin: 0 auto
}

.header__container-form-icon,.unsimple img {
    margin-right: 10px;
    width: 43px;
}

.section {
    width: 100%;
    padding: 140px 0
}

@media (max-width: 1920px) {
    .section {
        padding:120px 0
    }

    .nav__button {
        height: 50px;
        padding: 0 30px;
        gap: 8px;
        min-width: 180px
    }

    .nav__button:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .nav__button:before {
        width: calc(100% - 56px)
    }

    .nav__button i,.nav__button span {
        font-size: .8em;
        transform: translateY(-1px)
    }
}

.section--backgrounded {
    background: url("../images/bg/bg_section_top.png") top -1px center/100% auto no-repeat,url("../images/bg/bg_section_bottom.png") bottom -1px center/100% auto no-repeat,url("../images/bg/bg_section_middle.jpg") center center/cover no-repeat
}

.section__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px
}

@media (max-width: 1680px) {
    .section {
        padding:100px 0
    }

    .section__container {
        gap: 32px
    }
}

.section__delimiter {
    width: 100%;
    max-width: 1000px
}

.section__description {
    width: 100%;
    max-width: 1160px
}

.section__content,.subscribe {
    width: 100%
}

.logo {
    height: 40px;
    gap: 10px
}

.logo__emblem {
    height: 100%;
    transform: translateY(4%);
    transition: transform .3s ease-in-out
}

.btn,.btn-arrow {
    transition: filter .3s ease-in-out;
    cursor: pointer
}

.logo:hover .logo__emblem {
    height: 100%;
    transform: translateY(4%) scale(1.1)
}

.logo__text {
    height: 100%
}

.text-area {
    text-align: center
}

.text-area>:not(:first-child) {
    margin-top: 16px
}

@media (max-width: 1460px) {
    body {
        font-size:16px
    }

    .section {
        padding: 80px 0
    }

    .section__container {
        gap: 28px
    }

    .text-area>:not(:first-child) {
        margin-top: 14px
    }
}

.text-area a {
    color: var(--font-primary-color);
    text-decoration: underline;
    transition: color .3s ease-in-out
}

.footer--alt .footer__cpr li a:hover,.footer--alt .footer__links li a:hover,.text-area--alt a:hover {
    color: var(--font-alt-primary-hover-color)
}

.text-area h1,.text-area h2,.text-area h3,.text-area h4,.text-area h5,.text-area h6 {
    font-family: var(--font-primary);
    color: var(--font-primary-color);
    line-height: 1.2em;
    text-transform: uppercase
}

.text-area h1 {
    font-size: 2em
}

.text-area h2 {
    font-size: 1.75em
}

.text-area h3 {
    font-size: 1.5em
}

.text-area h4,.text-area h5,.text-area h6 {
    font-size: 1.25em
}

.text-area--alt {
    color: var(--font-alt-secondary-color)
}

.text-area--alt a,.text-area--alt h1,.text-area--alt h2,.text-area--alt h3,.text-area--alt h4,.text-area--alt h5,.text-area--alt h6 {
    color: var(--font-alt-primary-color)
}

.section-title--start,.text-area--start {
    text-align: left
}

.text-area--end {
    text-align: right
}

.text-primary {
    color: var(--font-primary-color)!important
}

.text-secondary {
    color: var(--font-secondary-color)!important
}

.nav__links-dropbox-game.active .nav__links-dropbox-game-name span,.nav__links-dropbox-game:hover .nav__links-dropbox-game-name span,.nav__links-item.active,.nav__links-item:hover,.section-title {
    color: var(--font-primary-color)
}

.delimiter {
    width: 100%;
    height: 22px;
    background: url("../images/ui/bg_delimiter_middle.png") center center no-repeat,url("../images/ui/bg_delimiter_left.png") center left no-repeat,url("../images/ui/bg_delimiter_right.png") center right no-repeat;
    background-size: auto 100%,calc((100% - 45px)/ 2) 22px,calc((100% - 45px)/ 2) 22px
}

.delimiter-start {
    width: 100%;
    height: 22px;
    background: url("../images/ui/bg_delimiter_start.png") left center no-repeat,url("../images/ui/bg_delimiter_right.png") right center no-repeat;
    background-size: auto 100%,calc(100% - 35px) 22px
}

.delimiter-end {
    width: 100%;
    height: 22px;
    background: url("../images/ui/bg_delimiter_end.png") right center no-repeat,url("../images/ui/bg_delimiter_left.png") left center no-repeat;
    background-size: auto 100%,calc(100% - 36px) 22px
}

.section-title {
    width: 100%;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 2.4em;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center
}

@media (max-width: 1680px) {
    .section-title {
        font-size:2.2em
    }
}

@media (max-width: 1460px) {
    .section-title {
        font-size:2em
    }

    .nav .container {
        width: calc(100% - 40px)
    }
}

.section-title--end {
    text-align: right
}

.section-title h2 {
    font-size: 1em;
    line-height: 1em
}

.section-title small {
    font-size: .7em;
    line-height: 1em;
    color: var(--font-secondary-color)
}

.section-title--alt {
    color: var(--font-alt-primary-color)
}

.section-title--alt small {
    color: var(--font-alt-secondary-color)
}

.btn i,.btn span {
    z-index: 3;
    font-size: 1.2em;
    color: #eee8e1;
    position: relative;
    line-height: 1em
}

.btn {
    height: 90px;
    padding: 0 60px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    background: 0 0
}

.btn:after {
    width: calc(100% + 6px);
    height: 100%;
    z-index: 2;
    left: -3px;
    background: url("../images/ui/button/bg_btn_red_left.png") left center/auto 100% no-repeat,url("../images/ui/button/bg_btn_red_right.png") right center/auto 100% no-repeat
}

.btn:before {
    width: calc(100% - 106px);
    height: 100%;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    background: url("../images/ui/button/bg_btn_red_middle.png") center center/auto 100% repeat-x
}

.btn--grey:after {
    background: url("../images/ui/button/bg_btn_yellow_left.png") left center/auto 100% no-repeat,url("../images/ui/button/bg_btn_yellow_right.png") right center/auto 100% no-repeat
}

.btn--grey:before {
    background: url("../images/ui/button/bg_btn_yellow_middle.png") center center/auto 100% repeat-x
}

.btn--yellow:after {
    background: url("../images/ui/button/bg_btn_yellow_left.png") left center/auto 100% no-repeat,url("../images/ui/button/bg_btn_yellow_right.png") right center/auto 100% no-repeat
}

.btn--yellow:before {
    background: url("../images/ui/button/bg_btn_yellow_middle.png") center center/auto 100% repeat-x
}

.btn span {
    font-family: var(--font-secondary);
    text-align: center;
    transform: translateY(-1px)
}

.btn i {
    transform: translateY(0)
}

.btn--icon {
    padding: 0!important;
    aspect-ratio: 1.25/1
}

.btn--icon i {
    color: #ffe9cd
}

.btn--middle {
    height: 68px;
    padding: 0 46px;
    gap: 8px
}

.btn--middle:after {
    width: calc(100% + 4px);
    left: -2px
}

.btn--middle:before {
    width: calc(100% - 76px)
}

.btn--middle span {
    font-size: 1em;
    transform: translateY(-1px)
}

.btn--middle i {
    font-size: 1em;
    transform: translateY(0)
}

.btn--small {
    height: 60px;
    padding: 0 66px;
    gap: 8px
}

.btn--small:after {
    width: calc(100% + 4px);
    left: -2px
}

.btn--small:before {
    width: calc(100% - 56px)
}

.btn--small i,.btn--small span {
    font-size: .8em;
    transform: translateY(-1px)
}

.nav__links-dropbox-game-name span,.nav__links-dropbox-link {
    font-size: .85em;
    white-space: nowrap
}

.btn-group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px
}

.btn-arrow,.card,.card:after,.card:before {
    display: block
}

.btn-group--start,.nav .container {
    justify-content: flex-start
}

.btn-group--end {
    justify-content: flex-end
}

.btn-arrow {
    width: 109px;
    aspect-ratio: 1/1
}

.rotation-card__back,.rotation-card__face {
    backface-visibility: hidden;
    transition: transform .8s
}

.btn-arrow--prev {
    background: url("../images/ui/bg_arrow_prev.png") center center/100% 100% no-repeat
}

.btn-arrow--next {
    background: url("../images/ui/bg_arrow_next.png") center center/100% 100% no-repeat
}

.btn-arrow--middle {
    width: 70px
}

.btn-arrow--small {
    width: 40px
}

.card {
    position: relative;
    z-index: 1
}

.card__container {
    width: 100%;
    position: relative;
    z-index: 3
}

.card:after {
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    border-image-source: url("../images/ui/border/border_card.png");
    border-image-slice: 116;
    border-image-repeat: stretch;
    border-style: solid;
    border-width: 116px
}

.card--middle:after,.rotation-card--middle .card:after {
    border-image-source: url("../images/ui/border/border_card_middle.png");
    border-image-slice: 69;
    border-width: 69px
}

.card:before {
    width: 100%;
    height: 60px;
    z-index: 2;
    left: 0;
    transform: translateY(-50%);
    background: url("../images/ui/border/border_decor_card.png") center center/auto 100% no-repeat
}

.card--middle:before,.rotation-card--middle .card:before {
    background: url("../images/ui/border/border_decor_card_middle.png") center center/auto 100% no-repeat
}

.card--middle:before {
    height: 38px;
    transform: translateY(calc(-50% - 1px))
}

.card--small:after {
    border-image-source: url("../images/ui/border/border_card_small.png");
    border-image-slice: 40;
    border-width: 40px
}

.card--small:before {
    height: 20px;
    transform: translateY(calc(-50% - 1px));
    background: url("../images/ui/border/border_decor_card_small.png") center center/auto 100% no-repeat
}

.nav__links.active,[data-fade-effect].visible {
    transform: translateY(0);
    opacity: 1
}

.rotation-card {
    position: relative;
    z-index: 1;
    perspective: 1400px
}

.rotation-card__container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d
}

.rotation-card .card:not(.rotation-card__content) {
    width: 100%;
    height: 100%;
    position: absolute
}

.rotation-card__content {
    position: relative;
    flex-grow: 1
}

.rotation-card:hover .rotation-card__face {
    transform: rotateY(-180deg)
}

.rotation-card__back {
    transform: rotateY(180deg)
}

.rotation-card:hover .rotation-card__back {
    transform: rotateY(0)
}

.rotation-card--middle .card:before {
    height: 38px;
    transform: translateY(calc(-50% - 1px))
}

.rotation-card--small .card:after {
    border-image-source: url("../images/ui/border/border_card_small.png");
    border-image-slice: 40;
    border-width: 40px
}

.rotation-card--small .card:before {
    height: 20px;
    transform: translateY(calc(-50% - 1px));
    background: url("../images/ui/border/border_decor_card_small.png") center center/auto 100% no-repeat
}

.nav__languages.active .nav__languages-current .nav__languages-item:after,.nav__links-droplink.active:after {
    transform: scale(1,-1)
}

[data-fade-effect] {
    opacity: 0;
    transform: translateY(-100px);
    transition: transform 1.5s,opacity 1.5s
}

.nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    transition: background-color .3s ease-in-out;
    background-color: rgb(240 234 226);
}

.nav--fixed {
    background-color: rgba(238,231,223,.8);
    backdrop-filter: blur(5px)
}

.nav .container {
    height: var(--page-nav-height);
    display: flex;
    align-items: center;
    column-gap: 40px
}

.nav__languages-current .nav__languages-item:after,.nav__links-droplink:after {
    width: 13px;
    height: 7px;
    background: url("../images/langs/arrow.png") center center/100% 100% no-repeat;
    margin-top: 2px;
    transition: transform .3s ease-in-out;
    content: ""
}

.nav__links {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 40px
}

.features,.header,.stages {
    overflow: hidden
}

.nav__links.active {
    pointer-events: all
}

.nav__links>li {
    position: relative
}

.nav__links-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: color .3s ease-in-out;
    white-space: nowrap
}

.nav__languages.active .nav__languages-stroke,.nav__links-dropbox.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all
}

.nav__links-dropbox {
    position: absolute;
    min-width: calc(100% + 32px);
    top: calc(100% + 20px);
    left: -16px;
    opacity: 0;
    transform: translateY(-43px);
    transition: opacity .3s ease-in-out,transform .3s ease-in-out;
    background: #f3f1ef;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,.07)
}

.features__content,.nav__links-dropbox>li,.stages__content {
    position: relative
}

.nav__links-dropbox.active {
    display: block
}

.nav__links-dropbox>li:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,.1)
}

.nav__links-dropbox-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    line-height: 1em;
    padding: 12px 16px 16px;
    transition: color .3s ease-in-out,background-color .3s ease-in-out
}

.nav__links-dropbox-link.active,.nav__links-dropbox-link:hover {
    color: var(--font-primary-color);
    background-color: #fff
}

.nav__links-dropbox-link--middle {
    width: 100%;
    justify-content: center;
    text-align: center
}

.nav__links-dropbox-game {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 16px;
    transition: background-color .3s ease-in-out
}

.nav__languages-item-name,.nav__links-dropbox-game-name small,.nav__links-dropbox-game-name span {
    transition: color .3s ease-in-out;
    line-height: 1em
}

.nav__links-dropbox-game.active,.nav__links-dropbox-game:hover {
    background-color: #fff
}

.nav__links-dropbox-game-icon {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,.1);
    padding: 5px;
    flex-shrink: 0
}

.nav__links-dropbox-game-icon img {
    width: 100%;
    height: 100%;
    border-radius: 3px
}

.nav__links-dropbox-game-name {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.nav__open,.nav__open .bi-x-lg,.nav__open.active .bi-list {
    display: none
}

.nav__links-dropbox-game-name small {
    white-space: nowrap;
    font-size: .75em;
    color: #878484
}

.nav__links-dropbox-game.active .nav__links-dropbox-game-name small,.nav__links-dropbox-game:hover .nav__links-dropbox-game-name small {
    color: #555252
}

.nav__open i.bi-x-lg {
    font-size: 16px
}

.nav__open.active .bi-x-lg {
    display: block
}

.nav__languages {
    position: relative;
    margin-left: auto
}

.nav__languages-item {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.nav__languages-item-icon {
    width: 36px;
    height: 36px;
    position: relative;
    border: 2px solid var(--primary-alt-color);
    border-radius: 50%;
    padding: 2px
}

.points__icon,.soc__icon {
    width: 30px;
    aspect-ratio: 1/1;
    filter: brightness(0%)
}

.nav__languages-item-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: filter .3s ease-in-out
}

.nav__languages-item-name {
    padding-left: 8px;
    font-size: 1em;
    color: var(--font-secondary-color)
}

.nav__languages-item:hover .nav__languages-item-name {
    color: var(--font-secondary-hover-color)
}

.header__container-form-icon,.header__container-text h2,.header__container-text h3,.header__top-container-text h1,.points__item.active .points__content,.points__item:hover .points__content {
    color: var(--font-primary-color)
}

.nav__languages-current .nav__languages-item:after {
    margin-left: 8px
}

.nav__languages-current {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.nav__languages-stroke {
    position: absolute;
    min-width: calc(100% + 24px);
    top: calc(100% + 20px);
    left: -12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-43px);
    transition: opacity .3s ease-in-out,transform .3s ease-in-out;
    background: #fff;
    padding: 12px;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,.07)
}

.features__item-back,.info__item-back,.subscribe__list-item {
    box-shadow: inset 0 0 40px #b09370,inset 0 0 40px #b09370
}

.nav__languages-stroke ul li:not(:first-child) {
    margin-top: 10px
}

.points__item,.soc {
    gap: 10px;
    display: flex
}

.points {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    position: fixed;
    z-index: 10;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.points__item {
    padding: 5px 10px;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    background: linear-gradient(to right,#e3dbcd,rgba(227,219,205,0))
}

.points__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .2;
    transform: scale(.9);
    transition: filter .3s ease-in-out,opacity .3s ease-in-out,transform .3s ease-in-out
}

.points__icon img {
    width: 100%;
    height: 100%
}

.points__item.active .points__icon,.points__item:hover .points__icon {
    filter: brightness(100%);
    opacity: 1;
    transform: scale(1.1)
}

.points__content {
    font-size: 1em;
    line-height: 1em;
    white-space: nowrap;
    transition: color .3s ease-in-out,transform .3s ease-in-out,opacity .3s ease-in-out
}

.soc {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.soc__item {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    background: linear-gradient(to left,#e3dbcd,rgba(227,219,205,0))
}

.soc__icon {
    justify-content: center;
    align-items: center;
    opacity: .2;
    transform: scale(.9);
    transition: filter .3s ease-in-out,opacity .3s ease-in-out,transform .3s ease-in-out;
    display: none
}

.header,.header__container {
    flex-direction: column;
    width: 100%
}

.soc__icon img {
    width: 100%;
    height: 100%
}

.soc__item.active .soc__icon,.soc__item:hover .soc__icon {
    filter: brightness(100%);
    opacity: 1;
    transform: scale(1.1)
}

.soc__content {
    transition: transform .3s ease-in-out;
    padding-left: 8px
}

.soc__content img {
    height: 1.5em;
    display: block;
    filter: drop-shadow(0px 0px 5px #e3dbcd) drop-shadow(0px 0px 10px #e3dbcd) drop-shadow(0px 0px 15px #e3dbcd)
}

.soc__item.active .soc__content,.soc__item:hover .soc__content {
    transform: scale(1.1)
}

.header {
    height: auto;
    min-height: min(53.8461538462vw,100vh);
    display: flex;
    position: relative;
    z-index: 2;
    padding-top: var(--page-nav-height)
}

@media (max-width: 2560px) {
    .points__item {
        background:0 0
    }

    .points__content {
        background: #e3dbcd;
        position: absolute;
        top: 50%;
        left: 50px;
        transform: translate(-50px,-50%);
        pointer-events: none;
        opacity: 0;
        padding: 10px;
        border-radius: 10px
    }

    .points__item.active .points__content,.points__item:hover .points__content {
        transform: translate(0,-50%);
        pointer-events: all;
        opacity: 1
    }

    .header {
        min-height: min(56.25vw,100vh)
    }

    .header__top-container img {
        max-height: 160px
    }
}

.header__container {
    max-width: 600px;
    /*max-width:590px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding-bottom: 80px
}

@media (max-width: 1680px) {
    .points__item.active .points__content {
        transform:translate(-50px,-50%);
        pointer-events: none;
        opacity: 0
    }

    .header__container {
        padding-bottom: 60px
    }
}

@media (max-width: 1460px) {
    .nav__languages-item-name {
        display:none
    }

    .header__container {
        padding-bottom: 40px
    }
}

.header__container-text {
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0
}

@media (max-width: 1920px) {
    .points__content {
        font-size:.8em;
        line-height: .8em
    }

    .header {
        min-height: min(56.25vw,100vh)
    }

    .header__container-text {
        font-size: 18px
    }
}

@media (max-width: 1680px) {
    .header__container-text {
        font-size:16px
    }
}

@media (max-width: 1460px) {
    .header__container-text {
        font-size:14px
    }
}

.header__container-text h2 {
    font-family: var(--font-primary);
    font-size: 2.3em;
    text-transform: uppercase;
    line-height: 1em;
    margin-top: 3px
}

.header__container-text h3,.header__top-container-text {
    font-size: 1em;
    line-height: 1em;
    font-family: var(--font-primary);
    text-transform: uppercase
}

.header__container-text h3 {
    margin-top: 3px
}

.header__container-text small {
    font-family: var(--font-primary);
    font-size: 1.4em;
    text-transform: uppercase;
    margin-bottom: 1px
}

.header__container-form {
    height: 74px;
    aspect-ratio: 450/74;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    padding: 0 40px
}

@media (max-width: 1680px) {
    .header__container-form {
        height:60px;
        padding: 0 3px 0 34px
    }
}

.classes__item-name,.footer,.tippy-popper .tippy-tooltip {
    color: var(--font-secondary-color)
}

.header__container-form-input {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1
}

.header__container-form-input input {
    width: 100%;
    height: 100%;
    background: 0 0;
    padding: 0 14px
}

.header__container-form button span {
    font-size: 22px;
}

.header__top-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 3;
    margin-top: 10vh
}

.header__top-container img {
    max-height: 160px
}

@media (max-width: 1920px) {
    .header__top-container img {
        max-height: 189px;
    }
}

@media (max-width: 1680px) {
    .header__top-container img {
        max-height:120px
    }
}

@media (max-width: 1460px) {
    .header__top-container img {
        max-height:80px
    }

    .header__top-container-text {
        font-size: 14px
    }
}

.header__top-container-text {
    text-align: center
}

.header__top-container-text h1 {
    font-size: 2em;
    line-height: 1em
}

.header__top-container-text small {
    font-size: 1.2em;
    line-height: 1.5em
}

.header__inner {
    width: 100%;
    height: 110%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: .8
}

.header__inner img {
    display: block;
    width: 100%;
    height: 100%
}

.header__background {
    height: max(53.8461538462vw,120%);
    aspect-ratio: 2600/1400;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%)
}

.header__background-castle,.header__background-characters,.header__background-locations,.header__background-sky {
    height: 100%;
    aspect-ratio: 2600/1400;
    position: absolute;
    bottom: 0;
    left: 0
}

.header__background-castle img,.header__background-characters img,.header__background-locations img,.header__background-sky img {
    height: 100%;
    aspect-ratio: 2600/1400;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0
}

.header__background-characters {
    z-index: 5;
    bottom: 8%
}

.header__background-characters-collision {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    border-radius: 200px
}

.header__background-characters-collision:after {
    content: "";
    width: 39px;
    height: 42px;
    position: absolute;
    left: 50%;
    transform: translateX(-40%) translateY(20%);
    bottom: 100%;
    background: url("../images/bg/header/tooltip_empty.png") 0 0/100% 100%;
    transition: opacity .5s ease-in-out,transform .5s ease-in-out;
    opacity: 1
}

.header__background-characters-collision.hover:after,.header__background-characters-collision:hover:after {
    opacity: 0;
    transform: translateX(-40%) translateY(-10%) scale(2)
}

.header__background-characters-collision.header-collision-1 {
    width: 6%;
    height: 30%;
    top: 32%;
    left: 15%
}

.header__background-characters-collision.header-collision-2 {
    width: 8%;
    height: 39%;
    top: 31%;
    left: 22%
}

.header__background-characters-collision.header-collision-3 {
    width: 5%;
    height: 36%;
    top: 36%;
    left: 35%
}

.header__background-characters-collision.header-collision-4 {
    width: 5%;
    height: 23%;
    top: 44%;
    left: 41%
}

.header__background-characters-collision.header-collision-5 {
    width: 7%;
    height: 22%;
    top: 45%;
    left: 52%
}

.header__background-characters-collision.header-collision-6 {
    width: 4.5%;
    height: 25%;
    top: 41%;
    left: 63%
}

.header__background-characters-collision.header-collision-7 {
    width: 9%;
    height: 42%;
    top: 39%;
    left: 73%
}

.header__background-castle {
    z-index: 3;
    bottom: -3%
}

.header__background-locations {
    z-index: 2;
    bottom: -3%;
    perspective: 1400px
}

@media (max-width: 2560px) {
    .header__background {
        height:max(56.25vw,110%)
    }

    .header__background-castle,.header__background-characters,.header__background-locations {
        bottom: -10%
    }
}

@media (max-width: 1920px) {
    .header__background {
        height:max(56.25vw,120%)
    }

    .header__background-castle,.header__background-characters,.header__background-locations {
        bottom: -5%
    }

    .stages__arrow {
        width: 70px
    }
}

.header__background-locations>img {
    z-index: 2
}

.header__background-locations-eff1 {
    width: 9%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 13.5%;
    left: 27.8%;
    transform-style: preserve-3d;
    transform: rotateX(40deg) rotateY(10deg);
    opacity: .6
}

.header__background-locations-eff1 img {
    width: 100%;
    height: 100%;
    animation: 25s linear infinite rotate
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.header__background-locations-eff2 {
    width: 16%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 35%;
    right: 24.8%;
    opacity: .6
}

.header__background-locations-eff2 img,.tippy-tooltip[data-animation=tooltip-animation][data-state=hidden] .tippy-content {
    opacity: 0
}

.header__background-locations-eff2 img:first-child {
    width: 100%;
    height: 100%;
    animation: 8s linear infinite smoke1
}

.header__background-locations-eff2 img:nth-child(2) {
    width: 100%;
    height: 100%;
    animation: 8s linear 1s infinite smoke1
}

.header__background-locations-eff2 img:nth-child(3) {
    width: 100%;
    height: 100%;
    animation: 8s linear 2s infinite smoke1
}

.header__background-locations-eff2 img:nth-child(4) {
    width: 100%;
    height: 100%;
    animation: 8s linear 3s infinite smoke1
}

.header__background-locations-eff2 img:nth-child(6) {
    width: 100%;
    height: 100%;
    animation: 8s linear 4s infinite smoke1
}

.header__background-locations-eff2 img:nth-child(7) {
    width: 100%;
    height: 100%;
    animation: 8s linear 5s infinite smoke1
}

@keyframes smoke1 {
    0% {
        transform: translateY(0) rotate(0) scale(.3);
        opacity: 0
    }

    75% {
        transform: translateY(-70%) rotate(90deg) scale(1);
        opacity: 1
    }

    100% {
        transform: translateY(-100%) rotate(120deg) scale(1);
        opacity: 0
    }
}

.header__background-sky {
    z-index: 1
}

.tippy-popper .tippy-tooltip {
    padding: 9% 20px;
    background: url("../images/bg/header/tooltip_bg.png") 0 0/100% 100%;
    font-size: 14px;
    text-align: center
}

.tippy-popper .tippy-arrow {
    width: 37px;
    height: 27px;
    border: none;
    background: url("../images/bg/header/tooltip_arrow.png");
    top: calc(100% - 1px);
    display: none
}

.tippy-popper[x-placement=bottom] .tippy-arrow {
    transform: scaleY(-1) scaleX(-1) translateY(7px)
}

.tippy-tooltip {
    transition: .5s ease-in-out;
    transform: translateY(0)
}

.tippy-tooltip .tippy-content {
    transition: opacity .5s ease-in-out
}

.tippy-tooltip[data-animation=tooltip-animation][data-state=hidden] {
    opacity: 0;
    transform: translateY(-20%)
}

.stages__slider {
    position: relative;
    z-index: 1;
    overflow: visible;
    margin: 80px auto 0
}

@media (max-width: 1680px) {
    .header__background-characters {
        bottom:0
    }

    .stages__slider {
        margin: 60px auto 0
    }
}

@media (max-width: 1460px) {
    .stages__slider {
        margin:40px auto 0
    }

    .info__item-icon {
        height: 68px;
        padding: 0 46px;
        gap: 8px
    }

    .info__item-icon:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .info__item-icon:before {
        width: calc(100% - 76px)
    }

    .info__item-icon span {
        font-size: 1em;
        transform: translateY(-1px)
    }

    .info__item-icon i {
        font-size: 1em;
        transform: translateY(0)
    }
}

.stages__slider:after {
    content: "";
    width: 100vw;
    height: 240%;
    background: url("../images/stages/bg_path.png") center center/auto 100% no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.classes__arrow,.features__arrow,.stages__arrow {
    position: absolute;
    z-index: 2;
    top: 50%
}

.stages__arrow--prev {
    left: 0;
    transform: translateX(calc(-100% - 24px)) translateY(-50%)
}

@media (max-width: 1920px) {
    .stages__arrow--prev {
        transform:translateX(calc(-100% - 10px)) translateY(-50%)
    }
}

.stages__arrow--next {
    right: 0;
    transform: translateX(calc(100% + 24px)) translateY(-50%)
}

.stages__item {
    height: auto;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.stages__item.swiper-slide-visible {
    opacity: 1;
    pointer-events: all
}

.stages__item-location {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: transform .5s ease-in-out
}

.stages__item-location img {
    width: 100%;
    position: relative;
    z-index: 1;
    scale: 1.5;
    filter: brightness(100%) drop-shadow(0px 2px 0px rgba(61, 36, 22, 0));
    transition: transform .3s ease-in-out,filter .3s ease-in-out
}

.stages__item-location:hover img {
    transform: translateY(-2%);
    filter: brightness(140%) drop-shadow(0px 5px 5px rgba(61, 36, 22, .5))
}

.stages__item-location-icon {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10%)
}

@media (max-width: 1240px) {
    .section-title {
        font-size:1.8em
    }

    .nav .container,.nav__links {
        column-gap: 30px
    }

    .nav .logo__text {
        display: none
    }

    .stages__item-location-icon {
        height: 50px;
        padding: 0 30px;
        gap: 8px
    }

    .stages__item-location-icon:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .stages__item-location-icon:before {
        width: calc(100% - 56px)
    }

    .stages__item-location-icon i,.stages__item-location-icon span {
        font-size: .8em;
        transform: translateY(-1px)
    }
}

.stages__item:nth-child(4n+2) .stages__item-location,.stages__slider.stages__slider--alt .stages__item:nth-child(4n) .stages__item-location {
    transform: translateY(-20%)
}

.stages__item-stage {
    width: 80%;
    aspect-ratio: 142/158;
    background: url("../images/stages/bg_point.png") 0 0/100% 100%;
    transform: translateY(-15%);
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.stages__item-stage span {
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    line-height: 1em;
    color: #fff;
    text-align: center;
    padding-left: 2px
}

.stages__slider.stages__slider--alt .stages__item:nth-child(4n+2) .stages__item-location {
    transform: translateY(0)
}

.info {
    background: url("../images/bg/bg_section_info.jpg") center center/cover no-repeat fixed
}

.info__list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 36px;
    row-gap: 36px;
    margin: 20px auto 30px
}

@media (max-width: 1024px) {
    :root {
        --page-gap-x:60px;
        --page-nav-height: 72px
    }

    .text-area {
        font-size: .9em
    }

    .text-area>:not(:first-child) {
        margin-top: 12px
    }

    .delimiter {
        height: 18px;
        background-size: auto 100%,calc((100% - 36px)/ 2) 20px,calc((100% - 36px)/ 2) 20px
    }

    .delimiter-end,.delimiter-start {
        height: 18px;
        background-size: auto 100%,calc(100% - 28px) 20px
    }

    .section-title {
        font-size: 1.6em
    }

    .nav .container {
        column-gap: 16px
    }

    .nav__links {
        position: fixed;
        top: calc(var(--page-nav-height) + 2px);
        right: 20px;
        z-index: 10;
        height: auto;
        max-height: calc(100vh - (var(--page-nav-height) + 2px) - 20px);
        width: 320px;
        flex-direction: column;
        flex-wrap: nowrap;
        background: #f3f1ef;
        overflow-y: auto;
        transform: translateY(-43px);
        opacity: 0;
        pointer-events: none;
        transition: transform .3s ease-in-out,opacity .3s ease-in-out;
        border-radius: 5px;
        box-shadow: 0 10px 20px rgba(0,0,0,.07)
    }

    .nav__links>li {
        width: 100%
    }

    .nav__links>li:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,.1)
    }

    .nav__links-item {
        padding: 12px 16px 16px
    }

    .nav__links-dropbox {
        min-width: 100%;
        top: 0;
        left: 0;
        box-shadow: none;
        background: #e4e2e0;
        border-radius: 0;
        border-top: 1px solid rgba(0,0,0,.1);
        transform: translateY(0);
        transition: opacity ease-in-out,transform ease-in-out;
        display: none
    }

    .nav__links-dropbox.active {
        position: relative
    }

    .nav__open {
        display: flex
    }

    .nav__button,.nav__languages-stroke {
        min-width: auto
    }

    .points,.soc {
        display: none
    }

    .header {
        padding: calc(var(--page-nav-height) + 20px) 60px 60px
    }

    .header__container {
        position: relative;
        width: 100%;
        margin-top: 100px;
        padding-bottom: 0
    }

    .header__top-container {
        margin-top: 0
    }

    .header__background-characters {
        background-color: rgba(255,255,255,.4)
    }

    .header__background-characters img,.header__background-characters-collision {
        display: none
    }

    .stages__slider {
        margin: 30px auto 0
    }

    .stages__arrow {
        width: 40px
    }

    .info__list {
        column-gap: 16px;
        row-gap: 36px;
        margin: 10px auto 30px
    }
}

.info__item {
    width: calc((100% - 72px)/ 3)
}

@media (max-width: 1240px) {
    .info__item {
        width:calc((100% - 36px)/ 2)
    }
}

@media (max-width: 1024px) {
    .info__item {
        width:calc((100% - 16px)/ 2)
    }

    .info__item .card:after {
        border-image-source: url("../images/ui/border/border_card_middle.png");
        border-image-slice: 69;
        border-width: 69px
    }

    .info__item .card:before {
        height: 38px;
        transform: translateY(calc(-50% - 1px));
        background: url("../images/ui/border/border_decor_card_middle.png") center center/auto 100% no-repeat
    }
}

.info__item-icon {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,calc(50% - 5px))
}

.info__item .card {
    padding: 70px 50px
}

@media (max-width: 1680px) {
    .info__item .card {
        padding:50px 36px 70px
    }
}

.info__item-face {
    background: #3b2f29
}

.info__item-face-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 12px
}

.info__item-face-content img {
    width: 100%;
    max-width: 330px
}

.info__item-face-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0
}

.info__item-face-preview img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: top center
}

.info__item-face-preview:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0
}

.info__item-back {
    background-color: #ead2bd
}

.info__item-back-content {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.info__item--interlude .info__item-face-content .text-area {
    color: #d9e6dc
}

.info__item--interlude .info__item-face-preview:after {
    background: linear-gradient(to top,#305437 0,rgba(48,84,55,.8) 30%,rgba(48,84,55,0) 100%)
}

.info__item--highfive .info__item-face-content .text-area {
    color: #ffdcd7
}

.info__item--highfive .info__item-face-preview:after {
    background: linear-gradient(to top,#71291f 0,rgba(113,41,31,.8) 30%,rgba(113,41,31,0) 100%)
}

.info__item--classic .info__item-face-content .text-area {
    color: #f0dfdb
}

.footer__cpr-links li,.gameplay__nav-item.active .gameplay__nav-item-text,.gameplay__nav-item:hover .gameplay__nav-item-text {
    color: var(--font-primary-color)
}

.info__item--classic .info__item-face-preview:after {
    background: linear-gradient(to top,#6b644f 0,rgba(107,100,79,.8) 30%,rgba(107,100,79,0) 100%)
}

.gameplay__content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px
}

.gameplay__nav {
    width: 30%;
    flex-shrink: 0;
    border-right: 2px solid rgba(179,151,95,.3)
}

@media (max-width: 1240px) {
    .gameplay__nav {
        width:36%
    }

    .features__more-btn {
        height: 68px;
        padding: 0 46px;
        gap: 8px
    }

    .features__more-btn:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .features__more-btn:before {
        width: calc(100% - 76px)
    }

    .features__more-btn span {
        font-size: 1em;
        transform: translateY(-1px)
    }

    .features__more-btn i {
        font-size: 1em;
        transform: translateY(0)
    }
}

.gameplay__nav-item {
    width: calc(100% + 2px);
    margin-right: -2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    position: relative;
    padding: 12px 40px 12px 0;
    border-right: 2px solid rgba(179,151,95,0);
    transition: border-right .3s ease-in-out,border-bottom .3s ease-in-out
}

@media (max-width: 1460px) {
    .info__item .card {
        padding:40px 36px 60px
    }

    .info__item-back-content {
        gap: 20px
    }

    .info__item-back-content .btn {
        height: 50px;
        padding: 0 30px;
        gap: 8px
    }

    .info__item-back-content .btn:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .info__item-back-content .btn:before {
        width: calc(100% - 56px)
    }

    .info__item-back-content .btn i,.info__item-back-content .btn span {
        font-size: .8em;
        transform: translateY(-1px)
    }

    .gameplay__content {
        gap: 40px
    }

    .gameplay__nav-item {
        padding: 12px 32px 12px 0
    }
}

@media (max-width: 1024px) {
    .gameplay__content {
        flex-wrap:wrap
    }

    .gameplay__nav {
        width: 100%;
        border-right: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow-x: scroll;
        padding-bottom: 40px
    }

    .gameplay__nav::-webkit-scrollbar {
        width: 2px;
        height: 2px;
        background-color: rgba(179,151,95,.3)
    }

    .gameplay__nav::-webkit-scrollbar-thumb {
        background-color: #b3975f
    }

    .gameplay__nav::-webkit-scrollbar-thumb:hover {
        background-color: #b3975f
    }

    .gameplay__nav-item {
        width: calc((100vw - var(--page-gap-x) * 2)/ 5);
        border-right: none;
        border-bottom: 2px solid rgba(179,151,95,.3);
        margin: 0 0 -2px;
        padding: 16px 12px;
        align-self: stretch;
        flex-direction: column;
        gap: 10px;
        flex-wrap: wrap;
        flex-shrink: 0
    }
}

@media (max-width: 760px) {
    .info__list {
        row-gap:52px
    }

    .info__item {
        width: 100%
    }

    .gameplay__nav-item {
        width: calc((100vw - var(--page-gap-x) * 2)/ 3)
    }
}

.gameplay__nav-item.active,.gameplay__nav-item:hover {
    border-right: 2px solid #b3975f
}

.gameplay__nav-item-icon {
    width: 66px;
    aspect-ratio: 66/82;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../images/ui/bg_icon.png") center center/100% 100% no-repeat;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform .3s ease-in-out
}

.footer__cpr-links li a,.footer__links li a,.gameplay__nav-item-text {
    transition: color .3s ease-in-out
}

.gameplay__nav-item-icon img {
    width: 40px;
    aspect-ratio: 1/1;
    border-radius: 100px
}

@media (max-width: 1920px) {
    .stages__arrow--next {
        transform:translateX(calc(100% + 10px)) translateY(-50%)
    }

    .gameplay__nav-item-icon {
        width: 54px
    }

    .gameplay__nav-item-icon img {
        width: 34px
    }
}

.gameplay__nav-item-text {
    width: 100%;
    font-size: 1.2em;
    position: relative;
    z-index: 2
}

@media (max-width: 1460px) {
    .gameplay__nav-item-icon {
        width:48px
    }

    .gameplay__nav-item-icon img {
        width: 30px
    }

    .gameplay__nav-item-text {
        font-size: 1.1em
    }
}

.gameplay__nav-item:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: linear-gradient(to left,#eadfd3,rgba(234,223,211,0));
    transition: opacity .3s ease-in-out;
    opacity: 0
}

.gameplay__nav-item.active:after,.gameplay__nav-item:hover:after,.unsimple:hover {
    opacity: 1
}

.gameplay__nav-item:before {
    content: "";
    width: 47px;
    aspect-ratio: 47/63;
    position: absolute;
    z-index: 3;
    top: 50%;
    right: -14px;
    transform: translateY(-50%) translateX(20px);
    background: url("../images/ui/bg_tab_active.png") center center/100% 100% no-repeat;
    transition: opacity .3s ease-in-out,transform .3s ease-in-out;
    opacity: 0
}

@media (max-width: 1680px) {
    .gameplay__nav-item:before {
        width:32px;
        right: -9px
    }
}

.gameplay__nav-item.active:before {
    opacity: 1;
    transform: translateY(-50%) translateX(0)
}

.gameplay__list {
    width: 100%;
    flex-grow: 1;
    position: relative;
    overflow: hidden
}

.gameplay__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity .5s ease-in-out,transform .5s ease-in-out
}

@media (max-width: 1920px) {
    .gameplay__item {
        padding-top:30px;
        gap: 32px
    }

    .classes__arrow {
        width: 70px
    }
}

.gameplay__item.active {
    position: relative;
    z-index: 2;
    opacity: 1;
    pointer-events: all;
    transform: translateX(0)
}

.classes__arrow.swiper-button-disabled,.classes__item {
    pointer-events: none;
    opacity: 0
}

.gameplay__item h3 {
    font-size: 1.6em;
    line-height: 1em;
    font-weight: 400
}

.gameplay__item .delimiter-start {
    max-width: 500px
}

.classes {
    background: url("../images/bg/bg_section_classes.jpg") center center/cover no-repeat fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px
}

.classes__content {
    width: 100%;
    max-width: min(100% - var(--page-gap-x) * 2,2400px);
    position: relative
}

.classes__slider {
    position: relative;
    z-index: 1;
    overflow: visible
}

.classes__arrow--prev {
    left: 0;
    transform: translateX(calc(-100% - 24px)) translateY(calc(-50% - 1em))
}

@media (max-width: 1920px) {
    .classes__arrow--prev {
        transform:translateX(calc(-100% - 10px)) translateY(calc(-50% - 1em))
    }
}

.classes__arrow--next {
    right: 0;
    transform: translateX(calc(100% + 24px)) translateY(calc(-50% - 1em))
}

.classes__item {
    height: auto;
    transition: opacity .3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.classes__item.swiper-slide-visible {
    opacity: 1;
    pointer-events: all
}

.classes__item-name {
    width: 100%;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 1.4em;
    line-height: 1em;
    text-shadow: 0 0 20px #fff,0 0 20px #fff,0 0 40px #fff
}

.classes__card {
    width: 100%;
    max-width: 279px;
    aspect-ratio: 279/610;
    position: relative;
    z-index: 1;
    cursor: pointer
}

.classes__card:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    pointer-events: none;
    background: url("../images/ui/bg_character_card.png") center center/100% 100% no-repeat
}

.classes__card-content {
    width: 92%;
    height: 92.5%;
    border-radius: 200px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-49.5%);
    background-color: #c9bbad;
    overflow: hidden
}

.classes__card-character,.classes__card-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: transform .5s ease-in-out
}

.classes__card-content:after {
    content: "";
    width: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #fff;
    filter: blur(40px);
    transform: scale(.8);
    pointer-events: none;
    transition: transform .5s ease-in-out,opacity .5s ease-in-out
}

.classes__card-content:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1
}

.classes__card:hover .classes__card-content:after {
    transform: scale(1.2) translateY(40%);
    opacity: .5
}

.classes__card-icon {
    width: 75%;
    z-index: 4;
    bottom: 4%
}

.classes__card:hover .classes__card-icon {
    transform: translateX(-50%) scale(1.2) translateY(-10%)
}

.classes__card-character {
    width: 350%;
    z-index: 2;
    top: -25%
}

.classes__card:hover .classes__card-character {
    transform: translateX(-50%) scale(1.3) translateY(7%)
}

.classes__card--chanters .classes__card-content:before {
    background: linear-gradient(to top,#ae4638 0,rgba(174,70,56,0) 70%,rgba(174,70,56,0) 100%)
}

.classes__card--daggers .classes__card-content:before {
    background: linear-gradient(to top,#38ae7d 0,rgba(56,174,125,0) 70%,rgba(56,174,125,0) 100%)
}

.classes__card--archers .classes__card-content:before {
    background: linear-gradient(to top,#4898c0 0,rgba(72,152,192,0) 70%,rgba(72,152,192,0) 100%)
}

.classes__card--knights .classes__card-content:before {
    background: linear-gradient(to top,#a0adb6 0,rgba(160,173,182,0) 70%,rgba(160,173,182,0) 100%)
}

.classes__card--healers .classes__card-content:before {
    background: linear-gradient(to top,#5d9934 0,rgba(93,153,52,0) 70%,rgba(93,153,52,0) 100%)
}

.classes__card--warriors .classes__card-content:before {
    background: linear-gradient(to top,#c58b35 0,rgba(197,139,53,0) 70%,rgba(197,139,53,0) 100%)
}

.classes__card--mages .classes__card-content:before {
    background: linear-gradient(to top,#523694 0,rgba(82,54,148,0) 70%,rgba(82,54,148,0) 100%)
}

.classes__card--summoners .classes__card-content:before {
    background: linear-gradient(to top,#ae6338 0,rgba(174,99,56,0) 70%,rgba(174,99,56,0) 100%)
}

.features__slider {
    position: relative;
    z-index: 1;
    overflow: visible;
    margin: 20px auto 30px
}

@media (max-width: 1920px) {
    .classes__arrow--next {
        transform:translateX(calc(100% + 10px)) translateY(calc(-50% - 1em))
    }

    .features__arrow {
        width: 70px
    }
}

.features__arrow--prev {
    left: 0;
    transform: translateX(calc(-100% - 24px)) translateY(-50%)
}

@media (max-width: 1920px) {
    .features__arrow--prev {
        transform:translateX(calc(-100% - 10px)) translateY(-50%)
    }
}

.features__arrow--next {
    right: 0;
    transform: translateX(calc(100% + 24px)) translateY(-50%)
}

.features__item {
    height: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out
}

.features__item.swiper-slide-visible {
    opacity: 1;
    pointer-events: all
}

.features__item-icon {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,calc(50% - 5px))
}

.features__item .card {
    padding: 48px 32px 70px
}

.features__item-face {
    background: #3e403e
}

.features__item-face-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 12px
}

.features__item-face-content img {
    width: 100%;
    max-width: 330px
}

.features__item-face-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0
}

.features__item-face-preview img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: top center
}

.features__item-face-preview:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background: linear-gradient(to top,#3e403e 0,rgba(62,64,62,.8) 30%,rgba(62,64,62,0) 100%)
}

.features__item-back {
    background-color: #ead2bd
}

.features__item-back-content {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.socials__list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 36px;
    margin: 20px auto 0
}

.socials__item {
    width: calc((100% - 108px)/ 4);
    aspect-ratio: 376/416;
    position: relative;
    background: url("../images/socials/bg_social.png") center center/100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: filter .3s ease-in-out
}

@media (max-width: 1024px) {
    .gameplay__nav-item.active,.gameplay__nav-item:hover {
        border-right:none;
        border-bottom: 2px solid #b3975f
    }

    .gameplay__nav-item-text {
        text-align: center;
        font-size: .75em;
        line-height: 1.3em
    }

    .gameplay__nav-item:after {
        background: linear-gradient(to top,#eadfd3,rgba(234,223,211,0))
    }

    .gameplay__nav-item:before {
        width: 24px;
        right: 50%;
        top: 100%;
        transform: rotate(-90deg) translateY(calc(50% - 3px)) translateX(calc(50% + 10px))
    }

    .gameplay__nav-item.active:before {
        transform: rotate(-90deg) translateY(calc(50% - 3px)) translateX(50%)
    }

    .gameplay__item,.gameplay__item .text-area {
        text-align: center
    }

    .gameplay__item {
        padding-top: 0;
        transform: translateX(0) scale(.9)
    }

    .gameplay__item .btn-group {
        justify-content: center
    }

    .gameplay__item .btn-group .btn {
        height: 50px;
        padding: 0 30px;
        gap: 8px
    }

    .gameplay__item .btn-group .btn:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .gameplay__item .btn-group .btn:before {
        width: calc(100% - 56px)
    }

    .gameplay__item .btn-group .btn i,.gameplay__item .btn-group .btn span {
        font-size: .8em;
        transform: translateY(-1px)
    }

    .gameplay__item.active {
        transform: translateX(0) scale(1)
    }

    .gameplay__item .delimiter-start {
        display: none
    }

    .classes__arrow,.features__arrow {
        width: 40px
    }

    .features__slider {
        margin: 10px auto 30px
    }

    .features__item .card:after {
        border-image-source: url("../images/ui/border/border_card_middle.png");
        border-image-slice: 69;
        border-width: 69px
    }

    .features__item .card:before {
        height: 38px;
        transform: translateY(calc(-50% - 1px));
        background: url("../images/ui/border/border_decor_card_middle.png") center center/auto 100% no-repeat
    }

    .socials__item {
        max-width: 280px;
        width: calc((100% - 36px)/ 2)
    }
}

@media (max-width: 480px) {
    .socials__item {
        width:100%;
        max-width: 220px
    }
}

.socials__item:hover {
    filter: brightness(110%)
}

.socials__item-icon {
    width: 100%;
    max-width: 35%;
    transition: transform .3s ease-in-out
}

.popup__bg,.unsimple {
    transition: opacity .3s ease-in-out
}

.socials__item:hover .socials__item-icon {
    transform: scale(1.2)
}

.socials__item-btn {
    width: 62%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-4px)
}

.popup,.popup__bg {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0
}

.footer {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 80px 0
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 36px;
    row-gap: 36px
}

.footer__cpr {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footer__cpr-text {
    font-size: .75em;
    line-height: 1.5em
}

.footer__cpr-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 12px
}

.footer__cpr-links li {
    font-size: .75em;
    line-height: 1em;
    text-decoration: underline
}

.footer__cpr-links li a:hover {
    text-decoration: none
}

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

.footer__links li {
    font-family: var(--font-primary);
    font-size: .75em;
    line-height: 1em;
    color: var(--font-secondary-color);
    white-space: nowrap;
    text-transform: uppercase
}

.footer__links li a:hover {
    color: var(--font-secondary-hover-color)
}

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

@media (max-width: 1240px) {
    .socials__item-btn {
        height:50px;
        padding: 0 30px;
        gap: 8px
    }

    .socials__item-btn:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .socials__item-btn:before {
        width: calc(100% - 56px)
    }

    .socials__item-btn i,.socials__item-btn span {
        font-size: .8em;
        transform: translateY(-1px)
    }

    .footer {
        padding: 60px 0
    }

    .footer .container {
        justify-content: center
    }

    .footer__cpr {
        width: 100%;
        text-align: center;
        align-items: center
    }

    .footer__cpr-links {
        justify-content: center
    }

    .footer__links {
        text-align: center
    }

    .footer__banners {
        width: 100%
    }
}

.footer--alt {
    color: var(--font-alt-secondary-color)
}

.footer--alt .footer__cpr li,.footer--alt .footer__links li,.unsimple--alt span {
    color: var(--font-alt-primary-color)
}

.unsimple {
    width: 177px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    opacity: .7
}

.popup,.popup__cancel {
    justify-content: center;
    display: flex
}

.unsimple span {
    font-size: .75em;
    line-height: 1.3em;
    color: var(--font-secondary-color)
}

.main-bottom-content {
    background: url("../images/bg/bg_section_group.jpg") bottom center/cover no-repeat fixed
}

.popup {
    width: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: auto;
    padding: 50px;
    align-items: flex-start;
    overflow-x: hidden
}

.popup.active {
    pointer-events: all;
    z-index: 50
}

.popup__bg {
    width: 100%;
    z-index: 1;
    background: rgba(27,34,44,.9);
    opacity: 0
}

.popup__bg.active {
    opacity: 1
}

.popup__content {
    width: 100%;
    max-width: 1024px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(-60px);
    transition: opacity .3s ease-in-out,transform .3s ease-in-out;
    margin: auto
}

.popup__content.active {
    opacity: 1;
    transform: translateY(0)
}

.popup__layout {
    width: 100%;
    padding: 40px;
    position: relative;
    z-index: 1
}

@media (max-width: 1024px) {
    .popup,.popup__layout {
        padding:30px
    }
}

.popup__layout--video {
    aspect-ratio: 1280/720;
    padding: 0;
    line-height: 0;
    background: 0 0
}

.popup__layout--video iframe {
    width: 100%!important;
    height: 100%!important;
    margin: 0;
    padding: 0
}

.popup__layout-title {
    width: 100%;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3em;
    text-align: center;
    color: #fff;
    text-transform: uppercase
}

.popup__cancel {
    width: 36px;
    height: 36px;
    background-color: var(--primary-color);
    position: absolute;
    z-index: 2;
    top: -18px;
    right: -18px;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
    align-items: center;
    border-radius: 100px
}

.popup__cancel:hover {
    background-color: #b92b2b
}

.popup__cancel img {
    width: 13px;
    margin: 0;
    padding: 0
}

.popup--subscribe .popup__content {
    max-width: 1200px
}

.subscribe__chest {
    width: 100%;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-right: 20px;
    margin-top: -130px
}

@media (max-width: 1680px) {
    .classes {
        gap:32px
    }

    .popup--subscribe .popup__content {
        max-width: 1000px
    }

    .subscribe__chest {
        height: 160px;
        margin-top: -100px
    }
}

@media (max-width: 1460px) {
    .classes {
        gap:28px
    }

    .features__item-icon {
        height: 68px;
        padding: 0 46px;
        gap: 8px
    }

    .features__item-icon:after {
        width: calc(100% + 4px);
        left: -2px
    }

    .features__item-icon:before {
        width: calc(100% - 76px)
    }

    .features__item-icon span {
        font-size: 1em;
        transform: translateY(-1px)
    }

    .features__item-icon i {
        font-size: 1em;
        transform: translateY(0)
    }

    .features__item .card {
        padding: 48px 32px 60px
    }

    .features__item-back-content {
        gap: 20px
    }

    .subscribe__chest {
        height: 120px;
        margin-top: -100px;
        padding-right: 10px
    }
}

.subscribe__chest img {
    height: 100%
}

.subscribe__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px
}

.subscribe__content .text-area {
    width: 100%
}

.subscribe__list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px
}

.subscribe__list-item {
    width: calc((100% - 60px)/ 4);
    align-self: stretch;
    background-color: #ead2bd
}

@media (max-width: 1024px) {
    .popup__layout-title {
        font-size:24px
    }

    .subscribe__chest {
        margin-top: 0
    }

    .subscribe__list-item {
        width: calc((100% - 20px)/ 2)
    }
}

@media (max-width: 640px) {
    .header__container-text,.header__top-container-text {
        font-size:12px
    }

    .header__container-form {
        height: 52px;
        padding: 0 0 0 30px
    }

    .header__top-container img {
        max-height: 60px
    }

    .gameplay__nav-item {
        width: calc((100vw - var(--page-gap-x) * 2)/ 2)
    }

    .subscribe__list-item {
        width: 100%
    }
}

.subscribe__list-item--tg {
    background-color: #00a3b3;
    box-shadow: inset 0 0 40px #01646d,inset 0 0 40px #01646d
}

.subscribe__list-item--vk {
    background-color: #0081b3;
    box-shadow: inset 0 0 40px #005b80,inset 0 0 40px #005b80
}

.subscribe__list-item--dc {
    background-color: #6862bf;
    box-shadow: inset 0 0 40px #3c3970,inset 0 0 40px #3c3970
}

.subscribe__list-item--forum {
    background-color: #bf8062;
    box-shadow: inset 0 0 40px #7a523f,inset 0 0 40px #7a523f
}

.subscribe__list-item-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    height: 100%
}

.subscribe__list-item-content .btn {
    margin-top: auto
}

.subscribe__list-item-title {
    width: 100%;
    text-align: center;
    font-size: 1.3em;
    color: #fff
}

.subscribe__list-item-list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.subscribe__list-item-list img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5);
    box-shadow: 0 5px 10px rgba(0,0,0,.2)
}

.popup--stage .popup__content {
    max-width: 1200px
}

@media (max-width: 1680px) {
    .popup--stage .popup__content {
        max-width:1000px
    }
}

.popup__layout {
    background-color: #ead2bd;
    box-shadow: inset 0 0 40px #b09370,inset 0 0 40px #b09370
}

.stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.stage .text-area .delimiter {
    margin: 30px 0
}

.popup--classlist .popup__content {
    max-width: 1600px
}

.popup--classlist .popup__layout {
    background-color: #1f2024;
    box-shadow: inset 0 0 40px #1f2024,inset 0 0 40px #1f2024
}

.classlist {
    width: 100%;
    position: relative
}

.classlist__slider {
    position: relative;
    overflow: visible;
    z-index: 3
}

.classlist__arrow {
    position: absolute;
    z-index: 4;
    top: 50%
}

@media (max-width: 1920px) {
    .features__arrow--next {
        transform:translateX(calc(100% + 10px)) translateY(-50%)
    }

    .popup--classlist .popup__content {
        max-width: 1200px
    }

    .classlist__arrow {
        width: 70px
    }
}

@media (max-width: 1024px) {
    .classlist__arrow {
        width:40px
    }
}

.classlist__arrow--prev {
    left: 0;
    transform: translateX(calc(-100% - 24px)) translateY(-50%)
}

@media (max-width: 1920px) {
    .classlist__arrow--prev {
        transform:translateX(calc(-100% - 10px)) translateY(-50%)
    }
}

.classlist__arrow--next {
    right: 0;
    transform: translateX(calc(100% + 24px)) translateY(-50%)
}

.classlist__item {
    height: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap
}

.classlist__item.swiper-slide-visible {
    opacity: 1;
    pointer-events: all
}

.classlist__item-preview {
    width: 40%;
    aspect-ratio: 100/130;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none
}

.classlist__item-preview-character {
    position: absolute;
    z-index: 3;
    width: 140%;
    top: 50%;
    left: 50%;
    transform: translate(-55%,-58%)
}

.classlist__item-preview-icon,.classlist__item-preview:before {
    top: 50%;
    transform: translate(-55%,-55%);
    position: absolute;
    left: 50%
}

.classlist__item-preview-icon {
    z-index: 2;
    width: 120%;
    filter: blur(3px);
    opacity: .05
}

.classlist__item-preview:before {
    content: "";
    width: 100%;
    aspect-ratio: 1/1;
    z-index: 1;
    border-radius: 50%;
    filter: blur(100px)
}

.classlist__item-preview:after {
    content: "";
    width: 60%;
    aspect-ratio: 1/0.4;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    transform: translate(-55%,-30%);
    border-radius: 50%;
    background: linear-gradient(to top,#000 0,rgba(0,0,0,.3) 70%,rgba(0,0,0,.1) 100%);
    opacity: .2
}

.classlist__item--chanters .classlist__item-preview:before {
    background: linear-gradient(to top,#ae4638 0,rgba(174,70,56,0) 70%,rgba(174,70,56,0) 100%)
}

.classlist__item--daggers .classlist__item-preview:before {
    background: linear-gradient(to top,#38ae7d 0,rgba(56,174,125,0) 70%,rgba(56,174,125,0) 100%)
}

.classlist__item--archers .classlist__item-preview:before {
    background: linear-gradient(to top,#4898c0 0,rgba(72,152,192,0) 70%,rgba(72,152,192,0) 100%)
}

.classlist__item--knights .classlist__item-preview:before {
    background: linear-gradient(to top,#a0adb6 0,rgba(160,173,182,0) 70%,rgba(160,173,182,0) 100%)
}

.classlist__item--healers .classlist__item-preview:before {
    background: linear-gradient(to top,#5d9934 0,rgba(93,153,52,0) 70%,rgba(93,153,52,0) 100%)
}

.classlist__item--warriors .classlist__item-preview:before {
    background: linear-gradient(to top,#c58b35 0,rgba(197,139,53,0) 70%,rgba(197,139,53,0) 100%)
}

.classlist__item--mages .classlist__item-preview:before {
    background: linear-gradient(to top,#523694 0,rgba(82,54,148,0) 70%,rgba(82,54,148,0) 100%)
}

.classlist__item--summoners .classlist__item-preview:before {
    background: linear-gradient(to top,#ae6338 0,rgba(174,99,56,0) 70%,rgba(174,99,56,0) 100%)
}

.classlist__item-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.classlist__item-title {
    width: 100%;
    text-align: center;
    font-size: 3em;
    line-height: 1em;
    color: var(--font-alt-primary-color)
}

.classlist__item-skill {
    width: 80%;
    margin-top: 30px;
    position: relative;
    padding-bottom: 4.5%
}

@media (max-width: 1920px) {
    .classlist__arrow--next {
        transform:translateX(calc(100% + 10px)) translateY(-50%)
    }

    .classlist__item-title {
        font-size: 2.5em
    }

    .classlist__item-skill {
        margin-top: 25px
    }
}

@media (max-width: 1680px) {
    .popup--classlist .popup__content {
        max-width:1000px
    }

    .classlist__item-title {
        font-size: 2em
    }

    .classlist__item-skill {
        margin-top: 20px
    }
}

@media (max-width: 1460px) {
    .subscribe__content {
        gap:20px
    }

    .popup__layout:after {
        border-image-source: url("../images/ui/border/border_card_middle.png");
        border-image-slice: 69;
        border-width: 69px
    }

    .popup__layout:before {
        height: 38px;
        transform: translateY(calc(-50% - 1px));
        background: url("../images/ui/border/border_decor_card_middle.png") center center/auto 100% no-repeat
    }

    .popup--classlist .popup__content {
        max-width: 600px
    }

    .popup--classlist .popup__layout:after {
        border-image-source: url("../images/ui/border/border_card_middle.png");
        border-image-slice: 69;
        border-width: 69px
    }

    .popup--classlist .popup__layout:before {
        height: 38px;
        transform: translateY(calc(-50% - 1px));
        background: url("../images/ui/border/border_decor_card_middle.png") center center/auto 100% no-repeat
    }

    .classlist__item {
        justify-content: center
    }

    .classlist__item-preview {
        display: none
    }

    .classlist__item-content,.classlist__item-skill {
        width: 100%
    }
}

.classlist__item-skill-preview {
    position: relative;
    z-index: 1
}

.classlist__item-skill-preview-item {
    width: 100%;
    aspect-ratio: 1280/720;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    transition: opacity .3s ease-in-out
}

.classlist__item-skill-preview-item.active {
    position: relative;
    pointer-events: all;
    opacity: 1;
    z-index: 2
}

.classlist__item-skill-preview-item video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center
}

.classlist__item-skill-switch {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2
}

.classlist__item-skill-switch-item {
    width: calc((100% - 70px)/ 8);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #1f2024;
    background-color: #1f2024;
    cursor: pointer;
    transition: border .3s ease-in-out
}

.classlist__item-skill-switch-item img {
    width: 100%;
    height: 100%;
    opacity: .5;
    transition: opacity .3s ease-in-out
}

.classlist__item-skill-switch-item.active,.classlist__item-skill-switch-item:hover {
    border: 2px solid #f3cb86
}

.classlist__item-skill-switch-item.active img,.classlist__item-skill-switch-item:hover img {
    opacity: 1
}