/*

	--- colors ---
	
	home:		| 	#2E5902	rgb(46,89,2)		#558C03	rgb(85,140,3)		#C1D96C	rgb(193,217,108)		| verde
	solutions:	| 	#BF213E	rgb(191,33,62)		#D92929	rgb(217,41,41)		#F2B138	rgb(242,177,56)		| tomate
	products:	| 	#67752B	rgb(103,117,43)		#92A83E	rgb(146,168,62)		#E5F5A4	rgb(229,245,164)		| oliva
	contact:	| 	#59111E	rgb(89,17,30)		#A61F43	rgb(166,31,67)		#EBC8D8	rgb(235,200,216)		| lila 
	cart:		| 	#F28705	rgb(242,135,5)		#F29F05	rgb(242,159,5)		#F2CA7E	rgb(242,202,126)		| naranja
	
	
	dado que la clase sf-menu se aplica a la primer lista; .sf-menu > li son los elementos del menú raíz y .sf-menu ul es el primer submenú desplegado
*/


/* basic styles */

.sf-menu, .sf-menu * { z-index:100; width:100%; }
.sf-menu { float:left; font-size:1.25em; margin-bottom:0.625em; } 
.sf-menu li { position:relative; list-style-type:none; border-radius:0.625em; color:#eee; font-weight:400; } 
.sf-menu a { display:block; position:relative; font-weight:normal; color:#fff;  font-weight:400; }
 
 /* first level (root) .sf-menu > li */
 
.sf-menu > li { float:left; padding:0.625em; }
.sf-menu > li { padding-left:0.75em; padding-right:0.75em; width:20%; margin-right:5%; }
.sf-menu > li:last-of-type { margin-right:0; }
.sf-menu > li, .sf-menu > li a { color:#fff; }
.sf-menu > li.active { border-bottom:0.3em #eee solid; }

#home_body .sf-menu > li:hover { background-color:#558C03; }
#solutions_body .sf-menu > li:hover { background-color:#D92929; }
#products_body .sf-menu > li:hover { background-color:#92A83E; }
#contact_body .sf-menu > li:hover { background-color:#A61F43; }
#cart_body .sf-menu > li:hover { background-color:#F29F05; }
 
/* submenus .sf-menu ul */

.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display:block; }

.sf-menu ul { min-width:12em; font-size:0.825em;  position:absolute; display:none; top:100%; left:0; border-radius:0.625em; } 

.sf-menu ul li { padding:0.5em; white-space:nowrap; -webkit-transition:background .2s; transition:background .2s; background-color:#eee; border-radius:0; margin:0.1em; }
.sf-menu ul li:first-of-type { border-top-left-radius:0.625em; border-top-right-radius:0.625em; }
.sf-menu ul li:last-of-type { border-bottom-left-radius:0.625em; border-bottom-right-radius:0.625em; }

#home_body .sf-menu ul li a { color:#558C03; }
#solutions_body .sf-menu ul li a { color:#D92929; }
#products_body .sf-menu ul li a { color:#92A83E; }
#contact_body .sf-menu ul li a { color:#A61F43; }
#cart_body .sf-menu ul li a { color:#F29F05; }

#home_body .sf-menu ul li:hover { background-color:#C1D96C; }
#solutions_body .sf-menu ul li:hover { background-color:#F2B138; }
#products_body .sf-menu ul li:hover { background-color:#E5F5A4; }
#contact_body .sf-menu ul li:hover { background-color:#EBC8D8; }
#cart_body .sf-menu ul li:hover { background-color:#F2CA7E; }

#home_body .sf-menu ul li:hover a { color:#2E5902; }
#solutions_body .sf-menu ul li:hover a { color:#BF213E; }
#products_body .sf-menu ul li:hover a { color:#92A83E; }
#contact_body .sf-menu ul li:hover a { color:#59111E; }
#cart_body .sf-menu ul li:hover a { color:#F28705; }

/*
	home:		| 	#2E5902	rgb(46,89,2)		#558C03	rgb(85,140,3)		#C1D96C	rgb(193,217,108)		| verde
	solutions:	| 	#BF213E	rgb(191,33,62)		#D92929	rgb(217,41,41)		#F2B138	rgb(242,177,56)		| tomate
	products:	| 	#67752B	rgb(103,117,43)		#92A83E	rgb(146,168,62)		#E5F5A4	rgb(229,245,164)		| oliva
	contact:	| 	#59111E	rgb(89,17,30)		#A61F43	rgb(166,31,67)		#EBC8D8	rgb(235,200,216)		| lila 
	cart:		| 	#F28705	rgb(242,135,5)		#F29F05	rgb(242,159,5)		#F2CA7E	rgb(242,202,126)		| naranja
	*/

.sf-menu ul ul { top:0; left:90%; }

 


 
 
/* skin */
  
 
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right:2.5em; 
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content:'';
	position:absolute;
	top:50%;
	right:1em;
	margin-top:-3px;
	height:0;
	width:0;
	/* order of following 3 rules important for fallbacks to work */
	border:5px solid transparent;
	border-top-color:#cccccc; /* edit this to suit design (no rgba in IE8) */
	border-top-color:rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color:white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top:-5px;
	margin-right:-3px;
	border-color:transparent;
	border-left-color:#cccccc; /* edit this to suit design (no rgba in IE8) */
	border-left-color:rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color:white;
}