@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css);
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

:root {
	--deg1: "0deg";
	--radius:12px;
	--menu-radius:32px;	
	--blur:100px;
    --blur-social:50px;
    --radius-social:12px;
	--mini-blur:25px;
}
#ui-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
  }
  
#map-overlay {
    pointer-events: auto;
    position: relative;
    bottom: 5px;
    left: 5px;
    width: 240px;
    height: 320px;
    color: rgba(255,255,255,.7);
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    font-size: 12px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
    #map-overlay:focus {
        outline: none;
    }

    #map-overlay:hover {
        cursor: pointer
    }

    #map-overlay.hidden {
        display: none;
        visibility: hidden
    }

    #map-overlay .map-overlay-edge-text {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute
    }

        #map-overlay .map-overlay-edge-text.top {
            top: -17px;
            width: 100%
        }

        #map-overlay .map-overlay-edge-text.right {
            right: -17px;
            height: 100%
        }

        #map-overlay .map-overlay-edge-text.bottom {
            bottom: 2px;
            width: 100%
        }

            #map-overlay .map-overlay-edge-text.bottom.hidden {
                opacity: 0
            }

        #map-overlay .map-overlay-edge-text.left {
            left: 2px;
            height: 100%
        }

            #map-overlay .map-overlay-edge-text.left.hidden {
                opacity: 0
            }

            #map-overlay .map-overlay-edge-text.left > div, #map-overlay .map-overlay-edge-text.bottom > div, #map-overlay .map-overlay-edge-text.feet:after, #map-overlay .map-overlay-edge-text.meter:after {
                background-color: rgba(94,94,95,.7)
            }

        #map-overlay .map-overlay-edge-text.left, #map-overlay .map-overlay-edge-text.right {
            writing-mode: vertical-rl
        }

        #map-overlay .map-overlay-edge-text.feet:after {
            content: " ft";
            white-space: pre
        }

        #map-overlay .map-overlay-edge-text.meter:after {
            content: " m";
            white-space: pre
        }

.apartment-selection-toggle {
    pointer-events: all;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 20px;
    width: auto;
    height: auto;
    background: none;
    border-radius: 30px;
    border: 1px solid #fff;
    outline: none;
    transition: transform .2s ease,backdrop-filter .2s ease;
    z-index: 0
}

    .apartment-selection-toggle.hidden {
        display: none
    }

@media all and (max-width: 720px),(max-height: 600px) {
    .apartment-selection-toggle {
        width: 30px;
        height: 30px;
        left: unset;
        right: 70px;
        bottom: 8px;
        border-radius: 100%;
        padding: 15px;
        margin-right: 8px
    }

        .apartment-selection-toggle > div {
            display: none !important
        }

        .apartment-selection-toggle > i {
            margin-right: 0 !important
        }
}

.apartment-selection-toggle:hover {
    background-color: rgba(130,130,130,.3);
    backdrop-filter: blur(8px);
    transform: translateX(-50%) scale(1.15);
    cursor: pointer
}

.apartment-selection-toggle.selected {
    background-color: #fff
}

    .apartment-selection-toggle.selected > div, .apartment-selection-toggle.selected > i {
        color: #483b51
    }

.apartment-selection-toggle > div {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff
}

.apartment-selection-toggle > i {
    display: flex;
    margin-right: 10px;
    color: #fff
}

    .apartment-selection-toggle > i::before {
        display: flex;
        justify-content: center;
        align-items: center
    }

.submenu > div {
    display: flex !important;
    justify-content: center;
    align-items: center
}

.submenu .indicators {
    position: relative;
    opacity: .3;
    height: 15px;
    width: 10px;
    display: inline-block
}

    .submenu .indicators i {
        position: absolute;
        transition: all .2s
    }

    .submenu .indicators .up {
        display: none
    }

.submenu.current .indicators .up {
    display: inline;
    opacity: .8
}

.submenu.current .indicators .down {
    display: none
}

.submenu-container {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0) !important;
    width: auto;
    display: none !important
}

    .submenu-container.visible {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap
    }

    .submenu-container .submenu-item {
        margin: 10px
    }

.contrast .menu-section ul li.button, .contrast.options-button {
    border-radius: 5px;
    margin: 0 2px;
    padding: 6px 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.header {
    display: flex;
    z-index: 1002;
    flex-flow: row wrap;
    text-align: center;
    pointer-events: visible;
    width: 100%;
    color: #fff;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    line-height: 1.618em;
    font: inherit;
    vertical-align: baseline;
    font-weight: 400;
    letter-spacing: .1em;
    text-shadow: 1px 1px 2px #595959;
    transition: height 1.5s,backdrop-filter .3s,background 1.5s ease-out,-webkit-backdrop-filter .3s
}

    .header.hidden, .header > .hidden {
        display: none;
        visibility: hidden
    }

        .header.hidden *, .header > .hidden * {
            visibility: hidden
        }

            .header.hidden *:before, .header > .hidden *:before {
                visibility: hidden
            }

    .header:hover {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: rgba(130,130,130,.3)
    }

        .header:hover.contrast .menu-section ul li.button, .header:hover.contrast .logo .img-container img {
            border-radius: 0;
            -webkit-backdrop-filter: unset;
            backdrop-filter: unset;
            background: unset
        }

@media all and (max-width: 720px),(max-height: 600px) {
    .header:hover {
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
        background: unset
    }
}

@media all and (max-width: 720px),(max-height: 600px) {
    .header.active {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: rgba(130,130,130,.3)
    }

        .header.active.contrast .menu-section ul li.button, .header.active.contrast .logo .img-container img {
            border-radius: 0;
            -webkit-backdrop-filter: unset;
            backdrop-filter: unset;
            background: unset
        }
}

.header .menu-section.empty {
    padding: 0;
    border-bottom: 0
}

.header .center {
    border-top: #fff 1px solid;
    border-bottom: #fff 1px solid
}

    .header .center ul {
        display: inline-block;
        text-align: center
    }

.header .aside {
    border-top: none;
    border-bottom: #fff 1px solid
}

    .header .aside:empty {
        display: none;
         visibility: hidden;
    }


.header .embedded .center, .header .embedded .aside {
    border-top: none
}

.header ul {
    pointer-events: visible;
    z-index: 1002;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 4px 0;
    -webkit-transform: unset;
    transform: unset
}

    .header ul.show {
        -webkit-transition: opacity 2s ease-out;
        transition: opacity 2s ease-out;
        opacity: 1
    }

    .header ul.hidden {
        display: none
    }

    .header ul li {
        padding: 0px;
        margin: 0 12px;
        display: inline-block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .header ul li.hidden {
            display: none
        }

@media all and (max-width: 720px),(max-height: 600px) {
    .header ul li {
        margin: 0 6px
    }
}

.header ul li.h1 {
    font-size: 13px;
    margin-bottom: 6px;
    text-transform: uppercase
}

.header ul li.button {
    cursor: pointer
}

.header ul li.current div:before, .header ul li.current label:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.header ul li .menu-btn {
    display: inline-block;
    position: relative;
    text-decoration: none;
    transition: all .2s ease-in-out
}

@media all and (hover: hover)and (pointer: fine) {
    .header ul li .menu-btn:hover {
        transform: scale(1.15)
    }

        .header ul li .menu-btn:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1)
        }
}

