html, 
body { color: #333; font-family: "Source Sans 3", sans-serif; font-size: 18px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth;}
.container { padding: 0; width: 100%; }

/* 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: #0E2E6C; font-size: 2.4em; font-weight: 700; margin: 26px 0; }
h3 { color: #4F4F4F; font-size: 1.75em; margin: 0 0 20px; font-weight: 600; }
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%; }

#announcement { align-items: center; background: #f6dd66; display: flex; gap: 18px; justify-content: center; padding: 20px 44px; text-align: center; }
#announcement img { width: 44px; }
#announcement p { font-size: 1.2em; font-weight: 700; line-height: 1.3em; margin: 0; }
#announcement a { color: #0E2E6C; }
#announcement a:hover { color: #031538; }

/* Header */
header { background-color: #333; color: #fff; display: flex; justify-content: space-between; padding: 28px 2%; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { display: inline-block; margin: 0; margin-left: 34px;  }
header nav li a { color: #fff; display: block; padding: 0; }
header nav li a:hover { color: #ddd; }

#translation-widget { display: block; margin-left: 1%; }
#translation-widget label { left: -9999px; position: absolute; }
#translation-widget select { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: .9em; }
#translation-widget option { color: #333; }
#google_translate_element { display: none; }

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

/* General Formatting */
#content > section { padding: 62px 12% 98px; }

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

.teal-box { background: #F3FAFF; }

/* Footer */
footer { background: #0A1F4A; color: #fff; }

#footer-btm { align-items: center; display: flex; justify-content: space-between; padding: 6px 12%; }
#footer-btm p { margin: 0; }
#footer-btm a { color: #fff; }
#footer-btm a img { margin-left: 6px; }
#footer-btm a:hover { color: #d7e6f1; }

/* Homepage */

#landing-page .collin-co { align-items: center; background: #0E2E6C; background-image: url("../images/Images/hero_back.jpg"); background-position: center; background-size: cover; display: flex; gap: 44px; padding: 80px 12%; position: relative; }
#landing-page .collin-co #translation-widget { left: 0; position: absolute; top: 12px; }
#landing-page .collin-co h1 { font-size: 3.8em; font-weight: 700; text-shadow: 0 3px 8px #000; text-transform: uppercase; }
#landing-page .collin-co h1 span { display: block; font-size: .5em; margin-top: 6px; text-transform: none; }
#landing-page .collin-co .logo { width: 280px; }

#landing-page .big-img { margin-top: 44px; }

#landing-page #study-legend { align-items: center; border: 1px solid #E0E0E0; display: flex; margin-top: 36px; padding: 16px 18px; }
#landing-page #study-legend h3 { font-size: 1.2em; margin: 0; }
#landing-page #study-legend p { margin: 0 0 0 28px; }
#landing-page #study-legend span { background: #E8E1F3; display: inline-block; height: 28px; margin-right: 6px; vertical-align: middle; width: 26px; }

#landing-page #project-objectives { text-align: center; }
#landing-page #project-objectives ul { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#landing-page #project-objectives ul li { color: #0E2E6C; font-size: 1.3em; font-weight: 700; line-height: 1.4em; width: 23%; }
#landing-page #project-objectives ul img { display: block; margin: 0 auto 14px; }

#landing-page #project-timeline { color: #7A121C; text-align: center; }
#landing-page #project-timeline h3 { background: #7a121c; border-radius: 60px; color: #fff; font-size: 1.3em; font-weight: 700; margin: 36px 0 46px; padding: 10px 14px 8px; position: relative; text-transform: uppercase; }
#landing-page #project-timeline ul { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
#landing-page #project-timeline ul li { font-size: 1.3em; line-height: 1.4em; margin: 0; padding: 22px 0; position: relative; width: 22%; }
#landing-page #project-timeline ul li:before { background: #7a121c; bottom: 100%; content: ""; height: 46px; left: 50%; position: absolute; transform: translateX(-50%); width: 4px; }
#landing-page #project-timeline ul li:after { background: #7a121c; border-radius: 12px; bottom: 100%; content: ""; height: 14px; left: 50%; position: absolute; transform: translateX(-50%); width: 14px; }
#landing-page #project-timeline ul li strong { display: block; font-size: 1.1em; text-transform: uppercase; }
#landing-page #project-timeline ul li img { display: block; margin: 0 auto 8px; }
#landing-page #stakeholder-coordination { color: #0E2E6C; margin: 0 auto; position: relative; width: 78%; }
#landing-page #stakeholder-coordination ul { padding-bottom: 92px; }
#landing-page #stakeholder-coordination ul li:before { background: #1b4694; bottom: auto; top: 100%; }
#landing-page #stakeholder-coordination ul li:after { background: #1b4694; bottom: auto; top: 100%; }
#landing-page #stakeholder-coordination h3 { background: #1B4694; bottom: 0; margin-bottom: 0; position: absolute; width: 100%; }
#landing-page #project-schedule h3:before,
#landing-page #project-schedule h3:after { background-image: url("../images/Icons/sched-arrow.png"); background-size: 100% 100%; background-repeat: no-repeat; content: ""; height: 24px; left: 4%; position: absolute; top: 13px; width: 26%; }
#landing-page #project-schedule h3:after { left: 72%; }

iframe[src*="arcgis"] { height: 780px; width: 100%; }

/************ 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: 1360px) {
    #content > section { padding: 32px 6%; }

    #landing-page .collin-co { padding: 64px 6% 56px; }
    #landing-page .collin-co h1 { font-size: 3.2em; }
    #landing-page .collin-co .logo { width: 240px; }
    
    #landing-page #project-objectives ul li { font-size: 1.1em; }
    #landing-page #project-objectives ul img { height: 80px; }
    
    iframe[src*="arcgis"] { height: 680px; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 1.8em; margin: 16px 0; }
    h3 { font-size: 1.5em; margin: 0 0 10px; }
    h4 { font-size: 1.4em; 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: 22px 6%; }
    .row { display: block; }

    .big-img { border: 1px solid #aaa; overflow: auto; width: 100%; }
    .big-img img { max-width: 8000%; width: 992px; }

    #landing-page .collin-co #translation-widget { top: 4px; }

    /* 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); }

    #announcement { gap: 12px; padding: 14px 22px; }
    #announcement img { width: 34px; }
    #announcement p { font-size: 1em; line-height: 1.3em; }

    #landing-page .collin-co { padding: 66px 6% 52px; }
    #landing-page .collin-co h1 { font-size: 2.4em; }
    #landing-page .collin-co .logo { width: 190px; }

    #landing-page #project-objectives ul { flex-wrap: wrap; }
    #landing-page #project-objectives ul li { font-size: 1em; line-height: 1.2em; width: 44%; }
    
    #landing-page #project-timeline h3 { font-size: 1em; }
    #landing-page #stakeholder-coordination { width: 100%; }
    #landing-page #project-timeline ul li { font-size: 1em; }
    #landing-page #project-schedule h3:before,
    #landing-page #project-schedule h3:after { background-size: cover; background-position: right; height: 14px; top: 12px; width: 14%; }
    #landing-page #project-schedule h3:after { left: 84%; }
        
    header { padding: 18px 14px 18px 20px; }
    header nav { position: relative; }
    header nav ul { background-color: #333; 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-top: 1px solid #fff; display: block; margin: 0; padding: 8px 4px; text-align: center; width: 100%; }
    .menu-opened header nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
    
    iframe[src*="arcgis"] { height: 780px; }
}

@media screen and (max-width: 768px) {
    #content > section { padding: 16px 8% 32px; }
    
    #landing-page .collin-co { padding: 68px 8% 52px; }
    #landing-page .collin-co h1 { font-size: 2em; }
    #landing-page .collin-co .logo { width: 120px; }

    #landing-page #project-timeline ul li:before,
    #landing-page #project-timeline ul li:after,
    #landing-page #project-schedule h3:before,
    #landing-page #project-schedule h3:after { display: none; }
    #landing-page #stakeholder-coordination h3 { position: static; }
    #landing-page #project-schedule h3 { margin-bottom: 14px; }
    #landing-page #project-timeline ul { padding: 0; }
    #landing-page #project-timeline ul { flex-wrap: wrap; }
    #landing-page #project-timeline ul li { font-size: .9em; width: 46%; }

    #footer-btm { display: block; padding: 12px; text-align: center; }
    #footer-btm p { margin-bottom: 7px; }
}

@media screen and (max-width: 550px) {
    #landing-page .collin-co { display: block; text-align: center; }
    #landing-page .collin-co .logo { margin-top: 18px; width: 86px; }
}

/* CR */

.local-nav {
    display: block;
    border-bottom: 1px solid #DAE3F0;
    background: #F5F9FF;
    padding: 10px 12%;
    color: #0E2E6C;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.local-nav .callout {
    color:  #0E2E6C;
    font-size: 1.125em;
    font-style: normal;
    font-weight: 700;
    margin-right: 20px;
}
 
.local-nav .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    list-style: none;
    padding: 0;
}


.local-nav .nav-item {
    margin: 0;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #0E2E6C;
}


.local-nav .nav-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.local-nav .nav-item .nav-link {
    color:  #0E2E6C;
    font-size: 1.125em;
    font-style: normal;
    font-weight: 500;
}

@media screen and (max-width: 550px) {
    .local-nav .callout {
        margin-bottom: 10px;
    }
    .local-nav .nav-item {
    padding: 0;
    border: 0;
    width: 100%;
    margin-bottom: 10px;
}


}

.local-nav .nav-item .nav-link:hover {
    text-decoration: underline;
}

.link-list {
    list-style: none;
    padding: 0;
}

.link-list a {
    display: block;
    position: relative;
    color: #0E2E6C;
    font-size: 1.375em;
    padding-left: 40px;
}

.link-list a:hover {
    text-decoration: underline;
    color: #020f29;
}

.link-list a::after {
    font-family: "Font Awesome 7 Pro";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-list a.document::after {
    content: '\f15b';
    font-size: 27px;
    font-weight: 400;
}

.link-list a.external::after {
    content: '\f08e';
    font-size: 27px;
    font-weight: 400;
}


.row.with-padding {
    gap: 0;
}

.row.with-padding > div {
    padding-right: 15px !important; 
    padding-left: 15px !important;
}

.hero-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #C9D8F4;
    font-size: 1.15rem;
    margin-top: 30px;
}

.hero-link:hover {
    color: #a5b1c7;;
    text-decoration: underline;
}

.hero-link .icon {
    width: 25px;
    height: auto;
}

@media screen and (min-width: 992px) {
    .hero-link {
        font-size: 1.375rem;
    }

    .hero-link .icon {
        width: 36px;
        height: auto;
    }
}