/* Proxima Nova font */

@import"https://use.typekit.net/odl0rlh.css";

/* Variables */

:root {
    --color-main: #0054A4;
    --color-main-light: #B2CEE5;
    --color-main-lighter: #E5EEF6;
    --color-transportation: #E82011;
    --color-transportation-light: #F8B2AE;
    --color-transportation-lighter: #fdeae9;
    --color-parks: #78A22F;
    --color-parks-light: #ccddb2;
    --color-parks-lighter: #f1f6ea;
    --color-water: #009AC7;
    --color-water-light: #a0daea;
    --color-water-lighter: #e5f5f9;
    --color-landuse: #6B1F7C;
    --color-landuse-light: #c8afd3;
    --color-landuse-lighter: #f0e9f3;
    --color-housing: #C6962C;
    --color-housing-contrast: #755a0f;
    --color-housing-light: #ead8b0;
    --color-housing-lighter: #f9f4e9;
    --color-cyan: #60C8E9;
    --color-sky: #D9F0F7;
    --color-sky-light: #ecf7fb;
    --color-sky-lighter: #f7fcfe;
    --color-navy: #002B5C;
    --color-navy-vibrant: #002e6e;
    --color-navy-light: #33557d;
    --color-navy-lighter: #7f95ad;
    --color-navy-lightest: #ccd5de;
    --color-gray-dark: #7A868F;
    --color-gray-light: #e7e7e7;
    --color-theme: var(--color-main);
    --color-theme-light: var(--color-main-light);
    --color-theme-lighter: var(--color-main-lighter);
    --text: var(--color-navy);
    --bs-dark: var(--color-navy);
    --bs-dark-rgb: 0, 43, 92;
    --bs-link-color-rgb: 0, 43, 92;
    --bs-link-hover-color-rgb: 0, 84, 164;
    --bs-font-sans-serif: "proxima-nova", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-border-radius: 1em;
    --bs-border-color: var(--text);
    --url-badge-water: url("/css/imagine2050/img/2050BadgeESBlueOnWhite.svg");
    --url-badge-landuse: url("/css/imagine2050/img/2050BadgePurpleOnWhite.svg");
    --url-badge-housing: url("/css/imagine2050/img/2050BadgeGoldOnWhite.svg");
    --url-badge-transportation: url("/css/imagine2050/img/2050BadgeRedOnWhite.svg");
    --url-badge-parks: url("/css/imagine2050/img/2050BadgeGreenOnWhite.svg");
    --url-badge-default: url("/css/imagine2050/img/2050BadgeBlueOnWhite.svg");
}

.theme-housing {
    --color-theme: var(--color-housing);
    --color-theme-contrast: var(--color-housing-contrast);
    --color-theme-light: var(--color-housing-light);
    --color-theme-lighter: var(--color-housing-lighter);
    --url-badge: var(--url-badge-housing);
}

.theme-transportation {
    --color-theme: var(--color-transportation);
    --color-theme-contrast: var(--color-transportation);
    --color-theme-light: var(--color-transportation-light);
    --color-theme-lighter: var(--color-transportation-lighter);
    --url-badge: var(--url-badge-transportation);
}

.theme-parks-trails {
    --color-theme: var(--color-parks);
    --color-theme-contrast: var(--color-parks);
    --color-theme-light: var(--color-parks-light);
    --color-theme-lighter: var(--color-parks-lighter);
    --url-badge: var(--url-badge-parks);
}

.theme-land-use {
    --color-theme: var(--color-landuse);
    --color-theme-contrast: var(--color-landuse);
    --color-theme-light: var(--color-landuse-light);
    --color-theme-lighter: var(--color-landuse-lighter);
    --url-badge: var(--url-badge-landuse);
}

.theme-water {
    --color-theme: var(--color-water);
    --color-theme-contrast: var(--color-water);
    --color-theme-light: var(--color-water-light);
    --color-theme-lighter: var(--color-water-lighter);
    --url-badge: var(--url-badge-water);
}

.theme-default {
    --color-theme: var(--color-main);
    --color-theme-light: var(--color-main-light);
    --color-theme-lighter: var(--color-main-lighter);
    --url-badge: var(--url-badge-default);
}

/* Body and general text */

html {
    position: relative;
    height: 100%;
}

body {
    height: 100%;
    color: var(--text);
    font-size: 18px;
    line-height: 1.6;
}

.container .container {
    padding-left: 0;
    padding-right: 0;
}

.full-width {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    overflow-x: hidden;
}

/* Footer */


.footer-wrapper {
    position: sticky;
    top: 100vh;
    width: 100%;
    background-color: #002a5c;
}


