/* @font-face {
    font-family: 'Mercury';
    src: url('../fonts/Mercury-Regular.eot?62418065');
    src: url('../fonts/Mercury-Regular.eot?62418065#iefix') format('embedded-opentype'),
    url('../fonts/Mercury-Regular.woff?62418065') format('woff'),
    url('../fonts/Mercury-Regular.ttf?62418065') format('truetype'),
    url('../fonts/Mercury-Regular.svg?62418065#mercury') format('svg');
    font-weight: 400;
    font-style: normal;
} */

.bongdpr {
    z-index: 9999;
}
.mercury-icon-angle-right:before {
    content: '\e804';
}

#boncategory .material-icons {
    margin-right: 2px!important;
    margin-left: -2px;
    font-size: 1.2rem;
}

#boncategory-overlay {
    z-index: 17;
    transition: all 0.5s linear;
}

#boncategory-overlay.hover{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
}

#boncategory {
    position: relative;
    height: auto;
    box-shadow: 0 0px 4px rgba(187, 187, 187, 0.13);
    z-index: 18;
    margin-top: 0 !important;
}
#boncategory .boncategory-title {
    text-transform: uppercase;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
}

#boncategory .boncategory-title h4{
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: white;
}

#boncategory .navbar-toggle {
    position: relative;
    float: right;
    padding: 14px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
}

#boncategory .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: white;
}

#boncategory .navbar-toggle .icon-bar+.icon-bar {
    margin-top: 5px;
}


    /*** ESSENTIAL STYLES ***/
#boncategory .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
#boncategory .sf-menu li {
    position: relative;
}
#boncategory .sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
}
#boncategory .sf-menu > li {
    float: left;
}
#boncategory .sf-menu li:hover > ul,
#boncategory .sf-menu li.sfHover > ul {
    display: block;
}

#boncategory .sf-menu a {
    display: block;
    position: relative;
    outline: none;
}
#boncategory .sf-menu a i{
    margin-right: 5px;
}
#boncategory .sf-menu ul ul {
    top: -1px;
    left: 100%;
}
#boncategory .sf-vertical {
    width: 12em;
    /* If you want the width of the closed menu to expand to its
    widest top-level menu item (like its "Supersubs" submenus do),
    replace the width rule above with the following two rules. */
    /*min-width: 12em;*/
    /*width: 12em;*/
}
#boncategory .sf-vertical ul {
    left: 100%;
    top: 0;
}
#boncategory .sf-vertical > li {
    float: none;
}
#boncategory .sf-vertical li {
    width: 100%;
    margin-top: 1px;
}

/*** alter arrow directions ***/
#boncategory .sf-vertical.sf-arrows > li > .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255,255,255,.5);
}
#boncategory .sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
#boncategory .sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
#boncategory .sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
    border-left-color: white;
}
/*** DEMO SKIN ***/
#boncategory .sf-menu {
    max-width: 100%;
    width: 100%;
    background-color: white;
    padding: 5px 0 5px 0;
}
#boncategory .sf-menu .submain:after {
    content: '\e804';
    font-family: Mercury;
    color: #3a3a3a;
    font-weight: 600;
    font-size: 13px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
#boncategory .sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    min-width: 13em; /* allow long menu items to determine submenu width */
    *width: 12em; /* no auto sub width for IE7, see white-space comment below */
    background-color: white;
}
#boncategory .sf-menu a {
    padding: .74em 0.9em;
    text-decoration: none;
    zoom: 1; /* IE7 */
    color: #3A3A3A;
    font-size: 0.95rem;
    font-weight: 400;
    position: relative;
    line-height: 0.95rem;
}
#boncategory .sf-menu a:before {
    content: '';
    width: 93%;
    position: absolute;
    bottom: -1px;
    height: 1px;
    background-color: #e2e2e2;
    left: 50%;
    transform: translateX(-50%);
}
#boncategory .sf-menu li:last-child a:before{
    display: none;
}
.sf-menu li {
    /*background: white;*/
    /* white-space: nowrap; no need for Supersubs plugin */
    *white-space: normal; /* ...unless you support IE7 (let it wrap) */
    -webkit-transition: background .2s;
    transition: background .2s;
}
/*.sf-menu ul li {*/
/*    background: white;*/
/*}*/
/*.sf-menu ul ul li {*/
/*    background: white;*/
/*}*/
.sf-menu li:hover,
.sf-menu li.sfHover {
    background-color: rgba(51, 103, 150, 0.05);
    /* only transition out, not in */
    -webkit-transition: none;
    transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
    padding-right: 2.5em;
    *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
    position: relative;
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
    content: '\e804';
    font-family: Mercury;
    color: #3a3a3a;
    font-weight: 600;
    font-size: 13px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
    border-color: transparent;
    border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color: white;
}

@media (min-width: 991px) and (max-width: 1200px){
    #boncategory .boncategory-title h4 {
        font-size: 0.85rem;
    }
}
@media (min-width: 768px) and (max-width: 991px){
    #boncategory .material-icons {
        font-size: 0.84rem;
        margin-right: 3px!important;
    }
    #boncategory .boncategory-title h4 {
        font-size: 0.6rem;
    }
    #boncategory .navbar-toggle {
        padding: 5px;
    }
    #boncategory .navbar-toggle .icon-bar {
        width: 15px;
        height: 1px;
    }
    #boncategory .navbar-toggle .icon-bar+.icon-bar {
        margin-top: 3px;
    }
    #boncategory .sf-menu a {
        font-size: 0.65rem;
        line-height: 0.65rem;
    }
    #boncategory .sf-menu .submain:after{
        font-size: 9px;
    }
    .sf-arrows .sf-with-ul:after{
        font-size: 9px;
    }
}
@media (max-width: 991px) {
    #boncategory {
        display: none;
    }
}