/*
    SideNav.css
	petslove.it | 17/10/2016
    Copyright 2016 petslove.it
*/



#navBar {
		position: 				fixed;
		width: 					260px;/*100%;*/
		height: 				60px;
		top: 					10px;
		left:					10px;
		z-index:				10;/*10;*/	
}



#menu {    
		position: 				fixed; 
		top: 					0;/*60px;*/
		left:					-280px;
		width: 					280px;
		height: 				100%;
		/*background-color:       #000;#fff;*/
		overflow: 				auto;
		opacity: 				1;    
		z-index:				12;
		
		background:  #000 url('../images/cb-bg4.jpg') repeat;
		border-right:			1px solid #444;/*#ddd;*/
}



#menu ul,
#menu ul ul	{
		margin:					60px 0 0 0;
		padding:				0;
		list-style:				none;
}


#menu a {
		color:					#ddd;/*#5b6064;*/
		text-decoration:		none;
		display:				block;
		padding:				10px 30px;
		height:					59px;
		line-height:			35px;
		
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
}
		
	
/*
#menu a:hover {
		color:					#ffffff;
		background-color: 		#5b6064;
		
		-webkit-transition-delay: .3s; 
		transition-delay: .3s; 
}	





#menu a:active {
		color:					#ffffff;
		background-color: 		#5b6064;
}	
*/




	
#menu > ul {
		width: 					100%;		
		padding-bottom:			60px;	
}

#menu ul li {
		width: 					100%;/*100%;*/
		margin:					0;		
		font-weight:			500;
		font-size:				16px;/*14px;*/
		font-family: 			'Michroma', sans-serif;
}

#menu ul li a {
		border-bottom:			1px solid #444;/*#ddd;*/		
		padding-left:			20px;
}

#menu ul li span {
		position: 				relative;
		top:					3px;
}		


#menu ul.sub_2,
#menu ul.sub_3,
#menu ul.sub_4,
#menu ul.sub_5,
#menu ul.sub_6 {
		display: none;
}	



#menu ul.on {
		display: block;
}	
















#btn-menu {
		width: 					50px;
		height: 				50px;
		cursor: 				pointer;
		background-color:      	rgba(0,0,0,0.50);
		border-radius: 			50%;
}


#btn-close {
		position:				absolute;
		top:					10px;
		right:					10px;
		width:					50px;
		height:					50px;
		cursor: 				pointer;
}


#btn-back {
		position:				absolute;
		top:					10px;
		left:					10px;
		width:					50px;
		height:					50px;
		cursor: 				pointer;
		display:				none;
}

/*
#ghost-menu {
		position: 				absolute;
		top:					0;
		left:					0;
 		width: 					0;					 
		z-index: 				7;
		background:  #000 url('../images/cb-bg4.jpg') repeat;
}
*/

#shadow-menu {
		position: 				absolute;
		top:					0;
		left:					0;
 		width: 					280px;					 
		z-index: 				7;
		background:  			#000 url('../images/cb-bg4.jpg') repeat;
		visibility: 			hidden;
}

#shadow-menu.visible {
		visibility: 			visible;
}


/* icons */		
		
		
		.icon {
			background:  url('../images/iconmonstr.png') no-repeat 0 0;	
		}
	
		.icon-menu {
			text-indent:-99999em;
			background-position: -65px -5px;
		}
		
		.icon-close {
			background-position: -125px -5px;
		}
		
		.icon-back {
			background-position: -5px -5px;
		}
		
		/*
		.icon-menu:hover {
			background-position: -60px 0;
		}		
		
		.icon-menu.icon-menu-active {
			background-position: -120px 0;
			background-color: #fff;
		}			
*/
		
		.icon-submenu {
			background-position: 215px -60px;
		}

		.icon-search {
			background-position: 0 -60px;
		}
	/*	
		.icon-search:hover {
			background-position: -60px -60px;
			
		}	
*/
		.icon-tool {
			background-position: 0 -120px;
		}
		/*
		.icon-tool:hover {
			background-position: -60px -120px;
			
		}	
*/
		.icon-love {
			background-position: 0 -180px;
		}
		/*
		.icon-love:hover {
			background-position: -60px -180px;
			
		}	
*/

		.icon-signin {
			background-position: 0 -240px;
		}
		/*
		.icon-signin:hover {
			background-position: -60px -240px;
			
		}	
*/


		
		
		
		
		
		
		
@media only screen and (min-width: 200px) and (max-width: 480px) {

	#menu a {
		padding:				10px 30px;
		height:					59px;
		line-height:			35px;
	}

	#menu ul li {
		font-size:				16px;/*18px;*/
	}
	
}

		
@media only screen and (min-width: 481px) and (max-width: 1365px) {

	
	#menu ul li {
		font-size:				16px;/*18px;*/
	}
	
}		
		
		
		
@media only screen and (min-width: 1150px) and (max-width: 1920px) {

	#menu.open	 {
		width: 					350px;
	}  

	
	#shadow-menu.Fullopen {
		width: 					350px;		
	}
	
}				
		
		
		
		
		
/*		
#menu::-webkit-scrollbar {
    width: 6px;
}
 
#menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    /*border-radius: 10px;*/
/*}*/
 /*
#menu::-webkit-scrollbar-thumb {*/
   /* border-radius: 10px;*/
   /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
*/