@import "fonts-2024-06.css";

* {
    max-height: 1000000px;
}

html,
body {
    margin: 0;
    padding: 0;

    color: var(--color-default);
    font: var(--font-default);
}

html {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;

    background: var(--background-default) url(/images/discl_2025.png) left center no-repeat;
    background-size: auto min(90dvh, 1000px);
}

* {
    position: relative;
}

body {
    max-width: var(--max-width);
    margin: auto;
    box-sizing: border-box;
    width: 100vw;
    padding: 0 20px;
    height: 100%;

}

html[no-war],
html[no-war] body {
    background: #000000;
}

ul.links {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px 0;
}

body:not([mobile]) ul.links {
    /*
    transform: scale(1.15);
    transform-origin: center top;   
    */
}

ul.links[right] {
    justify-content: center;
    margin: 20px 0;
}

ul.links[right] li {
    color: var(--color-hover);
    white-space: normal;
    font-size: 1.4em;
    line-height: 1.3em;
    font-weight: 400;
    text-align: center;
    padding-bottom: 1.3em;
}

ul.links[right] li a {
    display: inline-block;
    text-transform: none;
}

ul.links[right] [en] {
    right: 0;
}

ul.links li {
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
    font-weight: bold;
}

ul.links li a {
    display: block;
    color: var(--color-default);
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    text-transform: uppercase;
}

ul.links li a:hover {
    text-decoration: underline;
    color: var(--color-hover);
}

.lang-switch {
    position: relative;
    border: 1px solid var(--switcher-color);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lang-switch em {
    position: relative;
    font: inherit;
    padding: 0 6px;
    color: var(--switcher-color);
    z-index: 10;
    transition: color .25s ease;
}

.lang-switch::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--switcher-color);
    content: "";
    transition: left .25s ease;
}

html[lang="en"] .lang-switch::before {
    left: 50%;
}

html[lang="ru"] .lang-switch em[ru],
html[lang="en"] .lang-switch em[en] {
    color: var(--color-default);
}

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

main [en],
.links[right] [en] {
    position: absolute;
    transition: opacity .25s ease;
}

main [ru],
.links[right] [ru] {
    transition: opacity .25s ease;
}

html[lang="ru"] main [en],
html[lang="ru"] .links[right] [en] {
    opacity: 0;
    pointer-events: none;
    user-select: none;
    height: 0;
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

html[lang="en"] main [ru],
html[lang="en"] .links[right] [ru] {
    opacity: 0;
    pointer-events: none;
    user-select: none;
    height: 0;
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

#tour-2022 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#tour-2022[video] {
    flex-direction: column;
}

#tour-2022[video] [socials] {
    position: relative;
    display: flex;
    width: 100%;
    align: center;
    justify-content: center;
    padding-top: 30px;
}

#tour-2022[video] [socials] img {
    width: 44px;
    height: 44px;
    margin: 0 20px;
    transition: all .2s ease;
    transform: scale(1);
}

#tour-2022[video] [socials] a:hover img {
    transform: scale(1.2);
}

.links [mobile] {
    display: none;
}

@media screen and (max-width: 640px) {
    .links>[socials] {
        display: none;
    }

    .links [mobile] {
        display: block;
        position: relative;
        white-space: nowrap;
    }

    .links:nth-of-type(1) {
        flex-wrap: wrap;
    }

    .links:nth-of-type(1) li {
        padding: 0 5px;
    }

    .links [mobile] a {
        display: inline-block;
    }

    .links [mobile] a img {
        margin: 0 10px;
        transform: scale(1.5);
    }
}

.links [socials] img {
    width: 1.2em;
    height: 1.2em;
    transition: all .2s ease;
    transform: scale(1);
}

.links [socials] a:hover img {
    transform: scale(1.2);
}

#tour-2022 .slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50% !important;
    order: 2;
}

#tour-2022 .slide img {
    max-height: 90%;
    max-width: 100%;
    object-fit: contain;
}

#tour-2022 .shedule {
    font: normal 18px/30px "NeutralFace", sans-serif;
    white-space: nowrap;
    width: 50% !important;
    order: 1;
}

#tour-2022 .shedule header {
    text-align: center;
}

#tour-2022 .shedule header.soon {
    color: var(--soon-color);
    font-size: .85em;
    padding: 8px 0;
}

