@media only screen and (max-width: 800px) {

/*
THIS IS NOT COMPILED WITH THE REST OF THE SASS.
THIS SET OF PURE CSS (NO SCSS ALLOWED) IS WRAPPED IN A MEDIA QUERY WHEN DESIGN SETTINGS IS SAVED
THE MAX WIDTH VALUE IN THE MEDIA QUERY IS SET IN DESIGN SETTINGS > GENERAL
THE RESULTING CSS FILE IS SAVED TO THE CSS FOLDER AND CALLED IN THE HEADER.SS AS A CSS STYLE REQUIREMENT
*/

#nav:not(:checked){
    & ~ .topnav .topnavflex .navcontainer nav > ul{
        li{
            display: none;
            &.burger{
                display: list-item;
                height: var(--top-nav-height);
                bottom: 0;
                top: auto;
                .menutogglelabel{
                    height: var(--top-nav-height);
                    span{
                        height: var(--top-menu-height);
                        line-height: var(--top-nav-height);
                    }
                }
            }
        }
    }
}
.uppercontrols .moveable{
    display: none;
}
#nav:checked{
    & ~ .topnav .uppercontrols{
        .fixed{
            display: none;
        }
        .moveable{
            display: flex;
            transform: translateX(var(--upper-controls-spacing));
        }
    }
}
.dropdownlinksnav{
    display: none;
}
.dropdownlinksnav.mobileonly{
    display: block;
}
.mainwrapper{
    .container{
        .sidebar{
            display: none;
        }
        main{
            max-width: 100% !important;
        }
    }
}

.floatingSectionMenu, .sectionPopOutWrapper{
    display: none !important;
}




}