@charset "utf-8";
body {
	font-family:Arial, Helvetica, sans-serif;
}

.side-navigation {
	max-width: 100%;
}
.side-navigation ul  {
	padding:0 15px;
	margin:0;
	list-style:none;
}
.side-navigation h3 {
	display: block;
	width:100%;
}
.side-navigation ul li  {
	line-height: 40px;
	text-align: center;
	font-size: 20px;
}

.side-navigation ul li:after  {
	content:'';
	display:block;
	clear:both;
}

.side-navigation > ul > li:hover{position: relative;}

.side-navigation ul li a  {
	text-decoration : none;
	color: #F00;
	display: block;
	max-width:100% !important;
}
.side-navigation ul li a:hover {
	background-color: rgba(222,184,135,0.8);
}

.side-navigation ul ul{
	display: none;
	left: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 6px;
	width: 200px;
	z-index:99;
}
.side-navigation ul li:hover ul{display: block;}

.side-navigation ul ul li a{
	margin:0 !important;
}

@media only screen and (max-width: 768px) {
	.side-navigation ul ul{
		left: 0;
		top: 45px;
		width: 100%;
	}
	.side-navigation ul li ul a{
		background:#fff !important;
	}
}

.toggle-opener{
	display:none;
}

@media only screen and (max-width: 768px) {
	.side-navigation{
	  height: 100%; /* 100% Full-height */
	  width: 0; /* 0 width - change on active */
	  position: absolute; /* Stay in place */
	  z-index: 1; /* Stay on top */
	  top: 157px;
	  left: 0;
	  background-color: #111; /* Black*/
	  padding-top: 20px; /* Place content 20px from the top */
	  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
	  opacity:0;
	  visibility:hidden;
	}
	.side-navigation.active-side{
		width:100%;
		opacity:1;
		visibility:visible;
	}
	.toggle-opener{
		color:#fff !important;
		position: absolute;
		top: -35px;
		left: 10px;
		display:block;
	}
	.toggle-opener .active-span,
	.toggle-opener.active-side-menu .d-span{
		display:none;
	}
	
	.toggle-opener.active-side-menu .active-span{
		display:inline-block;
	}
}