/* ==========================================================================
   Header V4
========================================================================== */
/* Menu arrow align style */
div.header-v4 {
    z-index: 103;
    position: relative;
    height: 100%;
}

.header-v4 .cshero-dropdown li.menu-item-has-children > a{ position: relative; }
.header-v4 .cshero-dropdown li.menu-item-has-children > a:before{ position: absolute; top: 14px; font-size: 16px;}

.main-menu-left{ width: 100%;}
.main-menu-left > ul { 
    list-style: none;
    margin: 40px 0;
    padding: 0;
    vertical-align: baseline;
    line-height: normal;
    display: block;
    position: relative;
}

/* The list elements which contain the links */
.main-menu-left > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* General link styling */
.main-menu-left > ul li a {
    /* Layout */
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
}

/* THE SUBMENUS */
.main-menu-left > ul ul {
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in;
}
.main-menu-left > ul ul {
    padding: 0;
}
.main-menu-left > ul ul li a {
    padding: 10px 30px;
}

/* Showing the submenu when the user is hovering the parent link */
.main-menu-left ul ul.sub-menu{
    overflow: hidden;
    -webkit-transition: max-height 1.5s linear;
    -moz-transition: max-height 1.5s linear;
    -o-transition: max-height 1.5s linear;
    -ms-transition: max-height 1.5s linear;
    transition: max-height 1.5s linear;
}

.main-menu-left ul.multicolumn.columns2 > li:nth-child(2n+1),
.main-menu-left ul.multicolumn.columns3 > li:nth-child(3n+1),
.main-menu-left ul.multicolumn.columns4 > li:nth-child(4n+1),
.main-menu-left ul.multicolumn.columns5 > li:nth-child(5n+1){ clear: left;}

    /* ==========================================================================
       Start Scroll Down Menu
    ========================================================================== */
    .header-v4.menu-appear-scrolldown #cshero-header{  /* Fix Scroll down */
        height: 100vh;
        overflow: hidden;
    }
    /* Sub Menu */
    .header-v4.menu-appear-scrolldown  .cshero-dropdown ul.sub-menu{
        max-height: 0;
        max-width: 100%;
    }
    .header-v4.menu-appear-scrolldown  .cshero-dropdown ul.sub-menu li{ width: 100%;}
    /* Hover State - Show Child Menu */
    .header-v4.menu-appear-scrolldown .cshero-dropdown li:hover > ul.sub-menu {
        max-height: 10000px;
    }
    /* ==========================================================================
       End Scroll Down Menu
    ========================================================================== */
    /* ==========================================================================
       Start Flyout Menu
    ========================================================================== */
    .header-v4.menu-appear-flyout #menu .cshero-dropdown li { position: relative; overflow: hidden; text-align: left; }
    .header-v4.menu-appear-flyout #menu .cshero-dropdown li .sub-menu{ 
        position: absolute; top:0; opacity: 0; visibility: hidden; min-width: 250px; overflow: visible;
        -webkit-box-shadow: none;
        -moz-box-shadow:none;
        box-shadow: none;
        -webkit-transition: margin 100ms, visibility 100ms, opacity 100ms;
        -moz-transition: margin 100ms, visibility 100ms, opacity 100ms;
        -o-transition: margin 100ms, visibility 100ms, opacity 100ms;
    }
    .header-v4.menu-appear-flyout #menu .cshero-dropdown  li:hover,
    .header-v4.menu-appear-flyout #menu .cshero-dropdown  li:focus,
    .header-v4.menu-appear-flyout #menu .cshero-dropdown  li:active{overflow: visible;} /* Fix flyout menu hover overlap*/

    .header-position-left.header-v4.menu-appear-flyout #menu .cshero-dropdown  li .sub-menu,
    .header-position-top.header-v4.menu-appear-flyout #menu .cshero-dropdown  li .sub-menu{ left: 100%; margin-left: 300px;}
    .header-position-right.header-v4.menu-appear-flyout #menu .cshero-dropdown li .sub-menu{ right: 100%; margin-right: 300px;}
    @media (min-width: 993px) and (max-width: 1199px){
        .header-position-left.header-v4.menu-appear-flyout #menu .cshero-dropdown  li .sub-menu,
        .header-position-top.header-v4.menu-appear-flyout #menu .cshero-dropdown  li .sub-menu{ left: 0; top: auto; margin-left: 300px;}
        .header-position-right.header-v4.menu-appear-flyout #menu .cshero-dropdown li .sub-menu{ right: 0; top: auto; margin-right: 300px;}
    }
    .header-v4.menu-appear-flyout #menu .cshero-dropdown  li:hover > .sub-menu,
    .header-v4.menu-appear-flyout #menu .cshero-dropdown  li:active > .sub-menu{ opacity: 1; visibility: visible; margin-left: 0; margin-right: 0; z-index: 1;}

        /* Level 2 */
        .header-v4.menu-appear-flyout #menu .cshero-dropdown .sub-menu{}
        .header-position-left #menu .multicolumn > li, 
        .header-position-top #menu .multicolumn > li { float: left;,}
        .header-position-right #menu .multicolumn > li { float: left;}
        .menu-appear-flyout #menu .multicolumn.columns2 > li { width: 50%;}
        .menu-appear-flyout #menu .multicolumn.columns3 > li { width: 33.33%;}
        .menu-appear-flyout #menu .multicolumn.columns4 > li { width: 25%;}
        .menu-appear-flyout #menu .multicolumn.columns5 > li { width: 20%; }


        /* Level 2+ */
        .header-v4.menu-appear-flyout #menu .cshero-dropdown .group .sub-menu .sub-menu{}

        /* Menu Grouped */
        .header-v4.menu-appear-flyout #menu .cshero-dropdown li.group .sub-menu,
        .header-v4.menu-appear-flyout #menu .cshero-dropdown li.group .sub-menu {
            opacity: 1; visibility: visible; margin-left: 0; margin-right: 0;
            position: relative;
            left: auto;
            right: auto;
            padding-left: 0;
        }
    /* ==========================================================================
       End Flyout Menu
    ========================================================================== */

/* Fixed Header Right side */
.header-v4.header-position-top #menu  .cshero-menu-left .cshero-dropdown li.menu-item-has-children > a{}
.header-v4.header-position-top #menu .cshero-menu-left .cshero-dropdown li.menu-item-has-children > a:before {
    left: 5px; top: 50% !important;
}

@media (min-width: 993px) {

    .header-v4 #cshero-header > div{
        padding: 20px 40px;
    }
    .admin-bar.header-v4 #cshero-header {
        margin-top: 32px;
    }
    .header-v4 .header-wrapper {
        position: fixed;
        top: 0;
        height: 100%;
        z-index: 101;
        -webkit-backface-visibility: hidden;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: background-color .3s ease;
        -moz-transition: background-color .3s ease;
        -o-transition: background-color .3s ease;
        -ms-transition: background-color .3s ease;
        transition: background-color .3s ease;
        outline: 0;
    }
}