/* cards */

.bg-card { background-color:white; } 
.fg-card { color:black; } 

.oc-cta { background-color:var(--cty-alink); color:white; padding:0.25rem 0.75rem; margin-top:1rem; }
.oc-cta:hover { background-color:var(--cty-ahover); }
.oc-cta a { color:white; text-decoration:none; }
.oc-cta a:hover { background-color:var(--cty-ahover);  color:white; text-decoration:none; }


/* spinny stat cards */

.oly-stat-cards { margin:1.5rem 0; }
.oly-stat-card { width:100%; height:100%; padding:2rem 2rem; text-align:center; }
.oly-stat-card-a { display:block; padding-bottom:10px; }
.oly-stat-card-b { display:block; padding-top:10px; border-top:1px solid white; }
.oly-stat-card-a-lg { font-family: 'clarendon-urw', serif; font-size:2.5rem; font-weight: 700; text-wrap:balance; }
.oly-stat-card-b-md { font-size:0.9rem; font-weight:600; text-transform:uppercase; letter-spacing:0.050rem; text-wrap:balance; }
.oly-stat-card-b-sm { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.050rem; text-wrap:balance; }




.op-cards { margin:1.5rem 0; }

/* gets class bg-card and fg-card */
.op-card { /*background-color:var(--cty-bg-card); color:var(--cty-default-fg); */ width:100%; height:100%; }
.op-card a { display:block; width:100%; height:100%; text-decoration:none; color:inherit; }
.op-card a:hover { color:inherit; text-decoration:none; }

.op-card-image { display:block; }
.op-card-image-img { width:100%; background-position:center center; background-size:cover; }

.op-card-content { padding:1.5rem; }

/* some of these styles also used elsewhere */

.op-subhead { font-weight:700; font-size:0.9rem; text-transform:uppercase; margin-bottom:0.5rem; text-wrap:balance; }
.op-headline { font-weight:800; font-size:1.4rem; line-height:1.2; margin-bottom:0.25rem; text-wrap:balance; }
.op-text { font-size:0.9rem; margin-bottom:0.5rem; text-wrap:balance; }

.op-cta { font-weight:700; font-size:0.9rem; margin-top:1rem; text-wrap:balance; }


/* longmont highlights */

.ldda-cards { margin:1.5rem 0; }

.ldda-card { width:100%; height:100%; position:relative; padding-bottom:70px; background-color:inherit; }
.ldda-card a { display:block; width:100%; height:100%; text-decoration:none; color:inherit; }
.ldda-card a:hover { color:inherit; text-decoration:none; }

.ldda-card-image { display:block; position:relative; z-index:1; padding-right:12px; }
.ldda-card-image-hold { width:100%; }
.ldda-card-image-img { width:100%; background-position:center center; background-size:cover; }

.ldda-card-content { padding:0 0 0 24px; position:absolute; z-index:2; bottom:0px; }

