:root {
  --cty-path-green: #1be993;
  --cty-path-purple: #5500b0;
  --cty-path-purple: #2b0058; /* replace per Gabriel */
  /*--cty-path-purple-light: #ad7bef;
  --cty-path-purple-medium: #7733bf; */
  --cty-path-purple-dark: #2b0058;
}

.bg-path-of-progress { 
  width:100%;
  background-color:#f9f9f8;
}

.path-max-width {
  width:100%;
  background-color:white;
  max-width: 1320px;
  margin:0 auto; 
}

.container-progress { max-width: 1320px!important; }

.bg-white { clear:both; }
.bg-purple { clear:both; background-color:var(--cty-path-purple); }
.bg-purple-dark { clear:both; background-color:var(--cty-path-purple-dark); }

.container-fluid-mid { width:100%; max-width:1040px!important; }

.path-intro {
  h1 { font-weight: 800; color:var(--cty-path-purple); }
}



/* video */

.path-video-max-width {
  max-width: 1320px!important;
  margin:0 auto;
}

.path-video-block {
  width: 100%;
  aspect-ratio: 1920 / 1080;
}

.path-video-block-video {
  width: 100%;
  height: 100%;
  display: block;
}


/* purple highlight */

.path-highlight { 
  border-top:1px solid white; 
  color:white;
  padding:24px 0; 
}
.path-highlight figure { margin:0; }
.path-highlight h2 { color:white; font-size:32px; text-transform:uppercase; font-weight:700; margin-bottom:0.5rem; margin-top:1.5rem; }
.path-highlight p { color:white; font-size:20px; }

.path-highlight { 
  .btn-brand { background-color:var(--cty-path-green); text-transform:uppercase; font-weight:700; color:var(--cty-path-purple-dark); letter-spacing:0.100rem; 
    border:1px solid var(--cty-path-green); transition: all 0.15s linear 0s; }
  .btn-brand { border-radius:0; font-size:16px; line-height:22px; padding:6px 12px; text-decoration:none!important; }
  .btn-brand:hover { background-color:var(--cty-path-green); border-color:var(--cty-path-green); color:var(--cty-path-purple-dark); text-decoration:none!important; }
}



/* path-body */

.path-body {
  h2 { color:var(--cty-path-purple); font-size:44px; text-transform:uppercase; font-weight:800; margin-bottom:0.5rem; margin-top:1.5rem; }
}



/* path hover cards */

.path-hover-cards { margin:1.5rem 0 0 0; font-family: 'futura-pt', sans-serif; }

