/* Modal Window   (can remove if not needed)*/
#modal-window { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; z-index: 500;}
#modal-window.showing { top: 0; }
#modal-window > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-window > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-window > span > span:hover { color: #ddd; }
#modal-window > div { height: 87%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-window.showing > div { margin-top: 60px; }
#modal-window img {height: 100%; border-radius: 0; margin: 0; padding: 0; width: auto; margin: 0 auto; }


/* Modal Window   (can remove if not needed)*/
#modal-windowA { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; z-index: 500;}
#modal-windowA.showing { top: 0; }
#modal-windowA > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-windowA > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-windowA > span > span:hover { color: #ddd; }
#modal-windowA > div { height: 87%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-windowA.showing > div { margin-top: 60px; }
#modal-windowA img {height: 100%; border-radius: 0; margin: 0; padding: 0; width: auto; margin: 0 auto; }

/* Modal Window   (can remove if not needed)*/
#modal-windowB { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; z-index: 500;}
#modal-windowB.showing { top: 0; }
#modal-windowB > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-windowB > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-windowB > span > span:hover { color: #ddd; }
#modal-windowB > div { height: 87%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-windowB.showing > div { margin-top: 60px; }
#modal-windowB img {height: 100%; border-radius: 0; margin: 0; padding: 0; width: auto; margin: 0 auto; }

/* Modal Window   (can remove if not needed)*/
#modal-windowC { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; z-index: 500;}
#modal-windowC.showing { top: 0; }
#modal-windowC > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-windowC > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-windowC > span > span:hover { color: #ddd; }
#modal-windowC > div { height: 87%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-windowC.showing > div { margin-top: 60px; }
#modal-windowC img {height: 100%; border-radius: 0; margin: 0; padding: 0; width: auto; margin: 0 auto; }

/* Modal Window   (can remove if not needed)*/
#modal-windowD { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; z-index: 500;}
#modal-windowD.showing { top: 0; }
#modal-windowD > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-windowD > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-windowD > span > span:hover { color: #ddd; }
#modal-windowD > div { height: 87%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-windowD.showing > div { margin-top: 60px; }
#modal-windowD img {height: 100%; border-radius: 0; margin: 0; padding: 0; width: auto; margin: 0 auto; }



@media screen and (max-width: 414px) {
     #modal-window.showing > div {height: auto; width: 100%;}
     #modal-window img {height: auto; width: 100%;}
     #modal-windowA.showing > div {height: auto; width: 100%;}
     #modal-windowA img {height: auto; width: 100%;}
     #modal-windowB.showing > div {height: auto; width: 100%;}
     #modal-windowB img {height: auto; width: 100%;}
     #modal-windowC.showing > div {height: auto; width: 100%;}
     #modal-windowC img {height: auto; width: 100%;}
     #modal-windowD.showing > div {height: auto; width: 100%;}
     #modal-windowD img {height: auto; width: 100%;}
     
 }
 


/* <div id="map-details">
<ul>
     <h4>Interactive Map Details</h4>
     <li>
          <span></span>
          <p><strong>Birds Eye View Images:</strong> Click anywhere along the study area to view a birdseye plan of that segment.</p>
     </li>
     <li>
          <img src="images/rendering_icon.png" alt="" aria-hidden="true" />
          <p><strong>3D Illustrations:</strong> Click on one of the points to see an illustration of each alternative.</p>
     </li>
     <li>
          <img src="images/noise_legend.svg" alt="" aria-hidden="true" />
          <p><strong>Noise Wall Locations:</strong> Zoom into map to see potential noise wall locations.
          <img class="noiseimg" src="images/noise_colors.svg" alt="" aria-hidden="true" /></p>
     </li>
</ul>
</div>
 */