/* home page video */

.home-video { position:relative; overflow:hidden; } 

.home-video-sizer { width:100%; height:340px; }
@media all and (min-width: 768px) { .home-video-sizer { height:675px; } }

.home-video-video { position:absolute; top:0px; z-index:2; display: flex; align-items: center; justify-content: center; }
.home-video-video video { width: 100%; height:100%; object-fit: cover; object-position: center; }

.hero-video-darken { position:absolute; top:0px; z-index:3; display:flex; align-items:center; justify-content: center; background-color:rgba(0,0,0,0.25); }
.hero-video-content-hold { max-width:900px; text-align:center; }
.hero-video-content { padding:120px 24px 90px 24px; }
.hero-video-content h1 { color:white; text-shadow: 0px 0px 4px #222; }
.hero-video-content p { color:white; text-shadow: 0px 0px 4px  #222; }



/* citylight social grid */

.citylight-social-grid { width:100%; border-left:0px solid white; border-bottom:0px solid white; background-color:black; }

.citylight-social-square {
  display:block;
  background-size:cover;
  background-position:center center;	
  float:left;
  position: relative;
  margin:0px;
  overflow:hidden;
  border-right:0px solid white;
  border-top:0px solid white;
}

.citylight-social-square { width: 50%; padding-bottom : 50%; }
@media all and (min-width: 768px) { .citylight-social-square { width: 33.33%; padding-bottom : 33.33%; } }
@media all and (min-width: 992px) { .citylight-social-square { width: 20%; padding-bottom : 20%; } .citylight-social-square-6 { display:none; } }

.citylight-social-square-cover { position:absolute; width:100%; height:100%; background-color:rgba(0,0,0,0.05); transition: all 0.15s linear 0s; }
.citylight-social-square:hover .citylight-social-square-cover { background-color:rgba(0,0,0,0.35); }
.citylight-social-square-icon { position:absolute; bottom:8%; left:8%; color:white; font-size:22px; line-height:22px; }
@media all and (min-width: 768px) { 
   .citylight-social-square-icon { bottom:16%; left:16%; font-size:28px; line-height:28px; }
}







/* basic landing */

.nav-card-gallery { margin:48px 0 0 0; }
.nav-card-margin { margin-bottom:48px; }
.nav-card { width:100%; height:100%; background-color:#fff; border-radius:6px; overflow:hidden; 
  -webkit-box-shadow: 0px 0px 8px 0px rgba(177,158,144,0.25);
  -moz-box-shadow: 0px 0px 8px 0px rgba(177,158,144,0.25);
  box-shadow: 0px 0px 8px 0px rgba(177,158,144,0.25);
}
.nav-card a { display:block; }
.nav-card a .nav-card-image { position:relative; width:100%; padding-bottom:66.66%; background-color:#eee; margin-bottom:12px; overflow:hidden;  }
.nav-card a .nav-card-image-bg {  position:absolute; top:0; width:100%; height:100%; background-position:center center; background-size:cover; transition: all .5s; }
.nav-card a .nav-card-image-cover { position:absolute; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.0); transition: all .5s;  }
.nav-card a:hover .nav-card-image-bg { transform: scale(1.02); }

.nav-card-content { width:100%; height:100%; background-color:#fff; padding:10px 20px 20px 20px; text-align:center; }
.nav-card-content-headline { color: inherit; font-weight: 700; font-size: 20px; line-height: 25px;}



/* basic snake */

.snake-wrap { width:100%; background-color:var(--cty-banner-wrap); }
.snake-container { width:100%; max-width:1200px; background-color:white; margin:0 auto; }
.snake-row { display:block; }
.snake-image { display: block; width:100%; padding-bottom: 90%; background-size:cover; background-position:center center; }
.snake-content { display: block; background-color:white; padding:30px; }
@media all and (min-width: 576px) {
	.snake-image { padding-bottom: 50%; }
}
@media all and (min-width: 768px) {
	.snake-row { display:flex; }
	.snake-row-alternate { flex-direction: row-reverse; }
	.snake-image { width:50%; padding:0; }
	.snake-content { width:50%; padding:60px; }
}
@media all and (min-width: 992px) {
	.snake-content { padding:90px; }
}

/* basic staff */

.basic-staff { margin:24px 0; }
.staff-card { margin-bottom:24px; }
.staff-picture-hold { max-width:240px; margin:36px auto 22px auto; }
.staff-picture { width:100%; padding-bottom:100%; border-radius:50%; background-position:center center; background-size:cover;  }
.staff-name { text-align:center; font-weight: 700; font-size:20px; line-height:1.3; margin-bottom:4px; }
.staff-title { text-align:center; font-weight: 400; font-size:18px; line-height:1.3; margin-bottom:4px; }
.staff-body { text-align:center; font-weight: 400; }





/* point-section */

#point-section #clmap { width:100%; height:80vh; min-height:200px; max-height:800px; background-color:#E6E4E0; border-top:1px solid #eee; border-bottom:1px solid #eee; }


.point-section-results { margin:30px 0px; }

.pst { margin-bottom:24px; }
.pst-topline { border-top:1px solid #eee; padding-top:8px; }
.pst a { display:block; }

.pst a .pst-image { position:relative; width:100%; padding-bottom:66.66%; background-color:#eee; margin-bottom:12px; }
.pst a .pst-image-bg { position:absolute; top:0; width:100%; height:100%; background-position:center center; background-size:cover; }
.pst a .pst-image-cover { position:absolute; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.1); transition: all .5s;}
.pst a:hover .pst-image-cover { background-color:rgba(0,0,0,0.5);  }


/* point section sticky */

.sticky-wrap { background-color:#fafafa; }
.sticky-hold { display:block; }
.sticky-content { width:100%; background-color:white; padding:40px; min-height:100px; }
.sticky-map { width:100%; height:90vh; min-height:420px; background-color:#E8E0D8; }
#stickymap { width:100%; height:90vh; background-color:#E8E0D8; }
@media all and (min-width: 768px) {
	.sticky-hold { display:flex; width:100%; max-width:1600px; margin:0 auto; min-height:100vh; }
	.sticky-content { width:40%; height:auto; }
	.sticky-map { width:60%; height:auto; }
	#stickymap { width:100%; height:100vh; top:0px; position: sticky; position: -webkit-sticky; /* need for safari */ }
}


/* point section stacky */

:root {
  --stacky-height: 900px; /* desktop element height */
}
.stacky-wrap { width:100%; }
.stacky-hold { display:block; background-color:var(--cty-blue-lighter); }
.stacky-content { width:100%; padding:24px; min-height:100px; }
.stacky-map { width:100%; height:70vh; min-height:420px; background-color:#E8E0D8; }
#stackymap { width:100%; height:70vh; background-color:#E8E0D8; }
@media all and (min-width: 992px) {
	.stacky-hold { display:flex; flex-direction:row; width:100%; max-width:1600px; margin:0 auto; height:var(--stacky-height);}
	.stacky-content { width:40%; padding:16px; height:auto; overflow-y: scroll; }
	.stacky-map { width:60%; height:var(--stacky-height); }
	#stackymap { width:100%; height:var(--stacky-height); top:0px; }
}
@media all and (min-width: 1200px) {
	.stacky-wrap { padding:24px; }
  .stacky-hold { border-radius:32px; overflow:hidden; }
	.stacky-content { width:500px; }
	.stacky-map { width:calc(100% - 500px); }
}

.stackycard { position:relative; display:flex; width:100%; overflow:hidden; margin-top:1rem; 
  background-color:white; 
  color:inherit;
  border-radius:12px;
  overflow:hidden;
}
.stackycard-content { width:calc(100% - 160px); min-height:160px; padding:1rem; }
.stackycard-image { width:160px; height:inherit; background-color:#eee;  }

.stackycard-map-link { position:absolute; top:0px; right:0px; background:#666; height:auto; }
.stackycard-map-link button { float:right; }
@media all and (min-width: 1500px) {
	.stackycard-content { width:calc(100% - 220px); min-height:180px; padding:1.5rem; }
	.stackycard-image { width:220px; }
  .stacky-content { width:700px; }
	.stacky-map { width:calc(100% - 700px); }
}

.stackycard-image a { display:block; width:100%; height:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; }

.stackycard-subhead { font-size:0.6rem; line-height:1.2; font-weight:500;
	text-transform:uppercase; letter-spacing:0.050rem; margin-bottom:0.5rem; text-wrap:balance; }
.stackycard-headline { font-size:1rem; line-height:1.2; font-weight:800; margin-bottom:0.5rem; text-wrap:balance; }
.stackycard-text { font-size:0.7rem; line-height:1.3; font-weight:700; margin-bottom:0.5rem; text-wrap:balance; }

@media all and (min-width: 1200px) {
  .stackycard-subhead { font-size:0.7rem; }
  .stackycard-headline { font-size:1.2rem; }
  .stackycard-text { font-size:0.8rem;  }
  .stackycard-subhead { width:calc(100% - 60px); }
}



.btn-map-it { 
  display:inline-block;
  background-color:var(--cty-blue-lighter);
  border:0px solid var(--cty-blue-lighter);  
  color:var(--cty-navy);
  font-size:13px; line-height:30px; font-weight:600; text-transform:uppercase; letter-spacing:0.010rem; 
  border-radius:0px; 
  border:0; 
  margin: 0; 
  padding: 0 10px; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-map-it:hover {  
  background-color:var(--cty-blue-lighter);
  border-color:var(--cty-blue-lighter); 
  color:var(--cty-navy);
  text-decoration:none; 
}



/* point-detail */

.point-social-icons { margin:24px 0; text-align:left;}
.point-social-icons a { display:inline-block; width:30px; height:30px; font-size:15px; line-height:30px; border-radius:50%; text-align:center; margin:0 12px 0 0; }
.point-social-icons a { text-decoration:none; color:white; background-color:var(--cty-alink); border:none; transition: all 0.15s linear 0s;}
.point-social-icons a:hover { color:white; background-color:var(--cty-ahover); }

#point-detail { margin-left:-24px; margin-right:-24px; border-top:1px solid #E6E4E0; border-bottom:1px solid #E6E4E0;}
#point-detail #clmap { width:100%; height:50vh; min-height:150px; max-height:500px; background-color:#E6E4E0; border-top:2px solid white; border-bottom:2px solid white; }
@media all and (min-width: 992px) {
	#point-detail #clmap { border:2px solid white; }
	#point-detail { margin-left:0px; margin-right:0px; border: 1px solid #E6E4E0; }
}

.ftn { text-align:center; }
.ftn h4 { text-align:center; }
.ftn ul { margin:20px 0px; padding:0; }
.ftn li { list-style-type: none; padding:10px 0px; margin:0; border-bottom:1px solid #eee6e8;}
.ftn li:last-child { border-bottom:0;}
.ftnname { display:block; font-size:110%;}
.ftnaddress { font-size:80%; color:inherit; }
.ftndistance { font-size:80%; color:inherit; }


/* event-detail */

ul.datelist { list-style-type: none; padding-left:0; margin-left:0; }
ul.datelist li { margin-bottom:6px; }
ul.datelist li .dldate { color:inherit; }
ul.datelist li .dltime { color:#666; }


/* meeting calendar */

:root {
	--cty-meetingsbg-100: #fafafa; /* blank dates */
	--cty-meetingsbg-200: #f4f4f4;
	--cty-meetingsbg-300: #eaeaea;
}

.bcal { margin-top:2rem; }
.bcal-header { width:100%; background-color:var(--cty-meetingsbg-300); padding: 0.5rem; border:1px solid white; font-size:1.1rem; font-weight:700; }
.bcal-header-prev { display:inline-block; padding: 0.5rem; }
.bcal-header-current { display:inline-block; padding: 0.5rem; }
.bcal-header-next { display:inline-block; padding: 0.5rem; }
.bcal-row { width:100%; }
.bcal-cell { width:100%; background-color:var(--cty-meetingsbg-200); border:1px solid white; font-size:16px; }
.bcal-cell span { display:block; padding:6px 12px; background-color:var(--cty-meetingsbg-300); font-weight:700; }
.bcal-cell ul { padding:6px 12px; margin:0; }
.bcal-cell ul li { padding:0; margin:0 0 8px 16px; }
.bcal-cell-blank { display:none; background-color: var(--cty-meetingsbg-100); }
.bcal-cell-empty { display:none; }
@media all and (min-width: 992px) {
  .bcal-cell-blank { display:table-cell; }
  .bcal-cell-empty { display:table-cell; }
  .bcal-header { text-align:center; border-bottom:2px; }
  .bcal-row { display:table; width:100%; }
  .bcal-cell { display:table-cell; width:14.3%; height:100px; vertical-align:top; }
  .bcal-cell ul li { font-size:15px;}
}

/* placemaking detail */

.pm-link { font-weight:700; text-transform:uppercase; margin-bottom:0.5rem; }


/* let's glow 2025 */

.op-glow-nav { padding-top:16px; padding-bottom:16px; }

.op-glow-nav ul { padding:0; margin:0; list-style-type:none; text-align:center; }
.op-glow-nav ul li { padding:0; margin:0; list-style-type:none; display:inline-block; border:4px solid var(--cty-navy); border-width:6px 1px; }

.op-glow-nav ul li a { 
  display:inline-block;
  background-color:var(--cty-navy); 
  border:2px solid var(--cty-mint-primary); 
  color:var(--cty-mint-primary);
  font-size:14px; line-height:24px; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; border-radius:20px; 
  margin:0; padding: 0 20px; padding-top:2px; transition: all 0.25s linear 0s; text-decoration:none; 
}
.op-glow-nav ul li a:hover { 
  background-color:var(--cty-mint-primary); 
  border:2px solid var(--cty-mint-primary); 
  color:var(--cty-navy); 
  text-decoration:none;
}


/* let's glow 2025 events */

.glow-bento-intro { width:100%; height:400px; position:relative; border-radius:32px; overflow:hidden;  }
.glow-bento-intro-image { position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center; background-size:cover; }
.glow-bento-intro-cover { position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(205deg, rgba(24, 22, 46, .10) 0%,  rgba(24, 22, 46, .25) 50%, rgba(24, 22, 46, 0.68) 90%) }
.glow-bento-intro-hover { position:absolute; top:0; left:0; width:100%; height:100%; }
.glow-bento-intro-content { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:end; justify-content:start; padding:24px 48px 24px 24px; }
.glow-bento-intro-headline { font-size:30px; line-height:1.2; font-weight:700; color:var(--cty-mint-light); text-wrap:balance;   }
.glow-bento-intro-text { font-size:15px; line-height:1.4; font-weight:500; color:var(--cty-mint-light); margin-top:0.5rem; }

.glow-bento-intro-datebox { position:absolute;
  top:12px; left:12px; border-radius:20px; 
  background-color:var(--cty-mint-primary); color:var(--cty-mint-dark);
  display: flex;
  width:100px; height:70px; 
  flex-direction: column;  /* Stack the text vertically */
  justify-content: center;  /* Center the content vertically */
  align-items: center;  /* Center the content horizontally */
  text-align: center;  /* align the text inside each child div */
}
.glow-bento-intro-datebox-month { font-size:14px; line-height:20px; font-weight:800; text-transform:uppercase; }
.glow-bento-intro-datebox-dates { font-size:30px; line-height:1; font-weight:800; }

.glow-bento-intro .glow-bento-intro-hover { background-color:rgba(24, 22, 46, 0.20); transition: all 250ms ease-out 0s; }
.glow-bento-intro:hover .glow-bento-intro-hover { background-color:rgba(24, 22, 46, 0); }
@media all and (min-width: 992px) {
  .glow-bento-intro { height:600px; }
}








/* let's glow locations swiper */

.glow-swiper-hold { margin:1.5rem 0; position:relative; }

.glow-swiper-button-next, .glow-swiper-button-prev {
  display: flex;
  position: absolute;
  z-index: 10;
  top:400px;
  left:-16px;
  background-color: var(--cty-navy);
  border: 1px solid var(--cty-mint-medium);
  color: var(--cty-mint-medium);
  padding: 0 !important;
  font-size: 16px;
  line-height: 32px;
  height: 32px;
  width: 32px;
  margin-top: -16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 250ms ease;
  }
  .glow-swiper-button-next {
    left:auto; right:-16px;
  }

.glow-loc-card { display:block; width:100%; background-color:var(--cty-mint-light); color:var(--cty-navy); border-radius:30px; overflow:hidden; }
.glow-loc-card-image { display:block; width:100%; } 
.glow-loc-card-img { display:block; width:100%; height:400px; background-size:cover; background-position:center center; }
.glow-loc-card-content { display:block; width:100%; }
.glow-loc-card-content-hold { padding:1.5rem; }



@media all and (min-width: 992px) {
  .glow-swiper-button-next, .glow-swiper-button-prev { top:50%; }
  .glow-loc-card { display:flex; width:100%; height:600px;  }
  .glow-loc-card-image { width:50%; padding:0; }
  .glow-loc-card-img { width:100%; height:100%; padding:0; }
  .glow-loc-card-content { width:50%; padding:0; }
  .glow-loc-card-content-hold { 
    display: flex; height:600px; 
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */ 
   }
  .glow-loc-card-content-hold > div { width:100%; padding:1rem; }
}

.glow-card-light { width:60px; height:60px; background:url('https://ctycms.com/ca-downtown-sf/glow-light.svg') center center no-repeat; background-size:contain; margin-bottom:12px; }

.glow-loc-name { font-size:1.5rem; font-weight:800; }
.glow-loc-name a, .glow-loc-name a:hover { color:#ed1c24; }
.glow-loc-loc { font-size:18px; font-weight:500; }
.glow-loc-sub { font-size:0.9rem; font-weight:700; margin-top:12px; margin-bottom:8px;  }
.glow-loc-subtext { font-size:0.9rem; }
.glow-loc-subtext a { color: inherit; text-decoration:underline; }
.glow-loc-subtext a:hover { color: inherit; text-decoration:underline; }


/* let's glow artists slider */

.glow-artists-swiper-hold { margin:1.5rem 0; position:relative; }

.glow-art-card { width:100%; height:100%; background-color:var(--cty-navy); color:white; border:1px solid var(--cty-mint-medium); border-radius:30px; overflow:hidden; }
.glow-art-card a { display:inline; width:100%; height:100%; text-decoration:none;  }
.glow-art-card a:hover { text-decoration:none; }

.glow-art-card-image { display:block; }
.glow-art-card-image-img { width:100%; height:400px; background-position:center center; background-size:cover; }
.glow-art-card-content { padding:0 1.5rem 1.5rem 1.5rem; }

.glow-art-card-table { display:table; width:100%; margin-top:-25px; margin-bottom:24px; }
.glow-art-card-circle { display:table-cell; width:134px; vertical-align:bottom; }
.glow-art-card-circle-img { width:110px; height:110px; border-radius:50%; border:1px solid var(--cty-mint-medium); background-position:center center; background-size:cover; }
.glow-art-card-cell { display:table-cell; width:auto; vertical-align:bottom; }

.glow-art-card-artist-name { font-size:1.1rem; line-height:1.2; font-weight:800; }
.glow-art-card-artist-city { font-size:0.8rem; line-height:1.2; font-weight:600; }

.glow-art-card-artwork-title { font-size:1.3rem; line-height:1.2; font-weight:800; margin-bottom:0.25rem; }
.glow-art-card-artwork-short { font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
   margin-bottom:0.75rem;
 }

.glow-art-card-artwork-place { font-size:0.8rem; line-height:1.2; font-weight:400; margin-bottom:0.25rem; color:var(--cty-mint-light); }
.glow-art-card-artwork-place span { display:inline-block; width:20px; color:var(--cty-mint-primary); }
.glow-art-card-artwork-address {font-size:0.8rem; line-height:1.2; font-weight:600; }

/* let's glow immersive */

.glow-basic-cards {
  .op-card a { display:inline; color: #18162E; }
  .op-headline { color:var(--cty-mint-light); }
  .op-html p { font-size:16px; }
  .op-html p b { color:white; }
}




/* let's glow discount slider */


.glow-swiper-hold-discounts { margin:1.5rem 0; position:relative; }

.glow-swiper-hold-discounts {
.glow-swiper-button-next, .glow-swiper-button-prev {
  display: flex;
  position: absolute;
  z-index: 10;
  top:50%;
  left:-16px;
  background-color: var(--cty-navy);
  border: 1px solid var(--cty-mint-medium);
  color: var(--cty-mint-medium);
  padding: 0 !important;
  font-size: 16px;
  line-height: 32px;
  height: 32px;
  width: 32px;
  margin-top: -16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 250ms ease;
  }
  .glow-swiper-button-next {
    left:auto; right:-16px;
  }
}

.glow-disc-card { width:100%; height:100%; background-color:var(--cty-mint-light); color:var(--cty-navy); border-radius:30px; overflow:hidden; }
.glow-disc-card a { display:block; width:100%; height:100%; text-decoration:none; color:inherit; }
.glow-disc-card a:hover { color:inherit; text-decoration:none; }

.glow-disc-card-image-img { width:100%; height:300px; background-position:center center; background-size:cover; }
.glow-disc-card-content { padding:1rem; }

.glow-disc-card-name { font-weight:800; font-size:1.1rem; line-height:1.2; margin-bottom:0.5rem; text-wrap:balance;  }
.glow-disc-card-address { font-weight:700; font-size:0.7rem; line-height:1.2; text-transform:uppercase; margin-bottom:0.5rem; text-wrap:balance;  }



/* let's glow specials */

.glow-specials-button-group { margin:0.5rem 0 1.5rem 0; }
.glow-specials-button-group button { 
  text-decoration:none; 
  font-size:0.7rem;
  line-height:1;
  font-weight:700;
  text-transform:none;
  letter-spacing: 0rem;
  color:var(--cty-navy);
  background-color:inherit; 
  border:1px solid var(--cty-navy); 
  transition:var(--cty-transition-hover); 
  border-radius:2px;
  padding:0.5rem 0.75rem;
  white-space: nowrap;
  margin:4px 3px; 
  text-transform:uppercase;
  border-radius:24px;
}
.glow-specials-button-group button:hover { 
  background-color:var(--cty-navy); 
  border-color:var(--cty-navy); 
  color:white; 
  text-decoration:none; 
}
.glow-specials-button-group button.button-selected { 
  background-color:var(--cty-navy); 
  border-color:var(--cty-navy);  
  color:white; 
  text-decoration:none; 
}

.glow-special-card { display:block; width:100%; background-color:var(--cty-mint-primary); color:var(--cty-navy); border-radius:30px; overflow:hidden;  }
.glow-special-card a { display:flex; width:100%; height:auto; text-decoration:none; color:inherit; }
.glow-special-card a:hover { color:inherit; text-decoration:none; }

.glow-special-card-hold { display:table; width:100%; }
.glow-special-card-image { display:table-cell; width:30%; height:100%; background-position:center center; background-size:cover; }
.glow-special-card-content { display:table-cell; width:70%; height:100%; padding:1rem; }

.glow-special-card-subhead { font-weight:700; font-size:0.7rem; line-height:1.25; text-transform:uppercase; margin-bottom:0.25rem; text-wrap:balance; }
.glow-special-card-headline { font-weight:700; font-size:1rem; line-height:1.25; text-transform:none; margin-bottom:0.25rem; text-wrap:balance; }
.glow-special-card-address { font-weight:700; font-size:0.7rem; line-height:1.25; text-transform:none; margin-bottom:0.5rem; text-wrap:balance; }
.glow-special-card-text { font-weight:500; font-size:0.9rem; line-height:1.25; text-wrap:balance;  }