#menuproducts {
}
/* menuproducts icon */
#menuproducts-icon {
	display: none; /* hide menuproducts icon initially */
}
#navproducts, #navproducts li {
	position: relative;
	margin: 0;
	padding: 0;
	z-index:110;
}
#navproducts li {
	list-style: none;
	float: left;
}
/* navproducts link */
#navproducts a, #navproducts a:hover, #navproducts a.selected, #navproducts a.selected:hover {
	display: block;
	line-height:40px;	
	text-align:left;
	border:1px solid #bcd4e1;
	font-size:18px;		
	font-weight:500;	
	text-transform:uppercase;
	margin-right:2px;	
	padding:0 20px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;	
}
#navproducts a:hover, #navproducts a.selected, #navproducts a.selected:hover {
	border:1px solid black;
	color:black;	
}
/* navproducts dropdown */
#navproducts ul {
	top:41px;
	left:0;
	padding: 0;
	position: absolute;
	display: none; /* hide dropdown */
	width:310px;
	background: white;
	border:1px solid #bcd4e1;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	padding:10px 0;	
}
#navproducts ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#navproducts ul li a, #navproducts ul li a:link, #navproducts ul li a:visited, #navproducts ul li a:hover  {
	background:white;
	border:0;
	float:none;
	display:block;
	width:300px;
	height:auto;
	line-height:20px;
	text-align:left;
	padding:5px 25px;	
	font-size:18px;	
}
#navproducts ul li a:hover {
	color:black;
}
#navproducts li:hover > ul {
	display: block; /* show dropdown on hover */
}


/************************************************************************************
MOBILE
*************************************************************************************/
@media only screen and (max-width: 1199px) {

	/* navproducts-wrap */
	#menuproducts {
		position: relative;
	}
	/* menuproducts icon */
	#menuproducts-icon {
		font-size:24px;		
		color: black;
		width: 100%;
		height:90px;
		line-height:90px;
		padding-left:50px;
		background: url(images/menuproducts-icon.png) no-repeat center left;
		cursor: pointer;
		text-align:left;
		font-weight:500;	
		display: block; /* show menuproducts icon */ 			
	}
	#menuproducts-icon:hover {
		color: #59b28b;
	}
	#menuproducts-icon.active {
		color: #59b28b;
	}	  
	/* main navproducts */
	#navproducts {
		clear: both;
		position: absolute;
		top:90px;
		width: 100%;
		z-index: 10001;
		background:#59b28b;
		background-size: auto auto;
		display: none; /* visibility will be toggled with jquery */
		padding-bottom: 10px;	
	}
	#navproducts li {
		clear: both;
		float: none;
	}
	#navproducts a, #navproducts ul a, #navproducts a:hover, #navproducts ul a:hover, #navproducts a.selected, #navproducts ul a.selected, #navproducts a.selected:hover, #navproducts ul a.selected:hover {		
		padding-left:30px; 
		color: white;
		font-size:22px;		
		font-weight:500;	
		text-transform:uppercase;	
		width: 100%;
		height:auto;
		line-height:36px;
	}
	#navproducts a:hover, #navproducts ul a:hover, #navproducts a.selected, #navproducts ul a.selected, #navproducts a.selected:hover, #navproducts ul a.selected:hover {		
		background:black;
		color:white;
	}	
	/* dropdown */
	#navproducts ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#navproducts ul li {
	/*	margin-left: 15px;*/
	}
	#navproducts ul li a, #navproducts ul li a:link, #navproducts ul li a:visited {		
		padding-left:50px;
		margin:0;
		height:auto;
		line-height:24px;
		font-weight:normal;
		width: 100%;
	}
	#navproducts ul li a:hover {		
		padding-left:50px;
		margin:0;
		height:auto;
		line-height:24px;
		font-weight:normal;
		width: 100%;
	}

}


@media screen and (min-width: 1200px) {

	/* ensure #navproducts is visible on desktop version */
	#navproducts {
		display: block !important;
	}

}