.pre-footer .footer-overlay {
    margin-top: 2rem;
    background-image: url(/css/imagine2050/img/LayerOverlay.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(5vw + 90px);
    background-color: #ffffff;
    text-align: center;
    position: relative;
}

.pre-footer .footer-overlay img {
    max-height: 95%;
    position: absolute;
    margin: auto;
    /*top: 0;*/
    left: 0;
    right: 0;
    bottom: 0;

}

footer {
    padding: 2rem 2rem;
    background-color: #002a5c;
    width: 100%
}

footer, footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover, footer a:focus {
    color: #61c8ea;
}

footer h3 {
    color: #61c8ea;
}
footer ul {
    list-style: none;
    padding-left: 0;
}

    footer ul li {
        margin: 1rem 0;
    }

.footer-small {
    font-size: 0.85rem;
}

footer .social-stack img {
    max-height: 2.8rem;
    display: block;
    padding: 0.25rem;
}

footer .social-stack a:after {
    content: "";
}

footer .social-stack a:hover {
    opacity: 0.7;
}

@media (max-width: 991px) {
    footer .social-stack {
        margin: 1rem 0;
    }

    footer .social-stack img {
        max-height: 2.8rem;
        display: inline-block;
        padding: 0.25rem;
    }
}

footer ul.plan-icons li a {
    padding: 0.2rem 0rem;
    margin-left: 2.7rem;
}

    footer ul.plan-icons li a:before {
        content: var(--url-badge);
        display: inline-block;
        height: 1rem;
        width: 1rem;
        margin-right: 0.7rem;
        margin-left: -2rem;
    }




/* dev staging live site banner */

#devtestsite {
    /*display: none;*/
    height: 17px;
    font-size: 10px;
    color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    padding: 1px 4px;
    background-color: #000000;
    transition: background-color 100ms;
    transition: color 300ms;
}

    #devtestsite.localhost {
        display: block;
        background-color: #423bad;
        color: #fff;
    }

    #devtestsite.devsite {
        display: block;
        background-color: darkorange;
        color: #fff;
    }

    #devtestsite.stagingsite {
        display: block;
        background-color: darkred;
        color: #fff;
    }

    #devtestsite.livesite {
        display: block;
        background-color: #2ab777;
        color: #fff;
    }

    #devtestsite.localhost:before {
        content: "YOU ARE ON LOCALHOST";
    }

    #devtestsite.devsite:before {
        content: "YOU ARE ON THE DEV SITE";
    }

    #devtestsite.stagingsite:before {
        content: "YOU ARE ON THE STAGING SITE";
    }

    #devtestsite.livesite:before {
        content: "YOU ARE ON THE LIVE SITE";
    }

/* Skip to Content */

.skip a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    background: #e00000;
    outline: 0;
    z-index: 10999;
    height: auto;
    width: auto;
    padding: 7px;
    margin: 3px;
    color: #ffffff;
}

/* clearfix */

.clearfix:after, section:after {
    content: "";
    clear: both;
    display: table;
}

/* scroll to top */

.scroll-to-top {
    display: block;
    position: fixed;
    bottom: 10px;
    right: -200px;
}

.scroll-to-top.show {
    bottom: 10px;
    right: 18px;
}

.scroll-to-top a {
    color: white;
    line-height: 40px;
    padding: 10px 15px;
    background-color: #002a5c;
    opacity: 0;
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
    border: 1px solid #999;
    border-radius: var(--bs-border-radius);
    text-decoration: none;
}

.scroll-to-top.show a {
    opacity: 0.7;
}

.scroll-to-top a:hover, .scroll-to-top a:focus {
    text-decoration: underline;
    opacity: 1.0;  
    border-width: 2px;
    padding: 9px 14px;
}

/* Met Council banner */

.met-council-header {
    background-color: #e9e9e9;
    padding: 0.2rem 0;
    text-align: left;
    font-size: 12px;
}

.met-council-header img {
    max-height: 23px;
    margin-top: -5px;
}

/* logo */

.left-logo {
    position: relative;
    margin-top: -50px;
    z-index: 1;
    border-radius: 0.375rem;
}

/* top nav */

.top-nav {
    /*padding: 1rem;*/
}


    .top-nav a {
        display: inline-block;
        padding: 2rem 0.7rem;
        font-size: 1.2rem;
        font-weight: 800;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text);
    }

    @media (max-width: 1200px) {
        .top-nav a {
            padding: 2rem 0.5rem;
        }
    }

    .top-nav a:hover, .top-nav a:focus {
        opacity: 0.7;
        text-decoration: underline;
    }

    .top-nav a.top-nav-home {
        padding: 0rem;
        font-size: 1.7rem;
        padding-top: 0px;
    }

        .top-nav a.top-nav-home img {
            max-height: 40px;
            margin-right: 0.4rem;
            vertical-align: middle;
            margin-top: 1.6rem;
            border-radius: 0.2rem
        }

    .top-nav a.current {
        text-decoration: underline;
    }

    .top-nav input {
        display: none;
    }

    .top-nav button {
        margin-left: 2rem;
    }

    .navbar-toggler {
            margin: 0.5rem 0;
    }

    @media (max-width: 992px) {
        .top-nav a.top-nav-home img {
            margin: 0.5rem 0;
        }
    }

.top-nav a.dropdown-toggle[aria-expanded="true"], .top-nav a.dropdown-toggle[aria-expanded="true"]:focus {
    /*background-image: url('/css/imagine2050/img/mega-menu-gradient.png');*/
    background: linear-gradient(to top,
        var(--color-navy-vibrant) 0%, var(--color-navy-vibrant) 20%,
        var(--color-navy-light) 20%, var(--color-navy-light) 40%,
        var(--color-navy-lighter) 40%, var(--color-navy-lighter) 60%,
        var(--color-navy-lightest) 60%, var(--color-navy-lightest) 80%,
        #ffffff 80%
    ) bottom / 100% 50% no-repeat;
    opacity: 1;
    transition: opacity ease-in-out 0.1s;
    text-decoration: none;
}

/* mega nav */

.mega-nav-wrapper {
    position: relative;
}

