:root {
    --navigation--background-color: #222;
    --navigation-text-color: #A6A6A6;
    --navigation-text-color-hover: #FFFFFF;
    --navigation-main-color: #A6A6A6;
    --navigation-burger-display: none;
    --navigation-burger-margin-end: 0;
    --navigation-working-time-display: flex;
    --navigation-hide-mobile-display: flex;
    --navigation-border: 1px solid var(--navigation-main-color);
    --navigation-transition: .5s;
    --navigation-text-transition: .5s;
    --navigation-img-scale: 1.03;
    --navigation-padding: 20px 8%;
    --navigation-gap: 20px;
    --navigation-settings-gap: 20px;
    --navigation-font-size: 18px;
    --navigation-small-text-font-size: 14px;
    --navigation-font-weight: 300;
    --navigation-logo-width: 180px;
    --navigation-settings-block-transition: all 800ms cubic-bezier(0.8, 0, 0.33, 1);
    --navigation-settings-block-background: rgba(0, 0, 0, 0.8);
    --navigation-settings-block-transform-hide: translateX(100%);
    --navigation-settings-block-transform: translateX(0%);
    --navigation-settings-cars-transform-hide: translateY(-100%);
    --navigation-settings-cars-transform: translateX(0%);
    --navigation-settings-block-max-width: 350px;
    --navigation-settings-block-background-color: #222;
    --navigation-settings-block-border-end: 1px solid var(--navigation-main-color);
    --navigation-settings-block-padding: 20px;
    --navigation-settings-title-font-size: 20px;
    --navigation-settings-title-margin: 0 0 10px;
    --navigation-settings-value-font-weight: 200;
    --navigation-settings-value-font-size: 18px;
    --navigation-settings-cars-height: 88px;
    --navigation-settings-cars-border: calc(1px / 2) solid var(--navigation-main-color);
    --navigation-settings-cars-border-hover: calc(1px / 2) solid var(--navigation-text-color-hover);
    --navigation-settings-cars-font-size: 28px;
    --navigation-settings-cars-title-max-width: 500px;
    --navigation-settings-cars-swipe-button-border: 2px solid var(--navigation-main-color);
    --navigation-settings-cars-swipe-button-border-hover: 2px solid var(--navigation-text-color-hover);
    --navigation-settings-cars-swipe-button-radius: 50%;
    --navigation-settings-cars-swipe-label: 16px;
    --navigation-settings-cars-mobile-link-display: none;
}

.navigation-header {
    background: var(--navigation--background-color);
    position: fixed;
    z-index: 1000;
    width: 100%;
}

.navigation-header > .navigation {
    border-bottom: var(--navigation-border);
    padding: var(--navigation-padding);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    display: flex;
}

.navigation-header > .navigation > img {
    margin-inline-end: var(--navigation-burger-margin-end);
    display: var(--navigation-burger-display);
    cursor: pointer;
}

.navigation-header > .navigation > .navigation-start {
    gap: calc(2 * var(--navigation-gap));
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    display: flex;
}

.navigation-header > .navigation > .navigation-start > img {
    transition: var(--navigation-transition);
    width: var(--navigation-logo-width);
    cursor: pointer;
}

.navigation-header > .navigation > .navigation-start > img:hover {
    scale: var(--navigation-img-scale);
}

.navigation-header > .navigation > .navigation-start > .menu_links {
    display: var(--navigation-hide-mobile-display);
    margin-inline-end: var(--navigation-gap);
    gap: calc(2 * var(--navigation-gap));
    flex-direction: row;
    align-items: center;
    text-align: center;
    flex-wrap: nowrap;
}

.navigation-header > .navigation > .navigation-start > .menu_links > a.menu_link,
.navigation-header > .navigation > .navigation-start > .menu_links > span.menu_link {
    transition: var(--navigation-text-transition);
    font-weight: var(--navigation-font-weight);
    font-size: var(--navigation-font-size);
    color: var(--navigation-text-color);
    text-decoration: none;
    align-items: center;
    flex-wrap: nowrap;
    cursor: pointer;
    display: flex;
    margin: 0;
}

.navigation-header > .navigation > .navigation-start > .menu_links > a.menu_link:hover,
.navigation-header > .navigation > .navigation-start > .menu_links > span.menu_link:hover {
    color: var(--navigation-text-color-hover);
}

