/* @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;
} */
#boncategory .sf-menu li img{
    width: 20px;
    margin-right: 10px;
}
.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);
    height: 150vh;
}

#boncategory {
    position: relative;
    height: auto;
    box-shadow: 0 0 4px rgba(187, 187, 187, 0.13);
    z-index: 18;
    margin-top: 0 !important;
    width: 420px;
}
#boncategory:hover {
    cursor: pointer;
}

#boncategory .boncategory-title {
    text-transform: uppercase;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 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;
}
#boncategory.sticky-category .sf-menu {
    opacity: 0;
    transform: translateY(25px);
    visibility: hidden;
}

#boncategory.sticky-category .sf-menu.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


    /*** 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: -2px;
}
#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: 2px 0 2px 0;
    position: absolute;
    top: 100%;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.06));
    transition: all .3s ease;
    opacity: 0;
    visibility: hidden;
}

/*#index #boncategory .sf-menu {*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*}*/
/*#index .sticky-head #boncategory .sf-menu {*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    pointer-events: none;*/
/*}*/

#boncategory .sf-menu .submain:after {
    content: '\e804';
    font-family: Mercury;
    color: #3a3a3a;
    font-weight: 600;
    font-size: 13px;
    position: absolute;
    right: 40px;
    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: 0.721em 40px;
    text-decoration: none;
    zoom: 1; /* IE7 */
    color: #3A3A3A;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    line-height: 0.95rem;
    display: flex;
    align-items: center;
}
/*@media (min-width: 1881px) and (max-width: 2879px) {*/
/*    #boncategory .sf-menu a {*/
/*        padding: calc(12px + (8 - 12) * ((100vw - 1881px) / (2879 - 1881))) calc(40px + (52 - 40) * ((100vw - 1881px) / (2879 - 1881)));*/
/*    }*/
/*}*/
/*@media (min-width: 1681px) and (max-width: 1880px) {*/
/*    #boncategory .sf-menu a {*/
/*        padding: calc(12px + (9 - 12) * ((100vw - 1681px) / (1880 - 1681))) 40px;*/
/*    }*/
/*}*/

@media (min-width: 992px) and (max-width: 1681px) {
    #boncategory .sf-menu .submain:after {
        right: calc(15px + (40 - 15) * ((100vw - 992px) / (1681 - 992)));
    }
    #boncategory .sf-menu a {
        padding: calc(6px + (12 - 6) * ((100vw - 992px) / (1681 - 992))) calc(32px + (40 - 32) * ((100vw - 992px) / (1681 - 992)));
        font-size: calc(10px + (16 - 10) * ((100vw - 992px) / (1681 - 992)));
    }
}

#boncategory .sf-menu li:not(:last-child):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:after{
    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;
}
#boncategory .sf-menu li:hover h5 > a,
#boncategory .sf-menu li.sfHover > a,
#boncategory .sf-menu li:hover > a{
    color: #000000;
}

/*** 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: 26px;
    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 (any-hover: hover) {
    #boncategory:hover .sf-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
}
@media (any-hover: none) {
    #boncategory .sf-menu.open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (min-width: 991px) and (max-width: 1880px) {
    #boncategory .boncategory-title h4 {
        font-size: calc(10px + (13.6 - 10) * ((100vw - 991px) / (1880 - 991)));
    }
}

@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: 1880px) {
    #boncategory {
        width: calc(217px + (420 - 217) * ((100vw - 991px) / (1880 - 991)));
    }
}
@media (max-width: 1200px) {
    #boncategory .sf-menu {
        top: 46px;
    }
}
@media (max-width: 991px) {
    #boncategory {
        display: none;
    }
}