.tp-flipbox{
-webkit-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-ms-transform-style: preserve-3d;
width: 100%;
min-height: 250px;
height: 100%;
}
.tp-flipbox__holder {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
width: 100%;
height: 100%;
min-height: inherit;
}
.tp-flipbox__front,
.tp-flipbox__back {
height: 100%;
width : 100%;
display: -webkit-box;
display: flex;
-webkit-display: flex;
-ms-flex-align: center;
-moz-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
-webkit-align-items: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .5s cubic-bezier(.645,.045,.355,1) 0.1s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: all .5s cubic-bezier(.645,.045,.355,1);
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: all .5s cubic-bezier(.645,.045,.355,1);
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: all .5s cubic-bezier(.645,.045,.355,1) 0.1s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
.tp-flipbox__front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.tp-flipbox__back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.tp-flipbox__content{
display: flex;
-webkit-display: flex;
flex-direction: column;
width: 100%;
}
.tp-flipbox__title-front,
.tp-flipbox__title-back{
padding: 20px;
text-align: center;
}
.tp-flipbox__icon-front,
.tp-flipbox__icon-back{
padding: 20px;
text-align: center;
}
.tp-flipbox__icon-front img,
.tp-flipbox__icon-back img{
max-width: 100%;
height: auto;
}
.tp-flipbox__desc-front,
.tp-flipbox__desc-back{
padding: 0 20px;
text-align: center;
padding-bottom: 40px;
}
.tp-flipbox__action{
margin-top: 20px;
margin-bottom: 15px;
text-align: center;
} .tp-flipbox__btn{
padding: 12px 18px;
display: inline-block;
font-weight: bold;
font-size:10px;
transition: color .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out;
-webkit-transition: color .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out;
} .tp-flipbox--horizontal:hover .tp-flipbox__holder{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.tp-flipbox--horizontal.hover .tp-flipbox__holder{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
} .ie .tp-flipbox--horizontal:hover .tp-flipbox__back,
.ie .tp-flipbox--horizontal.hover .tp-flipbox__back {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.ie .tp-flipbox--horizontal:hover .tp-flipbox__front,
.ie .tp-flipbox--horizontal.hover .tp-flipbox__front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.ie .tp-flipbox--horizontal:hover .tp-flipbox__holder{
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}  .tp-flipbox--vertical .tp-flipbox {
position: relative;
}
.tp-flipbox--vertical .tp-flipbox__back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.tp-flipbox--vertical .tp-flipbox__holder {
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.tp-flipbox--vertical:hover .tp-flipbox__holder {
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.tp-flipbox--vertical.hover .tp-flipbox__holder {
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
} .ie .tp-flipbox--vertical:hover .tp-flipbox__back,
.ie .tp-flipbox--vertical.hover .tp-flipbox__back {
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.ie .tp-flipbox--vertical:hover .tp-flipbox__front,
.ie .tp-flipbox--vertical.hover .tp-flipbox__front {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.ie .tp-flipbox--vertical:hover .tp-flipbox__holder {
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}