@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

body.slideNav {overflow: hidden;}

/* HEADINGS ------------------------------ */
h1 {font-size:2.5em;}
h2, .content * h1{font-size:2.5em}
h3, .content * h2{font-size:1.5em}
h4, th{font-size:1.2em}
h5 {font-size:1.1em}
h6 {font-size:1.0em}
.intro {font-size: 1.25em;}


/* HEADER ------------------------------ */
body>header {position: relative; background:#fff}
body>header:before{content: "";opacity: 0; z-index: 3;background-color: #000;display: block;position: fixed;left:100vw;top:0;width:100vw;height:100vh;-webkit-transition:left 0ms ease 200ms, opacity 200ms ease;transition:left 0ms ease 200ms, opacity 200ms ease}
     body.slideNav>header:before{left:0;opacity: .5;-webkit-transition:left 0ms ease 0ms, opacity 200ms ease;transition:left 0ms ease 0ms, opacity 200ms ease}
body>header #brand {display: block; padding: .375rem .5rem .625rem; text-align: center;font-size: 3em;}
body>header #brand img {max-width: 12.5rem; width:100%; height: auto; display: block; margin: 0 auto;}
body>header #navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 75%;max-height: 100vh;background-color:#01373C;z-index:3;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
     body.slideNav #navContainer{left: 25%;}
body>header #navContainer nav{display: inline}
body>header #navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
body>header #navContainer li {display:block;float: left;width: 100%; position: relative; border-top: 1px solid rgba(255,255,255,0.125)}
body>header #navContainer li li {border: 0}
body>header #navContainer a, #navContainer .menu{color:#fff;line-height:2.75em;padding:0 1rem;display:block;float: left;width: 100%; font-size: 1.125em;}
body>header #navContainer a:hover,#navContainer .menu:hover,
body>header #navContainer li.on a{background-color:#026670;color: #fff}
body>header #navContainer li.open{background-color: #026670}
body>header #navContainer li.open a:hover {background-color: #029CA2;}
body>header #navContainer li>span{display: block; position: absolute;right: 0;top: 0;width:3.0625em;height: 3.0625em;}
body>header #navContainer li>span:before{content: ""; display: block; width: 50%; height: 0.0625rem; background-color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center;}
body>header #navContainer li>span:after{content: ""; display: block; width: 50%; height: 0.0625rem; background-color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center center; transform-origin: center center;}
body>header #navContainer li.open > span:before {-webkit-transform: translate(-50%, -50%)rotate(0deg);transform: translate(-50%, -50%)rotate(0deg);}
body>header #navContainer li > span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
body>header #navContainer ul ul {font-size: .8em;display: none}
body>header #navContainer ul ul a {padding-left: 2rem}
body>header #navContainer ul ul li.on a {background-color: #029CA2;}
body>header #navContainer #ancillary {clear:both;display: block;}
body>header #navContainer #ancillary .search {clear:both; display: block; overflow: auto; padding:1rem; border-top: 1px solid rgba(255,255,255,0.125)}
body>header #navContainer #ancillary .search input {float: left;}
body>header #navContainer #ancillary .search input[type="text"] {
        width: calc(100% - 3.125rem);
        padding: 0 0.5rem;
        height: 3.125rem;
        background: #fff;
        border: 0;
        font-size: 1em;
}
body>header #navContainer #ancillary .search input[type="submit"] {
        font-size: 0;
        width: 3.125rem;
        height: 3.125rem;
        background: #029CA2;
}
body>header #navContainer #ancillary .search input[type="submit"]:hover {background: #60BEAA;}
#ancillary .search-icon:before {
        background-image: url(/images/icons/misc/search-white.svg);
	height: 1rem;
        width: 1rem;
        top: 50%;
        right: 50%;
        -webkit-transform: translate(50%, -50%);
                transform: translate(50%, -50%);
}
/* mobilenav */
body>header #mobilenav{background-color: #026670;float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
body>header #mobilenav a, #mobilenav span{color: #fff;line-height: 2.5em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
body>header #mobilenav *+* {border-left: 1px solid rgba(255,255,255,0.25)}
body>header #mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color:#60BEAA}
body>header #mobilenav .menu {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
body>header #mobilenav .menu svg {height: 1rem; fill: #fff;padding-left: .25em;}
/* hamburger */
body>header .hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 3px;top:3px;z-index:2;opacity: 0;background-color: #026670;padding: 1px 3px 3px 3px;}
body>header .hamburger path {fill:#fff;font-size: 1.75em;}
body>header .hamburger svg {
        pointer-events: none;
        height: 1.65rem;
        position: absolute;
        top: 50%;
        right: 50%;
        -webkit-transform: translate(50%, -50%);
                transform: translate(50%, -50%);
}
body>header .hamburger.on{opacity: .3}
/* /HEADER ------------------------------*/

/* MAIN ------------------------------ */
.twoCol, .threeCol, .resCol{
/* -webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
-webkit-columns: auto;
        columns: auto; */
-webkit-column-width: 13em;
        column-width: 13em;}

.content ul li {padding-left: 1.5em;}
.content ul li:before {left: .5em;}

.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}

.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}

.content {padding-bottom: 4rem;}
body.interior #content {padding-left: 5vw; padding-right: 5vw;}

