.logo-dpt {
    /*margin-top: -3px;*/ 
    margin-top: 0px;  /*MS-671: JobTrainer US9 change logo */
    display: block;
    float: left;
    padding-top: 0;
    padding-bottom: 0;
}

    .logo-dpt img {
        height: 65px;
        width: auto;
    }

.logo-esa img {
    max-height: 65px;
    width: auto;
}

.mp-menu ul li {
    background-color: #f2f3f6;
}

    .mp-menu ul li:hover {
        background-color: #ddecf8;
        border-left: 4px solid #2a85d7;
    }

    .mp-menu ul li a {
        color: #000000;
        font-size: 12px;
        font-weight: normal;
    }

@media(max-width: 1199px) {
    header .navbar {
        text-align: center;
    }

    header .logo-box {
        display: inline-block;
        float: none;
        position: relative;
        height: 65px;
        padding: 0;
        line-height: 65px;
        vertical-align: middle;
    }

    #user-login,
    .logo-dpt {
        display: none;
    }


    .top-nav-box, .scroller {
        height: 100vh;
        display: none;
    }


        .top-nav-box .glyphicon-chevron-down {
            -ms-transform: rotate(-90deg); /* IE 9 */
            -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
            transform: rotate(-90deg);
        }

    .scroller {
        overflow-y: scroll;
    }

    .scroller,
    .scroller-inner {
        position: relative;
    }

    .top-nav-box {
        position: fixed;
        overflow: hidden;
        left: 0%;
        top: 0;
        width: 100%;
    }

        .top-nav-box .menu-header {
            background: #404a59;
            height: 65px;
        }

            .top-nav-box .menu-header .menu-header-left {
                float: left;
                left: 10px;
                top: 8px;
            }

            .top-nav-box .menu-header .menu-header-right {
                float: right;
                position: absolute;
                right: 10px;
                top: 8px;
            }

            .top-nav-box .menu-header .menu-header-middle {
                display: flex;
                height: 100%;
                justify-content: center;
                align-items: center;
                padding-left: 0px !important;
                padding-right: 0 !important;
            }

    .mp-menu .menu-f-item span {
        float: right;
        right: 10px;
    }

    .mp-menu .menu-header a {
        color: #fff;
        font-size: 23px;
        padding: 11px;
    }

    #trigger {
        z-index: 100;
    }

    .menu-trigger,
    .menu-trigger:hover {
        position: absolute;
        font-size: 22px;
        z-index: 100;
        right: 30px;
        top: 18px;
        color: #fff;
        font-size: 27px;
        padding: 0px;
    }


    .mp-pusher {
        position: relative;
        left: 0;
        height: 100%;
    }

    .mp-menu {
        position: absolute; /* we can't use fixed here :( */
        top: 0;
        left: -100%;
        z-index: 1;
        width: 100%;
        height: 100%;
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    .mp-level {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #f2f3f6;
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

        /* overlays for pusher and for level that gets covered */
        .mp-pusher::after,
        .mp-level::after,
        .mp-level::before {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            content: '';
            opacity: 0;
        }

        .mp-pusher::after,
        .mp-level::after {
            background: rgba(0,0,0,0.15);
            -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
            -moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
            transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
        }

    .mp-pusher::after {
        display: none;
    }

    .mp-level::after {
        z-index: -1;
    }

    .mp-pusher.mp-pushed::after,
    .mp-level.mp-level-overlay::after {
        width: 100%;
        height: 100%;
        opacity: 1;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    .mp-level.mp-level-overlay {
        cursor: pointer;
    }

        .mp-level.mp-level-overlay.mp-level::before {
            width: 100%;
            height: 100%;
            background: transparent;
            opacity: 1;
        }

    .mp-pusher,
    .mp-level {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }

    /* overlap */
    .mp-overlap .mp-level.mp-level-open {
        box-shadow: 1px 0 2px rgba(0,0,0,0.2);
        -webkit-transform: translate3d(-40px, 0, 0);
        -moz-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0);
    }

    /* First level */
    .mp-menu > .mp-level,
    .mp-menu > .mp-level.mp-level-open,
    .mp-menu.mp-overlap > .mp-level,
    .mp-menu.mp-overlap > .mp-level.mp-level-open {
        box-shadow: none;
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    /* cover */
    .mp-cover .mp-level.mp-level-open {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

        .mp-cover .mp-level > ul > li > .mp-level,
        .mp-cover .mp-level.mp-level-open > ul > li > .mp-level,
        .mp-cover .mp-level > ul > li > .mp-level > ul > li > .mp-level,
        .mp-cover .mp-level.mp-level-open > ul > li > .mp-cover .mp-level.mp-level-open > ul > li > .mp-level {
            -webkit-transform: translate3d(0%, 0, 0);
            -moz-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
        }


            .mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
                -webkit-transform: translate3d(100%, 0, 0);
                -moz-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
            }

            .mp-cover .mp-level.mp-level-open > ul > li > .mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
                -webkit-transform: translate3d(100%, 0, 0);
                -moz-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
            }


    /* content style */
    .mp-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mp-menu h2 {
        margin: 0;
        padding: 1em;
        color: #fff;
        text-shadow: 0 0 1px rgba(0,0,0,0.1);
        font-weight: 300;
        font-size: 2em;
    }



    .mp-menu.mp-overlap h2::before {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 8px;
        font-size: 75%;
        line-height: 1.8;
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
        transition: opacity 0.3s, transform 0.1s 0.3s;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .mp-menu.mp-cover h2 {
        font-weight: 700;
        font-size: 21px;
        /*color:red;
    border:5px solid green;*/
    }

    .mp-overlap .mp-level.mp-level-overlay > h2::before {
        opacity: 1;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
    }

    .mp-menu ul li {
        border-left: 4px solid #f2f3f6;
        border-bottom: 1px solid #ccc;
    }

        .mp-menu ul li > a {
            display: block;
            padding: 15px 20px;
            outline: none;
            font-size: 14px;
            -webkit-transition: background 0.3s, box-shadow 0.3s;
            -moz-transition: background 0.3s, box-shadow 0.3s;
            transition: background 0.3s, box-shadow 0.3s;
            text-align: left;
        }

        .mp-menu ul li::before {
            position: absolute;
            left: 10px;
            z-index: -1;
            color: rgba(0,0,0,0.2);
            line-height: 3.5;
        }

    /*.mp-level > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
	background: rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
} /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

    .mp-home {
        position: absolute;
        top: 8px;
    }

    .menu-header-left.glyphicon-home,
    .menu-header-left.mp-back {
        font-size: 19px !important;
        line-height: 1.6em;
    }

    .menu-header-right.glyphicon-remove {
        margin-top: 2px;
        margin-bottom: -1px;
    }

    .mp-back {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        display: block;
        font-size: 0.8em;
        padding: 1em;
        position: relative;
        box-shadow: inset 0 1px rgba(0,0,0,0.1);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        position: absolute;
        top: 8px;
    }



    .mp-menu .mp-level.mp-level-overlay > .mp-back,
    .mp-menu .mp-level.mp-level-overlay > .mp-back::after {
        background: transparent;
        box-shadow: none;
        color: transparent;
    }

    /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
    /* We'll show the first level only */
    .no-csstransforms3d .mp-pusher,
    .no-js .mp-pusher {
        padding-left: 300px;
    }

    .no-csstransforms3d .mp-menu .mp-level,
    .no-js .mp-menu .mp-level {
        display: none;
    }

    .no-csstransforms3d .mp-menu > .mp-level,
    .no-js .mp-menu > .mp-level {
        display: block;
    }

    .mp-menu ul li.active {
        border-left: 4px solid #2a85d7;
    }
}

@media(min-width:1200px) {
    .mp-pushed, .mp-level[style] {
        transform: none !important;
    }

    .top-nav-box {
        float: right;
        /*background-color: #404a59;*/
        background-color: transparent;
        display: block !important;
        padding: 0em 0.6em;
        padding-right: 25px;
    }
    .logo-dpt img {  /*MS-671: JobTrainer US9 change logo */
        height: 90px;
        width: auto;
        padding: 10px 0px;
    }

    a.logo-esa {
        padding-left: 20px;  /*MS-671: JobTrainer US9 change logo */
    }

    .logo-esa img { /*MS-671: JobTrainer US9 change logo */
        max-height: 90px;
        width: auto;
        padding-top: 25px;
        padding-bottom: 0px;
    }

    .top-nav-box .menu-header,
    .scroller {
        display: none;
    }

    .mp-menu::after,
    .mp-menu::before {
        content: " ";
        display: table;
    }

    .mp-menu::after {
        clear: "both";
    }

    .mp-menu ul li {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 2px;
    }

        .mp-menu ul li a {
            line-height: 2.6em;
            display: inline-block;
            position: relative;
            text-decoration: none;
            background-color: transparent;
            padding: 0.4em;
            width: 100%;
            font-size: 14px;
            font-weight: 400;
        }

            .mp-menu ul li a:hover {
                background: transparent;
            }

    .mp-menu .menu-f-item {
        display: block;
        background: transparent;
        border: none;
        padding-top: 5px;
    }

    .mp-menu > .menu-f-item {
        text-align: right;
    }

    .mp-menu .menu-f-item span {
        float: right;
        top: 10px;
    }


    .mp-menu > .menu-f-item .glyphicon-custom:before {
        content: "\e236";
    }

    .mp-menu.active > .menu-f-item .glyphicon-custom:before {
        content: "\e014";
    }


    .mp-menu.active .ul {
        display: block;
    }

    .mp-menu ul {
        display: none;
        list-style: outside none none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 360px;
        width: calc(100%);
    }

        .mp-menu ul li {
            list-style: outside none none;
            margin: 0;
            line-height: 40px;
            margin-bottom: 0;
            background-color: #f2f3f6;
        }

            .mp-menu ul li li {
                margin-bottom: 1px;
            }

        .mp-menu ul > li > a:hover,
        .mp-menu ul > li > a:active,
        .mp-menu ul > li > a:focus {
            -background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
        }

    .mp-menu ul {
        border: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        background-color: transparent;
        top: 0;
        margin: 0;
        min-width: 15em;
        z-index: 100;
    }        

        .mp-menu ul a,
        .mp-menu ul a:hover {
            background-color: transparent;
            color: #000000;
        }

        .mp-menu ul .menu-f-item:after {
            font-family: 'Glyphicons Halflings';
            font-weight: 400;
            content: "\e080";
            line-height: 100%;
            float: right;
            position: relative;
            right: 20px;
            top: 5px;
        }

    .mp-menu .m-level-2,
    .mp-menu .m-level-3 {
        position: relative;
    }

        .mp-menu .m-level-2 > ul,
        .mp-menu .m-level-3 > ul {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
        }

        .mp-menu .m-level-2 > a:after,
        .mp-menu .m-level-3 > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            margin-top: -1px;
        }

    .mp-menu > .menu-f-item {
        display: none;
    }

    .mp-menu ul {
        top: 90px;
    }

    .mp-menu li.m-level-2:hover > .mp-level ul,
    .mp-menu li.m-level-2:hover > .mp-level ul li.m-level-3:hover .mp-level ul {
        display: block;
        padding: 0;
    }

    .mp-menu li.m-level-2:hover > .menu-f-item {
        border-bottom: 2px solid #337ab7;
    }

    .header.affix .mp-menu li.m-level-2:hover > .menu-f-item,
    .navbar.affix .mp-menu li.m-level-2:hover > .menu-f-item {
        border-bottom-width: 0;
    }

    .mp-menu li.m-level-2:hover > .mp-level > ul {
        margin-top: -1px;
        background-color: #E1E2E5;
        right: 0;
    }

    .mp-menu li.m-level-2:hover > .mp-level ul .mp-level ul {
        display: none;
    }

    .mp-menu ul > li {
        min-width: initial;
    }

    .mp-menu .m-level-1 {
        display: block;
        position: static;
        text-align: left;
        width: auto;
    }

        .mp-menu .m-level-1 .menu-f-item span {
            float: right;
            top: 12px;
            margin-left: 5px;
        }



        .mp-menu .m-level-1 > li {
            /*margin-left: 0.1em;*/
            margin-right: -0.3em;
            display: inline-block;
            background-color: transparent;
        }

            .mp-menu .m-level-1 > li:hover {
                border-left: none;
                background-color: #2a85d7;
            }

            .mp-menu .m-level-1 > li > a,
            .mp-menu .m-level-1 > li > .dropdown > a.menu-f-item {
                color: #ffffff;
                font-weight: 600;
                margin: 40px 0 0 0;
            }

            .mp-menu .m-level-1 > li#user-login:hover > a {
                background-color: #2a85d7;
            }

                .mp-menu .m-level-1 > li#user-login:hover > a:after {
                    margin-top: -1px;
                    border-bottom-width: 7px;
                }

            .mp-menu .m-level-1 > li#user-login > a > .glyphicon {
                line-height: 2.4em;
            }

    /*.mp-menu .m-level-1 > li:hover a,
                .mp-menu .m-level-1 > li > a:hover {
                    color: #000 !important;
                }*/

    .affix .mp-menu .m-level-1 > li:hover > a,
    .affix .mp-menu .m-level-1 > li > a:hover {
        margin-bottom: 2px;
    }

    .mp-menu .m-level-1 > li:active {
        background-color: #2a85d7;
    }

    .mp-menu .m-level-1 > li > a:hover,
    .mp-menu .m-level-1 > li > a:active,
    .mp-menu .m-level-1 > li > a:focus {
        color: #ffffff !important;
    }

        .mp-menu .m-level-1 > li:hover > a:after,
        .mp-menu .m-level-1 > li:active > a:after,
        .mp-menu .m-level-1 > li:hover > a.menu-f-item:after,
        .mp-menu .m-level-1 > li:active > a.menu-f-item:after,
        .mp-menu .m-level-1 > li > a:hover:after,
        .mp-menu .m-level-1 > li > a:active:after,
        .mp-menu .m-level-1 > li > a.menu-f-item:hover:after,
        .mp-menu .m-level-1 > li > a.menu-f-item:active:after,
        .mp-menu .m-level-1 > li.active > a:after {
            position: absolute;
            width: 100%;
            top: 45px;
            left: 0;
            border-bottom: 5px solid #2a85d7 !important;
            content: "";
            background-color: transparent;
        }

    .mp-menu .m-level-3 ul {
        right: 100%;
        padding-left: 1px;
        position: absolute;
        top: 0;
        background-color: #E1E2E5;
        margin-right: 4px;
    }

    .mp-menu .m-level-2 ul li {
        border-left: 4px solid #f2f3f6;
    }

        .mp-menu .m-level-2 ul li:last-child {
            margin-bottom: 0;
        }

        .mp-menu .m-level-2 ul li:hover,
        .mp-menu .m-level-2 ul li:active,
        .mp-menu .m-level-2 ul li.active {
            border-left: 4px solid #2a85d7;
        }

    .mp-level {
        transform: none !important;
    }
}

