/* CSS Document */
#nav{
	list-style:none;
    margin: 0;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.3px;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

#nav li {
	position:relative;

    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -o-flex: 1 0 auto;
    flex: 1 0 auto;

    float:left;
	margin-bottom: 0;
}

#nav a{
	display:block;
	padding:25px 5px;
	color:#01396a;
    font-weight:normal;
	text-decoration:none;
    text-transform: uppercase;
}
#nav a:hover, a:visited:hover {
    color: #653291 !important;
    text-decoration: underline;
}

.hassub

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
    z-index: 2;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	font-size: 0.8em;
	font-weight: 600;
    margin: 0;
}

#nav ul li{
	margin: -1px 0 0 0; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}

#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    padding: 16px 30px;
}

#nav li:hover ul{ /* Display the dropdown on hover */
	left: 38%; /* Bring back on-screen when needed */
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background: #ecebeb;
	text-shadow: none;
}
/* Here we define the most explicit hover states--what happens when you hover each individual link. */
#nav li:hover ul li a:hover{ 
	color: #01396a;
}




/* ======================================
    MEDIA QUERIES
====================================== */


@media screen and (max-width: 1240px) {



} /* END OF @media screen and (max-width: 1240px) */


@media screen and (max-width: 979px) {

    .navbar-inner {
        position: relative;
    }

    .container-fluid {
        position: relative;
        left: 0;
        width: calc(100% - 40px);
        background: #1b1b1b;
    }

    #nav>li:hover>a {
	    background: initial;
    }

    #nav li ul {
        top: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
         transform: translateX(-50%); 
        display: none;
    }

    .colorMeBad,
    #nav li ul a {
        background: #ecebeb;
    }

    #nav li .mobileSubnavDisplay {
        display: block;
        z-index:3;
        margin-left:0px;
    }

} /* END OF @media screen and (max-width: 979px) */

 @media screen and (max-width: 800px) {

    #nav {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
    }

    #nav li {
        margin-bottom: 0;
        -webkit-flex: 1 0 100%;
        -moz-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
        -o-flex: 1 0 100%;
        flex: 1 0 100%;
        margin-left:0px;
        border-bottom:1px solid;
    }

    #nav a {
        padding: 10px 5px 5px 5px;
    }

    #nav li:nth-child(n+4) a {
        padding: 5px 5px 10px 5px;
    }

    #nav li ul {
        width: 100%;
    }

    #nav ul a {
        white-space: initial;
    }
    #nav li .mobileSubnavDisplay {
        display: block;
    }
        #nav li:hover ul { /* Display the dropdown on hover */
            left: 50%;
            margin-left:0px;
            z-index:2;
        }
} /* END OF @media screen and (max-width: 800px) */
  

 @media screen and (max-width: 767px) {

    .container-fluid {
        width: 100%;
    }

} /* END OF @media screen and (max-width: 767px) */