@font-face {
    font-family: 'Angelus Medieval';
    src: url("../fonts/angelus_medieval/DXAngelusMediaval.woff2") format("woff2");
    src: local("☺"),url("../fonts/angelus_medieval/DXAngelusMediaval.woff") format("woff"),url("../fonts/angelus_medieval/DXAngelusMediaval.eot"),url("../fonts/angelus_medieval/DXAngelusMediaval.ttf") format("truetype"),url("../fonts/angelus_medieval/DXAngelusMediaval.svg") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Intro';
    src: url("../fonts/intro/Intro-Regular.eot");
    src: local("☺"),url("../fonts/intro/Intro-Regular.woff") format("woff"),url("../fonts/intro/Intro-Regular.ttf") format("truetype"),url("../fonts/intro/Intro-Regular.svg") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Intro';
    src: url("../fonts/intro/Intro-Bold.eot");
    src: local("☺"),url("../fonts/intro/Intro-Bold.woff") format("woff"),url("../fonts/intro/Intro-Bold.ttf") format("truetype"),url("../fonts/intro/Intro-Bold.svg") format("svg");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

.flex-sbc,.flex-sbs,.flex-sbe,.flex-cc,.flex-cs,.flex-ce,.flex-sc,.flex-ss,.flex-se,.flex-ec,.flex-es,.flex-ee {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-sbc,.flex-sbs,.flex-sbe {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.flex-cc,.flex-cs,.flex-ce {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-sc,.flex-ss,.flex-se {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.flex-ec,.flex-es,.flex-ee {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.flex-sbc,.flex-cc,.flex-sc,.flex-ec {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.flex-sbs,.flex-cs,.flex-ss,.flex-es {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.flex-sbe,.flex-ce,.flex-se,.flex-ee {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body,ul,ol,h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal
}

input,select {
    outline: none;
    border: none
}

a {
    text-decoration: none;
    color: inherit
}

.btn {
    width: 100%;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    -webkit-filter: drop-shadow(0px 5px 3px rgba(0,0,0,0.1));
    filter: drop-shadow(0px 5px 3px rgba(0,0,0,0.1))
}

.btn:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out
}

.btn:hover:after {
    -webkit-filter: brightness(120%);
    filter: brightness(120%)
}

.btn:before {
    content: '';
    width: 60px;
    aspect-ratio: 60 / 58;
    position: absolute;
    top: -30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out
}

.btn:hover:before {
    -webkit-filter: brightness(120%);
    filter: brightness(120%)
}

.btn span {
    position: relative;
    z-index: 3;
    font-family: 'Angelus Medieval';
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
    -webkit-transition: letter-spacing .3s ease-in-out;
    transition: letter-spacing .3s ease-in-out;
    position: relative
}

.btn--text-gradient span {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(#fff), color-stop(#fff), color-stop(#e4c48e), color-stop(#fff), color-stop(#e4c48e), color-stop(#e4c48e), to(#fff));
    background-image: linear-gradient(to bottom, #fff, #fff, #fff, #e4c48e, #fff, #e4c48e, #e4c48e, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    -webkit-filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.4));
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.4))
}

.btn:hover span {
    letter-spacing: 2px
}

.btn--middle {
    height: 80px
}

.btn--middle:after {
    background-size: auto 100%,auto 100%,calc(100% - 160px) 100%
}

.btn--middle:before {
    width: 46px;
    top: -24px
}

.btn--middle span {
    font-size: 20px;
    line-height: 20px
}

.btn--small {
    height: 46px
}

.btn--small:after {
    background-size: auto 100%,auto 100%,calc(100% - 92px) 100%
}

.btn--small:before {
    width: 26px;
    top: -13px
}

.btn--small span {
    font-size: 16px;
    line-height: 16px
}

.btn-play {
    width: 200px;
    aspect-ratio: 1 / 1;
    position: relative;
    cursor: pointer
}

.btn-play:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-filter: brightness(100%) drop-shadow(0px 0px 30px #fff) drop-shadow(0px 0px 30px #fff);
    filter: brightness(100%) drop-shadow(0px 0px 30px #fff) drop-shadow(0px 0px 30px #fff);
    -webkit-transition: -webkit-filter .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: filter .3s ease-in-out, transform .3s ease-in-out;
    transition: filter .3s ease-in-out, transform .3s ease-in-out, -webkit-filter .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.btn-play:after {
    content: '';
    width: 33px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.btn-play:hover:before {
    -webkit-filter: brightness(120%) drop-shadow(0px 0px 30px #fff) drop-shadow(0px 0px 30px #fff);
    filter: brightness(120%) drop-shadow(0px 0px 30px #fff) drop-shadow(0px 0px 30px #fff);
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg)
}

.btn-play:hover:after {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2)
}

.btn-play--small {
    width: 110px
}

.btn-play--small:after {
    width: 23px
}

.hover-effect {
    position: relative;
    overflow: hidden
}

.hover-effect__background {
    width: 0px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ce4264;
    z-index: 1;
    -webkit-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.hover-effect.show .hover-effect__background,.hover-effect.active .hover-effect__background {
    width: 250%
}

.hover-effect span {
    position: relative;
    z-index: 2
}

.border-decor {
    position: relative
}

.border-decor:after {
    content: '';
    width: calc(100% + 40px);
    height: 137px;
    position: absolute;
    top: -10px;
    left: -20px;
    z-index: 2;
    pointer-events: none
}

@media (max-width: 1024px) {
    .border-decor:after {
        height:80px;
        top: -5px;
        left: -11px;
        width: calc(100% + 22px)
    }
}

.title-decor {
    width: 270px;
    aspect-ratio: 270 / 67;
    position: absolute;
    top: -35px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 12px
}

.title-decor span {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    text-shadow: 0px 2px 2px rgba(0,0,0,0.3)
}

.swiper-button-prev,.swiper-button-next {
    width: 56px;
    height: auto;
    aspect-ratio: 56 / 61;
    margin-top: 0;
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: .7
}

.swiper-button-prev:hover,.swiper-button-next:hover {
    opacity: 1
}

.swiper-button-prev:after,.swiper-button-next:after {
    display: none
}

.swiper-pagination {
    position: relative;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.swiper-pagination-bullet {
    width: 20px;
    height: auto;
    aspect-ratio: 1 / 1;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: .5
}

.swiper-pagination-bullet:hover,.swiper-pagination-bullet-active {
    opacity: 1
}

.section-mask {
    -webkit-mask-box-image: linear-gradient(to top, transparent 0%, white 200px, white calc(100% - 200px), transparent 100%)
}

@media (max-width: 1024px) {
    .section-mask {
        -webkit-mask-box-image:linear-gradient(to top, transparent 0%, white 100px, white calc(100% - 100px), transparent 100%)
    }
}

body {
    font-family: 'Intro';
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #797979;
    background: #e5ebe7
}

::-webkit-input-placeholder {
    color: #959595;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

::-moz-placeholder {
    color: #959595;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

:-moz-placeholder {
    color: #959595;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

:-ms-input-placeholder {
    color: #959595;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

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

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

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

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

.snow {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    pointer-events: none;
    -webkit-transform: scale(1.4);
    transform: scale(1.4)
}

.wrapper {
    width: 100%;
    max-width: 2560px;
    min-width: 380px;
    margin: 0 auto;
    overflow: hidden;
    position: relative
}

.wrapper:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    display: none;
    background: linear-gradient(to right, #e5ebe7 0px, #e5ebe7 20px, rgba(227,233,229,0) 250px, rgba(227,233,229,0) calc(100% - 250px), #e5ebe7 calc(100% - 20px), #e5ebe7 100%);
    z-index: 3
}

@media (min-width: 2561px) {
    .wrapper:before {
        display:block
    }
}

.nav {
    width: 100%;
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    z-index: 10
}

.nav__content {
    width: calc(100% - 60px);
    max-width: 1560px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 40px;
    column-gap: 40px
}

@media (max-width: 1460px) {
    .nav__content {
        -webkit-column-gap:20px;
        column-gap: 20px
    }
}

@media (max-width: 1024px) {
    .nav__content {
        width:calc(100% - 40px)
    }
}

.nav__open {
    width: 34px !important;
    height: 34px !important;
    background-color: #fff;
    border-radius: 50%;
    color: #d04164;
    font-size: 16px;
    line-height: 16px;
    -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out, color .3s ease-in-out;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (max-width: 1460px) {
    .nav__open {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.nav__open:hover {
    background-color: #d04164;
    color: #fff
}

.nav__languages {
    position: relative;
    list-style-type: none
}

.nav__languages-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.nav__languages-item-icon {
    width: 32px;
    height: 33px;
    position: relative
}

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

.nav__languages-item-icon:after {
    content: '';
    width: 38px;
    height: 39px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.nav__languages-item:hover .nav__languages-item-icon img {
    -webkit-filter: brightness(120%);
    filter: brightness(120%)
}

.nav__languages-item-name {
    padding-left: 8px;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #877777;
    font-size: 18px;
    line-height: 18px;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

@media (max-width: 1680px) {
    .nav__languages-item-name {
        font-size:16px;
        line-height: 16px
    }
}

.nav__languages-item:hover .nav__languages-item-name {
    color: #d04164
}

.nav__languages-current .nav__languages-item:after {
    content: '';
    width: 13px;
    height: 7px;
    margin-left: 8px;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

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

.nav__languages-current {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.nav__languages-stroke {
    position: absolute;
    top: calc(100% + 10px);
    left: -12px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(-43px);
    transform: translateY(-43px);
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    background: rgba(255,255,255,0.7);
    padding: 12px;
    border-radius: 20px
}

.nav__languages-stroke ul {
    list-style-type: none
}

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

.nav__languages.active .nav__languages-stroke {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
}

@media (max-width: 1460px) {
    .nav__layout {
        width:280px;
        height: 100vh;
        position: fixed;
        z-index: 2;
        top: 0;
        left: -300px;
        background: rgba(255,255,255,0.8);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-right: 1px solid #fff;
        display: block;
        -webkit-transition: left .3s ease-in-out;
        transition: left .3s ease-in-out
    }

    .nav__layout.active {
        left: 0px
    }
}

.nav__layout-cancel {
    width: 34px !important;
    height: 34px !important;
    background-color: #fff;
    position: absolute;
    top: 22px;
    right: -17px;
    border-radius: 50%;
    color: #d04164;
    font-size: 16px;
    line-height: 16px;
    -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out, color .3s ease-in-out;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (max-width: 1460px) {
    .nav__layout-cancel {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.nav__layout-cancel:hover {
    background-color: #d04164;
    color: #fff
}

.nav__links {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    list-style-type: none
}

@media (max-width: 1460px) {
    .nav__links {
        width:100%;
        height: 100%;
        display: block;
        padding: 30px;
        overflow-y: auto
    }
}

.nav__links-logo {
    width: 100%;
    display: none
}

.nav__links-logo img {
    width: 80%;
    margin: 20px;
}

@media (max-width: 1460px) {
    .nav__links li {
        width:100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .nav__links li:not(:first-child) {
        margin-top: 20px
    }
}

.nav__links li .nav__links-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.nav__links li .nav__links-item span {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #4d4438;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

@media (max-width: 1680px) {
    .nav__links li .nav__links-item span {
        font-size:16px;
        line-height: 16px
    }
}

.nav__links li .nav__links-item:before {
    content: '';
    width: calc(100% + 50px);
    height: calc(100% + 30px);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.nav__links li .nav__links-item:hover span,.nav__links li .nav__links-item.active span {
    color: #fff
}

.nav__links li .nav__links-item:hover:before,.nav__links li .nav__links-item.active:before {
    opacity: 1
}

.nav__links-drop {
    position: relative;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.nav__links-drop>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.nav__links-drop>a:after {
    content: '';
    width: 13px;
    height: 7px;
    margin-left: 8px;
    -webkit-transition: -webkit-transform .3s ease-in-out, -webkit-filter .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out, -webkit-filter .3s ease-in-out;
    transition: transform .3s ease-in-out, filter .3s ease-in-out;
    transition: transform .3s ease-in-out, filter .3s ease-in-out, -webkit-transform .3s ease-in-out, -webkit-filter .3s ease-in-out;
    position: relative;
    top: -2px;
    z-index: 2
}

.nav__links-drop>a:hover:after,.nav__links-drop>a.active:after {
    -webkit-filter: brightness(400%);
    filter: brightness(400%)
}

.nav__links-drop>a.active:after {
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

.nav__links-drop-box {
    min-width: calc(100% + 40px);
    position: absolute;
    top: calc(100% + 10px);
    left: -20px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(-43px);
    transform: translateY(-43px);
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    background: rgba(255,255,255,0.7);
    padding: 20px;
    border-radius: 20px
}

@media (max-width: 1460px) {
    .nav__links-drop-box {
        width:100%;
        min-width: 100%;
        position: relative;
        top: 0;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        display: none;
        left: 0;
        margin-top: 20px;
        padding: 0px;
        padding-left: 10px;
        background: none
    }
}

.nav__links-drop-box.active {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
}

@media (max-width: 1460px) {
    .nav__links-drop-box.active {
        display:block
    }
}

.nav__links-drop-box>div {
    width: 100%
}

.nav__links-drop-box>div:not(:first-child) {
    margin-top: 10px
}

.nav__links-drop-box a {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #666;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.nav__links-drop-box a:hover {
    color: #ab5e37
}

.nav__button {
    width: 220px;
    margin-left: auto
}

@media (max-width: 1024px) {
    .nav__button {
        width:170px
    }
}

@media (max-width: 1680px) {
    .nav__button span {
        font-size:16px;
        line-height: 16px
    }
}

.header {
    width: 100%;
    padding: 40px 0px 120px;
    position: relative
}

.header--inner {
    padding: 20px 0px 80px
}

.header__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    z-index: 3
}

@media (max-width: 1024px) {
    .header__content {
        width:calc(100% - 40px)
    }
}

.header__left {
    width: 486px
}

@media (max-width: 1460px) {
    .header__left {
        width:400px
    }
}

@media (max-width: 1024px) {
    .header__left {
        width:100%
    }
}

.header__right {
    width: calc(36% - 60px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header__right-content {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media (max-width: 1024px) {
    .header__right {
        width:100%;
        margin-top: 70px
    }
}

.header__logo {
    display: block;
    width: 100%;
    max-width: 486px;
    aspect-ratio: 486 / 346;
    margin: 0 auto;
    position: relative;
    -webkit-transition: -webkit-transform .5s ease-in-out, -webkit-filter .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out, -webkit-filter .5s ease-in-out;
    transition: transform .5s ease-in-out, filter .5s ease-in-out;
    transition: transform .5s ease-in-out, filter .5s ease-in-out, -webkit-transform .5s ease-in-out, -webkit-filter .5s ease-in-out;
    z-index: 1
}

.header__logo:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-filter: brightness(110%);
    filter: brightness(110%)
}

.header__logo:hover:after {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    transform: translate(-50%, -50%) scale(0.9)
}

.header__logo:after {
    content: '';
    width: 695px;
    aspect-ratio: 596 / 316;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
    pointer-events: none
}

@media (max-width: 1460px) {
    .header__logo:after {
        width:500px
    }
}

.header__logo img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}



.header__logo-left {
    z-index: 2;
    -webkit-animation: logo-left 5s ease-in-out infinite;
    animation: logo-left 5s ease-in-out infinite
}

@-webkit-keyframes logo-left {
    from {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    50% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }
}

@keyframes logo-left {
    from {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    50% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }
}

.header__logo-right {
    z-index: 2;
    -webkit-animation: logo-right 5s ease-in-out infinite;
    animation: logo-right 5s ease-in-out infinite
}

@-webkit-keyframes logo-right {
    from {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    to {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes logo-right {
    from {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    to {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

.header__logo-middle {
    z-index: 3;
    -webkit-animation: logo-middle 5s ease-in-out infinite;
    animation: logo-middle 5s ease-in-out infinite
}

@-webkit-keyframes logo-middle {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }

    50% {
        -webkit-transform: scale(0.97);
        transform: scale(0.97);
        -webkit-filter: brightness(120%);
        filter: brightness(120%)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }
}

@keyframes logo-middle {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }

    50% {
        -webkit-transform: scale(0.97);
        transform: scale(0.97);
        -webkit-filter: brightness(120%);
        filter: brightness(120%)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }
}

.header__logo-text {
    z-index: 4;
    -webkit-animation: logo-text 5s ease-in-out infinite;
    animation: logo-text 5s ease-in-out infinite
}

@-webkit-keyframes logo-text {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }

    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-filter: brightness(120%);
        filter: brightness(120%)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }
}

@keyframes logo-text {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }

    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-filter: brightness(120%);
        filter: brightness(120%)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }
}

.header__buttons {
    width: 100%;
    margin-top: -30px;
    position: relative;
    z-index: 2
}

.header__buttons .btn {
    max-width: 486px;
    margin: 0 auto
}

@media (max-width: 1024px) {
    .header__buttons .btn {
        height:80px
    }

    .header__buttons .btn:after {
        background-size: auto 100%,auto 100%,calc(100% - 160px) 100%
    }

    .header__buttons .btn:before {
        width: 46px;
        top: -24px
    }

    .header__buttons .btn span {
        font-size: 20px;
        line-height: 20px
    }
}

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

.header__servers:after {
    content: '';
    width: 439px;
    aspect-ratio: 439 / 383;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -48%);
    transform: translate(-50%, -48%);
    pointer-events: none;
    -webkit-animation: server-scale 5s ease-in-out infinite;
    animation: server-scale 5s ease-in-out infinite
}

@-webkit-keyframes server-scale {
    from {
        -webkit-transform: translate(-50%, -48%) scale(1);
        transform: translate(-50%, -48%) scale(1)
    }

    50% {
        -webkit-transform: translate(-50%, -48%) scale(1.15);
        transform: translate(-50%, -48%) scale(1.15)
    }

    to {
        -webkit-transform: translate(-50%, -48%) scale(1);
        transform: translate(-50%, -48%) scale(1)
    }
}

@keyframes server-scale {
    from {
        -webkit-transform: translate(-50%, -48%) scale(1);
        transform: translate(-50%, -48%) scale(1)
    }

    50% {
        -webkit-transform: translate(-50%, -48%) scale(1.15);
        transform: translate(-50%, -48%) scale(1.15)
    }

    to {
        -webkit-transform: translate(-50%, -48%) scale(1);
        transform: translate(-50%, -48%) scale(1)
    }
}

.header__servers-item {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
    transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out
}

.header__servers-item.active {
    position: relative;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    pointer-events: all;
    z-index: 3
}

.header__servers-item-title {
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    color: #fff;
    text-transform: uppercase
}

.header__servers-item-count {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff8c8;
    font-size: 100px;
    line-height: 100px;
    text-transform: uppercase;
    margin-top: 5px
}

.player_count_online {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff8c8;
    font-size: 100px;
    line-height: 100px;
    text-transform: uppercase;
    margin-top: 5px
}

.header__servers-item-name {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
    margin-top: 0px
}

.header__servers-item-timer {
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    text-transform: uppercase;
    margin-top: 5px
}

.header--inner .header__servers {
    margin-top: 30px
}

.header__select {
    width: auto;
    margin: 10px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.header__select-current {
    font-size: 13px;
    line-height: 13px;
    color: #fff8c8;
    text-transform: uppercase;
    background-color: #ce4264;
    padding: 5px 12px 5px;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

.header__select-current:hover {
    background-color: #e6567a
}

.header__select-current span {
    padding-top: 2px;
    margin-right: 5px;
    white-space: nowrap
}

.header__select-current img {
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.header__select.active .header__select-current img {
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

.header__select-stroke {
    width: auto;
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    background: rgba(255,255,255,0.7);
    padding: 12px;
    border-radius: 15px;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-20px);
    transform: translateX(-50%) translateY(-20px);
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.header__select-stroke-server {
    width: 100%;
    padding: 10px 12px;
    background-color: #dcdcdc;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
    transition: color .3s ease-in-out, background-color .3s ease-in-out
}

.header__select-stroke-server:hover,.header__select-stroke-server.active {
    color: #fff8c8
}

.header__select-stroke-server .hover-effect__background {
    background-color: #ce4264
}

.header__select-stroke-server:not(:first-child) {
    margin-top: 5px
}

.header__select.active .header__select-stroke {
    pointer-events: all;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px)
}

.header__animation {
    width: 100%;
    min-width: 2200px;
    height: 1024px;
    position: absolute;
    top: -80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none
}

.header__animation-left {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.header__animation-left img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.header__animation-left img.tree-1 {
    width: 530px;
    opacity: 1;
    top: -50px;
    left: -50px;
    -webkit-animation: tree-1 25s ease-in-out infinite;
    animation: tree-1 25s ease-in-out infinite;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: 3
}

@-webkit-keyframes tree-1 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes tree-1 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.header__animation-left img.tree-2 {
    width: 449px;
    opacity: 1;
    top: -50px;
    left: -50px;
    -webkit-animation: tree-2 20s ease-in-out infinite;
    animation: tree-2 20s ease-in-out infinite;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: 2
}

@-webkit-keyframes tree-2 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes tree-2 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.header__animation-left img.tree-3 {
    width: 424px;
    opacity: 1;
    top: 200px;
    left: -50px;
    -webkit-animation: tree-3 10s ease-in-out infinite;
    animation: tree-3 10s ease-in-out infinite;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: 1
}

@-webkit-keyframes tree-3 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes tree-3 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.header__animation-right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.header__animation-right img {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0
}

.header__animation-right img.tree-1 {
    width: 537px;
    opacity: 1;
    top: -50px;
    right: -50px;
    -webkit-animation: tree-11 25s ease-in-out infinite;
    animation: tree-11 25s ease-in-out infinite;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    z-index: 1
}

@-webkit-keyframes tree-11 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes tree-11 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.header__animation-right img.tree-2 {
    width: 380px;
    opacity: 1;
    top: -50px;
    right: -50px;
    -webkit-animation: tree-22 20s ease-in-out infinite;
    animation: tree-22 20s ease-in-out infinite;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    z-index: 3
}

@-webkit-keyframes tree-22 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes tree-22 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.header__animation-right img.tree-3 {
    width: 456px;
    opacity: 1;
    top: 200px;
    right: -50px;
    -webkit-animation: tree-33 10s ease-in-out infinite;
    animation: tree-33 10s ease-in-out infinite;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    z-index: 2
}

@-webkit-keyframes tree-33 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes tree-33 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.header__animation-center {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.header__animation-center img.img-1 {
    width: 140%;
    position: absolute;
    top: -300px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: img-rotate-1 150s linear infinite;
    animation: img-rotate-1 150s linear infinite;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: .5
}

.header__animation-center img.img-2 {
    width: 160%;
    position: absolute;
    top: -300px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: img-rotate-1 360s linear infinite;
    animation: img-rotate-1 360s linear infinite;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: .2
}

@-webkit-keyframes img-rotate-1 {
    from {
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
        transform: rotate(0deg) translate(-50%, -50%)
    }

    to {
        -webkit-transform: rotate(360deg) translate(-50%, -50%);
        transform: rotate(360deg) translate(-50%, -50%)
    }
}

@keyframes img-rotate-1 {
    from {
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
        transform: rotate(0deg) translate(-50%, -50%)
    }

    to {
        -webkit-transform: rotate(360deg) translate(-50%, -50%);
        transform: rotate(360deg) translate(-50%, -50%)
    }
}

.header__animation-character {
    width: 564px;
    position: absolute;
    top: 70px;
    left: 52%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: character-anim 10s ease-in-out infinite;
    animation: character-anim 10s ease-in-out infinite
}

@media (max-width: 1024px) {
    .header__animation-character {
        display:none
    }
}

@-webkit-keyframes character-anim {
    from {
        -webkit-transform: rotate(0deg) scale(1) translateX(-50%);
        transform: rotate(0deg) scale(1) translateX(-50%)
    }

    50% {
        -webkit-transform: rotate(0.02deg) scale(1.02) translateX(-50%);
        transform: rotate(0.02deg) scale(1.02) translateX(-50%)
    }

    to {
        -webkit-transform: rotate(0deg) scale(1) translateX(-50%);
        transform: rotate(0deg) scale(1) translateX(-50%)
    }
}

@keyframes character-anim {
    from {
        -webkit-transform: rotate(0deg) scale(1) translateX(-50%);
        transform: rotate(0deg) scale(1) translateX(-50%)
    }

    50% {
        -webkit-transform: rotate(0.02deg) scale(1.02) translateX(-50%);
        transform: rotate(0.02deg) scale(1.02) translateX(-50%)
    }

    to {
        -webkit-transform: rotate(0deg) scale(1) translateX(-50%);
        transform: rotate(0deg) scale(1) translateX(-50%)
    }
}

.main {
    width: 100%
}

.main__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 60px;
    position: relative;
    z-index: 2
}

@media (max-width: 1500px) {
    .main__content {
        gap:30px
    }
}

.anounce {
    width: 64%
}

@media (max-width: 1024px) {
    .anounce {
        width:100%
    }
}

.anounce__slider {
    width: 100%;
    background: #fff;
    border-radius: 20px
}

.anounce__slider-box {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 20px;
    position: relative
}

@media (max-width: 1240px) {
    .anounce__slider-box {
        height:350px
    }
}

@media (max-width: 760px) {
    .anounce__slider-box {
        height:auto
    }
}

.anounce__slider-box .swiper-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    gap: 10px;
    top: 40px;
    left: 50px;
    z-index: 2
}

@media (max-width: 1240px) {
    .anounce__slider-box .swiper-navigation {
        left:30px
    }
}

@media (max-width: 760px) {
    .anounce__slider-box .swiper-navigation {
        top:50px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.anounce__slider-box .swiper-navigation .swiper-button-prev,.anounce__slider-box .swiper-navigation .swiper-button-next {
    width: 30px
}

.anounce__slider-box-item {
    background: #fff;
    overflow: hidden;
    position: relative
}

@media (max-width: 760px) {
    .anounce__slider-box-item {
        padding-bottom:30px
    }
}

.anounce__slider-box-item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: right center;
    object-position: right center;
    z-index: 1
}

.anounce__slider-box-item:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(50%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%)
}

@media (max-width: 1240px) {
    .anounce__slider-box-item:before {
        background:-webkit-gradient(linear, left top, right top, from(#fff), color-stop(80%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
        background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,0) 100%)
    }
}

@media (max-width: 760px) {
    .anounce__slider-box-item:before {
        background:-webkit-gradient(linear, left top, right top, from(#fff), color-stop(80%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8)));
        background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,0.8) 100%)
    }
}

.anounce__slider-box-item-content {
    width: 70%;
    padding: 100px 50px 0px;
    position: relative;
    z-index: 3
}

@media (max-width: 1240px) {
    .anounce__slider-box-item-content {
        width:80%;
        padding: 100px 30px 0px
    }
}

@media (max-width: 760px) {
    .anounce__slider-box-item-content {
        width:100%;
        text-align: center
    }
}

.anounce__slider-box-item-title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #5f5d5b;
    font-size: 44px;
    line-height: 44px;
    text-transform: uppercase
}

@media (max-width: 1240px) {
    .anounce__slider-box-item-title {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #5f5d5b;
        font-size: 34px;
        line-height: 34px
    }
}

.anounce__slider-box-item-title:not(:first-child) {
    margin-top: 5px
}

.anounce__slider-box-item-title.small {
    font-size: 24px;
    line-height: 24px
}

@media (max-width: 1240px) {
    .anounce__slider-box-item-title.small {
        font-size:20px;
        line-height: 20px
    }
}

.anounce__slider-box-item-title.gray {
    color: #a2a2a2
}

.anounce__slider-box-item-title.red {
    color: #ab5e37
}

.anounce__slider-box-item-text {
    font-weight: 400;
    color: #797979;
    font-size: 18px;
    line-height: 24px;
    max-height: calc( 24px * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

@media (max-width: 1240px) {
    .anounce__slider-box-item-text {
        font-weight:400;
        color: #797979;
        font-size: 16px;
        line-height: 20px;
        max-height: calc( 20px * 2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
}

@media (max-width: 760px) {
    .anounce__slider-box-item-text {
        width:100%;
        text-align: center
    }
}

.anounce__slider-box-item-text:not(:first-child) {
    margin-top: 20px
}

.anounce__slider-box-item-button {
    width: 220px;
    position: absolute;
    left: 50px;
    bottom: 40px;
    z-index: 4
}

@media (max-width: 1240px) {
    .anounce__slider-box-item-button {
        left:30px;
        bottom: 30px
    }
}

@media (max-width: 760px) {
    .anounce__slider-box-item-button {
        position:relative;
        left: auto;
        bottom: auto;
        margin: 20px auto 0
    }
}

.anounce__videos {
    width: 100%;
    position: relative;
    margin-top: 30px
}

.anounce__videos-box {
    width: 100%;
    overflow: hidden;
    border-radius: 20px
}

.anounce__videos-box-item {
    height: 170px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: .7;
    cursor: pointer
}

.anounce__videos-box-item:hover {
    opacity: 1
}

.anounce__videos-box-item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: right center;
    object-position: right center;
    z-index: 1
}

.anounce__videos-box-item .btn-play {
    z-index: 2
}

.anounce__videos-box-item:hover .btn-play {
    opacity: 1
}

.anounce__videos-box-item:hover .btn-play:before {
    -webkit-filter: brightness(120%) drop-shadow(0px 0px 30px #fff) drop-shadow(0px 0px 30px #fff);
    filter: brightness(120%) drop-shadow(0px 0px 30px #fff) drop-shadow(0px 0px 30px #fff);
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg)
}

.anounce__videos-box-item:hover .btn-play:after {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2)
}

.anounce__videos-next,.anounce__videos-prev {
    width: 30px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.anounce__videos-next {
    right: -40px
}

@media (max-width: 1500px) {
    .anounce__videos-next {
        right:-30px
    }
}

.anounce__videos-prev {
    left: -40px
}

@media (max-width: 1500px) {
    .anounce__videos-prev {
        left:-30px
    }
}

.widget-rating {
    width: calc(36% - 60px);
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: inset 0px 0px 40px #b4b4b4;
    box-shadow: inset 0px 0px 40px #b4b4b4;
    padding: 50px 40px 40px;
    position: relative;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

@media (max-width: 1500px) {
    .widget-rating {
        width:calc(36% - 30px)
    }
}

@media (max-width: 1240px) {
    .widget-rating {
        padding:50px 30px 30px
    }
}

@media (max-width: 1024px) {
    .widget-rating {
        width:100%;
        margin-top: 30px
    }
}

.widget-rating__switch {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px
}

.widget-rating__switch-button {
    padding: 5px 15px;
    background: #a9a8a2;
    border-radius: 5px;
    cursor: pointer
}

@media (max-width: 1240px) {
    .widget-rating__switch-button {
        padding:0px 10px 3px
    }
}

.widget-rating__switch-button span {
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase
}

@media (max-width: 1240px) {
    .widget-rating__switch-button span {
        font-size:12px;
        line-height: 12px
    }
}

.widget-rating__switch-button .hover-effect__background {
    background-color: #3a94a7
}

.widget-rating__content {
    width: 100%;
    position: relative;
    margin-top: 20px;
    overflow: hidden
}

.widget-rating__content-item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.widget-rating__content-item.active {
    position: relative;
    pointer-events: all;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 2
}

.widget-rating__tables {
    width: 100%;
    position: relative;
    overflow: hidden
}

.widget-rating__tables-item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.widget-rating__tables-item.active {
    position: relative;
    pointer-events: all;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 2
}

.widget-rating__table {
    width: 100%
}

.widget-rating__table-line {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 2px solid #eae9e9
}

.widget-rating__table-line--header .num,.widget-rating__table-line--header .icon,.widget-rating__table-line--header .name,.widget-rating__table-line--header .value {
    font-size: 12px !important;
    line-height: 12px !important;
    font-family: 'Intro' !important;
    color: #9d9999 !important
}

.widget-rating__table-column {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #646464;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase
}

@media (max-width: 1240px) {
    .widget-rating__table-column {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #646464;
        font-size: 16px;
        line-height: 16px
    }
}

.widget-rating__table-column.num {
    width: 30px
}

.widget-rating__table-column.icon {
    width: 50px;
    text-align: center
}

.widget-rating__table-column.icon img {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto
}

@media (max-width: 1240px) {
    .widget-rating__table-column.icon img {
        width:30px;
        height: 30px
    }
}

.widget-rating__table-column.name {
    width: calc(100% - 30px - 17px - 60px);
    padding-left: 20px;
    font-weight: 400;
    max-height: calc( 20px * 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

@media (max-width: 1240px) {
    .widget-rating__table-column.name {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #646464;
        font-size: 16px;
        line-height: 16px;
        max-height: calc( 16px * 1);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }
}

.widget-rating__table-column.value {
    text-align: center;
    color: #ab5e37
}

.widget-rating__switch-inner {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.widget-rating__switch-inner-button {
    text-align: center;
    padding: 0px 10px 3px;
    background: #a9a8a2;
    border-radius: 5px;
    cursor: pointer
}

.widget-rating__switch-inner-button span {
    color: #fff;
    font-size: 11px;
    line-height: 11px;
    text-transform: uppercase
}

.widget-rating__switch-name {
	padding-left: 40px;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #646464;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    padding-top: 10px;
}

.widget-rating__switch-pvp {
	font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    padding-top: 2px;
    text-align: right;
    margin-top: -21px;
    width: 85%;
    display: block;
}

.widget-rating__switch-inner-button .hover-effect__background {
    background-color: #3a94a7
}

.widget-rating__button {
    width: 220px;
    margin: 30px auto 0
}

.main-articles {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px
}

@media (max-width: 1500px) {
    .main-articles {
        gap:20px
    }
}

@media (max-width: 1024px) {
    .main-articles {
        -webkit-column-gap:20px;
        column-gap: 20px;
        row-gap: 40px
    }
}

.main-articles__item {
    width: calc((100% - (30px * 2)) / 100 * 30);
    position: relative;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    padding-top: 200px
}

@media (max-width: 1500px) {
    .main-articles__item {
        width:calc((100% - (20px * 2)) / 100 * 30)
    }
}

@media (max-width: 1240px) {
    .main-articles__item {
        padding-top:150px
    }
}

@media (max-width: 1024px) {
    .main-articles__item {
        width:calc((100% - (20px * 1)) / 100 * 50)
    }
}

@media (max-width: 760px) {
    .main-articles__item {
        width:100%
    }
}

.main-articles__item:first-child {
    width: calc((100% - (30px * 2)) / 100 * 40)
}

@media (max-width: 1500px) {
    .main-articles__item:first-child {
        width:calc((100% - (20px * 2)) / 100 * 40)
    }
}

@media (max-width: 1024px) {
    .main-articles__item:first-child {
        width:100%
    }
}

.main-articles__item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden
}

.main-articles__item-bg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    z-index: 1
}

.main-articles__item-bg:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(50%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%)
}

.main-articles__item-content {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 0px 30px 50px
}

.main-articles__item-title {
    text-align: center;
    text-transform: uppercase;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 28px;
    line-height: 28px;
    max-height: calc( 28px * 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

@media (max-width: 1240px) {
    .main-articles__item-title {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #ab5e37;
        font-size: 22px;
        line-height: 22px;
        max-height: calc( 22px * 1);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }
}

.main-articles__item-title a {
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.main-articles__item-title a:hover {
    color: #ce4264
}

.main-articles__item-text {
    font-weight: 400;
    color: #959595;
    font-size: 16px;
    line-height: 22px;
    max-height: calc( 22px * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    margin-top: 10px
}

@media (max-width: 1240px) {
    .main-articles__item-text {
        font-weight:400;
        color: #959595;
        font-size: 14px;
        line-height: 20px;
        max-height: calc( 20px * 2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
}

.main-articles__item-button {
    width: 220px;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%) translateY(50%);
    transform: translateX(-50%) translateY(50%)
}

.classes {
    width: 100%;
    padding: 250px 0;
    margin-top: -50px
}

@media (max-width: 1024px) {
    .classes {
        padding:100px 0px;
        margin-top: 0px
    }
}

.classes__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto
}

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

.classes__switch-box-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.classes__switch-box-item img {
    width: 100px;
    height: 100px;
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out
}

@media (max-width: 1024px) {
    .classes__switch-box-item img {
        width:70px;
        height: 70px
    }
}

.classes__switch-box-item.swiper-slide-visible {
    opacity: .6;
    pointer-events: all
}

.classes__switch-box-item.active img {
    -webkit-filter: drop-shadow(0px 0px 10px #88f793);
    filter: drop-shadow(0px 0px 10px #88f793)
}

.classes__switch-box-item.swiper-slide-visible.active {
    opacity: 1
}

.classes__switch-box-item:hover {
    opacity: 1
}

.classes__switch-box-item:hover img {
    -webkit-filter: drop-shadow(0px 0px 10px #88f793) brightness(120%);
    filter: drop-shadow(0px 0px 10px #88f793) brightness(120%)
}

.classes__switch-next,.classes__switch-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1 !important;
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out
}

@media (max-width: 1680px) {
    .classes__switch-next,.classes__switch-prev {
        width:40px
    }
}

.classes__switch-next:hover,.classes__switch-prev:hover {
    -webkit-filter: brightness(200%);
    filter: brightness(200%)
}

.classes__switch-next {
    right: -60px
}

@media (max-width: 1680px) {
    .classes__switch-next {
        right:-26px
    }
}

.classes__switch-prev {
    left: -60px
}

@media (max-width: 1680px) {
    .classes__switch-prev {
        left:-26px
    }
}

.classes__items {
    width: 100%;
    position: relative;
    margin-top: 80px
}

@media (max-width: 1024px) {
    .classes__items {
        margin-top:30px
    }
}

.classes__items-item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out
}

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

.classes__items-item-col {
    width: calc((100% - 200px) / 2);
    position: relative;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out
}

@media (max-width: 1240px) {
    .classes__items-item-col {
        width:calc((100% - 100px) / 2)
    }
}

@media (max-width: 1024px) {
    .classes__items-item-col {
        width:100%
    }
}

.classes__items-item-col:nth-child(1) {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px)
}

@media (max-width: 1024px) {
    .classes__items-item-col:nth-child(1) {
        margin-top:50px;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
}

.classes__items-item-col:nth-child(2) {
    width: 200px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    z-index: 2
}

@media (max-width: 1240px) {
    .classes__items-item-col:nth-child(2) {
        width:100px
    }
}

@media (max-width: 1024px) {
    .classes__items-item-col:nth-child(2) {
        width:100%;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        margin-top: -400px
    }
}

.classes__items-item-col:nth-child(3) {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    z-index: 1
}

@media (max-width: 1024px) {
    .classes__items-item-col:nth-child(3) {
        width:400px;
        height: 400px;
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        margin: 0 auto
    }
}

.classes__items-item.active .classes__items-item-col:nth-child(1) {
    -webkit-transform: translateX(0px);
    transform: translateX(0px)
}

.classes__items-item.active .classes__items-item-col:nth-child(2) {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.classes__items-item.active .classes__items-item-col:nth-child(3) {
    -webkit-transform: translateX(0px);
    transform: translateX(0px)
}

@media (max-width: 1240px) {
    .classes__items-item .btn-play {
        width:100px
    }
}

@media (max-width: 1024px) {
    .classes__items-item .btn-play {
        margin:0 auto
    }
}

.classes__items-item-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.classes__items-item-title img {
    width: 100px;
    height: 100px;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    margin-right: 20px
}

@media (max-width: 1240px) {
    .classes__items-item-title img {
        width:50px;
        height: 50px
    }
}

.classes__items-item-title span {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 64px;
    line-height: 64px;
    text-transform: uppercase;
    position: relative
}

@media (max-width: 1240px) {
    .classes__items-item-title span {
        font-size:34px;
        line-height: 34px
    }
}

.classes__items-item-title span:after {
    content: '';
    width: 205px;
    aspect-ratio: 205 / 24;
    position: absolute;
    top: 50%;
    left: calc(100% + 20px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width: 1240px) {
    .classes__items-item-title span:after {
        width:100px
    }
}

.classes__items-item-stats {
    width: 100%;
    margin-top: 50px
}

@media (max-width: 1024px) {
    .classes__items-item-stats {
        margin-top:30px
    }
}

.classes__items-item-stats-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.classes__items-item-stats-item:not(:first-child) {
    margin-top: 15px
}

.classes__items-item-stats-name {
    width: 160px;
    font-size: 18px;
    line-height: 18px;
    color: #fff
}

@media (max-width: 1024px) {
    .classes__items-item-stats-name {
        font-size:16px;
        line-height: 16px
    }
}

.classes__items-item-stats-progress {
    width: calc(100% - 240px);
    height: 3px;
    background: rgba(255,255,255,0.4);
    position: relative
}

@media (max-width: 1024px) {
    .classes__items-item-stats-progress {
        width:calc(100% - 160px)
    }
}

.classes__items-item-stats-progress span {
    height: 5px;
    width: 0%;
    position: absolute;
    top: -1px;
    left: 0;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px #fff;
    box-shadow: 0px 0px 10px #fff;
    border-radius: 5px
}

.classes__items-item-info {
    width: 100%;
    margin-top: 40px
}

.classes__items-item-info-title {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff4a9;
    font-size: 34px;
    line-height: 34px;
    text-transform: uppercase
}

.classes__items-item-info-text {
    margin-top: 20px;
    font-size: 18px;
    line-height: 24px;
    color: #fff
}

.classes__items-item-info-button {
    width: 250px;
    margin-top: 30px
}

.classes__items-item-char {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none
}

.classes__items-item-char-bg2 {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: rotating2 20s linear infinite;
    animation: rotating2 20s linear infinite;
    opacity: .8;
    z-index: 1
}

.classes__items-item-char-bg {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: rotating 20s linear infinite;
    animation: rotating 20s linear infinite;
    z-index: 2
}

.classes__items-item-char-img {
    width: 170%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 3
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes rotating {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@-webkit-keyframes rotating2 {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(-360deg);
        transform: translate(-50%, -50%) rotate(-360deg)
    }
}

@keyframes rotating2 {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(-360deg);
        transform: translate(-50%, -50%) rotate(-360deg)
    }
}

.infobox {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 70px
}

@media (max-width: 1240px) {
    .infobox {
        gap:30px
    }
}

@media (max-width: 760px) {
    .infobox {
        gap:20px
    }
}

.infobox__col {
    width: calc((100% - 70px) / 2);
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

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

@media (max-width: 760px) {
    .infobox__col {
        width:100%
    }
}

@media (max-width: 760px) {
    .infobox__col.player {
        -webkit-box-ordinal-group:0;
        -ms-flex-order: -1;
        order: -1
    }
}

.infobox__player {
    width: 100%;
    height: 400px;
    position: relative;
    cursor: pointer
}

@media (max-width: 1240px) {
    .infobox__player {
        height:300px
    }
}

@media (max-width: 760px) {
    .infobox__player {
        height:250px
    }
}

.infobox__player-content {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden
}

.infobox__player-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    z-index: 1;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out
}

.infobox__player .btn-play {
    width: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2
}

@media (max-width: 1240px) {
    .infobox__player .btn-play {
        width:100px
    }
}

.infobox__player:hover .infobox__player-preview {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.infobox__content {
    width: 100%;
    text-align: left
}

.infobox__content-title {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 36px;
    line-height: 48px;
    text-transform: uppercase
}

@media (max-width: 1240px) {
    .infobox__content-title {
        font-size:24px;
        line-height: 32px
    }
}

@media (max-width: 760px) {
    .infobox__content-title {
        font-size:20px;
        line-height: 26px;
        text-align: center
    }
}

.infobox__content-text {
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #959595
}

@media (max-width: 760px) {
    .infobox__content-text {
        margin-top:10px;
        text-align: center
    }
}

.infobox__content-text p:not(:first-child) {
    margin-top: 10px
}

.infobox__content-buttons {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px
}

@media (max-width: 1240px) {
    .infobox__content-buttons {
        margin-top:20px
    }
}

@media (max-width: 760px) {
    .infobox__content-buttons {
        -webkit-box-pack:center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.infobox__content-buttons .btn {
    width: 350px
}

@media (max-width: 1240px) {
    .infobox__content-buttons .btn {
        width:250px;
        height: 46px
    }

    .infobox__content-buttons .btn:after {
        background-size: auto 100%,auto 100%,calc(100% - 92px) 100%
    }

    .infobox__content-buttons .btn:before {
        width: 26px;
        top: -13px
    }

    .infobox__content-buttons .btn span {
        font-size: 16px;
        line-height: 16px;
        color: #fff
    }
}

.promo {
    width: 100%;
    padding: 200px 0px;
    margin-top: -200px
}

@media (max-width: 1024px) {
    .promo {
        padding:100px 0px;
        margin-top: -100px
    }
}

.promo__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto;
	padding-top: 100px;
}

.promotion {
    width: 100%;
    padding: 200px 0px;
    margin-top: -200px
}

@media (max-width: 1024px) {
    .promotion {
        margin-top: -100px
    }
}

.promotion__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 100px 0px 100px 150px
}

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

@media (max-width: 1024px) {
    .promotion__content {
        padding:0px 30px 0px 30px
    }
}

.promotion__content:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1
}

@media (max-width: 1024px) {
    .promotion__content:before {
        display:none
    }
}

.promotion__slider {
    width: calc((100% - 70px) / 2);
    position: relative;
    z-index: 3
}

@media (max-width: 1680px) {
    .promotion__slider {
        width:60%
    }
}

@media (max-width: 1024px) {
    .promotion__slider {
        width:100%;
        text-align: center;
        margin-top: -300px
    }
}

.promotion__slider-next,.promotion__slider-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width: 1680px) {
    .promotion__slider-next,.promotion__slider-prev {
        width:40px
    }
}

.promotion__slider-next {
    right: -90px
}

@media (max-width: 1680px) {
    .promotion__slider-next {
        right:-60px
    }
}

@media (max-width: 1024px) {
    .promotion__slider-next {
        right:-50px
    }
}

.promotion__slider-prev {
    left: -90px
}

@media (max-width: 1680px) {
    .promotion__slider-prev {
        left:-60px
    }
}

@media (max-width: 1024px) {
    .promotion__slider-prev {
        left:-50px
    }
}

.promotion__slider-box {
    overflow: hidden
}

.promotion__slider-box-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media (max-width: 1024px) {
    .promotion__slider-box-item {
        -webkit-box-pack:center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.promotion__slider-box-item-title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #898989;
    font-size: 50px;
    line-height: 50px;
    text-transform: uppercase
}

@media (max-width: 1680px) {
    .promotion__slider-box-item-title {
        font-size:30px;
        line-height: 30px
    }
}

@media (max-width: 1024px) {
    .promotion__slider-box-item-title {
        margin-top:10px;
        text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff
    }
}

.promotion__slider-box-item-sum {
    width: auto;
    padding: 20px 40px;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 90px;
    line-height: 90px;
    text-transform: uppercase;
    margin-top: 20px;
    border-radius: 10px
}

@media (max-width: 1680px) {
    .promotion__slider-box-item-sum {
        font-size:50px;
        line-height: 50px
    }
}

@media (max-width: 1024px) {
    .promotion__slider-box-item-sum {
        font-size:30px;
        line-height: 30px;
        padding: 20px 20px
    }
}

.promotion__slider-box-item-text {
    width: 100%;
    font-size: 18px;
    line-height: 24px;
    color: #959595;
    margin-top: 20px
}

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

.promotion__slider-box-item-button {
    width: 350px;
    margin-top: 40px
}

@media (max-width: 1024px) {
    .promotion__slider-box-item-button {
        width:250px;
        height: 46px;
        margin-top: 20px
    }

    .promotion__slider-box-item-button:after {
        background-size: auto 100%,auto 100%,calc(100% - 92px) 100%
    }

    .promotion__slider-box-item-button:before {
        width: 26px;
        top: -13px
    }

    .promotion__slider-box-item-button span {
        font-size: 16px;
        line-height: 16px
    }
}

.promotion__character {
    width: calc((100% - 70px) / 2);
    position: relative;
    pointer-events: none;
    z-index: 2
}

@media (max-width: 1680px) {
    .promotion__character {
        width:40%
    }
}

@media (max-width: 1024px) {
    .promotion__character {
        width:100%;
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.promotion__character img {
    width: 130%;
    position: absolute;
    top: 50%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media (max-width: 1024px) {
    .promotion__character img {
        position:relative;
        width: 600px;
        top: 0%;
        left: 0%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        margin: 0 auto
    }
}

.main-content {
    width: 100%;
    padding: 200px 0px;
    margin-top: -200px
}

@media (max-width: 1024px) {
    .main-content {
        padding:100px 0px;
        margin-top: -100px
    }
}

.main-content__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto;
    position: relative
}

.main-content__title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #626262;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase
}

@media (max-width: 1024px) {
    .main-content__title {
        font-size:30px;
        line-height: 30px
    }
}

.main-content__switch {
    width: 100%;
    height: 118px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 8px;
    margin-top: 50px
}

@media (max-width: 1024px) {
    .main-content__switch {
        height:80px;
        padding-top: 4px;
        margin-top: 30px
    }
}

.main-content__switch:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.main-content__switch:before {
    content: '';
    width: calc(100% - (116px * 2));
    height: 100%;
    position: absolute;
    top: 0;
    left: 116px;
    z-index: 2
}

@media (max-width: 1024px) {
    .main-content__switch:before {
        left:80px;
        width: calc(100% - (80px * 2))
    }
}

.main-content__switch-content {
    position: relative;
    width: calc(100% - 160px);
    z-index: 3
}

@media (max-width: 1024px) {
    .main-content__switch-content {
        width:calc(100% - 60px)
    }
}

.main-content__switch-next,.main-content__switch-prev {
    width: 40px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width: 1680px) {
    .main-content__switch-next,.main-content__switch-prev {
        width:40px
    }
}

@media (max-width: 1024px) {
    .main-content__switch-next,.main-content__switch-prev {
        width:30px
    }
}

.main-content__switch-next {
    right: -55px
}

@media (max-width: 1024px) {
    .main-content__switch-next {
        right:-20px
    }
}

.main-content__switch-prev {
    left: -55px
}

@media (max-width: 1024px) {
    .main-content__switch-prev {
        left:-20px
    }
}

.main-content__switch-box {
    height: 70px;
    overflow: hidden;
    -webkit-mask-box-image: linear-gradient(to right, transparent 0%, white 30px, white calc(100% - 30px), transparent 100%)
}

.main-content__switch-box .swiper-wrapper {
    min-width: 100%
}

.main-content__switch-box-item {
    text-align: center;
    width: auto;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0px 20px;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media (max-width: 1024px) {
    .main-content__switch-box-item {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #fff;
        font-size: 16px;
        line-height: 16px
    }
}

@media (max-width: 480px) {
    .main-content__switch-box-item {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #fff;
        font-size: 14px;
        line-height: 14px
    }
}

.main-content__switch-box-item span {
    position: relative;
    cursor: pointer;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.main-content__switch-box-item span p {
    position: relative;
    z-index: 2
}

.main-content__switch-box-item span:before {
    content: '';
    width: calc(100% + 60px);
    height: calc(100% + 50px);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.main-content__switch-box-item span:hover,.main-content__switch-box-item span.active {
    color: #d9c690
}

.main-content__switch-box-item span:hover:before,.main-content__switch-box-item span.active:before {
    opacity: .5
}

.main-content__items {
    width: 100%;
    position: relative
}

.main-content__items-item {
    width: 100%;
    padding: 50px 50px 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none
}

@media (max-width: 1024px) {
    .main-content__items-item {
        padding:30px 10px 0px
    }
}

.main-content__items-item.active {
    pointer-events: all;
    position: relative
}

.main-content__items-item .infobox__col {
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
    transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out, opacity .5s ease-in-out;
    transition: transform .5s ease-in-out, opacity .5s ease-in-out, -webkit-transform .5s ease-in-out
}

.main-content__items-item .infobox__col:nth-child(1) {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px)
}

.main-content__items-item .infobox__col:nth-child(2) {
    -webkit-transform: translateX(100px);
    transform: translateX(100px)
}

.main-content__items-item.active .infobox__col {
    opacity: 1
}

.main-content__items-item.active .infobox__col:nth-child(1) {
    -webkit-transform: translateX(0px);
    transform: translateX(0px)
}

.main-content__items-item.active .infobox__col:nth-child(2) {
    -webkit-transform: translateX(0px);
    transform: translateX(0px)
}

.features {
    width: 100%;
    padding: 200px 0px;
    margin-top: -200px;
    position: relative;
    z-index: 2
}

@media (max-width: 1024px) {
    .features {
        padding:100px 0px;
        margin-top: -100px
    }
}

.features__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto
}

.features__title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase
}

@media (max-width: 1024px) {
    .features__title {
        font-size:30px;
        line-height: 30px
    }
}

.features__slider {
    width: 100%;
    height: 500px;
    margin-top: 50px
}

@media (max-width: 1460px) {
    .features__slider {
        height:400px
    }
}

@media (max-width: 1024px) {
    .features__slider {
        margin-top:30px
    }
}

.features__slider-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden
}

.features__slider-box-item {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media (max-width: 1024px) {
    .features__slider-box-item {
        -webkit-box-pack:center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.features__slider-box-item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    z-index: 1
}

.features__slider-box-item:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: -webkit-gradient(linear, right top, left top, from(#fff), color-stop(50%, rgba(255,255,255,0.7)), color-stop(60%, rgba(255,255,255,0.2)), to(rgba(255,255,255,0)));
    background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%)
}

@media (max-width: 1460px) {
    .features__slider-box-item:after {
        background:-webkit-gradient(linear, right top, left top, from(#fff), color-stop(65%, rgba(255,255,255,0.7)), color-stop(80%, rgba(255,255,255,0.2)), to(rgba(255,255,255,0)));
        background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0) 100%)
    }
}

@media (max-width: 1024px) {
    .features__slider-box-item:after {
        background:-webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8)));
        background: linear-gradient(to left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%)
    }
}

.features__slider-box-item-content {
    width: 50%;
    position: relative;
    z-index: 3;
    padding: 0px 40px
}

@media (max-width: 1460px) {
    .features__slider-box-item-content {
        width:65%
    }
}

@media (max-width: 1024px) {
    .features__slider-box-item-content {
        width:100%;
        max-width: 600px
    }
}

.features__slider-box-item-title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 44px;
    line-height: 44px;
    max-height: calc( 44px * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-transform: uppercase
}

@media (max-width: 1460px) {
    .features__slider-box-item-title {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #ab5e37;
        font-size: 32px;
        line-height: 32px;
        max-height: calc( 32px * 2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
}

@media (max-width: 1024px) {
    .features__slider-box-item-title {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #ab5e37;
        font-size: 24px;
        line-height: 24px;
        max-height: calc( 24px * 2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center
    }
}

.features__slider-box-item-text {
    width: 100%;
    margin-top: 20px;
    font-weight: 400;
    color: #959595;
    font-size: 20px;
    line-height: 28px;
    max-height: calc( 28px * 5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical
}

@media (max-width: 1460px) {
    .features__slider-box-item-text {
        font-weight:400;
        color: #959595;
        font-size: 18px;
        line-height: 26px;
        max-height: calc( 26px * 5);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        margin-top: 10px
    }
}

@media (max-width: 1024px) {
    .features__slider-box-item-text {
        font-weight:400;
        color: #959595;
        font-size: 16px;
        line-height: 24px;
        max-height: calc( 24px * 5);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        text-align: center
    }
}

.features__slider-box-item .btn {
    width: 350px;
    margin-top: 40px
}

@media (max-width: 1460px) {
    .features__slider-box-item .btn {
        margin-top:30px
    }
}

@media (max-width: 1240px) {
    .features__slider-box-item .btn {
        width:250px;
        height: 46px
    }

    .features__slider-box-item .btn:after {
        background-size: auto 100%,auto 100%,calc(100% - 92px) 100%
    }

    .features__slider-box-item .btn:before {
        width: 26px;
        top: -13px
    }

    .features__slider-box-item .btn span {
        font-size: 16px;
        line-height: 16px;
        color: #fff
    }
}

@media (max-width: 1024px) {
    .features__slider-box-item .btn {
        margin-left:auto;
        margin-right: auto
    }
}

.features__thumbs {
    width: 100%;
    margin-top: 20px;
    position: relative
}

.features__thumbs-next,.features__thumbs-prev {
    position: absolute;
    top: calc(50% - 20px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1 !important;
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out
}

@media (max-width: 1680px) {
    .features__thumbs-next,.features__thumbs-prev {
        width:30px
    }
}

.features__thumbs-next:hover,.features__thumbs-prev:hover {
    -webkit-filter: brightness(200%);
    filter: brightness(200%)
}

.features__thumbs-next {
    right: -70px
}

@media (max-width: 1680px) {
    .features__thumbs-next {
        right:-30px
    }
}

.features__thumbs-prev {
    left: -70px
}

@media (max-width: 1680px) {
    .features__thumbs-prev {
        left:-30px
    }
}

.features__thumbs-box {
    overflow: hidden;
    border-radius: 20px
}

.features__thumbs-box-item {
    cursor: pointer;
    opacity: .5;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.features__thumbs-box-item:hover,.features__thumbs-box-item.swiper-slide-thumb-active {
    opacity: 1
}

.features__thumbs-box-item-img {
    width: 100%;
    aspect-ratio: 350 / 180;
    position: relative;
    overflow: hidden;
    border-radius: 20px
}

.features__thumbs-box-item-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.features__thumbs-box-item:hover .features__thumbs-box-item-img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.features__thumbs-box-item-text {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px
}

@media (max-width: 1460px) {
    .features__thumbs-box-item-text {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #fff;
        font-size: 20px;
        line-height: 20px
    }
}

@media (max-width: 1024px) {
    .features__thumbs-box-item-text {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #fff;
        font-size: 16px;
        line-height: 16px
    }
}

.socials {
    width: 100%;
    padding: 200px 0px;
    margin-top: -300px;
    position: relative;
    z-index: 1
}

@media (max-width: 1024px) {
    .socials {
        background-size:1920px auto;
        margin-bottom: -100px
    }
}

@media (max-width: 760px) {
    .socials {
        background-size:1100px auto;
        margin-top: -150px
    }
}

.socials__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto
}

.socials__items {
    margin: 260px auto 0px;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

@media (max-width: 1024px) {
    .socials__items {
        margin:150px auto 0px
    }
}

@media (max-width: 760px) {
    .socials__items {
        margin:0px auto 0px
    }
}

.socials__items-item {
    width: 240px;
    margin: 0px 20px;
    padding: 50px 0px 150px
}

@media (max-width: 1024px) {
    .socials__items-item {
        width:167px;
        padding: 50px 0px 110px
    }
}

@media (max-width: 760px) {
    .socials__items-item {
        width:120px;
        margin: 0px 0px;
        padding: 50px 0px 90px
    }
}

.socials__items-item img {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    -webkit-transition: -webkit-transform .3s ease-in-out, -webkit-filter .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out, -webkit-filter .3s ease-in-out;
    transition: transform .3s ease-in-out, filter .3s ease-in-out;
    transition: transform .3s ease-in-out, filter .3s ease-in-out, -webkit-transform .3s ease-in-out, -webkit-filter .3s ease-in-out
}

@media (max-width: 1024px) {
    .socials__items-item img {
        width:50px;
        height: 50px
    }
}

@media (max-width: 760px) {
    .socials__items-item img {
        width:30px;
        height: 30px
    }
}

.socials__items-item:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: drop-shadow(0px 10px 20px #fff);
    filter: drop-shadow(0px 10px 20px #fff)
}

.socials__items-item span {
    display: block;
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0,0,0,0.3);
    margin-top: 10px
}

@media (max-width: 1024px) {
    .socials__items-item span {
        font-size:14px;
        line-height: 14px
    }
}

@media (max-width: 760px) {
    .socials__items-item span {
        display:none
    }
}

.socials__info {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    position: relative
}

.socials__info-title {
    position: relative;
    z-index: 2;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 40px;
    line-height: 40px
}

@media (max-width: 1024px) {
    .socials__info-title {
        font-size:30px;
        line-height: 30px
    }
}

.socials__info-text {
    position: relative;
    z-index: 2;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #757575;
    font-size: 26px;
    line-height: 26px;
    margin-top: 10px
}

@media (max-width: 1024px) {
    .socials__info-text {
        font-size:18px;
        line-height: 18px
    }
}

.socials__info:after {
    content: '';
    width: 1020px;
    aspect-ratio: 1020 / 312;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none
}

.footer {
    width: 100%;
    position: relative;
    z-index: 2;
    padding-bottom: 50px
}

.footer__content {
    width: calc(100% - 60px);
    max-width: 1440px;
    margin: 0 auto;
    -webkit-column-gap: 30px;
    column-gap: 30px;
    row-gap: 50px
}

.footer__logo {
    width: 136px
}

@media (max-width: 1460px) {
    .footer__logo {
        width:200px
    }
}

@media (max-width: 1024px) {
    .footer__logo {
        width:100%
    }
}

.footer__logo img {
    width: 100%;
    max-width: 286px;
    opacity: .7
}

.footer__nav {
    list-style-type: none
}

@media (max-width: 1024px) {
    .footer__nav {
        width:calc((100% - 60px) / 3);
        text-align: center
    }
}

@media (max-width: 760px) {
    .footer__nav {
        width:100%
    }
}

.footer__nav li:not(:first-child) {
    margin-top: 7px
}

.footer__nav a {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #757575;
    font-size: 14px;
    line-height: 14px;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
    text-transform: uppercase
}

@media (max-width: 1460px) {
    .footer__nav a {
        font-size:12px;
        line-height: 12px
    }
}

.footer__nav a:hover {
    color: #ab5e37
}

.footer__cpr {
    width: 365px
}

@media (max-width: 1460px) {
    .footer__cpr {
        width:250px
    }
}

@media (max-width: 1024px) {
    .footer__cpr {
        width:100%;
        text-align: center
    }
}

.footer__cpr-title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase
}

@media (max-width: 1460px) {
    .footer__cpr-title {
        font-size:14px;
        line-height: 16px
    }
}

.footer__cpr-text {
    width: 100%;
    font-size: 10px;
    line-height: 14px;
    color: #757575;
    text-transform: uppercase;
    margin-top: 10px
}

.footer__cpr .unsimple {
    margin-top: 20px
}

@media (max-width: 1024px) {
    .footer__cpr .unsimple {
        margin:20px auto 0px
    }
}

.unsimple {
    width: 183px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: .7;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.unsimple:hover {
    opacity: 1
}

.unsimple img {
    margin-right: 10px
}

.unsimple span {
    font-size: 12px;
    line-height: 18px;
    color: #757575
}

.unsimple span b {
    text-transform: uppercase;
    font-weight: 500
}

.video-wnd {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(255,255,255,0.82);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.video-wnd.active {
    opacity: 1;
    pointer-events: auto
}

.video-wnd__box {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1 / .56;
    position: relative;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: auto
}

.video-wnd__navigation {
    width: 100%;
    margin-top: auto;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.video-wnd__cancel {
    width: 34px;
    height: 34px;
    -webkit-transition: -webkit-transform .5s ease-in-out, -webkit-box-shadow .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out, -webkit-box-shadow .5s ease-in-out;
    transition: transform .5s ease-in-out, box-shadow .5s ease-in-out;
    transition: transform .5s ease-in-out, box-shadow .5s ease-in-out, -webkit-transform .5s ease-in-out, -webkit-box-shadow .5s ease-in-out;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #ce4264;
    border-radius: 50%
}

.video-wnd__cancel:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-box-shadow: 0px 0px 20px #ce4264;
    box-shadow: 0px 0px 20px #ce4264
}

.video-wnd__cancel img {
    width: 20px
}

.inner-page {
    width: 100%;
    background: #ffffff;
    margin-bottom: 80px;
    border-radius: 20px
}

.inner-page__title {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 30px 50px
}

.inner-page__title h1 {
    width: auto;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #b59f7c;
    font-size: 34px;
    line-height: 34px;
    text-transform: uppercase;
    position: relative;
    text-align: center
}

@media (max-width: 1240px) {
    .inner-page__title h1 {
        font-size:24px;
        line-height: 24px
    }
}

.inner-page__title h1:after,.inner-page__title h1:before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc((100% - 18px) / 2);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}

@media (max-width: 1240px) {
    .inner-page__title h1:after,.inner-page__title h1:before {
        width:12px;
        height: 12px;
        top: calc((100% - 12px) / 2);
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px)
    }
}

.inner-page__title h1:before {
    right: calc(100% + 15px)
}

.inner-page__title h1:after {
    left: calc(100% + 15px)
}

.inner-page__title span {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
    color: #a9a8a2;
    text-align: center;
    margin-top: 5px
}

.inner-page__content {
    width: 100%;
    padding: 30px;
    padding-top: 0px
}

.start {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px
}

.start__col {
    width: calc((100% - 30px) / 2);
    padding: 30px 0px;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

.start__about {
   width: 200%;
    padding: 30px 0px;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
	font-size: 16px;
    line-height: 22px;
    color: #959595;
}

.start__box-about
{
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 24px;
    line-height: 32px;
}


@media (max-width: 1024px) {
    .start__col {
        width:100%;
        padding: 0px 0px
    }
}

.start__col--has-background {
    border-radius: 20px;
    border: 5px solid #f5f5f5;
    position: relative;
    padding: 30px
}

.start__col--has-background:after {
    content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background: #f5f5f5;
    border-radius: 14px;
    z-index: 1 !important
}

.start__col--has-background>* {
    position: relative;
    z-index: 2
}

.start__box {
    width: 100%
}

.start__box:not(:last-child) {
    border-bottom: 2px solid #d8d8d8;
    padding-bottom: 30px
}

.start__box:not(:first-child) {
    padding-top: 25px
}

.start__box-title {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 24px;
    line-height: 32px;
    text-transform: uppercase
}

@media (max-width: 1240px) {
    .start__box-title {
        font-size:20px;
        line-height: 26px
    }
}

@media (max-width: 1024px) {
    .start__box-title {
        font-size:18px;
        line-height: 24px
    }
}

.start__box-title.light {
    color: #959595
}

.start__box-text {
    font-size: 16px;
    line-height: 22px;
    color: #959595;
    margin-top: 10px
}

@media (max-width: 1024px) {
    .start__box-text {
        font-size:14px;
        line-height: 20px
    }
}

.start__box-text.dark {
    color: #5d5d5d
}

.start__box-links {
    font-size: 16px;
    line-height: 22px;
    color: #959595;
    margin-top: 10px
}

@media (max-width: 1024px) {
    .start__box-links {
        font-size:14px;
        line-height: 20px
    }
}

.start__box-links ul {
    list-style-type: none
}

.start__box-links ul li:not(:last-child) {
    margin-bottom: 5px
}

.start__box-links ul li a {
    font-size: 16px;
    line-height: 22px;
    color: #959595;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

@media (max-width: 1024px) {
    .start__box-links ul li a {
        font-size:14px;
        line-height: 20px
    }
}

.start__box-links ul li a:hover {
    color: #ab5e37
}

.start__box-buttons {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

.start__box-button {
    width: 280px
}

.start__box-drivers {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

.start__box-drivers-item {
    width: calc((100% - 10px) / 2);
    padding: 30px 20px;
    border-radius: 12px;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

.start__box-drivers-item:first-child {
    width: 100%
}

.start__box-drivers-item.nvidia {
    border: 3px solid #b1d899
}

.start__box-drivers-item.nvidia:hover {
    background-color: rgba(177,216,153,0.3)
}

.start__box-drivers-item.amd {
    border: 3px solid #b3efde
}

.start__box-drivers-item.amd:hover {
    background-color: rgba(179,239,222,0.3)
}

.start__box-drivers-item.directx {
    border: 3px solid #efdbb3
}

.start__box-drivers-item.directx:hover {
    background-color: rgba(239,219,179,0.3)
}

.start__box-drivers-item-img {
    width: 100%;
    height: 32px;
    position: relative
}

.start__box-drivers-item-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center
}

.start__slider {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.start__slider-next,.start__slider-prev {
    width: 34px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1 !important;
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out
}

.start__slider-next:hover,.start__slider-prev:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%)
}

.start__slider-next {
    right: -40px
}

.start__slider-prev {
    left: -40px
}

.start__slider-box {
    width: 100%;
    overflow: hidden
}

.start__slider-box-item {
    padding: 30px 20px;
    border-radius: 12px;
    border: 3px solid #eae7e7;
    -webkit-transition: border .3s ease-in-out;
    transition: border .3s ease-in-out
}

.start__slider-box-item:hover {
    border: 3px solid #ac4e7f
}

.start__slider-box-item-img {
    width: 100%;
    height: 32px;
    position: relative;
	text-align: center;
}

.start__slider-box-item-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center
}

.start .table {
    margin-top: 20px
}

.start .table__body {
    min-width: 600px
}

.rating {
    width: 100%
}

.rating__header {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 40px 40px;
    gap: 15px
}

@media (max-width: 1024px) {
    .rating__header {
        padding:30px 30px
    }
}

.rating__header-title h1 {
    width: auto;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #b59f7c;
    font-size: 34px;
    line-height: 34px;
    text-transform: uppercase;
    position: relative
}

@media (max-width: 1240px) {
    .rating__header-title h1 {
        font-size:24px;
        line-height: 24px
    }
}

.rating__header-title span {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #a9a8a2;
    text-align: center;
    margin-top: 5px;
    text-transform: uppercase
}

.rating__header-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px
}

.rating__header-switch-button {
    height: 38px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0px 20px;
    background: #a9a8a2;
    border-radius: 5px;
    cursor: pointer
}

.rating__header-switch-button span {
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase
}

.rating__header-switch-button .hover-effect__background {
    background-color: #3a94a7
}

.rating__header-search {
    width: 260px;
    height: 38px;
    background: #e8efef;
    border-radius: 5px;
    padding: 5px
}

.rating__header-search form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.rating__header-search input {
    width: calc(100% - 28px);
    height: 28px;
    background: none;
    font-family: 'Intro';
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #666675;
    padding: 0px 10px
}

.rating__header-search button {
    width: 28px;
    height: 28px;
    background-color: #3a94a7;
    border-radius: 3px;
    outline: none;
    border: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

.rating__header-search button:hover {
    background-color: #41b5cc
}

.rating__content {
    width: calc(100% - 80px);
    margin: 0 auto;
    margin-bottom: 40px;
    position: relative
}

@media (max-width: 1024px) {
    .rating__content {
        width:calc(100% - 60px);
        margin-bottom: 30px
    }
}

.rating__content-item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    z-index: 1;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.rating__content-item.active {
    position: relative;
    pointer-events: all;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 2
}

.rating__content-item .table__body {
    min-width: 1100px
}

.rating__content-item .table__tr--header .table__td {
    padding: 20px 10px !important
}

.rating__content-item .table__td {
    min-height: 52px;
    padding: 10px !important;
    font-size: 14px;
    line-height: 14px
}

.rating__content-item[data-name-tab=players] .table__td,.rating__content-item[data-name-tab=marathons] .table__td {
    width: calc((100% - 20px - 60px - 80px - 180px - 80px - 150px - 60px - 100px) / 4)
}

.rating__content-item[data-name-tab=players] .table__td.num,.rating__content-item[data-name-tab=marathons] .table__td.num {
    width: 60px
}

.rating__content-item[data-name-tab=players] .table__td.class,.rating__content-item[data-name-tab=marathons] .table__td.class {
    width: 80px
}

.rating__content-item[data-name-tab=players] .table__td.character,.rating__content-item[data-name-tab=marathons] .table__td.character {
    width: 180px
}

.rating__content-item[data-name-tab=players] .table__td.weapon,.rating__content-item[data-name-tab=marathons] .table__td.weapon {
    width: 80px
}

.rating__content-item[data-name-tab=players] .table__td.xpmp,.rating__content-item[data-name-tab=marathons] .table__td.xpmp {
    width: 150px
}

.rating__content-item[data-name-tab=players] .table__td.lvl,.rating__content-item[data-name-tab=marathons] .table__td.lvl {
    width: 60px
}

.rating__content-item[data-name-tab=players] .table__td.respect,.rating__content-item[data-name-tab=marathons] .table__td.respect {
    width: 100px
}

.rating__content-item[data-name-tab=guilds] .table__td {
    width: calc((100% - 12px - 60px) / 6)
}

.rating__content-item[data-name-tab=guilds] .table__td.num {
    width: 60px
}

.rating__content-item[data-name-tab=arena] .table__td {
    width: calc((100% - 12px - 60px - 80px) / 5)
}

.rating__content-item[data-name-tab=arena] .table__td.num {
    width: 60px
}

.rating__content-item[data-name-tab=arena] .table__td.command-falg {
    width: 80px
}

.rating__pagination {
    width: 100%;
    border-radius: 5px;
    background: #8ec2cc;
    padding: 15px;
    margin-top: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px
}

.rating__pagination-item {
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
    color: #fff
}

.rating__pagination-item:not(.arrow) {
    padding: 0px 10px;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

.rating__pagination-item:not(.arrow):hover {
    background-color: #78a6af
}

.rating__pagination-item:not(.arrow).active {
    background-color: #93d8e5
}

.rating__pagination-item.arrow {
    opacity: .6;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.rating__pagination-item.arrow:hover {
    opacity: 1
}

.rating__pagination-item.arrow img {
    height: 30px;
    -webkit-filter: brightness(200%);
    filter: brightness(200%)
}

.table {
    width: 100%;
    overflow-x: auto;
    border-radius: 5px;
    padding-bottom: 2px
}

.table::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f5f5f5
}

.table::-webkit-scrollbar-thumb {
    background-color: #8ec2cc
}

.table::-webkit-scrollbar-thumb:hover {
    background-color: #8ec2cc
}

.table__body {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2px
}

.table__tr {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2px
}

.table__tr--header {
    background: #8ec2cc;
    border-radius: 5px
}

.table__tr--header .table__td {
    background: none !important;
    color: #fff !important
}

.table__tr:nth-child(odd) .table__td:nth-child(even) {
    background: #e9f3f4
}

.table__tr:nth-child(odd) .table__td:nth-child(odd) {
    background: #edf5f7
}

.table__td {
    width: 100%;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    padding: 13px 20px 11px;
    border-radius: 5px;
    font-size: 15px;
    line-height: 19px;
    color: #646464
}

@media (max-width: 1024px) {
    .table__td {
        font-size:14px;
        line-height: 18px
    }
}

.table__td:nth-child(even) {
    background: #e8efef
}

.table__td:nth-child(odd) {
    background: #f5f5f5
}

.table__td--accent {
    color: #4797a7
}

.table__td .red {
    color: #ff6060
}

.table__td .blue {
    color: #3a80ff
}

.table__td .green {
    color: #469141
}

.table__td-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    position: relative
}

.table__td-icon img {
    width: 36px;
    position: absolute;
    left: -2px;
    top: -2px
}

.table__td--1-1 {
    width: calc((100% - (2px * (1 - 1))) / 1 * 1 + 2px * (1 - 1))
}

.table__td--1-2 {
    width: calc((100% - (2px * (2 - 1))) / 2 * 1 + 2px * (1 - 1))
}

.table__td--1-3 {
    width: calc((100% - (2px * (3 - 1))) / 3 * 1 + 2px * (1 - 1))
}

.table__td--1-4 {
    width: calc((100% - (2px * (4 - 1))) / 4 * 1 + 2px * (1 - 1))
}

.table__td--1-5 {
    width: calc((100% - (2px * (5 - 1))) / 5 * 1 + 2px * (1 - 1))
}

.table__td--1-6 {
    width: calc((100% - (2px * (6 - 1))) / 6 * 1 + 2px * (1 - 1))
}

.table__td--1-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 1 + 2px * (1 - 1))
}

.table__td--1-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 1 + 2px * (1 - 1))
}

.table__td--1-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 1 + 2px * (1 - 1))
}

.table__td--1-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 1 + 2px * (1 - 1))
}

.table__td--1-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 1 + 2px * (1 - 1))
}

.table__td--2-2 {
    width: calc((100% - (2px * (2 - 1))) / 2 * 2 + 2px * (2 - 1))
}

.table__td--2-3 {
    width: calc((100% - (2px * (3 - 1))) / 3 * 2 + 2px * (2 - 1))
}

.table__td--2-4 {
    width: calc((100% - (2px * (4 - 1))) / 4 * 2 + 2px * (2 - 1))
}

.table__td--2-5 {
    width: calc((100% - (2px * (5 - 1))) / 5 * 2 + 2px * (2 - 1))
}

.table__td--2-6 {
    width: calc((100% - (2px * (6 - 1))) / 6 * 2 + 2px * (2 - 1))
}

.table__td--2-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 2 + 2px * (2 - 1))
}

.table__td--2-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 2 + 2px * (2 - 1))
}

.table__td--2-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 2 + 2px * (2 - 1))
}

.table__td--2-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 2 + 2px * (2 - 1))
}

.table__td--2-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 2 + 2px * (2 - 1))
}

.table__td--3-3 {
    width: calc((100% - (2px * (3 - 1))) / 3 * 3 + 2px * (3 - 1))
}

.table__td--3-4 {
    width: calc((100% - (2px * (4 - 1))) / 4 * 3 + 2px * (3 - 1))
}

.table__td--3-5 {
    width: calc((100% - (2px * (5 - 1))) / 5 * 3 + 2px * (3 - 1))
}

.table__td--3-6 {
    width: calc((100% - (2px * (6 - 1))) / 6 * 3 + 2px * (3 - 1))
}

.table__td--3-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 3 + 2px * (3 - 1))
}

.table__td--3-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 3 + 2px * (3 - 1))
}

.table__td--3-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 3 + 2px * (3 - 1))
}

.table__td--3-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 3 + 2px * (3 - 1))
}

.table__td--3-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 3 + 2px * (3 - 1))
}

.table__td--4-4 {
    width: calc((100% - (2px * (4 - 1))) / 4 * 4 + 2px * (4 - 1))
}

.table__td--4-5 {
    width: calc((100% - (2px * (5 - 1))) / 5 * 4 + 2px * (4 - 1))
}

.table__td--4-6 {
    width: calc((100% - (2px * (6 - 1))) / 6 * 4 + 2px * (4 - 1))
}

.table__td--4-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 4 + 2px * (4 - 1))
}

.table__td--4-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 4 + 2px * (4 - 1))
}

.table__td--4-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 4 + 2px * (4 - 1))
}

.table__td--4-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 4 + 2px * (4 - 1))
}

.table__td--4-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 4 + 2px * (4 - 1))
}

.table__td--5-5 {
    width: calc((100% - (2px * (5 - 1))) / 5 * 5 + 2px * (5 - 1))
}

.table__td--5-6 {
    width: calc((100% - (2px * (6 - 1))) / 6 * 5 + 2px * (5 - 1))
}

.table__td--5-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 5 + 2px * (5 - 1))
}

.table__td--5-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 5 + 2px * (5 - 1))
}

.table__td--5-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 5 + 2px * (5 - 1))
}

.table__td--5-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 5 + 2px * (5 - 1))
}

.table__td--5-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 5 + 2px * (5 - 1))
}

.table__td--6-6 {
    width: calc((100% - (2px * (6 - 1))) / 6 * 6 + 2px * (6 - 1))
}

.table__td--6-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 6 + 2px * (6 - 1))
}

