:root {
  --cty-23navy: #001d80; /* 23rd street */
  --cty-23blue: #96DFFC;

  --cty-green-medium: #009A44; /* mp green like on top nav */  
  --cty-alink: #1976D2; /* primary link color */
  --cty-ahover: #2196F3; /* primary hover color */
}

.bg-white { color:var(--cty-23navy); }
.bg-white h2 { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:46px; line-height:50px; letter-spacing:-0.020rem; color:#001d80; }

.bg-blue { background-color:var(--cty-23blue); color:var(--cty-23navy); }
.bg-blue h2 { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:46px; line-height:50px; letter-spacing:-0.020rem; color:#001d80; }


/* header hero */

.street-hero { width:100%; height:auto; background-position:center center; background-size:cover;  }
.street-hero-darken { width:100%; height:auto; background: linear-gradient(193deg,rgba(0, 29, 128, 0.6) 0%, rgba(0, 29, 128, 0.05) 100%); }

.street-nala-nav { position:relative; }
.street-nala-nav-mobile-bg { position:absolute; background-color: #fff; border-radius: 0px 0px 16px 0px; width:150px; height:90px; } 
@media screen and (min-width: 992px) { .street-nala-nav-mobile-bg { display:none; } }  

.street-hero-content { display:flex; width:100%; max-width:600px; height:510px; align-items:center; margin:0 auto; padding:0 30px; justify-content: center; text-align:center; }

.street-hero-content div { font-family: 'Fakt', sans-serif; font-weight: 400; font-size:22px; line-height:1.1; letter-spacing:0.200rem; text-transform:uppercase; color:white; margin-bottom:10px; }
.street-hero-content h1 { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:50px; line-height:1.1; letter-spacing:-0.020rem; text-transform:none; color:white; }
@media screen and (min-width: 992px) {
  .street-hero-content div { font-size:26px; }
  .street-hero-content h1 { font-size:60px; }
}



/* 23rd street nav bar */

.street-nav-bar { background-color:var(--cty-23navy); padding:20px 0; }

.street-nav-nav { padding-top:30px; }
.street-nav-nav ul { margin:0; padding:0; list-style:none; text-align:center; }
.street-nav-nav ul li { margin:0; padding:0; display:inline-block; }
.street-nav-nav ul li a { display:inline-block; color:white; font-weight:700; font-size:20px; line-height:24px; border:3px solid #fff; padding:6px 12px; border-radius:20px; margin:8px; transition: all 0.35s linear 0s; }
.street-nav-nav ul li a:hover { background-color:white; color:var(--cty-23navy); }
@media all and (min-width: 992px) {
  .street-nav-nav { padding-top:0; }
  .street-nav-nav ul { margin:0; padding:0; list-style:none; text-align:center; }
  .street-nav-nav ul li { margin:0; padding:0; display:inline-block; }
  .street-nav-nav ul li a { display:inline-block; color:white; font-weight:700; font-size:20px; line-height:24px; border:0; padding:6px 12px; border-radius:20px; margin:8px; }
  .street-nav-nav ul li a:hover { background-color:rgba(255,255,255,0.1); color:white; }
  
}







/* 23td street text gradient */

.street-text-gradient { width:100%; max-width:990px; margin:1rem auto; padding:0px 24px 0px 24px; text-align:center; }
.street-text-gradient { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:32px; line-height:1.1; letter-spacing:-0.020rem; }
.street-text-gradient { 
  background: -webkit-linear-gradient(145deg, #001D80, #41B6E6); 
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent; 
}
@media all and (min-width: 992px) {
 .street-text-gradient { padding:10px 30px 10px 30px; font-size:46px; } 
} 


/* image roll */

.image-roll-hold { background-color:white; border-bottom:8px solid white; }

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

.imagerollSwiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

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





/* events */

.street-home-events { background-color:var(--cty-23navy); color:white; }

.street-home-events h2 { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:46px; line-height:50px; letter-spacing:-0.020rem; color:white; }

.street-home-events-flex { display:block; width:100%; }
.street-home-events-flex-events { text-align:center; padding-bottom:40px; }
.street-home-events-flex-weather { text-align:center; }
@media all and (min-width: 992px) {
  .street-home-events-flex { display:flex; flex-direction: row-reverse; }
  .street-home-events-flex-events { width:70%; padding:0; }
  .street-home-events-flex-weather { width:30%; padding:0; }
}

a.street-evt { color:white; transition: all 0.35s linear 0s; }
a.street-evt:hover { color:yellow; }

.street-evt-evdate { font-weight:500; font-size:16px; margin-bottom:6px; }
.street-evt-label { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:30px; line-height:1.1; letter-spacing:-0.020rem; }



/* weather */

.street-weather { width:100%; max-width:200px; border:1px solid white; border-radius:14px; padding:16px 28px; margin:0 auto; }
.street-weather-today { text-align:center; color:white; font-weight: 500; font-size:18px; line-height:1.1; letter-spacing:0.050rem; text-transform:uppercase; }
.street-weather-divider { width:100%; height:2px; opacity:0.25; background-color:white; margin:12px 0; }

.street-weather-current { text-align:center; color:white; font-weight: 400; font-size:18px; line-height:1.1; }
.street-weather-future { text-align:center; color:white; font-weight: 400; font-size:24px; line-height:1.1; }




.bg-blue-gradient { 
  background: #001D80;
  background: linear-gradient(0deg,rgba(0, 29, 128, 1) 0%, #5186c3 100%);
  color:white;
}
.bg-blue-gradient h2 { font-family: 'Fakt', sans-serif; font-weight: 700; font-size:46px; line-height:50px; letter-spacing:-0.020rem; color:white; }




/* post cards */

.street-post-crds { margin:1.5rem 0; }
.street-post-crd { background-color:white; height:100%; }
.street-post-crd a { display:block; height:100%; text-decoration:none; color:inherit; }
.street-post-crd a:hover { color:inherit; text-decoration:none; }
.street-post-crd-image { display:block; }
.street-post-crd-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.street-post-crd-image-img { width:100%; padding-bottom:66%; }
.street-post-crd-content { padding:1.5rem; color:var(--cty-23navy); }
.street-post-crd-subhead { font-weight:400; font-size:0.8rem; margin-bottom:0.5rem; text-transform:uppercase; }
.street-post-crd-headline { font-weight:700; margin-bottom:0.5rem; font-size:24px; line-height:1.2; }
.street-post-crd-text { font-size:1rem; }
.street-post-card-content-more { color:#008539; font-weight:700; font-size: 13px; letter-spacing: 0.0500rem; text-transform: uppercase; }



/* 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; }

.mapboxgl-popup { width: 240px; padding-bottom: 30px; } /* adjust padding bottom to height of marker */
.mapboxgl-popup-content { text-align: center; padding:1.5rem; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); }
.mapboxgl-popup-content p.mapbox-pop-name { margin:0.5rem 0; font-weight:700; font-size:1.1rem; line-height:1.3; }
.mapboxgl-popup-content p.mapbox-pop-address { margin:0.5rem 0; font-size:0.9rem; line-height:1.3; }
.mapboxgl-popup-content p.mapbox-pop-link { margin:0.5rem 0; }





/* mayor map */

:root {
  --cty-bg_mayor: #001d80;
  --cty-txt_mayor: white;
  --cty-border_accordion: white;

  --cty-border-mayor: 1px solid #e9f8fb; /* layer control button */
  --cty-txt-mayor-on: #001d80;
  --cty-bg-mayor-on: #e9f8fb;;
  --cty-bg-mayor-on-hover: #e9f8fb;;
  --cty-txt-mayor-off: #001d80;
  --cty-bg-mayor-off: #c8d5d8;
  --cty-bg-mayor-off-hover: white;
  --cty-bg-mayor-off-icon : #e9f8fb;
  --cty-txt-mayor-off-icon : #001d80;
  
  --cty-bg-mayor1: #20479a; --cty-txt-mayor1:white; 
  --cty-bg-mayor2: #20479a; --cty-txt-mayor2:white; 
  --cty-bg-mayor3: #20479a; --cty-txt-mayor3:white; 
  --cty-bg-mayor4: #20479a; --cty-txt-mayor4:white; 
  --cty-bg-mayor5: #20479a; --cty-txt-mayor5:white; 
  --cty-bg-mayor6: #20479a; --cty-txt-mayor6:white; 
}

.mayor-bg { background-color:var(--cty-bg_mayor); color:var(--cty-txt_mayor); border-bottom:4px solid #f2cd01;}    

.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; flex-direction: row-reverse; width:100%; max-width:9999px; margin:0 auto; }
  .mayor-controls { width:400px; height:840px; padding:40px 30px; overflow:hidden; }
  .mayor-panel { width:calc(100% - 400px); height:840px; border-left:0px; }
}

.mayor-intro-title { color: inherit; text-align:center;  margin-top:1rem; margin-bottom:0.5rem; font-size:1.5rem; font-weight:700; text-align:center; } 
.mayor-intro-text { color: inherit; } /* contains html */
.mayor-intro-advice { color: inherit; font-style:italic; font-size:1rem; }

.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); }




/* 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-mayor6); color:var(--cty-txt-mayor6); }

.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:inherit; 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; font-weight:700; font-size:1.3rem; line-height:1.2; text-wrap:balance; color:#001d80; }
.mapboxgl-popup-content p.mayor-pop-address { margin:12px 0; font-size:16px; line-height:1.2; text-wrap:balance; color:#001d80; }
.mapboxgl-popup-content p.mayor-pop-link { margin:0.5rem 0; }