html, body { color: #002d3d; font-family: "Lato", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
#content > .row > div { padding: 24px 2.5%; }
.vertical-center > div { float: none; display: inline-block; margin-left: -.5%; vertical-align: middle; }
.vertical-center > div:first-of-type { margin: 0; }

/* Links */
a { color: #1a6890; transition: background-color .2s, color .2s; font-weight: bolder;}
a:hover,
a:focus { text-decoration: none; }
.button { background-color: #c47; border-radius: 14px; border: 0; color: #fff; display: inline-block; letter-spacing: .05em; margin-top: 12px; padding: 4px 16px; transition: background-color .2s; }
.button:hover { background-color: #b16; color: #fff; }
.button:focus { color: #fff; }

#skiptocontent { background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 8px 0 #000; font-size: 1.3em; left: -9999px; padding: 3px 12px; position: absolute; top: -9999px; }
#skiptocontent:focus { left: 8px; top: 8px; }
.ada-element { left: -9999px; position: absolute; }

.vc:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.vc > * { display: inline-block; vertical-align: middle; }

.list-var { min-height: 110px; padding-left: 120px; position: relative; }
.list-var > img { left: 0; position: absolute; width: 100px; }

.circ { background: #c47; border-radius: 50%; height: 100px; line-height: 100px; text-align: center; width: 100px; }
.circ img { width: 60px; }

/* Headers */
h1 { font-size: 3.3em; margin: 30px 0 22px; }
h2 { font-size: 2.2em; margin: 12px 0 0; }
h3 { font-size: 1.8em; margin: 28px 0 0; }
h4 { font-size: 1.6em; margin: 28px 0 0; }
h5 { font-size: 1.4em; margin: 26px 0 0; }
h6 { font-size: 1.3em; margin: 26px 0 0; }

/* Paragraphs & Lists */
p { font-size: 1.1em;line-height: 1.6em; margin:  22px 0 6px; }
ul, ol { margin: 16px 0 10px; }
li { line-height: 1.4em; margin-bottom: 8px; }
img { max-width: 100%; }

/* Forms */
form { margin: 18px 0; }
label { display: block; margin: 10px 0 8px; width: 100%; }
input[type="text"] { margin-bottom: 8px; padding-left: 3px; width: 100%; }
textarea { height: 80px; margin-bottom: 8px; padding: 3px 5px; resize: none; width: 100%; }
input[type="checkbox"],
input[type="radio"] { margin: 0 4px 0 2px; }
input[type="checkbox"] + label,
input[type="radio"] + label { display: inline-block; margin-right: 14px; position: relative; top: -1px; width: auto; }
input[type="submit"],
input[type="reset"] { background-color: #c47; border-radius: 14px; border: 0; color: #fff; letter-spacing: .05em; margin-top: 14px; padding: 4px 16px; transition: background-color .2s; }
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { background-color: #b16; }

/* Tables */
table { border: 1px solid #333; margin: 14px 0; width: 100%; }
table tr th { border: 1px solid #333; padding: 2px 4px; }
table tr td { border: 1px solid #333; padding: 2px 4px; }

/* Quick Header */
.header { color: #fff; height: 144px; padding-top: 44px; position: relative; z-index: 1;}
.header h1 { left: -9999px; position: absolute; }
.header img { height: 65px; margin: 28px 2%; }
.header .nav { float: right; padding: 28px 4% 0 0; }
.header ul { margin: 0; }
.header li { display: inline-block; font-size: 1.2em; margin-left: 38px; }
.header li a { color: #fff; display: block; padding: 7px 4px 3px; position: relative; }
.header li a:hover { color: #002d3d; }
.header li a.active { font-weight: 700; }
.header li a.active:after { background: #fff; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100%; }
.header li:last-of-type a { background: #f7931e; color: #002d3d; padding: 7px 16px; }
.header li:last-of-type a:hover { background: #dd7a07; color: #002d3d; }
#mobile-menu { background-color: transparent; border: 0; cursor: pointer; display: none; font-size: 1.4em; padding: 0 4px; }

.header .variant li a:hover { color: #d3e8ee; }
.header .variant li:last-of-type a:hover { color: #002d3d; }

#header-top { background: #002d3d; height: 44px; padding: 7px 3% 0 1%; position: absolute; top: 0; width: 100%; }
#langaugeselectcont { display: inline-block !important; margin: 3px 12px 0 !important; vertical-align: middle; }
#langaugeselectcont select { background: transparent; border-color: #fff; border-radius: 3px; color: #fff; font-size: .9em; width: 100%; }
#langaugeselectcont label { margin-left: 5%; width: 90%; }
.goog-te-gadget { display: none; }
#font-sizes { float: right; }
#font-sizes button { background: transparent; border: 0; }
#font-sizes button.selected { color: #b6d4dc; }
#font-sizes .fontsize-big { font-size: 1.2em; }

/* Quick Footer */
.footer { background-color: #002d3d; color: #fff; padding: 24px 36px; }
.footer p { margin: 0; }
.footer > div { display: inline-block; vertical-align: middle; width: 48%; }
.footer > div a { display: inline-block; margin-bottom: 18px; margin-right: 3%; vertical-align: middle; width: 28%; }
.footer > ul { display: inline-block; margin-top: 8px; padding-left: 0; text-align: right; vertical-align: middle; width: 48%; }
.footer > ul li { display: inline-block; margin-left: 48px; }
.footer > ul li a { color: #fff; font-weight: 700; }
.footer > ul li a:hover { color: #1a6b90; }
.footer > ul li:last-of-type img { height: 28px;  }
.footer > ul li:last-of-type span { left: -9999px; position: absolute; }

/* Modal Window */
.close-modal { display: none; }
.modal-window { color: #002d3d; display: none; height: 100%; left: 0; position: fixed; top: -100%; transition: 0; width: 100%; z-index: 5000; }
.modal-window.showing { top: 0; transition: top 1s; }
.modal-window > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; display: block; height: 100%; left: 0; margin: 0; position: absolute; top: 0; width: 100%; }
.modal-title { margin-bottom: 40px; padding: 56px 0 0; position: relative; }
.modal-title:after { background: #f7931e; bottom: 0; content: ""; height: 5px; left: 50%; margin-left: -60px; margin-bottom: -18px; position: absolute; width: 120px; }
.modal-window > div { background-color: #fff; border: 1px solid #333; bottom: 50px; box-shadow: 4px 13px 28px 0 #111; left: 12%; margin: 0; overflow: auto; padding: 0 3% 28px; position: absolute; top: 40px; width: 76%; }
.modal-window > div .close-modal { background: transparent; border: 0; font-size: 3em; line-height: .6em; position: absolute; right: 10px; top: 16px; }
.modal-window > div .close-modal span { left: -9999px; position: absolute; }
.modal-window :focus { border-radius: 2px; outline: 2px groove #ddd; }


/*********************************************/
/******   Custom CSS  ************************/
/*********************************************/

#page-header { background-image: url("../images/header-hp.jpg"); background-position: center; background-size: cover; height: 620px; margin-top: -112px; position: relative; }
#page-header h2 { background: #002d3d; background: rgba(0,45,61,.9); bottom: 0; color: #fff; font-size: 3.4em; font-weight: 700; left: 9%; line-height: 1.2em; padding: 14px 34px 22px 38px; position: absolute; width: 41%; }
#page-header h2 > span { display: block; font-size: .36em; font-weight: 400; margin-bottom: 0px; text-transform: uppercase; }
#page-header h2 strong { display: block; font-size: .44em; margin-top: 28px; }
#page-header h2 strong span { padding-top: 14px; position: relative; }
#page-header h2 strong span:after { background: #fff; content: ""; height: 3px; left: 0; position: absolute; top: 0; width: 100%; }

#page-header.comment-map { background-image: url("../images/header-contact.jpg"); }
#page-header.comment-map h2 { border-bottom: 12px solid #1a6b90; padding-bottom: 36px; }
#page-header.public-involvement h2 { border-bottom: 12px solid #1a6b90; padding-bottom: 36px; }
#page-header.contact-us { background-image: url("../images/header-contact.jpg"); }
#page-header.contact-us h2 { left: -9999px; }

.row { padding: 0 8%; }
.teal-row { background: #d3e8ee; }
h3 { font-weight: 700; }
h3 span { display: block; font-size: .64em; font-weight: 400; margin-bottom: 6px; text-transform: uppercase; }
h4 { font-weight: 700; padding-bottom: 8px; position: relative; }
h4:after { background: #f7931e; bottom: 0; content: ""; height: 3px; left: 0; position: absolute; width: 60px; }
.intro-paragraph { padding: 0 10%; }

.yellow-button { background: #f7931e; color: #002d3d; display: inline-block; font-size: 1.1em; font-weight: 700; margin-top: 14px; padding: 4px 9px; }
.yellow-button:hover { background: #d97b0c; color: #002d3d; }

#data-insights { background: #002d3d; color: #fff; }
#data-insights ul { padding: 0; text-align: center; }
#data-insights ul li { display: inline-block; font-weight: 700; margin-top: 28px; vertical-align: top; width: 30%;  }
#data-insights ul li img { display: block; height: 80px; margin: 0 auto 18px; }

#planning-area { text-align: center; }
#planning-area .col-sm-4 { text-align: left; }

.gear-link { background: #f7931e; color: #002d3d; display: block; font-weight: 700; margin-bottom: 38px; padding: 8px 14px; }
.gear-link img { height: 36px; }

#timeline { text-align: center; }
#timeline ul { height: 400px; list-style-type: none; padding: 0; position: relative; }
#timeline ul:after { background: #d1d8e0; content: ""; height: 8px; left: 0; margin-top: -4px; position: absolute; top: 50%; width: 100%; }
#timeline ul h4 { color: #dff2fa; font-size: 9em; font-weight: 700; height: 200px; line-height: 200px; margin: 0; padding: 0; position: absolute; text-align: center; width: 48%; }
#timeline ul h4:after { display: none; }
#timeline ul h4:last-of-type { bottom: 0; left: 50%; }
#timeline ul li { bottom: 50%; left: 24%; margin-left: -90px; padding-bottom: 12px; position: absolute; width: 180px; }
#timeline ul li h5 { font-size: 1em; font-weight: 700; margin-bottom: 24px; position: relative; }
#timeline ul li h5:after { background: #258cab; content: ""; height: 4px; left: 50%; margin-left: -19px; margin-top: 8px; position: absolute; top: 100%; width: 38px; }
#timeline ul li img { height: 60px; }
#timeline ul li div { left: 0; margin-top: 40px; position: absolute; text-align: center; top: 100%; width: 100%; }
#timeline ul li div span { background: #258cab; border-radius: 66px; color: #fff; padding: 4px 16px 6px; position: relative; }
#timeline ul li div span:after { border: 8px solid transparent; border-bottom-color: #258cab; border-width: 10px 8px; bottom: 100%; content: ""; left: 50%; margin-left: -8px; position: absolute; }
#timeline ul li:before,
#timeline ul li:after { background: #258cab; border-radius: 50%; content: ""; height: 8px; left: 50%; margin-top: 4px; margin-left: -4px; position: absolute; top: 100%; width: 8px; z-index: 1; }
#timeline ul li:before { background: #fff; height: 18px; margin-top: -1px; margin-left: -9px; width: 18px; }

#timeline ul li:nth-of-type(1) { bottom: auto; left: 0; top: 50%; }
#timeline ul li.set-down:nth-of-type(1) h5 { margin-top: 24px; }
#timeline ul li:nth-of-type(1) div span:after { border-top-color: #258cab; }
#timeline ul li:nth-of-type(4) h5:after { background: #f7931e; }
#timeline ul li:nth-of-type(4) div span { background: #f7931e; }
#timeline ul li:nth-of-type(4) div span:after { border-bottom-color: #f7931e; }
#timeline ul li:nth-of-type(4):after { background: #f7931e; }
#timeline ul li:nth-of-type(3) { left: 45%; }
#timeline ul li:nth-of-type(3) div span:after { border-top-color: #258cab; }
#timeline ul li:nth-of-type(4) { left: 64%; }
#timeline ul li:nth-of-type(5) { left: 82%; }
#timeline ul li:nth-of-type(5) h5:after { background: #1a6890; }
#timeline ul li:nth-of-type(5) div span { background: #1a6890; }
#timeline ul li:nth-of-type(5) div span:after { border-top-color: #1a6890; }
#timeline ul li:nth-of-type(5):after { background: #1a6890; }
#timeline ul li:nth-of-type(6) { left: 100%; }
#timeline ul li:nth-of-type(6) h5:after { background: #000; }
#timeline ul li:nth-of-type(6) div span { background: #000; }
#timeline ul li:nth-of-type(6) div span:after { border-bottom-color: #000; }
#timeline ul li:nth-of-type(6):after { background: #000; }

#timeline ul li.set-down { bottom: auto; top: 50%; }
#timeline ul li.set-down img { margin-top: 18px; }
#timeline ul li.set-down h5 { margin-top: 12px; padding-top: 8px; }
#timeline ul li.set-down h5:after { bottom: 100%; top: auto; }
#timeline ul li.set-down div { bottom: 100%; margin-top: 0; margin-bottom: 34px; top: auto; }
#timeline ul li.set-down div span:after { border-bottom-color: transparent; bottom: auto; top: 100%; }
#timeline ul li.set-down:before { bottom: 100%; margin-top: 0; margin-bottom: -9px; top: auto; }
#timeline ul li.set-down:after { bottom: 100%; margin-top: 0; margin-bottom: -4px; top: auto; }

#events { background: #1a6b90; color: #fff; padding: 32px 8% 52px; text-align: center; }
#events a { background: #d3e8ee; border-top: 5px solid #f7931e; box-shadow: 0 3px 8px -2px #333; color: #002d3d; display: inline-block; height: 100%; margin: 24px 28px; ; padding: 16px 18px 24px; text-align: center; vertical-align: top; width: 165px; }
#events a:hover { background: #b6d4dc; }
#events a img { display: block; height: 80px; margin: 0 auto 14px; }
#events a span { display: block; font-weight: 700; height: 40px; line-height: 1.2em; }

.comment-map + .row { padding: 0; }
#share-ideas { background: linear-gradient(to bottom, #fff, #e8f3f6); padding: 24px 8% !important; text-align: center; }
#share-ideas iframe { height: 700px; margin: 28px 0; width: 100%; }

#announcement { background: #f7931e; font-size: 1.1em; font-weight: 700; padding: 12px; text-align: center; }
#announcement h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 700;
}
#announcement .btn-link {
    display: inline-block;
    background-color: #1a6890;
    color: #FFF;
    padding: 10px;
    text-decoration: none;
    transition: background-color 150ms ease-in-out;
    border-radius: 8px;
}
#announcement .btn-link:hover {
    cursor: pointer;
    background-color: #002d3d;
}


#announcement img { height: 32px; margin-right: 9px; }
#announcement a {font-weight: 900; color: #333; text-decoration: underline;}
.pi-section { padding: 24px 0 48px; }
.pi-section > .col-md-6 {padding-left: 0;}

#questions-comments { padding-bottom: 78px !important; text-align: center; }
#questions-comments h3 { text-transform: uppercase; }

.font2 { font-size: 22px; }
.font2 #header-top { height: 50px; }
.font2 #page-header { height: auto; padding-top: 260px; }
.font2 #page-header h2 { position: static; width: 100%; }
.font2 #events a { width: 220px;}
.font2 #events a span { height: 80px;}

/*********************************************/
/****** Media Queries ************************/
/*********************************************/
/* Add more queries as needed; 992px is the column breakpoint for "medium"  columns in Bootstrap */

@media screen and (min-width: 2100px) {
    body { font-size: 20px; }
    #page-header { height: 740px; }
    .header img { height: 92px; }
    #events a { width: 200px; }
}

@media screen and (max-width: 1470px) {
    .footer > div { width: 38%; }
    .footer > ul { font-size: .9em; width: 60%; }
    
    .font2 #data-insights ul li { width: 45%; }
    .font2 #data-insights li:last-of-type { width: 80%; }
}

@media screen and (max-width: 1214px) {
    .header img { height: 50px; }
    .header li { font-size: 1em; }
    #page-header { height: 550px;}
    #page-header h2 { font-size: 3em; }

    #data-insights li:last-of-type { width: 45%; }

    .footer > ul { font-size: .85em; }
    .footer > ul li { margin-left: 28px; }
    .footer > ul li:last-of-type img { height: 22px; }
    
    .font2 #timeline ul:after { display: none; }
    .font2 #timeline ul { height: auto; }
    .font2 #timeline ul h4 { color: #002d3d; font-size: 3em; height: auto; line-height: 1.2em;position: static; text-align: center; width: 100%; }
    .font2 #timeline ul li { border-top: 2px solid #002d3d; margin: 0 0 18px; padding-top: 28px; position: static; width: 100%; }
    .font2 #timeline ul li:first-of-type { border-top: 0; }
    .font2 #timeline ul li:nth-of-type(4) { border-top: 0; }
    .font2 #timeline ul li:before,
    .font2 #timeline ul li:after { display: none; }
    .font2 #timeline ul li h5:after { display: none; }
    .font2 #timeline ul li div { position: static; }
    .font2 #timeline ul li h5 { margin: 0; }
    .font2 #timeline ul li div span:after { display: none; }
    .font2 #timeline ul li div { margin-top: 3px; }
    .font2 #timeline ul li img { margin: 8px 0; }
    .font2 #timeline ul li.set-down { padding-top: 1px; }
    .font2 #timeline ul li.set-down img { margin: 8px 0; }
    .font2 #timeline ul li.set-down div { margin: 14px 0 0; }
    .font2 #timeline ul li.set-down h5 { margin-top: 0; }
    .font2 #timeline ul li:nth-of-type(3) div span { display: inline-block; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 2.2em; margin: 20px 0 6px; }
    h2 { font-size: 1.7em; margin: 12px 0 0; }
    h3 { font-size: 1.4em; margin: 20px 0 0; }
    h4 { font-size: 1.3em; margin: 28px 0 0; }
    h5 { font-size: 1.2em; margin: 26px 0 0; }
    h6 { font-size: 1.1em; margin: 26px 0 0; }
    p, li { font-size: .9em; line-height: 1.3em; }
    .button { font-size: .8em; border-radius: 12px; padding: 4px 12px 3px; }
    table tr { font-size: .8em; padding: 2px; }
    .vertical-center > div { margin: 0; }

    .modal-window > div { height: 80% !important; left: 8% !important; padding: 0 6% 24px; top: 5% !important; width: 84% !important; }

    /* Quick Mobile Menu */
    #mobile-menu { display: inline-block; }
    .header .nav ul { background-color: #002d3d; box-shadow: 2px 8px 8px -4px #222; display: none; opacity: 0; padding: 0; position: absolute; right: 110%; top: 112px; width: 200px; z-index: 1; }
    .menu-opened .header .nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
    .header .nav ul li { border-top: 1px solid #fff; display: block; margin: 0; text-align: center; }
    .header .nav ul li a { font-size: .9em; padding: 6px; }
    .header .nav ul li a.active:after { display: none; }
    
    #page-header { height: 440px; }
    #page-header h2 { font-size: 2em; }

    .yellow-button { font-size: .9em; padding: 3px 7px;  }

    #timeline ul h4 { font-size: 6em; }
    #timeline ul li { margin-left: -50px; width: 100px; }
    #timeline ul li:nth-of-type(3) div span { display: block; }
    
    .gear-link { font-size: .9em; padding-bottom: 18px; }

    #data-insights ul li { font-size: .75em; }
    #data-insights ul li img { height: 60px; }

    .footer { text-align: center; }
    .footer > div { text-align: center; width: 94%; }
    .footer > div a { margin: 0 1%; width: 14%; }
    .footer ul { margin: 24px 0 0; text-align: center; width: 90%; }
    .footer ul li { margin: 0 16px 12px; }
}

@media screen and (max-width: 768px) {
    #header-top { font-size: .85em; height: 32px; padding: 3px 1% 0 0; }
    #langaugeselectcont { margin-left: 8px !important; }
    .header img { margin-top: 0; }
    .header .nav { padding-top: 9px; }
    .header .nav ul { top: 92px; }
    #page-header.comment-map h2 { border-bottom-width: 8px; padding-bottom: 22px; }
    
    #page-header { height: 380px; }
    #page-header h2 { font-size: 1.8em; left: 5%; line-height: 1.1em; width: 90%; }
    #page-header h2 > span { font-size: .5em; }

    .gear-link { font-size: .85em; }
    .gear-link img { display: block; margin: 0 auto 3px; }

    #intro-row { padding: 0; }
    #intro-row > div { padding: 20px 5% !important; }

    #data-insights ul li { margin: 28px 1% 0; }

    .footer > div a { margin: 0 2%; width: 24%; }

    #share-ideas iframe { height: 490px; }

    #announcement { font-size: .9em; }
    #announcement img { height: 26px; }

    .font2 #header-top { height: 38px;}
}

@media screen and (max-width: 614px) {
    #page-header { height: auto; padding-top: 180px; }
    #page-header h2 { font-size: 1.6em;padding: 12px 18px 12px 22px; position: static; width: 100%; }
    #page-header h2 > span { line-height: 1.1em; margin: 6px 0; }
    .header img { height: 44px; }
    .header .nav { padding-top: 6px; }
    .header .nav ul { font-size: .8em; top: 82px; width: 180px;}
    #mobile-menu { font-size: 1.1em; }
    
    #timeline ul:after { display: none; }
    #timeline ul { height: auto; }
    #timeline ul h4 { color: #002d3d; font-size: 3em; height: auto; line-height: 1.2em;position: static; text-align: center; width: 100%; }
    #timeline ul li { border-top: 2px solid #002d3d; margin: 0 0 18px; padding-top: 28px; position: static; width: 100%; }
    #timeline ul li:first-of-type { border-top: 0; }
    #timeline ul li:nth-of-type(4) { border-top: 0; }
    #timeline ul li:before,
    #timeline ul li:after { display: none; }
    #timeline ul li h5:after { display: none; }
    #timeline ul li div { position: static; }
    #timeline ul li h5 { margin: 0; }
    #timeline ul li div span:after { display: none; }
    #timeline ul li div { margin-top: 3px; }
    #timeline ul li img { margin: 8px 0; }
    #timeline ul li.set-down { padding-top: 1px; }
    #timeline ul li.set-down img { margin: 8px 0; }
    #timeline ul li.set-down div { margin: 14px 0 0; }
    #timeline ul li.set-down h5 { margin-top: 0; }
    #timeline ul li:nth-of-type(3) div span { display: inline-block; }

    .footer > div a { margin: 0 4%; width: 36%; }
}

@media screen and (max-width: 400px) {
    #data-insights ul li { width: 44%; }

    #events a { font-size: .8em; margin: 22px 0 10px; width: 80%; }
    #events a span { height: auto; }
    #events a img { height: 48px; }
    
    .footer > div a { max-width: 400px; width: 80%; }
}