/* --- MAIN STYLES --- */


body.covered {overflow: hidden}
main {
    min-height: 100%;
    position: relative;
}


.background {
    background: #ffffff 50% 50% no-repeat;
    background-size: cover;
}


.heading-block {
    margin: 0 auto;
    max-width: 660px;
    text-align: center;
}

    .heading-block h2 {
        margin-bottom: 12px;
    }

    .heading-block p {
        color: #23334A;
        font-size: 18px;
        line-height: 24px;
    }


.list-social a {
    padding: 8px;
    display: inline-block;
    text-decoration: none;
}
.list-social a:hover, .list-social a:focus {text-decoration: none;}

    .list-social a svg {
        height: 24px;
        transition: fill .4s ease-in-out;
    }


.list-lang {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
}

    .list-lang li {
        display: inline-block;
    }
    .list-lang li + li:before {
        content: "/";
        margin: 0 8px 0 4px;
    }

        .list-lang li a {
            padding: 10px 0;
            display: inline-block;
            text-decoration: none;
        }
        .list-lang li a:hover, .list-lang li a:focus {
            text-decoration: underline;
        }


/* --- HEADER --- */


header {
    padding: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

    header > div:first-child {
        font-size: 11px;
        font-weight: 600;
        line-height: 10px;
    }

        header .link-menu {
            padding: 0;
            height: 64px;
            width: 64px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            vertical-align: middle;
            outline: transparent !important;
            transition: background-color .4s ease-in-out, color .4s ease-in-out;
            background-color: transparent;
            border: 2px solid #efe9f6;
            color: #D8D3C5;
            text-transform: uppercase;
        }
        header .link-menu:hover, header .link-menu:focus {
            background-color: #efe9f6;
            color: #86897e;
        }

            header .link-menu svg {
                margin-bottom: 10px;
                width: 24px;
                transition: fill .4s ease-in-out;
                fill: #D8D3C5;
            }
            header .link-menu:hover svg, header .link-menu:focus svg {
                fill: #86897e;
            }

        header .list-social {
            margin-left: 40px;
            display: inline-block;
        }

            header .list-social a svg {
                fill: #D8D3C5;
            }
            header .list-social a:hover svg, header .list-social a:focus svg {fill: #ffffff;}

        header .list-lang {
            margin: 0 0 0 10px;
            display: inline-block;
            vertical-align: middle;
        }

            header .list-lang li {
                color: #D8D3C5;
            }

                header .list-lang li a {
                    color: #D8D3C5;
                }
                header .list-lang li a:hover, header .list-lang li a:focus {color: #ffffff;}

    header > div:last-child {
        font-size: 13px;
        font-weight: 700;
        text-align: right;
        text-transform: uppercase;
    }

        header > div:last-child a {
            display: block;
            color: #c6bbaf;
            text-decoration: none;
        }
        header > div:last-child a:first-child {
            color: #D8D3C5;
        }
        header > div:last-child a:nth-child(1):hover,
        header > div:last-child a:nth-child(1):focus {
            color: #ffffff;
        }
        header > div:last-child a:nth-child(2):hover,
        header > div:last-child a:nth-child(2):focus {
            color: #ffffff;
            text-decoration: underline;
        }

        .header-tel {
            margin-bottom: 13px;
            color: #D8D3C5;
            font-size: 27px;
            font-weight: 400;
            line-height: 24px;
        }

            .header-tel span {
                font-size: 32px;
            }

        header > div:last-child a.tel-mobile {
            display: none;
        }

header.dark .link-menu {
    border-color: #23334A;
    color: #23334A;
}
header.dark .link-menu:hover, header .link-menu:focus {
    background-color: #23334A;
    color: #efe9f6;
}

    header.dark .link-menu svg {
        fill: #23334A;
    }
    header.dark .link-menu:hover svg, header.dark .link-menu:focus svg {fill: #efe9f6;}

header.dark .list-social a svg {
    fill: #23334A;
}
header.dark .list-social a:hover svg, header .list-social a:focus svg {fill: #000000;}

header.dark .list-lang li a{
    color: #23334A;
}
header.dark .list-lang li a:hover, header.dark .list-lang li a:focus {color: #000000;}

header.dark > div:last-child a {
    color: #86897e;
}
header.dark > div:last-child a:first-child {
    color: #23334A;
}
header.dark > div:last-child a:nth-child(1):hover,
header.dark > div:last-child a:nth-child(1):focus,
header.dark > div:last-child a:nth-child(2):hover,
header.dark > div:last-child a:nth-child(2):focus {
    color: #000000;
}

header.simplified .list-social,
header.simplified .list-lang {display: none}


/* --- MENU --- */


.menu-container {
    height: 100vh;
    width: 100%;
    max-height: 1200px;
    display: flex;
    align-items: stretch;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    transform: translateX(-100%);
    background: #23334A;
}
.menu-container.loaded {transition: transform .4s ease-in-out;}
.menu-container.shown {transform: translateX(0);}

    .menu-scroll {
        flex: 0 0 60%;
    }

        .menu-block {
            padding: 60px 0 15px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            overflow-y: auto;
            background: #23334A;
        }

            nav {
                padding: 0 30px;
                max-width: 590px;
            }

                nav h2 {
                    margin-bottom: 24px;
                    display: flex;
                    align-items: baseline;
                    color: #86897e;
                    line-height: 1;
                }

                    nav h2 .text-lg {
                        margin-right: 18px;
                        font-size: 96px;
                    }

                        nav h2 span span {
                            display: inline-block;
                        }

                nav ul {
                    margin: 0 0 35px 100px;
                    padding: 0;
                    list-style: none;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 24px;
                }

                    nav ul li {
                        margin-bottom: 15px;
                    }

                        nav ul li a {
                            color: #D8D3C5;
                        }
                        nav ul li a:hover, nav ul li a:focus {
                            color: #ffffff;
                        }
                        nav ul li a.nav-tel {
                            font-size: 24px;
                            font-weight: 600;
                            text-decoration: none;
                            white-space: nowrap;
                        }

                            nav ul li a.nav-tel span {
                                font-size: 32px;
                            }

            .menu-block .list-social {
                text-align: center;
            }

                .menu-block .list-social a svg {
                    fill: #D8D3C5;
                }
                .menu-block .list-social a:hover svg,
                .menu-block .list-social a:focus svg {fill: #ffffff;}

            .menu-block .list-lang {
                font-size: 11px;
                font-weight: 600;
            }

                .menu-block .list-lang li {
                    color: #D8D3C5;
                }

                    .menu-block .list-lang li a {
                        color: #D8D3C5;
                    }
                    .menu-block .list-lang li a:hover,
                    .menu-block .list-lang li a:focus {color: #ffffff;}

    .menu-container .background {
        flex: 0 0 40%
    }

    .menu-container .link-menu {
        height: 60px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 40px;
        right: calc(40% + 40px);
        z-index: 25;
        transition: background-color .4s ease-in-out, border-color .4s ease-in-out;
        background-color: #23334A;
        border: 2px solid #86897e;
    }
    .menu-container .link-menu:hover, .menu-container .link-menu:focus {
        background-color: #D8D3C5;
        border-color: #D8D3C5;
    }

        .menu-container .link-menu svg {
            height: 24px;
            transition: fill .4s ease-in-out;
            fill: #86897e;
        }
        .menu-container .link-menu:hover svg, .menu-container .link-menu:focus svg {
            fill: #23334A;
        }


/* --- FOOTER --- */


footer {
    background-color: #23334A;
}

    footer > div:first-child {
        padding: 50px 70px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
    }

        footer .logo {
            display: block;
        }

            footer .logo img {
                width: 200px;
                height: auto;
            }

        footer > div:first-child > ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            footer > div:first-child > ul li {
                margin-bottom: 12px;
            }

                footer > div:first-child > ul li a {
                    color: #D8D3C5;
                    text-decoration: none;
                }
                footer > div:first-child > ul li a:hover,
                footer > div:first-child > ul li a:focus {
                    color: #ffffff;
                }

        .footer-links {
            margin-top: 42px;
            display: flex;
        }

            .link-builder {
                margin: 8px 42px 0 0;
                display: block;
            }

                .link-builder img {
                    height: 54px;
                }

        footer .list-social a svg {
            fill: #D8D3C5;
        }
        footer .list-social a:hover svg, footer .list-social a:focus svg {fill: #ffffff;}

        footer .list-lang {
            margin-left: 8px;
        }

            footer .list-lang li {
                color: #D8D3C5;
                font-size: 11px;
                line-height: 10px;
            }

                footer .list-lang li a {
                    color: #D8D3C5;
                }
                footer .list-lang li a:hover, header .list-lang li a:focus {color: #ffffff;}

    footer > div:last-child {
        padding: 0 30px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #86897e;
        color: #86897e;
        font-size: 13px;
        font-weight: 600;
        line-height: 21px;
    }

        .list-policy {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .list-policy li {
                display: inline-block;
                color: #c6bbaf;
            }
            .list-policy li + li:before {
                content: "/";
                margin: 0 16px 0 12px;
            }

                .list-policy li a {
                    color: #c6bbaf;
                }
                .list-policy li a:hover, .list-policy li a:focus {
                    color: #ffffff;
                }

        footer > div:last-child > p {
            margin: 0;
        }

        .link-developer {
            color: #86897e;
            text-decoration: none;
        }
        .link-developer:hover, .link-developer:focus {
            color: #ffffff;
            text-decoration: none;
        }

            .link-developer span {
                transition: color .4s ease-in-out, border-color .4s ease-in-out;
                border-bottom: 1px solid #c6bbaf;
                color: #c6bbaf;
                white-space: nowrap;
            }
            .link-developer:hover span, .link-developer:focus span {
                border-color: #ffffff;
                color: #ffffff;
            }


/* --- SIDEBAR --- */


.sidebar {
    height: 100vh;
    width: 140px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    position: absolute;
    top: 100vh;
    left: 0;
    z-index: 100;
    background-color: #23334A;
    font-size: 11px;
    line-height: 10px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}
.sidebar.sticky {
    position: fixed;
    top: 0;
}
.sidebar.sticky.bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

    .sidebar .logo {
        padding: 45px 0 20px 0;
        width: 100%;
    }

        .sidebar .logo img {
            width: 90px;
            height: auto;
        }

    .sidebar > div {
        flex-grow: 1;
        display: flex;
        align-items: stretch;
        justify-content: space-evenly;
        flex-direction: column;
        overflow: hidden;
    }

        .sidebar > div > a, .sidebar > div > div {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .sidebar-link {
            position: relative;
            background: #23334A;
            color: #D8D3C5;
            text-decoration: none;
        }
        .sidebar-link:not(:first-child) {
            transform: translateX(-100%);
            opacity: 0;
            transition: transform .4s ease-out, opacity 1s ease-out;
        }
        .sidebar-link:not(:first-child).active {
            transform: translateX(0);
            opacity: 1;
        }
        .sidebar-link:after {
            margin: 0 auto;
            height: 1px;
            width: 90px;
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            z-index: 25;
            transform: translateX(-50%);
            background-color: rgba(134, 137, 126, .2);
        }
        .sidebar-link:first-child:after {
            transition: background-color .4s ease-in-out;
            background-color: transparent;
        }
        .sidebar-link:first-child.active:after {background-color: rgba(134, 137, 126, .2);}
        .sidebar-link:hover, .sidebar-link:focus {
            color: #ffffff;
            text-decoration: none;
        }

            .sidebar-link svg {
                margin-bottom: 10px;
                transition: fill .4s ease-in-out;
                fill: #D8D3C5;
            }
            .sidebar-link:hover svg, .sidebar-link:focus svg {fill: #ffffff;}

        .sidebar > div > div {
            position: relative;
        }
        .sidebar > div > div:before {
            content: "";
            height: calc(100vh - 150px);
            width: 1px;
            position: absolute;
            bottom: 100%;
            left: 50%;
            z-index: -25;
            transition: transform .4s ease-in-out;
            background: rgba(134, 137, 126, .2);
        }
        .sidebar:hover > div > div:before {transform: scaleY(0);}

            .sidebar .list-social {
                padding-top: 16px;
            }

                .sidebar .list-social a svg {
                    fill: #D8D3C5;
                }
                .sidebar .list-social a:hover svg, .sidebar .list-social a:focus svg {fill: #ffffff;}

            .sidebar .list-lang {
                padding-bottom: 13px;
            }

                .sidebar .list-lang li {
                    color: #D8D3C5;
                }

                    .sidebar .list-lang li a {
                        color: #D8D3C5;
                    }
                    .sidebar .list-lang li a:hover, .sidebar .list-lang li a:focus {color: #ffffff;}


/* --- INDEX --- */


.index-main {
    height: 100vh;
    max-height: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    color: #D8D3C5;
    text-align: center;
}

    .index-main .cover {
        z-index: 0;
        background-color: rgba(0, 0, 0, .4);
    }

    .index-scroll {
        padding: 0;
        height: 90px;
        width: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 25;
        transform: translateX(-50%);
        outline: transparent !important;
        background-color: transparent;
        border: 0;
    }

        .index-scroll svg {
            height: 10px;
            animation: scrollFade 1s ease-in-out infinite alternate;
            fill: #ffffff;
        }
        .index-scroll svg:nth-child(2) {animation-delay: .3s;}
        .index-scroll svg:nth-child(3) {animation-delay: .6s;}

        @keyframes scrollFade {
          from {opacity: 0.25;}
          to {opacity: 1;}
        }

    .index-main .heading {
        margin: 42px 0;
    }

    .index-main .logo {
        height: auto;
        width: 80%;
        margin: 0 auto;
    }

    .index-main p .btn {
        margin: 0 16px;
    }

    .index-main ul {
        margin: 36px 0 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }

        .index-main ul li {
            margin: 0 20px;
            display: inline-block;
            text-align: left;
        }

            .index-main ul li span {
                display: block;
            }
            .index-main ul li span:first-child {
                font-size: 48px;
            }


/* --- FEATURES --- */


.features-main {
    padding: 164px 0 70px 140px;
}
.features-main.first {padding-top: 0;}

    .feature-slide {
        position: relative;
    }

        .info-features {
            padding: 50px;
            max-width: 500px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 50;
            color: #ffffff;
        }

            .info-features h1 {
                margin-bottom: 24px;
                color: #ffffff;
            }

        .dot-features {
            padding: 3px;
            height: 40px;
            width: 40px;
            display: block;
            position: absolute;
            z-index: 50;
            border: 2px solid #ffffff;
            border-radius: 50%;
        }
        .dot-features:before {
            content: "";
            height: 100%;
            width: 100%;
            display: block;
            background: #ffffff;
            border-radius: 50%;
        }

            .dot-features span {
                display: block;
                position: absolute;
                z-index: 25;
                transform: scale(0);
                transform-origin: left top;
                transition: transform .4s ease-in-out;
                background: #ffffff;
            }
            .dot-features.left span {
                height: 2px;
                top: 17px;
                left: 100%;
                transform: scaleX(0);
            }
            .dot-features.left:hover span,
            .dot-features.left:focus span,
            .dot-features.left.active span {transform: scaleX(1);}
            .dot-features.top span {
                width: 2px;
                top: 100%;
                left: 17px;
                transform: scaleY(0);
            }
            .dot-features.top:hover span,
            .dot-features.top:focus span,
            .dot-features.top.active span {transform: scaleY(1);}

        .banner-features {
            padding: 25px 30px;
            max-width: 500px;
            position: absolute;
            bottom: 0;
            right: 60px;
            z-index: 75;
            opacity: 0;
            transition: opacity .4s ease-in-out;
            background: #ffffff;
            color: #23334A;
            font-size: 14px;
        }
        .banner-features.shown {opacity: 1}


/* --- BUILDING --- */


.building-main {
    padding: 164px 60px 30px 140px;
}

    .building-main > h1 {
        margin-bottom: 16px;
        text-align: center;
    }

    .building-main > p {
        margin-bottom: 32px;
        font-size: 18px;
        text-align: center;
    }

    .building-scroll {
        padding: 0 0 20px;
    }

        .building-scroll .simplebar-content {
            display: flex;
        }

            .process-steps {
                margin: 0;
                padding: 0 30px;
                list-style: none;
                height: 680px;
                display: flex;
                position: relative;
            }
            .process-steps.active {align-items: flex-end;}
            .process-steps:not(.active) {padding-right: 130px;}
            .process-steps:before {
                content: "";
                width: 100%;
                display: block;
                position: absolute;
                top: 50px;
                left: 0;
                z-index: -25;
                border-top: 1px dotted #86897e;
            }
            .process-steps.active:before {
                top: auto;
                bottom: 96px;
                border-top: 1px solid #23334A;
            }
            .process-steps:not(.active):after {
                content: "";
                height: 1px;
                width: 250px;
                display: block;
                position: absolute;
                top: 50px;
                right: 0;
                z-index: 0;
                background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            }

                .process-steps li {
                    margin: 0 60px 0 0;
                    min-height: 146px;
                    flex: 0 0 100px;
                    color: #86897e;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 18px;
                    text-align: center;
                    text-transform: uppercase;
                }
                .process-steps.active li {margin: 0 0 0 60px;}

                    .step-circle {
                        margin: 0 0 10px;
                        height: 100px;
                        width: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #86897e;
                        border-radius: 50%;
                    }
                    .process-steps.active .step-circle {background: #23334A;}

                        .step-circle svg {
                            fill: #D8D3C5;
                        }

            .process-current {
                height: 534px;
                display: flex;
                align-items: center;
                position: absolute;
                top: 50px;
                left: -100px;
                z-index: 25;
            }
            .process-current:before,
            .process-current:after {
                content: "";
                height: 50%;
                display: block;
                position: absolute;
                left: 100px;
                z-index: -25;
            }
            .process-current:before {
                top: 0;
                border-left: 1px dotted #86897e;
            }
            .process-current:after {
                bottom: 0;
                border-left: 1px solid #23334A;
            }

                .current-block {
                    display: flex;
                    max-width: 600px;
                }

                    .current-block .step-circle {
                        margin: 0 50px 0 0;
                        height: 200px;
                        width: 200px;
                        flex-shrink: 0;
                        background: #23334A;
                    }

                    .current-block h2 {
                            margin-bottom: 8px;
                            font-size: 27px;
                        }

.building-main .simplebar-track {
    display: none;
}



/* --- FLOOR --- */


.floor-main {
    padding: 0 0 0 140px;
    height: 100vh;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

    .floor-main .svg-background {
        min-height: 100%;
        min-width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .svg-floor, .svg-floor path {
            cursor: pointer;
            fill: rgba(255, 255, 255, 0);
            transition: fill .4s ease-in-out;
        }
        path.svg-floor.active, g.svg-floor.active path {fill: rgba(255, 255, 255, .5);}

    .floor-display {
        width: 200px;
        position: absolute;
        bottom: 0;
        right: 60px;
        z-index: 25;
        background: rgba(255, 255, 255, .9);
        font-weight: 700;
        line-height: 1;
        text-align: center;
        text-transform: uppercase;
    }

        .floor-number {
            padding: 20px 0 15px;
            display: flex;
            flex-direction: column;
            color: #86897e;
        }

            #floorSelected {
                padding: 0 0 0 10px;
                outline: transparent !important;
                background: transparent;
                border: 0;
                color: #23334A;
                font-size: 64px;
                font-weight: 700;
                text-align: center;
            }
            #floorSelected::-webkit-outer-spin-button,
            #floorSelected::-webkit-inner-spin-button {
              -webkit-appearance: none;
              margin: 0;
            }
            #floorSelected[type=number] {
              -moz-appearance: textfield;
            }

        .floor-flats {
            padding: 20px 0 30px;
            display: flex;
            flex-direction: column;
            position: relative;
            color: #c6bbaf;
            font-size: 12px;
        }
        .floor-flats:before {
            content: "";
            height: 1px;
            width: 90px;
            display: block;
            position: absolute;
            top: 0;
            left: calc(50% - 45px);
            z-index: 25;
            background: rgba(134, 137, 126, .2);
        }

            .floor-flats .text-lg {
                padding: 5px 0 10px;
                display: inline-block;
                font-size: 48px;
            }

        .floor-control {
            padding: 10px 5px;
            position: absolute;
            right: 40px;
            z-index: 25;
            cursor: pointer;
            outline: transparent !important;
            background: transparent;
            border: 0;
        }
        .floor-control.up {top: 40px;}
        .floor-control.down {top: 80px;}

            .floor-control svg {
                height: 20px;
                fill: #86897e;
            }

    .floor-toggle {
        height: 60px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: calc(50% - 30px);
        right: 0;
        z-index: 25;
        transition: background-color .4s ease-in-out, color .4s ease-in-out;
        outline: transparent !important;
        cursor: pointer;
        background-color: #D8D3C5;
        border: 0;
        color: #23334A;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .floor-toggle:hover, .floor-toggle:focus {
        background-color: #23334A;
        color: #D8D3C5;
    }

        .floor-toggle svg {
            margin-bottom: 5px;
            height: 24px;
            transition: fill .4s ease-in-out;
            fill: #23334A;
        }
        .floor-toggle:hover svg, .floor-toggle:focus svg {fill: #D8D3C5;}


/* --- FLAT --- */


.flat-main {
    padding: 50px 25px 50px 165px;
    min-height: 900px;
    height: 100vh;
    max-height: 1500px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100;
}

    .flat-heading {
        padding: 0 25px 20px;
        display: flex;
        align-items: center;
    }

        .flat-heading h1 {
            margin-bottom: 0;
            padding: 0 20px 0 35px;
            line-height: 32px;
        }

            .flat-heading h1 span {
                display: block;
            }
            .flat-heading h1 span:first-child {text-transform: uppercase;}
            .flat-heading h1 span:last-child {font-size: 18px; font-weight: 400;}

        .flat-heading .btn-success, .flat-heading .link-mobile {
            display: none;
        }

    .flat-container {
        display: flex;
        flex: 1 0 0;
        max-height: calc(100% - 84px);
    }

        .floor-info {
            padding: 80px 25px 0;
            flex: 0 0 33.33333333%;
        }

            .floor-caption {
                margin: 0;
                padding: 10px 0;
                color: #23334A;
                font-size: 14px;
                text-align: center;
                text-transform: uppercase;
            }
            .floor-caption.top {border-bottom: 1px solid rgba(7, 40, 38, .3);}
            .floor-caption.bottom {border-top: 1px solid rgba(7, 40, 38, .3);}

            .floor-svg {
                padding: 30px 0;
                position: relative;
            }

                .svg-flat {
                    cursor: pointer;
                    fill: #ffffff
                }
                .svg-flat + text {pointer-events: none;}

                .svg-flat:hover {fill: #efe9e6;}
                .svg-flat:hover + text {fill: #23334A !important; display: block !important;}
                .svg-flat.disabled {cursor: not-allowed; fill: #86897e;}
                .svg-flat.disabled:hover + text {fill: #D8D3C5 !important;}
                .svg-flat.active, .svg-flat.disabled.active {fill: #23334A;}

                .floor-svg img {
                    position: absolute;
                    bottom: 25%;
                    left: 50%;
                    z-index: 25;
                }

            .floor-info .btn-block {
                margin: 30px 0 0;
                display: flex;
                align-items: center;
                flex-direction: column;
            }

                .floor-plan {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    font-size: 13px;
                    font-weight: 600;
                    text-transform: uppercase;
                }

                    .floor-plan svg {
                        margin-bottom: 10px;
                        fill: #23334A;
                    }
                    .floor-plan:hover svg, .floor-plan:focus svg {fill: #000000;}

                .floor-info .btn {
                    margin: 30px 0 0;
                }

        .flat-info {
            padding: 0 25px;
            flex: 0 0 66.66666667%;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

            .flat-info > .btn-success {
                display: none;
            }

            .flat-info ul {
                margin: 0;
                padding: 0;
                list-style: none;
                text-align: center;
            }

                .flat-info ul li {
                    margin-bottom: 15px;
                    display: inline-block;
                    color: #86897e;
                    font-size: 18px;
                    font-weight: 700;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
                .flat-info ul li:not(:last-child) {margin-right: 80px;}

                    .flat-info ul li .text-lg {
                        display: block;
                        color: #c6bbaf;
                        font-size: 64px;
                        line-height: 80px;
                        text-transform: none;
                    }

            .flat-info .position-relative {
                max-height: calc(100% - 122px);
                text-align: center;
            }

                .flat-info .position-relative img {
                    max-width: 100%;
                    max-height: 100%;
                }

            .flat-plan {
                display: none;
            }


/* --- STAGE --- */


.stage-main {
    /* padding: 73px 25px 50px 165px; */
    padding: 73px 125px 50px 265px;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 100;
}
    .stage-main .section-control{
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        margin-bottom: 30px;
        margin-top: 20px;
    }
        .stage-main .section-control > .compass {
            width: auto;
            height: 90px;
            fill: #000;
        }

        .stage-main .floor-display {
            position: static;
            display: flex;
            width: auto;
            height: auto;
            margin: 0 auto;
            width: auto;
        }
            .section-control .floor-number{
                position: relative;
                margin-right: 20px;
                padding-right: 10px;
            }
                .section-control .floor-control{
                    right: 0;
                    left: auto;
                }

                .section-control #floorSelected{
                    padding: 0 10px;
                }

            .section-control .floor-flats {
                padding: 20px;
                justify-content: center;
            }
            .section-control .floor-flats:before {
                content: "";
                height: 50%;
                width: 1px;
                display: block;
                position: absolute;
                top: 50%;
                left: 0;
                z-index: 25;
                background: rgba(134, 137, 126, .2);
                transform: translate(0, -50%);
            }
                .floor-flats .text-lg{
                    /* font-size: 64px; */
                }


    .stage-main > p {
        margin: 0;
        padding: 10px 0;
        width: 100%;
        color: rgba(7, 40, 38, .3);
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
    }
    .stage-main > p:first-of-type {border-bottom: 3px solid rgba(7, 40, 38, .3);}
    .stage-main > p:last-of-type {border-top: 3px solid rgba(7, 40, 38, .3);}

    .stage-main .floor-scheme {
        width: 100%;
        /* max-height: calc(100% - 88px); */
        /* flex-grow: 1; */
        display: flex;
        align-items: flex-start;
        position: relative;
    }

        .stage-main .floor-svg {
            padding: 90px 0px;
            height: 100%;
            flex-grow: 1;
        }

            .stage-main .floor-svg svg {
                width: 100%;
                height: auto;
            }

                .stage-main .floor-svg svg text {
                    /*display: none;*/
                    transform: translateX(-50px);
                    /*fill: #efe9e6;*/
                    fill: #000;
                    font-size: 1.25em;
                    font-weight: 500;
                    text-transform: uppercase;
                }
                .stage-main .floor-svg svg .disabled + text {display: inline;}

        

    .stage-link {
        height: 64px;
        width: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 25px;
        left: 165px;
        z-index: 25;
        transition: border-color .4s ease-in-out;
        cursor: pointer;
        outline: transparent !important;
        background: transparent;
        border: 4px solid #c6bbaf;
    }
    .stage-link:hover, .stage-link:focus {border-color: #86897e;}

        .stage-link svg {
            height: 34px;
            transition: fill .4s ease-in-out;
            fill: #c6bbaf;
        }
        .stage-link:hover svg, .stage-link:focus svg {fill: #86897e;}


/* --- WIDGETS --- */


.widget-features {
    padding: 170px 0 120px 140px;
    display: flex;
    overflow: hidden;
}

    .widget-features > div {
        flex: 0 0 50%;
    }
    .widget-features > div:first-child {
        padding: 0 calc(8.33333334% - 5px);
    }
    .widget-features .wrapper-owl-simple {
        max-width: 50%;
    }
        .features-card{
            display: block;
            text-decoration: none;
            font-weight: 400;
        }
        .features-card:hover{
            text-decoration: none;
        }

        /* .features-scroll .simplebar-content {
            display: flex;
        }

            .features-card {
                margin: 0 calc(16.66666667% - 5px) 0 0;
                padding: 0 0 15px;
                flex: 0 0 50%;
            }

                .features-card .background {
                    margin: 0 0 15px;
                    padding: 160% 0 0;
                } */

.widget-showroom,
.widget-indoors {
    padding: 50px 0 50px 140px;
}

    .showroom-nav {
        margin: 10px 0 60px;
        justify-content: center;
    }

        .showroom-nav .nav-item {
            display: flex;
            align-items: center;
        }
        .showroom-nav .nav-item + .nav-item:before {
            content: "/";
            margin: 0 20px;
            color: #D8D3C5;
            font-size: 32px;
            font-weight: 300;
        }

            .showroom-nav .nav-link {
                padding: 0;
                transition: color .4s ease-in-out, border-color .4s ease-in-out;
                border-bottom: 2px dotted #c6bbaf;
                color: #c6bbaf;
                font-size: 14px;
                font-weight: 700;
                text-decoration: none;
                text-transform: uppercase;
            }
            .showroom-nav .nav-link:hover, .showroom-nav .nav-link:focus {
                color: #23334A;
                border-color: #23334A;
            }
            .showroom-nav .nav-link.active {
                border-bottom: 2px dotted transparent;
                color: #23334A;
            }

    .showroom-card-block {
        padding: 0 0 0 20%;
        width: calc(41.66666667vw - 117px);
    }
    .showroom-card-block.down {padding: 20% 0 0 20%;}

        .showroom-card {
            font-size: 14px;
            line-height: 24px;
        }

            .showroom-card .background {
                margin-bottom: 40px;
                padding-top: 100%;
                display: block;
                /*border: 1px solid #eaeaea;*/
                border: 0;
                background-size: contain;
            }

            .showroom-card h3 {
                margin-bottom: 0;
            }

                .showroom-card h3 a {
                    font-weight: 700;
                    text-decoration: none;
                }

            .showroom-card p {
                margin: 20px 0 0;
            }

                .showroom-size {
                    margin-left: 20px;
                    color: #c6bbaf;
                    font-size: 13px;
                    font-weight: 600;
                }

            .list-sizes {
                margin: 0;
                padding: 0;
                list-style: none;
                font-size: 13px;
                font-weight: 700;
            }

                .list-sizes li {
                    display: inline-block;
                    margin-right: 16px;
                }

                    .list-sizes li a {
                        transition: color .4s ease-in-out, border .4s ease-in-out;
                        border-bottom: 1px solid #c6bbaf;
                        color: #c6bbaf;
                        text-decoration: none;
                    }
                    .list-sizes li a:hover, .list-sizes li a:focus {
                        border-bottom: 1px solid #86897e;
                        color: #86897e;
                    }
                    .list-sizes li a.active {
                        border-bottom: 2px solid #86897e;
                        color: #86897e;
                    }

.widget-map {
    padding: 50px 60px 50px 140px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.widget-map.first {padding-top: 214px;}

    .map-block {
        margin: 0 8.33333334%;
        flex: 0 0 50%;
        position: relative;
    }

        #googleMap {
            padding-top: 100%;
        }

        .map-block svg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 25;
            pointer-events: none;
        }

    .widget-map > div:last-child {
        flex: 0 0 33.33333334%;
    }

        .widget-map h2 {
            margin: 0 0 20px;
        }

        .collapse-map {
            border-bottom: 1px solid #D8D3C5;
        }

            .collapse-map > a {
                padding: 0 20px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                transition: border-color .4s ease-in-out, color .4s ease-in-out;
                border-top: 1px solid #D8D3C5;
                color: #86897e;
                text-decoration: none;
            }
            .collapse-map > a[aria-expanded="true"],
            .collapse-map > a:hover, .collapse-map > a:focus {
                border-color: #23334A;
                color: #23334A;
            }
            .collapse-map > a:before {
                content: "";
                height: 1px;
                width: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 25;
                transition: background-color .4s ease-in-out;
                background-color: transparent;
            }
            .collapse-map > a[aria-expanded="true"]:before {
                background-color: #23334A;
            }

                .collapse-map > a svg {
                    width: 10px;
                    transition: fill .4s ease-in-out;
                    fill: #86897e;
                }
                .collapse-map > a[aria-expanded="true"] svg,
                .collapse-map > a:hover svg, .collapse-map > a:focus svg {
                    fill: #23334A;
                }

            .collapse-map > a ~ div >div {
                padding: 0 20px 10px;
                color: #86897e;
                font-size: 13px;
                line-height: 16px;
            }

                .collapse-map > a ~ div > div p {
                    margin-bottom: 10px;
                }

.widget-equipment {
    padding: 50px 60px 50px 140px;
}

    .widget-equipment > h2 {
        margin: 0 0 20px 8.33333334%;
    }

    .widget-equipment > p {
        margin-left: 8.33333334%;
        width: 33.33333334%;
    }

    .list-equipment {
        margin: 20px 0 0 8.33333334%;
        padding: 0;
        list-style: none;
        width: 41.66666666%;
    }

        .list-equipment li {
            padding: 15px 20px 5px;
            display: flex;
            border-top: 1px solid #D8D3C5;
            color: #333333;
            font-size: 13px;
            line-height: 18px;
        }

            /* .list-equipment li h3 { */
            .list-equipment li .name-item-section {
                padding-right: 20px;
                flex: 0 0 40%;
                display: flex;
                flex-direction: column;
                
            }
                .list-equipment li h3{
                    color: #86897e;
                    font-weight: 600;
                    text-transform: none;
                }
                .list-equipment li .icon-element{
                    width: 70px;
                    height: 70px;
                    /*background-color: #072826;*/
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    order: 2;
                    overflow: hidden;
                }
                    .list-equipment li .icon-element svg{
                        width: auto;
                        max-width: 40px;
                        height: 40px;
                        fill: #c6bbaf;
                    }
                    .list-equipment li .icon-element img{
                        object-fit: cover;
                        object-position: center;
                    }

.widget-outdoors {
    padding: 50px 0 0 140px;
    position: relative;
}

    .banner-outdoors {
        padding: 25px 30px 10px;
        width: calc(41.66666667% - 83px);
        position: absolute;
        bottom: 0;
        left: calc(58.33333333% + 23px);
        z-index: 50;
        background: #ffffff;
    }

        .banner-outdoors ul {
            margin: 15px 0 0;
            padding: 0;
            list-style: none;
            color: #23334A;
            font-size: 14px;
        }

            .banner-outdoors ul li {
                margin-bottom: 15px;
                display: flex;
            }

                .banner-outdoors ul li svg {
                    margin: 4px 8px 0 0;
                    flex: 0 0 25px;
                    fill: #86897e;
                }

                .banner-outdoors ul li span {
                    flex-grow: 1;
                }

.widget-contact {
    padding: 100px 60px 100px 140px;
    display: flex;
    flex-wrap: wrap;
}

    .widget-contact > div {
        padding: 0 8.33333334%;
        flex: 0 0 50%;
    }

        .widget-contact > div h2 {
            margin-bottom: 20px;
        }

    .widget-contact > form {
        padding-top: 45px;
        flex: 0 0 50%;
    }

.widget-numbers {
    padding: 80px 60px 10px 140px;
}

    .widget-numbers ul {
        margin: 0;
        padding-left: 8.33333333%;
        list-style: none;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .widget-numbers ul li {
            margin-bottom: 30px;
            display: flex;
            color: #86897e;
            font-size: 18px;
            text-transform: uppercase;
        }

            .widget-numbers ul li .text-lg {
                margin-right: 5px;
                color: #23334A;
                font-size: 96px;
                font-weight: 700;
                line-height: 76px;
            }
/* --- circular image --- */                
.circular_image{    
    width: 100%;
    height: 100vh;
    min-height: 300px;
}
.vr-main {
    padding: 0px 0px 0px 140px;
}
 /* --- cover info --- */
 .cover-info {
     position: fixed;
     width: 100vw;
     height: 100vh;
     top: 0;
     left: 0;
     background-color: rgba(7, 40, 38, 0.5);
     padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 110;
     text-align: center;
     color: #ffffff;
 }
 .cover-info.hidden{
     display: none;
 }
    .cover-info svg{
        width: 60px;
        height: 60px;
        fill: #ffffff;
    }

    .cover-info p {
        margin: 15px 0 30px 0;
    }