#tour-2022 .table {
    display: grid;
    grid-template-columns: calc(50% - 12px) calc(50% - 12px);
    grid-gap: 5px 20px;
    width: 100%;
}

#tour-2022[buy][video] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 70px);
}

#tour-2022[buy] iframe {
    position: relative;
    width: 100%;
    height: 100%;
}

#tour-2022[buy] .table {
    grid-gap: 20px;
    user-select: none;
    position: relative;
    max-width: 100%;
}


#tour-2022 .table>a {
    height: 0;
    display: contents;
    color: inherit;
}

#tour-2022 .table>a[d]>* {
    pointer-events: none;
    opacity: .6;
}

#tour-2022 .table>div {
    pointer-events: none;
    opacity: .5;
    height: 2em !important;
}

#tour-2022 .table>a div {
    font-weight: 800;
    font-size: 1.35em;
    line-height: 1em;
    transform: scaleY(.75);
    transform-origin: left top;
    text-transform: uppercase;
    margin: 0 0 -.6em 0;
    white-space: nowrap;
}

#tour-2022 .table>a div:nth-child(1) {
    text-align: right;
}

#tour-2022 .table>a div:nth-child(2)>span {
    display: block;
    font-size: .5em;
    line-height: 1.6em;
    font-weight: 400;
    transform: scaleY(1.1);
    transform-origin: left top;
    opacity: .8;
}

#tour-2022 .table>a div:nth-child(2)>span em {
    display: inline-block;
    font-style: normal;
    padding: 4px 6px;
    margin: 4px 0;
    border: 1px solid #ffffff;
    border-radius: .5em;
}

#tour-2022 .table>a div:nth-child(2)>span i {
    display: inline-block;
    font-style: normal;
    margin: 2px 0 10px 0;
    padding: 2px 6px;
    background: white;
    color: black;
}

#tour-2022 .table>a[soon] div {
    margin-bottom: 0;
}

#tour-2022 .table>a div:nth-child(2) {}

#tour-2022 .table>a div:nth-child(3)::after {
    content: "Купить билет";
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    line-height: .1em;
    font-size: .55em;
    color: var(--switcher-color);
}

#tour-2022 .table>a[soon01032024] div:nth-child(3)::after {
    content: "в продаже с 01.03.2024"
}


#tour-2022 .table>a div:nth-child(3):empty::after {
    display: none;
}

html[lang="en"] #tour-2022 .table>a div:nth-child(3)::after {
    content: "Buy ticket";
}

html[lang="en"] #tour-2022 .table>a[soon01032024] div:nth-child(3)::after {
    content: "on sale march 1, 2024";
}


#tour-2022 .table>a:hover div:nth-child(3)::after {
    color: var(--color-default);
}

#tour-2022 .table>a:hover {
    color: var(--color-hover);
}

#tour-2022 .table>div {
    position: relative;
}

#tour-2022 .table div i {
    position: absolute;
    margin-left: -.3em;
    margin-top: -2px;
}

#tour-2022 .table section {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: -1px;
    top: -3px;
    width: calc(100% + 2px);
    height: calc(100% + 6px);
    background: rgba(0, 0, 0, .85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /*    transition: opacity .3s ease; */
    padding: 10% 0;
    box-sizing: border-box;
    font-family: "HNCfont", Verdana, Arial, sans-serif;
}

#tour-2022 .table section>span[buy] {
    font-size: .65em;
    text-align: center;
}

#tour-2022 .table section [currencies] {
    display: flex;
    margin-top: 1em;
    font-size: 1.5em;
    align-items: stretch;
    justify-content: center;
}

#tour-2022 .table section [currencies][vertical] {
    flex-direction: column;
    line-height: 2.5em;
}

#tour-2022 .table section [currencies] a {
    margin: 0 1em;
    color: var(--color-default);
    text-decoration: underline;
}

#tour-2022 .table section [currencies] a:hover {
    opacity: .8;
    text-decoration: none;
}

#tour-2022 .table section[visible] {
    opacity: 1;
    pointer-events: all;
    z-index: 10000;
}

#tour-2022 .table section [back] {
    margin-top: 1em;
}

#tour-2022 .table section [back] a {
    color: var(--color-default);
    font-size: .8em;
    text-transform: lowercase !important;
    text-decoration: none;
    font-weight: bold;
}

#tour-2022 .table section [back] a:hover {
    color: #545454;
}

