/* sticky header */
.movableMenu {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    background: #fff;
    padding: 20px 0;
}
.movableMenu.smaller {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 9999999;
}
.movableMenu.smaller .header_woo_menu {
    display: none;
}
.movableMenu.smaller .header_logo img {
    height: 65px;
}
.movableMenu.smaller .headerGrid {
    display: grid;
    grid-template-areas: "logo mainMenu";
    grid-template-columns: 55px minmax(0, 1fr);
}
.header_logo {
    grid-area: logo;
    text-align: center;
}
.header_main_menu {
    grid-area: mainMenu;
}
.moving {
    margin-top: 113px;
}
.headerGrid {
    grid-template-columns: 85px minmax(0, 1fr);
    grid-template-areas: "logo mainMenu";
}
/* first level menu */
.mainMenu {
    display: flex;
    list-style: none;
    padding: 15px 0 0;
    margin: 0;
    justify-content: space-between;
}
.mainMenu > li {
    flex-grow: 1;
    text-align: center;
    margin: 5px;
}
.mainMenu li a {
    font-size: 1.4rem;
    font-weight: normal;
    color: #264653;
}
.mainMenu > li:hover > a,
.mainMenu > li.current-menu-item > a {
    border-bottom: 2px solid #e76f51;
}
/* multilevel menu */
.header_main_menu {

}
.mainMenu > li {
    position: relative;
}
.mainMenu > li > .sub-menu,
.mainMenu > li.multilevel > .sub-menu {
    padding: 20px 20px 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 0;
    top: 22px;
    z-index: 101;
    width: auto;
    min-width: 400px;
    visibility: hidden;
    opacity: 0;
    /*background: linear-gradient(to bottom, #2a2330, #0f0d14);*/
}
.mainMenu > li.multilevel > .sub-menu .sub-menu {
    padding: 20px 0 10px;
    min-width: 250px;
}
.mainMenu > li > .sub-menu a {
    color: #fff;
}
.mainMenu > li > .sub-menu a:hover {
    color: #e76f51;
}
.mainMenu > li:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
}

.mainMenu > li.multilevel > .sub-menu > li {
    float: left;
    display: block;
}
.mainMenu > li.multilevel > .sub-menu > li > a {
    text-decoration: underline;
    color: #aaa;
}
.mainMenu > li > .sub-menu li {
    text-align: left;
}
.sub-menu li {
    margin-bottom: 10px;
}
.mobileMenuOpener {
    display: none;
}


/* porcupine fixes */
.mainMenu > li > .sub-menu, .mainMenu > li.multilevel > .sub-menu {
    background: #f9f9f9;
    box-shadow: 0 0 3px #aaa;
    border-radius: 5px;
    padding: 20px 30px;
    list-style: none;
}
.mainMenu > li > .sub-menu a {
    color: #EA7A5B;
    font-weight: bold;
    font-size: 1.6rem;
}
.mainMenu > li > .sub-menu li > ul {
    list-style: none;
    padding: 0 0 0 10px;
    margin: 5px 0 15px 0;
}
.mainMenu > li > .sub-menu li > ul li {
    border-bottom: none;
}
.mainMenu > li > .sub-menu li > ul li a {
    font-weight: normal;
    font-size: 1.3rem;
    color: #555;
}

/* mobile */
@media screen and (max-width: 768px) {
    .mainMenu > li:hover > .sub-menu {
        visibility: hidden;
        opacity: 0;
    }
    .mobileMenuOpener {
        display: block;
        text-align: right;
    }
    .movableMenu {
        position: fixed;
        background: #fff;
        z-index: 99;
        width: 100%;
        box-shadow: 0 3px 6px rgba(0,0,0, 0.16);
        padding: 10px 0 0;
    }
    .headerGrid {
        grid-template-columns: 50px minmax(0, 1fr);
    }
    .movableMenu .header_logo img {
        height: 50px;
    }
    .mainContent {
        padding-top: 69px;
    }
    .moving {
        margin-top: 69px;
    }
    .header_main_menu {
        display: none;
    }
    .header_main_menu.open {
        display: block;
        position: absolute;
        top: 69px;
        left:0;
        width: 100vw;
        height: calc( 100vh - 107px );
        overflow-y: scroll;
        background: #FFF;
    }
    .smaller .header_main_menu.open {
        height: calc( 100vh - 69px );
    }
    .mainMenu {
        display: inherit;
    }
    .mainMenu a {
        color: #fff;
    }
    .mobileMenuFunctions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 6px 15px;
        box-shadow: 0 3px 6px rgba(0,0,0, 0.16);
    }
    .mobileMenuFunctions img {
        height: 58px;
        width: auto;
    }
    .closeMenu {
        text-align: right;
    }
    .closeMenu img {
        height: 20px;
        margin-top: 16px;
    }
    .mainMenu > li.multilevel > .sub-menu .sub-menu {
        visibility: hidden;
        opacity: 0;
        display: none;
    }
    .mainMenu > li > .sub-menu,
    .mainMenu > li.multilevel > .sub-menu {
        min-width: 100px;
    }
    .mainMenu > li.expand > .sub-menu,
    .mainMenu > li.multilevel.expand > .sub-menu {
        visibility: visible;
        opacity: 1;
        position: relative;
        left: 0;
        top: 0;
        display: block;
        padding-bottom: 20px;
        background: #fff;
        box-shadow: none;
        border-radius: 0;
    }
    .mainMenu > li > .sub-menu a {
        color: #264653;
    }

    .mainMenu > li.expand > .sub-menu li.expand .sub-menu,
    .mainMenu > li.multilevel.expand > .sub-menu  li.expand .sub-menu {
        visibility: visible;
        opacity: 1;
        display: block;
    }
    .mainMenu > li.multilevel > .sub-menu > li {
        float: none;
    }
}