/* All styles for screen size over 992px
================================================== */
@media only screen and (min-width: 992px) {
    nav#menu.main-menu {
        display: block !important;
    }

    #mm-menu.main-menu {
        display: none !important;
    }

    header .btn-mobile {
        display: none !important;
    }

    /* Menu */
    .main-menu {
        position: relative;
        z-index: 2;
        width: auto;
        top: 11px;
        float: right;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        color: #fff;
    }
    .main-menu ul,
    .main-menu ul li {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .main-menu ul a,
    .main-menu ul li a {
        position: relative;
        margin: 0;
        padding: 0;
        display: block;
        padding: 5px 10px;
        white-space: nowrap;
    }

    /*First level styles */
    .main-menu > ul > li span > a {
        color: #333;
        padding: 0 8px 17px  8px;
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 500;
    }
    .main-menu > ul > li span:hover > a {
        color: #ff7b79;
    }

    /* Submenu */
    .main-menu ul ul {
        position: absolute;
        z-index: 2;
        visibility: hidden;
        left: 3px;
        top: 98%;
        margin: 0;
        display: block;
        padding: 0;
        background: #fff;
        min-width: 210px;
        -webkit-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.175);
        -moz-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.175);
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.175);
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
        border-top: 2px solid #ff7b79;
    }
    .main-menu ul ul li {
        display: block;
        height: auto;
        padding: 0;
    }
    .main-menu ul ul li a {
        font-size: 13px;
        color: #333;
        border-bottom: 1px solid #ededed;
        display: block;
        padding: 15px 10px;
        line-height: 1;
    }

    .main-menu ul li:hover > ul {
        padding: 0;
        visibility: visible;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    .main-menu ul ul li:last-child a {
        border-bottom: none;
    }
    .main-menu ul ul li:hover > a {
        background-color: #f9f9f9;
        color: #ff7b79;
        padding-left: 15px;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
}
/* Submenu 3rd level */
.main-menu ul ul li span > a {
    font-weight: normal !important;
}
.main-menu ul ul li span > a:hover {
    background-color: #f9f9f9;
    color: #ff7b79;
    padding-left: 18px;
    opacity: 1;
}
.main-menu ul ul li span > a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    float: right;
    font-size: 9px;
    margin-top: 3px;
}

.main-menu ul ul ul {
    position: absolute;
    border-top: 0;
    z-index: 2;
    height: auto;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    min-width: 190px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.main-menu ul ul ul.third_level_left {
    right: 100%;
    left: auto;
}
.main-menu ul ul ul li a {
    border-bottom: 1px solid #ededed !important;
}

/* Arrows top 3rd level*/
.main-menu ul ul ul:before {
    border-width: 0;
    margin-left: 0;
}

/* All styles for screen size under 991px
================================================== */
@media only screen and (max-width: 991px) {
    .btn-mobile {
        position: absolute;
        left: 15px;
        top: 15px;
        width: 30px;
        display: block;
        z-index: 2;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        background-color: #333 !important;
    }

    /* Active Hamburger Color - When mobile menu is opened */
    .hamburger--spin.is-active .hamburger-inner {
        background-color: #333 !important;
    }

    .hamburger--spin.is-active .hamburger-inner::before {
        background-color: #333 !important;
    }

    .hamburger--spin.is-active .hamburger-inner::after {
        background-color: #333 !important;
    }

    nav#menu {
        display: none !important;
    }

    .main-menu {
        top: 0;
        right: 0;
        float: none;
    }

    ul.mm-listview {
        line-height: 25px;
    }

    /* Use this when using WHITE mobile menu */
    ul.mm-listview li a {
        color: #333 !important;
        display: block;
    }

    /* Use this when using DARK mobile menu */
    /*ul.mm-listview li a {
      color: #ccc;
      display: block;
    }*/
}