/*menu with jquery.horizontalNav.js*/



nav { 

	position:relative; 

	z-index: 11;

	text-align: center;

	margin-top: 0px;

	float: right;

}



.sf-menu {display: inline-block; height: 85px; }

.sf-menu > li > span {display: block; position: relative;}

.sf-menu ul {position:absolute; top:-999px; display:none;/* left offset of submenus need to match (see below) */}

.sf-menu li { padding-left:0px; position:relative; background: none;}

	.sf-menu a {

		display: block;

		text-decoration: none;

		text-transform: uppercase;

	}

		.sf-menu a:hover {text-decoration: none;}

		.sf-menu li:hover span {color:#1b1b1b;}



/*================================>> 1 Level <<========================================*/



li.sfHover {position: relative;}

.sf-menu > li > a {

	position: relative;

	display:block;

	padding: 37px 0px 33px;

	width: 102px;

	margin-left: 1px;

	text-align: center;

	background: #555251 url(../images/bg-3.gif) 0 0 repeat;

	-moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -webkit-transition: all 0.3s ease-out;

	transition: all 0.3s ease-out;

	z-index: 100;

	color: #fff;

	font-family: 'Asap', sans-serif;

	font-weight: 700;

	font-size: 14px;

	line-height: 14px;

}

.sf-menu > li:first-child > a {	border-left: 0px;}

.sf-menu > li {

	display: block;

	position: relative;

	float: left;

}





	.sf-menu > li:hover > a, 

	.sf-menu > li.current > a, 

	.sf-menu > li.sfHover > a,

	.sf-menu > li:hover > span, 

	.sf-menu > li.current > span, 

	.sf-menu > li.sfHover > span {

		/*color: #ffffff;*/

	}

	.sf-menu > li.current > a,

	.sf-menu > li:hover > a,

	.sf-menu > li.sfHover > a {

		background: #353231 url(../images/bg-3-hov.gif) 0 0 repeat-x;

		padding-top: 62px;

		padding-bottom: 39px;

		margin-top: 0;

		-moz-transition: all 0.3s ease-out;

	    -o-transition: all 0.3s ease-out;

	    -webkit-transition: all 0.3s ease-out;

		transition: all 0.3s ease-out;

	}



.sf-menu li span {

	position: absolute;

}



.sf-menu > li > a > .sf-sub-indicator {

	display: block;

	height: 0px;

	width: 0px;

	border: 6px solid;

	border-color: #fff transparent transparent transparent;

	left: 50%;

	margin-left: -6px;	

	top: 63px;

	-moz-transition: top 0.3s ease-out;

    -o-transition: top 0.3s ease-out;

    -webkit-transition: top 0.3s ease-out;

	text-indent: -1000px;

	overflow: hidden;

}

.sf-menu > li.current > a > .sf-sub-indicator,

.sf-menu > li:hover > a > .sf-sub-indicator,

.sf-menu > li.sfHover > a > .sf-sub-indicator {

	top: 85px;

}

.sf-menu > li:hover > a > .sf-sub-indicator,

.sf-menu > li.sfHover > a > .sf-sub-indicator { 

	border-color: #e02a00 transparent transparent transparent;

}



/*================================>> 2 Level <<========================================*/

.sf-menu > li > ul, 

.sf-menu > li.sfHover > ul {

	top: 67px;

	width:100%;

	z-index:99;

	text-align: center;

	padding-top: 49px;

	padding-bottom: 32px;

}

.sf-menu > li > ul > li {

	height: auto; 

	border: none; 

	margin: 0; 

	padding: 0;

}



.sf-menu > li > ul > li > a {

	display: block;

	color: #ffffff;

	padding: 12px 0 10px;

	margin-bottom: 1px;

	background: #585554;

	font-family: 'Droid Sans', sans-serif;

	font-size: 12px;

	line-height: 12px;

	font-weight: 700;

}

.sf-menu li li a:hover, 

.sf-menu li.sfHover li.sfHover > a,

.sf-menu li.sfHover li.sfHover span { background: #e02a00;}



.sf-menu li li.sfHover {background: inherit;}



	.sf-menu > li > ul .sf-sub-indicator {line-height: 14px;}



.sf-menu > li > ul .sf-sub-indicator {color: #ffffff; line-height: 9px;}

/*================================>> 3 Level <<========================================*/



.sf-menu li li ul {

	left: 125px;

	top: 0px;

	width: 123px;

	z-index:99;

	position: absolute;

	text-align: center;

	padding-top: 0px;

	padding-bottom: 0px;

}

.sf-menu li li li {height: auto; border: none; margin: 0;}

.sf-menu li li li a {

	display: block;

	color: #ffffff;

	padding: 12px 0 10px;

	margin-bottom: 1px;

	background: #585554;

	font-family: 'Droid Sans', sans-serif;

	font-size: 12px;

	line-height: 12px;

	font-weight: 700;

}

.sf-menu li li li:first-child > a {

	border: none;

}

.sf-menu li li li a:hover {	color: #ffffff;}

.sf-menu > li > li.sfHover > span {

	color: #ffffff;

}



.sf-menu > li > ul > li > a > span { top: 14px; right: 6px;}



/*==================================RESPONSIVE LAYOUTS===============================================*/



@media only screen and (max-width: 995px) {

	nav {margin-bottom: 0px;}

	.sf-menu > li > a { width: 88px;}

	.sf-menu li li ul {left: 91px;}

}

@media only screen and (max-width: 795px) {



}

@media only screen and (max-width: 767px) {

	.sf-menu { display:none !important;}

	nav { height: auto; margin-top: 40px; float: none;}

	nav select {

		height: 35px;

		border: 1px solid #7da41a;

		border-top: 3px solid #e02a00;

		font-family: Trebuchet MS;

		font-size: 14px;

		line-height: 20px;

		color: #494848;

		background-color: #fff;

		width:100%;

	    outline: none;

	    padding: 5px;

		font-weight: normal;

	}

	nav select option:first-child {

		color:#ffffff;

	}

}



@media only screen and (max-width: 479px) {

	nav {margin-bottom: 0px; }

}