/*
CSS File for Color Cards Widget for the 160over90 Program Templates
*/
/* 
    Created on : Jul 24, 2025, 1:52:19 PM
    Author     : Adriana Samra
    For usage example see: /counseling/online-mental-health-resources.pcf
*/
.ju-cards-4 { margin-top: 10px; width:100%; margin-left: auto; margin-right: auto;margin-bottom: 2em; display: block; box-sizing: border-box;}
.ju-cards{ margin-top: 12px; display:grid;  grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 12px; }
.ju-cards .ju-card-item{padding: 12px 16px; display: grid; grid-template-rows: 160px auto; grid-template-columns: 1fr; border: 1px solid #fff;}
.ju-cards .ju-card-header{ text-align: center; padding-top: 10px; padding-bottom: 10px; }
.ju-cards .ju-card-header h3{ color: #ffffff; line-height: 1.1em; font-family: 'Fahkwang', sans-serif; text-transform: capitalize; text-align:center; margin-left: 6px; }
.ju-cards .ju-card-body .card-location{ font-size: 1em; text-align: center;color: #ffffff; }
.ju-cards-4 .card-shadow { -webkit-box-shadow: 2px 2px 10px 4px rgba(204,204,204,0.9);-moz-box-shadow: 2px 2px 10px 4px rgba(204,204,204,0.9);box-shadow: 2px 2px 10px 4px rgba(204,204,204,0.9);}
.ju-cards a.btn-cta{ color: #fff !important; width: 100% !important; max-width: 60% !important; border-color: #fff !important; text-align: center !important; display:block;}
.ju-cards a.btn-cta:hover{  border-color: #b1e4e3 !important; color: #b1e4e3 !important; background-color: transparent !important;    }
.ju-cards .ju-card-item:hover{ transform:scale(0.9); }
.guest-individual div a{ padding: 8px 16px; border: solid 1px rgb(28,170,149); color: #b1e4e3; font-family: 'MonumentExtended-Regular', sans-serif; font-size: 0.7em; text-decoration: none !important; text-transform: uppercase; letter-spacing: 3px;}
.guest-individual div a:hover{ background-color: rgb(28,170,149); color: #fff; }

@media (min-width: 900px) AND (max-width: 1440px) {
	.ju-cards{  grid-template-columns: 1fr 1fr 1fr;}
}
@media (min-width: 750px) AND (max-width: 980px) {
	.ju-cards{  grid-template-columns: 1fr;}
}
@media (max-width: 480px) {
	.ju-cards{  grid-template-columns: 1fr;}
}