:root {
    --window-menu-offset: 78px;
}

#question-btn {
    appearance: none;
    border: 0;
    padding: 0;
    border-radius: 100%;
    background: var(--ci-light) url(/public/icons/chat-bubble.svg) no-repeat center;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    width: 83px;
    height: 83px;
    position: relative;
}

#question-btn p {
    margin: -25px 0 0 0;
    padding: 0 103px 0 20px;
    white-space: nowrap;
    background-color: #FFF;
    box-shadow: 0 0 22px #00000072;;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    border-radius: 999px;
    z-index: -1;
    transition: var(--transition-standard);
    pointer-events: none;
    opacity: 0;
}

#question-btn:hover p,
#question-btn:focus p {
    opacity: 1;
}

#site {
    transition: 300ms linear;
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    will-change: transform;
}

body.-window-menu #site {
    transform: translate(-500px, var(--window-menu-offset));
}

body.-window-menu {
    overflow: hidden;
}

#close-window-menu {
    appearance: none;
    border: 0;
    position: absolute;
    top: 50%;
    right: 500px;
    height: 66px;
    width: 66px;
    border-radius: 100%;
    margin-right: -33px;
    font-size: 0;
    cursor: pointer;
    z-index: 101;
    background: #FFF url(/public/icons/close.svg) no-repeat center;
    box-shadow: 0 0 36px #00000055;;
    opacity: 0;
    transition: 300ms linear;
    will-change: opacity;
    pointer-events: none;
}

body.-window-menu #close-window-menu {
    opacity: 1;
    pointer-events: auto;
}

#window-menu-side::before {
    content: ' ';
    display: block;
    background-color: var(--ci-light);
    height: var(--window-menu-offset);
    position: fixed;
    top: calc(var(--window-menu-offset) * -1);
    transition: top 300ms linear;
    will-change: top;
    left: 0;
    right: 0;
    z-index: 1;
}

body.-window-menu #window-menu-side::before {
    top: 0;
}

#window-menu-side {
    height: 100%;
    position: fixed;
    right: -500px;
    width: 500px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: right;
    transition: right 300ms linear;
    padding: 0 100px;
    z-index: 1;
    overflow: visible;
}

body.-window-menu #window-menu-side {
    right: 0;
}

body.-window-menu .fixed-sidebar {
    opacity: 0;
}

body.-window-menu.-sticky-header .header-bar::after {
    border-radius: 0;
}

#window-menu-side .h2 {
    position: relative;
    line-height: 60px;
    color: #FFF;
}

#window-menu-side .h2.text-fancy {
    position: absolute;
    color: var(--ci-dark);
    z-index: 1;
    font-size: 70px;
    margin-top: -28px;
    margin-left: 60px;
}