.header ul li .menu-btn.disabled {
    color: rgba(255,255,255,.3);
    cursor: not-allowed
}

    .header ul li .menu-btn.disabled:hover {
        transform: unset
    }

        .header ul li .menu-btn.disabled:hover:before {
            visibility: hidden
        }

        .header ul li .menu-btn.disabled:hover:after {
            content: "Not available";
            width: 128px;
            bottom: 120%;
            left: 50%;
            margin-left: -64px;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 5px 8px;
            border-radius: 6px;
            position: absolute;
            z-index: 1
        }

.header ul li .menu-btn:before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: -4px;
    left: 0;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    background-color: #1e90ff;
    height: 2px;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.header .logo {
    display: flex;
    width: 100%;
    align-self: center
}

    .header .logo.embedded, .header .logo.hidden {
        display: none;
        visibility: hidden
    }

        .header .logo.embedded *, .header .logo.hidden * {
            visibility: hidden
        }

            .header .logo.embedded *:before, .header .logo.hidden *:before {
                visibility: hidden
            }

@media all and (max-width: 720px),(max-height: 600px) {
    .header .logo {
        padding-bottom: 0
    }
}

.header .logo .left img {
    max-height: 80px
}

@media all and (max-width: 720px),(max-height: 600px) {
    .header .logo .left img {
        max-height: 60px
    }
}

.header .logo .right img {
    max-height: 75px
}

@media all and (max-width: 720px),(max-height: 600px) {
    .header .logo .right img {
        max-height: 50px
    }
}

.header .logo img {
    max-width: 100%
}

.header .logo .center {
    border: 0;
    flex: 4 0px;
    order: 2
}

.header .logo .a {
    display: block
}

.header .logo .img-container {
    padding: 10px;
    margin: 0 6px;
    min-width: 100px;
    width: 16vw;
    height: 100%;
    white-space: nowrap
}

@media all and (max-width: 900px) {
    .header .logo .img-container {
        width: 22vw
    }
}

@media all and (max-width: 720px) {
    .header .logo .img-container {
        width: 28vw
    }
}

@media all and (max-width: 720px),(max-height: 600px) {
    .header .logo .img-container {
        padding-bottom: 0
    }
}

.header .logo .left {
    order: 1;
    flex: 1;
    display: flex;
    padding: 10px 0 10px 10px;
    align-self: center;
    flex-flow: row
}

    .header .logo .left .img-container {
        text-align: left;
        width: 12vw
    }

@media all and (max-width: 900px) {
    .header .logo .left .img-container {
        width: 22vw
    }
}

@media all and (max-width: 720px) {
    .header .logo .left .img-container {
        width: 28vw
    }
}

@media all and (max-width: 720px),(max-height: 600px) {
    .header .logo .left {
        padding-bottom: 0
    }

        .header .logo .left .img-container {
            width: 12vw
        }
}

.header .logo .right {
    order: 3;
    padding: 10px 10px 10px 0px;
    align-self: center;
    display: flex;
    flex: 1;
    flex-flow: row-reverse
}

@media all and (max-width: 720px),(max-height: 600px) {
    .header .logo .right {
        padding-bottom: 4px
    }
}

.header .logo .right .img-container {
    text-align: right
}

.header .menu {
    display: flex;
    padding: 0;
    flex-flow: row wrap;
    vertical-align: baseline
}

    .header .menu > * {
        padding: 10px
    }

    .header .menu a {
        text-decoration: none;
        color: #fff
    }

@media all and (max-width: 720px),(max-height: 600px) {
    .header .menu {
        display: none;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
        background: none;
        transition: height 1.5s,backdrop-filter .3s,background 1.5s ease-out,-webkit-backdrop-filter .3s
    }

        .header .menu.active {
            display: flex;
            position: relative
        }
}

@media all and (min-width: 720px) {
    .header .center {
        border-bottom: #fff 1px solid
    }

    .header .aside {
        flex: 1 0 0;
        border-bottom: #fff 1px solid
    }

    .header .left ul {
        text-align: right
    }

    .header .right ul {
        text-align: left
    }
}

@media all and (min-width: 910px) {
    .header .center {
        flex: 4 0px
    }

    .header .aside {
        border-top: #fff 1px solid
    }

        .header .aside:empty {
            display: block
        }

        .header .aside.left {
            order: 4
        }

    .header .center {
        order: 5
    }

    .header .aside.right {
        order: 6
    }

    .header .menu-footer {
        order: 7
    }

    .header .left ul {
        text-align: left;
        margin-left: 4px
    }

    .header .right ul {
        text-align: right;
        margin-right: 4px
    }

    .header .menu-section.empty {
        border-top: #fff 1px solid;
        border-bottom: #fff 1px solid
    }
}

.header > *, .menu > *, .header .logo > * {
    flex: 1 100%
}

.options-button {
    display: none;
    cursor: pointer;
    text-shadow: 1px 1px 2px #595959
}

    .options-button.hidden {
        display: none;
        visibility: hidden
    }

        .options-button.hidden * {
            visibility: hidden
        }

            .options-button.hidden *:before {
                visibility: hidden
            }

@media all and (max-width: 720px),(max-height: 600px) {
    .options-button {
        pointer-events: visible;
        font-size: 13px;
        font: inherit;
        vertical-align: baseline;
        letter-spacing: 1.6px;
        text-rendering: geometricprecision;
        text-transform: uppercase;
        display: flex;
        margin: 0px 16px;
        align-self: flex-start;
        padding: 4px 0px 0px 0px;
        flex: 0 0;
        color: #fff
    }

        .options-button.active {
            position: absolute;
            right: 0px
        }

            .options-button.active:after {
                font-size: 13px;
                content: attr(data-content)
            }

        .options-button:after {
            font-size: 13px;
            content: attr(data-content)
        }

        .options-button span {
            display: flex;
            align-self: center;
            color: #1e90ff
        }

            .options-button span:before {
                align-self: center
            }
}

.dropdown-item {
    color: #f2f2f2;
    width: 100%;
    padding: 20px 35px 20px 5px !important;
    transition: all .3s;
    box-sizing: content-box;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    white-space: pre-line;
    margin: 0 !important
}

    .dropdown-item::before, .dropdown-item::after {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        background-color: rgba(0,0,0,0);
        border-radius: 1px;
        margin-right: 10px
    }

    .dropdown-item.active::before {
        background-color: #1e90ff
    }

@media all and (max-width: 720px),(max-height: 600px) {
    .dropdown-item {
        background-color: rgba(46,51,60,.77)
    }
}

