#menu-icon {
        display: block;
        background-image:url(../images/menu-icon-bg.png);
				    background-position:95% 11px;
				    background-repeat:no-repeat;	
				    -moz-background-color:rgba(74,77,82,1);
				    -webkit-background-color:rgba(74,77,82,1);
				    background-color:rgba(74,77,82,1);
        border-bottom: 5px solid #b06f00;
        font-size: 17px;
        line-height: 21px;
        color: #fff;
        cursor: pointer;
        text-transform: uppercase;
        padding: 13px 0 0 20px;
        height: 33px;
        margin: 0;
     }
      
    #menu-icon.active 
    { 
        background-position: 95% -47px;  
    }
    
    .sf-menu-phone
    {
        display: none;
    }
    
  
/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/
   /* @media screen and (min-width: 920px)
    {
       /* .sm-blue > li > a { 
	        min-width:127px; 
	        height:32px;
	        padding:0 10px; 
	        line-height:32px; 
	        font-size:12px; 
	        font-weight:bold; 
	        text-transform:uppercase; 
	        text-align:center; 
	        color:#FFFFFF; 
	        -moz-border-radius:5px;
	        -webkit-border-radius:5px;
	        border-radius:5px; 
         }

        .sm-blue > li > a:hover { 
	        color:#fff; 
        }
    }*/

/* decrease horizontal main menu items left/right padding to avoid wrapping 
@media screen and (max-width: 850px) {
	.sm-blue:not(.sm-blue-vertical) > li > a {
		padding-left:18px;
		padding-right:18px;
	}
}

@media screen and (max-width: 750px) {
	.sm-blue:not(.sm-blue-vertical) > li > a {
		padding-left:10px;
		padding-right:10px;
	}
}

.sm-blue li:last-child>a
{
	margin-right: 0px;
}
*/
	
/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/
@media (min-width: 1200px) 
{    

     .sm-blue > li > a 
     {  
	        height:32px;
	        padding:0 10px; 
	        line-height:32px; 
	        font-size: inherit;
	        font-weight:bold; 
	        text-transform:uppercase; 
	        text-align:center; 
	        color:#FFFFFF; 
	        -moz-border-radius:5px;
	        -webkit-border-radius:5px;
	        border-radius:5px; 
     }
    
     /*The Size of the tabs in the menu*/
    .sm-blue > li
    {
        width: 16.585%;
    }
    
    /*The Size of the tabs in the menu with the administration tab enabled*/
   .sm-blue-with-administration > li
    {
        width: 14.20%;
    } 
    
}

@media (min-width: 980px) and (max-width: 1199px)
{
    .sm-blue > li > a 
     {  
	        height:32px;
	        padding:0 10px; 
	        line-height:32px; 
	        font-size: inherit; 
	        font-weight:bold; 
	        text-transform:uppercase; 
	        text-align:center; 
	        color:#FFFFFF; 
	        -moz-border-radius:5px;
	        -webkit-border-radius:5px;
	        border-radius:5px; 
     }
     
     .sm-blue-with-administration > li > a 
     {  
	        height:32px;
	        padding:0 10px; 
	        line-height:32px; 
	        font-size:10px; 
	        font-weight:bold; 
	        text-transform:uppercase; 
	        text-align:center; 
	        color:#FFFFFF; 
	        -moz-border-radius:5px;
	        -webkit-border-radius:5px;
	        border-radius:5px; 
     }
    
     /*The Size of the tabs in the menu*/
    .sm-blue > li
    {
        width: 155.55px;
    }
    
    /*The Size of the tabs in the menu with the administration tab enabled*/
   .sm-blue-with-administration > li
    {
        width: 133.2px;
     }  

}

