html, 
body { color: #333; font-family: "Roboto", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }

/* Links */
a { color: #0969B3; transition: background-color .2s, color .2s; padding: 4px 0; }
a:hover { color: #02345a; text-decoration: none; }
a:focus { text-decoration: none; }
button,
a.cta { background: #FCE600; color: #032640; font-weight: 700; border: none; border-radius: 10px 0px;  margin: 6px 0 6px; padding: 8px 14px 6px; transition: background .2s, color .2s; }
button:hover,
a.cta:hover { background: #032640; color: #fff;}
button a:hover { background: #032640; color: #fff;}

/* Headers */
h1 { font-size: 1.4em; margin: 0; }
h2 { font-size: 2.8em; margin: 26px 0; }
h3 { font-size: 2.2em; margin: 46px 0 22px; }
h4 { font-size: 1.6em; margin: 46px 0 12px; }
h5 { font-size: 1.4em; margin: 46px 0 12px; }
h6 { font-size: 1.2em; margin: 46px 0 12px; }

/* Paragraphs & Lists */
p { line-height: 1.6em; margin: 26px 0; }
ul, 
ol { margin: 20px 0; }
li { line-height: 1.6em; margin: 12px 0; }
img { max-width: 100%; }

/* Header */
#announcement { background: #FCE600; color: #032640; font-weight: 700; text-align: center; width: 100%; }
#announcement p { display: inline-block; line-height: 1.4em; margin: 0; padding: 14px 24px; }
/* #announcement a { background: #5AADC5; border-radius: 50px; color: #032640; display: inline-block; font-size: .9em; margin: 3px 0 3px 12px; padding: 5px 14px; }
#announcement a:hover { background: #3d91a9; } */

#header-top { background: #053F6B; display: flex; justify-content: space-between; padding: 12px 2% 12px 1.75%; }

#translation-widget { margin: 0; }
#translation-widget label { left: -9999px; position: absolute; }
#translation-widget select { background: #053F6B; border: 0; color: #fff; cursor: pointer; padding: 3px 8px 3px 4px; }
#google_translate_element { display: none; }

.social-media { display: flex; list-style: none; margin: 0; padding: 0; }
.social-media li { margin: 0 0 0 16px; }
.social-media li a:hover img { opacity: .8; }
.social-media img { height: 18px; }

#header-bottom { align-items: center; background: #fff; display: flex; justify-content: space-between; padding: 3px 2% 3px 1.25%; }
#header-bottom h1 { left: -9999px; position: absolute; }
#header-bottom img { height: 74px; }

header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { display: inline-block; margin: 0; margin-left: 44px;  }
header nav li a { color: #032640; display: block; font-weight: 700; padding: 0; position: relative; }
header nav li a:hover { color: #01101b; }
header nav li a:before { background: #F58235; content: ""; height: 0; position: absolute; top: 100%; transition: height .2s; width: 100%; }
header nav li a.active:before { height: 8px; }
header nav li a:hover:before { height: 4px; }

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

#mobile-menu { background: transparent; border: 0; display: none; margin: 0; padding: 0 4px; }
#mobile-menu .line { background: #032640; display: block; height: 3px; left: 0; margin: 0 0 6px; position: relative; top: 0; transition: .3s; width: 26px; }
#mobile-menu .line.btm { margin: 0; }

.ada-element { left: -9999px; position: absolute; }

/* General Formatting */
#content > section { padding: 48px 10% 80px; }
#content > section:first-of-type { padding: 0; }

h2 { background: #053F6B; color: #fff; font-size: 3.4em; font-weight: 700; margin: 0; padding: 110px 10% 26px; position: relative; }
h2:before { background-image: url("../images/swoosh.svg"); background-repeat: no-repeat; background-size: auto 180px; bottom: -36px; content: ""; height: 180px; margin-left: -76px; position: absolute; width: 84px; }
.subhead { color: #053F6B; font-size: 1.3em; font-weight: 700; text-align: center; margin: 38px 15% 24px; }

#homepage-header { background: #053f6b; background-image: url("../images/home_banner.jpg"); background-size: cover; background-position: center; }
#homepage-header h2 { background: transparent; line-height: 1.4em; padding: 76px 10% 0; }
#homepage-header h2:before { background-size: auto 100%; height: 100%; margin-left: -36px; width: 80%; z-index: 0; }
#homepage-header h2 div { position: relative;  }
#homepage-header h2 span { display: block; font-size: 3em; font-weight: 300; line-height: .75em; }
#homepage-header p { color: #fff; font-size: 1.4em; margin: 0; padding: 4px 10% 64px; }

h3 { color: #0969B3; font-weight: 700; padding-left: 24px; position: relative; }
h3:before { background-image: url("../images/blue_swoosh.png"); background-repeat: no-repeat; background-size: auto 40px; content: ""; height: 46px; left: 0; position: absolute; width: 20px; }

h4 { color: #053F6B; font-weight: 700; }

.row { display: flex; gap: 5%; justify-content: space-between; margin: 0; }
.row:before,
.row:after { display: none; }
#content .row > div { padding: 0; }

.teal-section { background: #EFF7F9; }

/* Footer */
footer { background-color: #053F6B; color: #fff; }
footer .row { align-items: center; display: flex; }
#footer-top { padding: 38px 3% 36px; }
#footer-top .row > div:first-of-type > img:first-of-type { margin-bottom: 26px; }
#footer-top .row > div:last-of-type { text-align: right; }
#footer-top .row > div:last-of-type div { line-height: 1.8em; }
#footer-top .row > div:last-of-type div > a:first-of-type { color: #FCE600; text-decoration: underline; }
#footer-top .row > div:last-of-type div > a:first-of-type:hover { color: #aa9c01; text-decoration: underline; }
#footer-top nav ul { list-style: none; margin: 0 0 38px; padding: 0; }
#footer-top nav ul li { display: inline-block; font-weight: 700; margin: 0 0 0 42px; }
#footer-top a { color: #fff; }
#footer-top a:hover { color: #FCE600; }
#footer-top .social-media { float: right; margin-top: 10px; }
#footer-bottom { background: #032640; padding: 9px 14px; text-align: center; }
#footer-bottom p { margin: 0;  }

/* Homepage */

#key-elements { display: flex; gap: 2%; margin: 44px 0 62px; }
#key-elements h3 { margin: 0; text-align: right; }
#key-elements h3:before { display: none; }
#key-elements ul { list-style: none; margin: 0; }
#key-elements li { font-size: 1.1em; font-weight: 700; margin: 4px 0 22px; padding-left: 38px; position: relative; }
#key-elements li:before { background-image: url("../images/list-swoosh.png"); background-repeat: no-repeat; background-size: auto 26px; content: ""; height: 26px; left: 0; margin-right: 4px; position: absolute; top: -1px; width: 22px; }
#key-elements li span { color: #0969B3; }

#transit-modes { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#transit-modes li { background: #fff; border: 2px solid #032640; border-radius: 24px 0 24px 0; color: #032640; font-size: 1.1em; font-weight: 700; padding: 26px; text-align: center; width: 15%; }
#transit-modes li img { display: block; margin: 0 auto 8px; }

.big-img img { max-width: 1200px; width: 100%; }

#homepage-standout { background: #053f6b; background-image: url("../images/home_prefooter_bg.jpg"); background-size: cover; background-position: center; font-size: 1.4em; font-weight: 700; padding: 76px 10%  !important; text-align: center; }

.document-list { list-style: none; padding: 0; }
.document-list li { margin-bottom: 18px; padding-left: 34px; position: relative; }
.document-list a:before { background-image: url("../images/doc_icon.svg"); background-repeat: no-repeat; background-size: auto 24px; content: ""; height: 24px; left: 0; margin-right: 4px; position: absolute; transition: transform 0s; width: 24px; }
.document-list a { color: #053F6B; }
.document-list a:hover { color: #021e34; }
.document-list a:hover:before { transform: rotateY(360deg); transition: transform .7s; }

iframe { height: 670px; width: 100%; }

.standout { align-items: center; background: #EFF7F9; clear: both; display: flex; gap: 24px; justify-content: space-between; margin-top: 34px; padding: 8px 2.5% 8px 60px; position: relative; }
.standout:before { background-image: url("../images/blue_swoosh.png"); background-repeat: no-repeat; background-size: auto 40px; content: ""; height: 46px; left: 24px; position: absolute; width: 20px; }

.blue-button { background: #053F6B; border-radius: 4px; box-shadow: 0 4px 8px -3px #555; color: #fff; font-weight: 700; padding: 5px 11px; transition: .3s; }
.blue-button:hover { background: #032c4b; box-shadow: 0 6px 10px -4px #222; color: #fff; }

#share-feedback { background: #F58235; }
#share-feedback h3 { color: #fff; }

/* Accordions */
.hdr-accordion-set { margin-bottom: 20px; }
.hdr-accordion { border-bottom: 1px solid #999; }
.hdr-accordion h4 { font-size: 1.4em; margin: 0 0 12px; }
.hdr-accordion button { background: #fff; color: #032640; }
.hdr-accordion-header { cursor: pointer; margin: 18px 0 0; padding: 10px 48px 10px 10px; position: relative; text-align: left; width: 100%; }
.hdr-accordion-set.has-js .hdr-accordion-header:before,
.hdr-accordion-set.has-js .hdr-accordion-header:after { border: 3px solid #F58235; border-width: 0 3px 3px 0; content: ""; height: 16px; margin-top: -6px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); transition: .8s; width: 16px; }
.hdr-accordion-set.has-js .hdr-accordion-header:after { display: none; }
.hdr-accordion-set.has-js .opened .hdr-accordion-header:before { margin-top: 3px; transform: translateY(-50%) rotate(225deg); }
.hdr-accordion > div { background: #fff; padding: 1px 2%; }
.hdr-accordion > div p { margin-top: 14px;}

/************ Responsive ****************************************************************************************/

@media screen and (min-width: 2030px) {
    html,body { font-size: 20px; }
    p { line-height: 1.8em; margin: 32px 0; }
}

@media screen and (max-width: 1240px) {
    #content > section { padding: 24px 6% 54px; }

}

@media screen and (max-width: 992px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 2.4em; padding: 78px 14% 24px}
    h2:before { background-size: auto 110px; bottom: -15px; height: 110px; margin-left: -55px; width: 52px; }
    h3 { font-size: 1.6em; margin: 12px 0; }
    h3:before { background-size: auto 32px; height: 32px; width: 16px; }
    h4 { font-size: 1.2em; margin: 34px 0 0; }
    h5 { font-size: 1.2em; margin: 24px 0 0; }
    h6 { font-size: 1.1em; margin: 24px 0 0; }
    p, li { font-size: .9em; line-height: 1.4em; }
    button,
    a.cta { font-size: .9em; padding: 4px 10px; }

    .subhead { font-size: 1.1em; }

    #content > section { padding: 22px 6% 52px; }
    .row { display: block; float: none; overflow: auto; }

    /* Header */
    #mobile-menu { display: block; }
    .menu-opened #mobile-menu .line.top { top: 8px; transform: rotate(45deg); }
    .menu-opened #mobile-menu .line.mid { opacity: 0; transform: rotate(90deg); }
    .menu-opened #mobile-menu .line.btm { top: -10px; transform: rotate(-45deg); }
    
    .standout { display: block; padding: 4px 4% 34px 70px; }
    .standout:before { left: 26px; top: 24px; }
    
    #transit-modes { flex-wrap: wrap; }
    #transit-modes li { padding: 16px 10px; width: 30%; }
        
    #announcement { padding: 6px 10px; }
    /* #announcement a { font-size: .85em; padding: 3px 11px; } */
    #header-top { padding: 8px 14px; }
    #header-bottom { padding: 2px 10px; }
    #header-bottom img { height: 62px; }

    #homepage-standout { font-size: 1.2em; padding: 32px 8% !important; }

    header nav { position: relative; }
    header nav ul { background-color: #053F6B; box-shadow: 2px 4px 8px -4px #000; margin-top: 8px; opacity: 0; position: absolute; right: 9999px; top: 100%; width: 170px; z-index: 1; }
    header nav li { border-top: 1px solid #fff; display: block; margin: 0; padding: 8px 4px; text-align: center; width: 100%; }
    header nav li a { color: #fff; font-size: .85em;}
    header nav li a.active:before { display: none; }
    header nav li a:hover { color: #FCE600; }
    .menu-opened header nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
    
    .hdr-accordion h4 { font-size: 1.2em; margin: 0 0 12px; }
}

@media screen and (max-width: 768px) {
    #content > section { padding: 22px 8% 34px; }
    
    #homepage-header h2 { font-size: 2em; line-height: 1.1em; padding: 37px 14% 0; }
    #homepage-header h2:before { height: 110%; top: 10%;  }
    #homepage-header h2 span { font-size: 2.6em; line-height: 1em; margin-left: -3px; }
    #homepage-header p { font-size: 1.2em; padding: 4px 14% 34px; }

    #key-elements li { font-size: 1em; }

    .big-img { border: 1px solid #aaa; overflow: auto; }
    .big-img img { width: 768px; }
}

@media screen and (max-width: 500px) {
    h2 { font-size: 1.9em; padding: 58px 36px 12px 66px; }
    h2:before { background-size: auto 80px; bottom: -8px; height: 80px; margin-left: -44px; width: 37px; }
    .subhead { font-size: 1em; }

    #homepage-subhead .subhead { margin: 18px; }
    
    #header-top { display: block; text-align: center; }
    #header-bottom img { height: 52px; }
    .social-media { margin: 4px auto; justify-content: space-around; width: 68px; }
    .social-media li { margin: 0 6px; }
    
    #key-elements { display: block; }
    #key-elements h3 { padding: 0; text-align: center; }
    #key-elements ul { padding: 20px 0 0; }
    
    #transit-modes li { font-size: 1em; width: 47%; }
        
    #footer-top { padding: 30px 3% 26px; }
    #footer-top .row { display: block; }
    #footer-top .row > div:first-of-type img { display: block; margin: 0 auto 4px; max-width: 180px; }
    #footer-top .row > div:last-of-type { padding-top: 28px; text-align: center; }
    #footer-top nav ul { margin-bottom: 14px; }
    #footer-top nav ul li { margin: 0 16px 8px; }
    #footer-top .social-media { float: none; }
}