@media all and (hover: hover)and (pointer: fine) {
    .dropdown-item:hover {
        background-color: #575b63;
        cursor: pointer
    }
}

.dropdown {
    position: relative;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column;
    width: auto
}

    .dropdown input[type=checkbox] {
        display: none
    }

@media all and (hover: hover)and (pointer: fine) {
    .dropdown:hover .dropdown-items, .dropdown:focus-within .dropdown-items {
        opacity: 1;
        transform: translateY(-5px) translateX(-50%);
        visibility: visible;
        z-index: 1
    }
}

@media all and (max-width: 720px),(max-height: 600px) {
    .dropdown input[type=checkbox]:checked ~ .dropdown-items {
        opacity: 1;
        transform: translateY(-5px) translateX(-50%);
        visibility: visible;
        z-index: 1
    }

    .dropdown input[type=checkbox]:checked ~ .dropdown-title .indicators .up {
        opacity: .8
    }

    .dropdown input[type=checkbox]:checked ~ .dropdown-title .indicators .down {
        opacity: 0
    }
}

.dropdown .dropdown-title {
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

    .dropdown .dropdown-title .indicators {
        position: relative;
        opacity: .3;
        height: 15px;
        width: 10px;
        display: inline-block
    }

        .dropdown .dropdown-title .indicators i {
            position: absolute;
            transition: all .2s
        }

        .dropdown .dropdown-title .indicators .up {
            opacity: 0
        }

.dropdown .dropdown-items {
    width: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-50%);
    transition: .2s all .1s ease-out;
    z-index: 0;
    left: 50%;
    top: 35px;
    visibility: hidden
}

@media all and (max-width: 720px),(max-height: 600px) {
    .dropdown .dropdown-items {
        top: 20px
    }
}

.dropdown .dropdown-items .spacer {
    width: 0;
    height: 0;
    border: 15px solid rgba(0,0,0,0);
    border-top: 0;
    margin: unset;
    margin-bottom: -6px;
    z-index: 2
}

.dropdown .dropdown-items .item-wrapper {
    z-index: 3;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 .15em .25em rgba(0,0,0,.25);
    background-color: rgba(91,91,91,.35);
    backdrop-filter: blur(8px);
    border: 1px solid #fff
}

    .dropdown .dropdown-items .item-wrapper li {
        backdrop-filter: blur(8px);
        z-index: 4
    }

#info-row {
    order: 1;
    padding: 10px 0px;
    margin: 0 16px 0px 10px;
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 auto;
    justify-content: flex-start;
    width: 100%;
    color: #fff;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    font-stretch: 100%;
    font-weight: 400;
    letter-spacing: 1.6px;
    font-size: 13px;
    text-rendering: geometricprecision;
    text-shadow: none;
    text-size-adjust: 100%;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #595959
}

    #info-row.contrast {
        margin: 0
    }

        #info-row.contrast #info-overlay {
            border-radius: 5px;
            margin: 0 2px;
            padding: 6px 10px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px)
        }

@media all and (max-width: 720px),(max-height: 600px) {
    #info-row {
        padding-top: 0
    }
}

@media all and (max-width: 720px)and (max-height: 520px),(max-height: 600px)and (max-height: 520px) {
    #info-row {
        justify-content: flex-end
    }
}

@media all and (max-width: 720px),(max-height: 600px) {
    #info-row.mobile-hidden {
        visibility: hidden
    }
}

#info-row.hidden {
    visibility: hidden
}

#info-row .collapsible {
    font: unset;
    background-color: unset;
    color: #fff;
    pointer-events: visible;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    text-transform: uppercase;

    padding-right: 16px;
}

@media all and (orientation: portrait) {
    #info-row .collapsible .info-title {
        position: relative;
        left: 16px;
        
    }
}

@media all and (orientation: portrait) {
    #info-row .collapsible .collapser-icon {
        position: absolute
    }
}

#info-row .collapsible .collapser-icon:before {
    content: "+";
    color: #1e90ff;
    font-stretch: 100%;
    letter-spacing: 0px;
    line-height: 16px
}

@media all and (max-width: 720px),(max-height: 600px) {
    #info-row .collapsible .collapser-icon:before {
        font-size: 16px;
        font-weight: bolder;
        font-family: "Arial Black",Gadget,sans-serif
    }
}

#info-row .collapsible.active .collapser-icon:before {
    content: "-";
    letter-spacing: 2px
}

#info-row .content {
    text-transform: uppercase;
    padding: 0 18px;
    display: none;
    overflow: hidden;
    list-style-type: none;
    font-size: 12px
}

#info-overlay {
    text-transform: uppercase;
    display: block;
    padding: 6px 0px 0 0px
}

@media all and (max-width: 720px),(max-height: 600px) {
    #info-overlay {
        padding-top: 4px
    }
}

#info-overlay ul {
    text-align: left
}

    #info-overlay ul li > a {
        color: #fff;
        pointer-events: visible
    }

div.layout {
    z-index: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    border: 0
}

.top {
    position: relative;
    justify-content: flex-start;
    flex: 0 1 auto;
    z-index: 3
}

.middle {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex: 1 1 auto;
    z-index: 2
}

@media all and (max-width: 720px)and (max-height: 520px),(max-height: 600px)and (max-height: 520px) {
    .middle {
        flex-direction: row
    }
}

.bottom {
    position: absolute;
    bottom: 0px;
    width: 100%
}

p {
    line-height: 1.4
}

