div#navbar {position:absolute; top:0; left:0; right:0; z-index:5; width:100%; /*background-color:rgba(33,37,41,0.95);*/ background-color:rgba(255,255,255,0.25); transition:.5s; font-family:sans-serif;}
div#navbar.scrolled {background-color:transparent;}
div#navbar div#navbox {width:100%; max-width:1000px; margin:auto; box-sizing:border-box; /*background-color:rgba(0,0,0,0.25);*/}
div#navbar div#navbox div.logoBtn {/*background-color:#FFF;*/ cursor:pointer; height:50px; overflow:hidden; margin-left:12px;}
div#navbar div#navbox div.logoBtn img {height:100%;}

body.fixed {position:fixed; top:0; right:0; bottom:0; left:0; overflow:hidden;}
div#overlay {position:fixed; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:9; cursor:pointer; display:none;}
div.sidenav {height:100%; width:0; max-width:80%; position:fixed; z-index:10; top:0; right:0; background-color:rgba(255,255,255,0.98); transition:0.25s; overflow-x:hidden; overflow-y:auto;}
div.sidenav.open {width:240px;}
div.sidenav a {padding:10px 20px; margin-left:40px; text-decoration:none; font-size:12px; color:#818181; display:block; transition:0.3s; /*display:none;*/ position:relative; font-weight:400;}
div.sidenav a:last-of-type {margin-bottom:60px;}
div.sidenav a i.fa {/*min-width:1.75em; */position:absolute; left:0; transform:translate(-50%,0%);}
div.sidenav a:hover {color:#f1f1f1; color:dodgerblue;}
div.sidenav a.closeBtn {position:absolute; top:0; right:12px; font-size:24px; margin-left:50px; display:none;}


/* mobile(xs,sm) */
@media screen and (max-width:767px) {
	div#navbar {padding:4px 0;}
	div#navbar div#navbox div.logoBtn {float:left;}
	div#navbar div#navbox div.desktop {display:none;}
	div#navbar div#navbox div.mobile {display:block;}
	div#navbar div#navbox div.mobile div#menuBtn {position:absolute; right:0; top:40%; transform:translateY(-50%);}
	div#navbar div#navbox div.mobile div#menuBtn {cursor:pointer; margin:6px 12px; padding:10px 10px; transition:0.1s; border:1px solid transparent; border-radius:6px; /*float:right;*/}
	div#navbar div#navbox div.mobile div#menuBtn div.icon-bar {height:2px; background-color:#3e4245; width:16px; border-radius:2px; position:relative; transition:.5s;}
	div#navbar div#navbox div.mobile div#menuBtn div.icon-bar:nth-of-type(1) {bottom:2px;}
	div#navbar div#navbox div.mobile div#menuBtn div.icon-bar:nth-of-type(2) {}
	div#navbar div#navbox div.mobile div#menuBtn div.icon-bar:nth-of-type(3) {top:2px;}
	div#navbar div#navbox div.mobile div#menuBtn.open div.icon-bar {opacity:0.1;}
}

/* tablet(md), desktop(lg,xl) */
@media screen and (min-width:768px) {
	div#navbar {padding:12px 0;}
	div#navbar div#navbox div.logoBtn {float:left;}
	div#navbar div#navbox div.mobile {display:none;} 
	div#navbar div#navbox div.desktop {display:block;}
	div#navbar div#navbox div.desktop ul.menu {margin:0; padding:0; float:right;}
	div#navbar div#navbox div.desktop ul.menu li.item {display:inline-block; float:left; text-align:center; padding:16px 12px; position:relative; cursor:pointer; margin:0 8px; overflow:hidden;}
	div#navbar div#navbox div.desktop ul.menu li.item i.fa {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1; color:rgba(80,80,80,0.5); font-size:40px; transition:.5s;}
	div#navbar div#navbox div.desktop ul.menu li.item:hover i.fa {color:#555;}
	div#navbar div#navbox div.desktop ul.menu li.item div.name {color:#DDD; font-weight:400; font-size:14px;}
	div#navbar div#navbox div.desktop ul.menu li.item div.name img {height:14px;} /* Home Button */
}