/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 999;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
        margin-top: 0px;
}

/* menu icon */
#menu-icon {
        display: none; /* hide menu icon initially */
}
.sf-menu {
    width: 585px;
    margin: 43px auto 0px auto;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 10em; /* allow long menu items to determine submenu width */
	*width: 10em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	padding: 10px 15px 10px 15px;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
    color : #8e8968;
    font-family: 'Open Sans', sans-serif;
    font-size : 12px;
    font-weight: 400;
    text-transform: uppercase;
}
.sf-menu a:hover {
    color : #ffffff;
    -webkit-transition: color 500ms ease-in;
    -moz-transition: color 500ms ease-in;
    -o-transition: color 500ms ease-in;
    transition: color 500ms ease-in;
}
.sf-menu li {
	background: transparent;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu a.selected,
.sf-menu a.selected:hover {
    color : #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size : 12px;
    text-transform: uppercase;
    font-weight: 400;
}

.sf-menu ul li {
	background: #303030;
}
.sf-menu ul li a {
	color: #8e8968;
    text-transform: uppercase;
	padding: .5em 20px;
	text-decoration: none;
    border-right: 0px;
    margin-bottom: 0px;
}
.sf-menu ul li:hover {
	background: #303030;
}
.sf-menu ul li a:hover {
	color: #ffffff;
	padding: .5em 20px;
	text-decoration: none;
    border-right: 0px;
    margin-bottom: 0px;
}
.sf-menu ul ul li {
	background: #ec251d;
}



.sf-menu li:hover,
.sf-menu li.sfHover {
    background: #303030;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
    -webkit-transition: background 500ms ease-in;
    -moz-transition: background 500ms ease-in;
    -o-transition: background 500ms ease-in;
    transition: background 500ms ease-in;
}


@media (min-width: 992px) and (max-width: 1199px) {
      /* iPad landscape */

        #nav-wrap {
        margin-top: 0px;
        }

        /* menu icon */
        #menu-icon {
                display: none; /* hide menu icon initially */
        }
        .sf-menu {
              width: 650px;
              margin: 43px auto 0px auto;
          }
        .sf-menu a,
        .sf-menu a.selected,
        .sf-menu a.selected:hover {
            font-size : 12px;
	        padding: 10px 15px 10px 15px;
        }

}


/************************************************************************************
MOBILE
*************************************************************************************/
@media (min-width: 768px) and (max-width: 991px) {
      /* iPad portrait */

        /* nav-wrap */
        #nav-wrap {
                position: relative;
        }
        /* menu icon */
        #menu-icon {
                display: none; /* hide menu icon initially */
        }
        .sf-menu {
              width: 580px;
              margin: 43px auto 0px auto;
        }
        .sf-menu a,
        .sf-menu a.selected,
        .sf-menu a.selected:hover {
            font-size : 12px;
	        padding: 10px 10px 10px 10px;
        }

}



@media (max-width: 767px) {
      /* cell phones portrait and landscape */

        /* nav-wrap */
        #nav-wrap {
                position: relative;
        }

        /* menu icon */
        #menu-icon {
                color: #ffffff;
                height: 30px;
                font-size: 16px;
                font-family: 'Open Sans', sans-serif;
                background: #303030 url("../images/menu-icon.png") no-repeat 10px center;
                padding: 10px 10px 0 46px;
                cursor: pointer;
                display: block; /* show menu icon */
        }
        #menu-icon:hover {
                background-color: #303030;
        }
        #menu-icon:active {
                background-color: #303030;
        }

        /* main nav */
        .sf-menu {
                clear: both;
                position: absolute;
                top: 0px;
                margin: 0px auto 0px auto;
                width: 100%;
                z-index: 10000;
                background: #303030;
                display: none; /* visibility will be toggled with jquery */
        }
        .sf-menu li {
                clear: both;
                float: none;
                padding: 10px 0 10px 10px;
                border-bottom: 1px solid #212121;
                border-top: 1px solid #494949;
        }
        .sf-menu a,
        .sf-menu ul a {
                display: inline;
                color : #ffffff;
	            padding: 10px 15px 10px 15px;
        }
        .sf-menu a:hover,
        .sf-menu ul a:hover {
                background: none;
                color: #ffffff;
        }
        .sf-menu a.selected,
        .sf-menu a.selected:hover {
                background: none;
            color: #ffffff;
        }

        /* dropdown */
        .sf-menu ul {
                width: auto;
                position: static;
                display: block;
                border: none;
                background: inherit;
                box-shadow: none;
                margin-top: 10px;
                margin-bottom: -10px;
        }
        .sf-menu ul li {
                background: #8e8968;
                margin: 0px 0px 0px -10px;
                padding: 10px;
                border-bottom: 1px solid #797559;
                border-top: 1px solid #a6a07a;
        }
        .sf-menu ul li li {
                background: #000000;
                margin: 0px 0px 0px -10px;
                padding: 10px;
                border-bottom: 1px solid #121212;
                border-top: 1px solid #414141;
        }
        .sf-menu li:hover,
        .sf-menu li.sfHover {
            background: none;
        }
        .sf-menu ul li a {
        	color: #ffffff;
        }
        .sf-menu ul li:hover {
        	background: #303030;
        }
        .sf-menu ul li a:hover {
        	color: #ffffff;
        }
}

@media (max-width: 480px) {

  }