#nav-demo {
    display: inline-block;
    position: absolute;
    right:0;
}
.nav-demo-mobhide { 
    display:none!important
}
  
  
  
  #nav-demo .custom-mobnav > li {border-top: 1px dashed #2c4f55;}
  #nav-demo .custom-mobnav li { position:relative;}
  #nav-demo .custom-mobnav li a { color:#eee;}
  #nav-demo .custom-mobnav li ul li a { text-transform:initial; padding:10px 30px; font-size:12px; background:#222; border-top:1px dashed #222}
  #nav-demo .custom-mobnav li ul li a::before {
      content:'';
      width:5px;
      height:5px;
      background: #4db748;
      display:block;
      position:absolute;
      left:13px;
      top:16px;
      -webkit-border-radius:100px;
      -moz-border-radius:100px;
      -ms-border-radius:100px;
      -o-border-radius:100px;
      border-radius:100px;
  }
  #nav-demo .custom-mobnav li ul > li:hover > a { background:#333}
  /* #nav-demo .custom-mobnav li ul li ul li {} */
  #nav-demo .custom-mobnav li ul li ul li a { padding:10px 50px}
  #nav-demo .custom-mobnav li:hover > a {  background:#2c4f55; color:#fff}
  #nav-demo .menupop { display:none }
  .mnav-menu { background:#27464b;
      margin: 0;
      width:300px;
      display: block;
      padding-left: 0;
      list-style-type: none;
  }
  
  .mnav-menu-item {
      display: inline-block;
  }
  
  .mnav-menu-item a { font-size:13px;
      text-transform:uppercase;
      display: block;
      padding: 10px 10px;
  }
  
  .mnav-submenu { margin:0; 
      position: absolute;
      padding-left: 0;
      z-index: 9999;
      display: none;
      list-style-type: none;
  }
  .mnav-submenu ul { margin:0}
  
  .mnav-submenu-item a { background:#111!important;
      padding-left: 20px;
  }
  
  .mnav-mobile-btn {
      height: 30px;
      width: 30px;
      padding: 5px;
      display: none;
      cursor: pointer;
      position: absolute;
      top: 2px;
      background-image: url('../images/mobile-nav-icon.svg');
      background-position: 50% 50%;
      background-size:20px;
      background-repeat: no-repeat;
  }
  
  .mnav-open-close {
      display: none;
      float: right;
  }
  
  .mnav-mobile-arrow::before {
      content: "\f0d7";
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #50c04b;
      background: #111;
      width:30px;
      height:30px;
      cursor:pointer;
      text-align:center;
      line-height:30px;
      padding:4px;
      /*height: 30px;
      width: 30px;
      padding: 5px;
      display: block;
      cursor: pointer;
      background-image: url('../images/mobile-arrow-icon.svg');
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-color: #ccc;*/
  }
  
  .mnav-mobile-arrow-mirror {
      -webkit-transform:rotate(180deg);
      -moz-transform:rotate(180deg);
      -ms-transform:rotate(180deg);
      -o-transform:rotate(180deg);
      transform:rotate(180deg);
  }
  
  
  #nav-demo .custom-mobnav > li > ul > li > ul > li > a { font-size:11px}
  #nav-demo .custom-mobnav > li > ul > li > ul > li > a::before { left:32px;}
  
  
  @media only screen and (max-width:1024px) { /* Set to width according to BASE */
      #nav-demo {
        padding-top: 61px; z-index: 1;
      }
      /* #newhpcustom-maintop {
        background: #27464b;
      } */
      #newhpcustom-maintop {
        background: #FFF;
      }
      .nav-demo-mobhide { display:block!important}
      .mnav-mobile-btn {
          display: block;
      }
  
      .mnav-menu {
          display: none;
          padding: 0;
      }
  
      .mnav-menu-item {
          float: none;
          position: relative;
          display: block;
          width: 100%;
      }
  
      .mnav-open-close {
          display: block;
      }
  
      .mnav-submenu {
          width: 100%;
          position: relative;
      }
  
      .mnav-submenu-item a {
          display: block;
      }
  
  }