.table__td--6-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 6 + 2px * (6 - 1))
}

.table__td--6-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 6 + 2px * (6 - 1))
}

.table__td--6-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 6 + 2px * (6 - 1))
}

.table__td--6-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 6 + 2px * (6 - 1))
}

.table__td--7-7 {
    width: calc((100% - (2px * (7 - 1))) / 7 * 7 + 2px * (7 - 1))
}

.table__td--7-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 7 + 2px * (7 - 1))
}

.table__td--7-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 7 + 2px * (7 - 1))
}

.table__td--7-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 7 + 2px * (7 - 1))
}

.table__td--7-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 7 + 2px * (7 - 1))
}

.table__td--8-8 {
    width: calc((100% - (2px * (8 - 1))) / 8 * 8 + 2px * (8 - 1))
}

.table__td--8-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 8 + 2px * (8 - 1))
}

.table__td--8-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 8 + 2px * (8 - 1))
}

.table__td--8-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 8 + 2px * (8 - 1))
}

.table__td--9-9 {
    width: calc((100% - (2px * (9 - 1))) / 9 * 9 + 2px * (9 - 1))
}

.table__td--9-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 9 + 2px * (9 - 1))
}

.table__td--9-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 9 + 2px * (9 - 1))
}

.table__td--10-10 {
    width: calc((100% - (2px * (10 - 1))) / 10 * 10 + 2px * (10 - 1))
}