.social-sharing {
    pointer-events: all;
    display: block;
    opacity: 100%;
    max-height: 0;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    right: 5px;
    width: 300px;
    padding: 20px;
    border: 1px solid #d2d2d2;
    border-radius: 3px 3px 0 0;
    z-index: 1001;
    -webkit-transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms;
    transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms
}

    .social-sharing.hidden {
        opacity: 0;
        pointer-events: none
    }

    .social-sharing h3 {
        margin-top: 5px
    }

    .social-sharing .icons {
        width: 100%;
        text-align: center
    }

        .social-sharing .icons.up {
            display: inline-block
        }

        .social-sharing .icons a, .social-sharing .icons button {
            color: #ffffff
        }

            .social-sharing .icons a i, .social-sharing .icons button i {
                display: inline-block;
                vertical-align: middle;
                padding: 3px;
                color: rgba(255, 255, 255, 0.5);
                transform: scale(1);
                -webkit-transition: transform .2s ease;
                transition: transform .2s ease
            }

                .social-sharing .icons a i:hover, .social-sharing .icons button i:hover {
                    color: rgba(224, 224, 224, 0.5);
                    transform: scale(1.1)
                }

        .social-sharing .icons .copy {
            text-align: left;
            width: 100%;
            display: block;
            cursor: pointer;
            padding-top: 16px
        }

            .social-sharing .icons .copy .copyUrlText {
                display: inline-block;
                width: 80%;
                vertical-align: middle
            }

                .social-sharing .icons .copy .copyUrlText input {
                    background-color: rgba(255,255,255,.8);
                    cursor: pointer;
                    display: inline-block;
                    vertical-align: middle;
                    width: 100%;
                    padding-top: 7px;
                    padding-bottom: 5px
                }

            .social-sharing .icons .copy .tooltip {
                font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
                position: relative;
                display: inline-block;
                width: 100%
            }

                .social-sharing .icons .copy .tooltip .tooltiptext {
                    visibility: hidden;
                    width: 240px;
                    /* border-top: 1px solid rgba(255,255,255,.3); */
                    /* background-color: #333; */
                    color: #fff;
                    text-align: center;
                    /* border-radius: 6px; */
                    padding: 5px;
                    position: absolute;
                    z-index: 1;
                    bottom: 120%;
                    left: 50%;
                    margin-left: -140px;
                    opacity: 0;
                    -webkit-transition: opacity 0s;
                    transition: opacity 0s;

                    backdrop-filter: blur(var(--blur-social));
                    -webkit-backdrop-filter: blur(var(--blur-social));
                    background: rgba(0, 0, 0, 0.05);
                    border-radius: var(--radius-social);
                    box-shadow: 0 0px 64px rgba(0, 0, 0, 0.557);
                    filter: saturate(133%);
                    overflow: hidden; /* important to keep blur inside */

                }

                    .social-sharing .icons .copy .tooltip .tooltiptext::after {
                        content: "";
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        margin-left: -5px;
                        border-width: 5px;
                        border-style: solid;
                        /* border-color: #555 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) */
                    }

@media all and (hover: hover)and (pointer: fine) {
    .social-sharing .icons .copy .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0s;
        transition: opacity 0s
    }
}

@media not all and (hover: hover)and (pointer: fine) {
    .social-sharing .icons .copy .tooltiptext.visible {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0s;
        transition: opacity 0s
    }
}

.social-sharing .sharing-button {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #fff;
    pointer-events: all
}

.social-sharing.down {
    right: 3px;
    max-height: 0;
    border: none;
    pointer-events: none;
    background: none;
    -webkit-transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease;
    transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease
}

    .social-sharing.down * {
        max-height: 0;
        visibility: hidden;
        opacity: 0;
        display: none;
        -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s;
        transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s
    }

    .social-sharing.down h3 {
        opacity: 0;
        -webkit-transition: opacity .2s;
        transition: opacity .2s;
    }

    .social-sharing .sharing-title {
       color:rgba(255, 255, 255, 0.9);
    }
    .social-sharing .sharing-text {
       color:rgba(255, 255, 255, 0.5);
    }

    .social-sharing.down .sharing-button {
        display: block;
        visibility: visible;
        opacity: 100%;
        -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        transform: scale(1);
        top: 0px;
        width: 30px;
        height: 30px;
        max-height: 30px
    }

@media all and (hover: hover)and (pointer: fine) {
    .social-sharing.down .sharing-button:hover {
        background: rgba(130,130,130,.3);
        transform: scale(1.15)
    }
}

.social-sharing.down .sharing-button .share-icon {
    display: block;
    visibility: visible;
    opacity: 100%;
    padding-top: 7px;
    color: #fff
}

#copyUrl {
    padding: 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    color: white;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    max-width: 300px;

    backdrop-filter: blur(var(--blur-social));
    -webkit-backdrop-filter: blur(var(--blur-social));
    background: rgba(0, 0, 0, 0.05);

    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#copyUrl:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

#copyUrl:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.social-sharing.up {
    right: 10px;
    display: block;
    max-height: 1000px;
    visibility: visible;
    pointer-events: all;
    /* border: 1px solid #d2d2d2; */
    /* background: rgba(255,255,255,.9); */
    -webkit-transition: right .2s,max-height .2s,background 0ms,opacity .2s,visibility .2s;
    transition: right .2s,max-height .2s,background 0ms,opacity .2s,visibility .2s;


    backdrop-filter: blur(var(--blur-social));
    -webkit-backdrop-filter: blur(var(--blur-social));
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-social);
    box-shadow: 0 0px 64px rgba(0,0,0, 0.1);
    filter: saturate(133%);
    overflow: hidden; /* important to keep blur inside */

}

    .social-sharing.up * {
        max-height: 1000px;
        display: inline-block;
        visibility: visible;
        opacity: 100%;
        -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .2s,visibility .2s;
        transition: right .2s,max-height .2s,background .2ms,opacity .2s,visibility .2s
    }

    .social-sharing.up p {
        display: block
    }

    .social-sharing.up h3 {
        display: block;
        opacity: 100%
    }

    .social-sharing.up .sharing-button {
        -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        top: 14px;
        right: 14px;
        width: 28px;
        height: 28px;
        border: 0;
    }

        .social-sharing.up .sharing-button:hover {
            background: rgba(0,0,0,0);
            transform: scale(1)
        }

        .social-sharing.up .sharing-button .share-icon {
            opacity: 0
        }

        .social-sharing.up .sharing-button::before, .social-sharing.up .sharing-button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 2px;
            background: rgba(255, 255, 255, 0.9);
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .social-sharing.up .sharing-button::before {
            transform: translate(-50%, -50%) rotate(45deg)
        }

        .social-sharing.up .sharing-button::after {
            transform: translate(-50%, -50%) rotate(-45deg)
        }

        .social-sharing.up .sharing-button:hover::before {
            transform: translate(-50%, -50%) rotate(135deg)
        }

        .social-sharing.up .sharing-button:hover::after {
            transform: translate(-50%, -50%) rotate(-135deg)
        }

@media screen and (max-width: 440px) {
    .social-sharing {
        right: 0px;
        padding: 20px;
        margin-left: 5px;
        margin-right: 5px;
        max-width: 270px
    }
}

.info-panel-backlayer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(130,130,130,.3);
    z-index: 1000
}

    .info-panel-backlayer.down .info-panel {
        max-height: 0;
        padding: 0px;
        border: 0px
    }

        .info-panel-backlayer.down .info-panel * {
            transition: opacity 0ms;
            opacity: 0;
            max-height: 0
        }

    .info-panel-backlayer.up .info-panel {
        max-height: 100%
    }

        .info-panel-backlayer.up .info-panel * {
            transition: opacity .3s;
            opacity: 1
        }

