/* vars */
/* hide show mixin */
/* global  styles */
.multi-menu {
    background: #eaeaea;
    z-index: 999!important;
    position: relative;
}

.multi-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu,
.multi-menu a {
    color: #4e4e4e;
    text-decoration: none;
    font-size: 14px;
}

.multi-menu a {
    display: block;
    white-space: nowrap;
}

.menu-dropdown,
.multi-menu input[type=checkbox] {
    display: none;
}

.multi-menu label:hover {
    cursor: pointer;
}

/* narrow styles */
@media screen and (max-width: 1024px) {
    .multi-menu > ul,
    .menu-righticon {
        display: none;
    }

    input[type=checkbox]:checked + ul {
        display: block;
        -webkit-animation: grow 0.5s ease-in-out;
        animation: grow 0.5s ease-in-out;
    }
}
/* large styles */
@media screen and (min-width: 1025px) {
    .multi-menu > label,
    input[type=checkbox] {
        display: none;
    }

    .multi-menu a {
        padding: 15px 20px;
    }

    .multi-menu > ul > li {
        display: inline-block;
    }

    .menu-hasdropdown {
        position: relative;
    }
    .menu-hasdropdown:hover > ul {
        display: block;
        -webkit-animation: grow 0.2s ease-in-out;
        animation: grow 0.2s ease-in-out;
    }

    .menu-hasdropdown > ul {
        position: absolute;
        top: 100%;
        left: 0;
        background: #eaeaea;
    }

    .menu-hasflyout > ul {
        background: #dedede;
    }

    .menu-hasflyout > ul {
        left: 100%;
        top: 0;
    }

    .menu-hasflyout .menu-downicon {
        display: none;
    }
}
/* look and feel only, not needed for core menu*/
@-webkit-keyframes grow {
    0% {
        display: none;
        opacity: 0;
    }
    50% {
        display: block;
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes grow {
    0% {
        display: none;
        opacity: 0;
    }
    50% {
        display: block;
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.menu-dropdown a {
    padding: 8px 20px;
    border-bottom: 1px solid rgb(213 213 213);
}

/* narrow  */
@media screen and (max-width: 1024px) {
    .multi-menu > label {
        background: #eaeaea;
        display: block;
        padding: 15px 20px;
        text-align: right;
    }

    .multi-menu a {
        padding: 15px 20px;
    }

    .multi-menu > ul i {
        float: right;
        padding: 5px 10px;
        background: #eaeaea;
    }

    .menu-dropdown a {
        background: #eaeaea;
    }

    .menu-hasflyout > ul a {
        background: #eaeaea;
    }
}
@media screen and (min-width: 1025px) {
    .multi-menu {
        margin: 0 auto;
    }
}