nav {
  /*float:right;*/ }

.sf-menu {
  padding-top: 18px;
  position: relative; }

.sf-menu li {
  position: relative;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  margin-right: 42px;
  text-shadow: 1px 1px 0px #616051; }
  @media (min-width: 768px) {
    .sf-menu li {
      display: inline-block;
      margin-bottom: 10px; } }
  @media (min-width: 996px) {
    .sf-menu li {
      font-size: 15px; } }

.sf-menu li a {
  color: #595852; }
  @media (min-width: 768px) {
    .sf-menu li a {
      color: #FFF;
      text-shadow: none; } }

.sf-menu > li.sfHover > a,
.sf-menu > li > a:hover,
.sf-menu > li.current > a {
  text-decoration: none;
  color: #0487e2; }

/***submenu***/
.sf-menu ul {
  background: url(../images/submenu-bg.png) center top no-repeat;
  padding-top: 10px;
  position: absolute;
  top: -999em;
  z-index: 99;
  width: 380px;
  display: none;
  text-align: left; }

@media (min-width: 996px) {
  .sf-menu ul {
    width: 430px; } }
.sf-menu li li {
  width: 100%;
  background-color: #818181;
  margin-bottom: 1px;
  position: relative; }

.sf-menu li li a {
  display: block;
  text-transform: uppercase; }
  @media (min-width: 768px) {
    .sf-menu li li a {
      padding: 10px 15px; } }

.sf-menu li li > a:hover,
.sf-menu li li.sfHover > a {
  text-decoration: none;
  background: #065BB5;
  color: #FFF;
  text-shadow: #616051 1px 1px 0px; }

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  left: -123px;
  top: 20px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

/***subsubmenu***/
.sf-menu ul ul {
  background: none;
  padding: 0;
  width: 160px; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 151px;
  top: 0px; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

.arrow {
  display: none; }

/* Design for a width of 768px */
@media only screen and (max-width: 995px) {
  /*menu*/
  .sf-menu {
    padding-right: 15px;
    padding-top: 12px; }

  .sf-menu li {
    margin-right: 15px; }

  /*submenu*/
  .sf-menu li li {
    text-transform: lowercase; } }
/* Design for a width of 480px*/
@media only screen and (max-width: 767px) {
  nav {
    float: none; }

  /*menu*/
  .sf-menu {
    padding-right: 0px;
    margin-top: 10%; }

  .sf-menu li {
    float: none;
    background-color: #CDCECF;
    margin-bottom: 2px;
    margin-right: 0; }

  .sf-menu li a {
    display: block;
    padding: 10px 22px;
    text-shadow: none; }

  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover,
  .sf-menu > li.current > a {
    background: #9a9b9c;
    color: #fff;
    text-shadow: #616051 1px 1px 0px; }

  .sf-menu > li > a .arrow {
    display: block;
    width: 7px;
    height: 4px;
    background: url(../images/menu-arrow.gif) center top no-repeat;
    position: absolute;
    top: 18px;
    right: 15px; }

  /*submenu*/
  .sf-menu ul {
    position: static;
    width: 100%;
    background: none;
    padding-top: 0; }

  .sf-menu li li {
    background: none; }

  .sf-menu li li a .arrow {
    display: inline-block;
    width: 7px;
    height: 4px;
    background: url(../images/menu-arrow.gif) center top no-repeat;
    margin-left: 10px;
    vertical-align: 3px; }

  /*subsubmenu*/
  .sf-menu ul ul {
    width: 100%; }

  .sf-menu ul ul a {
    padding: 5px 22px 5px 40px; } }
.sf-menu > li > a .fa-caret-down {
  display: none; }
  @media (min-width: 768px) {
    .sf-menu > li > a .fa-caret-down {
      display: block;
      position: absolute;
      top: 3px;
      right: -13px; } }
  @media (min-width: 996px) {
    .sf-menu > li > a .fa-caret-down {
      top: 3px;
      right: -20px; } }