@media (min-width: 980px) 
{    
    .sm-blue {
	    height: 35px;
	}

	.sm-blue ul {
		border:1px solid #a9a9a9;
		padding:7px 0;
		color: #FFFFFF;
	}

	/* for vertical main menu subs and 2+ level horizontal main menu subs round all corners */
	.sm-blue-vertical ul,
	.sm-blue ul ul {
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		border-radius:4px;
	}

/* Menu items
===================*/
    .sm-blue a {
		padding:13px 15.5px;
		color:#fff;
		font-size:12px;
		line-height:9px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-decoration:none;
	}

	.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active,
	.sm-blue a.highlighted {
		background: #4a4d52; /* Old browsers */
		color:#FFFFFF;
	}

	.sm-blue ul a {
		padding:9px 40px 8px 23px;
		background: #4a4d52;
		color: #fff;
		font-size: inherit;
		text-shadow:none;
	}

	.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active,
	.sm-blue ul a.highlighted {
		background: #edcc63; /* Old browsers */
		color: #4a4d52;
	}

	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
	.sm-blue a.current, .sm-blue a.current:hover, .sm-blue a.current:focus, .sm-blue a.current:active,
	.sm-blue ul a.current, .sm-blue ul a.current:hover, .sm-blue ul a.current:focus, .sm-blue ul a.current:active {
		background: red;
		color:#fff;
	}
	.sm-blue a.has-submenu {

	}


/* Sub menu indicators
===================*/

	.sm-blue a span.sub-arrow {
		position:absolute;
		bottom:-3px;
		left:50%;
		margin-left:-5px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:5px; /* tweak size of the arrow */
		border-style: solid dashed dashed dashed;
		border-color:#FFFFFF transparent transparent transparent;
	}

	.sm-blue-vertical a span.sub-arrow,
 	.sm-blue ul a span.sub-arrow {
		bottom:auto;
		top:50%;
		margin-top:-5px;
		right:15px;
		left:auto;
		margin-left:0;
		border-style:dashed dashed dashed solid;
		border-color:transparent transparent transparent #ffffff;
	}


/* Items separators
===================*/

	.sm-blue li {
		border-left:1px solid transparent;
	}

	.sm-blue li:first-child,
	.sm-blue-vertical li,
	.sm-blue ul li {
		border-left:0;
	}


/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/

	.sm-blue span.scroll-up, .sm-blue span.scroll-down {
		position:absolute;
		display:none;
		visibility:hidden;
		overflow:hidden;
		background:red;
		height:20px;
		/* width and position will be automatically set by the script */
	}

	.sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow {
		position:absolute;
		top:-2px;
		left:50%;
		margin-left:-8px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:8px; /* tweak size of the arrow */
		border-style:dashed dashed solid dashed;
		border-color:transparent transparent #247eab transparent;
	}

	.sm-blue span.scroll-down-arrow {
		top:6px;
		border-style:solid dashed dashed dashed;
		border-color:red transparent transparent transparent;
	}
}

@media (max-width: 979px)
{    
    .sf-menu-phone 
    {
        -moz-background-color:rgba(176,111,0,0.5);
				    -webkit-background-color:rgba(176,111,0,0.5);
				    background-color:rgba(176,111,0,0.5);
        position: relative;
        padding: 13px 20px 20px;
        z-index: 2;
        margin: 0;
        list-style: none;
    }
    
    .sf-menu-phone li 
    { 
        padding: 8px 0;  
        position: relative; 
        font-size: 18px; 
    }

    .sf-menu-phone > li
    {  
        border-bottom: 1px solid #b06f00; 
    }

    .sf-menu-phone li a 
    { 
        display: inline-block;  
        color: #fff;  
    }

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

    .sf-menu-phone li li 
    {
        font-size: 14px; 
        padding: 3px 0; 
    }

    .sf-menu-phone li li.last 
    { 
        padding-bottom: 0;  
    }

    .sf-menu-phone li strong 
    {
        position: absolute;
        display: block;
        background: url(../images/toogle-button3.png) center -54px no-repeat;
        top: 4px;
        right: 0;
        height: 24px;
        width: 24px;
    }

    .sf-menu-phone li strong:hover 
    { 
        cursor: pointer; 
    }

    .sf-menu-phone li strong.opened 
    { 
        background-position: center 7px; 
    }
    
    /* dropdown */
    .sf-menu-phone ul 
    {  
        width: auto;  
        padding: 8px 0 0 20px;  
        display: none;  
        list-style: none;
    }
    
    .sf-menu-phone > li.active > a > span 
    {
        color: inherit;
    }
    
    .sf-menu-phone > li.active > a,
    .sf-menu-phone > li > a:hover 
    { 
        color: #fff; 
        padding-left:5px; 
    }

    .sf-menu-phone li li.active > a,
    .sf-menu-phone li li a:hover 
    {
        color: #fff; 
        padding-left:5px; 
    }
    
    .sf-menu-phone > li > a,
    .sf-menu-phone li li a { transition: all 0.3s ease 0s; }

}

@media (min-width: 768px) and (max-width: 979px) 
{
       #menu-icon,
      .sf-menu-phone {margin: 0;}
}

@media (max-width: 767px) 
{
}


@media (max-width: 480px) 
{
}