/* Navigation button, used for main menu/social menu/top menu,displayed in mobile device */
@media screen and (min-width: 981px) {
    .btn-navbar {
        display: none;
    }
    .menu-container {
        /* reset position to static to let megamenu take the full width */
        position: static;
    }
    .menu-container > ul {
        position: static;
        /* no matter what styles on it, level 1 menu items should always display on large screen */
        /* override the inline display: none; created by Javascript */
        display: block!important;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    header li.menu-item > .submenu-trigger, header li.page_item > .submenu-trigger {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    header li.menu-item.current-menu-ancestor > .submenu-trigger, header li.page_item.current_page_ancestor > .submenu-trigger {
        color: #61b23b;
    }

    /* dropdown menu */
    .dropdownmenu > ul {
        position: absolute;
        /* fix an weird error that font blink on Firefox when hover on one of the menu items. Must set background to rgba */
        background: rgba(40, 40, 40, 0.95);
    }

    /* level 1 submenu */
    header li.menu-item.mi-depth-0:first-child, header li.page_item.pi_depth_0:first-child {
        padding-top: 0;
    }
    header li.menu-item.mi-depth-0:last-child, header li.page_item.pi_depth_0:last-child {
        padding-bottom: 0;
    }
    header li.menu-item.mi-depth-0 > .submenu-trigger, header li.page_item.pi_depth_0 > .submenu-trigger {
        padding: 0;
        border-bottom: 4px solid transparent;
        opacity: 1;
        -webkit-transition: border-bottom .15s ease-out 0s;
        -moz-transition: border-bottom .15s ease-out 0s;
        -o-transition: border-bottom .15s ease-out 0s;
        transition: border-bottom .15s ease-out 0s;
    }
    header li.menu-item.mi-depth-0:hover > .submenu-trigger, header li.page_item.pi_depth_0:hover > .submenu-trigger {
        /* override the grey background */
        background: none;
    }
    header li.menu-item.mi-depth-0.current-menu-ancestor > .submenu-trigger, header li.page_item.pi_depth_0.current_page_ancestor > .submenu-trigger, header li.menu-item.mi-depth-0.current-menu-item > .submenu-trigger, header li.page_item.pi_depth_0.current_page_item > .submenu-trigger {
        /* override the black background of current menu item */
        background: none;
    }
    /* if menu item has submenu, use <li> as the hover sensitive area. Otherwise, use <a> */
    .no-touch header li.menu-item.mi-depth-0 > .submenu-trigger:hover, .no-touch header li.page_item.pi_depth_0 > .submenu-trigger:hover {
        border-bottom-color: #0a0a64 !important;
    }
    .no-touch header li.menu-item.mi-depth-0.menu-item-has-children:hover > .submenu-trigger, .no-touch header li.page_item.pi_depth_0.page_item_has_children:hover > .submenu-trigger {
        border-bottom-color: #0a0a64 !important;
    }
    .touch header li.menu-item.mi-depth-0.submenu-expanded > .submenu-trigger, .touch header li.page_item.pi_depth_0.submenu-expanded > .submenu-trigger {
        border-bottom-color: #0a0a64 !important;
    }
    header li.menu-item.mi-depth-0.menu-item-has-children > ul, header li.page_item.pi_depth_0.page_item_has_children > ul {
        top: 100%;
        border-left: none;
    }
    header li.menu-item.mi-depth-0.menu-item-has-children.reverse > ul, header li.page_item.pi_depth_0.page_item_has_children.reverse > ul {
        border-right: none;
    }
    /* icon/description/dropdown arrow */
    header li.mi-depth-0.mi-with-icon > .submenu-trigger span.mi-desc {
        padding-left: 0px;
    }
    header li.mi-depth-0.mi-with-icon.mi-without-title > .submenu-trigger i.fa {
        position: relative;
        display: inline;
        top: auto;
        left: auto;
    }

    /* trick to restrict the width of parent base on one of its children */
    header li.menu-item.mi-depth-0.mi-with-description > .submenu-trigger {
        display: table;
    }
    header li.menu-item.mi-depth-0.mi-with-description > .submenu-trigger span.mi-title-wrapper {
        display: table-row; 
        width: 1px;
    }
    header li.menu-item.mi-depth-0.mi-with-description > .submenu-trigger span.mi-title {
        display: inline-block;
    }
    header li.menu-item.mi-depth-0.mi-with-description > .submenu-trigger span.mi-desc {
        display: table-cell; 
        width: 1px;
    }
    header li.menu-item.mi-depth-0.mi-with-dropdown-arrow > .submenu-trigger span.mi-title {
        padding-right: 20px;
        background-repeat: no-repeat;
        background-position: right center;
    }
    .nav-collapse {
        display: block;
    }
    header li.menu-item.mi-depth-0 > .submenu-trigger, header li.page_item.pi_depth_0 > .submenu-trigger {
        font-size: 16px !important;
    }
    header li.menu-item.mi-depth-0:first-child > .submenu-trigger, header li.page_item.pi_depth_0:first-child > .submenu-trigger {
        border-top: none;
    }

    /* default dropdown menu */
    .dropdownmenu-default .submenu-trigger {
        padding: 13px 12px;
        border-bottom: 1px solid #444;
    }
    .dropdownmenu-default li.page_item:hover > .submenu-trigger, .dropdownmenu-default li.menu-item:hover > .submenu-trigger {
        background-color: #3a3a3a;
    }
    .dropdownmenu-default li.page_item.current_page_item > .submenu-trigger, .dropdownmenu-default li.menu-item.current-menu-item > .submenu-trigger {
        background: #2c2c2c;
    }
}
/* $Main Header ================================================= */
/* $Title */
header .title img {
    display: block;
    margin: 0 auto;
    max-height: 32px;
}
/* $Media Query ================================================= */
/* media query using max-width list at first, most of them are hard to overwrite when > 980px */
@media screen and (min-width: 801px) {
    .s-801 {
        display: block;
    }
    header.sticky .title img {
        max-height: 32px;
        width: auto;
        -moz-backface-visibility: hidden;
    }
    header.sticky .title a {
        line-height: 36px;
        font-size: 24px;
    }
}
/* level 1 menu */
@media screen and (min-width: 1171px) {
    header.header-opacity-enabled .top {
        background: rgba(51, 51, 51, 0.9);
    }
}
/* $Header 1 ================================================= */
@media screen and (min-width: 981px) {
    .h1 .title {
        height: 90px;
    }
    .h1 .main-header .btn-navbar {
        display: none;
    }
    .h1 .nav-container {
        float: right;
    }
    /* reserve space for the .mobile-nav with different number of icons */
    .h1.with-search-box .nav-container {
        padding-right: 80px;
    }
    .h1.with-cart-box .nav-container {
        padding-right: 81px;
    }
    .h1.with-search-box.with-cart-box .nav-container {
        padding-right: 130px;
    }
    .h1 .mobile-group {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .h1 .mobile-nav li {
        height: 57px;
        padding-top: 29px;
    }
    .h1 .mobile-nav a.search {
        padding: 0 16px;
    }
    .h1 .mobile-nav a.cart {
        padding: 0 15px;
    }
    .h1 .cart-number-box {
        left: 13px;
        -webkit-border-top-left-radius: 2px;
        border-top-left-radius: 2px;
        -webkit-border-top-right-radius: 2px;
        border-top-right-radius: 2px;
    }
    .h1 nav.mainmenu {
        float: right;
    }
    .h1 nav.mainmenu > ul {
        background-color: transparent;
    }
    .h1 nav.mainmenu li.menu-item.mi-depth-0, .h1 nav.mainmenu li.page_item.pi_depth_0 {
        float: left;
    }
    .h1 nav.mainmenu li.menu-item.mi-depth-0 > .submenu-trigger, .h1 nav.mainmenu li.page_item.pi_depth_0 > .submenu-trigger {
        padding-top: 34px;
        padding-bottom: 34px;
        color: #3f3f3f;
        margin: 0 17px;
    }
    .h1.sticky nav.mainmenu li.menu-item.mi-depth-0 > .submenu-trigger, .h1.sticky nav.mainmenu li.page_item.pi_depth_0 > .submenu-trigger {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .h1 nav.mainmenu li.menu-item.mi-depth-0:last-child > .submenu-trigger, .h1 nav.mainmenu li.page_item.pi_depth_0:last-child > .submenu-trigger {
        margin-right: 0;
    }
    .h1 nav.mainmenu li.menu-item.mi-depth-0 > .submenu-trigger:hover, .h1 nav.mainmenu li.menu-item.mi-depth-0.menu-item-has-children:hover > .submenu-trigger, .h1 nav.mainmenu li.page_item.pi_depth_0 > .submenu-trigger:hover, .h1 nav.mainmenu li.page_item.pi_depth_0.page_item_has_children:hover > .submenu-trigger {
        color: #0A0A64 !important;
    }
    .h1 li.dropdownmenu-default.menu-item-has-children > ul, .h1 li.dropdownmenu-default.page_item_has_children > ul {
        left: 17px;
    }
    .h1 li.dropdownmenu-default.menu-item-has-children.reverse > ul, .h1 li.dropdownmenu-default.page_item_has_children.reverse > ul {
        right: 17px;
        left: auto;
    }
    .h1 li.dropdownmenu-default.menu-item-has-children.reverse:last-child > ul, .h1 li.dropdownmenu-default.page_item_has_children.reverse:last-child > ul {
        right: 0;
    }
    .h1 nav.mainmenu li.menu-item.mi-depth-0.current-menu-ancestor > .submenu-trigger, .h1 nav.mainmenu li.page_item.pi_depth_0.current_page_ancestor > .submenu-trigger, .h1 nav.mainmenu li.menu-item.mi-depth-0.current-menu-item > .submenu-trigger, .h1 nav.mainmenu li.page_item.pi_depth_0.current_page_item > .submenu-trigger {
        color: #0A0A64 !important;
    }
    .h1 nav.mainmenu li.mi-depth-0.mi-with-dropdown-arrow > .submenu-trigger {
        margin-left: 14px;
        margin-right: 15px;
    }
    /* adjust the position of drop down menu */
    .h1 nav.mainmenu li.mi-depth-0.mi-with-dropdown-arrow.menu-item-has-children > ul {
        left: 14px;
    }
    .h1 nav.mainmenu li.mi-depth-0.mi-with-dropdown-arrow.menu-item-has-children.reverse > ul {
        right: 14px;
        left: auto;
    }
    .h1 nav.mainmenu li.mi-with-dropdown-arrow.mi-depth-0 > .submenu-trigger span.mi-title {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon opacity="0.2" points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546"/></g></g></svg>');
    }
    .h1 nav.mainmenu li.mi-depth-0.mi-with-dropdown-arrow:hover > .submenu-trigger span.mi-title {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon fill="%2361B23B" points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546"/></g></g></svg>');
    }
    .h1 nav.mainmenu li.mi-depth-0.mi-with-description > .submenu-trigger {
        padding-top: 27px;
        padding-bottom: 22px;
    }
    .h1.sticky nav.mainmenu li.mi-depth-0.mi-with-description > .submenu-trigger {
        padding-top: 18px;
        padding-bottom: 11px;
    }
    .h1 .search-box {
        top: 100%;
        right: 0;
    }
    .h1 .shopping-bag {
        top: 100%;
        right: 0;
    }
    .h1.sticky .search-box, .h1.sticky .shopping-bag {
        top: 100%;
        right: 0;
    }
}
@media screen and (min-width: 1171px) {
    .boxed-header header.h1, .boxed-header-rounded header.h1 {
        max-width: 1110px;
        margin: 0 auto;
    }
    /* override */
    .boxed-header header.h1.sticky-enabled.sticky, .boxed-header-rounded header.h1.sticky-enabled.sticky {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .boxed-header-rounded header.h1 {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    /* also neeed to add border-radius to .main-header, otherwise it will cover the round corner of <header> */
    .boxed-header-rounded header.h1 .main-header {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .h1.header-opacity-enabled .main-header {
        background: rgba(255, 255, 255, 0.9);
    }

    /* TODO: temp styles, need to remove it */
    .boxed-header .revolution-slider, .boxed-header-rounded .revolution-slider {
        position: relative; 
        top: -90px; 
        margin-bottom: 90px;
    }
}