@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'BureauGrotesqueFiveOne - not using';
    src: url('../fonts/BureauGrotesqueFiveOne.eot');
    src: url('../fonts/BureauGrotesqueFiveOne.eot') format('embedded-opentype'),
         url('../fonts/BureauGrotesqueFiveOne.woff2') format('woff2'),
         url('../fonts/BureauGrotesqueFiveOne.woff') format('woff'),
         url('../fonts/BureauGrotesqueFiveOne.ttf') format('truetype'),
         url('../fonts/BureauGrotesqueFiveOne.svg#BureauGrotesqueFiveOne') format('svg');
         font-style: normal;
         font-weight: normal;
}

@font-face {
    font-family: 'BureauGrotesqueOneThree  - not using';
    src: url('../fonts/BureauGrotesqueOneThree.eot');
    src: url('../fonts/BureauGrotesqueOneThree.eot') format('embedded-opentype'),
         url('../fonts/BureauGrotesqueOneThree.woff2') format('woff2'),
         url('../fonts/BureauGrotesqueOneThree.woff') format('woff'),
         url('../fonts/BureauGrotesqueOneThree.ttf') format('truetype'),
         url('../fonts/BureauGrotesqueOneThree.svg#BureauGrotesqueOneThree') format('svg');
         font-style: normal;
         font-weight: normal;
}
@font-face {
    font-family: 'BureauGrotesqueThreeOne  - not using';
    src: url('../fonts/BureauGrotesqueThreeOne.eot');
    src: url('../fonts/BureauGrotesqueThreeOne.eot') format('embedded-opentype'),
         url('../fonts/BureauGrotesqueThreeOne.woff2') format('woff2'),
         url('../fonts/BureauGrotesqueThreeOne.woff') format('woff'),
         url('../fonts/BureauGrotesqueThreeOne.ttf') format('truetype'),
         url('../fonts/BureauGrotesqueThreeOne.svg#BureauGrotesqueThreeOne') format('svg');
         font-style: normal;
         font-weight: normal;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.state-infr-sec {
    float: left;
    width: 100%;
    padding: 70px 0;
    background: #4c4e4f;
}

strong {
    font-weight: 600;
}

/* Heading Styles */
h1,h2,h3, h3.upper p {
    font-family: 'BureauGrotesqueOneThree';
}
h1, h2, h3.upper, h3.upper p {
    text-transform: uppercase;
}

p.grey {
    color: #58595b;
}
h3.upper p {
    color: #fff;
    margin: 0;
}

/****************
** STATIC TEXT **
****************/
.infar {
    float: left;
    width: 100%;
}

.infar h1 {
    float: none;
}

.staticTooltip img {
    max-width: 50px;
    display: block;
    margin: 0 auto 2rem;
}
/***********************
** NAVIGATION BUTTONS **
***********************/
.strategy-point {
    float: left;
    width: 100%;
}
.strategy-point ul:last-child {
    border-bottom: none;
}
.strategy-point ul {
    float: left;
    width: 100%;
}

.strategy-point ul li {
    float: left;
    width: 33.33%;
    padding: 10px;
    border-right: 1px solid #fff;
    height: 120px;
}

.strategy-point ul li:nth-child(1),
.strategy-point ul li:nth-child(2),
.strategy-point ul li:nth-child(3) {
    padding-top: 0;
}
.strategy-point ul li:nth-child(-n+6) {
    border-bottom: 1px solid white;
}
.strategy-point ul li.padding-bottom {
    padding-top: 10px;
    padding-bottom: 0;
}

.strategy-point ul li:nth-child(3n) {
    border-right: none;
}

.strategy-point ul li.active a {
    background: #007CAD;
    color: #fff;
}
.strategy-point ul li a {
    float: left;
    width: 100%;
    height: 100%;
}

.strategy-icon {
    float: left;
    width: 100%;
    margin: 5px 0;
}
.strategy-icon img {
    display: block;
    margin: 0 auto;
}
.strategy-title {
    float: left;
    width: 100%;
    margin: 0 0 5px;
    font: 400 18px 'Open Sans';
    color: #fff;
    text-align: center;
    line-height: 23px;
}

/****************
** DETAIL PANE **
****************/
.transport-sec {
    float: left;
    width: 100%;
    padding: 60px 0;
}

.transport-detail {
    width: 49%;
    float: left;
}

.heading-pink,
.urban-total-heading {
    margin: 0 0 4px;
    font: 35px 'BureauGrotesqueOneThree';
    text-transform: uppercase;
}

.heading-pink {
    color: #E00087; 
}

.urban-total-heading {
    color: #007CAD;
}

.heading-pink,
.urban-total-heading {
    font-weight: 700 !important;    
}

.chapter-navigation a {
    margin-right: 1em;
    float: none;
}
.chapter-list ul,
  .slide-list ul {
    list-style: disc;
    padding: 0 0 0 30px;
    margin: 0 0 2rem;
}

.btn-cyan, .btn.btn-cyan {
    background: #007CAD !important;
}

.btn-pink {
    background: #E00087 !important;
}

.btn-hidden {
    box-shadow: none !important;
    pointer-events: none;
    opacity: 0;
}

.slide-list a,
.slide-underlist a {
    color: black;
    font-weight: 700;
}

.slide-list a:hover,
.slide-underlist a:hover,
.slide-list a:active,
.slide-underlist a:active,
.slide-list a:focus,
.slide-underlist a:focus, {
    color: #007CAD;
}
[id="chapter"] .chapter-navigation {
    position: absolute;
    bottom: 0;
}
[id="chapter"] {
    font-size: 14px;
}

.leaflet-container {
    height: 600px;
    width: 100%;
}

/****************
*   Map Styles  *
****************/
.markerImage {
    background-image: url("../img/education.png");
    width: 40px !important;
    height: 60px !important;
}
svg {
    overflow: visible !important;
}
.leaflet-div-icon {
    background: none;
    border: none;
    position: absolute;
}
.mapLabel {
    position: absolute;  
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.mapLabel svg {
    display: block;
    width: 40px;
    margin: 0 auto;
}
.mapLabel p {
    background: rgb(46, 49, 146);   
    padding: 5px 10px;    
}
.mapLabel--long {
    width: 150px;
}
.mapLabel--medium {
    width: 100px;
}
.mapLabel p {
    margin: 0;
    color: white;  
    text-align: center;  
}
.mapLabel--pink p {
    background: #E00087;
}
.mapLabel--pink:hover p,
.mapLabel--pink:hover .st0,
.mapLabel--pink:active p,
.mapLabel--pink:active .st0,
.mapLabel--pink:focus p,
.mapLabel--pink:focus .st0 {
    background: #eda7d1 !important;
    fill: #eda7d1;
}

.legend {
    background: white;
    padding: 12px 10px 10px;
}
.legend h6 {
    font-weight: 700;
    margin-bottom: 10px;
}
.legend i,
.legend svg {
    height: 14px; 
    width: 14px;
    margin: 0 5px 0;
    display: inline-block;
    vertical-align: middle;
}
.legend li {
    margin-bottom: 2px;
}
.legend li:last-child {
    margin-bottom: 0;
}

svg.border {
    border: 1px solid black;
}
svg.border line {
    stroke-width: 0 !important;
}

/* 
*   Fluid Type Calculations 
*   https://css-tricks.com/snippets/css/fluid-typography/
*   font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
*/
@media screen and (min-width: 320px) {
    body,
    .pronsw-sec a {
        font-size: calc(16px + 3 * ((100vw - 320px) / 680));
    }
    h1 {
        font-size: calc(44px + 16 * ((100vw - 320px) / 680));
    }
    h2 {
        font-size: calc(32px + 16 * ((100vw - 320px) / 680));
    }    
    h3 {
        font-size: calc(18px + 6 * ((100vw - 320px) / 680));
    }   
    h3.upper, h3.upper p {
        font-size: calc(18px + 2 * ((100vw - 320px) / 680));
    }  
    h4 {
        font-size: calc(20px + 2 * ((100vw - 320px) / 680));
    }  
    .slide-title h3,
    .slide-title h3 p {
      font-size: calc(23px + 9 * ((100vw - 320px) / 680));
      font-weight: 400;
    }
    .advice h3 {
      font-size: calc(24px + 14 * ((100vw - 320px) / 680));
    }    
         
}
@media screen and (min-width: 1000px) {
  body,
  .pronsw-sec a {
    font-size: 19px;
  }
  h1 {
    font-size: 60px; /* 80% reduction of 75px */
  }  
  h2 {
    font-size: 48px; /* 80% reduction of 60px */
  }  
  h3 {
    font-size: 24px; /* 80% reduction of 47px 80% Reduced again after Font Family Change */
  } 
  h3.upper, h3.upper p {
    font-size: 20px; /* 80% reduction of 40px Reducded again after Font Family Change*/
  }   
  .slide-title h3,
  .slide-title h3 p {
    font-size: 40px;
    font-weight: 400;
  }
  .advice h3 {
    font-size: 44px
  }  
  h4 {
    font-size: 22px;
  }       
}

@media screen and (max-width: 991px) {
    .chapter-navigation {
        margin-bottom: 2rem;
    }
}

.staticInfarList {
    list-style: disc;
    color: white;
    padding: 0 0 0 30px;
}

.bigboy {
    font-size: 32px;
    font-weight: 700;
    display: block;
    line-height: 1.2em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.SIS{
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.SIS p, .SIS ul li {
    font-size: 14px;
}
.SIS p em, .SIS ul em {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    display: inline;
    line-height: 1.4;
}
.SIS .chapter-intro {
    margin-top: 0;
    font-size: 18px;
    line-height: 1.3em;
    font-weight: 700;
    color: #2e3192;
}
.SIS h3.project-heading{
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.3em;
    font-weight: 700;
    color: #2e3192;
}