.mega-nav {
    padding: 1rem 0 0;
    background: var(--color-navy-vibrant);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.mega-nav a {
    display: inline-block;
    padding: 0.5rem 3rem 0.5rem 0.7rem;
    font-size: 1.8rem;
    line-height: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

    .mega-nav a.right-arrows:after {
        content: "";
        background-image: url("/css/imagine2050/img/RightArrows3WhiteUI.svg");
        background-repeat: no-repeat;
        display: block;
        height: 1.4rem;
        margin: 0.3rem 0 0.7rem;
    }

    .mega-nav a:hover, .mega-nav a:focus {
        opacity: 0.7;
    }

    .mega-nav a.current {
        text-decoration: underline;
    }

.mega-nav .mega-nav-single-line {
    padding: 0.5rem 0rem 1rem;
    text-align: center;
}

.mega-nav .mega-nav-single-line a {
    padding: 0.5rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: normal;
    text-transform: none;
}

    .mega-nav .mega-nav-single-line a:last-child {
        border-right: none;
    }

.mega-nav-divider {
    display: inline-block;
    height: 1rem;
    /*margin-bottom: -0.5rem;*/
    border-right: 1px solid #ffffff;
}

@media (max-width: 991px) {
    .mega-nav .mega-nav-single-line a {
        display: block;
    }
    .mega-nav-divider {
        display: none;
    }
}

.mega-nav ul {
    list-style-type: none;
    padding-left: 0;
}

    .mega-nav ul li a {
        font-size: 1.25rem;
        margin-left: 0;
        text-transform: none;
        font-weight: normal;
        padding: 0.2rem 0.7rem;
    }

    .mega-nav ul {
        margin-left: 0;
    }
    .mega-nav ul.plan-icons li a {
        padding: 0.2rem 0rem;
        font-size: 1.5rem;
        line-height: 2rem;
        margin-left: 2.7rem;
        text-transform: uppercase;
        font-weight: 800;
    }

        .mega-nav ul.plan-icons li a:before {
            content: var(--url-badge);
            display: inline-block;
            height: 1.2rem;
            width: 1.2rem;
            margin-right: 0.7rem;
            margin-left: -2rem
        }


/* mobile nav */

.mobile-nav {
    position: absolute;
    width: 100%;
    z-index: 1;
}

.mobile-nav .accordion-body {
    padding: 0;
}

.mobile-nav ul.nav-submenu {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.mobile-nav .submenu-item {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 0.5em 1em 0.5rem 1.5rem;
    border-bottom: 1px solid #ddd;
}

    .mobile-nav .submenu-item:hover, .mobile-nav .submenu-item:focus {
        background-color: #efefef;
    }

    .mobile-nav .submenu-item.current{
        background-color: #efefef;
        position: relative;
    }

        .mobile-nav .submenu-item.current:before,
        .mobile-nav .submenu-item:hover:before,
        .mobile-nav .submenu-item:focus:before {
            font-family: "Font Awesome 6 Free";
            content: "\f3c5";
            color: var(--color-navy);
            font-size: 1em;
            position: absolute;
            left: 0.4rem;
            top: 0.5rem;
            color: #4b65af;
        }
.mobile-nav button {
    margin-left: 0;
    border-top: 1px solid var(--color-main);
}

.mobile-nav .accordion {
    margin-bottom: 0;
}

.mobile-nav .accordion-body {
    /*background-color: #efefef;*/
}

.mobile-nav .accordion-button {
    padding: 1em 1em;
}

.mobile-nav .accordion-item
.mobile-nav .accordion-button,
.mobile-nav .accordion-item:first-of-type,
.mobile-nav .accordion-item:last-of-type,
.mobile-nav .accordion-item:first-of-type>.accordion-header .accordion-button,
.mobile-nav .accordion-item:last-of-type>.accordion-header .accordion-button
{
    border-radius: 0!important;
}

.mobile-nav .submenu-item {
    padding: 1rem 1rem 1rem 1.8rem;
}

.mobile-nav .accordion-button.collapsed {
    /*background-color: #bfd2f2;*/
}

.mobile-nav .accordion-button:not(.collapsed) {
    /*background-color: #bfd2f2;*/
}

.mobile-nav .current.accordion-button.collapsed {
    /*background-color: #7bb2de;*/
    /*color: #ffffff;*/
}

.mobile-nav .current.accordion-button:not(.collapsed) {
    /*background-color: #7bb2de;*/
    /*color: #ffffff;*/
}


.metrogis-nav .accordion-body {
    padding: 0;
}


/* Breadcrumb */

.breadcrumb {
    --bs-breadcrumb-divider: '\002013';
    --bs-breadcrumb-item-padding-x: 0.35em;
    font-size: 14px;
}

/* Block spacing */

.space-above-small {
    padding-top: 0.67rem;
}

.space-below-small {
    padding-bottom: 0.67rem;
}

.space-above-medium {
    padding-top: 1rem;
}

.space-below-medium {
    padding-bottom: 1rem;
}

.space-above-large {
    padding-top: 1.5rem;
}

.space-below-large {
    padding-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .space-above-small {
        padding-top: 1rem;
    }

    .space-below-small {
        padding-bottom: 1rem;
    }

    .space-above-medium {
        padding-top: 2rem;
    }

    .space-below-medium {
        padding-bottom: 2rem;
    }

    .space-above-large {
        padding-top: 3rem;
    }

    .space-below-large {
        padding-bottom: 3rem;
    }
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
}

.h1, h1 {
    /*font-size: calc(1.375rem + 1.5vw);*/
    font-size: calc(1.25rem + 1vw);
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid var(--text);
    margin-bottom: 1rem;
}

.block-list > section.rich-text:not(.block-bg):not(:first-child) h1,
.block-list > section.rich-text h1:not(:first-child),
.umb-rte h1:not(:first-child) {
    margin-top: 2rem;
}

@media (min-width: 1200px) {
    .h1, h1 {
        /*font-size:2.5rem;*/
        font-size: 2rem;
    }

    .block-list > section.rich-text:not(.block-bg):not(:first-child) h1,
    .block-list > section.rich-text h1:not(:first-child),
    .umb-rte h1:not(:first-child) {
        margin-top: 3rem;
    }
}

h1.h1-no-rule,
.h1.h1-no-rule {
    border-bottom: none;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-transform: none;
}

h1.text-theme,
.h1.text-theme {
    border-bottom-color: var(--color-theme);
}

.h2, h2 {
    /*font-size: calc(1.325rem + .9vw);*/
    font-size: calc(1.22rem + .6vw);
    font-weight: 800;
}

.block-list > section.rich-text:not(.block-bg):not(:first-child) h2,
.block-list > section.rich-text h2:not(:first-child),
.umb-rte h2:not(:first-child) {
    margin-top: 1.5rem;
}

@media (min-width: 1200px) {
    .h2, h2 {
        /*font-size:2rem;*/
        font-size: 1.67rem;
    }

    .block-list > section.rich-text:not(.block-bg):not(:first-child) h2,
    .block-list > section.rich-text h2:not(:first-child),
    .umb-rte h2:not(:first-child) {
        margin-top: 2rem;
    }
}

.h3, h3 {
    /*font-size: calc(1.3rem + .6vw);*/
    font-size: calc(1.2rem + .4vw);
    font-weight: 800;
}

.block-list > section.rich-text:not(.block-bg):not(:first-child) h3,
.block-list > section.rich-text h3:not(:nth-child(-n+2)),
.umb-rte h3:not(:first-child) {
    margin-top: 1.25rem;
}

@media (min-width: 1200px) {
    .h3, h3 {
        /*font-size:1.75rem;*/
        font-size: 1.5rem;
    }

    .block-list > section.rich-text:not(.block-bg):not(:first-child) h2,
    .block-list > section.rich-text h2:not(:first-child),
    .umb-rte h2:not(:first-child) {
        margin-top: 1.75rem;
    }
}

.h4, h4 {
    /*font-size: calc(1.275rem + .3vw);*/
    font-size: calc(1.18rem + .2vw);
    font-weight: 800;
}

.block-list > section.rich-text:not(.block-bg):not(:first-child) h4,
.block-list > section.rich-text h4:not(:first-child),
.umb-rte h4:not(:first-child) {
    margin-top: 1.25rem;
}

@media (min-width: 1200px) {
    .h4, h4 {
        /*font-size:1.5rem;*/
        font-size: 1.33rem;
    }

    .block-list > section.rich-text:not(.block-bg):not(:first-child) h4,
    .block-list > section.rich-text h4:not(:first-child),
    .umb-rte h4:not(:first-child) {
        margin-top: 1.5rem;
    }
}

.h5, h5 {
    /*font-size: 1.25rem;*/
    font-size: 1.167rem;
    font-weight: 800;
}

.block-list > section.rich-text:not(.block-bg):not(:first-child) h5,
.block-list > section.rich-text h5:not(:first-child),
.umb-rte h5:not(:first-child) {
    margin-top: 1.25rem;
}

.h6, h6 {
    font-size: 1rem;
    font-weight: 800;
}

.block-list > section.rich-text:not(.block-bg):not(:first-child) h6,
.block-list > section.rich-text h6:not(:first-child),
.umb-rte h6:not(:first-child) {
    margin-top: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

blockquote {
    margin: 0 0 1rem;
    background-color: var(--bs-primary-bg-subtle);
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

.row-border-bottom {
    border-bottom: 1px solid var(--text);
}

.h1-policy {
    margin-bottom: 0;
    border-bottom: none;
}

.p-policy, .p-reference-material {
    font-size: 2em;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
}

.p-reference-material  {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--text);
}

.policy-callout {
    font-size: 1.2em;
    font-weight: 500;
    color: #666;
}

.policy-list-column {
    /*background-color: var(--color-theme-lighter);*/
}

.policy-list-column h2 {
    margin: 1rem 0;
}

.policy-list-column li {
    margin-bottom: 0.5rem;
}

.policy-list-column a {
    text-decoration: none;
}

.policy-list-column a:hover, .policy-list-column a:hover {
    text-decoration: underline;
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 1.5rem;
    }
}

#maincontent.green h1,
#maincontent.green h2,
#maincontent.green h3,
#maincontent.green h4 {
    color: #26558b;
    color: #ffffff;
    background-color: #588d2d;
    padding: 0rem 0.5rem 0.2rem;
}


/* Text Styles */

.text-muted {
    color: var(--color-gray-dark);
}

.text-theme {
    color: var(--color-theme);
}

.text-smaller {
    font-size: 0.88em;
}

.text-tiny {
    font-size: 0.8em;
}

.text-inlinehead {
    font-size: 1.1rem;
    font-weight: 800;
}

/* Lists */

ul.ul-spaced li {
    margin-bottom: 1rem;
}



/* External Links */

a[target="_blank"]:after {
    /*content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKBAMAAABPkMOvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAGFBMVEUAAAAAZv8zmcxmmcz///8AZsyZzP8AAABoIiSuAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAHdElNRQfoBhQPNTDpTLMAAAAAP0lEQVQI12NgAAJGQUEBEM2g7OICYTCqgBmsoYEpEIaLmJsKmOGYkigMZriZiTIxgKUSXRkgDBcoIzQ0lIEBAEPZCC+XKOGxAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI0LTA2LTIwVDE1OjQ5OjAyKzAwOjAwQq51IgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNi0yMFQxNTo0OTowMiswMDowMDPzzZ4AAAAASUVORK5CYII=);*/
    content: ""
}


a[target="_blank"].no-external-icon:after {
    content: ""
}


/* Buttons */

.btn {
    --bs-btn-border-radius: 0.75em;
}

.btn.btn-primary {
    color: var(--text);
    background-color: var(--color-cyan);
    border: none;
    font-weight: 700;
}

.btn.btn-imagine2050 {
    display: inline-block;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem ;
    font-size: 1.1rem;
    line-height: 2rem;
    font-weight: 800;
    text-decoration: none;
    color: #ffffff;
    background-color: var(--text);
}

    .btn.btn-imagine2050.right-arrows:after {
        content: "";
        background-image: url(/css/imagine2050/img/RightArrows3WhiteUI.svg);
        background-repeat: no-repeat;
        display: inline-block;
        height: 1rem;
        width: 2.5rem;
        background-position-y: center;
        margin-left: 1rem;
    }

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    color: var(--text);
    background-color: var(--color-sky);
    border: none;
}

.btn.btn-outline-primary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--color-navy);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--color-sky);
    --bs-btn-hover-border-color: var(--color-navy);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--color-cyan);
    --bs-btn-active-border-color: var(--color-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-navy-light);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-navy-light);
}

