#navigation {

    --font-family: HelveticaNeueCyr;
    font-family: var(--font-family);

    @media (max-width: 1239px) {}

    @media (min-width: 1240px) {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /** navigation background */

    .navigationBackground {
        z-index: 900;
        position: fixed;
        background-color: black;
        opacity: .4;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .navigationBackground.active {
        width: 100vw;
        height: 100%;
    }

    /** capsule */

    .capsule {
        @media (max-width: 1239px) {
            border-radius: 2.38vw;
            width: 95.00vw;
            height: 9.52vw;
            top: 1.67vw;

            z-index: 989;
            position: fixed;

            left: 2.5vw;

            background-color: #2f2f2f;

            justify-self: center;

            display: flex;
            flex-direction: row;
            align-items: center;
        }

        @media (min-width: 1240px) {
            width: 1200px;
            height: 52px;
            border-radius: 20px;
            top: 7px;

            z-index: 989;
            position: fixed;

            background-color: #2f2f2f;

            justify-self: center;

            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .capsule.disappear {
        animation: navigation_capsule_disappear 400ms;
        display: none;
    }

    .capsule.appear {
        animation: navigation_capsule_appear 400ms;
    }

    .capsule.active .opener {
        display: none;
    }

    .capsule.active .closer {
        display: block;
    }

    .capsule {
        .logo {
            @media (max-width: 1239px) {
                margin-left: 2.38vw;
            }

            @media (min-width: 1240px) {
                margin-left: 20px;
            }
        }

        .logo>img {
            @media (max-width: 1239px) {
                width: 16.43vw;
                height: 7.62vw;
            }

            @media (min-width: 1240px) {
                width: 82px;
                height: 38px;
            }
        }

        .couple {
            @media (max-width: 1239px) {
                display: none;
            }

            @media (min-width: 1240px) {
                margin-left: 185px;
                width: 160px;

                display: flex;
                justify-content: space-between;
            }
        }

        .couple>* {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 11px;
                color: #fff;

                text-decoration: none;
                cursor: pointer;
            }
        }

        .group {
            @media (max-width: 1239px) {
                display: flex;
                flex-direction: row;

                margin-left: auto;
            }

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;

                margin-left: auto;
            }
        }

        .group>* {
            @media (max-width: 1239px) {
                margin-left: 1.19vw;
            }

            @media (min-width: 1240px) {
                margin-left: 9px;
            }
        }

        .button-secondary {
            @media (max-width: 1239px) {
                padding-top: 2.38vw;
                padding-bottom: 2.38vw;
                padding-left: 5.95vw;
                padding-right: 5.95vw;

                border-radius: 7.14vw;

                background-color: #515151;

                font-family: var(--font-family);
                font-weight: 500;
                font-size: 2.38vw;
                letter-spacing: -0.05em;
                color: #fff !important;

                text-decoration: none;
            }

            @media (min-width: 1240px) {
                padding-top: 12px;
                padding-bottom: 12px;
                padding-left: 30px;
                padding-right: 30px;

                border-radius: 38px;

                background-color: #515151;

                font-family: var(--font-family);
                font-weight: 700;
                font-size: 13px;
                color: #DCDCDC;

                text-decoration: none;
            }
        }

        .button-primary,
        .button-mini-primary {
            @media (max-width: 1239px) {
                padding-top: 2.38vw;
                padding-bottom: 2.38vw;
                padding-left: 5.95vw;
                padding-right: 5.95vw;

                border-radius: 7.14vw;

                background-color: #1d76ff;

                font-family: var(--font-family);
                font-weight: 500;
                font-size: 2.38vw;
                letter-spacing: -0.05em;
                color: #DCDCDC;
            }

            @media (min-width: 1240px) {
                padding-top: 12px;
                padding-bottom: 12px;
                padding-left: 25px;
                padding-right: 25px;

                border-radius: 38px;

                background-color: #1d76ff;
                cursor: pointer;

                font-family: var(--font-family);
                font-weight: 700;
                font-size: 13px;
                color: #DCDCDC;
            }
        }

        .button-primary {
            @media (max-width: 1239px) {
                display: none;
            }

            @media (min-width: 1240px) {}
        }

        .button-mini-primary {
            @media (max-width: 1239px) {
                padding-left: 3.57vw;
                padding-right: 2.38vw;
            }

            @media (min-width: 1240px) {
                padding-left: 20px;
                padding-right: 15px;
            }
        }

        .opener {
            @media (max-width: 1239px) {
                margin-left: 12.86vw;
                margin-right: 6.67vw;

                width: 3.57vw;
                text-align: center;

                font-size: 4.29vw;
                color: #fff;
            }

            @media (min-width: 1240px) {
                margin-left: 75px;
                margin-right: 19px;

                width: 24px;
                text-align: center;

                font-size: 18px;
                color: #fff;
                cursor: pointer;
            }
        }

        .closer {
            display: none;

            @media (max-width: 1239px) {
                margin-left: 12.86vw;
                margin-right: 6.67vw;

                width: 3.57vw;
                text-align: center;

                font-size: 4.29vw;
                color: #fff;
            }

            @media (min-width: 1240px) {
                margin-left: 75px;
                margin-right: 19px;

                width: 24px;
                text-align: center;

                font-size: 18px;
                color: #fff;
                cursor: pointer;
            }
        }
    }

    .switch {
        @media (max-width: 1239px) {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;

            width: 15.24vw;
            height: 22.86vw;
            padding: 5.24vw 5.24vw;
            border-radius: 3.33vw;

            left: calc(50% + 10.95vw);
            top: 12.62vw;

            background-color: #2f2f2f;

            z-index: 989;
            position: fixed;
        }

        @media (min-width: 1240px) {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;

            width: 70px;
            height: 96px;
            padding: 22px 25px;
            border-radius: 14px;

            left: calc(50% + 415px);
            top: 66px;

            background-color: #2f2f2f;

            z-index: 989;
            position: fixed;
        }
    }

    .switch.active {
        @media (max-width: 1239px) {
            display: flex;
            animation: navigation_easy_appear 400ms;
        }
        
        @media (min-width: 1240px) {    
            display: flex;
            animation: navigation_easy_appear 400ms;
        }
    }

    .switch .option {
        @media (max-width: 1239px) {
            text-decoration: none;
            color: #fff;

            font-family: var(--font-family);
            font-weight: 500;
            font-size: 3.33vw;
        }

        @media (min-width: 1240px) {
            text-decoration: none;
            color: #fff;

            font-family: var(--font-family);
            font-weight: 500;
            font-size: 14px;
        }
    }

    .switch .option:hover {
        color: #1d76ff;
    }

    /** navigation block */

    .navigation.active {
        display: flex;
        animation: navigation_easy_appear 400ms;
    }

    .navigation.subactive .general .mid {
        @media (max-width: 1239px) {
            display: flex;
        }

        @media (min-width: 1240px) {
            display: none;
        }
    }

    .navigation.subactive {
        @media (max-width: 1239px) {
            height: 202.38vw;
        }

        @media (min-width: 1240px) {
            width: 532px;
            margin-right: 668px;
        }
    }

    .navigation {
        @media (max-width: 1239px) {
            display: none;

            width: 95.24vw;
            height: 136.43vw;
            border-radius: 4.76vw;
            top: 14.29vw;

            z-index: 989;
            position: fixed;

            left: 2.38vw;

            background-color: #515151;

            flex-direction: row;
            justify-content: space-between;
        }

        @media (min-width: 1240px) {
            display: none;

            width: 305px;
            height: 591px;
            border-radius: 12px;
            top: 80px;

            z-index: 989;
            position: fixed;

            margin-right: 895px;

            background-color: #515151;

            flex-direction: row;
            justify-content: space-between;
        }
    }

    .general {
        @media (max-width: 1239px) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            box-sizing: border-box;

            padding-top: 7.62vw;
            padding-left: 2.86vw;
            padding-bottom: 7.14vw;
            padding-right: 2.38vw;

            width: 95.24vw;
            border-radius: 4.76vw;
            background-color: #2f2f2f;
        }

        @media (min-width: 1240px) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            box-sizing: border-box;

            padding-top: 35px;
            padding-left: 35px;
            padding-bottom: 33px;
            padding-right: 22px;

            width: 305px;
            border-radius: 13px;
            background-color: #2f2f2f;
        }
    }

    .general {

        .top {
            @media (max-width: 1239px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                width: 100%;
            }

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                width: 100%;
                margin-bottom: 35px;
            }
        }

        .closer {
            @media (max-width: 1239px) {
                display: none;
            }

            @media (min-width: 1240px) {
                font-size: 18px;
                cursor: pointer;
                color: #fff;
                transform: translate(0, -15px);
            }
        }

        .top .list {
            @media (max-width: 1239px) {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                height: 30.95vw;
                width: 100%;
            }

            @media (min-width: 1240px) {
                width: 175px;
                height: 120px;

                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .headlighting {
            @media (max-width: 1239px) {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                text-decoration: none;
            }

            @media (min-width: 1240px) {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                text-decoration: none;
                cursor: pointer;
            }
        }

        .headlighting .title {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 7.14vw;
                letter-spacing: -0.04em;
                color: #fff;
            }

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 26px;
                letter-spacing: -0.04em;
                color: #fff;
            }
        }

        .headlighting i {
            @media (max-width: 1239px) {
                font-size: 3.81vw;
            }

            @media (min-width: 1240px) {
                font-size: 16px;
            }
        }

        .headlighting .number {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 2.38vw;
                letter-spacing: -0.04em;
                color: #fff;
            }

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 6px;
                letter-spacing: -0.04em;
                color: #fff;
            }
        }

        .mid {
            @media (max-width: 1239px) {
                display: none;
                flex-direction: column;

                margin-top: 5.55vw;
            }

            @media (min-width: 1240px) {
                display: none;
            }
        }

        .mid .row {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 3.81vw;
                letter-spacing: -0.05em;
                color: #ACACAC;

                border-bottom: 0.24vw solid #ACACAC;
                text-decoration: none;

                padding-top: 1.67vw;
                padding-bottom: 1.67vw;
                width: 90.48vw;
            }

            @media (min-width: 1240px) {}
        }

        .mid-splitter {
            @media (max-width: 1239px) {
                margin-top: 10.67vw;
                width: 90.48vw;
                height: 0.24vw;
                background-color: #828282;
            }

            @media (min-width: 1240px) {
                width: 237px;
                height: 1px;
                background-color: #828282;
            }
        }

        .phone {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 25px;
                color: #fff !important;

                text-decoration: none;

                margin-top: 9.05vw;
                margin-bottom: 5.71vw;
            }

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 19px;
                color: #fff;

                text-decoration: none;

                margin-top: 33px;
                margin-bottom: 22px;
            }
        }

        .mini-button-primary {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 3.81vw;
                letter-spacing: -0.04em;
                text-align: right;
                color: #fff;

                background-color: #1d76ff;
                border-radius: 9.52vw;

                padding-top: 3.10vw;
                padding-bottom: 3.10vw;
                padding-left: 5.48vw;
                padding-right: 5.48vw;
            }

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 10px;
                letter-spacing: -0.04em;
                text-align: right;
                color: #fff;

                background-color: #1d76ff;
                border-radius: 25px;

                padding-top: 9px;
                padding-bottom: 9px;
                padding-left: 16px;
                padding-right: 16px;

                cursor: pointer;
            }
        }

        .bottom {
            @media (max-width: 1239px) {
                margin-top: auto;
                width: 100%;

                display: flex;
                flex-direction: column;
            }

            @media (min-width: 1240px) {
                margin-top: auto;
                width: 235px;

                display: flex;
                flex-direction: column;
            }
        }

        .bottom .info {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 3.33vw;
                color: #fff;

                margin-top: 4.52vw;
            }

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 10px;
                color: #fff;

                margin-top: 11px;
            }
        }

        .bottom-splitter {
            @media (max-width: 1239px) {
                margin-top: 11vw;
                width: 90.48vw;
                height: 0.24vw;
                background-color: #828282;
            }

            @media (min-width: 1240px) {
                display: none;
            }
        }

        .bottom .couple {
            @media (max-width: 1239px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                margin-top: 4.76vw;
            }

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                margin-top: 23px;
            }
        }

        .bottom .language {
            @media (max-width: 1239px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                width: 36.90vw;
                align-items: center;
            }

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                width: 105px;
                align-items: center;
            }
        }

        .bottom .option {
            @media (max-width: 1239px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 3.81vw;
                letter-spacing: -0.05em;
                color: #C1C1C1;

                text-decoration: none;
            }

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 10px;
                letter-spacing: -0.05em;
                color: #C1C1C1;

                cursor: pointer;
                text-decoration: none;
            }
        }

        .bottom .option.active {
            color: #fff;
        }

        .social {
            @media (max-width: 1239px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                align-self: center;
                height: 8.33vw;
                width: 18vw;
            }

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                width: 65px;
            }
        }

        .social a {
            @media (max-width: 1239px) {
                font-size: 3.33vw;
                color: black;
                background-color: #FFF;
                padding: 2.14vw;
                padding-left: 2.14vw;
                padding-right: 2.14vw;
                text-align: center;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
            }

            @media (min-width: 1240px) {
                font-size: 14px;
                color: black;
                background-color: #FFF;
                padding: 6px;
                padding-left: 7px;
                padding-right: 7px;
                text-align: center;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
            }
        }

        .social a i {
            @media (max-width: 1239px) {
                width: 3.33vw;
                height: 3.33vw;
                text-align: center;
            }

            @media (min-width: 1240px) {
                width: 14px;
                height: 14px;
                text-align: center;
            }
        }
    }

    /** services mini block */

    .mini-services {
        @media (max-width: 1239px) {
            display: none;
        }

        @media (min-width: 1240px) {
            display: none;

            overflow: auto;

            width: 195px;

            margin-right: 13px;
            margin-top: 17px;
        }
    }

    .mini-services::-webkit-scrollbar {
        width: 3px;
    }

    .mini-services::-webkit-scrollbar-track {
        background: #2f2f2f;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    .mini-services::-webkit-scrollbar-thumb {
        background: #fff;
        border-radius: 3px;
    }

    .navigation.subactive .mini-services {
        @media (max-width: 1239px) {}

        @media (min-width: 1240px) {
            display: block;
        }
    }

    .mini-services {

        .element {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                width: 180px;
                height: 150px;
                border-radius: 8px;

                background-color: #2f2f2f;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                padding: 15px;
                margin-bottom: 13px;
            }
        }

        .top {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                text-decoration: none;
            }
        }

        .bottom {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;

                text-decoration: none;
            }
        }

        .number {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 7px;
                color: #fff;
            }
        }

        img {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                border-radius: 6px;
                width: 46px;
                height: 46px;
                object-fit: cover;
            }
        }

        .title {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 10px;
                color: #fff;

                width: 120px;
            }
        }

        .pointer {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                border: 0.54px solid #fff;
                border-radius: 6px;

                color: #fff;
                font-size: 7px;
                padding-left: 6px;
                padding-right: 6px;
                padding-top: 4px;
                padding-bottom: 4px;
            }
        }
    }

    /** services macro block */

    .services {
        @media (max-width: 1239px) {
            display: none;
        }

        @media (min-width: 1240px) {
            display: none;
        }
    }

    .services.active {
        @media (max-width: 1239px) {
            display: none;
        }

        @media (min-width: 1240px) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;

            width: 1202px;
            height: 551px;
            border-radius: 12px;
            top: 67px;

            padding: 33px;
            padding-top: 46px;

            z-index: 989;
            position: fixed;

            animation: navigation_easy_appear 400ms;

            background-color: #2f2f2f;
        }
    }

    .services {

        .closer {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                position: absolute;
                right: 23px;
                top: 22px;
                font-size: 14px;

                color: #fff;
                cursor: pointer;
            }
        }

        .row {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
        }

        .element {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                box-sizing: border-box;

                width: 280px;
                height: 232px;
                padding: 23px;
                border-radius: 10px;

                background-color: #515151;
            }
        }

        .element:hover {
            animation: navigation_service_element_hover 400ms;
            background-color: #b3becc;

            img {
                animation: navigation_service_img_hover 400ms;
                width: 231px;
                height: 138px;
            }

            .play {
                animation: navigation_service_play_hover 400ms;
                display: block;
            }

            .number {
                font-size: 0px;
                width: 0px;
                height: 0px;
            }
        }

        /*
        .element {
            animation: navigation_service_element_unhover 400ms;

            img {
                animation: navigation_service_img_unhover 400ms;
            }
        }
        */

        .top {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                position: relative;

                text-decoration: none;
            }
        }

        .bottom {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
                text-decoration: none;
            }
        }

        .number {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 10px;
                color: #fff;
            }
        }

        .top img {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                border-radius: 9px;
                width: 75px;
                height: 75px;
                object-fit: cover;
            }
        }

        .title {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                font-family: var(--font-family);
                font-weight: 500;
                font-size: 15px;
                color: #fff;

                width: 170px;
            }
        }

        .pointer {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                border: 0.83px solid #fff;
                border-radius: 9px;

                color: #fff;
                font-size: 10px;
                padding-left: 9px;
                padding-right: 9px;
                padding-top: 6px;
                padding-bottom: 6px;
            }
        }

        .play {
            @media (max-width: 1239px) {}

            @media (min-width: 1240px) {
                position: absolute;
                display: none;

                top: 52px;
                left: 108px;

                font-size: 22px;
                color: #fff;
            }
        }
    }
}