#tour-2022 .table section [title] {
    text-align: center;
    transform: scale(1.32, 1);
}

#tour-2022 .table section [title]>strong {
    font-weight: 800;
    text-transform: uppercase;
}



main .onsale-announce {
    position: relative;
    padding-top: 4em;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    transform: scaleY(.75);
    transform-origin: center top;
}

main .onsale-announce small {
    font-size: .75em;
}

@media screen and (min-width: 1200px) {
    #tour-2022 {
        align-items: center;
    }
}


@media screen and (max-aspect-ratio: .78/1) {
    #tour-2022 {
        flex-direction: column;
        max-height: none;
    }

}

@media screen and (max-width: 420px) {
    .lang-switch {
        padding: 1px;
    }

    .lang-switch em {
        padding: 0 3px;
    }

    #tour-2022 .shedule {
        font: normal 10px/24px "HNCfont", sans-serif;
    }

    #tour-2022 .slide {
        min-width: 100%;
    }

    #tour-2022[buy] .table {
        grid-gap: 12px;
    }

    ul.links[right] {
        margin: 0;
    }

    #tour-2022[buy] .table {
        max-width: 100%;
    }

    #tour-2022 .shedule {
        width: 100% !important;
    }
}

@media screen and (max-width: 420px) and (max-aspect-ratio: .78/1) {
    #tour-2022 .slide {
        order: 1;
        margin-bottom: 4em;
    }

    #tour-2022 .shedule {
        order: 2;
    }
}


@media screen and (max-height: 1400px) and (min-aspect-ratio: .78/1) {
    body[mobile] #tour-2022 .shedule {
        font: normal 10px/16px "NeutralFace", sans-serif;
        transform: translateX(-30px);
    }

    body[mobile] #tour-2022[buy] .table {
        grid-gap: 12px;
    }

    body[mobile] #tour-2022 .slide img {
        transform: scale(.85);
    }

    body[mobile] ul.links {
        transform: scale(.85);
        font-size: .65em;
        padding: 0;
    }


}


@media screen and (max-width: 1320px) and (min-aspect-ratio: .8/1) {
    /*    body {
        transform: scale(.75);
        transform-origin: center top;
        height: 133vh;
    }
    */
}



@media screen and (max-width: 980px) and (min-aspect-ratio: .8/1) {
    /*
    body {
        transform: scale(.6);
        transform-origin: center top;
        height: 166vh;
    }
    */
}

@media screen and (max-height: 400px) and (min-aspect-ratio: .8/1) {
    #tour-2022 {
        max-width: 70vw;
        transform: scale(.8);
    }

    #tour-2022 .shedule {
        font: normal 10px/14px "NeutralFace", sans-serif;
    }

    #tour-2022 .slide {
        max-width: 40%;
        flex-grow: 0;
    }

    #tour-2022 .table>a:not([href]) {
        display: none;
    }

    #tour-2022 .table>a:not([href])+a[href] div {
        margin-top: 2em;
    }


}



@media screen and (max-width: 420px) and (min-aspect-ratio: .8/1) {
    .links:nth-of-type(1) {
        flex-wrap: nowrap;
    }

    ul.links[right] li {
        font-size: 1.1em;
    }

    body {}

    main {
        transform-origin: center top;
    }

    #tour-2022 .table>a div {
        font-size: 1em;
    }

    #tour-2022 .slide {
        max-width: 50%;
        width: 50%;
        min-width: 50%;
    }

    #tour-2022 {
        max-width: 100%;
        transform: scale(1);
    }

    #tour-2022[buy] .table {
        max-width: 100%;
    }

    body[mobile] #tour-2022 .slide img {
        transform: scale(1);
    }


}


#tour-2025 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100dvh - 90px);
}

span[x2025] {
    position: fixed;
    display: block;
    bottom: 5dvh;
    left: 0;
    height: 90dvh;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    font-size: 1dvh;
    line-height: 1.6dvh;
    transform: scale(1);
}


#tour-2025 strong,
#tour-2025 ol {
    position: absolute;
    left: 1em;
    top: 1em;
    color: #000000;
    font: 800 3dvh/3dvh "NeutralFace", sans-serif;
    text-transform: uppercase;
    transform: scaleY(.85);
    transform-origin: left top;
}

#tour-2025 strong small {
    font-size: .75em;
}

#tour-2025 ol {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    left: 0;
    top: 2em;
}

