.vrMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    background-color:transparent;
    transition: background-color .2s;

    &.opaque{
        background-color: #fff;
    }

    .nav-bar {
        display: flex;
        gap: var(--gap);
        align-items: center;
        width: 100%;
        max-width: var(--content-width);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding:0 .5rem;

        >ul {
            margin-left: auto;
            display: flex;
            gap: 1em;
            padding: 1.5rem 0;

            >li>a {
                padding: 1em .5em .75em .5em;
                font-weight:500;
            }
        }

        &.mobile {
            display: none
        }
    }

    .logo {
        width: 13rem;

        >a {
            display: flex;
            align-items: center;

            >svg {
                padding: .25em;
                width: 100%;
                height: auto;
            }
        }
    }



    details {
        z-index: 1;
    }

    .details-body {
        position: absolute;
        left: 0;
        right: 0;
    }
}

@media all AND (max-width: 700px) {

    .vrMenu {

        .nav-bar:not(.mobile) {

            padding: var(--gap);


            >ul {
                display: none
            }
        }

        .nav-bar.mobile {
            display: block;
            position: relative;

            .close,
            .hamburger {
                cursor: pointer;
                position: absolute;
                top: var(--gap);
                right: var(--gap);
                display: inline-block;
                width: 2rem;
                height: 2rem;
                line-height: 2rem;
                text-align: center;
                font-size: 2rem;
                transition: transform 2s ease;
                transform: rotate(-180deg);
            }

            .close {
                transform: rotate(45deg);
            }

            >div {
                background: #fff;
                width: 100%;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 100vw;
                transition: left .5s ease;
                padding: var(--gap);


                .logo {
                    margin-top: 4rem;
                    width: 70%
                }

                ul {
                    margin: 4rem 0 0 0;

                    li {
                        font-size: 1.5rem;
                        padding: 1rem 0;
                    }
                }

                .hamburger {
                    transform: rotate(-405deg);
                }
            }



            &.open {
                >div {
                    left: 0;
                }

                .close,
                .hamburger {
                    transform: rotate(-405deg);
                }
            }

        }
    }
}