.info-panel {
    color: #fff;
    position: absolute;
    max-height: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    border: 0;
    z-index: 1001;
    transition: max-height .2s ease,padding .2s ease
}

    .info-panel * {
        opacity: 0;
        background: rgba(0,0,0,0)
    }

    .info-panel a {
        color: #fff
    }

    .info-panel .scroll-panel {
        display: flex;
        height: 100%;
        flex-direction: row;
        justify-content: center;
        overflow-y: auto;
        padding: 12px 0
    }

        .info-panel .scroll-panel .container {
            display: flex;
            min-width: 40%;
            max-width: 70%;
            flex-direction: row;
            justify-content: center
        }

            .info-panel .scroll-panel .container .content {
                display: inline-flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;
                margin-top: 0px;
                margin-bottom: 20px;
                border-radius: 8px;

            }

                .info-panel .scroll-panel .container .content .info-blur-wrapper {
                    position: relative;
                    backdrop-filter: blur(var(--blur));
                    -webkit-backdrop-filter: blur(var(--blur));
                    background: rgba(133,133,133,0.05);
                    border-radius: var(--radius);
                    box-shadow: 0 0px 64px rgba(0,0,0, 0.1);
                    filter: saturate(133%);
                    overflow: hidden; /* important to keep blur inside */
                }

                .glowstroke::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: var(--radius);
                    border: 2px solid transparent;
                    background: linear-gradient(var(--deg1), rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.33) 50%, rgba(255,255,255,0.0) 100%) border-box;
                    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
                    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
                    -webkit-mask-composite: destination-out;
                    mask-composite: exclude;
                    pointer-events: none;
                    z-index: 1;
                }
                .info-panel .scroll-panel .container .content .info-header {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    z-index: 1002;
                    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;

                    padding-left: 25px;
                    padding-right: 25px;
                    background: transparent;
                }

                .info-panel .scroll-panel .container .content .info-body {
                    padding: 8px 25px 28px;

                    display: flex;
                    overflow: auto;
                    border-bottom-left-radius: 8px;
                    border-bottom-right-radius: 8px;
                    z-index: 1003;
                    background: transparent;
                }

                    .info-panel .scroll-panel .container .content .info-body .body-content {
                        display: flex;
                        flex-flow: column;
                        flex: 1
                    }

                        .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails img {
                            margin: 8px 0
                        }

                        .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData span.key {
                            position: relative;
                            left: 10px;
                            font-weight: bold
                        }

                        .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData span.value {
                            float: right;
                            display: inline-block;
                            margin-right: 10px
                        }

                        .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .bottomBorder {
                            background-color: rgba(160,160,160,.7)
                        }

                        .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .bottomBorder {
                            border-bottom: 1px solid rgba(227,227,227,.3);
                            border-bottom-width: 1px;
                            border-bottom-style: solid;
                            border-bottom-color: rgba(227,227,227,.3)
                        }

                        .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .topBorder {
                            padding-left: 60px;
                            padding-right: 60px;
                            padding-top: 20px;
                            padding-bottom: 12px;
                            background-color: rgba(160,160,160,.7);
                            border-top: 1px solid rgba(227,227,227,.3);
                            border-top-width: 1px;
                            border-top-style: solid;
                            border-top-color: rgba(227,227,227,.3)
                        }

@media all and (max-width: 720px),(max-height: 600px) {
    .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .topBorder {
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 20px;
        padding-bottom: 12px;
        background-color: rgba(160,160,160,.7);
        border-top: 1px solid #e3e3e3;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(227,227,227,.3)
    }
}

.info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData {
    padding-top: 12px;
    padding-bottom: 12px
}

    .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData > ul {
        margin-top: 16px;
        margin-bottom: 24px;
        list-style-type: none;
        padding: 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        font-size: 1.4rem;
        line-height: 48px;
        padding-left: 30px;
        padding-right: 30px;
        text-align: left;
        text-decoration: none;
        font-family: Univers,Arial;
        font-size: 14px
    }

    .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData > ul {
        max-width: 1000px;
        margin-right: auto;
        margin-left: auto
    }

@media screen and (max-width: 600px) {
    .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData > ul {
        padding-left: 10px
    }
}

.info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData > ul li {
    border-bottom: 1px solid #ddd
}

    .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData > ul li b {
        font-weight: bold
    }

    .info-panel .scroll-panel .container .content .info-body .body-content .ApartmentDetails .objectData > ul li:last-child {
        border-bottom: none
    }

.info-panel .scroll-panel .container .content .info-body .body-content img {
    position: relative;
    margin: 14px 0;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%)
}

.info-panel .scroll-panel .container .content .info-body .body-content .descriptionWrapper {
    display: flex;
    flex-flow: column
}

    .info-panel .scroll-panel .container .content .info-body .body-content .descriptionWrapper .center {
        align-self: center
    }

    .info-panel .scroll-panel .container .content .info-body .body-content .descriptionWrapper a {
        color: #fff
    }

.info-panel .scroll-panel .container .content .info-body .body-content .videoWrapper {
    display: flex;
    flex: 1;
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

    .info-panel .scroll-panel .container .content .info-body .body-content .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

.info-panel .scroll-panel .container .content .info-body .body-content .documentWrapper {
    display: flex;
    flex: 1;
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

    .info-panel .scroll-panel .container .content .info-body .body-content .documentWrapper embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

.info-close {
    z-index: 1004;
    position: relative;
    width: 24px;
    height: 24px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    border-radius: 14px;
    padding: 2px;
    margin-top: 16px;
    margin-right: -10px
}

    .info-close::before, .info-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 3px;
        background: #333;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        background-color: #fff
    }

    .info-close::before {
        transform: translate(-50%, -50%) rotate(45deg)
    }

    .info-close::after {
        transform: translate(-50%, -50%) rotate(-45deg)
    }

    .info-close:hover::before {
        transform: translate(-50%, -50%) rotate(135deg)
    }

    .info-close:hover::after {
        transform: translate(-50%, -50%) rotate(-135deg)
    }

@media screen and (max-width: 440px) {
    .info-panel .scroll-panel .container {
        display: flex;
        flex: 0 1 86%
    }
}

.HelpWrapper {
    width: 100%;
    align-content: center
}

.HelpContent {
    margin: auto;
    padding: 0 12px 20px 12px;
    max-width: 560px;
    border: 1px green;

    max-height: 80vh; /* Adjust as needed */
    overflow-y: auto;
    padding-right: 12px; /* Prevent scrollbar from overlapping content */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Firefox */    
}
/* Hide scrollbar */
.HelpContent::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* Optional: remove background */
}
@media all and (max-width: 720px),(max-height: 600px) {
    .HelpContent {
        padding: 0 8px 20px 8px
    }
}

.HelpContent .title {
    margin: 0;
    text-transform: uppercase
}

.HelpContent ul {
    margin: 0 0 20px 0;
    list-style: none;
    padding: 12px
}

@media all and (max-width: 720px),(max-height: 600px) {
    .HelpContent ul {
        font-size: 15px;
        padding: 8px 4px
    }
}

.HelpContent ul li .action {
    display: flex;
    flex: 60px 1;
    padding: 8px 0
}

    .HelpContent ul li .action .icon {
        text-align: center;
        width: 60px
    }