.path-hover-card { width:100%; height:450px; position:relative; }
.path-hover-image { position:absolute; top:0; left:0; width:100%; height:400px; background-color:#000; background-size:cover; background-position:center center; }
.path-hover-cover { position:absolute; top:0; left:0; width:100%; height:400px; background-color:rgba(85,0,176,0.5); }
.path-hover-text { position:absolute; top:0; left:0; width:100%; height:400px; text-align:center; padding:50px;
  color:white; font-weight:700; font-size:30px; line-height:36px; text-wrap:balance;
  display: flex;
  align-items: center;
  justify-content: center;
}
.path-hover-headline { position:absolute; bottom:0; left:0; width:100%; height:auto; text-align:center; 
  background-color:var(--cty-path-purple); color:white; font-weight:700; font-size:16px; line-height:50px; text-transform:uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* path stats */

.path-stats { margin:3rem 0; font-family: 'futura-pt', sans-serif; }
.path-stat { padding-left:90px; position:relative; }
.path-stat-arrow { position:absolute; top:0; left:0; 
  color:var(--cty-path-green); font-weight:700; font-size:80px; line-height:1; 
}
.path-stat-headline { color:var(--cty-path-purple); font-weight:800; font-size:80px; line-height:1;  }
.path-stat-subhead { font-weight:600; font-size:16px; line-height:1; margin-top:8px; }



/* projects roll */

.projects-roll {
  h2 { color:white; font-size:44px; text-transform:uppercase; font-weight:800; margin-bottom:0.5rem; margin-top:1.5rem; }
  p { color:white; }
  a { color:white; text-decoration:underline; }
  a:hover { color:white; text-decoration:underline; }
}

.along-image-roll-hold { background-color:inherit; margin-top:1.5rem; margin-bottom:1.5rem; }

.along-image-roll .swiper-wrapper { width:100%; height:500px; position:relative; }

.along-image-roll .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
}

.along-title { position:absolute; top:18px; left:18px; 
  color:white; font-size:24px; line-height:1; font-weight:800; text-shadow:0 0 2px #000;
}
.along-credit { position:absolute; bottom:18px; left:18px; 
  color:white; font-size:14px; line-height:1; font-weight:600; text-shadow:0 0 2px #000;
}

.along-image-roll .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.along-image-roll .swiper-navigation {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  right: 30px;
  background-color: black;
  border-radius: 30px;
  width: 96px;
  height: 48px;
}

.along-slider-roll-prev, .along-slider-roll-next { 
  display:block; 
  width:48px; 
  height:48px; 
  font-size:24px; 
  line-height:48px; 
  text-align:center; 
  float:left; 
  color:white; 
  opacity:0.85; 
}

.along-slider-roll-prev:hover { opacity:1; }
.along-slider-roll-next:hover { opacity:1; }



/* In the news */

.news-swiper-container { 
  position:relative;
}

.swiper-news .swiper-slide {
    height: auto; /* Let Swiper calculate equal heights */
}

.news-swiper-button-next, .news-swiper-button-prev {
  display: flex;
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: var(--cty-path-purple);
  font-size:20px;
  color: #fff;
  border-radius:18px;
}
.news-swiper-button-prev { left:-22px; }
.news-swiper-button-next { right:-22px; }

.path-news-card {
 display:block; width:100%; height:100%; background-color:#F0F0F0; 
}
.path-news-card a { 
  display:block; width:100%; height:100%;
}
.path-news-image {
  width:100%;
  aspect-ratio:3/2;
  background-size:cover;
  background-position:center center;
}
.path-news-content {
  padding:18px 20px;
}
.path-news-subhead {
  color:#5400B0; font-size:15px; line-height:18px; font-weight:700; letter-spacing:0.050rem; text-transform:uppercase; margin-bottom:8px;
}
.path-news-headline {
  color:#000; font-family: 'futura-pt', sans-serif; font-weight:700; font-size:24px; line-height:29px; margin-bottom:8px;
}
.path-news-date {
  color:#222; font-size:16px; line-height:24px; margin-bottom:8px;
}
.path-news-text {
  color:#222; font-size:16px; line-height:24px; margin-bottom:8px;
}


/* media-contact */

.media-contact {
  border-top:1px solid white;
  h2 { color:white; font-size:28px; text-transform:uppercase; font-weight:700; margin-bottom:0.5rem; margin-top:1.5rem; }
  p { color:white; }
  a { color:white; text-decoration:underline; }
  a:hover { color:white; text-decoration:underline; }
}


/* mayor map */

:root {
  --cty-bg_mayor: var(--cty-path-purple);
  --cty-txt_mayor: white;
  --cty-border_accordion: white;

  --cty-border-mayor: 1px solid white; /* layer control button */
  --cty-txt-mayor-on: #000000;
  --cty-bg-mayor-on: white;
  --cty-bg-mayor-on-hover: #f4f0ef;

  --cty-txt-mayor-off: #ffffff;
  --cty-bg-mayor-off: var(--cty-path-purple);
  --cty-bg-mayor-off-hover: #f4f0ef;
  --cty-bg-mayor-off-icon : #eee;
  --cty-txt-mayor-off-icon : #052717;
  
  --cty-bg-mayor1: #30825F; --cty-txt-mayor1:white;
  --cty-bg-mayor2: #E59200; --cty-txt-mayor2:white; 
  --cty-bg-mayor3: #bc262c; --cty-txt-mayor3:white; 
  --cty-bg-mayor4: #5400b0; --cty-txt-mayor4:white; 
}

.mayor-bg { width:100%; max-width:1320px; margin:0 auto; }

.mayor-bg { background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); }    

