/*Navigation*/
nav.web {
	background:var(--button-color); 
	position:fixed; 
	top:0; 
	z-index:99; 
	width:100%; 
	box-sizing:border-box; 
	transition:.5s; 
	box-shadow:1px 2px 4px rgb(200,200,200);
	padding:5px 0;
}
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 .logo {
	width:100%;
	max-width:200px;
	box-sizing:border-box;
}
nav.web .content > .panel i {
	font-size:19px; font-family:'Poppins','sans-serif';
}
nav.web .content .menu-list .img {
	width:30px; 
	height:30px; 
	display:grid; 
	place-items:center; 
	color:black; 
	cursor:pointer; 
	transition:.5s;
	color:white;
	filter:brightness(0) invert(1);
}
nav.web .content > .list .icon {
	width:30px; 
	display:grid; 
	place-items:center; 
	color:black; 
	cursor:pointer; 
	transition:.5s;
	color:white;
}
nav.web .content > .list .icon[data-action='side-account'] .img {
	filter:unset;
}
nav.web .content > .list .icon[data-action='side-account'] {
	background:white;
	color:white;
	border-radius:50%;
	flex-shrink:0;
}
nav.web .content .menu-list {
	display:-webkit-flex;
	align-items:center;
	width:100%;
	box-sizing:border-box;
	justify-content:flex-end;
	padding:12px 0;
}
nav.web .content .menu-list .items {
	display:-webkit-flex;
	align-items:center;
	width:100%;
	max-width:max-content;
	flex-shrink:0;
	column-gap:8px;
	color:white;
	font-size:15px; 
	padding:0px 12px; 
	cursor:pointer; 
	font-family:'Poppins','sans-serif'; 
	transition:.5s;
}
nav.web .content .menu-list .sub-menu {
	position:relative;
}
nav.web .content .menu-list .sub-menu:hover .sub-list {
	max-height:250px;
	transition:.5s;
}
nav.web .content .menu-list .sub-menu > .main:after {
	content:'\f078';
	font-size:13px;
	font-family:'Font Awesome 5 Free';
	font-weight:bold;
}
nav.web .content .menu-list .sub-menu > .sub-list {
	position:absolute;
	top:100%;
	width:175px;
	box-sizing:border-box;
	background:white;
	box-shadow:0px 1px 2px rgba(0,0,0,.2);
	max-height:0;
	overflow:hidden;
	transition:.5s;
}
nav.web .content .menu-list .sub-menu > .sub-list .sub-items {
	display:-webkit-flex;
	align-items:center;
	width:100%;
	max-width:max-content;
	flex-shrink:0;
	column-gap:8px;
	color:black;
	font-size:13px; 
	padding:4px 12px; 
	cursor:pointer; 
	font-family:'Poppins','sans-serif'; 
	transition:.5s;
}
nav.web .content .menu-list .sub-menu > .sub-list .sub-items .img {
	filter:brightness(0) invert(0);
}
nav.web .content .menu-list .items.wallet {
	border-left:1px solid white;
}
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.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 {
		padding:9px 0;
	}
	nav.web .content > .list .icon[data-action='side-menu'] {
		display:grid;
	}
	nav.web .content .menu-list .sub-menu,
	nav.web .logo,
	nav.web .content .menu-list > a {
		display:none !important;
	}
	nav.web .content .menu-list .items.wallet {
		border-color:transparent;
	}
}


nav.side-panel {
	width:100%; 
	box-sizing:border-box; 
	background:var(--button-color); 
	max-width:0px; 
	height:100vh; 
	position:fixed; 
	top:0; 
	left:0; 
	z-index:999;
	overflow:hidden;
}
nav.side-panel .logo {
	width:100%;
	max-width:200px;
	box-sizing:border-box;
}
nav.side-panel .logo:after {
	width:100%;
	max-width:35%;
	background:white;
	content:' ';
	margin-top:12px;
	margin-left:6px;
	height:2px;
	border-radius:50%;
	display:block;
	box-sizing:border-box;
}
nav.side-panel .side-nav .title {
	display:-webkit-flex; padding:20px; 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:white; transition:.3s; color:black;
}
nav.side-panel .side-nav .content {
	padding:20px; width:100%; box-sizing:border-box; position:relative; overflow:hidden; display:grid;
}
nav.side-panel .title .icon {
	color:white;
}
nav.side-panel .content .items .img {
	width:30px; 
	height:30px; 
	display:grid; 
	place-items:center; 
	color:black; 
	cursor:pointer; 
	transition:.5s;
	color:white;
	filter:brightness(0) invert(1);
}
nav.side-panel .content .items {
	display:-webkit-flex;
	align-items:center;
	width:100%;
	max-width:max-content;
	flex-shrink:0;
	column-gap:8px;
	color:white;
	font-size:15px; 
	padding:9px 12px; 
	cursor:pointer; 
	font-family:'Poppins','sans-serif'; 
	transition:.5s;
}
@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:#E86E12; 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.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;
}