/*
    SideNav.css
    m.attoverticale.com | 20/08/2019 | CSS
    (c) Copyright 2019 web-communication.eu
*/


#navBar {
		position: 				fixed;
		width: 					100px;
		height: 				60px;
		top: 					5px;
		left:					10px;
		z-index:				3;	
		/*background: #ccc;*/
}



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



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


#menu a {
		color:					#1D395C;/*#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 > ul {
		width: 					100%;		
		padding-bottom:			60px;	
}

#menu ul li {
		width: 					100%;/*100%;*/
		margin:					0;		
		font-weight:			normal;
		font-size:				20px;/*16px;*/
		/*font-family: 			Verdana, Arial, sans-serif;*/
		font-family: 			'Roboto', sans-serif;
}

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

#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,.6);*/
		/*border-radius: 			50%;*/
		
				/*standard*/
		transition-duration: .6s;

		/*Safari e Chrome */
		-webkit-transition-duration: .6s;
			
		/*Opera*/
		-o-transition-duration: .6s;
			
		/*Firefox*/
		-moz-transition-duration: .6s;
		
}


.brightme {
	background-color: #ccc;
	/*background-color:      	rgba(0,0,0,0.50);
		border-radius: 			50%;*/
		
}

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


#btn-back {
		position:				absolute;
		top:					7px;
		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: 				99;
		background:  			#fff;/*#000 url('../images/cb-bg4.jpg') repeat;*/
		visibility: 			hidden;
}

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


/* icons */		
		
		
		.icon {
			background-image:  url('../images/icons.png'), url('../images/menuicons.png');
			background-repeat: no-repeat;
		}
	
	
		.icon-menu {
			text-indent:-99999em;
			background-position: -65px -65px, -1000px 0;
			/*background-position: -65px 0, -1000px 0;*/
		}
		
				.icon-dashboard {
					background-position: -1000px 0, 0 0;
				}
				
				.icon-settings {
					background-position:  215px -60px, 0 -60px;
				}
				
				.icon-submenu {
					background-position: 215px -60px, -1000px 0;
				}
		
		.icon-close {
			background-position: -125px -5px;
		}
		
		.icon-back {
			background-position: -5px -5px, -1000px 0;
		}
		
		.icon-back2 {
			background-position: 0 0;
		}
		
		
		
		
		
		

		.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 (max-width: 480px) {

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

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

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

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

	#menu.open	 {
		width: 					350px;
	}  

	
	#shadow-menu.Fullopen {
		width: 					350px;		
	}
	
}				
		
		
		
		
/*@media only screen and (min-width: 1150px) {*/
@media only screen and (min-width: 320px) {	
	
	#menu li a:hover {
			/*color:					#FFFFFF;*/
			/*
			-webkit-transition-delay: .3s; 
			transition-delay: .3s; */
	}	
	
	.over:hover {
		/*	background-color: #5b6064;
			color:					#FFFFFF;*/
	}
	
	.icon-submenu:hover {
			/*background-position: 215px -120px, -1000px 0;*/
		}

		
		
	.icon-dashboard:hover {
				background-position: -1000px 0, -60px 0;
			}
			
	.icon-settings:hover {
		background-position:  215px -120px, -60px -60px;
	}
}		
		
/*		
#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); 
}
*/