.strategy-roadmap{
      font-family: "nimbus-sans",sans-serif;
      padding: 50px 16px 67px;
    }

    .cols{
      position: relative;
    }
    svg{
        max-width: 100%;
        height: auto;
    }

    #districts_group path{
      cursor:pointer;
    }

    #districts_group path:hover,
    #districts_group path.hover,
    #districts_group path.active {
        fill:#6086bb;
    }

    .districts-map-wrapper{
      max-width: 583px;
      position: relative;
      
      margin: 0 auto;
      display: none;
    }

    .key-instructions{
      text-align: center;
      background: rgba(82, 199, 105, 0.3);
      padding: 15px 30px;
      border-radius:16px;
      margin-bottom: 21px;
    }


    .key-instructions p{
      margin-bottom: 0;
      font-size: 14px;
      line-height: 1.43;
    }

    .instructions-largescreen{
      display: none; 
    }
    

    .key-instructions-graphic{
      display: inline-block;
      width: 101px;
      height: 40px;
    }

    .map-key{
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .map-key li{
      padding: 16px 0;
      border-top: 1px solid #95989A;
      font-size: 20px;
      color: #414644;
      cursor:pointer;
    }
    .map-key li:first-child{
      border-top: none;
    }


    .map-key li{
      z-index: 1;
      position: relative;
    }


    .map-key li.active,
    .map-key li.hover,
    .map-key li:hover{
      font-weight: bold;
    }

    .key-number,
    .icon-dl{
      color: #fff;
      height: 30px;
      line-height: 30px;
      width: 30px;
      border-radius:50%;
      display: inline-block;
      text-align: center;
    }


    .key-number{
      background: #2d898d;
      margin-right: 10px;
      font-size: 22px;
      font-weight: bold;
    }

    .map-key .key-number{
      margin-right: 10px;
    }

    .icon-dl{
      background: #6086BB;
      float: right;
    }
    .icon-dl svg{
      width: 10px;
      height: 14px;
    }



    .map-files-container{
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      width:100%;
      height:100%;
      pointer-events: none;
      /* background: pink; */
    }


    .map-file{
      position: absolute;
      left:50.87881591119334%;
      top:23.262032085561497%; 
      font-family: "nimbus-sans-condensed",sans-serif;
      display: none;
    }
    
    .map-file-popup{
      background: #fff;
      border:1px solid #95989A;
      pointer-events: auto;
      text-align: center;
      text-transform: uppercase;
      padding: 16px 18px 22px;
      position: absolute;
      bottom:0;
      white-space: nowrap;
      transform: translateX(-50%) translateY(-14px);
      
      /* box-shadow: 0px 0px 10px 0px rgba(149, 152, 154,0.5); */
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
    }

    .map-file-popup:after, 
    .map-file-popup:before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    
    .map-file-popup:after {
      border-color: rgba(255, 255, 255, 0);
      border-top-color: #ffffff;
      border-width: 14px;
      margin-left: -14px;
    }
    .map-file-popup:before {
      border-color: rgba(149, 152, 154, 0);
      border-top-color: #95989A;
      border-width: 15px;
      margin-left: -15px;
    }



    .map-file .district-name{
      display: block;
      color: #242D74;
      font-size: 26px;
      font-weight: bold;
    }

    .map-file a{
      display: inline-block;
      text-decoration: none;
      color: #fff;
      background: #6086BB;
      width: 100%;
      font-weight: bold;
      height: 43px;
      line-height: 43px;
      font-size: 16px;
      margin-top: 11px;
      padding: 0 1em;
    }
    .map-file a svg{
      width: 9px;
      height: 12px;
    }
    .map-file .key-number{
      height: 29px;
      width: 29px;
      line-height: 29px;
      margin-right: 5px;
      font-size: 20px;
      vertical-align: text-top;
    }






    .strategy-roadmap-header{
      text-align: center;
      margin-bottom: 25px;
    }
    .strategy-roadmap-header h1{
      font-family: "nimbus-sans-condensed",sans-serif;
      text-transform: uppercase;
      font-size: 30px;
      color: #064295;
      margin: 0;
      font-weight: bold;
    }
    .strategy-roadmap-header h1 span{
      text-transform: none;
      font-size: 20px;
      color: #414644;
      display: block;
    }

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

      .strategy-roadmap{
        padding: 46px 30px 78px;
      }

      .map-key{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row dense;
        
        /* extra styles */
        grid-gap: 0 23px;
                
      }

      .instructions-smallscreen{
       display: none; 
      }
      .instructions-largescreen{
        display: block; 
      }

      .key-instructions{
        margin-bottom: 29px;
      }

      .map-key li {
        grid-column-start: 1;
        z-index: 2;
      }
      .map-key li.second-half{
        grid-column-start: 2;
      }
      
      .map-key li:not(.second-half) + .second-half{
        border-top: none;
      }

      .districts-map-wrapper{
        display: block;
      }
      .strategy-roadmap-header h1{
        font-size: 40px;
      }
      .strategy-roadmap-header h1 span{
        font-size: 25px;      
      }
    }
    @media screen and (min-width: 1024px) {

      .key-number,
      .icon-dl{
        height: 22px;
        width: 22px;
        line-height: 22px;
      }
      .key-number{
        font-size: 16px;
      }
      .cols {
        display: flex; /* or inline-flex */
      }

      .col-key{
        width: 37%;
        order:1;
      }

      .districts-map-wrapper{
        /* position: absolute;
        right:0;
        top:0; */
        width: 63%;
        order:2;
        max-width: none;
      }


      .strategy-roadmap{
        padding: 77px 45px 80px;
      }


      .map-key li{
        font-size: 14px;
        border: none;
        padding: 0;
        margin: 0 0 10px;
      }

      .icon-dl{
        display: none;
      }
      
      .strategy-roadmap-header h1{
        font-size: 55px;
      }
      .strategy-roadmap-header h1 span{
        font-size: 35px;      
      }
    }
    @media screen and (min-width: 1920px) {

      .key-number,
      .icon-dl{
        height: 32px;
        width: 32px;
        line-height: 32px;
      }
      .key-number{
        font-size: 22px;
      }

      .strategy-roadmap{
        padding: 107px 45px 121px;
      }

      .strategy-roadmap-header{
        margin-bottom: 80px;
      }

      .districts-map-wrapper{
        max-width: 1082px;
      }


      .map-file-popup{
        padding: 22px 32px 38px;
      }
      .map-file a{
        font-size: 30px;
        height: 78px;
        line-height: 78px;
        margin-top: 31px;
      }
      .map-file .district-name{
        font-size: 56px;
      }
      .map-file a svg{
        width: 16px;
        height: 22px;
      }
      .map-file .key-number{
        height: 54px;
        width: 54px;
        line-height: 54px;
        margin-right: 15px;
        font-size: 36px;
      }

      .key-instructions{
        padding: 42px 100px;
      }
      .key-instructions p{
        font-size: 21px;
        margin-top: 1em;
      }
      
      .map-key li {
        font-size: 24px;
        margin-bottom: 17px;
      }

      .strategy-roadmap-header h1{
        font-size: 82px;
      }
      .strategy-roadmap-header h1 span{
        font-size: 50px;      
      }
}