.btn-xl {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.5rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

@media (min-width: 1200px) {
    .btn-xl {
        --bs-btn-padding-x: 1.5rem;
        --bs-btn-font-size: 2rem;
    }
}


/* Images */

img {
    max-width: 100%;
    height: auto;
}

a[data-lity] img:hover {
    cursor: zoom-in;
}

.img-display {
    display: none;
    width: 75%;
    margin: 1rem 0 1rem 0.7rem;
    border-radius: 2rem;
}

img.content-and-image-image {
    border-radius: 2rem;
}

.nowrap {
    white-space: nowrap;
}

/* Nav Bar */

.navbar-brand img {
    margin: -9px -7px -5px -7px
}

.navbar {
    --bs-navbar-padding-y: 0;
    background-color: #ffffff;
}


#search {
    margin-top: 1.4rem;
}

@media (max-width: 1400px) and (min-width: 1200px) {
    #search {
        max-width: 215px;
    }
}


/* Hero Image */

.hero img {
    width: 100%;
}


/* Video Container */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }


/* Expandable Content or Accordion */

.accordion {
    margin-bottom: 8px;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
}

.accordion-header {
    margin-top: 0;
}

.accordion-button {
    font-weight: bold;
}

    .accordion-button.collapsed {
        background-color: var(--color-sky);
    }

        .accordion-button.collapsed:hover,
        .accordion-button.collapsed:active,
        .accordion-button:not(.collapsed) {
            background-color: var(--color-cyan);
        }

