:root {
    --header-padding-left: min(3.125vw, 60px);
    --header-padding-top: clamp(10px, calc(2.5vw - 16px), 16px);
    --sm-icon-size: 40px;
    --header-height: calc(5 * var(--header-padding-top));
    --color-secondary: #808a97;
}


a.button,
.page-header a {
    text-decoration: none;
}


.page-header {
    --sm-icon-size: 20px;
    --transition-duration: .5s;
    --transition-delay: calc(var(--transition-duration) / 2.5);
    --duration-m: var(--transition-duration);
    --transition-func-start: cubic-bezier(.8, .05, .8, .05);
    --transition-func-end: cubic-bezier(.05, .8, .05, .8);
    --outline-transition-func-start: cubic-bezier(.625, .125, .625, .125);
    --outline-transition-func-end: cubic-bezier(.125, .625, .125, .625);

    --header-size: 16px;
    --header-size-half: calc(var(--header-size) / 2);
    --header-size-more: calc(var(--header-size) * 1.5);
    --header-list-gap: clamp(30px, 2.25vw, 40px);
    --header-menu-list-gap: 30px;
}

.page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1002;
    font-size: var(--header-size);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 1px 1px 2px var(--dark-o2);
}

.page-header.dark,
.page-header:has(> .menu__block.dark) {
    box-shadow: 0 -4px 12px 0 #fff2;
}

.page-header .page-header__block {
    overflow: visible;
}


.page-header .jalousie--bl {
    padding-bottom: 0;
    border-radius: 0;
}

.page-header:has(.header-menu.dark)::after {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 100%;
    border-bottom: 1px solid #172A42;
    z-index: 1;
}

@media (hover: hover) {

    .page-header .reservation__btn_cntnr .button a:hover::after,
    .jalousie--bl:hover::after {
        background-color: #ffffff;
        max-width: var(--underline_max-width);
        transition: max-width var(--duration-l), background-color 0s 0s;
    }
}

.page-header .menu-btn {
    display: flex;
    gap: var(--header-size-half);
    align-items: center;
}

.page-header .reservation-block {
    position: relative;
    bottom: auto;
    right: auto;
    padding: 0;
    box-shadow: 0 3px 4px 0 var(--dark);
}

.page-header .button {
    background: transparent;
    border-radius: 0;
}

.page-header .button > a {
    padding: 0;
}

.page-header:has(~ .main > main > .main--content) .meteo-block {
    display: none !important;
}

.page-header .meteo-block .block--row {
    justify-content: flex-end;
}

@media screen and (max-width: 720px) {
    .page-header .block--row {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 640px) {
    body:has(.vrem--for-bottom) > .page-header {
        height: 0;
    }

    body:has(.vrem--for-bottom) > .page-header .aside-menu__block ~ *,
    body:has(.vrem--for-bottom) > .page-header .wide-block.menu__block {
        display: none;
    }

    .page-header:has(>.aside-menu__block.active) .page-header__nav.pos--mob-bottom,
    .page-header__nav.pos--mob-bottom.bottom-box--hidden {
        bottom: -100%;
        transition: bottom var(--duration-xl);
    }

}

.page-header .header-menu {
    --sm-icon-size: 20px;
}

.wide-block.header-menu {
    display: flex;
    height: var(--header-height);
    padding: var(--header-padding-top) var(--header-padding-left);
    justify-content: space-between;
    align-items: stretch;
    column-gap: calc(var(--header-height) + 4 * var(--header-list-gap));
    column-gap: var(--header-list-gap);
}

.header-menu .header-menu__list {
    height: 100%;
    display: flex;
    align-items: stretch;
    column-gap: var(--header-list-gap);
}

.header-menu__list .menu__item {
    height: 100%;
    display: flex;
    align-items: center;
}

.page-header .header-menu .logo-block {
    width: auto;
    height: calc(var(--header-padding-top) * 3);
    min-height: 30px;
    min-width: 48px;
    padding: 0;
    top: auto;
}

.page-header .logo-block .img {
    flex: 0 1 auto;
    height: 100%;
}

.page-header .menu__link {
    font-weight: 500;
}

.header-menu__list .menu__item .menu-btn,
.header-menu__list .menu__item .menu__link {
    height: var(--header-size-more);
}

.header-menu__list .menu__item .menu__link {
    display: flex;
    align-items: center;
}

.header-menu .jalousie--bl::after {
    border-radius: 0;
    transition-timing-function: var(--outline-transition-func-end);
}

.header-menu .jalousie--bl:hover::after {
    transition-timing-function: var(--outline-transition-func-start);
}

.page-header .menu-btn__txt.jalousie--bl::after,
.header-menu__list > .menu__item > .menu__link.jalousie--bl::after {
    bottom: calc(-1 * (var(--header-height) - var(--header-size-more)) / 2);

}

.header-menu__list .menu__item .menu-btn .menu-btn__shape {
    height: var(--header-size-half);
    width: var(--header-size-more);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header-menu__list .menu__item .menu-btn .menu-btn__shape::before,
.header-menu__list .menu__item .menu-btn .menu-btn__shape::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    flex-basis: 2px;
    border-radius: 2px;
    background-color: #ffffff;
}

.header-menu__list .menu__item .menu-btn .menu-btn__txt {
    padding-top: 4px;
    padding-bottom: 4px;
}

.page-header .menu__item.item--attachment .attachment__title {
    display: flex;
    align-items: center;
    column-gap: .3125em;
}

.page-header .menu__item.item--attachment .attachment__title .attachment__text {
    z-index: 2;
}

.page-header .menu__item.item--attachment .attachment__title::before,
.aside-menu .item--attachment--click .attachment__title :is(.attachment__text, .menu__link)::before {
    content: '';
    order: 1;
    width: 16px;
    height: 1em;
    background-image: url(../images/design/running/menu-shape.svg);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateX(0deg);
    transition-delay: 0s;
    transition-duration: .5s;
}


.page-header .menu__item.item--attachment--hover:hover .attachment__title::before,
.item--attachment--click .attachment__title:has(> .attachment__checked:checked) :is(.attachment__text, .menu__link)::before {
    transform: rotateX(180deg);
}

.page-header .menu__item.item--attachment .attachment__title.jalousie--bl::after {
    background: #ffffff;
    transition-duration: var(--transition-duration);
}

.page-header .menu__item.item--attachment:hover .attachment__title.jalousie--bl::after {
    max-width: var(--underline_max-width);
}

.page-header .menu__item.item--attachment::before {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--header-padding-top));
    width: 100%;
    height: var(--header-padding-top);
}