.mayor-map { display:block; width:100%; background-color:var(--cty-bg_mayor); }
.mayor-controls { display:block; width:100%; padding:24px; position:relative; z-index:20; background-color:var(--cty-bg_mayor); } 
.mayor-controls-hold { width:100%; max-width:400px; margin:0 auto; }
.mayor-panel { display:block; width:100%; height:500px; position:relative; z-index:1; border: 0px solid var(--cty-bg_mayor); }
.mayor-panel #mayor_clmap { width:100%; height:100%; background-color:var(--cty-bg_mayor); }
@media all and (min-width: 992px) {
  .mayor-map { display:flex; width:100%; max-width:9999px; margin:0 auto; } /* flex-direction: row-reverse; */
  .mayor-controls { width:400px; height:690px; padding:40px 30px; overflow:hidden; }
  .mayor-panel { width:calc(100% - 400px); height:690px; border-left:0px; }
}

.mayor-intro-title { color: inherit; text-align:center; margin-bottom:1rem; font-family: 'Platypi', serif; font-size: 1.8rem; line-height:1.1; font-weight:700; } 
.mayor-intro-text { color: inherit; } /* contains html */
.mayor-intro-advice { color: inherit; font-size:0.8rem; text-wrap:balance; }

.mayor-drawer-handle { border:1px solid var(--cty-border_accordion); background-color:var(--cty-bg_mayor); }
.mayor-drawer-handle a { display:block; background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); }
.mayor-drawer-handle a:hover { background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); }
.mayor-layers-hold { border:1px solid var(--cty-border_accordion); background-color:var(--cty-bg_mayor); border-top:0; padding:12px 16px; }
.mayor-layers-hold ul { margin:20px 0 0 0; padding:0; list-style:none; }
.mayor-layers-hold ul li { margin:0 0 2px 0; padding:0; list-style:none; }
.mayor-layers-hold ul li a { display:block; width:100%; padding:10px; color:var(--cty-txt_mayor); }
@media all and (min-width: 992px) {
  .mayor-intro-title { text-align:left; }
  .mayor-drawer-handle { border:0; }
  .mayor-layers-hold { border:0; padding:0; background-color:inherit; }
}

#mayor-drawer { display:table; width:100%; text-decoration:none; }
#mayor-drawer:hover { text-decoration:none; }
.mayor-drawer-label { display:table-cell; width:auto; text-align:left; padding:0 16px; font-size:16px; line-height:40px; }
.mayor-drawer-icon { display:table-cell; width:24px; text-align:right; padding:0 16px; font-size:16px; line-height:40px; }
#mayor-drawer.is-open .mayor-drawer-icon { transform: rotate(180deg); }
@media all and (min-width: 992px) {
  #mayor-drawer { display:none; }
}
 
.mayor-drawer-closed { max-height:0px; overflow:hidden; }
.mayor-drawer-open { max-height:900px; transition: var(--cty-transition-hover);  overflow:hidden; }

.mayor-drawer-drop-rel { position:relative; width:100%; height:40px; }
.mayor-drawer-drop-abs { position:absolute; top:0px; width:100%; }


/* layer control */

.mayor-layer { display:block; width:100%; border: var(--cty-border-mayor);
  padding: 8px 8px;
  margin-bottom:10px;
  border-radius: 26px;
  text-decoration: none;
  text-align:left;
  font-size:16px; 
  line-height:22px;
  font-weight:700;
}
.mayor-layer span { display:inline-block; width:22px; height:22px; border:0px solid white; 
  border-radius:12px; margin-right:6px; text-align:center; font-size:12px; line-height:22px; }