.accordion-body {
    border: 1px solid var(--color-cyan);
    border-top: none;
}


.accordion-button.accordion-button::after {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");*/
  background: url("/css/imagine2050/img/DownArrowCircleUI.svg");
  height: 2em;
  width: 2em;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
  transition: all 0.5s;
}

.accordion .accordion .accordion-button {
    font-size: calc(0.8rem + .2vw);
    font-weight: bold;
    background-color: #e2e8f1;
    padding: 0.8rem 1.2rem;
}

.accordion .accordion .accordion-button.collapsed {
    background-color: #e2e8f1;
}

.accordion .accordion .accordion-button:not(.collapsed) {
    background-color: #d0d6df;
}

/* Block backgrounds */

.block-bg {
    padding: 1rem;
    margin-bottom: 1rem;
/*    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    overflow-x: hidden;*/
}

    .block-bg > .container > p:last-child {
        margin-bottom: 0;
    }

.block-bg-blue {
    background-color: var(--color-main-lighter);
}

.block-bg-gray {
    background-color: var(--color-gray-light);
}


/* Card blocks */

.card {
    --bs-card-border-radius: 2rem;
    --bs-card-border-width: 2px;
    --bs-card-border-color: var(--color-theme);
    --bs-card-bg: var(--color-theme-lighter);
    width: 100%;
    overflow: hidden;
    margin: 0 0.25rem 1rem;
}

