/* nav css */
/*First =============================================================================================*/
nav {
    float: left;
    clear: left;
/*  margin-top: 10px; /* adjust as necessary */
}
nav ul.sf-menu {
    padding: 0;
    margin: 0; /* reset list style */
/*  background: #CCC; /* give your menu a bg colour, if necessary */
/*  width: 940px; /* same as header width */
}
/*Second ============================================================================================= */
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu {
    line-height: 1.0;
}
.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 100%;
    padding-top: 10px;
    padding-left: 20px;
    background: rgba(0,0,0,0.5);
    min-width: 150px;
}
.sf-menu ul li {
    width: 100%;
    margin:13px 0;
}
.sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li a:hover{
    color: #bbb;
}

.sf-menu li {
    position: relative;
    
}
.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left: 0;
    top: 2.35em;
    z-index: 99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
}
/*Third ============================================================================================= */
/*** DEMO SKIN ***/
.sf-menu {
    float: left;
    margin-bottom: 1em;
}
.sf-menu a {
/*  border-left: 1px solid #fff;
    border-top: 1px solid #CFDEFF; */
    text-decoration: none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #fff;
}
.sf-menu li {
/*  background: #BDD2FF; */
}
.sf-menu li li {
/*  background: #AABDE6; */
}
.sf-menu li li li {
/*  background: #9AAEDB; */
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
/*  background: #CFDEFF; */
    outline: 0;
}


/*****************************************************/
/*****************************************************/

/*Parent Menu or First Level */
#thenavigator {
    position:relative;
    width: 960px;
}
#thenavigator > li{
    display: inline-block;
    padding: 0;

    margin: 0;    
}

#thenavigator > li:first-child {
    padding-left: 0 !important
}

#thenavigator > li:nth-last-child(2) {
    padding-right: 0 !important
}

#thenavigator > li > a {
    color: #000;
    padding: 0;
    margin: 0;
    border:1px solid transparent
}

#thenavigator > li > a:link, #thenavigator > li > a:visited, #thenavigator > li > a:active {
    /* font-weight: 400 !important; */
    padding: 9px 20px;
}

#thenavigator > li > a:hover {
    border: 1px solid #fff
}


/* #thenavigator > li.current-menu-item > a,
#thenavigator > li.current_page_item > a,
#thenavigator > li.menu-item.current-menu-item > a,
#thenavigator > li.current_page_ancestor > a,
#thenavigator > li.current-menu-ancestor > a {
    color: #6a0f18;
    border-bottom: 6px solid #6a0f18;
    z-index: 100;
} */
#thenavigator .menu-item.current-menu-item > li > a::after, #thenavigator .menu-item.current-menu-item > a::after, #thenavigator > li > a::after {
    /* content: "";
    position: absolute;
    width: 100%;
    height: 7px;
    top: -4px;
    left: 0;
    background-color: #6a0f18;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s; */
}
#thenavigator .menu-item.current-menu-item > li > a:hover::after,
#thenavigator .menu-item.current-menu-item > a:hover::after,
#thenavigator > li > a:hover:after {
    /*width: 100%;
    color: #000;
    border-bottom: 4px solid #e00000;
    z-index: 100;*/
    color: #6a0f18;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* Sub submenu or third and so on Level of menus */
#thenavigator > li > ul.sub-menu > li ul.sub-menu{}
#thenavigator > li > ul.sub-menu > li ul.sub-menu li{}
#thenavigator > li > ul.sub-menu > li ul.sub-menu li > a:link, #thenavigator > li > ul.sub-menu > li ul.sub-menu li > a:visited, #thenavigator > li > ul.sub-menu > li ul.sub-menu li > a:active{}
#thenavigator > li > ul.sub-menu > li ul.sub-menu li > a:hover{}
