.nav-container {  position: relative;  z-index: 4; float: left; }
  .sf-menu,
  .sf-menu-phone {display: none;}
  /* menu icon */
 .sf-menu-block {display: block; position: relative;}
  .nav-container-mobile { 
    display: block !important; 
    clear: both;
    margin:15px 0;
    z-index: 6 !important;
  }
  #menu-icon {
    display: block;
    font-size: 20px;
    line-height: 21px;
    cursor: pointer;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    height: 60px;
    padding: 19px 20px;
    background: #8ac249;
    width: 270px;
    box-shadow: 3px 4px 5px rgba(0,0,0,0.14);
    -webkit-box-shadow:3px 4px 5px rgba(0,0,0,0.14);
  }
  #menu-icon:before {content: "\e071"; font-size: 35px; float: right; opacity: 0.4; }
  #menu-icon.active:before { content: "\e073"; }

  .sf-menu-phone {
    background: #fff;
    border-top: 0;
    position: absolute;
    z-index: 2;
    width: 100%;
    box-shadow: 0 0px 13px rgba(0,0,0,0.09);
    -webkit-box-shadow:0 0px 13px rgba(0,0,0,0.09);
    top: 65px;
    padding: 20px 0;
  }
  .sf-menu-phone li {  position: relative;   }
  .sf-menu-phone > li {  padding: 8px 30px; font-size: 16px; line-height: 20px; }
  .sf-menu-phone > li.last {border-bottom: 0;}
  .sf-menu-phone li a { display: inline-block;  color: #455058;  }
  .sf-menu-phone li li {font-size: 13px; padding: 6px 0; }
  .sf-menu-phone li li.last {padding-bottom: 10px;}
  .sf-menu-phone li li:first-child {padding-top: 10px;}
  .sf-menu-phone li li:first-child strong {top:10px;}
  .sf-menu-phone li strong {
    position: absolute;
    display: block;
    top: 12px;
    right: 10px;
    width: 24px;
    font-size: 30px; 
    line-height: 16px;
    text-align: center;
    color: #dadee1;
  }
  .sf-menu-phone > li > strong {}
  .sf-menu-phone li strong:hover { cursor: pointer; }
  .sf-menu-phone li strong:before {content: "\e071"; }
  .sf-menu-phone li strong.opened:before { content: "\e073"; }

  /* dropdown */
  .sf-menu-phone ul {  
    width: auto;  
    display: none; 
    border-bottom: 1px solid #ebecec; 
    border-top: 1px solid #ebecec;
    margin:20px -29px 10px;
    padding: 10px 29px;
  }
  .sf-menu-phone > li.active > a > span {color: inherit;}

  .sf-menu-phone > li.parent.act  {  } 
  
  .sf-menu-phone > li.active > a,
  .sf-menu-phone > li.parent.act > a,
  .sf-menu-phone > li > a:hover { color: #455058; }  

  .sf-menu-phone li li.active > a,
  .sf-menu-phone li li a:hover {color: #00bbd3;}

@media only screen and (max-width: 767px) { 
  .nav-container {margin-top: 60px; float: none;}
  #menu-icon {width: 100%;}
  .sf-menu-block {margin: 0 10px;}
}