.u-flip-block {display:block; position: relative;	width: 100%; aspect-ratio: var(--flip-aspect-ratio, auto); perspective: 1000px;}

.u-flip-block .flip-block {
	position: relative;
	width: 100%;
	aspect-ratio: var(--flip-aspect-ratio, auto);
}

.u-flip-block[data-flipbox-link] {
	cursor: pointer;
}

.u-flip-block[data-flipbox-link] a {
	cursor: pointer;
}

#page-content .u-flip-block p {
	margin-bottom:0;
}

#page-content .u-flip-block p a {
	background-image: none;
}

.u-flip-block .flip-block-front,
.u-flip-block .flip-block-back {display:flex; border-radius:var(--u-border-radius); box-shadow:var(--u-box-shadow-soft); overflow:hidden; transition:0.6s ease-out; transition-delay:0.1s; padding:var(--gxh); background-color:var(--c-white); min-height: 100%;}

.u-flip-block .flip-block-front .flip-block-inner,
.u-flip-block .flip-block-back .flip-block-inner {flex:1 0; min-height: 100%;}

.u-flip-block .flip-block-front .flip-block-inner > .wp-block-group,
.u-flip-block .flip-block-back .flip-block-inner > .wp-block-group {flex:1 0; min-height: 100%;}

.u-flip-block .flip-block-front {position:relative; transform: rotateY(0deg);}
.u-flip-block .flip-block-back {position:absolute; flex-direction:column; align-items:center; justify-content:center; top:0; left:0; height:100%; width:100%; opacity:0; transform: rotateY(-180deg); }

.u-flip-block:hover .flip-block-front { transform: rotateY(-180deg); transition:0.5s ease;  }
.u-flip-block:hover .flip-block-back { opacity:1; transform: rotateY(0deg); transition:0.5s ease; transition-delay:0s; }


.u-flip-block .flip-block-front,
.u-flip-block .flip-block-back {
	position: relative;
	overflow: hidden;

	background-color: var(--flip-bg-color, #ffffff);
	background-image: var(--flip-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.u-flip-block .flip-block-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;

	background-color: var(--flip-overlay-color, #000000);
	opacity: var(--flip-overlay-opacity, 0.5);

	pointer-events: none;
}

.u-flip-block .flip-block-inner {
	position: relative;
	z-index: 1;
}



@media all and (max-width: 1199.98px) {
	.u-flip-block .flip-block-front,
	.u-flip-block .flip-block-back {padding:var(--gxh); }
}


@media all and (max-width: 991.98px) {
	.u-flip-block .flip-block-front p,
	.u-flip-block .flip-block-back p {font-size:var(--fs-xs); }
}


/* Both sides share the same background sizing rules */
.u-flip-block .flip-block-front,
.u-flip-block .flip-block-back {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Front side */
.u-flip-block .flip-block-front {
	position: relative;
	transform: rotateY(0deg);
	backface-visibility: hidden;
	transition: 0.5s ease;
}

/* Back side */
.u-flip-block .flip-block-back {
	position: absolute;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: rotateY(-180deg);
	backface-visibility: hidden;
	transition: 0.5s ease;
}

/* Horizontal flip */
.u-flip-block.is-horizontal:hover .flip-block-front {
	transform: rotateY(-180deg);
}

.u-flip-block.is-horizontal:hover .flip-block-back {
	opacity: 1;
	transform: rotateY(0deg);
}

/* Vertical flip */
.u-flip-block.is-vertical .flip-block-front {
	transform: rotateX(0deg);
}

.u-flip-block.is-vertical .flip-block-back {
	transform: rotateX(-180deg);
}

.u-flip-block.is-vertical:hover .flip-block-front {
	transform: rotateX(180deg);
}

.u-flip-block.is-vertical:hover .flip-block-back {
	opacity: 1;
	transform: rotateX(0deg);
}

/* Popup style */
.u-flip-block.is-popup .flip-block-back {
	z-index: 9999;
	width:100%; 
	height:100%;
	transform: scale(0.75);
}

.u-flip-block.is-popup:hover .flip-block-front {
	opacity: 0;
	transform: rotate(0deg);
	box-shadow:none; 
	transition-delay:.5s;
}

.u-flip-block.is-popup:hover .flip-block-back {
	opacity: 1;
	transform: scale(1);
	width:100%; 
	height:100%;
}

/* Fade style */
.u-flip-block.is-fade .flip-block-back {
	z-index: 9999;
	width:100%; 
	height:100%;
	opacity:0;
	transform: rotate(0deg);
}

.u-flip-block.is-fade:hover .flip-block-front * {
	opacity: 0;
	transition: .5s linear;
}
.u-flip-block.is-fade:hover .flip-block-front {
	opacity: 0;
	transform: rotate(0deg);
	transition: .25s linear;
	transition-delay:0.25s;
}

.u-flip-block.is-fade:hover .flip-block-back {
	opacity: 1;
	transition: .25s linear;
	transition-delay:0s;
	width:100%; 
	height:100%;
}