html, 
body { color: #424242; font-family: "Open Sans", sans-serif; font-size: 18px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; min-width: 100%; margin: 0; }

    .carousel-item {
      height: 100vh;
      min-height: 500px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .carousel-caption-wrapper {
      background: rgba(0, 0, 0, 0.8);
      padding: 2rem;
      border-radius: 1rem;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
    .carousel-caption-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2rem;
    }
    .carousel-caption-content img.logo {
      max-height: 180px;
      flex-shrink: 0;
    }
    .carousel-caption-content .text-content {
      color: #fff;
    }
    .carousel-caption-content h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .carousel-caption-content p {
      font-size: 1.1rem;
      margin: 0;
    }

    body {
            background-color: #f5f5f5;
        }

        .form-section {
            background-color: #0d5c91;
            color: #fff;
            padding: 2rem;
            border-radius: 0.5rem;
            margin: 2rem auto;
            max-width: 80%;
        }

        .form-control {
            margin-bottom: 1rem;
        }

        .footer {
            background-color: #0d2a47;
            color: white;
            padding: 1.5rem 0;
            text-align: center;
            width: 100%;
        }

        .footer .alogo {display: inline-block; width: 225px; margin-right: 25px;}
        .footer .blogo {display: inline-block; width: 100px;}

        .map-text-section {
            display: flex;
            justify-content: center;
            margin: 2rem auto;
            width:80%;
        }

        .map-text-section .map {
            max-width: 60%;
            height: auto;
        }
        
        .map-text-section img {
            width: 100%;
        }

        .map-text {

            padding: 1rem;
            background-color: #d9e8f6;
            width: 40%;
        }

/* Links */
a { transition: background-color .2s, color .2s; padding: 4px 0; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
button { background: #666; border: 0; color: #fff; margin: 6px 0 6px; padding: 8px 14px 6px; transition: background .2s, color .2s; }
button:hover { background: #999; }

/* Headers */
h1 { font-size: 1.4em; margin: 0; }
h2 { color: #08243F; font-size: 2em; font-weight: 700; margin: 22px 0; }
h3 { color: #fff; font-size: 1.8em; font-weight: 700; margin: 46px 0 22px; }
h4 { color: #003764; font-size: 1.5em; font-weight: 700; 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 */
header {background-color: #08243F; color: #fff; width: 100%;}
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { border-right: 1px solid #fff; display: inline-block; margin: 0; margin-left: 34px; padding-right: 34px; }
header nav li:last-of-type { border: 0; }
header nav li a { color: #fff; display: block; font-size: 1.1em; font-weight: 700; padding: 0; text-transform: uppercase; }
header nav li a.active { color: #FDBA17; }
header nav li a:hover { color: #A1E0FF; }

#announcement { background: #FDBA17; color: #000; font-weight: 700; padding: 10px 20px; text-align: center; }
#announcement img { margin-right: 6px; }
#announcement a { color: #000; margin: 0 11px; }
#announcement a:hover { color: #002C50; }

#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: #fff; 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; }

#header-top { align-items: center; background: #08243F; display: flex; justify-content: space-between; padding: 10px 3%; width: 100%;  }
#translation-widget { display: inline-block; padding-left: 50px;}
#translation-widget img { display: inline-block; width: 15px; vertical-align: middle;}
#translation-widget label { left: -9999px; position: absolute; }
#translation-widget select { background: #08243F; border: 0; display: inline-block; width: 200px; }
#google_translate_element { display: none; }

#social-links { float: right; list-style: none; margin: 0; padding: 0; }
#social-links li { display: inline-block; margin: 2px 8px; }

#header-bottom { align-items: center; background: #003764; display: flex; justify-content: space-between; padding: 26px 3%; }
#header-bottom img { height: 140px; }

#header-banner { background-color: #333; background-image: url("../images/header-bg.jpg"); background-size: cover; background-position: center; height: 550px; position: relative; }
#header-banner h2 { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); bottom: 0; font-size: 3.6em; font-weight: 7 900; left: 0; line-height: 1.1em; margin: 0; overflow: hidden; padding: 40px 44px 40px 15%; position: absolute; width: 80%; }
#header-banner h2 span { display: block; font-size: .7em; font-weight: 400; }

/* General Formatting */
#content > section { padding: 48px 15% 82px; }

#content section a { text-decoration: underline !important; }

.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: #F6FCFF; }

/* Footer */
footer { background-color: #072039; color: #fff; }
footer p { margin: 0; text-align: center; }

#footer-top { align-items: center;  background: #003764; display: flex; padding: 34px 4%; }
#footer-top div:first-of-type img { height: 114px; }
#footer-top div:last-of-type { text-align: right; }
#footer-top ul { list-style: none; margin: 0; padding: 0; }
#footer-top ul li { border-right: 1px solid #fff; display: inline-block; margin: 0; }
#footer-top ul li:last-of-type { border: 0; }
#footer-top ul li a { color: #fff; }
#footer-top ul li a:hover { color: #A1E0FF; }
#footer-top nav ul { margin-bottom: 62px; }
#footer-top nav ul li { font-weight: 700; margin-left: 22px; padding-right: 22px; text-transform: uppercase; }
#footer-top #serious-links li { font-size: .75em; margin-left: 12px; padding-right: 12px; }
#footer-top #social-media { margin-top: 12px; }
#footer-top #social-media li { border: 0; margin-right: 8px; }
#footer-top #social-media li a:hover { background: #06243d; }

#footer-bottom { align-items: center; background: #002C50; display: flex; justify-content: space-between; padding: 18px 9%; }
#footer-bottom a { color: #fff; }
#footer-bottom a:hover { color: #A1E0FF; }
#footer-bottom a:after { border: 1px solid #fff; border-radius: 50%; content: "\2191"; display: inline-block; font-size: 1.4em; height: 22px; line-height: .8em; margin-left: 6px; text-align: center; width: 22px; }

/* Homepage */

iframe {  margin-bottom: 64px; }

#about-project { background-image: url("../images/tree-bg.jpg"); background-size: cover; background-position: center; }

#objectives { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin-top: 50px; padding: 0; }
#objectives li { font-weight: 700; text-align: center; width: 23%; }
#objectives img { display: block; height: 74px; margin: 0 auto 14px; }

.meeting { display: flex; flex-wrap: wrap; justify-content: space-between; }
.meeting > div { background: #003764; color: #fff; width: 47%; }
.meeting > div:last-of-type { padding: 20px 2.5%; }
.meeting > div h4 { background: #035E33; color: #fff; font-weight: 700; margin: 0; padding: 20px 4%; }
.meeting > div h4 span { display: block; font-size: .8em; margin-top: 8px; }
.meeting > div p { margin: 0; padding: 15px 4% 20px; }
.meeting > div h5 { font-weight: 700; margin: 0; }
.meeting ul { list-style: none; padding: 0; }
.meeting a { color: #fff; display: block; padding-left: 26px; position: relative; }
.meeting a:hover { color: #A1E0FF; }
.meeting a img { height: 22px; left: 0; position: absolute; }

#logos { margin: 76px 0 44px; text-align: center; }
#logos img { height: 94px; margin: 0 24px 14px; }

/* Get Involved */

#subpage-banner { display: flex; }
#subpage-banner > div { background: #035E33; display: inline-block; padding: 0 14.25%; width: 74%; }
#subpage-banner > div:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
#subpage-banner > div > div { display: inline-block; vertical-align: middle; }
#subpage-banner > div > div img { display: block; }
#subpage-banner h2 { font-size: 2.8em; letter-spacing: .04em; text-transform: uppercase; }
#subpage-banner h2 img { height: 44px; margin-bottom: 6px; }
#subpage-banner > img { flex-shrink: 0; width: 26%; }
#subpage-banner nav ul { list-style: none; padding: 0; }
#subpage-banner nav ul li { border-right: 1px solid #fff; display: inline-block; margin-right: 14px; padding-right: 14px; }
#subpage-banner nav ul li:last-of-type { border-right: 0; }
#subpage-banner nav ul li a { color: #fff; }
#subpage-banner nav ul li a:hover { color: #5EB2E3; }

#travel-survey { background: #E6EFEB; }
#travel-survey h3 { color: #424242; }

#provide-feedback h3 { display: inline-block; margin: 0; }
#content #provide-feedback a { float: right; text-decoration: none !important; }

/* Schedule */

#project-timeline { background-image: url("../images/tree-bg2.jpg"); background-size: cover; background-position: center; }

#schedule-legend ul { list-style: none; padding: 0; }
#schedule-legend li { display: inline-block; margin-bottom: 24px; margin-right: 46px; }
#schedule-legend li:before { background: #5EB2E3; content: ""; display: inline-block; height: 32px; margin-right: 10px; vertical-align: middle; width: 42px; }
#schedule-legend li:nth-of-type(2):before { background: #FDBA17; }
#schedule-legend li:nth-of-type(3):before { background: #E06982; }

/* Resources */

#additional-documents ul { list-style: none; padding: 0; }
#additional-documents ul li a { border-bottom: 1px dotted #000; color: #000; display: block; padding: 8px 40px 16px 40px; position: relative; text-decoration: none !important; }
#additional-documents ul li a:before { background-image: url("../images/doc.png"); background-repeat: no-repeat; content: ""; height: 35px; left: 0; position: absolute; top: 4px; width: 25px; }
#additional-documents ul li a:after { background-image: url("../images/down-arrow.png"); background-repeat: no-repeat; content: ""; height: 30px; right: 0; position: absolute; top: 8px; width: 30px; }

/* Accordions */
.hdr-accordion-set { margin-bottom: 20px; }
.hdr-accordion h4 { font-size: 1.2em; margin: 0; }
.hdr-accordion button { background: transparent; color: #003764; }
.hdr-accordion-header { cursor: pointer; margin: 18px 0 0; padding: 10px 48px 10px 0; 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 { background: #003764; content: ""; height: 3px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); transition: transform .8s; width: 16px; }
.hdr-accordion-set.has-js .hdr-accordion-header:after { transform: translateY(-50%) rotate(270deg); }
.hdr-accordion-set.has-js .opened .hdr-accordion-header:after { transform: translateY(-50%) rotate(0deg); }
.hdr-accordion > div { background: transparent; padding: 1px 2%; }

/* Contact */

#contact-us { background-image: url("../images/tree-bg3.jpg"); background-size: 50% 100%; background-repeat: no-repeat; background-position: right; }

#project-contacts { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; padding: 0; }
#project-contacts li { background: #F2F2F2; border-radius: 12px; color: #003764; padding: 24px 34px; width: 48%; }
#project-contacts img { display: inline-block; vertical-align: middle; }
#project-contacts h3 { color: #0D4F7D; display: inline-block; font-size: 1.2em; font-weight: 700; margin: 0 0 0 6px; vertical-align: middle; }
#project-contacts span { display: block; line-height: 1.6em; margin-top: 24px; }
#project-contacts a { color: #003764; text-decoration: underline; }
#project-contacts a:hover { color: #000; }

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

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

@media screen and (max-width: 1470px) {
    #header-bottom img { height: 98px; }
    header nav li { margin-left: 24px; padding-right: 24px;  }
    header nav li a { font-size: 1em; }
}

@media screen and (max-width: 1240px) {
    #content > section { padding: 32px 6% 62px; }
    h3 { font-size: 1.7em; }
    h4 { font-size: 1.3em; }

    #announcement { font-size: .9em; padding: 8px 16px; }
    #announcement img { height: 16px;  }

    #header-banner { height: 450px; }
    #header-banner h2 { font-size: 2.8em; padding: 40px 44px 40px 6%; }
    #header-banner > div { width: 90%; }
    #header-banner > div p { font-size: 1.8em; }

    #header-top { padding: 6px 1.5% 6px 2%; }
    #translation-widget select { font-size: .9em; width: 180px; }
    #social-links img { height: 18px; }
    
    #header-bottom img { height: 78px; }
    header nav li { margin-left: 15px; padding-right: 15px;  }
    header nav li a { font-size: .9em; }

    #subpage-banner > div { padding: 0 5%; }
    #subpage-banner h2 { font-size: 2.4em; }
    #subpage-banner h2 img { height: 30px; }

    #footer-top { padding: 24px 3%; }
    #footer-top nav ul { margin-bottom: 32px; }
    #footer-top nav ul li { font-size: .9em; margin-left: 14px; padding-right: 14px; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 1.8em; margin: 16px 0; }
    h3 { font-size: 1.3em; margin: 24px 0 20px; }
    h4 { font-size: 1.1em; margin: 24px 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 { font-size: .9em; padding: 4px 10px; }

    #content > section { padding: 28px 6% 56px; }
    .row { display: block; }

    /* 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); }
    
    header nav { position: relative; }
    header nav ul { background-color: #003764; box-shadow: 2px 4px 8px -4px #000; margin-top: 8px; opacity: 0; position: absolute; right: 9999px; top: 100%; width: 220px; z-index: 1; }
    header nav li { border: 0; border-top: 1px solid #fff; display: block; margin: 0; padding: 8px 4px; text-align: center; width: 100%; }
    header nav li:last-of-type { border-top: 1px solid #fff; }
    .menu-opened header nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
    
    #header-banner { height: 370px; }
    #header-banner h2 { font-size: 2.2em; }

    #objectives li { width: 47%; }

    .meeting > div { width: 100%; }
    .meeting > div:last-of-type { margin-top: 14px; padding-left: 4%; }
    .meeting h4 { font-size: 1.2em; }
    .meeting h5 { font-size: 1em; }
    .meeting ul { margin: 0; }

    #content #provide-feedback a { display: block; float: none; margin-top: 8px; }
    
    #footer-top { padding: 24px 3%; }
    #footer-top nav ul { margin-bottom: 32px; }
    #footer-top nav ul li { font-size: .9em; margin-left: 14px; padding-right: 14px; }
    #footer-bottom { font-size: .9em; }
}

@media screen and (max-width: 768px) {
    #content > section { padding: 16px 8% 44px; }
    
    #translation-widget select { font-size: .75em; width: 80%; }

    iframe { padding: 6px 18px; }

    #header-banner { height: auto; padding-top: 28px; }
    #header-banner h2 { font-size: 1.8em; margin-top: 100px; padding: 28px 28px 28px 8%; position: static; }
    #header-banner > div { margin: 0 auto; padding: 24px 24px 0; position: static; transform: none; }
    #header-banner > div p { font-size: 1.3em; margin-top: 24px; }

    #subpage-banner { background: #035E33; display: block; margin: 0; }
    #subpage-banner > div { display: block; padding: 28px 28px 8px 7%; width: 100%; }
    #subpage-banner > div:before { display: none; }
    #subpage-banner > div > div { display: block; }
    #subpage-banner h2 { font-size: 1.7em; }
    #subpage-banner > img { width: 0; }

    #project-contacts li { width: 100%; }
    #project-contacts a { word-break: break-word; }

    #logos { margin: 56px 0 34px; }
    #logos img { height: 66px; margin: 14px 0 6px; }

    .big-img { border: 1px solid #ddd; overflow: auto; padding: 14px; }
    .big-img img { max-width: 8000%; width: 768px; }
    #schedule-legend li { margin-bottom: 4px; }
    #schedule-legend li:before { height: 20px; width: 32px; }

    .hdr-accordion h4 { font-size: 1em; }

    footer { text-align: center; }
    .map-text-section { display: block; width: 95%;}
    .map-text-section .map {max-width: 95%;}
    .map-text { display: block; width: 95%;}

    .carousel-caption-wrapper { max-width: 80%; height: auto;}
    .carousel-caption-content { display: block;}

}

@media screen and (max-width: 490px) {
    #announcement { font-size: .8em; }
    #header-top { display: block; padding: 10px 14px; text-align: center; }
    #social-links { float: none; margin-top: 8px; }
    
    #header-bottom { padding: 18px 4%; }
    #header-bottom img { height: 60px; }
    #header-banner h2 { font-size: 1.5em; padding-bottom: 22px; width: 100%; }

    #objectives { margin-top: 8px; }
    #objectives li { width: 100%; }

    .meeting > div h4 { font-size: 1.1em; padding-left: 6%; }
    .meeting h5 { font-size: .9em; }
    .meeting > div p { padding-left: 6%; }
    .meeting > div:last-of-type { padding: 6%; }

    #footer-top { display: block; }
    #footer-top > div { width: 100%; }
    #footer-top > div:first-of-type img { height: 76px; margin-bottom: 22px; }
    #footer-top > div:last-of-type { text-align: center; }
    #footer-top nav ul { font-size: .8em; margin-bottom: 14px; }
    #footer-bottom { display: block; text-align: center; }
    #footer-bottom p { margin-bottom: 10px; }



    .form-section {max-width: 95%; height: auto;}
    iframe {margin-bottom: 0;}

    .footer .alogo {display: inline-block; width: 100px; margin-right: 25px;}
    .footer .blogo {display: inline-block; width: 50px;}

}