.header-menu__list .menu__item.item--attachment--hover .attachment__block {
    position: absolute;
    bottom: 0;
    overflow-x: visible;
    transform: translateY(calc(100% + 15px));
    transition-timing-function: var(--transition-func-end);
    transition-duration: var(--transition-duration);
    transition-delay: var(--transition-delay);

}

.header-menu__list .menu__item.item--attachment--hover:hover .attachment__block {
    transition-timing-function: var(--transition-func-start);
    transition-delay: 0s;
}

.header-menu__list .menu__item.item--attachment--hover .attachment__wrapper {
    max-height: 0;
    overflow-y: hidden;
    transition-timing-function: inherit;
    transition-duration: inherit;
    transition-delay: inherit;
}

.header-menu__list .menu__item.item--attachment--hover:hover .attachment__wrapper {
    max-height: 80vh;
}

.header-menu__list .menu__item.item--attachment--hover .attachment__block::before {
    content: '';
    background-color: var(--dark);
    position: absolute;
    width: 200vw;
    height: 100%;
    max-height: 0;
    left: -100vw;
    transition-timing-function: inherit;
    transition-duration: inherit;
    transition-delay: inherit;
}

.header-menu__list .menu__item.item--attachment--hover:hover .attachment__block::before {
    max-height: 80vh;
}

.header-menu__list .menu__item.item--attachment--hover .attachment__list {
    max-height: 100%;
    opacity: 1;
    color: #fff;
    transform: translateY(-100%);
    transition: all var(--transition-duration) ease-in-out 0s, max-width 0s 0s;
    overflow: hidden;
    pointer-events: auto;
}

.header-menu__list .menu__item.item--attachment--hover:hover .attachment__list {
    z-index: 10;
    transform: translateY(0);
    transition: all var(--transition-duration) ease-in-out var(--transition-delay), max-width 0s 0s;
    padding-top: 41px;
}

.menu__item .attachment__list {
    display: flex;
    flex-direction: column;
    row-gap: var(--header-menu-list-gap);
    padding: var(--header-list-gap) 0;
    white-space: nowrap;
    font-size: 2em;
}

.menu__item .attachment__list .attachment__item {
    margin-top: -.171875em;
    margin-bottom: -.171875em;
}

.menu__item .attachment__list .attachment__item .menu__link {
    height: 100%;
}

.header-menu:not(.dark) .header-menu__list .menu__item.item--attachment--hover:hover .attachment__list {
    padding-right: .25em;
}

.header-menu:not(.dark) .header-menu__list .menu__item.item--attachment--hover .attachment__block::before {
    display: none;
}

.header-menu:not(.dark) .menu__item .attachment__list .attachment__item .menu__link {
    text-shadow: 1px 1px 3px var(--dark);
}

.menu__item.menu__sm {
    column-gap: 20px;
}

.menu__sm {
    width: auto;
    display: flex;
    align-items: center;
    height: auto;
}