/* table */
table tbody tr td, table tbody tr td .text {font-size: 0.875rem;}
table th {font-size: 0.9375rem;}
table.mobileBlock tbody tr td {display: block;}


/* blockquote */
blockquote {
margin: 2rem 0;
}
.content .departments .button {display: block;}


/* HOME -------------------------------- */
body.home .slideContainer h2 {font-size: 2.5em; top: 48%;}

.how-do-i .wrap {padding-left: 5vw; padding-right: 5vw;}
.how-do-i ul {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        max-width: 27em;
        width: 100%;
        margin-bottom: 1rem;
}
.how-do-i ul li {width: 40%;margin-bottom: 2rem;}
.how-do-i ul li a .icon-circle {
        width: 10.875em;
        height: 10.875em;
}
.id-card-icon, .vote-icon, .tax-bill-icon, .file-icon {height: 7rem;}
.id-card-icon {width: 5.125em;}
.vote-icon {width: 5.75em;}
.tax-bill-icon, .file-icon {width: 3.375em;}

.homeannouncements .wrap {max-width: 100%;}
.homeannouncements .wrap {padding: 4em 5vw;}

.calendar {padding: 2.5em 5vw;}
.calendar>div>h2 {padding: 0;}
#homeCalendar h2 {font-size: 1.65rem;}
.homeCalDay {
        width: 100%;
        padding: .5em 1em;
        overflow: auto;
        float: none;
        display: block;
        margin-bottom: 1em;  
}
#homeCalendar {text-align: center;}

.quick-links, .homenews {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.quick-links .left {
        padding: 2em 5vw 3em;
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        border-top: 5px solid #fff;
}
.quick-links ul {-webkit-columns: 2;columns: 2;}
.quick-links .right, .homenews .left {
        padding-bottom: 45%;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
}
.homenews .right {border-top: 5px solid #fff; border-bottom: 5px solid #fff}
.homenews .right .wrap {padding: 2em 5vw;}
.programs .bottomlist ul {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.programs .bottomlist ul li {
        width: 50%;
        text-align: center;
}
.programs .bottomlist ul li:nth-of-type(n+3) {margin-top: 1rem;}
.programs .bottomlist .wrap ul li img {height: 2.3em;}

.welcome-message .wrap {
        padding: 10.5em 5vw;
}

#sidenav {padding: 0 5vw;}
/* FOOTER ------------------------------ */
.fatFooter > * {text-align: center}
.fatFooter > * + * {margin-top: 2em}
footer  .wrap{text-align:center; display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-pack: start;-webkit-box-pack: start;justify-content: flex-start;-ms-flex-line-pack: stretch;align-content: stretch;-ms-flex-align: stretch;-webkit-box-align: stretch;align-items: stretch;}
#web-solutions{-ms-flex-order: 1;-webkit-box-ordinal-group: 2;order: 1;}
footer  .wrap nav a+span:before {content: "|"; margin: 0 0.5em}
footer .fatFooter nav>ul:first-of-type {margin: 1rem auto;}
footer .fatFooter .social-signup .email-signup input {vertical-align: top; margin-right: -.3em;}
footer >.wrap nav {display: block;}
footer .fatFooter nav>ul:first-of-type>li>ul {width: 100%; max-width: 23rem;margin-left: auto; margin-right: auto;}
footer > .fatFooter > nav {
        display: flex;
        flex-direction: column;
}
footer > .fatFooter > nav ul:first-of-type {order: 2;}
footer > .fatFooter > nav ul:nth-of-type(2) {order: 3;}
footer > .fatFooter > nav ul:last-of-type {order: 1;}

.largeTable ol {padding-left: 1em;margin-left: 1em;}

/* 500 */
@media (max-width: 31.25em) {
        body.home .slideContainer h2 {font-size: 8.75vw;} 
        body>header #mobilenav a, #mobilenav span {font-size: .8375rem;}

        .how-do-i ul li {width: 100%;font-size: 1.2em;}

        #homeCalendar h2 {font-size: 4.75vw;}

        .programs .bottomlist ul li {width: 100%;}
        .programs .bottomlist ul li:nth-of-type(n+2) {margin-top: 1rem;}

        .quick-links ul {-webkit-columns: 1;columns: 1;}

        .welcome-message .button + .button {margin: 1em;}
        .welcome-message .wrap {padding: 3.5em 7vw;}
        .welcome-message .button.white {padding: .75rem 1.89rem .86rem;}

        table th {font-size: 0.8125rem;}

        .listHeader {text-align: left;}

        .oneHalf {display: block;width: 100%;}
        .oneHalf:first-of-type {margin-right: 0;}
        .oneHalf + .oneHalf {margin-left: 0;}
        .largeTable tbody td {font-size: 0.8125rem;}
        .largeTable ol {margin-left: 0em;}
        #HowDoIMap>li {padding: 2rem 1.75rem 1.75rem 4.5rem;font-size: 1.25em;}
        #HowDoIMap .icon-circle {
                height: 3.5rem;
                width: 3.5rem;
                top: 1.35rem;
        }
        #HowDoIMap>li button {margin-top: 0;}
        #HowDoIMap .icon-circle > div {height: 1.35rem;}
        .resources-callouts {
                flex-direction: column;
                align-items: center;
        }
        .resources-callouts a + a {margin-left: 0; margin-top: 1rem;}

}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
        footer .fatFooter .social-signup .email-signup input {font-size: 1rem;}
      }