/**********************************************************
*    IncludeMe Tools
*    IncludeMe-nav V3.0.0
*    Copyright 2023, Hyssop Production
*    https://www.hyssop.com/
**********************************************************/

.nav-main {
    background-color: #2483c5; /*menu BG color*/
    padding: 5px 0;
}

.nav-main > menu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.nav-main li {
    list-style-type: none;
    background-color: #2483c5; /*link BG color*/
}

.nav-main a, .nav-main span {
    padding: 4px 8px;
    text-decoration: none;
    color: #fff; /*link text color*/
    width: 100%;
    text-align: left;
}

.nav-main li li a, .nav-main li li span {
    color: #fff; /*sub menu link text color*/
}

.nav-main a:hover {
    text-decoration: underline;
}

.nav-main > menu li {
    text-transform: uppercase;
}

.nav-main > menu li.has-child {
    z-index: 0; /*keep submenus on top when main menu wraps*/
}

.nav-main li menu {
    display: none;
    position: absolute;
    width: max-content;
}

.nav-main li:hover > menu {
    display: flex;
    flex-direction: column;
}

.nav-main li > menu menu {
    margin: 0 0 0 100%;
}

.nav-main li li {
    display: flex;
    text-transform: none;
}

.nav-main li li:last-child {
    border-radius: 0 0 5px 5px;
}

.nav-main li li li:first-child {
    border-radius: 5px 5px 0 0;
}

.nav-main li li li:last-child {
    border-radius: 0 0 5px 5px;
}

.nav-main .control {
    display: none;
}

.js-show-block {
    display: none;
}

/*-- desktop -----------------------------------------------------------------------------------------*/
@media all and (min-width: 700px) {
    .nav-main .has-child::after {
        position: relative;
        right: 6px;
        color: #97d3f0; /*control symbol color*/
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "V"; !*"V" arrow*!*/
        /*font-family: arial, sans-serif; !*font for "V" arrow*!*/
    }
}

/*-- mobile -----------------------------------------------------------------------------------------*/
@media all and (max-width: 699px) {
    .nav-main > button {
        width: 100%;
    }

    .nav-main > menu {
        display: block;
    }

    .nav-main li {
        line-height: 1.7rem;
        text-align: left;
    }

    .nav-main a, .nav-main span {
        width: calc(100% - 65px);
        display: inline-block;
    }

    .nav-main li menu {
        display: block;
        position: unset;
        padding: 0 0 0 20px;
    }

    .nav-main li li {
        display: block;
    }

    .nav-main li > menu, .nav-main li > menu menu {
        margin: 0;
        width: 100%;
    }

    .nav-main .control {
        border: none;
        background-color: transparent;
        color: #fff; /*control text color*/
        /*transition-duration: 2.5s;*/
    }

    .nav-main .control.activated {
        /*color: #00f; !*activated control text color*!*/
    }

    .nav-main .control::before, .nav-main .control::after, .nav-main .control {
        font-size: 1.2rem;
    }

    .nav-main .control.mmcon::before {
        content: "\2630"; /*hamburger icon*/
    }

    .nav-main .control.mmcon::after, .nav-main .control.activated.mmcon::after {
        display: none; /*disables arrow in main menu button*/
        padding: 0;
    }

    .nav-main .control::after {
        display: inline-block;
        width: 1rem;
        padding-left: 20px;
        font-size: 1.5rem;
        color: #97d3f0; /*control symbol color*/
        /*content: "\27a4"; !*delta*!*/
        /*transform: rotate(90deg);*/
        /*content: "\25bc"; !*filled triangle arrow*!*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\25ef"; !*circle*!*/
        /*content: "\2b58"; !*bold circle*!*/
        content: "+"; /*"+" plus*/
        /*content: "\271a"; !*bold cross*!*/
        /*content: "\22c1"; !*down arrow*!*/
        /*content: "V"; !*"V" arrow*!*/
        /*font-family: arial, sans-serif; !*font for "V" arrow*!*/
        /*transition-duration: 0.7s;*/
    }

    .nav-main .control.activated::after{
        /*padding-left: 14px;*/
        font-size: 1.1rem;
        /*color: #f00; !*activated control symbol color*!*/
        /*content: "\27a4"; !*delta*!*/
        /*transform: rotate(270deg);*/
        /*content: "\25bc"; !*filled triangle arrow*!*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\25ef"; !*circle*!*/
        /*content: "\2b58"; !*bold circle*!*/
        /*content: "\2715"; !*multiplication X*!*/
        /*content: "\2716\fe0e"; !*bold multiplication X*!*/
        /*content: "-"; !*"-" minus*!*/
        content: "\2012"; /*dash*/
        /*content: "\22c0"; !*up arrow*!*/
        /*content: "V"; !*"V" arrow*!*/
        /*font-family: arial, sans-serif; !*font for "V" arrow*!*/
        /*transform: rotate(180deg);*/
    }
}