.flipbox {
	position: relative;
	perspective: 1200px;
	transform-style: preserve-3d;
}

.flipbox .flipbox-container {
	height: 100%;
	perspective: 1200px;
	transform-style: preserve-3d;
}

.flipbox .flipbox-head,
.flipbox .flipbox-foot {
	height: 100%;
	border-radius: 5px;
	background-size: cover !important;
	transition: all 0.7s ease;
	transition-timing-function: cubic-bezier(0.3, 0, 0.25, 1);
	backface-visibility: hidden;
	transform-style: preserve-3d;
	perspective: 1000px;
	/* vc frontend editor*/
}

.flipbox .flipbox-head > .vc_row,
.flipbox .flipbox-head > .vc_element,
.flipbox .flipbox-head > .vc_element > .vc_row,
.flipbox .flipbox-foot > .vc_row,
.flipbox .flipbox-foot > .vc_element,
.flipbox .flipbox-foot > .vc_element > .vc_row {
	display: flex;
	height: 100%;
	align-items: stretch;
	transform: translate3d(0, 0, 35px) scale(0.81);
}

.flipbox .flipbox-head > .vc_row > .wpb_column,
.flipbox .flipbox-head > .vc_element > .wpb_column,
.flipbox .flipbox-head > .vc_element > .vc_row > .wpb_column,
.flipbox .flipbox-foot > .vc_row > .wpb_column,
.flipbox .flipbox-foot > .vc_element > .wpb_column,
.flipbox .flipbox-foot > .vc_element > .vc_row > .wpb_column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flipbox .flipbox-head .vc_element,
.flipbox .flipbox-foot .vc_element {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.flipbox .flipbox-head p:empty,
.flipbox .flipbox-foot p:empty {
	display: none !important;
}

.flipbox .flipbox-head {
	background: #f42958;
}

.flipbox .flipbox-foot {
	background: #df0b3c;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: rotate3d(0, -1, 0, 180deg) translate3d(0, 0, 0);
}

.flipbox .flipbox-foot-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

.flipbox .flipbox-foot-content a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

.flipbox:hover .flipbox-head {
	transform: rotate3d(0, -1, 0, 180deg);
}

.flipbox:hover .flipbox-foot {
	transform: rotate3d(0, 1, 0, 0);
}

.flipbox.flipbox-right-to-left .flipbox-foot {
	transform: rotate3d(0, 1, 0, 180deg);
}

.flipbox.flipbox-right-to-left:hover .flipbox-head {
	transform: rotate3d(0, -1, 0, 180deg);
}

.flipbox.flipbox-right-to-left:hover .flipbox-foot {
	transform: rotate3d(0, 1, 0, 0);
}

.flipbox.flipbox-top-to-bottom .flipbox-foot {
	transform: rotate3d(1, 0, 0, 180deg);
}

.flipbox.flipbox-top-to-bottom:hover .flipbox-head {
	transform: rotate3d(-1, 0, 0, 180deg);
}

.flipbox.flipbox-top-to-bottom:hover .flipbox-foot {
	transform: rotate3d(1, 0, 0, 0);
}

.flipbox.flipbox-bottom-to-top .flipbox-foot {
	transform: rotate3d(-1, 0, 0, 180deg);
}

.flipbox.flipbox-bottom-to-top:hover .flipbox-head {
	transform: rotate3d(1, 0, 0, 180deg);
}

.flipbox.flipbox-bottom-to-top:hover .flipbox-foot {
	transform: rotate3d(1, 0, 0, 0);
}