.icon-arrow-left .m-level-3:hover span {
    transition: transform .3s ease-in-out;
    color: #000;
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
}

/* For Ipad */
@media (min-width: 768px) and (max-width: 1200px) {
    .mp-menu.mp-cover h2 {
        font-size: 26px;
    }

    .logo-esa img {
        max-height: 60px;
    }

    .mp-pusher .logo-esa img {
        margin-top: 2px;
    }

    .menu-trigger,
    .menu-trigger:hover {
        top: 22px !important;
    }

    .top-nav-box .menu-header .menu-header-left {
        top: 5px;
    }

    .top-nav-box .menu-header .menu-header-right {
        top: 8px;
    }

    .menu-header-left.glyphicon-home,
    .menu-header-left.mp-back {
        font-size: 22px !important;
    }

    .top-nav-box .menu-header .menu-header-right.glyphicon-remove {
        font-size: 25px !important;
    }
}

/* For any phone*/
@media (max-width: 767px) {
    .top-nav-box .menu-header {
        height: 50px !important;
    }

    .menu-trigger,
    .menu-trigger:hover {
        top: 0;
        bottom: 0;
        right: 20px;
        font-size: 22px;
        line-height: 50px;
        vertical-align: middle;
    }

    .top-nav-box .menu-header .menu-header-right {
        top: 2px !important;
    }

    .top-nav-box .menu-header .menu-header-left {
        top: 2px !important;
    }

    .mp-menu h2 {
        padding-top: 23px !important;
        padding-left: 10px !important;
    }

    header .logo-box {
        padding-top: 0;
        line-height: 50px;
        vertical-align: middle;
        height: 50px;
    }

        header .logo-box img,
        .logo-esa img {
            width: 120px;
            height: auto;
        }

    .logo-box .logo-esa img {
        margin-top: -1px;
    }

    .mp-pusher .logo-esa img {
        margin-top: 1px;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width:1200px) {
    .mp-menu .m-level-1 .m-level-2 > a > span {
        float: none;
        top: 1px;
    }
}

.mp-level[data-level="1"] {
    z-index: 1;
}

.mp-level[data-level="2"] {
    z-index: 2;
}

.mp-level[data-level="3"] {
    z-index: 3;
}

.mp-level[data-level="4"] {
    z-index: 4;
}

.mp-level[data-level="5"] {
    z-index: 5;
}