/* MENUS
-----------------------*/

.menu a{
	text-decoration: none;
}

.menu .menu-inner{
	background-color: whiteSmoke;
}
.menu .menu-items ul{
	margin:0;
	padding:0;
	list-style: none;
}
.menu .menu-items ul li{
	margin:0;
	padding:0;
	list-style: none;
	float: left;
	position: relative;
}
.menu .menu-items ul li a{
	padding: 14px 20px;
	display: block;
	font-size: 16px;
}
.menu .menu-items ul li.active,
.menu .menu-items ul li:hover{
	background:#E9E9E9;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .05);
}
.menu .menu-items ul li ul{
	display: none;
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 0;
	width: 240px;
	background:#E9E9E9;
}
.menu .menu-items ul li ul li{
	display: inline-block;
	width: 100%;
}
.menu .menu-items ul li:hover > ul{
	display: block;
}
.menu .menu-items ul li ul li ul{
	left: 100%;
	top: 0;
	display: none;
}

/* menu toggle */

	.menu .menu-toggle{
		display: none;
		cursor: pointer;
		padding: 14px 20px;
	}
	.menu .menu-toggle .menu-bar{
		background:#ccc;
		background:rgba(0,0,0,0.25);
		height: 2px;
		width: 30px;
		margin: 0 0 3px 0;
		display: block;
	}

/* main menu customisation */

	#menu{
		position:relative;
		z-index: 2000;
	}
	#menu.menu .menu-inner,
	#menu.menu .menu-toggle{
		background-color: #2c2c2c;
	}
	#menu.menu .menu-toggle .menu-bar{
		background:#444;
		background:rgba(255,255,255,0.25);
	}
	

	
	#products-menu{
		position:relative;
		z-index: 1000;
	}
	
/* responsive */	

@media (max-width: 767px) {

	.menu .menu-toggle{
		display: block;
	}
	
	.menu .menu-items{
		height:0;
		overflow:hidden;
	}
	.menu .menu-items ul li{
		float:none;
		width:auto;
	}
	.menu .menu-toggle,
	.menu .menu-items ul li a{
		background-color: whiteSmoke;
	}
	.menu .menu-items ul li ul{
		position:relative;
		left:auto;
		top:auto;
		width:auto;
		padding: 0 8px 8px 8px;
		display:block;
	}
	.menu .menu-items ul li ul li{
		display:block;
	}	
	

}

@media (min-width: 768px) {
	
	.menu .menu-items{
		height: auto !important;
		overflow: visible !important;
	}
	#menu.menu .menu-items ul li a{
		color: #999;
	}
	#menu.menu .menu-items ul li.active,
	#menu.menu .menu-items ul li:hover{
		background:black;
	}
	#menu.menu .menu-items ul li.active > a,
	#menu.menu .menu-items ul li:hover > a{
		color: white;
	}
	#menu.menu .menu-items ul li:hover ul{
		background:#000000;
	}
	#menu.menu .menu-items ul li:hover ul li a:hover{
		color: white;
	}		
	#menu .dropdown .caret{
		border-top-color:white;
	}	
	
}