@import url(http://fonts.googleapis.com/css?family=Anton);/*font-family: 'Anton', sans-serif;*/

nav{
	position:relative; 
	margin: 27px 10px 1px 10px;		
	}
.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:100%}
.sf-menu li {
	float:left;
	position:relative;
	font-family: 'Anton', sans-serif;
	width:157px;
	background: url(../images/bg-li.jpg) 0 0 repeat-x #5b1e01;
	text-transform:uppercase;
	z-index:1;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	}
.sf-menu li>strong{
	display: block;
	position: absolute;
	background: url(../images/bg-li-strong.jpg) 0 0 no-repeat;
	width: 2px;
	height: 100%;
	top: 2px;
	bottom: 2px;
	left: 0;
}
.sf-menu li.sub-menu:after{
	display:block;
	position:absolute;
	content:'';
	width:5px;
	height:4px;
	top:50%;
	left:70%;
	margin-top: -1px;
	background: url(../images/indicator.png) 0 0 no-repeat;
	}

.sf-menu li:first-child{
	width:155px;
	}
.sf-menu li:first-child>strong{display: none;}
.sf-menu>li>a{
	display:block;
	text-align:center;
	position:relative; 
	font-size: 20px; 
	line-height:1.2em;
	padding: 32px 0 32px 0; 
	color:#ffffff;
	overflow: hidden;
	}
.sf-menu li a strong{
	display:block;
	position:absolute;
	width:100%;
	top:0;
	left:-100%;
	right:0;
	bottom:0;
	z-index:-1;
	background: #ffae19 url(../images/bg-li-hov.jpg) 0 0 repeat-x;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	}
.sf-menu>li a:hover strong, .sf-menu>li.current a strong, .sf-menu>li.sfHover a strong{
	display: block;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.sf-menu>li:hover>strong, .sf-menu>li.current>strong, .sf-menu>li.sfHover>strong{display: none;}
.sf-menu>li,.sf-menu>li.current,.sf-menu>li.sfHover{}
.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{text-decoration: none;}


/*================================>> 2 Level <<========================================*/
.sf-menu>li>ul,.sf-menu>li.sfHover>ul{
	left:20px;
	top:87px;
	width: 126px;
	padding:25px 0 25px 0; 
	z-index:99;
	background:#622201;
	}
.sf-menu>li>ul>li{
	display:block;
	width:100%;
	text-align:left;
	padding:4px 0 4px 27px;
	background:none;
	font-family: Arial, Helvetica, sans-serif; 
	position: relative;
	}
.sf-menu>li>ul>li>a{
	font-size: 10px; 
	line-height: 20px;
	display:inline-block;
	color:#fff;
	}
.sf-menu li li a:hover, .sf-menu li.sfHover li.sfHover>a{color:#d48101;text-decoration: none;}
.sf-menu li.sfHover li.sfHover:after{
	display:block;
	position:absolute;
	content:'';
	background: url(../images/bg-ul-after.png) 0 0 no-repeat;
	width:5px;
	height:9px;
	content:'';
	left:166px;
	top:15px;
	}
/*================================>> 3 Level <<========================================*/
.sf-menu li li ul{
	left:126px;
	top:0;
	width: 104px;
	padding:20px 0 20px 0;
	z-index:99;
	background:#d48101;
	}
.sf-menu li li li{
	display:block;
	width:100%;
	text-align:left;
	padding:4px 0 4px 29px;
	background:none;
	text-shadow:none;
	font-family: Arial, Helvetica, sans-serif; 
	}
.sf-menu li li li a{
	font-size: 10px; 
	line-height: 20px;
	display:inline-block;
	color:#fff;
	}
.sf-menu li li li a:hover{
	color:#ffc539;
	text-decoration: none;
	}
/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 995px) {
.sf-menu li{width:125px;}	
.sf-menu>li:first-child{width:123px;}
.sf-menu>li>a{}
}

@media only screen and (max-width: 767px) {
  nav{
		float:none;
		font:12px/15px Arial, Helvetica, sans-serif;
		text-transform:uppercase;
		color:#fff;
		padding:8px 3px 5px 3px;
		margin: 13px 10px 0 10px;
		border-radius: 4px;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
		nav:before{
			content:'Menu:';
			display:none;
			margin-bottom:5px;
		}
	.sf-menu{display:none;}
	nav select{
		font:12px/15px Arial, Helvetica, sans-serif;
		color:#464646;
        outline: none;
		border:2px solid #9e9e9e;
		border-radius: 3px;
		display: block !important;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
}

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