/*
bootstrap has .card already, so we will use .crd
*/

.image-auto { width:100%; } /* padding set inline per image */
.image-p50 { width:100%; padding-bottom:50%; }
.image-p66 { width:100%; padding-bottom:66%; }
.image-p80 { width:100%; padding-bottom:80%; }

.crdset { margin:1.5rem 0; }
.crd { background-color:#fafafa; height:100%; }
.crd-auto { height:auto; }  /* as with masonry */ 
.crd a { display:block; height:100%; text-decoration:none; color:inherit; }
.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; margin-bottom:0.5rem; }
.crd-text { font-size:1rem; }



/* events cards */

a.evcrd { display:block; width:100%; height:100%; background-color:#e9f8fb; color:inherit; text-decoration:none; position:relative;border-top: 8px solid var(--ctybrandblue); }
a.evcrd:hover { color:inherit; text-decoration:none; }

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

.evcrd-content { padding:1.5rem; text-align:left; }
.evcrd-content-tagstring { text-transform: uppercase; font-size: 0.75rem; margin-bottom: 0.5rem; font-weight: 600; }
.evcrd-content-headline { text-wrap:balance; font-family: var( --ssdisplayfont), sans-serif; font-size: 1.6rem; line-height:1.25; font-weight: 700; margin-bottom: 0.5rem; }
.evcrd-content-venue { text-wrap:balance; color:inherit; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight:600; }
.evcrd-content-time { text-wrap:balance; color:inherit; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight:500; }

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

.evcrd-date-box { position:absolute; top:0px; left:14px; background-color:#e9f8fb; color:inherit;
  text-align:center; padding:14px 0; width:80px; }
.evcrd-date-dow { font-size:12px; line-height:16px; font-weight:500; }
.evcrd-date-day { font-size:30px; line-height:36px; font-weight:600; letter-spacing:0.100rem; }
.evcrd-date-month { font-size:12px; line-height:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.100rem; }

a.evcrd:hover .evcrd-image-cover { background-color:rgba(0,0,0,0.15); }
a.evcrd:hover .evcrd-content-headline { color:black; }


/* post cards */

.post-crdset { margin:1.5rem 0; }
.post-crd { 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 { width:100%; padding-bottom:100%; display:block; background-size:cover; background-position:center center; }
.post-crd-content { padding:1.5rem; }
.post-crd-tags { text-transform: uppercase; font-size: 0.75rem; margin-bottom: 0.2rem; font-weight: 600; }
.post-crd-headline { text-wrap:balance; font-family: var( --ssdisplayfont), sans-serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 0.2rem;}
.post-crd-text { text-wrap:balance; color:inherit; margin-bottom: 0.5rem; font-size: 1rem; }
.post-crd-cta { font-weight: 700; font-size: 0.9rem;}

/* place cards map at bottom */

.pcrdset { margin:2.5rem 0; }
.pcrd { background-color:var(--ctybrandpale); 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 { text-wrap:balance; color:inherit; font-family: var( --ssdisplayfont), sans-serif; font-size:24px; line-height:1.2; font-weight:700; margin-bottom:10px; }
.pcrd-text { text-wrap:balance; color:inherit; font-size:14px; line-height:1.2; font-weight:500; margin-bottom:10px;  }

/* place cards silver spring */


.place-cards { margin-top:2rem; }
.place-card { margin:0; overflow:hidden; border-bottom:3px solid var(--ctybrandgreen);  }
.place-card a { display:block; width:100%; text-decoration:none; color:var(--cty-default-txt-darker); }
.place-card a:hover { display:block; width:100%; text-decoration:none; color:var(--cty-default-txt-darker); }

.place-card-hold { display:table; width:100%; }
.place-card-content { display:table-cell; width:100%; vertical-align:bottom; padding:1rem 1rem 1rem 0; position:relative; z-index:1 }
.place-card-image { display:table-cell; width:150px; vertical-align:bottom; }
.place-card-image-bg { width:150px; height:100px; background-position:center center; background-size:cover; }

.place-card-content-headline { text-wrap:balance; color:inherit; font-family: var( --ssdisplayfont), sans-serif; font-size:24px; line-height:1.2; font-weight:700; margin-bottom:10px; }
.place-card-content-address { text-wrap:balance; color:inherit; font-size:14px; line-height:1.2; font-weight:500; margin-bottom:10px; }
.place-card-content-more { color:var(--cc-alink); font-size:0.8rem; font-weight:600;  }


@media all and (min-width: 992px) {
  .place-card-content-headline { font-size:24px; }
  .place-card-content-address { font-size:16px; }
  .place-card-content { padding:2rem;}
  .place-card-image { width:240px; }
  .place-card-image-bg { width:240px; height:160px; }
}






.lk { display:table; width:100%; margin-bottom:0.75rem; background-color:#fafafa; }
.lk a { text-decoration:none; color:inherit; }
.lk a:hover { text-decoration:none; color:inherit; }
.lk-arrow { display:table-cell; width:30px; vertical-align:top; font-size:1rem; line-height:1.4; color:var(--cc-alink); }
.lk-content { display:table-cell; width:auto; vertical-align:top; }
.lk-content-primary { font-size:1rem; font-weight:700; margin-bottom:0.1rem; }
.lk-content-secondary { font-size:0.9rem; }




/* soly domino cards/ bottom of home page */

.soly-basic-domino { width:100%; margin-top:2rem; }
.soc-domino-row  { display:block; margin-bottom:2rem; }
.soc-domino-image { display:block; }
.soc-domino-image-img { display:block; width:100%; padding-bottom:58%; background-size:cover; background-position:center center; }
.soc-domino-content { display:block; padding:1.5rem 1.5rem 1.5rem 0px; }
@media all and (min-width: 768px) {
	.soc-domino-row { display:flex; align-items:center; margin-bottom:3rem; }
	.soc-domino-row-reverse { flex-direction: row-reverse; }
	.soc-domino-image  { width:48%; padding:0; }
  .soc-domino-image-img { width:100%; height:100%; padding:0; min-height:500px;  }
	.soc-domino-content { width:52%; padding:2rem; }
}
@media all and (min-width: 992px) {
	.soc-domino-content { padding:2.5rem; }
}
@media all and (min-width: 1200px) {
	.soc-domino-content { padding:4rem; }
}

.soc-subhead { text-transform:uppercase; font-size:0.75rem; margin-bottom:0.2rem; font-weight:600; }
.soc-headline { font-family: var( --ssdisplayfont), sans-serif; font-size:1.6rem; font-weight:700; margin-bottom:0.2rem; }
.soc-text { width:100%; margin-bottom:0.5rem; font-size:1rem; }
.soc-cta { font-weight:700; font-size:0.9rem;  }
.soc-cta a { text-decoration:none; }


.silver-swiper-hold .soc-subhead { color:inherit; }
.silver-swiper-hold .soc-headline { color:inherit; }
.silver-swiper-hold .soc-text { color:inherit; }
.silver-swiper-hold .soc-cta { color:inherit; }
.silver-swiper-hold .soc-cta a { color:inherit; }



/* color slider */

.xsoc-domino-row  { display:block; }
.xsoc-domino-image { display:block; }
.xsoc-domino-image-img { display:block; width:100%; padding-bottom:58%; background-size:cover; background-position:center center; position:relative; }
.xsoc-domino-content { display:block; padding:1.5rem 1.5rem 1.5rem 0px; }
@media all and (min-width: 768px) {
	.xsoc-domino-row { display:flex; align-items:center; }
	.xsoc-domino-row-reverse { flex-direction: row-reverse; }
	.xsoc-domino-image  { width:48%; padding:0; }
  .xsoc-domino-image-img { width:100%; height:100%; padding:0; min-height:500px;  }
	.xsoc-domino-content { width:52%; padding:2rem; }
}
@media all and (min-width: 992px) {
	.xsoc-domino-content { padding:2.5rem; }
}
@media all and (min-width: 1200px) {
	.xsoc-domino-content { padding:4rem; }
}

.black-over-blue .xsoc-domino-image-cover { position:absolute; top:0px; width:100%; height:100%; background:url('https://ctycms.com/md-silver-spring/wave-v.svg') center right; background-size:100px 150px; background-repeat: repeat-y; }




/* explore header */

/* campaign banner with image and text, as for Jazz Fest */
.exp-banner-campaign { width:100%; background-position:center center; background-size:cover; }
.exp-banner-campaign-cover { background-color:rgba(26,174,216,0.5); }
.exp-banner-campaign-hold { width:100%; max-width:900px; padding:80px 40px 40px 40px; margin:0 auto; }
.exp-banner-campaign-hold p { color:white!important; }
.exp-banner-campaign-hold h1 { color:white!important; }


/* explore color dominoss */

.exp-domino-row  { display:block; }
.exp-domino-image { display:block; }
.exp-domino-image-img { display:block; width:100%; padding-bottom:58%; background-size:cover; background-position:center center; position:relative; }
.exp-domino-content { display:block; padding:1.5rem; }
@media all and (min-width: 768px) {
	.exp-domino-row { display:flex; align-items:center; }
	.exp-domino-row-reverse { flex-direction: row-reverse; }
	.exp-domino-image  { width:48%; padding:0; }
  .exp-domino-image-img { width:100%; height:100%; padding:0; min-height:500px;  }
	.exp-domino-content { width:52%; padding:2rem; }
}
@media all and (min-width: 992px) {
	.exp-domino-content { padding:2.5rem; }
}
@media all and (min-width: 1200px) {
	.exp-domino-content { padding:4rem; }
}

/* black over blue */
.exp-domino-row-default {
	border-top:30px solid #e9f8fb;
	background-color:#e9f8fb;
}
.exp-domino-row-default .exp-domino-image-cover { 
	position:absolute; top:0px; width:100%; height:100%; background:url('https://ctycms.com/md-silver-spring/wave-exp-a.svg') center right; background-size:100px 150px; background-repeat: repeat-y; 
}

.exp-domino-row-reverse {
	color:var(--cty-default-txt-darker); 
	border-top:30px solid var(--ctybrandblue);
	background-color:var(--ctybrandblue); /*#0F5E75 */;
}
.exp-domino-row-reverse .exp-domino-image-cover { 
	position:absolute; top:0px; width:100%; height:100%; background:url('https://ctycms.com/md-silver-spring/wave-exp-b4.svg') center left; background-size:100px 150px; background-repeat: repeat-y; 
}