.mayor-layer-show-true { background-color:var(--cty-bg-mayor-on); color:var(--cty-txt-mayor-on); transition: var(--cty-transition-hover) }
.mayor-layer-show-true:hover { background-color:var(--cty-bg-mayor-on-hover); color:var(--cty-txt-mayor-on); }
.mayor-layer-show-false { background-color:var(--cty-bg-mayor-off); color:var(--cty-txt-mayor-off); transition: var(--cty-transition-hover) }
.mayor-layer-show-false:hover { background-color:var(--cty-bg-mayor-off-hover); color:var(--cty-txt-mayor-off); }

.mayor-layer-show-true span { display:inline-block; }
.mayor-layer-show-false span { display:inline-block; background-color:var(--cty-bg-mayor-off-icon); color:var(--cty-txt-mayor-off-icon); }



/* mapbox styles */

.smarker {  width: 24px; height: 36px; cursor: pointer; }
.smarker-bg { position:absolute; width:24px; height:36px; fill:var(--cty-alink); }
.smarker-i { position:absolute; width:24px; height:36px; text-align:center; font-size:11px; line-height:24px; color:white; }
.smarker-num { font-weight:700; }

.mapboxgl-map { font-family:inherit; color:var(--cty-default-fg); }


/* map popups */

.mayor-marker-sm { width:24px; height:24px; cursor: pointer; border-radius:12px; background-color:black; text-align:center; 
  font-size:12px; line-height:24px; color:white; box-shadow: 0px 0px 2px 0px rgba(255,255,255, 0.4); }

.mayor-marker-lg { width:32px; height:32px; cursor: pointer; border-radius:16px; background-color:black; text-align:center; 
  font-size:14px; line-height:32px; color:white; box-shadow: 0px 0px 2px 0px rgba(255,255,255, 0.4); }

.mayor-marker-1, .mayor-marker-layer1 { background-color:var(--cty-bg-mayor1); color:var(--cty-txt-mayor1); }
.mayor-marker-2, .mayor-marker-layer2 { background-color:var(--cty-bg-mayor2); color:var(--cty-txt-mayor2); }
.mayor-marker-3, .mayor-marker-layer3 { background-color:var(--cty-bg-mayor3); color:var(--cty-txt-mayor3); }
.mayor-marker-4, .mayor-marker-layer4 { background-color:var(--cty-bg-mayor4); color:var(--cty-txt-mayor4); }
.mayor-marker-5, .mayor-marker-layer5 { background-color:var(--cty-bg-mayor5); color:var(--cty-txt-mayor5); }
.mayor-marker-6, .mayor-marker-layer6 { background-color:var(--cty-bg-mayor5); color:var(--cty-txt-mayor5); }

.mayor-panel .mapboxgl-popup { width: 240px; padding-bottom: 10px!important; } /* adjust padding bottom to height of marker */
.mayor-panel .mapboxgl-popup-content { text-align: center; padding:0; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); }

.mapboxgl-popup-content .mayor-popup-content { background-color:white; color:var( --cty-default-fg); padding:1.2rem; line-height:1.25; }
.mapboxgl-popup-content div.mayor-pop-image { width:100%; height:120px; background-position:center center; background-size:cover; }
.mapboxgl-popup-content p.mayor-pop-name { margin:0.5rem 0; font-weight:700; font-size:1.2rem; line-height:1.2; }
.mapboxgl-popup-content p.mayor-pop-address { margin:0.5rem 0; font-size:1rem; line-height:1.2; }
.mapboxgl-popup-content p.mayor-pop-link { margin:0.5rem 0; }
.mapboxgl-popup-content p.mayor-pop-link a.btn-brand-pill { background-color:var(--cty-path-purple); border-color:var(--cty-path-purple); }