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

html, body {min-width:100vw;}

.mobile {display:block!important;}
.desktop {display:none!important;}

.main-content { width:100vw; float: none;}
.side-content { position:fixed; top:0; display:none; height:100vh; }

.snap-slider::-webkit-scrollbar {display:none; width: 3px; height: 3px;}

#app-bar .home {display:block;}
#app-bar .title {margin-left:0;}
#app-bar .actions a {display:inline-block!important;}

#main-menu { overflow-y:scroll; background: var(--clr-primary); margin:0; border-radius:0;}

#main-menu .wrapper { padding: 0; height:calc(100% - 80px); justify-content:space-between;}

#main-menu .user-profile { display:flex; padding:10px; background:var(--clr-prim); }

#main-menu .menu a { color:var(--clr-prim); transition: background 0.5s; }
#main-menu .menu a:active,
#main-menu .menu a.active { background: var(--clr-light); color:var(--clr-prim); }
#main-menu .menu a.active .ic:before,
#main-menu .menu a .ic:before { background: var(--clr-prim); }



#mob-menu { display:block; z-index:101; width:200px; left:-200px; background:var(--clr-plate); transition: left 0.5s, box-shadow 0.8s; }
#mob-menu.active {  left:0; box-shadow: 0 0 10px #000; }

.search-form { margin:0; padding:5px var(--dim-wrapper); border-radius:0; background:var(--clr-prim);}

.modal-window { width:86vw; }
.modal-window .wrapper { padding:4vw; }

}