.menu__sm-link {
    flex: 0 0 var(--sm-icon-size);
    height: var(--sm-icon-size);
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.menu__sm-link.sm-link--vk {
    background-image: url(../images/design/running/sm-vk.svg);
}

.menu__sm-link.sm-link--tg {
    background-image: url(../images/design/running/sm-tg.svg);
}

.sign-in__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    border-radius: 6px;
    padding: 9px 12px;
    background-color: var(--brend-blue);
    transition-duration: var(--duration-m);
}

.sign-in__btn:hover {
    background-color: var(--blue);
}

.sign-in__btn::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(../images/design/running/person.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.sign-in__txt {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}


@media screen and (max-width: 1600px) {
    .menu__item.item--vanishing {
        display: none;
    }

    .header-menu .sign-in__btn {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 1279px) {
    .page-header .header-menu .menu__link {
        font-size: 14px;
    }

    .menu__item.item--pre-vanishing ~ .menu__item {
        display: none;
    }
}

@media screen and (max-width: 959px) {
    .header-menu .menu__item.menu__sm {
        display: none;
    }
}

@media screen and (max-width: 639px) {
    .header-menu .menu__item.sign-in {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .page-header .header-menu {
        flex-direction: row-reverse;
    }

    .header-menu .menu__item.item--pre-vanishing {
        display: none;
    }
}

@media screen and (min-width: 401px) {
    .page-header .header-menu .logo-block {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 400px) {
    .header-menu__item.item--contacts {
        display: none;
    }
}


.page-header .aside-menu__block {
    --duration-ml: 1s;
}

.page-header .aside-menu__block.preactive {
    z-index: 10;
}

.page-header .aside-menu__block.preactive .aside-menu__wrapper {
    width: 100%;
    transform: translateX(-100%);
    transition: transform var(--duration-m) ease-in-out var(--duration-m);
}

.page-header .aside-menu__block.active .aside-menu__wrapper {
    transform: translateX(0);
    box-shadow: none;
    transition: transform var(--duration-m) ease-in-out 0s;
}

.page-header .aside-menu__wrapper {
    --aside-menu-item-flex-basis: min(960px, 50%);
    --aside-menu-margin: 60px;
    --aside-menu-margin-top: 30px;
    --aside-menu-gap: 30px;
    --aside-menu-attachment-gap: 20px;
    --aside-menu-content-margin: clamp(50px, min(calc(25vh - 145px), calc(10vw - 80px)), 90px);
    --aside-menu-close: var(--aside-menu-margin);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.page-header .aside-menu__content {
    margin: calc(var(--aside-menu-margin) + var(--aside-menu-margin-top)) var(--aside-menu-margin) var(--aside-menu-margin);
    align-items: stretch;
    max-height: 100dvh;
    overflow: hidden;
}


.page-header .aside-menu .close_btn {
    width: var(--aside-menu-close);
    height: var(--aside-menu-close);
    padding: 0;
    border: 1px solid #172A42;
    border-radius: 50%;
    left: var(--aside-menu-margin);
    top: var(--aside-menu-margin-top);
    right: auto;
    z-index: 1;
}

.page-header .aside-menu .close_btn::before, .page-header .aside-menu .close_btn::after {
    top: calc(50% - 8px);
    left: calc(50% - 1px);
    height: 16px;
}

.aside-menu .aside-menu__box {
    margin-top: calc(var(--aside-menu-content-margin) - 10px);
    padding-top: 10px;
    height: calc(100% - var(--aside-menu-content-margin));
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--aside-menu-content-margin);
}


.aside-menu .aside-menu__list {
    --item-paddng-bottom: 10px;
    padding: 0;
    gap: calc(var(--aside-menu-gap) - var(--item-paddng-bottom));
}

.aside-menu .aside-menu__list .menu__item {
    font-size: clamp(24px, calc(2.5vw - 16px), 32px);
    margin-top: -.125em;
    margin-bottom: -.15625em;
    padding-bottom: var(--item-paddng-bottom);
}

.aside-menu .aside-menu__list .menu__item .jalousie--bl::after {
    border-radius: 0;
    bottom: -4px;
}

.aside-menu .aside-menu__list :is(.attachment__text, .menu__link) {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform var(--duration-m) ease-in 0s, opacity var(--duration-m) ease-out 0s;
}

.aside-menu.active .aside-menu__list :is(.attachment__text, .menu__link) {
    transform: translateY(0);
    opacity: 1;
    transition: transform var(--duration-m) ease-out var(--duration-m), opacity var(--duration-m) ease-in var(--duration-m);
}


.aside-menu .aside-menu__list .menu__item.item--attachment {
    margin-bottom: 0;
    margin-bottom: -.25em;
    padding-bottom: calc(2 * var(--item-paddng-bottom));
}

.aside-menu .aside-menu__list .menu__item.item--attachment .attachment__title {
    padding-right: 0;
    column-gap: 4px;
    margin-bottom: -.15625em;
}

.item--attachment--click .attachment__title:has(> .attachment__checked:checked)::before {
    transform: rotateX(180deg);
}

.aside-menu .item--attachment--click .attachment__title::before {
    display: none;

}

.aside-menu .item--attachment--click .attachment__title :is(.attachment__text, .menu__link) {
    display: flex;
    column-gap: 5px;
}

.aside-menu .item--attachment--click .attachment__title :is(.attachment__text, .menu__link)::before {
    display: block;
    position: relative;
}

.aside-menu .menu__item .attachment__list {
    padding: 0;
}

.aside-menu .aside-menu__list .menu__item.item--attachment .attachment__list {
    font-size: 16px;
    gap: var(--aside-menu-attachment-gap);
}

.item--attachment--click .attachment__title:has(> .attachment__checked:checked) ~ .attachment__list {
    padding-top: var(--aside-menu-gap);
}


.aside-menu .menu__item.item--attachment .attachment__list .attachment__item {
    margin-top: -.125em;
    margin-bottom: -.15625em;
}

.aside-menu .aside-menu__info-block {
    display: flex;
    gap: var(--aside-menu-margin);
}

.aside-menu .aside-menu__info-block > * {
    flex: 0 0 calc(50% - var(--aside-menu-margin) / 2);
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--aside-menu-gap) - .375em);
}

.aside-menu__info-block > .info-block__info {
    font-size: .75em;
    color: var(--color-secondary);
}

.aside-menu .menu__sm {
    --sm-icon-size: 30px;
}

.aside-menu .sign-in {
    margin-top: 20px;
}

:is(.aside-menu, .footer-box) .sign-in__btn {
    width: 120px;
    height: 46px;
}


@media screen and (max-width: 1480px) {
    .page-header .aside-menu__wrapper {
        --aside-menu-item-flex-basis: min(960px, 50%);
        --aside-menu-margin: 40px;
        --aside-menu-margin-top: 40px;
    }
}

@media screen and (max-width: 1600px) {
    .aside-menu .aside-menu__info-block {
        flex-direction: column;
        gap: var(--aside-menu-content-margin);
    }

    .aside-menu .aside-menu__info-block > * {
        flex-basis: auto;
    }
}

@media screen and (min-width: 1280px) {
    .page-header .aside-menu__wrapper::after {
        content: '';
        display: block;
        background-image: url(../images/design/running/header-menu-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        flex: 0 1 var(--aside-menu-item-flex-basis);
    }

    .page-header .aside-menu__content {
        flex: 1 0 var(--aside-menu-item-flex-basis);
    }
}

@media screen and (max-width: 1279px) {
    .aside-menu .sign-in {
        margin-top: 10px;
    }

    .page-header .aside-menu__wrapper {
        --aside-menu-content-margin: 40px;
        --aside-menu-close: var(--aside-menu-content-margin);
    }

    .page-header .aside-menu__content {
        flex: 0 1 calc(100% - 2 * var(--aside-menu-margin));
        overflow: auto;
        margin-right: var(--aside-menu-margin-top);
    }
}

@media screen and (max-width: 1279px) and (min-width: 800px) {
    .page-header .aside-menu__content {
        margin-top: calc(2 * var(--aside-menu-margin) + var(--aside-menu-margin-top));
    }

    .aside-menu .aside-menu__box {
        height: auto;
        margin-top: 0;
        padding-top: 0;
        flex-direction: row;
        justify-content: flex-start;
    }

    .aside-menu .aside-menu__list {
        flex: 0 0 calc(50% - 70px + var(--aside-menu-margin));
    }
}

@media screen and (max-width: 799px) and (min-height: 360px) {
    .page-header .aside-menu .aside-menu__content {
        overflow: hidden;
    }
}
@media screen and (max-width: 799px) {
    .aside-menu .aside-menu__box {
        height: 100%;
        padding-bottom: var(--aside-menu-content-margin);
    }
}

@media screen and (max-width: 479px) {
    .page-header .aside-menu__wrapper {
        --aside-menu-margin: clamp(20px, calc(15vw - 32px), 40px);
    }

    .page-header .aside-menu .close_btn {
        top: var(--aside-menu-margin);
    }

    .page-header .aside-menu__content {

    }

    .aside-menu .aside-menu__box {

    }

    .aside-menu .aside-menu__list .menu__item {
        font-size: max(20px, 5vw);
    }

    .aside-menu .aside-menu__list .menu__item.item--attachment .attachment__list {
        font-size: 14px;
    }

    .aside-menu__info-block > .info-block__info {
        font-size: 12px;
    }

}