.card-footer {
    border-top: 0px;
    background-color: var(--color-theme-lighter);
}

    .card.card-policy {
        --bs-card-border-width: 2px;
        --bs-card-border-color: var(--color-theme);
        --bs-card-bg: transparent;
        font-size: 1.1rem;
        font-weight: 800;
    }

    .card.card-link.card-policy .card-body {
        padding-bottom: 1rem;
    }

    .card.card-policy .policy-plan-label {
        margin-right: 2rem;
        margin-bottom: 0.2rem;
        text-align: right;
        font-size: 0.9rem;
        color: var(--color-theme-contrast);
        --bs-card-bg: transparent;
        font-weight: 800;
    }

    .card.card-chapter {
        --bs-card-bg: var(--color-theme-lighter);
        --bs-card-border-width: 0;
    }

    .card.card-objective {
        --bs-card-border-width: 2px;
        --bs-card-border-color: var(--color-theme);
        --bs-card-bg: transparent;
        font-size: 1.167rem;
        font-weight: 800;
    }

        .card.card-objective .card-body {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .card.card-objective .plan-objective-label {
            margin-bottom: 0.2rem;
            font-size: 0.9rem;
            color: var(--color-theme-contrast);
            font-weight: 800;
            text-align: center;
        }

    .card.card-research {
        --bs-card-border-width: 2px;
        --bs-card-border-color: var(--color-theme);
        font-size: 1.1rem;
        /*background-color: var(--color-gray-light);*/
        text-align: center;
    }

        .card.card-research .material-type-icon {
            margin-bottom: 0.7rem;
        }

            .card.card-research .material-type-icon img {
                height: 2rem;
                width: 2rem;
            }

        .card.card-research .card-title {
            font-size: 1.33rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .card.card-research .card-text {
            line-height: 1.25rem;
        }

    .card.card-chapter  .card-title {
            font-size: 1.33rem;
            font-weight: 800;
            line-height: 1.2;
        }


    .card.card-link {
        transition-duration: 0.2s;
        overflow: hidden;
    }

        .card.card-link:hover {
            /*opacity: 0.9;*/
            transform: scale(1.03);
            /*box-shadow: #ddd 0 0 15px;*/
        }

        .card.card-link a:active, .card.card-link a:focus {
            background-color: var(--color-theme-light);
        }

        .card.card-link a {
            text-decoration: none;
            color: inherit;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .card.card-link .card-body {
            /*margin-right: 0.5rem;*/
            padding: 1.5rem 2rem 2rem;
            /*background-image: url(/css/imagine2050/img/chevron-right-gray.svg);*/
            background-repeat: no-repeat;
            background-position-y: center;
            background-position-x: right;
        }


/* Search Results */

.search-results {
    overflow: hidden;
}

.search_result {
    margin-bottom: 1rem;
}

.search-result-link {
    font-weight: bold;
}

.search-result-summary {
    font-size: 0.9rem;
    padding: 0.5rem 3rem;
}


/* chapter layout  */

.chapter-link {
    display: inline-block;
    /*font-style: italic;*/
    font-weight: bold;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

#sibling-nav {
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

.related-content {
    background-color: var(--color-sky);
}

.related-content-inner {
    padding: 1.5rem;
}

@media (max-width: 575px) {
    .related-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        float: none;
    }
}

.related-content .dropdown {
    margin-bottom: 1rem;
}

.related-content .dropdown-toggle {
    font-style: italic;
}

.related-content .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--color-main);
}

.related-content .chapter-nav button {
    width: 100%;
    margin: 0.2rem 0 1rem;
}

.related-content .chapter-nav li .current {
    font-weight: bold;
}

.related-content ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin-bottom: 2rem;
}

.related-content li {
    margin-top: 0.75rem;
    line-height: 1.25rem;
}

.related-content a {
    text-decoration: none;
    color: var(--text);
}

.related-content a:hover, .related-content a:focus {
    text-decoration: underline;
}

.related-content .chapter-nav button {
    width: 100%;
    margin: 0.2rem 0 1rem;
}

.related-content .chapter-nav li .current {
    font-weight: bold;
}

.related-siblings option.current {
    font-weight: 800;
}

.goals-list {
    margin-bottom: 1rem;
}

.goal-link {
    display: inline-block;
    font-style: italic;
    /*margin-top: 1rem;*/
    margin-right: 1rem;
}

ul.related-chapters {
    padding-left: 0;
    /*background-color: #eee;*/
    padding-top: 0.5rem;
}


ul.research-files  {
    padding-left: 0;

}
ul.research-files li {
    display: inline-block;
    margin-right: 1rem
}

.research-related a:after {
    content: ",";
}

.research-related a:last-child:after {
    content: "";
}

.research-header {
    margin: 2rem 0;
    padding: 1rem 0;
    background-color: var(--color-gray-light);
}

.research-filters {
    /*margin-bottom: 1rem;*/
    /*padding: 1rem 0;*/
    background-color: var(--color-main-lighter);
}

.research-filters-inner {
    display: flex;
    justify-content: center;
}

.research-filter-item {
    margin-right: 1rem;
}

@media (max-width: 991px) {
    .research-filters-inner {
        display: block;
    }
    .research-filters-inner > div {
        margin-bottom: 0.3rem
    }
}

.no-reference-results {
    display: none;
    text-align: center;
    padding: 2rem 0 7rem;
    width: 100%;
}

.research-related {
    display: flex;
}

.research-related-column {
    padding-right: 2rem;
    margin-right: 2rem;
    border-right: 1px solid var(--text);
}

@media (max-width: 991px) {
    .research-related {
        flex-direction: column;
    }
    .research-related-column {
        border-right: none;
    }   
}

.research-related-column:last-child, .research-related-column:nth-last-child(2) {
    border-right: none;
}

.research-plan-link {
    text-align: right;
}

.research-related ul {
    list-style-type: none;
    padding-left: 0;
    max-height: 12rem;
    overflow-y: auto;
/*      --mask: linear-gradient(to bottom, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 80%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 100% repeat-x;
  
  -webkit-mask: var(--mask); 
  mask: var(--mask);*/
  
}

    @media (max-width: 991px) {
        .research-related ul {
            max-height: revert;
        }
    }

.research-related li {
    margin-top: 0.75em;
}

.research-related li a {
    text-decoration: none;
    color: var(--text);
}

.research-related li a:hover {
    text-decoration: underline;
}

