/* CARD */
.cs-cards-container{text-align:center;margin:0 auto}
.cs-card{font-size:14px;width:17em;height:35em;position:relative;display:inline-block;background-color:#fff;border-radius:0.5em;box-shadow:0 10px 15px 2px rgba(0,0,0,0.2);overflow:hidden;padding:0 !important;margin:0 1.5em 1.5em 1.5em;overflow:hidden;font-family:NotesEsa;transition:all 0.35s ease}
.cs-card a{text-decoration:none!important;font-size:1em!important;cursor:pointer;display:flex;flex-direction:column;width:100%;height:100%}
/* -- card sections size -- */
.cs-card a>*{flex-grow:0;flex-shrink:0}
.cs-card .thumbnail{height:45%}
.cs-card .metainfo{height:3em; display: none;}
.cs-card .entry{flex-grow:1;flex-shrink:1;height:0%}
/* -- card elements -- */
.cs-card .thumbnail{transition:all 1s 0.05s ease;padding:0 1.5em;position:relative;align-items:center;justify-content:center;overflow:hidden;background:none;border:0;margin:0;border-radius:0}
.cs-card.sticky-post .thumbnail::after{content:"\f08d";font-family:'FontAwesome';z-index:1;font-size:2em;color:#ffd400;transform:rotate(20deg);text-shadow:2px 1px 1px rgb(0 0 0/80%);position:absolute;right:1rem;top:0.5rem}
.cs-card .entry{transition:all 1s 0.05s ease;padding:0 1.5em;position:relative;width:100%;z-index:2; height: 40%; display: flex; flex-direction: column; justify-content: flex-end;}
.cs-card .entry-info{width:100%;z-index:2;position:relative;text-align:left;margin-top:1.5em}
.cs-card .category{text-transform:uppercase;color:#fff;letter-spacing:2px;z-index:2;text-shadow:0 0 4px rgba(0,50,71,0.8)}
.cs-card .dimmer{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(0deg,rgba(0,50,70,0.5) 0%,rgba(0,50,70,0) 60%,rgba(0,50,70,0.15) 100%);background-color:transparent;z-index:1}
.cs-card a img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:all 1s 0.05s ease;object-position:50% 10%;margin:0}
.cs-card .heading{font-size:1.7em;font-weight:700;color:#006762;line-height:1.1em;padding:0;text-align:left;overflow:hidden;margin:1.5em 0 0.8em 0;letter-spacing:-0.5px}
.cs-card .sub-heading{display:block;font-family:NotesEsa;font-size:1.2em;line-height:1.3em;text-align:left;margin:-0.5em 0 0.5em 0;color:var(--eo-menu-bulet-on)}
.cs-card .sub-heading strong{font-size:1.1em}
.cs-card .sub-heading .highlight{display:inline-block;color:red;text-shadow:1px 0 1px rgba(255,0,0,0.4);width:100%}
.cs-card .sub-heading .highlight strong{display:inline-block;margin:0 -1.2em 0.3em -1.2em;padding:0.2em 1.2em;background-color:red;width:calc(100% + 2.4em);color:white}
.cs-card .sub-heading .highlight.tight{line-height:1.2em}
.cs-card .tag,.cs-card .pillar{display:inline-table;width:100%;width:-moz-max-content;width:max-content;color:#fff;background-color:rgba(0,50,70,0.7);text-transform:uppercase;padding:3px 5px;letter-spacing:0.1em;transform:translateX(-50%) translateY(-50%);position:absolute;top:0;left:50%;border-top:2px solid var(--eo-side-link);border-bottom:2px solid transparent}
.cs-card .details{transition:all 1s 0.05s ease;opacity:0;max-height:5em;line-height:1.3em;margin-top:auto;color:#8197A6;display:inline-block;text-align:justify}
.cs-card .metainfo{transition:all 1s 0.05s ease;padding:0 1.5em;display:flex;align-items:center;color:#8197A6;background-color:white;z-index:3}
.cs-card .metainfo span{margin-right:15px;font-size:1.1em}
/* -- HOVERING -- */
.cs-card:not(.disabled):hover{transform:translateY(-10px) scale(1);box-shadow:0 20px 30px 0 rgba(0,0,0,0.1)}
.cs-card:not(.disabled):hover img{transform:scale(1.1)}
.cs-card:not(.disabled):hover .details{transition:all 1s 0.3s ease;opacity:1}

.cs-cards-container .cs-events{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap}

.top-announcements .cs-card{font-size:12px;width:22em;height:33em}
.top-announcements .cs-card a img{height:100%}
.top-announcements .cs-card .dimmer{height:100%}
.top-announcements .cs-card:not(.disabled):hover .thumbnail{height:20%}
.top-announcements .cs-card:not(.disabled):hover img{transform:none}

.square-cards .cs-card{font-size:12px;width:21em;height:21em}
.square-cards .cs-card .thumbnail{height:73%}
.square-cards .cs-card .sub-heading{display:none}
.square-cards .cs-card .metainfo{display:none}
.square-cards .cs-card .details{display:none}
.square-cards .cs-card .heading{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.quickview-cards .cs-card{font-size:16px;width:23em;height:23em}
.quickview-cards .cs-card .thumbnail{height:60%}
.quickview-cards .cs-card .sub-heading{display:none}
.quickview-cards .cs-card .details{display:none}

.cs-card.cs-post .tag,.cs-card.cs-post .pillar{border-top-color:crimson}

/* -- VIDEO CARD -- */
.cs-card.video{background-color:#003246}
.cs-card.video .heading{color:white}
.cs-card.video .metainfo{border-color:#8197A6}
/* -- IMAGE CARD -- */
.cs-card.image{background-color:#003246}
.cs-card.image .thumbnail{height:90%}
.cs-card.image a img{object-position:unset}
.cs-card.image .entry{position:absolute;bottom:11%;background-image:linear-gradient(0deg,rgba(0,50,70,1) 0%,rgba(0,50,70,0) 70%,rgba(0,50,70,0) 100%);background-color:transparent}
.cs-card.image .heading{color:white; height: 4em; text-align: center;}
.cs-card.image .tag,.cs-card.image .pillar{display:none}
.cs-card.image .details{display:none}
.cs-card.image .metainfo{border-color:#8197A6; display: none;}
/* SMALL */
.cs-cards-sm .cs-card{width:15em;height:23em;background-color:#003246;background-image:linear-gradient(180deg,#003246 0%,#003246 70%);border-radius:0.5em}
.cs-cards-sm .cs-card .thumbnail{height:90%}
.cs-cards-sm .cs-card .entry{position:absolute;bottom:0;height:7em;font-size:1.2em;}
.cs-cards-sm .cs-card .heading{color:white;height:3em;text-align:center;text-shadow:0 -1px 3px rgba(0,0,0,0.5);margin:0.7em 0 0.3em 0}
.cs-cards-sm .cs-card .tag,.cs-cards-sm .cs-card .pillar,
.cs-cards-sm .cs-card .details,
.cs-cards-sm .cs-card .metainfo{display:none}

.cs-card .cta{display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* color: #006762; */
	color: white;
    margin-top: auto;
    padding: 0 10%;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
    height: 10%;}

	.cs-card .cta .arrow {
		margin-left: auto;
		font-family: Arial, Lato, sans-serif;
		font-size: 2.3em;
		height: 5.8rem;
	}

	.cs-card .cta label {
		font-size: 1em;
		text-transform: uppercase;
		letter-spacing: 0.25rem;
		cursor: pointer;
	}

	.cs-cards-sm .cs-card .cta {
		color: white;
		z-index: 1;
	}
	.home .cs-cards-sm .cs-card .cta {
		background-color: rgba(0, 66, 63, 0.5);
	}

/* -- DISABLED -- */
.cs-card.disabled{border-color:#999999;background-color:#eeeeee}
.cs-card.disabled a{opacity:0.5;pointer-events:none}
.cs-card.disabled a *{color:#969696 !important}
.cs-card.disabled .entry{background:none}
.cs-card.disabled .heading{text-shadow:1px 1px 1px black}
.cs-card.disabled .tag,.cs-card.disabled .pillar{background-color:rgba(0,0,0,0.6);border-color:#585858}
.cs-card.disabled .metainfo{border-color:#d4d4d4;background-color:#eeeeee; display: none;}
.cs-card.disabled a img{
	filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

/* CUSTOM FRONT PAGE */
.home .cs-cards-container{max-width:100%}
.home .cs-cards-sm .cs-card .thumbnail{overflow:visible}
.home .cs-cards-sm .cs-card a img{width:80%;margin:2em 10% 0 10%;object-fit:contain;}
.home .cs-card img{margin-top: 50px;}

/* .cs-card .category{display:none} */

@media screen and (min-width: 1500px) {
	.home .top-announcements.cs-cards-container{max-width:calc(100% + 30rem);margin:0 -15rem}
}

@media screen and (max-width: 800px) {
	.top-announcements .cs-card{width:20em;margin:0 1em 1.5em 1em}
}
@media screen and (max-width: 600px) {
	.home .cs-cards-sm .cs-card{height:22em;font-size:8px;margin:1.5em 0.6em}
	.home .cs-cards-sm .cs-card a img{margin-top:10px}
	
	.home .cs-cards-sm .cs-card .heading{font-size:16px;height:3em}
	.home .cs-cards-sm .cs-card .thumbnail{height:100%}
	/* .home .cs-cards-sm .cs-card .entry-info{display:none} */
	
	.top-announcements .cs-card{width:18em;height:30em;font-size:10px;margin:0 0.5em 1.5em 0.5em}
	.top-announcements .cs-card .thumbnail{height:37%}
	.top-announcements .cs-card .entry{height:calc(63% - 3em)}
}
@media screen and (max-width: 400px) {
	.top-announcements .cs-card{width:100%}
}