/* ======================== CS_Flipbox ======================== */
.cs-flipbox{font-family:'Notesesa';font-size:12px;position:relative;margin:0 1.5em 1.5em 1.5em;width:22em;height:33em;perspective:1000px;-webkit-perspective:1000px}
.square-cards .cs-flipbox{height:22em}

/* CS_Flipbox sides */
.cs-flipbox .flipbox-side{
	position:relative;
	background:white;
	height:100%;
	border-radius:8px;
	box-shadow:0px 1px 10px 5px rgb(0 0 0 / 10%);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transform:rotateX(0);
	-webkit-transform:rotateX(0);
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	transition:transform 0.75s ease,-webkit-transform 0.75s ease;
}

/* CS_Flipbox floating panels */
.cs-flipbox .flipbox-side>*{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	perspective:inherit;
	-webkit-perspective:inherit;
	-webkit-backface-visibility:inherit;
	backface-visibility:inherit;
	outline:transparent solid 1px;
	-webkit-transform:translateY(0%) translateZ(0px) scale(1);
	transform:translateY(0%) translateZ(0px) scale(1);
    z-index: 1;
}
.cs-flipbox .flipbox-side>.zshift-0{
	-webkit-transform:translateY(0%) translateZ(0px) scale(1);
	transform:translateY(0%) translateZ(0px) scale(1);
}
.cs-flipbox .flipbox-side>.zshift-20{
	-webkit-transform:translateY(0%) translateZ(20px) scale(0.98);
	transform:translateY(0%) translateZ(20px) scale(0.98);
}
.cs-flipbox .flipbox-side>.zshift-40{
	-webkit-transform:translateY(0%) translateZ(40px) scale(0.96);
	transform:translateY(0%) translateZ(40px) scale(0.96);
}
.cs-flipbox .flipbox-side>.zshift-60{
	-webkit-transform:translateY(0%) translateZ(60px) scale(0.94);
	transform:translateY(0%) translateZ(60px) scale(0.94);
}

/* CS_Flipbox hover css */
.cs-flipbox       .flipbox-front{}
.cs-flipbox:hover .flipbox-front{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}
.cs-flipbox       .flipbox-back {-webkit-transform:rotateX( 180deg);transform:rotateX( 180deg);position:absolute;top:0;left:0;width:100%}
.cs-flipbox:hover .flipbox-back {-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}

/* ======================== CS_Flipbox elements ======================== */

/* Sticky overlay */
.cs-flipbox.sticky-post .flipbox-sticky{display:block}
.cs-flipbox .flipbox-sticky{display:none;text-align:right;padding:0.5rem 1rem;color:#ffd400}
.cs-flipbox .flipbox-sticky .fa{font-size:2em;transform:rotate(20deg)}

/* Info */
.cs-flipbox .flipbox-info{text-align:left;color:white;padding:0.5rem 10px}
.cs-flipbox .flipbox-info span{text-shadow: 0 0 2px rgb(0 0 0 / 80%)}

/* Thumbnail */
.cs-flipbox .flipbox-thumb{height:45%}
.cs-flipbox .flipbox-thumb .thumb-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0;overflow-clip-margin:unset;overflow:auto}
.cs-flipbox .flipbox-thumb .thumb-dimmer{position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;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%);border-radius:8px 8px 0 0}

