#nav-demo {
  display: inline-block;
  right:0;
}
.nav-demo-mobhide { display:none!important}



#nav-demo .custom-mobnav > li {border-top: 1px dashed #333;}
#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: #4eb848;
    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:#222; color:#fff}
#nav-demo .menupop { display:none }




.mnav-menu { background:#222;
    margin: 0;
    width:300px;
    display: block;
    padding-left: 0;
    list-style-type: none;
    position:absolute;
    right:0
}

.mnav-menu-item {
    display: inline-block;
}

.mnav-menu-item a { font-size:13px;
    text-transform:uppercase;
    display: block;
    padding: 10px 10px;
}

.mnav-submenu { 
    position: absolute;
    padding-left: 0;
    z-index: 9999;
    display: none;
    list-style-type: none;
}

.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: 0;
    background-image: url('../images/mobile-nav-icon.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #111;
    /* color: #222; */
}

.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: #4eb848;
    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);
}

@media only screen and (max-width:  1100px) { /* Set to width according to BASE */
    #nav-demo {
      padding-top: 20px;
    }

    .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;
    }

}

/* for 415px or less */
@media screen and (max-width: 415px) {
    #nav-demo { top:15px; width:100%;}
    .mnav-menu {width:100%;position:absolute;/* top:70px */}
}