#tour-2025 ol li {
    margin: 0;
    padding: 0 0 3em 1em;
}

#tour-2025 ol li a {
    text-decoration: none;
}

#tour-2025 ol li strong {
    position: relative;
    top: 0;
    left: 0;
}


#tour-2025 strong span {
    position: absolute;
    left: 0;
    top: 100%;
    font-size: .5em;
    line-height: 2.2em;
    border: .5px solid #000000;
    padding: 0 1.2em;
    border-radius: 3px;
    margin-top: .3em;
    margin-bottom: .3em;
    white-space: nowrap;
}

#tour-2025 a:not([href]) strong span {
    border-color: transparent !important;
    pointer-events: none;
    padding-left: 0;
    margin-top: 0;
}

#tour-2025 a[href] strong span::before {
    content: "Купить билет";
}

#tour-2025 a[href] strong span::before {
    content: "Купить билет";
}

#tour-2025 [en] a[href] strong span::before {
    content: "Buy tickets";
}

#tour-2025 a:not([href]) strong span::before {
    content: attr(soon);
}


#tour-2025 a:hover strong span {
    border-color: #404040;
}


#tour-2025 a:nth-of-type(2) strong {
    top: 4em;
}

#tour-2025 a:nth-of-type(3) strong {
    top: 7em;
}

#tour-2025 a:nth-of-type(4) strong {
    top: 10em;
}

#tour-2025 a:nth-of-type(5) strong {
    top: 13em;
}


#tour-2025 em {
    position: absolute;
    left: 1em;
    bottom: 1em;
    color: #000000;
    font: 800 1.6dvh/1.6dvh "NeutralFace", sans-serif;
    text-transform: uppercase;
    transform: scaleY(.85)
}

#tour-2025 i {
    position: absolute;
    left: 1em;
    top: 3em;
    font-style: normal;
    color: blue;

}

#tour-2025 img {
    position: relative;
    max-height: calc(80dvh - 90px);
    max-width: calc(80dvw + 0px);
    object-fit: contain;
}

@media screen and (max-aspect-ratio: .8/1) {

    html {
        background-size: auto 60dvh;
    }

    #tour-2025 {
        height: auto;
        width: 80dvw;
        transform: translateX(6dvw);
    }

    span[x2025] {
        height: 60dvh;
        bottom: 20dvh;
        text-align: center;
    }


    main[x2025] {
        height: 80dvh;
    }

    #tour-2025 strong {
        font-size: 5dvw;
        line-height: 5dvw;
    }

    #tour-2025 ol {
        top: 1em;
    }

    #tour-2025 em {
        font-size: 2.4dvw;
        line-height: 2.4dvw;
    }
}

/* Для широких экранов (десктоп, планшет в горизонтали) */
@media screen and (min-aspect-ratio: 1/1) {
    #tour-2025 {
        height: 88dvh;
    }

    [mobile] #tour-2025 {
        height: 80dvh;
    }

    #tour-2025 img {
        max-height: 70dvh;
        max-width: 70dvh;
    }
}

/* Для промежуточных экранов (планшеты, ноутбуки 4:3, iPad вертикаль и т.п.) */
@media screen and (min-aspect-ratio: .8/1) and (max-aspect-ratio: 1/1) {
    #tour-2025 {
        height: 84dvh;
    }

    [mobile] #tour-2025 {
        height: 76dvh;
    }

    #tour-2025 img {
        max-height: 50dvh;
        max-width: 56dvh;
    }
}

/* Для узких экранов (мобильная версия, вертикаль) */
@media screen and (max-aspect-ratio: .8/1) {
    #tour-2025 img {
        max-height: 42dvh;
        max-width: 42dvh;
    }
}

/* Для очень широких (кинематографичные, ультраширокие мониторы) */
@media screen and (min-aspect-ratio: 2/1) {
    span[x2025] {
        font-size: 2dvh;
        line-height: 3dvh;
    }
}




#tour-2025 a {
    position: static;
    display: inline;
}

#tour-2025 a:not([href]) {
    pointer-events: none;
}

#tour-2025 a:hover strong {
    color: #404040;
}

@media screen and (min-aspect-ratio: .8/1) {
    body:not([mobile]) #tour-2025 strong {
        margin-top: 1em;
    }

    body:not([mobile]) #tour-2025 em {
        margin-bottom: 2em;
    }
}