@media only screen and (max-width: 767px) {
  .nav-container { background:#fff; }

  #nav-box { margin:20px 0; position: relative; border: 1px solid transparent; background-image: linear-gradient(to right,#555,#333); }
  #nav-phone { display: block; background:url(../images/bg-menu-mobile.png) no-repeat 95% 17px; cursor:pointer; height:50px; line-height:50px; font-size:18px; text-transform: uppercase; padding:0 5%; color:#fff;  }

  #nav { position: relative; display: none; z-index: 2; margin: 0; }
  #nav li, #nav ul li { margin: 0; padding: 0; cursor: pointer; background: #f5f5f5; position: relative; width:auto; height:auto; float:none; }

  #nav ul.level0 > li.parent { min-height:auto; }
  #nav > li.parent > a:after { display:none; }

  #nav li.parent strong { position: absolute; display: block; background: url(../images/toogle-button.png) center -52px no-repeat; top: 6px; right: 0; height: 30px; width: 30px; }
  #nav li.active > a > strong { background-position: center 9px; }
  #nav li.active > ul { display:block; }
  #nav li.active > a { color:#0fc0ec; }

  #nav ul { left:0;top:0;position:relative;display:none;width:100%;padding:0;background:#fefefe;border:0; }
  #nav ul li { background:none; }
  #nav ul li a { padding:0 20px; font-size:13px; color: #333; text-transform: capitalize; display: block; position: relative; border-bottom: 1px solid #d8dde0; line-height: 40px; margin: 0 15px;}
  #nav a.level-top { font-size: 14px; color: #333; text-transform: capitalize; display: block; position: relative; border-bottom: 1px solid #d8dde0; line-height: 40px; margin: 0 15px;}

  #nav ul ul{ width:auto;border:0;}
  #nav ul ul li a { padding:0 40px; }
}