@charset "utf-8";
/* CSS Document */

#nav {
    position: relative;
    font-size: 0.8em;
}

#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav ul[role="menubar"] > li {
    float: left;
}

/*drop down closed*/
#nav .tlmi[aria-haspopup="true"] + div[role="menu"] {
    display: none;
    position: absolute;
    min-width: 100px;
    z-index: 20;
    top: 2.25em;
    background-color: rgba(255, 255, 255, 1);
}



#nav .tlmi.mega[aria-haspopup="true"] + div[role="menu"] {
    left: 0;
    width: 100%;
    padding: 1em;
}

#nav .tlmi.mega[aria-haspopup="true"] + div[role="menu"] .sul {
    float: left;
    padding: 5px;

    width: 25%;
    /*MEGA MENU COLUMN WIDTH*/
}

/*drop down open*/
#nav .tlmi[aria-expanded="true"] + div[role="menu"] {
    display: block;
    animation: drop 0.1s ease-in;
}

#nav .tlmi {
    text-decoration: none;
    padding: 3.25px;
    margin-left: 2.5px;
    display: block;
    font-weight: bold;

    /*TOP LEVEL ITEM COLORS*/
    color: #000;
}

#nav .firstLink:hover,
#nav .firstLink:focus {
    /*TOP LEVEL FOCUS/HOVER COLOR*/
    background-color: transparent;
    color: #E92525;
}

#nav .secondLink:hover,
#nav .secondLink:focus {
    /*TOP LEVEL FOCUS/HOVER COLOR*/
    background-color: transparent;
    color: #FF9F17;
}

#nav .thirdLink:hover,
#nav .thirdLink:focus {
    /*TOP LEVEL FOCUS/HOVER COLOR*/
    background-color: transparent;
    color: #1DBB1D;
}

#nav .fourLink:hover,
#nav .fourLink:focus {
    /*TOP LEVEL FOCUS/HOVER COLOR*/
    background-color: transparent;
    color: #4C4C4C;
}

#nav .tlmi[aria-expanded="true"] {

    /*TOP LEVEL OPEN COLOR*/
    background-color: transparent;
}



#nav .sul a {
    padding: 5px 10px;
    display: block;

    /*SUB LEVEL ITEM COLORS*/
    background-color: transparent;
    color: #000;
    text-decoration: underline;
}

#nav .sul a:focus,
#nav .sul a:hover {
    /*SUB LEVEL ITEM HOVER COLORS*/
    background-color: #E92525;
    color: #ffffff;
}

#nav .sul .orange:focus,
#nav .sul .orange:hover {
    background-color: #FF9F17;
}

#nav .sul .green:focus,
#nav .sul .green:hover {
    background-color: #1DBB1D;
}

#nav .sul .gray:focus,
#nav .sul .gray:hover {
    background-color: #4C4C4C;
}

/*LIST TITLE STYLE*/
#nav li.nav_title {
    font-size: 1.5em;
    padding: 0 10px;
    text-align: left;
}

/*QUICK LINKS COLORS AND STYLE*/
#nav .mql a {
    font-size: 18px;
    background-color: #264A9C;
    color: #FFF;
    margin: 5px 0;
    border-radius: 5px;
    padding: 5px;
    font-weight: bold;
}

#nav .mql a:hover,
#nav .mql a:focus {
    background-color: #FF9F17;
}

@keyframes drop {
    from {
        opacity: 0;
        top: 3em;
    }

    to {
        opacity: 1;
        top: 2.25em;
    }
}

@media only screen and (min-width : 0px) and (max-width :760px) {
    @keyframes drop {
        from {
            opacity: 0;
            top: 1em;
        }

        to {
            opacity: 1;
            top: 0em;
        }
    }

    #menuBtn + #nav {
        display: none
    }

    #menuBtn[aria-expanded="true"] + #nav {
        display: block;
        padding: 10px 10px 0;
        background: #243E79;
    }

    #menuBtn,
    #loginBtn {
        display: block;
    }

    #olb.open {
        display: block;
    }

    #loginCancel {
        display: block;
    }

    #nav ul[role="menubar"] > li {
        float: none;
    }

    /*Mega Menu*/
    #nav .tlmi.mega[aria-haspopup="true"] + div[role="menu"] {
        padding: 1em;
    }

    /*Drop Menu*/
    #nav .tlmi[aria-haspopup="true"] + div[role="menu"] {
        position: relative;
        top: 0em;
        padding: 1em;
    }

    /*submenu lists*/
    #nav .tlmi.mega[aria-haspopup="true"] + div[role="menu"] .sul {
        width: 100%;
        float: none;
    }

    #nav .tlmi {
        padding: 10px;
        margin-left: 0px;
        font-size: 1.125em;
    }

    #nav .firstLink:link,
    #nav .firstLink:visited,
    #nav .firstLink:focus {
        background-color: #E92525;
        color: #fff;
    }

    #nav .secondLink:link,
    #nav .secondLink:visited,
    #nav .secondLink:focus {
        background-color: #FF9F17;
        color: #fff;
    }

    #nav .thirdLink:link,
    #nav .thirdLink:visited,
    #nav .thirdLink:focus {
        background-color: #1DBB1D;
        color: #fff;
    }

    #nav .fourLink:link,
    #nav .fourLink:visited,
    #nav .fourLink:focus {
        background-color: #4C4C4C;
        color: #fff;
    }

    #nav .firstLink:hover {
        background-color: #fff;
        color: #E92525;
    }

    #nav .secondLink:hover {
        background-color: #fff;
        color: #FF9F17;
    }

    #nav .thirdLink:hover {
        background-color: #fff;
        color: #1DBB1D;
    }

    #nav .fourLink:hover {
        background-color: #fff;
        color: #4C4C4C;
    }

}