/*
NB : .sidebar-enabled let us know if we have falled in the mobile compatibility mode wich use a sidebar and need drastic changes in the styling
*/

/*body .menu.main-menu, body .menu.attached.main-menu {*/
    /*margin-bottom: 50px !important;*/
/*}*/




/*body[data-site="hub"].page-slug-index .main-menu {*/
    /*margin-bottom: 1rem !important;*/
/*}*/

body .ui.menu.main-menu,
body .ui.attached.menu.main-menu {
    margin-bottom: 50px;
}

body.main-menu-has-not-sub-menu-open-onload.with-carousel-header .ui.menu.main-menu,
body.main-menu-has-not-sub-menu-open-onload.with-carousel-header .ui.attached.menu.main-menu {
    margin-bottom: -28px !important;
}

body.page-slug-index .ui.menu.main-menu,
body.page-slug-index .ui.attached.menu.main-menu {
    /* this rule is to avoid the flashing of the standard rule on the homepage (the standard rule uses some js, so it is first rendered with a margin bottom positive) */
    margin-bottom: -28px ;
}

.sub-menu {
    /* see the media query below!!  */
}



.ui.inverted.menu .item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transition: opacity 1s, background-color 1s ease-out;
}
.sub-menu .item:hover a {
    /*font-weight: bolder;*/

}
.sub-menu .item a:hover {
    /*text-decoration: underline;*/
    color: #FFF;
}


.sub-menu {
    visibility: visible;
    opacity: 1;
    height: auto;
}

.sub-menu.hidden {
    /*display: none !important;*/

    /* css transition effect is below */
    visibility: hidden;
    opacity: 0;
    height: 0px;
    transition: visibility .3s, height .3s, opacity .3s, background-color .5s linear;
    /* css transition effect is above */
}

.ui.menu .active.item.menu-item-dashboard, .ui.menu .item.menu-item-dashboard {
    font-weight: bold;
}

.ui.menu .active.item.menu-item-cart, .ui.menu .item.menu-item-cart {
    font-size: 1.5rem;
}


.mobile-hamburger-menu.hidden {
    display: none !important;
}


.main-menu .item span{
    /*height: 51px;*/
}

.main-menu-title {
    font-weight: bold;
    /* see the media query below!!  */
}


.main-menu-subtitle {
    color: grey;
    font-size: 0.93em; /*13.2px*/

    color: rgba(211, 211, 211, 0.71);
}

body:not(.sidebar-enabled) .main-menu-subtitle {
    display: inline-block;
    margin-top: 3px;
}


.main-menu .item.dropdown.hovered i.dropdown.icon, .main-menu:not(.hovered) .item.current_ancestor i.dropdown.icon{
    /*transform: rotate(-90deg);*/
    padding-top: 10px;
    transition: padding-top 1s ease-in-out;
}

.main-menu .item.dropdown.hovered:not(#main-menu-My-iTop-Hub), .main-menu:not(.hovered) .item.current_ancestor:not(#main-menu-My-iTop-Hub), .sub-menu:not([data-main-menu-id="main-menu-My-iTop-Hub"]) {
    background-color: rgba(68,69,70,1) !important;
}


.main-menu .item.hovered, .main-menu:not(.hovered) .item.current_ancestor, .sub-menu {
    background-color: rgba(68,69,70,1) !important;
    /*font-size: 1.3em;*/
}


#main-menu-My-iTop-Hub, div[data-main-menu-id="main-menu-My-iTop-Hub"]  {
    background-color: #ea7d1e !important;
}

#main-menu-My-iTop-Hub .main-menu-subtitle {
    color: rgba(255, 255, 255, .7);
}

.main-menu #main-menu-My-account.item span {
    height: initial;
}

body.sidebar-enabled .ui.vertical.menu .menu .item {
    padding-top: 13px;
    padding-bottom: 13px;
}

@media only screen and (max-width : 767px) {
    body.sidebar-enabled .sub-menu {
        top: 0px !important;
    }

    body:not(.sidebar-enabled):not(.sidebar-disabled) .main-menu, body:not(.sidebar-enabled):not(.sidebar-disabled) .sub-menu {
        display: none;
    }

}
@media only screen and (min-width : 768px) {

    .menu.main-menu, .menu.main-menu > .item {
        height: 77px;
    }

    body.sidebar-enabled .sub-menu {
        top: 0px !important;
    }

    body:not(.sidebar-enabled) div[data-main-menu-id="main-menu-My-iTop-Hub"]  {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-top: 0px !important;
    }



    body:not(.sidebar-enabled) .sub-menu {
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 75px !important;
        height: 50px;
        font-size: initial;
    }


}

@media only screen and (min-width : 1600px) {
    .main-menu-title {
        font-size: 1.3em; /* 18.2px */
    }
    body:not(.sidebar-enabled) .sub-menu  {
        font-size: 1.3em; /* 18.2px */
    }
}


i.icons.made-with-love .icon:first-child {
    margin-right: 0px;
}


#main-menu-Home > a > img {
    width: 200px;
    margin-left: 15px;
    margin-right: 10px;
}

body[data-site="hub"] .ui.menu.mobile-hamburger-menu {
    margin-bottom: 10px;
}


.menu-item-cart-count-jsonp {
    display: none !important;
}
body:not(.sidebar-enabled) .menu-item-cart-count-display {
    /*padding:2px 3px !important;*/
    /*top: 27px !important;*/
    /*left: 58px !important;*/
    padding: 2px 4px !important;
    top: 8px !important;
    right: 4px !important;
}