* {
margin:0;
padding:0;
outline:none;
box-sizing:border-box
}

body {
/*background:#eee;*/
background: #e9eff3;
color:#444;
-webkit-font-smoothing:antialiased;
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight:300;
font-weight:400;
height:auto!important;
height:100%;
min-height:100%;
text-rendering:optimizeLegibility
}

header {
/*background-color:FireBrick;*/
background-color:#356288;
display:flex;
flex-direction:column;
text-align:center
}

header > div#state {
color:#FFF;
opacity:.8;
line-height:20px;
position:inherit
}

header > div#logo {
line-height:48px;
position:relative
}

header > .menuDown {
box-shadow:0 3px 8px rgba(0,0,0,.15)
}

header > .menuUp {
box-shadow:none
}

header > div#logo > h1 {
color:#fff;
font-weight:300;
font-size:1.3em
}

header > div#logo > h1 > a {
text-decoration:none;
color:#FFF
}

header > div#logo > div#navToggle {
margin:auto;
/*background-color:FireBrick;*/
background-color:#356288;
position:relative;
right:0;
top:0;
transition:300ms all ease
}

header > div#logo > div#navToggle > a {
color:#FFD75F;
display:block;
font-size:1.1em;
font-weight:600;
padding:0 2.5rem;
text-decoration:none;
transition:300ms all ease
}

header > nav {
background-color:#fff;
display:none;
z-index: 1;
flex:1
}

header nav > ul {
list-style-type:none
}

header nav > ul > li {
border-bottom:1px dotted rgba(0,0,0,.1);
position:relative
}

header nav > ul > li:last-of-type {
border-bottom:none
}

header nav > ul > li > a {
display:block;
color:#212121;
font-weight:700;
padding:1.2rem 12px;
text-decoration:none;
transition:250ms all ease
}

header nav > ul > li > a span.toggle {
/*Changed 05-59-23*/
/*float:right;*/
float:left;
opacity:.9;
border-radius:3rem;
font-size:.75em;
font-weight:500;
padding:0 8px;
text-transform:lowercase
}

header > nav > ul > li:hover > a {
color:#FFD75F;
box-shadow:0 3px 8px rgba(0,0,0,.6);
background-color:#356288
}

header > nav > ul > li:hover > a > span > div > div {
background-color:#FFD75F
}

header > nav > ul > li > nav {
background-color:#A3C2DB;
box-shadow:8px 3px 10px rgba(0,0,0,.6);
display:none;
overflow:hidden;
right:5%;
width:75%;
z-index:100;
margin-left:12px;
margin-bottom:3px
}

header > nav > ul > li > nav > ul > li > a {
color:Black;
transition:300ms all ease
}

header > nav > ul > li > nav > ul > li:hover > a {
background-color:#356288;
color:#FFD75F
}

div#seal {
display:none
}

div#accent {
display:none
}

nav.topNav {
text-align:left
}

.container {
display:inline-block
}

.bar1,.bar2,.bar3 {
width:30px;
height:3px;
background-color:#333;
/*Changed 05-59-23*/
/*margin:6px 0;*/
margin:4px 0;
transition:.4s
}

.change .bar1 {
-webkit-transform:rotate(-45deg) translate(-6px,4px);
transform:rotate(-45deg) translate(-6px,4px)
}

.change .bar2 {
opacity:0
}

.change .bar3 {
-webkit-transform:rotate(45deg) translate(-6px,-6px);
transform:rotate(45deg) translate(-6px,-6px)
}

@media all and (min-width: 640px) and (max-width: 1482px) {
/*make seal appear on medium width views*/
    header > div#seal {
        opacity:.7;
        color:#FFF;
        line-height:30px;
        position:absolute;
        display:inline-block;
        padding-top:4px;
        padding-left: 48px;
        z-index:1
        }
   a.change{
    background-color: #356288;
    }
   /*IE11 can't seem to do background-color at the nav bar level.  This sets the color for the li items instead.  Stupid IE.*/ 
    header nav > ul > li {
      border-bottom:1px dotted rgba(0,0,0,.1);
      position:relative;
      background-color: #fff
      }
    header nav > ul > li > nav > ul > li{
      background-color: #A3C2DB
    }
   /*end IE 11 garbage*/
}



@media all and (min-width: 1483px) {
header > div#logo > div#navToggle {
display:none
}

header {
/*background-color:FireBrick;*/
background-color:#356288;
flex-direction:row;
line-height:90px;
padding:0 3rem;
position:inherit;
text-align:left;
width:100%
}

header > div#state {
opacity:.8;
color:#FFF;
line-height:30px;
position:absolute;
padding-left:80px
}

header > div#seal {
opacity:.7;
color:#FFF;
line-height:30px;
position:relative;
display:inline-block;
padding-top:4px
}

header > div#logo {
background-color:transparent;
line-height:90px;
padding-left:5px
}

header > div#logo > h1 {
color:#8cc1c1;
font-size:2em
}

header > nav {
background-color:transparent;
display:block
}

header > nav > ul {
display:flex;
flex-flow:row wrap;
justify-content:flex-end
}

header nav > ul > li {
border-bottom:none
}

header nav > ul > li > a {
padding:0 .75rem;
color:#FFF
}

header > nav > ul > li:hover > a {
color:#FFD75F;
box-shadow:none
}

header nav > ul > li > a span.toggle {
display:none
}

header nav > ul > li > a span.caret {
border-bottom:4px solid transparent;
border-top:4px solid #FFF;
border-right:4px solid transparent;
border-left:4px solid transparent;
border-radius:1px;
content:"";
display:inline-block;
height:0;
margin:0 0 0 .25rem;
transition:250ms all ease;
width:0;
vertical-align:middle
}

header nav > ul > li:hover > a span.caret {
border-top-color:#FFD75F;
transform:rotate(270deg)
}

header > nav > ul > li > nav {
position:absolute
}

header > nav > ul > li:hover > nav {
background-color:#A3C2DB;
border-radius:.25em;
box-shadow:0 3px 8px rgba(0,0,0,.6);
display:block;
line-height:3em;
right:auto
}

nav#resources {
width:152px
}

nav#what_we_do {
width:170px
}

nav#activity {
width:196px
}

nav#file_a_complaint {
width:152px
}

nav#governing_provisions {
width:240px
}

nav#search {
width:122px
}

div#accent {
background-color:#FFD75F;
opacity:.6;
height:6px;
display:inherit
}

nav.subNav {
padding-left:inherit
}
}