/*Navigation*/
nav.web {
	background:white; position:fixed; top:0; z-index:99; width:100%; box-sizing:border-box; transition:.5s; box-shadow:1px 2px 4px rgb(200,200,200);
}
nav.web .content > .img a img {
	filter:brightness(5) invert(1);
}
nav.web .content {
	justify-content:space-between; width:90%; position:relative; margin:0 auto; display:-webkit-flex;
}
nav.web .content > .panel i {
	font-size:19px; font-family:'Poppins','sans-serif';
}
nav.web .content > .list .icon {
	width:30px; height:30px; display:grid; place-items:center; color:black; cursor:pointer; margin-left:12px;  transition:.5s;
}
nav.web .content > .list {
	align-items:center; justify-content:flex-end; display:-webkit-flex; width:100%; box-sizing:border-box;  flex-shrink:0;
}
nav.web .content > .list .items {
	font-size:15px; padding:9px 16px; cursor:pointer; color:black; font-family:'Poppins','sans-serif'; transition:.5s;
}
nav.web .content > .list .items.icon {
	width:fit-content; display:-webkit-flex; align-items:center; column-gap:12px;
}
nav.web .content > .list .icon[data-action='side-menu'] {
	display:none;
}
@media (min-width:360px) and (max-width:960px) {
	nav.web .content > .list .items {
		width:100% !important; justify-content:flex-end;
	}
	nav.web .content {
		justify-content:flex-start;
	}
	nav.web .content > .list .icon {
		font-size:15px;
	}
	nav.web .content > .list .icon[data-action='side-menu'] {
		display:grid;
	}
}


nav.side-panel {
	width:100%; box-sizing:border-box; background:white; max-width:275px; height:100vh; position:fixed; top:0; left:0; z-index:999;
}
nav.side-panel .side-nav .title {
	display:-webkit-flex; padding:20px; background:var(--button-color); justify-content:space-between; align-items:center; width:100%; box-sizing:border-box; flex-wrap:nowrap; text-align:center;
}
nav.side-panel .side-nav .content .items {
	display:-webkit-flex; align-items:center; column-gap:12px; transition:.3s;
}
nav.side-panel .side-nav .content .items:hover {
	background:#ECECEC; transition:.3s;
}
nav.side-panel .side-nav .content {
	padding:20px; width:100%; box-sizing:border-box; position:relative; overflow:hidden; display:grid;
}
nav.side-panel .side-nav .title .icon {
	display:none;
}
@media (min-width:360px) and (max-width:960px) {
	nav.side-panel  {
		position:fixed; top:0; bottom:0; background:rgba(0,0,0,.2); z-index:9999; height:100vh; display:-webkit-flex; justify-content:flex-start; max-width:0; overflow:hidden; transition-delay:.4s;
	}
	nav.side-panel .side-nav {
		width:100%; box-sizing:border-box; max-width:0px; transition:.4s; overflow:hidden; background:white; flex-wrap:nowrap;
	}
	nav.side-panel .side-nav .title .icon {
		display:block; 
	}
}


nav.nav-modal {
	position:fixed; width:100%; box-sizing:border-box; top:0; bottom:0; background:rgba(0,0,0,.2); z-index:9999; height:100vh; display:-webkit-flex; justify-content:flex-start; max-width:0; overflow:hidden; transition-delay:.4s;
}
nav.nav-modal .side-nav {
	width:100%; box-sizing:border-box; max-width:0px; transition:.4s; overflow:hidden; background:white; flex-wrap:nowrap;
}
nav.nav-modal .side-nav .title {
	display:-webkit-flex; padding:20px; background:#EEEEEE; justify-content:space-between; align-items:center; width:275px; box-sizing:border-box; flex-wrap:nowrap;
}
nav.side-panel .side-nav .title h6,
nav.nav-modal .side-nav .title h6 {
	font-size:15px; font-weight:normal; font-family:'Poppins','sans-serif'; width:fit-content; box-sizing:border-box;
}
nav.side-panel .side-nav .title .icon,
nav.nav-modal .side-nav .title .icon {
	font-size:18px; box-sizing:border-box; width:fit-content; cursor:pointer;
}
nav.nav-modal .side-nav .content {
	padding:20px; width:275px; box-sizing:border-box; position:relative; overflow:hidden; display:grid;
}
nav.side-panel.active,
nav.nav-modal.active {
	max-width:100%; transition-delay:0s;
}
nav.side-panel.active .side-nav,
nav.nav-modal.active .side-nav {
	max-width:275px; transition:.4s; transition-delay:.2s;
}
nav.side-panel .content .items,
nav.nav-modal .content .items {
	font-size:15px; padding:9px 16px; cursor:pointer; color:black; font-family:'Poppins','sans-serif'; transition:.5s;
}
nav.nav-modal[data-layer='side-account'] {
	justify-content:flex-end;
}
nav.nav-modal[data-layer='side-account'] .content .items i {
	margin-right:18px;
}


nav .drop {
	width:100%; box-sizing:border-box;
}
nav .drop > div {
	position:relative;
}
nav .drop > div:after {
	content: '\f105'; position:absolute; right:10px; font-size:13px; font-family:'Font Awesome 5 Free'; font-weight:bold; transition:.3s;
}
nav .drop .drop-content {
	width:100%; box-sizing:border-box; max-height:0; transition:.3s; overflow:hidden; background:#F7F7F7;
}
nav .drop.active .drop-content {
	max-height:100px; transition:.3s;
}
nav .drop.active > div:after {
	transform:rotate(90deg); transition:.3s;
}
nav .drop .drop-content .drop-items {
	font-size:13px; padding:9px 12px; font-family:'Poppins'; cursor:pointer; transition:.3s; max-width:180px; margin:0 auto; width:100%; box-sizing:border-box;
}