.definition {
    padding-left: 3.7rem;
    margin: 1rem 0;
    background: url('/css/imagine2050/img/QuestionMarkCircle.svg') no-repeat left center;
    background-size: 2.5rem 2.5rem;
}

.definition .question {
    font-weight: 800;
    font-size: 1.2rem;
}

/* Content and Image Block */

/* Content cleanup */
/*
a[href^=http] {
    background-color: yellow;
}
a[href^=mailto] {
    background-color: yellow;
}
a[href$='.pdf'] {
    background-color: yellow;
}

a[target="_blank"] {
    background-color: lightgreen;
}

u, u a {
    background-color: orange!important;
}
*/

/* groovy */

.groovy {
    width: 100%;
    --groovy-size: 10px;
}

.groovy-callout {
    background-color: var(--color-theme-lighter);
    padding: 0;
    margin-bottom: 1rem;
    display: flex;
}

.groovy-callout-inner {
    padding: 1rem 1.5rem;
}

.groovy-thin {
    --groovy-size: 5px;
}

.groovy-main {
    border-top: var(--groovy-size) solid var(--color-main);
    border-bottom: var(--groovy-size) solid var(--color-main-light);
}

.groovy-translucent {
    border-top: var(--groovy-size) solid rgba(255, 255, 255, 0.6);
    border-bottom: var(--groovy-size) solid rgba(255, 255, 255, 0.3);
}

.groovy-theme {
    border-top: var(--groovy-size) solid var(--color-theme);
    border-bottom: var(--groovy-size) solid var(--color-theme-light);
}

.groovy-theme-invert {
    border-top: var(--groovy-size) solid var(--color-theme-light);
    border-bottom: var(--groovy-size) solid var(--color-theme);
}

.groovy-theme-left {
    border-left: var(--groovy-size) solid var(--color-theme);
    border-right: var(--groovy-size) solid var(--color-theme-light);
    flex-grow: 0;
    width: 0;
}

.groovy-sky-3 {
    border-top: var(--groovy-size) solid var(--color-sky);
    background: var(--color-sky-light);
    border-bottom: var(--groovy-size) solid var(--color-sky-lighter);
    height: calc(var(--groovy-size) * 3);
}

/* Hero images */

