/*
 *
 *
 * --- Important note: ---
 * Why are we not using any css nesting? (&.<class-name> and &::after
 * selectors) It appears that chrome and safari on IOS (at the time
 * this css was written) at least sometimes does not apply, even though
 * it is meant to be supported. This bug was confirmed to be happening
 * on at least three separate iphones.
 *
 *
 */

.nv_menu_icon_1,
.nv_menu_icon_2,
.nv_menu_icon_3 {
    background: transparent !important;
    width: 45px;
    top: 10px!important;
}

.nv_menu_icon_1::after {
    display: none;
}
.nv_menu_icon_1::before {
    text-align: center;
    transition: transform 0.1s ease-in-out!important;
}
.nv_menu_icon_2::after {
    display: none;
}
.nv_menu_icon_2::before {
    text-align: center;
    transition: transform 0.1s ease-in-out!important;
}
.nv_menu_icon_3::after {
    display: none;
}
.nv_menu_icon_3::before {
    text-align: center;
    transition: transform 0.1s ease-in-out!important;
}

@media screen and (max-width: 768px) {
    .nv_menu_icon_1,
    .nv_menu_icon_2,
    .nv_menu_icon_3 {
        display: flex!important;
        justify-content: center!important;
    }

    .nv_menu_icon_1.active::before,
    .nv_menu_icon_2.active::before,
    .nv_menu_icon_3.active::before {
        display: block;
        transform: rotate(180deg);
    }
}

@media screen and (min-width: 1280px) {
    .nv_menu_icon_1 {
        top: 17%!important;
    }
    .nv_menu_icon_1::after {
        display: inline;
    }

    .nv_menu_icon_2 {
        top: 51%!important;
    }
    .nv_menu_icon_2::after {
        display: inline;
    }

    .nv_menu_icon_3 {
        top: 84%!important;
    }
    .nv_menu_icon_3::after {
        display: inline;
    }
}

.menu_border_top {
    border-top: 1px solid rgba(229, 229, 229, 1);
}

.menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu {
    max-width: 1080px; /* six columns */
    padding: 38px 0;
}
.menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--5-cols {
    max-width: 900px; /* five columns */
}
.menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--4-cols {
    max-width: 720px; /* four columns */
}
.menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--3-cols {
    max-width: 540px; /* three columns */
}

.menu-wrapper nav > ul.menu li:hover > ul.sub-menu.c-nv-vertical-navigation__sub-menu,
.menu-wrapper .vertical-menu > ul.menu li:hover > ul.sub-menu.c-nv-vertical-navigation__sub-menu {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
    .menu-wrapper nav > ul.menu > li > ul.sub-menu .c-nv-vertical-navigation__menu-item {
        border-right: 1px solid rgba(229, 229, 229, 1);
    }
}

.menu-wrapper nav > ul.menu > li > ul.sub-menu .c-nv-vertical-navigation__menu-item {
    width: 180px;
    padding: 8px 30px;
    list-style: none;
    display: flex;
    align-items: center;
}

.menu-wrapper nav > ul.menu > li > ul.sub-menu .c-nv-vertical-navigation__menu-item a {
    text-transform: uppercase;
}

.menu-wrapper nav > ul.menu > li > ul.sub-menu .c-nv-vertical-navigation__menu-item--last-column {
    border-right: none;
}

/* Prevent the menu from going off screen on medium size screens */
/* This is also defined in the JavaScript. If you change this, change the JS to match too */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--4-cols,
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--5-cols,
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--6-cols {
        max-width: 540px; /* three columns */
    }

    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--4-cols li > ul,
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--5-cols li > ul,
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--6-cols li > ul {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--5-cols,
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--6-cols {
        max-width: 720px; /* four columns */
    }

    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--5-cols li > ul,
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--6-cols li > ul {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 1281px) and (max-width: 1500px) {
    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu.c-nv-vertical-navigation__sub-menu--6-cols {
        max-width: 900px; /* five columns */
    }

    .menu-wrapper .vertical-menu > ul.menu li.col-widget-menu > ul.sub-menu.c-nv-vertical-navigation__sub-menu li > ul {
        display: flex;
        flex-wrap: wrap;
    }
}