.ldda-card-content-hold { padding:1.1rem 1.5rem; background-color:white; border-left:4px solid #8dd7f7;  }


.ldda-card-cta { 
  margin-top:0.3rem;
  display:inline-block;
  background-color:var(--cty-brand-blue); color:white; font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem; 
  padding: .375rem .75rem;
}


/* guide cards */


.guide-cards { margin:1.5rem 0; }

.guide-card { background-color:#666; color:white; width:100%; height:auto; }
.guide-card a { display:block; width:100%; padding-bottom:150%; text-decoration:none; color:inherit; position:relative; }
.guide-card a:hover { color:inherit; text-decoration:none; }
.guide-card-image { display:block; width:100%; padding-bottom:150%; position:absolute; top:0; z-index:1; background-position:center center; background-size:cover;  }
.guide-card-cover { display:block; width:100%; padding-bottom:150%; position:absolute; top:0; z-index:2; background-color:rgba(0,0,0,0.25); }

.guide-card-content { display:flex;  align-items:end; padding:1.5rem; 
  position:absolute; top:0; z-index:3; width:100%; height:100%;  
}
.guide-card-headline {
  width:100%;
  font-size:2.25rem; 
  line-height:1.1; 
  font-weight:800; 
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
 }







/* basic cards */

.image-cover { background-position:center center; background-size:cover; }
.image-square { width:100%; padding-bottom:100%; background-position:center center; background-size:cover; }
.image-2x1 { width:100%; padding-bottom:50%; background-position:center center; background-size:cover; }
.image-3x2 { width:100%; padding-bottom:66%; background-position:center center; background-size:cover; }
.image-5x4 { width:100%; padding-bottom:80%; background-position:center center; background-size:cover; }
.image-4x5 { width:100%; padding-bottom:120%; background-position:center center; background-size:cover; }


.crds { margin:1.5rem 0; }
.crd { background-color:var(--cty-bg-card); height:100%; }
.crd-auto { height:auto; }  /* as with masonry */ 
.crd > a { display:block; height:100%; text-decoration:none; color:inherit; } /* just when whole card is clickable */
.crd a:hover { color:inherit; text-decoration:none; }
.crd-image { display:block; }
.crd-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.crd-content { padding:1.5rem; }
.crd-headline { font-weight:700; font-size:1.1rem; margin-bottom:0.5rem; }
.crd-text { font-size:1rem;  margin-bottom:0.5rem; }
.crd-linklabel { font-weight:700; margin-top:0.5rem; }






/* events cards */

a.evcard { display:block; width:100%; height:100%; background-color:white; color:inherit; text-decoration:none; position:relative; }

.evcard-image { position:relative; width:100%; }
.evcard-image-image { width:100%; background-position:center center; background-size:cover; }
.evcard-image-cover { position:absolute; top:0px; width:100%; height:100%; background-color:rgba(0,0,0,0); transition: all 250ms ease-out; }

.evcard-content { padding:1.5rem;}
.evcard-content-subhead { font-weight:800; font-size:0.6rem; text-transform:uppercase; margin-bottom:0.5rem; text-wrap:balance; }
.evcard-content-headline { font-weight:800; font-size:1.4rem; line-height:1.2; margin-bottom:0.5rem; text-wrap:balance;  }
.evcard-content-time { font-weight:400; font-size:0.8rem; margin-bottom:0.5rem; }
.evcard-content-venue { font-weight:400; font-size:0.8rem; margin-bottom:0.5rem; }
.evcard-content-text { font-size:0.9rem; margin-bottom:0.5rem; text-wrap:balance; }

.evcard-content-time span, .evcard-content-venue span { display:inline-block; text-align:center; width:20px; color:black; }
.evcard-content-text span { opacity:0.5; }

.evcard-date-box { position:absolute; top:0; right:0; background-color:white; color:black;  
  display: flex;
  width:80px; height:80px; 
  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 */
}

.evcard-date-dow { font-size:12px; line-height:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; }
.evcard-date-day { font-size:22px; line-height:28px; font-weight:800; letter-spacing:0.050rem; }
.evcard-date-month { font-size:12px; line-height:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; }

.evcard-date-range { font-size:12px; line-height:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.050rem; }
.evcard-date-range span { font-size:16px; line-height:18px; font-weight:800; }
.evcard-date-through { font-size:10px; line-height:16px; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; }

a.evcard:hover { color:inherit; text-decoration:none; }
a.evcard:hover .evcard-content-headline { color:inherit; }
a.evcard:hover .evcard-image-cover { background-color:rgba(0,0,0,0.15); }

.ev-card-creative { font-size:0.7rem; font-weight:700; line-height:16px; margin-top:0.25rem; margin-bottom:0.5rem; text-wrap:balance; }
.ev-card-creative { padding-left:20px; background:url('/favicon.svg') left center; background-repeat:no-repeat; background-size:16px 16px; } 


/* special cards */

.special-cards { margin:1.5rem 0; }
.special-card { background-color:var(--cty-bg-card); height:auto; }
.special-card-image { display:block; }
.special-card-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.special-card-content { padding:1.5rem; }
.special-card-headline { font-weight:700; font-size:1.2rem; margin-bottom:1rem; }
.special-card-text { font-size:0.85rem;  margin-bottom:1rem; }
.special-card-limits { font-size:0.85rem;  margin-bottom:1rem; }
.special-card-link { font-weight:700; margin-top:1rem; }
.special-card-venue * { font-size:0.9rem; }
.special-card-venue .awesome-box { display:table; width:100%; }
.special-card-venue .awesome-box-icon { display:table-cell; width:24px; vertical-align:top; text-align:left; }
.special-card-venue .awesome-box-link { display:table-cell; width:auto; vertical-align:top; text-align:left; }




/* post cards */

.post-crds { margin:1.5rem 0; }
.post-crd { background-color:var(--cty-brand-paleblue); height:100%; }
.post-crd a { display:block; height:100%; text-decoration:none; color:inherit; }
.post-crd a:hover { color:inherit; text-decoration:none; }
.post-crd-image { display:block; }
.post-crd-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.post-crd-content { padding:1.5rem; }
.post-crd-subhead { font-weight:800; font-size:0.6rem; text-transform:uppercase; margin-bottom:0.5rem; text-wrap:balance; }
.post-crd-headline { font-weight:800; font-size:1.4rem; line-height:1.2; margin-bottom:0.25rem; text-wrap:balance; }
.post-crd-text {  font-size:0.9rem; margin-bottom:0.5rem; text-wrap:balance; }
.post-crd-minutes { font-weight:700; font-size:0.7rem; margin-top:1rem; text-transform:uppercase; text-wrap:balance; }




/* public art cards */

.part-cards { margin:1.5rem 0; }
.part-card { background-color:var(--cty-brand-blue); color:white; height:100%; } 
.part-card a { display:block; height:100%; text-decoration:none; color:inherit; }
.part-card a:hover { color:inherit; text-decoration:none; }
.part-card-image { display:block; }
.part-card-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.part-card-content { padding:1.5rem 1.5rem 1rem 1.5rem; }

.part-card-headline { font-size:1.25rem; line-height:1.3; font-weight:700; margin-bottom:0.15rem; }
.part-card-artist { font-size:0.9rem; line-height:1.3; font-weight:400; margin-bottom:0.5rem; }
.part-card-text { font-size:0.75rem; line-height:1.3;}





/* place cards */

.pcrds { margin:1.5rem 0; }
.pcrd { background-color:var(--cty-brand-paleblue); height:100%; } 
.pcrd a { display:block; height:100%; text-decoration:none; color:inherit; }
.pcrd a:hover { color:inherit; text-decoration:none; }
.pcrd-image { display:block; }
.pcrd-image-img { display:block; background-color:#eee; background-size:cover; background-position:center center; }
.pcrd-content { padding:1.5rem; }

.pcrd-headline { font-size:1rem; font-weight:700; margin-bottom:0.1rem; }
.pcrd-text { font-size:0.8rem; }


/* staff card */

.staff-card { background-color:inherit; text-align:center; }
.staff-card-image { display:block; width:100%; max-width:270px; margin:0 auto; }
.staff-card-image-circle { display:block; background-color:#eee; background-size:cover; background-position:center center; 
width:100%; padding-bottom:100%; border-radius:50%;
}
.staff-card-content { padding:1rem 0; }
.staff-icon { display:inline-block; text-align:center; width:30px; padding-right:10px; }
.staff-card-headline { font-weight:700; font-size:1.1rem; margin-bottom:0rem; }
.staff-card-title { font-size:1rem; margin-bottom:0rem; }
.staff-card-phone { font-weight:500; font-size:0.9rem; margin-top:0.5rem; }
.staff-card-email { font-weight:500; font-size:0.9rem; margin-top:0.5rem; }





/* simple slider */

.cafe-swiper-hold { position:relative; }

.cafe-swiper-next, .cafe-swiper-prev {
  display: flex;
  position: absolute;
  top: var(--swiper-navigation-top-offset,40%);
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: var(--cty-alink);
  font-size:30px;
  color: #fff;
  border-radius:24px;
}
.cafe-swiper-prev { left:-22px; }
.cafe-swiper-next { right:-22px; }


/* simple slider carousel */

.cafe-carousel-card { position:relative; }

.cafe-carousel-next, .cafe-carousel-prev {
  display: flex;
  position: absolute;
  top: var(--swiper-navigation-top-offset,50%);
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: var(--cty-alink);
  font-size:30px;
  color: #fff;
  border-radius:24px;
}
.cafe-carousel-prev { left:-22px; }
.cafe-carousel-next { right:-22px; }

.carousel-card { display:block; background-color:#fafafa; }
.carousel-card-image { display:block; }
.carousel-card-image-img { display:block; width:100%; padding-bottom:80%; background-size:cover; background-position:center center; }
.carousel-card-content { padding:1rem; }
.carousel-card-content-cell { text-align:left; }

@media all and (min-width: 992px) {
  .carousel-card { display:flex; flex-direction: row-reverse; }
  .carousel-card-image { width:50%; height:auto; }
  .carousel-card-image-img { width:100%; height:100%; padding:0; }
  .carousel-card-content { width:50%; min-height:500px; padding:0; display: flex; align-items: center; }
  .carousel-card-content-cell { padding:0 2rem; }
}
@media all and (min-width: 992px) {
  .carousel-card-content-cell { padding:0 4rem; }
}

.carousel-card-headline { font-weight:700; font-size:1.1rem; margin-bottom:0.5rem; }
.carousel-card-text { font-size:1rem; }
.carousel-card-link { margin-top:0.5rem; }




/* hero slider */

.hero-swiper-hold { width:100%; position:relative; }
.hero-swiper-height { height:75vh; max-height:600px; min-height:100px; }
.hero-swiper-image-bg { width:100%; background-color:#eee; background-size:cover; background-position:center center;}

.hero-swiper-next, .hero-swiper-prev {
  display: flex;
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: var(--cty-alink);
  font-size:30px;
  color: #fff;
  border-radius:24px;
}
.hero-swiper-prev { left:12px; }
.hero-swiper-next { right:12px; }
@media all and (min-width: 992px) {
  .hero-swiper-prev { left:5%; }
  .hero-swiper-next { right:5%; }
}

.hero-swiper-cover { 
  width:100%; height:100%; padding:24px 72px;
  background: rgb(48,93,200);
  background: linear-gradient(60deg, rgba(48,93,200,0.5) 0%, rgba(227,18,175,0.5) 100%); 
}
.hero-swiper-flex {
  width:100%; height:100%;
  display: flex; align-items: center; justify-content: center;
}
.hero-swiper-content { width:100%; max-width:600px; text-align:center; color:white; }
.hero-swiper-content-headline { font-size:1.25rem; font-weight:700; margin-bottom:0.5rem; }
.hero-swiper-content-text { font-size:1rem; font-weight:400; }
.home-swiper-content-link { margin-top:0.5rem; }


/* artcar longmont */

/* artcar */

.artcar-swiper-hold { width:100%; max-width:1500px; margin:0 auto; position:relative; }

.artcar-swiper-next, .artcar-swiper-prev {
  position: absolute;
  top: 200px; /* half desktop image height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius:50%;
  font-size: 30px;
  color: #fff;
  background-color: var(--cty-brand-red);
  z-index: 10;
  cursor: pointer;
}
.artcar-swiper-prev { left:2px; }
.artcar-swiper-next { right:2px; }

.artcrd { width:100%; }
.artcrd-image { display:block; }
.artcrd-image-img { display:block; width:100%; height:300px; background-color:#eee; background-size:cover; background-position:center center; }

.artcrd-content-hold { margin-top:-30px; width:90%; max-width:600px; clip-path: polygon(0 0, 100% 0, calc(100% - 0.4 * 100vmax) 100vmax, 0 100vmax);}
.artcrd-content { display:none; padding:1.5rem 3rem 1.5rem 1.5rem; background-color:white; color:black; }
.artcrd-subhead { font-weight:700; font-size:0.7rem; margin-bottom:0.5rem; text-transform:uppercase; }
.artcrd-headline { font-weight:700; font-size:1.2rem; line-height:1.3; margin-bottom:0.5rem; }
.artcrd-text {font-weight:400; font-size:0.8rem; margin-bottom:0.5rem;}

.artcrd-linklabel { color:black; font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;}
.artcrd-linklabel a { color:black; text-decoration:none; }
.artcrd-linklabel a:hover { color:black; text-decoration:none; }

.artcar-swiper-hold .swiper-slide { transition: opacity 0.35s linear 0s; }
.artcar-swiper-hold .swiper-slide-active .artcrd-content { display:block; }
.artcar-swiper-hold .swiper-slide-prev .artcrd-image-img { height:280px; margin-top:20px; opacity:0.5; }
.artcar-swiper-hold .swiper-slide-next .artcrd-image-img { height:280px; margin-top:20px; opacity:0.5; }

@media all and (min-width: 992px) {
  .artcrd-content-hold { margin-top:-60px; margin-left:30px;}
  .artcar-swiper-next, .artcar-swiper-prev { top:300px; /* half desktop image height */ }
  .artcar-swiper-next { right: 8%; }
  .artcar-swiper-prev { left: 8%; } 
  .artcrd-image-img { height:600px; }
  .artcar-swiper-hold .swiper-slide-prev .artcrd-image-img { height:560px; margin-top:20px; }
  .artcar-swiper-hold .swiper-slide-next .artcrd-image-img { height:560px; margin-top:20px; }
}

/* second saturday event cards v1 */

.card-sat-margin { margin-bottom:30px; }
.card-sat { width:100%; height:100%; }
.card-sat a { display:block; width:100%; height:100%; background-color:#fafafa; border-radius: 0px 0px 6px 6px; overflow:hidden; position:relative; }
.card-sat-image-image { width:100%; padding-bottom:240px; background-size:cover; background-position:center center; border-radius: 6px 6px 0px 0px;}
.card-sat-content { padding:40px 20px 20px 20px; text-align:center; }
.card-sat-content-name { color:#222; font-size:26px; line-height:34px; margin-bottom:16px; font-weight:700;}
.card-sat-content-location { color:#222; font-size:16px; line-height:24px; margin-bottom:16px; font-weight:500; }
.card-sat a .card-sat-date { position:absolute; top:235px; left:40px; right:40px; background-color:#b43e97; color:#fff; text-align:center; font-size:14px; line-height:40px; text-transform:uppercase; font-weight:700; }
.card-sat a:hover .card-sat-date { background-color:#98347F; }


/* second saturday event cards v2 */

.card-crawl { width:100%; height:100%; background-color:#f5f5f5; }
.card-crawl a { display:block; text-decoration:none; }
.card-crawl a:hover { display:block; text-decoration:none; }
.card-crawl-image { width:100%; padding-bottom:66%; background-size:cover; background-position:center center; }
.card-crawl-content { padding:24px 30px 24px 24px; text-align:left; }
.card-crawl-content-name { color:black; font-size:26px; line-height:1.3; font-weight:700; margin-bottom:8px; } 
.card-crawl-content-tag { color:black; margin-bottom:4px; } 
.card-crawl-content-time { color:black; margin-bottom:4px; } 
.card-crawl-content-location { color:black; margin-bottom:4px; } 
.card-crawl-icon {color:black; width:26px; display:inline-block; text-align:left; padding-left:4px; }


.card-bcrawl { width:100%; display:table; margin-bottom:24px; }
.card-bcrawl a { display:block; text-decoration:none; }
.card-bcrawl a:hover { display:block; text-decoration:none; }
.card-bcrawl-image { display:table-cell; width:150px; vertical-align:top; }
.card-bcrawl-image-image { width:100%; padding-bottom:66%; background-size:cover; background-position:center center; }
.card-bcrawl-content { display:table-cell; width:auto; vertical-align:top; padding:0px 0px 0px 24px; text-align:left; }
.card-bcrawl-content-name { color:black; font-size:22px; line-height:1.3; font-weight:700; margin-bottom:8px; } 
.card-bcrawl-content-tag { color:black; margin-bottom:4px; } 
.card-bcrawl-content-time { color:black; margin-bottom:4px; } 
.card-bcrawl-content-location {color:black; margin-bottom:4px; } 
.card-bcrawl-icon { color:black; width:26px; display:inline-block; text-align:left; padding-left:4px; }


/* creative crawl divider */

.crawl-fancy-headline { position:relative; background-color:#fff; padding:24px 0px; margin-bottom:1rem; }
.crawl-fancy-headline-text { position:relative; z-index:2; text-align:center; padding:0px 24px; }
.crawl-fancy-headline-text span { display:inline-block; background-color:#fff; padding:0px 16px;font-family: 'Josefin Sans';
font-style: normal;
font-weight: 500;
font-size: 22px;
line-height: 28px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.335em; }
.crawl-fancy-headline-line { position:absolute; z-index:1; top:50%; margin-top:-2px; width:100%; height:0; border-top:2px dashed #B34095; }


/* creative crawl map */

.ctymrk1 { width: 30px; height: 30px; cursor: pointer; }
.ctymrk2 { width: 24px; height: 24px; cursor: pointer; }
/* because it's a URL you must encode the color */
.ctymrk-bgpin1 { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23B34095' d='M8,16c0,0,6-5.7,6-10c0-3.3-2.7-6-6-6S2,2.7,2,6C2,10.3,8,16,8,16z'/%3E%3C/svg%3E");
  background-size: contain;
}
.ctymrk-bgpin2 { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23444444' d='M8,16c0,0,6-5.7,6-10c0-3.3-2.7-6-6-6S2,2.7,2,6C2,10.3,8,16,8,16z'/%3E%3C/svg%3E");
  background-size: contain;
}

/* add icon */
.ctymark-icon1 { position:absolute; top:2px; left:5px; width:20px; height:20px; text-align:center; font-size:10px; line-height:20px; color:white; }
.ctymark-icon2 { position:absolute; top:2px; left:4px; width:16px; height:16px; text-align:center; font-size:8px; line-height:16px; color:white; }

/* mapbox-popup */
.popup-crawl { width:200px; padding-bottom: 18px!important; } 

.ctypop-name { display:block; font-weight:600; font-size:18px; line-height:1.3; }
.ctypop-address { display:block; font-weight:400; font-size:14px; line-height:1.3; margin-top:8px; }
.ctypop-link { display:block; margin-top:12px; }