.HelpContent .close-instructions-button {
    position: relative;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 20px;
    width: auto;
    height: auto;
    background: none;
    border-radius: 30px;
    border: 1px solid #fff;
    outline: none;
    transition: transform .2s ease,backdrop-filter .2s ease;
    z-index: 998
}

    .HelpContent .close-instructions-button.hidden {
        display: none
    }

    .HelpContent .close-instructions-button:hover {
        background-color: rgba(130,130,130,.3);
        backdrop-filter: blur(8px);
        cursor: pointer
    }

    .HelpContent .close-instructions-button.selected {
        background-color: #fff
    }

        .HelpContent .close-instructions-button.selected > div, .HelpContent .close-instructions-button.selected > i {
            color: #483b51
        }

    .HelpContent .close-instructions-button > div {
        font-size: 16px;
        text-transform: uppercase;
        font-weight: bold;
        color: #fff
    }

    .HelpContent .close-instructions-button > i {
        display: flex;
        margin-right: 10px;
        color: #fff
    }

        .HelpContent .close-instructions-button > i::before {
            display: flex;
            justify-content: center;
            align-items: center
        }

p {
    line-height: 1.4
}

.virtual-reality {
    pointer-events: all;
    display: block;
    opacity: 100%;
    max-height: 0;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    right: 60px;
    padding: 20px;
    border: 1px solid #d2d2d2;
    border-radius: 3px 3px 0 0;
    z-index: 999;
    -webkit-transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms;
    transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms
}

    .virtual-reality.hidden {
        opacity: 0;
        pointer-events: none
    }

    .virtual-reality h3 {
        margin-top: 5px
    }

    .virtual-reality .virtual-reality-button {

        position: absolute;
        top: 10px;
        right: 5px;
        width: 20px;
        height: 20px;

        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid #fff;
        pointer-events: all
        
    }

    .virtual-reality.down {
        right: 123px;
        max-height: 0;
        border: none;
        pointer-events: none;
        background: none;
        -webkit-transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease;
        transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease
    }

        .virtual-reality.down * {
            -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s;
            transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s
        }

        .virtual-reality.down .virtual-reality-button {
            display: flex;
            align-items: center;
            justify-content: center;
            /* display: block; */
            visibility: visible;
            opacity: 100%;
            -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
            transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
            transform: scale(1);
            top: 0px;
            width: 30px;
            height: 30px;
            max-height: 30px
        }
        .virtual-reality .virtual-reality-button .material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            font-variation-settings:
              'FILL' 0,
              'wght' 400,
              'GRAD' 0,
              'opsz' 32;
            color: #ffffff;  /* Optional: Google Blue */
          }

@media all and (hover: hover)and (pointer: fine) {
    .virtual-reality.down .virtual-reality-button:hover {
        background: rgba(130,130,130,.3);
        transform: scale(1.15)
    }
}

.virtual-reality.down .virtual-reality-button .virtual-reality-icon {
    
    display: block;
    visibility: visible;
    opacity: 100%;
    color: #fff
}

@media screen and (max-width: 440px) {
    .virtual-reality {
        right: 0px;
        padding: 20px;
        margin-left: 5px;
        margin-right: 5px;
        max-width: 270px
    }
}
.gyro-link {
    /* color: inherit; */
    text-decoration: none;
    color: #ffffff; /* or any preferred color */
  }

.gyro-link:hover {
text-decoration: underline;
color: #c5c5c5; /* or any preferred color */
}

.gyro {
    pointer-events: all;
    display: block;
    opacity: 100%;
    max-height: 0;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    right: 45px;
    width: 300px;
    padding: 20px;
    border: 1px solid #d2d2d2;
    border-radius: 3px 3px 0 0;
    z-index: 1001;
    -webkit-transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms;
    transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms
}

    .gyro.hidden {
        opacity: 0;
        pointer-events: none
    }

    .gyro h3 {
        margin-top: 5px
    }

    .gyro .icons {
        width: 100%;
        text-align: center
    }

        .gyro .icons.up {
            display: inline-block
        }

        .gyro .icons a, .gyro .icons button {
            color: #ffffff
        }

            .gyro .icons a i, .gyro .icons button i {
                display: inline-block;
                vertical-align: middle;
                padding: 3px;
                color: rgba(255, 255, 255, 0.5);
                transform: scale(1);
                -webkit-transition: transform .2s ease;
                transition: transform .2s ease
            }

                .gyro .icons a i:hover, .gyro .icons button i:hover {
                    color: rgba(224, 224, 224, 0.5);
                    transform: scale(1.1)
                }

        .gyro .icons .copy {
            text-align: left;
            width: 100%;
            display: block;
            cursor: pointer;
            padding-top: 16px
        }

            .gyro .icons .copy .copyUrlText {
                display: inline-block;
                width: 80%;
                vertical-align: middle
            }

                .gyro .icons .copy .copyUrlText input {
                    background-color: rgba(255,255,255,.8);
                    cursor: pointer;
                    display: inline-block;
                    vertical-align: middle;
                    width: 100%;
                    padding-top: 7px;
                    padding-bottom: 5px
                }

            .gyro .icons .copy .tooltip {
                font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
                position: relative;
                display: inline-block;
                width: 100%
            }

                .gyro .icons .copy .tooltip .tooltiptext {
                    visibility: hidden;
                    width: 240px;
                    /* border-top: 1px solid rgba(255,255,255,.3); */
                    /* background-color: #333; */
                    color: #fff;
                    text-align: center;
                    /* border-radius: 6px; */
                    padding: 5px;
                    position: absolute;
                    z-index: 1;
                    bottom: 120%;
                    left: 50%;
                    margin-left: -140px;
                    opacity: 0;
                    -webkit-transition: opacity 0s;
                    transition: opacity 0s;

                    backdrop-filter: blur(var(--blur-social));
                    -webkit-backdrop-filter: blur(var(--blur-social));
                    background: rgba(0, 0, 0, 0.05);
                    border-radius: var(--radius-social);
                    box-shadow: 0 0px 64px rgba(0, 0, 0, 0.557);
                    filter: saturate(133%);
                    overflow: hidden; /* important to keep blur inside */

                }

                    .gyro .icons .copy .tooltip .tooltiptext::after {
                        content: "";
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        margin-left: -5px;
                        border-width: 5px;
                        border-style: solid;
                        /* border-color: #555 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) */
                    }

@media all and (hover: hover)and (pointer: fine) {
    .gyro .icons .copy .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0s;
        transition: opacity 0s
    }
}

@media not all and (hover: hover)and (pointer: fine) {
    .gyro .icons .copy .tooltiptext.visible {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0s;
        transition: opacity 0s
    }
}

.gyro .gyro-button {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 20px;
    height: 20px;
    /* line-height: 16px; */
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #fff;
    pointer-events: all
}

