﻿@media (max-width: 989px) {

    #header {
        position: fixed;
        z-index: 11;
        top: 0;
        left: 0;
        width: 100%;
    }


     #mobile-navigation .mobile-container .utc-mobile-page.active {
         display:block;
     }

    #mobile-navigation .mobile-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #mobile-navigation .mobile-container .utc-mobile-page.first-child,
    #mobile-navigation .mobile-container .utc-mobile-page.last-child {
        height: auto;
    }

    #mobile-navigation .mobile-container .utc-mobile-page.last-child {
        z-index:101;
        position: fixed;
        margin-top: 43px;
        width: 100%;
        box-shadow: 0 0 10px #000;
    }




    #mobile-navigation .mobile-container .utc-mobile-page .utc-mobile-page-container {
            min-width: 320px;
            margin: 0 auto;
    }

    /* Navigation background color */
    #mobile-navigation .utc-mobile-page .mobile-menu-wrapper {
        background: #FFFFFF;
        padding: 0;
        margin: 0;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    /* Navigation nav buttons font color */
    #mobile-navigation .utc-mobile-page .mobile-menu-list > li a {
        color: #000000;
        font-size: 13px;
        text-align: center;

        background-image: none !important;
        width: 100% !important;
        cursor: pointer;

        margin: 0 auto;
        display: block;
        text-decoration: none;
        line-height: 17px;
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list > li .arrow,
    #mobile-navigation .utc-mobile-page .mobile-menu-list > li .arrow-up {
        background-repeat: no-repeat !important;
        background-size: 18px 12px !important;
        background-position: center !important;
        width: 18px;
        height: 12px;
        position: absolute;
        top: 16px;
        right: 18px;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list > li .arrow {
        background-image: url("/Style Library/utc/images/redesign/mobile/UTC_mobile-close-arrow-black.png") !important;    
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list > li .arrow-up {
        background-image: url("/Style Library/utc/images/redesign/mobile/UTC_mobile-close-arrow-black-up.png") !important;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list > li.separator {
        position: relative;
        overflow: hidden;
        margin: 0;
        padding-bottom: 0;
        border: none;
        border-bottom: 1px solid #e8e8e8;
        list-style: none;
        clear: both;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list > li.separator a {
        padding: 14px 0;
        line-height: 17px;
    }

     #mobile-navigation .utc-mobile-page .mobile-menu-list > li.separator a:hover {
         background-color: transparent !important;
     }

    #search li a:hover {
        background-color: transparent;
    }

    .utc-page #header .menu-main {
        display: none;
    }

    .utc-page .search-icon-link, 
    .utc-page .bars-icon-link {
        display: block
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu {
        display: none; 
        overflow: hidden;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu > ul {
        border-top: 1px solid #e8e8e8;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu ul,
    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu .third-level-menu {
        list-style: none;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu .third-level-menu {
        display: none;
        overflow: hidden;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu .third-level-menu li {
        background: #FFFFFF !important;
        border-bottom: none;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu .third-level-menu li:last-child {
        border-bottom: none !important;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu .third-level-menu li a {
            color: #6E6E6E !important;
            font-weight: 400;
            font-size: 13px;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu .third-level-menu.opened {
       
        display: block;
         height: auto;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li {
        position: relative;
        width: 100%;
        text-align: center;
        background: #F5F5F5;
        border-bottom: 1px solid #FFFFFF;
        color: #0060a9;
        font-size: 13px;
        font-weight: 700;
        z-index: 1;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li .plus-icon,
    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li .minus-icon {
        position: absolute;
        top: 0;
        right: 5px;
        width: 45px;
        height: 45px;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: 1;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li .plus-icon {
        background-image: url("../images/redesign/plus-blue.svg");
        background-size: 20px;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li .minus-icon {
        background-image: url("../images/redesign/minus-blue.svg");
        background-size: 20px;
    }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu.opened {
          height: auto;
          display:block;
    }

     #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li:last-child {
         border-bottom: 1px solid #E6E6E6;
     }

    #mobile-navigation .utc-mobile-page .mobile-menu-list .sub-menu li a {
        position: relative;
        color: #0060a9;
        text-transform: capitalize;
    }

}


@media (min-width: 768px) and (max-width: 989px) {

    #mobile-navigation .utc-mobile-page .mobile-menu-list > li:last-child {
        position: relative;
    }
}