.hero-banner {
    position: relative;
    background-size: cover;
    height: 50vw;
    max-height: 50vh;
    overflow: hidden;
}

    .hero-banner .container {
        position: relative;
        height: calc(100% - 20px);
    }

    .hero-banner .hero-banner-slogan {
        position: absolute;
        left: 10vw;
        top: -0.5em;
        text-transform: uppercase;
        font-size: min(4rem, 5vw);
        font-weight: 800;
        color: white;
        filter: drop-shadow(0 0.15em 10px #00000088);
    }

    .hero-banner .hero-banner-seal {
        position: absolute;
        right: 1em;
        bottom: 2em;
        width: 10vw;
        max-width: 6em;
        color: var(--color-theme);
        filter: drop-shadow(0 0.15em 10px #00000066);
    }

.hero-home {
    margin-bottom: 4rem;
    max-height: fit-content;
    height: auto;
}

.home-box {
    padding: 1.5rem 1.95rem;
    border-radius: 2rem;
    background: #D9F0F7bb;
    backdrop-filter: blur(2px);
    margin-bottom: 2rem;
    height: auto;
    max-height: auto;
}

.home-title {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
}

.home-search {
    height: 3rem;
    background: white;
    border-radius: 1rem;
    margin-top: 1rem;
}

.home-search label {
    width: calc(100% - 130px);
    margin-right: 1rem;
}
.home-search input {
    height: 3rem;
    width: 100%;
    border: none;
    padding-left: 1rem;
    border-radius: 1rem;
}

.home-search .btn {
    margin-top: -0.2rem;
}

.home-search button:focus, .home-search button:hover {
    background: var(--color-sky);
    color: var(--text);
    border: none;
}

.home-tagpicker {
    margin-top: 0.5em;
}

.home-tagtitle {
    font-weight: 800;
}

.home-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.home-tag {
    background: var(--color-sky);
    border: 2px solid var(--color-navy);
    border-radius: 0.67em;
    padding: 0.15em 0.5em;
    text-decoration: none;
}

.home-tag:hover, .home-tag:focus {
    background: var(--color-navy);
    color: white;
}

/* tables */

.umb-rte table td {
    border: 1px solid #ccc;
    padding: 0.5rem;
}

.umb-rte table thead td {
    background-color: #eeeeee;
    color: var(--color-navy);
    font-weight: 700;
}

.table-scroll-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

table.table-style-1,
table.table-style-2,
table.table-style-3,
table.table-style-4 {
    margin-bottom: 1.5rem;
    caption-side: top;
}

table.table-style-1 caption,
table.table-style-2 caption,
table.table-style-3 caption,
table.table-style-4 caption {
    margin: 0.5em 0;
    font-weight: bolder;
    color: var(--color-navy);
}

table.table-style-1 {
    width: 100%;
}

    table.table-style-1 td {
        border: 7px solid white;
        padding: 0.5em 7px;
        background: var(--color-sky);
        min-width: 3rem;
    }

    table.table-style-1 thead td, table.table-style-1 thead th {
        background: var(--color-navy);
        color: #fff;
        font-weight: 700;
        max-height: 8rem;
    }

        table.table-style-1 thead td:first-child, table.table-style-1 thead th:first-child {
            padding-left: 1rem;
        }

        table.table-style-1 thead td:not(:first-child), table.table-style-1 thead th:not(:first-child) {
            writing-mode: vertical-rl;
            text-align: center;
        }

    table.table-style-1 td:first-child {
        min-width: 12rem;
        position: sticky;
        left: -7px;
    }


table.table-style-2 {
    width: 100%;
}

    table.table-style-2 td {
        border: 7px solid white;
        padding: 0.5em 7px;
        background: var(--color-sky);
        min-width: 3rem;
        text-align: center;
    }

    table.table-style-2 thead td, table.table-style-2 thead th {
        background: var(--color-navy);
        color: #fff;
        font-weight: 700;
        text-align: center;
    }

        table.table-style-2 thead td:first-child, table.table-style-2 thead th:first-child {
            background-color: white;
            padding-left: 1rem;
        }

        table.table-style-2 thead td:not(:first-child), table.table-style-2 thead th:not(:first-child) {
            text-align: center;
        }

    table.table-style-2 td:first-child {
        background-color: white;
        color: var(--color-navy);
        text-align: right;
        font-weight: 700;
        position: sticky;
        left: -7px;
    }

table.table-style-3 {
    width: 100%;
    border-collapse: collapse;
}

    table.table-style-3 td {
        border: 1px solid var(--color-navy);
        color: var(--color-navy);
        padding: 0.5em 7px;
        min-width: 3rem;
        text-align: center;
    }

    table.table-style-3 thead td, table.table-style-3 thead th {
        background: var(--color-navy);
        color: #fff;
        font-weight: 700;
        text-align: center;
        border-right: 1px solid var(--color-sky);
    }

        table.table-style-3 thead td:last-child, table.table-style-3 thead th:last-child {
            border-right: 1px solid var(--color-navy);
        }

        table.table-style-3 thead td:not(:first-child), table.table-style-3 thead th:not(:first-child) {
            text-align: center;
        }

    table.table-style-3 td:nth-col(1) {
        text-align: right;
        font-weight: 700;
    }

    table.table-style-3 td:nth-col(2) {
        font-weight: 700;
    }

    table.table-style-3 td:nth-col(3) {
        text-align: left;
    }

table.table-style-4 {
    width: 100%;
}

    table.table-style-4 td {
        border: 1px solid var(--color-main);
        padding: 1em 1rem;
        min-width: 3rem;
        text-align: center;
    }

    table.table-style-4 tr:nth-child(2n) {
        background: var(--color-sky);
    }

    table.table-style-4 thead td, table.table-style-4 thead th {
        background: var(--color-main);
        color: #fff;
        font-weight: 700;
        text-align: left;
        padding: 1em 1rem;
    }

        table.table-style-4 thead td:first-child, table.table-style-4 thead th:first-child {
            text-align: right;
        }

        table.table-style-4 thead td, table.table-style-4 thead th
        {
            border-right: 1px solid #ffffff;
        }

        table.table-style-4 thead td:last-child, table.table-style-4 thead th:last-child {
            border-right: 1px solid var(--color-main);
        }

    table.table-style-4 td {
        text-align: left;
    }

        table.table-style-4 td:first-child {
            text-align: right;
            font-weight: 700;
        }

    table.table-style-4 td:first-child {
        position: sticky;
        left: -7px;
    }

/* table icons */

i.table-icon {
    height: 2.5rem;
    min-width: 3rem;
    width: 100%;
    display: block;
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    background-position: center center;
}

.table-style-3 i.table-icon {
    height: 1rem;
    min-width: 1.5rem;
    background-size: 1rem 1rem;
}

i.table-icon-inline {
    display: inline-block;
    min-width: unset;
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

i.check-icon {
    background-image: url('/css/imagine2050/img/CheckMarkUI.svg');
}

i.plus-icon {
    background-image: url('/css/imagine2050/img/PlusSignUI.svg');
}

i.question-icon {
    background-image: url('/css/imagine2050/img/QuestionMark.svg');
}

i.table-icon-inline.check-icon {
    background-image: url('/css/imagine2050/img/CheckMarkWhiteUI.svg');
}

i.table-icon-inline.plus-icon {
    background-image: url('/css/imagine2050/img/PlusSignWhiteUI.svg');
}

i.table-icon-inline.question-icon {
    background-image: url('/css/imagine2050/img/QuestionMark.svg');
}

/* J Dudley - auto-resize YouTube iframes by wrapping in these classes */

.video-wrapper-16x9 {
  height: 0px; 
  padding-bottom: 56.25%; /* 9/16 */
  margin-bottom: 25px;
  position: relative;

}

.video-wrapper-4x3 {
  height: 0px; 
  padding-bottom: 75%; /* 3/4 */
  margin-bottom: 25px;
  position: relative;

}

.video-wrapper-16x9 iframe, .video-wrapper-4x3 iframe {
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: absolute;
}

.iframe-wrapper {
    height: 0;
    position: relative;
    padding-top: 25px;
}

.iframe-wrapper.iframe-border {
    border: 1px solid #ccc;
}

.iframe-wrapper.iframe-16x9 {
  padding-bottom: 56.25%; /* 9/16 */
}

.iframe-wrapper.iframe-4x3 {
  padding-bottom: 75%; /* 3/4 */
}

.iframe-wrapper.iframe-2x3 {
  padding-bottom: 150%; /* 3/2 */
}

.iframe-wrapper.iframe-1x1 {
  padding-bottom: 100%; /* 1/1 */
}

.iframe-wrapper iframe {
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: absolute;
}