.gyro.down {
    right: 83px;
    max-height: 0;
    border: none;
    pointer-events: none;
    background: none;
    -webkit-transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease;
    transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease
}

    .gyro.down * {
        max-height: 0;
        visibility: hidden;
        opacity: 0;
        display: none;
        -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s;
        transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s
    }

    .gyro.down h3 {
        opacity: 0;
        -webkit-transition: opacity .2s;
        transition: opacity .2s;
    }

    .gyro .gyro-title {
       color:rgba(255, 255, 255, 0.9);
    }
    .gyro .gyro-text {
       color:rgba(255, 255, 255, 0.5);
    }

        .gyro.down .gyro-button {
            display: flex;
            align-items: center;
            justify-content: center;
            /* display: block; */
            visibility: visible;
            opacity: 100%;
            -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
            transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
            transform: scale(1);
            top: 0px;
            width: 30px;
            height: 30px;
            max-height: 30px
        }
        .gyro.down .gyro-button .material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            font-variation-settings:
              'FILL' 0,
              'wght' 400,
              'GRAD' 0,
              'opsz' 32;
            color: #ffffff;  /* Optional: Google Blue */
          }

@media all and (hover: hover)and (pointer: fine) {
    .gyro.down .gyro-button:hover {
        background: rgba(130,130,130,.3);
        transform: scale(1.15)
    }
}

.gyro.down .gyro-button .share-icon {
    display: block;
    visibility: visible;
    opacity: 100%;
    padding-top: 7px;
    color: #fff
}

.gyro.up {
    right: 10px;
    display: block;
    max-height: 1000px;
    visibility: visible;
    pointer-events: all;
    /* border: 1px solid #d2d2d2; */
    /* background: rgba(255,255,255,.9); */
    -webkit-transition: right .2s,max-height .2s,background 0ms,opacity .2s,visibility .2s;
    transition: right .2s,max-height .2s,background 0ms,opacity .2s,visibility .2s;


    backdrop-filter: blur(var(--blur-social));
    -webkit-backdrop-filter: blur(var(--blur-social));
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-social);
    box-shadow: 0 0px 64px rgba(0,0,0, 0.1);
    filter: saturate(133%);
    overflow: hidden; /* important to keep blur inside */
    z-index: 9990;

}

    .gyro.up * {
        max-height: 1000px;
        display: inline-block;
        visibility: visible;
        opacity: 100%;
        -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .2s,visibility .2s;
        transition: right .2s,max-height .2s,background .2ms,opacity .2s,visibility .2s
    }

    .gyro.up p {
        display: block
    }

    .gyro.up h3 {
        display: block;
        opacity: 100%
    }

    .gyro.up .sharing-button {
        -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        top: 14px;
        right: 14px;
        width: 28px;
        height: 28px;
        border: 0;
    }

        .gyro.up .sharing-button:hover {
            background: rgba(0,0,0,0);
            transform: scale(1)
        }

        .gyro.up .sharing-button .share-icon {
            opacity: 0
        }

        .gyro.up .sharing-button::before, .gyro.up .sharing-button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 2px;
            background: rgba(255, 255, 255, 0.9);
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .gyro.up .sharing-button::before {
            transform: translate(-50%, -50%) rotate(45deg)
        }

        .gyro.up .sharing-button::after {
            transform: translate(-50%, -50%) rotate(-45deg)
        }

        .gyro.up .sharing-button:hover::before {
            transform: translate(-50%, -50%) rotate(135deg)
        }

        .gyro.up .sharing-button:hover::after {
            transform: translate(-50%, -50%) rotate(-135deg)
        }

@media screen and (max-width: 440px) {
    .gyro {
        right: 0px;
        padding: 20px;
        margin-left: 5px;
        margin-right: 5px;
        max-width: 270px
    }
}

.help {
    pointer-events: all;
    display: block;
    opacity: 100%;
    max-height: 0;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    right: 45px;
    width: 300px;
    padding: 20px;
    border: 1px solid #d2d2d2;
    border-radius: 3px 3px 0 0;
    z-index: 999;
    -webkit-transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms;
    transition: max-height .2s ease-out,background .5s ease-in,opacity .1ms
}

    .help.hidden {
        opacity: 0;
        pointer-events: none
    }

    .help h3 {
        margin-top: 5px
    }

    .help .help-button {
        position: absolute;
        top: 10px;
        right: 5px;
        width: 20px;
        height: 20px;
        line-height: 16px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid #fff;
        pointer-events: all
    }

    .help.down {
        right: 43px;
        max-height: 0;
        border: none;
        pointer-events: none;
        background: none;
        -webkit-transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease;
        transition: right .2s,max-height .2s,background .2s ease-in,visibility .2s ease
    }

        .help.down * {
            max-height: 0;
            visibility: hidden;
            opacity: 0;
            display: none;
            -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s;
            transition: right .2s,max-height .2s,background .2ms,opacity .1s,visibility .2s
        }

        .help.down h3 {
            opacity: 0;
            -webkit-transition: opacity .2s;
            transition: opacity .2s
        }

        .help.down .help-button {
            display: block;
            visibility: visible;
            opacity: 100%;
            -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
            transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
            transform: scale(1);
            top: 0px;
            width: 30px;
            height: 30px;
            max-height: 30px
        }

@media all and (hover: hover)and (pointer: fine) {
    .help.down .help-button:hover {
        background: rgba(130,130,130,.3);
        transform: scale(1.15)
    }
}

.help.down .help-button .help-icon {
    display: block;
    visibility: visible;
    opacity: 100%;
    padding-top: 7px;
    color: #fff
}

.help.up {
    right: 10px;
    display: block;
    max-height: 1000px;
    visibility: visible;
    pointer-events: all;
    /* border: 1px solid #d2d2d2; */
    /* background: rgba(255,255,255,.9); */
    -webkit-transition: right .2s,max-height .2s,background 0ms,opacity .2s,visibility .2s;
    transition: right .2s,max-height .2s,background 0ms,opacity .2s,visibility .2s;



}

    .help.up * {
        max-height: 1000px;
        display: inline-block;
        visibility: visible;
        opacity: 100%;
        -webkit-transition: right .2s,max-height .2s,background .2ms,opacity .2s,visibility .2s;
        transition: right .2s,max-height .2s,background .2ms,opacity .2s,visibility .2s
    }

    .help.up p {
        display: block
    }

    .help.up h3 {
        display: block;
        opacity: 100%
    }

    .help.up .help-button {
        -webkit-transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        transition: width .2s ease,height .2s ease,top .2s ease,background .2s,transform .2s ease,visibility .2s,opacity .2s;
        top: 10px;
        width: 20px;
        height: 20px
    }

        .help.up .help-button:hover {
            background: rgba(0,0,0,0);
            transform: scale(1)
        }

        .help.up .help-button .help-icon {
            opacity: 0
        }

        .help.up .help-button::before, .help.up .help-button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 2px;
            background: #333;
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .help.up .help-button::before {
            transform: translate(-50%, -50%) rotate(45deg)
        }

        .help.up .help-button::after {
            transform: translate(-50%, -50%) rotate(-45deg)
        }

        .help.up .help-button:hover::before {
            transform: translate(-50%, -50%) rotate(135deg)
        }

        .help.up .help-button:hover::after {
            transform: translate(-50%, -50%) rotate(-135deg)
        }