.navigation-header > .navigation > .navigation-end {
    gap: calc(2 * var(--navigation-gap));
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    display: flex;
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts,
.navigation-header > .navigation > .navigation-end > .navigation-settings {
    gap: calc(var(--navigation-gap) / 2);
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    display: flex;
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts {
    display: var(--navigation-hide-mobile-display);
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts > .working-time-labels {
    display: var(--navigation-working-time-display);
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: end;
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts > .working-time-labels > .working-time-label {
    font-size: var(--navigation-small-text-font-size);
    font-weight: var(--navigation-font-weight);
    color: var(--navigation-text-color);
    text-align: end;
    cursor: default;
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts > .navigation-contacts-list {
    gap: calc(var(--navigation-gap) / 4);
    justify-content: start;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    display: flex;
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts > .navigation-contacts-list > img {
    cursor: pointer;
}

.navigation-header > .navigation > .navigation-end > .navigation-contacts > .navigation-contacts-list > img:first-child {
    margin-inline-end: calc(var(--navigation-gap) / 2);
}

.navigation-header > .navigation > .navigation-end > .navigation-settings img {
    cursor: pointer;
}

.navigation-header > .navigation > .navigation-end > .navigation-settings > .settings {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    cursor: pointer;
    display: flex;
}

.navigation-header > .navigation > .navigation-end > .navigation-settings > .settings > span {
    font-size: var(--navigation-small-text-font-size);
    font-weight: var(--navigation-font-weight);
    color: var(--navigation-text-color);
}

.navigation-header > .navigation > .navigation-end > .navigation-settings > .settings:hover span {
    color: var(--navigation-text-color-hover);
}

.navigation-header > .navigation-settings-block {
    transform: var(--navigation-settings-block-transform-hide);
    transition: var(--navigation-settings-block-transition);
    background: var(--navigation-settings-block-background);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0;
    top: 0;
}

.navigation-header > .navigation-settings-block.show {
    transform: var(--navigation-settings-block-transform);
    z-index: 10000;
    opacity: 1;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content {
    border-inline-end: var(--navigation-settings-block-border-end);
    background: var(--navigation-settings-block-background-color);
    max-width: var(--navigation-settings-block-max-width);
    padding: var(--navigation-settings-block-padding);
    flex-direction: column;
    justify-content: start;
    position: absolute;
    align-items: end;
    display: flex;
    height: 100%;
    right: 0;
    top: 0;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .close {
    transition: var(--navigation-transition);
    cursor: pointer;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .close:hover {
    scale: var(--navigation-img-scale);
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: flex;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content > .title {
    border-bottom: var(--navigation-settings-block-border-end);
    font-size: var(--navigation-settings-title-font-size);
    margin: var(--navigation-settings-title-margin);
    font-weight: var(--navigation-font-weight);
    color: var(--navigation-text-color);
    text-align: start;
    width: 100%;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content > .content-form {
    margin-bottom: var(--navigation-settings-gap);
    gap: var(--navigation-settings-gap);
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content .settings-value {
    font-weight: var(--navigation-settings-value-font-weight);
    font-size: var(--navigation-settings-value-font-size);
    transition: var(--navigation-text-transition);
    padding: calc(var(--navigation-settings-gap) / 2);
    border-bottom: 1px solid transparent;
    color: var(--navigation-text-color);
    cursor: pointer;
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content .settings-value:hover {
    border-bottom: 1px solid var(--navigation-text-color-hover);
    color: var(--navigation-text-color-hover);
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content .settings-value.selected {
    border-bottom: 1px solid var(--navigation-text-color-hover);
    color: var(--navigation-text-color-hover);
}

.navigation-header > .navigation-settings-block > .navigation-settings-content > .content > .content-form-column {
    gap: calc(var(--navigation-settings-gap) / 2);
    flex-direction: column;
    display: flex;
    width: 100%;
}

.navigation-header > .navigation-cars-block {
    transform: var(--navigation-settings-cars-transform-hide);
    transition: var(--navigation-settings-block-transition);
    background: var(--navigation--background-color);
    top: var(--navigation-settings-cars-height);
    border-bottom: var(--navigation-border);
    padding: var(--navigation-padding);
    position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0;
}

.navigation-header > .navigation-cars-block.show {
    transform: var(--navigation-settings-cars-transform);
    z-index: 1000;
    opacity: 1;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    display: flex;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller {
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
    display: flex;
    width: 100%;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content .kinds-controller-title {
    max-width: var(--navigation-settings-cars-title-max-width);
    min-width: var(--navigation-settings-cars-title-max-width);
    font-weight: var(--navigation-settings-value-font-weight);
    border-bottom: var(--navigation-settings-cars-border);
    font-size: var(--navigation-settings-cars-font-size);
    margin: 0 0 var(--navigation-settings-gap);
    color: var(--navigation-main-color);
    white-space: nowrap;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content .kinds-controller-title.mobile {
    display: var(--navigation-settings-cars-mobile-link-display);
}

.navigation-header > .navigation-cars-block > .navigation-cars-content a.kinds-controller-title {
    transition: var(--navigation-text-transition);
    text-decoration: none;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content a.kinds-controller-title:hover {
    border-bottom: var(--navigation-settings-cars-border-hover);
    color: var(--navigation-text-color-hover);
}

.navigation-header > .navigation-cars-block > .navigation-cars-content a.kinds-controller-title > img {
    rotate: -90deg;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller > .scroll-buttons {
    gap: var(--navigation-settings-gap);
    justify-content: end;
    align-items: center;
    flex-direction: row;
    display: flex;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller > .scroll-buttons > .swipe {
    border-radius: var(--navigation-settings-cars-swipe-button-radius);
    border: var(--navigation-settings-cars-swipe-button-border);
    transition: var(--navigation-transition);
    cursor: pointer;
    display: flex;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller > .scroll-buttons > .swipe:hover,
.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller > .scroll-buttons > .swipe:active {
    border: var(--navigation-settings-cars-swipe-button-border-hover);
    scale: var(--navigation-img-scale);
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller > .scroll-buttons > .swipe > img {
    rotate: -90deg;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller > .scroll-buttons > .swipe.back > img {
    rotate: -270deg;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds {
    margin-bottom: calc(2 * var(--navigation-settings-gap));
    gap: var(--navigation-settings-gap);
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    display: flex;
    width: 100%;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds > .scroll-kind {
    flex-direction: column;
    justify-content: end;
    align-items: center;
    text-align: center;
    flex-wrap: nowrap;
    cursor: pointer;
    display: flex;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds > .scroll-kind > img {
    padding-bottom: calc(var(--navigation-settings-gap) / 2);
    border-bottom: var(--navigation-settings-cars-border);
    transition: var(--navigation-transition);
    max-width: 100px;
    max-height: 50px;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds > .scroll-kind span {
    margin: calc(var(--navigation-settings-gap) / 2) calc(var(--navigation-settings-gap) / 2) 0;
    font-weight: var(--navigation-settings-value-font-weight);
    font-size: var(--navigation-settings-cars-swipe-label);
    transition: var(--navigation-transition);
    color: var(--navigation-text-color);
    white-space: nowrap;
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds > .scroll-kind:hover span {
    color: var(--navigation-text-color-hover);
}

.navigation-header > .navigation-cars-block > .navigation-cars-content > .scroll-kinds > .scroll-kind:hover img {
    border-bottom: var(--navigation-settings-cars-border-hover);
    scale: var(--navigation-img-scale);
}

@media only screen and (max-width: 1440px) {
    :root {
        --navigation-padding: 20px 3%;
        --navigation-font-size: 16px;
    }
}

@media only screen and (max-width: 1140px) {
    :root {
        --navigation-padding: 20px 5%;
        --navigation-gap: 10px;
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --navigation-working-time-display: none;
        --navigation-padding: 15px 5%;
        --navigation-logo-width: 150px;
        --navigation-settings-cars-height: 78px;
    }
}

@media only screen and (max-width: 860px) {
    :root {
        --navigation-burger-margin-end: 70px;
        --navigation-burger-display: flex;
        --navigation-settings-cars-mobile-link-display: block;
        --navigation-hide-mobile-display: none;
        --navigation-padding: 10px 4%;
        --navigation-gap: 0;
        --navigation-settings-cars-height: 68px;
    }
}

@media only screen and (max-width: 640px) {
    :root {
        --navigation-settings-cars-title-max-width: 100%;
        --navigation-padding: 10px 3%;
    }

    .navigation-header > .navigation-cars-block > .navigation-cars-content > .kinds-controller {
        margin-bottom: calc(var(--navigation-settings-gap) / 2);
        flex-direction: column;
        align-items: end;
    }
}

@media only screen and (max-width: 425px) {
    :root {
        --navigation-burger-margin-end: 23px;
    }

    #like_icon {
        display: none;
    }
}