@keyframes navigation_service_element_hover {
    from {
        background-color: #515151;
    }

    to {
        background-color: #b3becc;
    }
}

@keyframes navigation_service_element_unhover {
    from {
        background-color: #b3becc;
    }

    to {
        background-color: #515151;
    }
}

@keyframes navigation_service_img_hover {
    from {
        width: 75px;
        height: 75px;
    }

    to {
        width: 231px;
        height: 138px;
    }
}

@keyframes navigation_service_img_unhover {
    from {
        width: 231px;
        height: 138px;
    }

    to {
        width: 75px;
        height: 75px;
    }
}

@keyframes navigation_service_play_hover {
    from {
        display: none;
    }

    49% {
        display: none;
    }

    50% {
        opacity: 0;
        display: block;
        transform: scale(1.2) rotate(30deg);
    }

    75% {
        display: block;
        transform: scale(1.2) rotate(30deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes navigation_easy_appear {
    from {
        display: none;
        opacity: .1;
        transform: scale(.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes navigation_capsule_disappear {
    from {
        display: flex;
        opacity: 1;
        transform: scale(1);
    }
    to {
        display: none;
        opacity: .1;
        transform: scale(.99);
    }
}

@keyframes navigation_capsule_appear {
    from {
        display: none;
        opacity: .1;
        transform: scale(.99);
    }
    to {
        display: flex;
        opacity: 1;
        transform: scale(1);
    }
}