/*
    .districts-map-wrapper{
      width: auto !important;
      display: inline-block;
    }
    .cols{
      display: block !important;
    }

*/

.file-district-3{
  left: 63.64477335800185%;
  top: 67.37967914438502%;
}
.file-district-5{
  
  left: 70.76780758556892%;
  top: 22.816399286987522%;
}
.file-district-6{
  left: 65.30989824236818%;
  top: 85.47237076648841%;
}
.file-district-9{
  left: 52.63644773358001%;
  top: 67.02317290552585%;
}
.file-district-12{
  left: 56.151711378353376%;
  top: 82.53119429590018%;
}
.file-district-16{
  left: 61.79463459759482%;
  top: 73.44028520499108%;
}
.file-district-19{
  left: 46.901017576318225%;
  top: 48.39572192513369%;
      
}
.file-district-23{
  left: 74.09805735430157%;
  top: 71.65775401069519%;
}
.file-district-25{
  left: 81.6836262719704%;
  top: 52.85204991087345%;
}
.file-district-27{
  left: 52.72895467160037%;
  top: 58.02139037433155%;  
}
.file-district-31{
  left: 48.75115633672525%;
  top: 96.2566844919786%;  
}
.file-district-34{
  left: 46.62349676225717%;
  top: 66.48841354723707%;
}
.file-district-37{
  left: 46.71600370027752%;
  top: 81.55080213903744%;
}
.file-district-40{
  left: 63.274745605920444%;
  top: 92.6916221033868%;
}
.file-district-47{
  left: 57.26179463459759%;
  top: 67.9144385026738%;
}
.file-district-50{
  left: 62.81221091581869%;
  top: 60.51693404634582%;
}
.file-district-54{
  left: 87.41905642923219%;
  top: 70.23172905525847%;
}
.file-district-58{
  left: 59.85198889916744%;
  top: 78.43137254901961%;  
}
.file-district-62{

  left: 29.139685476410733%;
  top: 30.57040998217469%;
}
.file-district-69{
  left: 52.82146160962073%;
  top: 78.96613190730838%;
}
.file-district-72{

  left: 52.543940795559664%;
  top: 74.68805704099822%;
}
.file-district-75{
  left: 48.1036077705828%;
  top: 74.33155080213903%;
}
.file-district-79{
  left: 49.02867715078631%;
  top: 89.3048128342246%;
}
.file-district-84{
  left: 38.11285846438483%;
  top: 69.6078431372549%;
}
.file-district-86{
  left: 29.78723404255319%;
  top: 58.55614973262032%;
}
.file-district-91{
  left: 70.95282146160962%;
  top: 79.23351158645276%;
}