


.sidebar-wrapper ul li.icon  {
	display: inline-block;
	margin: 0 1px 0 0 ;
	font-size: 2.25rem;
	
}
.sidebar-wrapper ul li.icon img {
	height: 30px!important;
	
}
.sidebar-wrapper ul li.icon nav {
	margin: 6px 5px 0 5px;
	
}
.sidebar-wrapper{
	padding: 10px 10px 0 10px; 
}
.sidebar-wrapper > ul > li{
	margin: 0 0 5px 0 !important;  border: 0px solid rgba(255,255,255,0.25) ; padding: 0 !important;
}
.sidebar-wrapper > ul > li > nav > ul > li {
	margin: 0 0 0 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0 !important;
}
.sidebar-wrapper > ul > li > nav > ul > li:last-child {
	border-bottom: 0px solid rgba(255,255,255,0.05); 
}
.sidebar-wrapper > ul > li > a{
	margin: 0 ; padding: 6px 0!important ; background: rgba(0,0,0,0.15); 
}
.sidebar-wrapper > ul > li > nav > ul > li > a {
	margin: 0 ; padding: 5px 0!important ; background: rgba(0,0,0,0.35); 
}



.sidebar-wrapper > ul > li > nav > ul > li > nav > ul > li {
	margin: 0 0 0 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0 !important;
}
.sidebar-wrapper > ul > li > nav > ul > li > nav > ul > li:last-child {
	border-bottom: 0px solid rgba(255,255,255,0.05); 
}
.sidebar-wrapper > ul > li > nav > ul > li > nav > ul > li > a {
	margin: 0 ; padding: 4px 0!important; 
}

.sidebar-wrapper > ul > li > a p{
	font-size: 1.2rem !important;
}
.sidebar-wrapper > ul > li > nav > ul > li > a p{
	font-size: 1.1rem !important;
}
.sidebar-wrapper li a span{
	font-size: 1.1rem !important;
}

.navbar-toggle {
	position: fixed; 
	z-index: 1000001; 
	top: 0px; 
	left: 0px; 
	margin: 0; 
	padding: 0;  
	height: var(--ItemBar2H); 
	border-radius: 0 .25rem .25rem 0;
	background-image: linear-gradient(to right, rgba(var( --rgb1opacity2 )) 30%, rgba(var( --rgb2opacity2 ))); 
	display: none; 
	align-items:center;	
	-webkit-transition: all .5s; 	
	-moz-transition: all .5s; 	
	-o-transition: all .5s; 	
	-ms-transition: all .5s; 	
	transition: all .5s; 	
}
.navbar-toggle button:focus, .navbar-toggler {
	outline: none
}	
.navbar-toggler {
	padding: 7px 10px; 
	font-size: 1rem; 
	line-height: 1px; 
	background-color: transparent; 
	border: 0px solid var( --BarColor ); 
	*border-radius: .25rem
}
.navbar-toggler:focus, .navbar-toggler:hover {
	text-decoration: none
}
.navbar-toggler-bar {
	display: block; 
	position: relative; 
	height: 1px; 
	border-radius: 1px; 
	background: var( --NavColor )!important; 
}
.navbar-toggler-bar, .toggled .navbar-toggler-bar {
	width: 38px
}
.navbar-toggler-bar.bar2 {
	*transition: width .2s linear
}
.navbar-toggler-bar+.navbar-toggler-bar {
	margin-top: 7px
}
.bar1, .bar2, .bar3 {
	outline: 2px solid transparent
}
.bar1 {
	animation: f 0.5s; animation-fill-mode: forwards
}
.bar2 {
	animation: i 0.5s; animation-fill-mode: forwards
}
.bar3 {
	animation: h 0.5s; animation-fill-mode: forwards
}
.toggled .bar1 {
	animation: e 0.5s;  animation-fill-mode: forwards;transform-origin: top left;
}
.toggled .bar2 {
	animation: j .0s; animation-fill-mode: forwards
}
.toggled .bar3 {
	animation: g 0.5s; animation-fill-mode: forwards;transform-origin: top left;
}
@keyframes f 
{
	0% {
		top: 8px; transform: rotate(135deg)
	}
	45% {
		transform: rotate(-10deg)
	}
	75% {
		transform: rotate(5deg)
	}
	to {
		top: 0; transform: rotate(0deg)
	}
}
@keyframes h 
{
	0% {
		bottom: 8px; transform: rotate(-135deg)
	}
	45% {
		transform: rotate(10deg)
	}
	75% {
		transform: rotate(-5deg)
	}
	to {
		bottom: 0; transform: rotate(0)
	}
}
@keyframes i 
{
	0% {
		width: 0
	}
	45% {
		width: 38px
	}
	to {
		width: 38px
	}
}
@keyframes e 
{
	0% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(25deg)
	}
}
@keyframes j 
{
	0% {
		width: 38px
	}
	to {
		width: 0
	}
}
@keyframes g 
{
	0% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(-25deg)
	}
}

@media only screen and (max-width: 1024px) 
{
	.navbar-toggle {
		display: flex !important; border-radius: 0; height: var(--Bar2H_mobile); background: rgba(var( --rgb1opacity1 )) !important;
	}
	#ItemBar{
		position: fixed !important; top:0 !important;
	}
 
	.sidebar-wrapper {
		position: fixed; 
		z-index: 101; 
		left: calc(-1 * (100vw - 10px)); 
		top: 0; 
		display: block; 
		height: var(--mobile-height);
		width: calc(100vw - 60px); 
		overflow-x: hidden;
	}
	
	#WTitle {
		left: 70px; text-align:left;display:block
	}

}				