/* Tag */
.cs-flipbox .flipbox-tag{height:calc(100% - 3em);display:flex;flex-direction:column;align-items:center}
.cs-flipbox .flipbox-tag .tag{position:relative;color:#fff;width:100%;background-color:rgba(0,50,70,0.7);padding:0 5px;letter-spacing:0.1em;text-transform:uppercase;max-width:100%;line-height:3em;height:3em;border-top:2px solid crimson;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-flipbox .flipbox-front .flipbox-tag .tag{width:fit-content;top:calc(50% - 1.5em - 2px)}
.cs-flipbox .flipbox-back  .flipbox-tag .tag{width:100%;top:2em}

/* Content */
.cs-flipbox .flipbox-content{padding:0 1.5em;text-align:left;height:calc(100% - 3em);overflow:hidden;display:flex;flex-direction:column}
.cs-flipbox .flipbox-content .heading{font-size:1.6em;font-weight:400;color:var(--eo-content-title);line-height:1.1em;padding:0;margin:0.8em 0 0.3em 0;letter-spacing:-0.5px}
.cs-flipbox .flipbox-content .sub-heading{display:block;font-family:NotesEsa;font-size:1.2em;line-height:1.3em;text-align:left;margin:0;color:var(--eo-menu-bulet-on)}
.cs-flipbox .flipbox-content .sub-heading strong{font-size:1.1em}
.cs-flipbox .flipbox-content .sub-heading .highlight{display:inline-block;color:red;text-shadow:1px 0 1px rgba(255,0,0,0.4);width:100%}
.cs-flipbox .flipbox-content .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-flipbox .flipbox-content .sub-heading .highlight.tight{line-height:1.2em}
.cs-flipbox .flipbox-content ul{line-height:1.4em;color:#8197A6;margin:0;padding:0;list-style:none}
.cs-flipbox .flipbox-content hr{margin-top:1rem;margin-bottom:1rem}
.cs-flipbox .flipbox-front .flipbox-content{height:calc(100% - 45% - 3em);top:unset;bottom:3em}
.cs-flipbox .flipbox-front .flipbox-content .heading{flex-grow:1}
.cs-flipbox .flipbox-front .flipbox-content .heading .heading-sm{font-size:0.8em;margin-top:-0.25em;display:inline-block}
.cs-flipbox .flipbox-back .flipbox-content{height:calc(100% - 8em);top:unset;bottom:3em}
.cs-flipbox .flipbox-back .heading{line-height:1.4em}
.cs-flipbox .flipbox-back .sub-heading{display:none}

/* Meta */
.cs-flipbox .flipbox-meta{top:auto;padding:0 1.5em;display:flex;align-items:center;color:#8197A6;height:3em;border-radius:0 0 8px 8px}
.cs-flipbox .flipbox-meta span{margin-right:15px;font-size:1.1em}
.cs-flipbox .flipbox-meta a{font-size:1.4em;width:100%;text-align:right}
.cs-flipbox .flipbox-meta a .fa{margin-left:0.4em}
.cs-flipbox .flipbox-back .flipbox-meta{align-items:flex-start}

/* Text shadow */
.cs-flipbox .flipbox-text-shadow{transform:translateY(0) translateZ(0) scale(1)!important;z-index:2}
.cs-flipbox       .flipbox-text-shadow *{color:transparent!important;background-color:transparent!important;border-color:transparent!important;transition:all 0.75s cubic-bezier(0, 0.42, 1, 0.58)}
.cs-flipbox       .flipbox-front .flipbox-text-shadow *{text-shadow:0 0 3px rgb(0 0 0/ 1%)!important}
.cs-flipbox:hover .flipbox-front .flipbox-text-shadow *{text-shadow:0 0 3px rgb(0 0 0/30%)!important}
.cs-flipbox       .flipbox-back  .flipbox-text-shadow *{text-shadow:0 0 3px rgb(0 0 0/30%)!important}
.cs-flipbox:hover .flipbox-back  .flipbox-text-shadow *{text-shadow:0 0 3px rgb(0 0 0/ 1%)!important}

/* Box shadow */
.cs-flipbox .flipbox-box-shadow{transform:translateY(0) translateZ(0) scale(1)!important;z-index:2}
.cs-flipbox .flipbox-front .flipbox-box-shadow>*{color:transparent!important;border-color:transparent!important;border-radius:5px;transition:all 0.75s cubic-bezier(0, 0.42, 1, 0.58)}
.cs-flipbox       .flipbox-front .flipbox-box-shadow>*{background:rgb(0 0 0/ 1%)!important;border-color:rgb(0 0 0/ 1%)!important;box-shadow:0 0 5px 2px rgb(0 0 0/ 1%)!important}
.cs-flipbox:hover .flipbox-front .flipbox-box-shadow>*{background:rgb(0 0 0/15%)!important;border-color:rgb(0 0 0/15%)!important;box-shadow:0 0 5px 2px rgb(0 0 0/20%)!important}
.cs-flipbox       .flipbox-back  .flipbox-box-shadow>*{background:rgb(0 0 0/15%)!important;border-color:rgb(0 0 0/15%)!important;box-shadow:0 0 5px 2px rgb(0 0 0/20%)!important}
.cs-flipbox:hover .flipbox-back  .flipbox-box-shadow>*{background:rgb(0 0 0/ 1%)!important;border-color:rgb(0 0 0/ 1%)!important;box-shadow:0 0 5px 2px rgb(0 0 0/ 1%)!important}

/* pointer-events */
.cs-flipbox .flipbox-side>*{pointer-events:none}
.cs-flipbox .flipbox-side>*>*{pointer-events:all}
.cs-flipbox .flipbox-side .flipbox-text-shadow>*,
.cs-flipbox .flipbox-side .flipbox-box-shadow>*{pointer-events:none!important}