.ld-flipbox-inner,
.ld-flipbox-face,
.ld-flipbox-wrap {
	width: 100%;
	min-height: inherit;
	border-radius: inherit;
}

.ld-flipbox-inner {
	display: flex;
	flex: 1 auto;
	padding: 40px 50px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
	}

	:last-child {
		margin-bottom: 0;
	}
}

.ld-flipbox-face {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-size: cover;
	background-position: center;
	background-color: var(--color-primary);
	backface-visibility: hidden;
}

.ld-flipbox-wrap,
.ld-flipbox-face {
	transform-style: inherit;
	perspective: inherit;
}

.ld-flipbox-front {
	
	.ld-flipbox-inner {
		transform: translate3d(0, 0, 60px) scale(0.85);
	}
}
.ld-flipbox-back {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate3d(0, 1, 0, 180deg);

	.ld-flipbox-inner {
		transform: translate3d(0, 0, 60px) scale(0.95);
	}
	.ld-flipbox-bt &,
	.ld-flipbox-tb & {
		transform: rotateY(-180deg) rotateZ(-180deg);
	}
}

.ld-flipbox-wrap {
	position: relative;
	transition-property: box-shadow, transform;
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

	.ld-flipbox-shadow & {
		box-shadow: 0 50px 60px rgba(#000, 0.15);
	}
	.ld-flipbox-bt.ld-flipbox-shadow:hover &,
	.ld-flipbox-tb.ld-flipbox-shadow:hover & {
		box-shadow: 0 -50px 60px rgba(#000, 0.15);
	}
}

.ld-flipbox {
	display: flex;
	min-height: 270px;
	margin-bottom: 30px;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
	perspective: 1200px;
	
	&:hover {

		.ld-flipbox-wrap {
			transform: rotate3d(0, 1, 0, 180deg);
			transform-origin: 50% 50% !important;
		}
		
		&.ld-flipbox-rl {
			
			.ld-flipbox-wrap {
				transform: rotate3d(0, -1, 0, 180deg);
			}
		}
		
		&.ld-flipbox-bt {
			
			.ld-flipbox-wrap {
				transform: rotate3d(1, 0, 0, 180deg);
			}
		}
		
		&.ld-flipbox-tb {
			
			.ld-flipbox-wrap {
				transform: rotate3d(-1, 0, 0, 180deg);
			}
		}

		&.ld-flipbox-shadow-onhover {

			.ld-flipbox-wrap {
				box-shadow: 0 50px 60px rgba(#000, 0.15);
			}
			&.ld-flipbox-bt,
			&.ld-flipbox-tb {

				.ld-flipbox-wrap {
					box-shadow: 0 -50px 60px rgba(#000, 0.15);
				}
			}
		}
	}
}

// For our beloved IE
.is-ie {

	.ld-flipbox-face {

		&,
		.ld-flipbox-inner {
			transform: none;
		}
	}
	.ld-flipbox-back {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
	}
	.ld-flipbox {

		&:hover {

			.ld-flipbox-wrap {
				transform: none !important;
			}
			.ld-flipbox-back {
				opacity: 1;
				visibility: visible;
			}
		}
	}
}