@media screen and (max-width: 440px) {
    .help {
        right: 0px;
        padding: 20px;
        margin-left: 5px;
        margin-right: 5px;
        max-width: 270px
    }
}

#tooltip {
    background-color: rgba(255,255,255,.85);
    color: #707070;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
    display: none;
    pointer-events: none
}

    #tooltip h3 {
        color: #4a4a4a
    }

    #tooltip .title {
        color: #4a4a4a
    }

    #tooltip[data-show] {
        display: block
    }

#arrow, #arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit
}

#arrow {
    visibility: hidden
}

    #arrow::before {
        visibility: visible;
        content: "";
        transform: rotate(45deg)
    }

#tooltip[data-popper-placement^=top] > #arrow {
    bottom: -4px
}

#tooltip[data-popper-placement^=bottom] > #arrow {
    top: -4px
}

#tooltip[data-popper-placement^=left] > #arrow {
    right: -4px
}

#tooltip[data-popper-placement^=right] > #arrow {
    left: -4px
}

.credits {
    position: absolute;
    right: 0px;
    bottom: 0px;
    vertical-align: baseline;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    font-stretch: 100%;
    font-weight: 400;
    letter-spacing: 1.6px;
    font-size: 13px;
    text-rendering: geometricprecision;
    text-shadow: none;
    text-size-adjust: 100%;
    text-transform: uppercase;
    display: flex;
    margin: 0px 16px;
    align-self: flex-start;
    padding: 16px 0px 10px 0px;
    flex: 1 0 auto;
    color: #fff
}

@media all and (max-width: 720px),(max-height: 600px) {
    .credits {
        padding-top: 4px
    }
}

@media all and (max-width: 720px)and (max-height: 520px),(max-height: 600px)and (max-height: 520px) {
    .credits {
        justify-content: flex-start
    }
}

@media all and (max-width: 720px),(max-height: 600px) {
    .credits.mobile-hidden {
        visibility: hidden
    }
}

.credits.hidden {
    display: none;
    visibility: hidden
}

    .credits.hidden * {
        visibility: hidden
    }

        .credits.hidden *:before {
            visibility: hidden
        }

.credits a {
    text-decoration: none;
    color: #fff;
    pointer-events: all
}

.credits .menu-btn {
    margin: 0px 4px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    transition: all .2s ease-in-out
}

@media all and (hover: hover)and (pointer: fine) {
    .credits .menu-btn:hover {
        transform: scale(1.15)
    }

        .credits .menu-btn:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1)
        }
}

.credits .menu-btn.disabled {
    color: rgba(255,255,255,.3);
    cursor: not-allowed
}

    .credits .menu-btn.disabled:hover {
        transform: unset
    }

        .credits .menu-btn.disabled:hover:before {
            visibility: hidden
        }

        .credits .menu-btn.disabled:hover:after {
            content: "Not available";
            width: 128px;
            bottom: 120%;
            left: 50%;
            margin-left: -64px;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 5px 8px;
            border-radius: 6px;
            position: absolute;
            z-index: 1
        }

.credits .menu-btn:before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: -4px;
    left: 0;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    background-color: #1e90ff;
    height: 2px;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

html, body {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #000;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

    html canvas#view, body canvas#view {
        z-index: 9999;
        cursor: pointer;
        min-height: 100vh;
        min-height: -webkit-fill-available
    }

        html canvas#view:active, body canvas#view:active {
            cursor: grabbing
        }

#intro {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    z-index: 1;
    opacity: 1;
    background-color: rgba(0,0,0,.1);
    transition: background-color 1.5s ease-out,opacity 1s ease-out
}

    #intro.fade-out {
        position: absolute;
        background-color: rgba(0,0,0,0);
        opacity: 0;
        pointer-events: none
    }

#fullscreen-loader {
    background-color: rgba(0,0,0,.3);
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    z-index: 2;
    text-align: center;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px)
}

    #fullscreen-loader.fade-out {
        -webkit-transition: -webkit-backdrop-filter 1s ease-out,background-color 1s ease-out;
        transition: -webkit-backdrop-filter 1s,backdrop-filter 1s ease-out,background-color 1s ease-out;
        position: absolute;
        background-color: rgba(0,0,0,0);
        pointer-events: none;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0)
    }

#loading-banner {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 5;
    text-align: center;
    transition: opacity 2s ease-out
}

    #loading-banner img {
        position: absolute;
        top: 75%;
        left: 40%;
        width: 20%;
        margin: -16px auto;
        z-index: 5
    }

    #loading-banner h1 {
        position: absolute;
        color: #f7e1c3;
        color: #fff;
        font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 32px;
        top: 50%;
        width: 100%;
        margin: -16px auto;
        z-index: 5
    }

@media all and (max-width: 720px) {
    #loading-banner h1 {
        font-size: 16px
    }
}

#loading-banner h1:before {
    content: attr(data-content)
}

#loading-banner.fade-out {
    position: absolute;
    background: none;
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    -webkit-transform: translate3d(0, 0, 0)
}

#loading-spinner-container {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 999999;
    bottom: 35px;
    right: 35px;
    width: 80px;
    height: 80px
}

@media all and (max-width: 720px) {
    #loading-spinner-container {
        width: 64px;
        height: 64px;
        bottom: 15px;
        right: 15px
    }
}

#loading-spinner-container > * {
    visibility: hidden;
    display: none
}

#loading-spinner-container.visible > * {
    visibility: visible;
    display: block
}

#loading-spinner-container.visible {
    visibility: visible;
    opacity: 1;
    transition: 1s opacity;
    pointer-events: none
}

#loading-spinner-container.fade-out {
    opacity: 0;
    pointer-events: none
}

.loading-spinner {
    display: inline-block;
    position: relative;
    width: inherit;
    height: inherit
}

    .loading-spinner div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: inherit;
        height: inherit;
        border: 8px solid #fff;
        border-radius: 50%;
        animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)
    }

@media all and (max-width: 720px) {
    .loading-spinner div {
        border: 5px solid #fff;
        border-color: #fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)
    }
}

.loading-spinner div:nth-child(1) {
    animation-delay: -0.45s
}

.loading-spinner div:nth-child(2) {
    animation-delay: -0.3s
}

.loading-spinner div:nth-child(3) {
    animation-delay: -0.15s
}

@keyframes loading-spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

#splash-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: url('./shared/loading.jpg') center center no-repeat;
	background-size: cover;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	font-size: 2em;
	text-align: center;
    transition: opacity 0.4s ease;
    opacity: 1;
    pointer-events: none;
    /* filter: blur(1.5rem); */
}

.splash-text {
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
	font-weight: bold;
	margin-bottom: 20px;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

#scene-transition-overlay {
	transition: opacity 0.4s ease;
	opacity: 1;
}