.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu{}
.sf-menu > li {
  position:relative;
  float:left;
  font:400 18px/22px 'Oswald', sans-serif;
  text-align:center;
  text-transform:uppercase;
  text-shadow:1px 1px 1px #093756;
  background: #005B99;
  padding:0 20px;
  /* 
  padding-right:2px;
  width:152px;
  letter-spacing:-1px; 
  */
}
 .sf-menu > li.last-item{background:none; padding-right:0;}
 .sf-menu > li > a {
    display:block; 
    font-weight:normal; 
    color: #FFF; 
    background:url(../images/menu-tail.png) center -999em repeat-x; 
    padding:20px 20px 18px;
    }
.sf-menu > li.sfHover > a,.sf-menu > li > a:hover{text-decoration:none; text-shadow:none; color:#c2e6ff;}
.sf-menu > li.current > a{background-position:center top; color:#fff; text-shadow:none;}
.sf-menu > li > a span.arrow{display:block; position:absolute; top:48px; left:0; width:100%; height:6px; background:url(../images/menu-arrow.gif) center top no-repeat;}
  .sf-menu > li.current > a span.arrow{background-position:center bottom;}
/***submenu***/
.sf-menu ul {
  position:absolute;
  top:-999em;
  z-index:99;
  width: 250px; 
  display:none;
  background:none;
}
.sf-menu li li{
  width:100%;
  padding:0;
  position:relative;
  font:400 16px/20px 'Oswald', sans-serif;
  text-align:left;
  text-transform:uppercase;
  text-shadow:1px 1px 1px #093756;
}
  .sf-menu li li a{display:block; background:#005B99; color: #FFF; padding:10px 10px; font-weight:normal;font-size:14px;}
    .sf-menu li li > a:hover,.sf-menu li li.sfHover > a{color:#fdfdfd; text-decoration:none; background-color:#AF1E2D; text-shadow:none;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  left:-2px;
  top:61px;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top:-999em;
}
/***subsubmenu***/
.sf-menu ul ul {
  position:absolute;
  top:-999em;
  z-index:99;
  width:312px;
  display:none;
  background:none;
}
  .sf-menu li li li{float:left; padding-left:1px; width:155px;}
    .sf-menu li li li a:hover{background-color:#535353;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left:156px;
  top:0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top:-999em;
}

/* Design for a width of 768px */
@media only screen and (max-width: 995px){
  .sf-menu > li{width:auto;padding:0}
  .sf-menu ul{width:220px;}
  ul.sf-menu li li.sfHover ul{left:121px;}
  .sf-menu ul ul{width:242px;}
  .sf-menu li li li{width:120px;}
  .sf-menu li li a {padding:5px 10px;}
}
/* Design for a width of 480px and 320px */
@media only screen and (max-width: 767px) {
  .sf-menu > li{width:100%; background:none; text-align:left; margin-bottom:2px;padding:0;}
  .sf-menu > li > a{padding:10px 0 9px 22px; background-color:#005B99;}
  .sf-menu > li > a span.arrow, .sf-menu li li a span.arrow{display:block; position:absolute; top:18px; left: auto; right:22px; width:11px; height:6px; background:url(../images/menu-arrow.gif) center top no-repeat;}
    .sf-menu li li.sfHover a span.arrow, sf-menu li li a:hover span.arrow{background-position:center bottom;}
  .sf-menu ul{position:static; width:100%;}
  .sf-menu li li{text-align:left; padding-top:1px;}
  .sf-menu li li a{padding:10px 0 9px 32px;}
  .sf-menu ul ul{position:static; width:100%;}
  .sf-menu li li li{padding:0; float:none; width:100%;}
  .sf-menu li li li a{background-color:#fafafa; padding:8px 0 8px 22px;}
}