.table__td--10-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 10 + 2px * (10 - 1))
}

.table__td--11-11 {
    width: calc((100% - (2px * (11 - 1))) / 11 * 11 + 2px * (11 - 1))
}

.spoiler {
    width: 100%;
    margin-top: 15px
}

.spoiler__title {
    width: 100%;
    padding: 15px 40px 13px 20px;
    background-color: #9a8ecc;
    font-family: 'Angelus Medieval';
    text-transform: uppercase;
    font-size: 18px;
    line-height: 18px;
    color: #fff;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

@media (max-width: 1240px) {
    .spoiler__title {
        font-size:16px;
        line-height: 16px
    }
}

.spoiler__title:hover {
    background-color: #8276b1
}

.spoiler__title:before {
    content: '';
    display: block;
    width: 19px;
    height: 13px;
    position: absolute;
    top: calc((100% - 13px) / 2);
    right: 20px;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.spoiler--green .spoiler__title {
    background-color: #adcc8e
}

.spoiler--green .spoiler__title:hover {
    background-color: #92af75
}

.spoiler.active>.spoiler__title:before {
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

.spoiler__content {
    width: 100%;
    padding-top: 15px;
    display: none
}

.tooltip {
    width: 280px;
    position: fixed;
    top: 0px;
    left: 0px;
    height: auto;
    padding: 15px;
    background: rgba(53,57,58,0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 5px;
    z-index: 9999;
    display: none;
    pointer-events: none;
    border: 1px solid rgba(142,149,150,0.5);
    -webkit-box-shadow: 0px 10px 20px rgba(114,121,122,0.5);
    box-shadow: 0px 10px 20px rgba(114,121,122,0.5)
}

@media (max-width: 760px) {
    .tooltip {
        display:none !important
    }
}

.tooltip--character {
    width: 380px
}

.tooltip>*:not(:first-child) {
    margin-top: 15px
}

.tooltip__title {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #f1dd74;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase
}

.tooltip__text {
    width: 100%
}

.tooltip__text p {
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    color: #ece8e6
}

.tooltip__text p:not(:last-child) {
    margin-bottom: 10px
}

.tooltip__table {
    width: 100%;
    font-size: 12px;
    line-height: 12px;
    color: #ece8e6;
    position: relative
}

.tooltip__table-tr {
    width: 100%;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.tooltip__table-tr:not(:last-child) {
    margin-bottom: 5px
}

.tooltip__table-td:first-child {
    margin-right: 5px
}

.tooltip__table-td:last-child {
    margin-left: 5px
}

.tooltip hr {
    border: none;
    border-bottom: 1px solid rgba(142,149,150,0.5);
    margin-left: -15px;
    margin-right: -15px
}

.tooltip__cols {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

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

.tooltip__gender {
    width: 115px;
    aspect-ratio: 79 / 150;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.tooltip .violet {
    color: #a19bff
}

.tooltip .green {
    color: #b9e7b6
}

.tooltip .yellow {
    color: #f7e18c
}

.tooltip .red {
    color: #ff9898
}

.tooltip .blue {
    color: #93b9ff
}

.articles {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px
}

.articles__aside {
    width: 350px;
    border-radius: 20px;
    border: 5px solid #f5f5f5;
    position: relative;
    padding: 30px;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

@media (max-width: 1240px) {
    .articles__aside {
        width:280px
    }
}

@media (max-width: 1024px) {
    .articles__aside {
        width:100%
    }
}

.articles__aside:after {
    content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background: #f5f5f5;
    border-radius: 14px;
    z-index: 1 !important
}

.articles__aside>* {
    position: relative;
    z-index: 2
}

.articles__aside-nav {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0
}

.articles__aside-nav-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.articles__aside-nav-item:not(:last-child) {
    margin-bottom: 4px
}

.articles__aside-nav-item a {
    display: block;
    width: 100%;
    background-color: #e9ecef;
    border: 1px solid #e9ecef;
    padding: 15px 15px;
    border-radius: 5px;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #666;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: background-color .3s ease-in-out, border .3s ease-in-out;
    transition: background-color .3s ease-in-out, border .3s ease-in-out
}

.articles__aside-nav-item a:hover {
    background-color: #fff;
    border: 1px solid #f5deb8
}

.articles__aside-nav-item a span {
    display: block;
    -webkit-transition: color .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: color .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: color .3s ease-in-out, transform .3s ease-in-out;
    transition: color .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.articles__aside-nav-item a:hover span {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    color: #b59f7c
}

.articles__aside-nav-item a:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: calc((100% - 14px) / 2);
    left: 15px;
    -webkit-transform: translateY(-1px) translateX(-20px);
    transform: translateY(-1px) translateX(-20px);
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    pointer-events: none
}

.articles__aside-nav-item a:hover:before {
    -webkit-transform: translateY(-1px) translateX(0px);
    transform: translateY(-1px) translateX(0px);
    opacity: 1
}

.articles__aside-nav-item.active a {
    background-color: #fff;
    border: 1px solid #f5deb8
}

.articles__aside-nav-item.active a span {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    color: #b59f7c
}

.articles__aside-nav-item.active a:before {
    -webkit-transform: translateY(-1px) translateX(0px);
    transform: translateY(-1px) translateX(0px);
    opacity: 1
}

.articles__search {
    width: 100%;
    height: 38px;
    background: #e2e5e7;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 30px
}

.articles__search form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.articles__search input {
    width: calc(100% - 28px);
    height: 28px;
    background: none;
    font-family: 'Intro';
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #666675;
    padding: 0px 10px
}

.articles__search button {
    width: 28px;
    height: 28px;
    background-color: #3a94a7;
    border-radius: 3px;
    outline: none;
    border: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

.articles__search button:hover {
    background-color: #41b5cc
}

.articles__content {
    width: calc( 100% - 30px - 350px);
    padding: 30px 0px;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

@media (max-width: 1240px) {
    .articles__content {
        width:calc( 100% - 30px - 280px)
    }
}

@media (max-width: 1024px) {
    .articles__content {
        width:100%;
        padding: 0px 0px
    }
}

.articles__breadcrumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 30px;
    column-gap: 30px;
    row-gap: 10px;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #9e9e9e;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    text-decoration: underline
}

.articles__breadcrumbs-item {
    position: relative
}

.articles__breadcrumbs-item:not(:last-child):after {
    content: '';
    width: 13px;
    height: 7px;
    position: absolute;
    top: calc( ( 100% - 8px ) / 2);
    left: calc( 100% + 9px);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.articles__breadcrumbs-item a {
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.articles__breadcrumbs-item:hover a,.articles__breadcrumbs-item.active a {
    color: #b59f7c
}

.articles__stroke {
    width: 100%;
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

@media (max-width: 1024px) {
    .articles__stroke {
        margin-top:20px
    }
}

.articles__stroke-item {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #f5f5f5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

.articles__stroke-item-img {
    width: 210px;
    aspect-ratio: 1 / 1;
    position: relative
}

@media (max-width: 1024px) {
    .articles__stroke-item-img {
        width:160px
    }
}

@media (max-width: 760px) {
    .articles__stroke-item-img {
        width:100%;
        aspect-ratio: 2 / 1
    }
}

.articles__stroke-item-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: 14px
}

.articles__stroke-item-content {
    width: calc( 100% - 210px - 20px)
}

@media (max-width: 1024px) {
    .articles__stroke-item-content {
        width:calc( 100% - 160px - 20px)
    }
}

@media (max-width: 760px) {
    .articles__stroke-item-content {
        width:100%
    }
}

.articles__stroke-item-title {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 26px;
    line-height: 30px;
    text-transform: uppercase
}

@media (max-width: 1024px) {
    .articles__stroke-item-title {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #ab5e37;
        font-size: 20px;
        line-height: 24px
    }
}

.articles__stroke-item-title a {
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.articles__stroke-item-title a:hover {
    color: #ce4264
}

.articles__stroke-item-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    row-gap: 10px;
    font-size: 14px;
    line-height: 14px;
    color: #bbb8b8;
    margin-top: 15px
}

.articles__stroke-item-info a {
    color: #9e9e9e;
    text-decoration: underline;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.articles__stroke-item-info a:hover {
    color: #ce4264
}

.articles__stroke-item-text {
    font-weight: 400;
    color: #979595;
    font-size: 16px;
    line-height: 22px;
    max-height: calc( 22px * 3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 15px
}

@media (max-width: 1024px) {
    .articles__stroke-item-text {
        font-weight:400;
        color: #979595;
        font-size: 14px;
        line-height: 20px;
        max-height: calc( 20px * 3);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }
}

.articles__stroke-item-footer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px
}

.articles__stroke-item-footer .btn {
    width: 220px
}

.articles__stroke-item-author {
    font-size: 12px;
    line-height: 12px;
    color: #979595
}

.articles__stroke-item-forum,.articles__stroke-item-likes {
    font-size: 12px;
    line-height: 12px
}

.articles__stroke-item-forum i.fa-message,.articles__stroke-item-likes i.fa-message {
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}

.articles__stroke-item-forum a,.articles__stroke-item-likes a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    color: #777575;
    background-color: #f0f0f0;
    padding: 10px 14px;
    border-radius: 20px;
    -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
    transition: color .3s ease-in-out, background-color .3s ease-in-out
}

.articles__stroke-item-forum a:hover,.articles__stroke-item-likes a:hover {
    color: #ce4264;
    background-color: #fadde4
}

.articles .rating__pagination {
    border-radius: 20px;
    margin-top: 20px
}

.articles__full-item {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #f5f5f5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px
}

.articles__full-item-img {
    width: 100%;
    aspect-ratio: 3 / 1;
    position: relative
}

.articles__full-item-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: 14px
}

.articles__full-item-content {
    width: 100%
}

.articles__full-item-title {
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #ab5e37;
    font-size: 26px;
    line-height: 30px;
    text-transform: uppercase
}

@media (max-width: 1024px) {
    .articles__full-item-title {
        font-family:"Angelus Medieval";
        font-weight: 400;
        color: #ab5e37;
        font-size: 20px;
        line-height: 24px
    }
}

.articles__full-item-title a {
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.articles__full-item-title a:hover {
    color: #ce4264
}

.articles__full-item-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    row-gap: 10px;
    font-size: 14px;
    line-height: 14px;
    color: #bbb8b8;
    margin-top: 15px
}

.articles__full-item-info a {
    color: #9e9e9e;
    text-decoration: underline;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.articles__full-item-info a:hover {
    color: #ce4264
}

.articles__full-item-text {
    font-weight: 400;
    color: #979595;
    font-size: 16px;
    line-height: 22px;
    margin-top: 15px
}

@media (max-width: 1024px) {
    .articles__full-item-text {
        font-weight:400;
        color: #979595;
        font-size: 14px;
        line-height: 20px
    }
}

.articles__full-item-text p:not(:last-child) {
    margin-bottom: 10px
}

.articles__full-item-footer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px
}

.articles__full-item-footer .btn {
    width: 220px
}

.articles__full-item-forum,.articles__full-item-likes {
    font-size: 12px;
    line-height: 12px
}

.articles__full-item-forum i.fa-message,.articles__full-item-likes i.fa-message {
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}

.articles__full-item-forum a,.articles__full-item-likes a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    color: #777575;
    background-color: #f0f0f0;
    padding: 10px 14px;
    border-radius: 20px;
    -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
    transition: color .3s ease-in-out, background-color .3s ease-in-out
}

.articles__full-item-forum a:hover,.articles__full-item-likes a:hover {
    color: #ce4264;
    background-color: #fadde4
}

.preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.9);
    z-index: 9999;
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out
}

.preloader.preloader--hidden {
    opacity: 0;
    pointer-events: none
}

.preloader__content {
    width: 100%
}

.preloader__content .header__logo {
    width: 300px;
    pointer-events: none;
    z-index: 1
}

.preloader__loading {
    width: 100%;
    font-family: "Angelus Medieval";
    font-weight: 400;
    color: #895558;
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 10px;
    position: relative;
    z-index: 2
}

.preloader__loading span {
    position: relative
}

.preloader__loading span:after {
    position: absolute;
    top: 2px;
    left: calc( 100% + 3px);
    content: '.';
    -webkit-animation: loading 1s ease-in-out infinite;
    animation: loading 1s ease-in-out infinite
}

@-webkit-keyframes loading {
    from {
        content: '.'
    }

    33% {
        content: '..'
    }

    66% {
        content: '...'
    }

    to {
        content: '.'
    }
}

@keyframes loading {
    from {
        content: '.'
    }

    33% {
        content: '..'
    }

    66% {
        content: '...'
    }

    to {
        content: '.'
    }
}

.no-webp .btn:after {
    background: url("../images/btn/btn_green_left.png") left center no-repeat,url("../images/btn/btn_green_right.png") right center no-repeat,url("../images/btn/btn_green_middle.png") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.no-webp .btn:before {
    background: url("../images/btn/btn_green_decor.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .btn--violet:after {
    background: url("../images/btn/btn_violet_left.png") left center no-repeat,url("../images/btn/btn_violet_right.png") right center no-repeat,url("../images/btn/btn_violet_middle.png") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.no-webp .btn--violet:before {
    background: url("../images/btn/btn_violet_decor.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .btn--yellow:after {
    background: url("../images/btn/btn_yellow_left.png") left center no-repeat,url("../images/btn/btn_yellow_right.png") right center no-repeat,url("../images/btn/btn_yellow_middle.png") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.no-webp .btn--yellow:before {
    background: url("../images/btn/btn_yellow_decor.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .btn--red:after {
    background: url("../images/btn/btn_red_left.png") left center no-repeat,url("../images/btn/btn_red_right.png") right center no-repeat,url("../images/btn/btn_red_middle.png") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.no-webp .btn--red:before {
    background: url("../images/btn/btn_red_decor.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .btn--middle:after {
    background-size: auto 100%,auto 100%,calc(100% - 160px) 100%
}

.no-webp .btn--small:after {
    background-size: auto 100%,auto 100%,calc(100% - 92px) 100%
}

@media (max-width: 1024px) {
    .no-webp .header__buttons .btn:after {
        background-size:auto 100%,auto 100%,calc(100% - 160px) 100%
    }
}

@media (max-width: 1024px) {
    .no-webp .promotion__slider-box-item-button:after {
        background-size:auto 100%,auto 100%,calc(100% - 92px) 100%
    }
}

@media (max-width: 1240px) {
    .no-webp .infobox__content-buttons .btn:after {
        background-size:auto 100%,auto 100%,calc(100% - 92px) 100%
    }
}

@media (max-width: 1240px) {
    .no-webp .features__slider-box-item .btn:after {
        background-size:auto 100%,auto 100%,calc(100% - 92px) 100%
    }
}

.no-webp .btn-play:before {
    background: url("../images/bg/button_play_bg.png") center center no-repeat;
    background-size: contain
}

.no-webp .btn-play:after {
    background: url("../images/bg/button_play_icon_bg.png") center center no-repeat;
    background-size: contain
}

.no-webp .border-decor:after {
    background: url("../images/bg/border_decor_left.png") top left no-repeat,url("../images/bg/border_decor_right.png") top right no-repeat;
    background-size: contain
}

.no-webp .title-decor {
    background: url("../images/bg/rating_title_bg.png") center center no-repeat;
    background-size: contain
}

.no-webp .title-decor--violet {
    background: url("../images/bg/anounce_title_bg.png") center center no-repeat;
    background-size: contain
}

.no-webp .swiper-button-prev {
    background: url("../images/icons/slider_arrow_prev.png") no-repeat;
    background-size: contain
}

.no-webp .swiper-button-prev.alternative {
    background: url("../images/icons/slider_arrow_prev_alt.png") no-repeat;
    background-size: contain
}

.no-webp .swiper-button-next {
    background: url("../images/icons/slider_arrow_next.png") no-repeat;
    background-size: contain
}

.no-webp .swiper-button-next.alternative {
    background: url("../images/icons/slider_arrow_next_alt.png") no-repeat;
    background-size: contain
}

.no-webp .swiper-pagination-bullet {
    background: url("../images/icons/slider_bullet.png") no-repeat;
    background-size: contain
}

.no-webp .wrapper {
    background: url("../images/bg/header_bg.jpg") #e3e9e5 top center no-repeat
}

.no-webp .wrapper--inner {
    background: url("../images/bg/inner_bottom_bg.png") bottom center no-repeat,url("../images/bg/header_bg.jpg") top center no-repeat
}

.no-webp .nav__languages-item-icon:after {
    background: url("../images/langs/nav_lang_border.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .nav__languages-current .nav__languages-item:after {
    background: url("../images/langs/nav_lang_arrow.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .articles__breadcrumbs-item:not(:last-child):after {
    background: url("../images/langs/nav_lang_arrow.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .nav__links li .nav__links-item:before {
    background: url("../images/bg/nav_link_bg.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .nav__links-drop>a:after {
    background: url("../images/langs/nav_lang_arrow.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .header__logo:after {
    background: url("../images/logos/logo/back.png") center center no-repeat;
    background-size: contain
}

.no-webp .header__logo:after {
    background: url("../images/logos/logo/back.png") center center no-repeat;
    background-size: contain
}

.no-webp .header__servers:after {
    background: url("../images/bg/servers_bg.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .classes {
    background: url("../images/bg/classes_bg.jpg") top center no-repeat;
    background-size: cover
}

.no-webp .classes__items-item-title span:after {
    background: url("../images/bg/classes_title_decor.png");
    background-size: 100% 100%
}

.no-webp .promo {
    background: url("../images/bg/promo_bg.jpg") top center no-repeat;
    background-size: cover
}

.no-webp .promotion {
    background: url("../images/bg/promotions_bg.jpg") top center no-repeat;
    background-size: cover
}

.no-webp .promotion__content:before {
    background: url("../images/bg/promotion_border.png") left center no-repeat;
    background-size: auto 100%
}

.no-webp .promotion__slider-box-item-sum {
    background: url("../images/bg/promotion_sum_bg_left.png") left center no-repeat,url("../images/bg/promotion_sum_bg_right.png") right center no-repeat,url("../images/bg/promotion_sum_bg_middle.png") left center repeat-x;
    background-size: contain, contain, contain
}

.no-webp .promotion__slider-box-item-sum {
    background: url("../images/bg/promotion_sum_bg_left.png") left center no-repeat,url("../images/bg/promotion_sum_bg_right.png") right center no-repeat,url("../images/bg/promotion_sum_bg_middle.png") left center repeat-x;
    background-size: contain, contain, contain
}

.no-webp .main-content {
    background: url("../images/bg/pve_bg.jpg") top center no-repeat;
    background-size: cover
}

.no-webp .main-content.pvp {
    background: url("../images/bg/pvp_bg.jpg") top center no-repeat;
    background-size: cover
}

.no-webp .main-content__switch:after {
    background: url("../images/bg/pve_bg_left.png") left center no-repeat,url("../images/bg/pve_bg_right.png") right center no-repeat;
    background-size: contain, contain
}

.no-webp .main-content__switch:before {
    background: url("../images/bg/pve_bg_middle.png") center center repeat-x;
    background-size: contain
}

.no-webp .main-content__switch--pvp:after {
    background: url("../images/bg/pvp_bg_left.png") left center no-repeat,url("../images/bg/pvp_bg_right.png") right center no-repeat;
    background-size: contain, contain
}

.no-webp .main-content__switch--pvp:before {
    background: url("../images/bg/pvp_bg_middle.png") center center repeat-x;
    background-size: contain
}

.no-webp .main-content__switch-box-item span:before {
    background: url("../images/bg/content_link_bg.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .features {
    background: url("../images/bg/features_bg.jpg") top center no-repeat;
    background-size: cover
}

.no-webp .socials {
    background: url("../images/bg/social_bg.jpg") #f1f7f7 top center no-repeat;
    background-size: 2560px auto
}

@media (max-width: 1024px) {
    .no-webp .socials {
        background-size:1920px auto
    }
}

@media (max-width: 760px) {
    .no-webp .socials {
        background-size:1100px auto
    }
}

.no-webp .socials__info:after {
    background: url("../images/bg/socials_text_bg.png") center center no-repeat;
    background-size: contain
}

.no-webp .inner-page__title h1:after,.no-webp .inner-page__title h1:before {
    background: url("../images/bg/inner_title_decor.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .spoiler__title:before {
    background: url("../images/icons/spoiler_arrow.png") center center no-repeat;
    background-size: 100% 100%
}

.no-webp .articles__aside-nav-item a:before {
    background: url("../images/bg/inner_title_decor.png") center center no-repeat;
    background-size: 100% 100%
}

.webp .btn:after {
    background: url("../images/btn/btn_green_left.webp") left center no-repeat,url("../images/btn/btn_green_right.webp") right center no-repeat,url("../images/btn/btn_green_middle.webp") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.webp .btn:before {
    background: url("../images/btn/btn_green_decor.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .btn--violet:after {
    background: url("../images/btn/btn_violet_left.webp") left center no-repeat,url("../images/btn/btn_violet_right.webp") right center no-repeat,url("../images/btn/btn_violet_middle.webp") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.webp .btn--violet:before {
    background: url("../images/btn/btn_violet_decor.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .btn--yellow:after {
    background: url("../images/btn/btn_yellow_left.webp") left center no-repeat,url("../images/btn/btn_yellow_right.webp") right center no-repeat,url("../images/btn/btn_yellow_middle.webp") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.webp .btn--yellow:before {
    background: url("../images/btn/btn_yellow_decor.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .btn--red:after {
    background: url("../images/btn/btn_red_left.webp") left center no-repeat,url("../images/btn/btn_red_right.webp") right center no-repeat,url("../images/btn/btn_red_middle.webp") center center no-repeat;
    background-size: auto 100%,auto 100%,calc(100% - 200px) 100%
}

.webp .btn--red:before {
    background: url("../images/btn/btn_red_decor.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .btn--middle:after {
    background-size: auto 100%,auto 100%,calc(100% - 160px) 100%
}

.webp .btn--small:after {
    background-size: auto 100%,auto 100%,calc(100% - 92px) 100%
}

@media (max-width: 1024px) {
    .webp .header__buttons .btn:after {
        background-size:auto 100%,auto 100%,calc(100% - 160px) 100%
    }
}

@media (max-width: 1024px) {
    .webp .promotion__slider-box-item-button:after {
        background-size:auto 100%,auto 100%,calc(100% - 92px) 100%
    }
}

@media (max-width: 1240px) {
    .webp .infobox__content-buttons .btn:after {
        background-size:auto 100%,auto 100%,calc(100% - 92px) 100%
    }
}

@media (max-width: 1240px) {
    .webp .features__slider-box-item .btn:after {
        background-size:auto 100%,auto 100%,calc(100% - 92px) 100%
    }
}

.webp .btn-play:before {
    background: url("../images/bg/button_play_bg.webp") center center no-repeat;
    background-size: contain
}

.webp .btn-play:after {
    background: url("../images/bg/button_play_icon_bg.webp") center center no-repeat;
    background-size: contain
}

.webp .border-decor:after {
    background: url("../images/bg/border_decor_left.webp") top left no-repeat,url("../images/bg/border_decor_right.webp") top right no-repeat;
    background-size: contain
}

.webp .title-decor {
    background: url("../images/bg/rating_title_bg.webp") center center no-repeat;
    background-size: contain
}

.webp .title-decor--violet {
    background: url("../images/bg/anounce_title_bg.webp") center center no-repeat;
    background-size: contain
}

.webp .swiper-button-prev {
    background: url("../images/icons/slider_arrow_prev.webp") no-repeat;
    background-size: contain
}

.webp .swiper-button-prev.alternative {
    background: url("../images/icons/slider_arrow_prev_alt.webp") no-repeat;
    background-size: contain
}

.webp .swiper-button-next {
    background: url("../images/icons/slider_arrow_next.webp") no-repeat;
    background-size: contain
}

.webp .swiper-button-next.alternative {
    background: url("../images/icons/slider_arrow_next_alt.webp") no-repeat;
    background-size: contain
}

.webp .swiper-pagination-bullet {
    background: url("../images/icons/slider_bullet.webp") no-repeat;
    background-size: contain
}

.webp .wrapper {
    background: url("../images/bg/header_bg.webp") #e3e9e5 top center no-repeat
}

.webp .wrapper--inner {
    background: url("../images/bg/inner_bottom_bg.webp") bottom center no-repeat,url("../images/bg/header_bg.webp") top center no-repeat
}

.webp .nav__languages-item-icon:after {
    background: url("../images/langs/nav_lang_border.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .nav__languages-current .nav__languages-item:after {
    background: url("../images/langs/nav_lang_arrow.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .articles__breadcrumbs-item:not(:last-child):after {
    background: url("../images/langs/nav_lang_arrow.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .nav__links li .nav__links-item:before {
    background: url("../images/bg/nav_link_bg.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .nav__links-drop>a:after {
    background: url("../images/langs/nav_lang_arrow.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .header__logo:after {
    background: url("../images/logos/logo/back.webp") center center no-repeat;
    background-size: contain
}

.webp .header__logo:after {
    background: url("../images/logos/logo/back.webp") center center no-repeat;
    background-size: contain
}

.webp .header__servers:after {
    background: url("../images/bg/servers_bg.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .classes {
    background: url("../images/bg/classes_bg.webp") top center no-repeat;
    background-size: cover
}

.webp .classes__items-item-title span:after {
    background: url("../images/bg/classes_title_decor.webp");
    background-size: 100% 100%
}

.webp .promo {
    background: url("../images/bg/promo_bg.webp") top center no-repeat;
    background-size: cover
}

.webp .promotion {
    background: url("../images/bg/promotions_bg.webp") top center no-repeat;
    background-size: cover
}

.webp .promotion__content:before {
    background: url("../images/bg/promotion_border.webp") left center no-repeat;
    background-size: auto 100%
}

.webp .promotion__slider-box-item-sum {
    background: url("../images/bg/promotion_sum_bg_left.webp") left center no-repeat,url("../images/bg/promotion_sum_bg_right.webp") right center no-repeat,url("../images/bg/promotion_sum_bg_middle.webp") left center repeat-x;
    background-size: contain, contain, contain
}

.webp .promotion__slider-box-item-sum {
    background: url("../images/bg/promotion_sum_bg_left.webp") left center no-repeat,url("../images/bg/promotion_sum_bg_right.webp") right center no-repeat,url("../images/bg/promotion_sum_bg_middle.webp") left center repeat-x;
    background-size: contain, contain, contain
}

.webp .main-content {
    background: url("../images/bg/pve_bg.webp") top center no-repeat;
    background-size: cover
}

.webp .main-content.pvp {
    background: url("../images/bg/pvp_bg.webp") top center no-repeat;
    background-size: cover
}

.webp .main-content__switch:after {
    background: url("../images/bg/pve_bg_left.webp") left center no-repeat,url("../images/bg/pve_bg_right.webp") right center no-repeat;
    background-size: contain, contain
}

.webp .main-content__switch:before {
    background: url("../images/bg/pve_bg_middle.webp") center center repeat-x;
    background-size: contain
}

.webp .main-content__switch--pvp:after {
    background: url("../images/bg/pvp_bg_left.webp") left center no-repeat,url("../images/bg/pvp_bg_right.webp") right center no-repeat;
    background-size: contain, contain
}

.webp .main-content__switch--pvp:before {
    background: url("../images/bg/pvp_bg_middle.webp") center center repeat-x;
    background-size: contain
}

.webp .main-content__switch-box-item span:before {
    background: url("../images/bg/content_link_bg.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .features {
    background: url("../images/bg/features_bg.webp") top center no-repeat;
    background-size: cover
}

.webp .socials {
    background: url("../images/bg/social_bg.webp") #f1f7f7 top center no-repeat;
    background-size: 2560px auto
}

@media (max-width: 1024px) {
    .webp .socials {
        background-size:1920px auto
    }
}

@media (max-width: 760px) {
    .webp .socials {
        background-size:1100px auto
    }
}

.webp .socials__info:after {
    background: url("../images/bg/socials_text_bg.webp") center center no-repeat;
    background-size: contain
}

.webp .inner-page__title h1:after,.webp .inner-page__title h1:before {
    background: url("../images/bg/inner_title_decor.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .spoiler__title:before {
    background: url("../images/icons/spoiler_arrow.webp") center center no-repeat;
    background-size: 100% 100%
}

.webp .articles__aside-nav-item a:before {
    background: url("../images/bg/inner_title_decor.webp") center center no-repeat;
    background-size: 100% 100%
}

.status {
    margin-top: 32px;
    margin-bottom: 140px;
    width: 100%;
    color: #ffe49d;
    font-size: 24px;
    text-transform: uppercase;
    text-shadow: 0 0 10px black;
}
.online {
	color: #fff;
	text-transform: uppercase;
	padding: 1px 10px 1px 10px;
	border-radius: 10px;
    background-color: #03ff1f;

}
.offline {
	color: #fff;
    text-transform: uppercase;
    padding: 1px 10px 1px 10px;
    border-radius: 10px;
    background-color: #ff0303;
}

.billing {
    display: inline-block;
    font-size: 14px;
    color: #52413e;
    width: 100%;
    float: left;
		opacity: 0.5;
		text-align: center;
}