.flipbox{
	-ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
	height:100%;
}

.flipbox .flipbox-front{
	background-color: #ffffff;
    min-height: 300px;
    height: 100%;
	-webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
	opacity:1;
	background-size: cover;
    background-position: center;
    -ms-transition: transform .7s cubic-bezier(.4,.2,.2,1),opacity .55s ease .25s;
    transition: transform .7s cubic-bezier(.4, .2, .2, 1), opacity .55s ease .25s;
    -webkit-transition: transform .7s cubic-bezier(.4, .2, .2, 1), opacity .55s ease .25s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	border: 1px solid #eaebeb;
    border-radius: 0.375rem;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px hsl(0 0% 18% / .15);
}

.flipbox .flipbox-back{
	background-color: #ffffff;
    min-height: 300px;
    height: auto;
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    -ms-transition: transform .7s cubic-bezier(.4,.2,.2,1),opacity .55s ease .25s;
    transition: transform .7s cubic-bezier(.4, .2, .2, 1), opacity .55s ease .25s;
    -webkit-transition: transform .7s cubic-bezier(.4, .2, .2, 1), opacity .55s ease .25s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	border: 1px solid #eaebeb;
    border-radius: 0.375rem;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px hsl(0 0% 18% / .15);
}

.flipbox .figure-wrap {
    position: relative;
    height: 250px;
	border-radius: 0.375rem 0.375rem 0 0;
	overflow: hidden;
}

.flipbox .figure-wrap:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    background: url(/images/zig-zag.png);
    width: 100%;
    height: 5px;
}

.flipbox .inner{
	transform: translateY(-50%) translateZ(60px) scale(.94);
    -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
    -ms-transform: translateY(-50%) translateZ(60px) scale(.94);
    top: 50%;
	position: absolute;
    left: 0;
    width: 100%;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
	height: 100%;
}


.flipbox .flipbox-back[data-bg-overlay=true]:after, .flipbox .flipbox-front[data-bg-overlay=true]:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    display: block;
    opacity: .6;
    background-color: inherit;
    backface-visibility: hidden;
    transform: translateZ(2px);
}

.flipbox:hover .flipbox-front {
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flipbox:hover .flipbox-back {
    -ms-transform: rotateY(0);
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flipbox .product-name {
    font-size: 20px;
    font-weight: 600;
}

.flipbox .product-slogan {
    margin-bottom: 20px;
}

.flipbox .price {
    font-size: 21px;
    font-weight: 700;
    color: #000;
    margin-top: 4px;
    display: inline-block;
}