.trx-addons-flipbox-container {
overflow: hidden;
position: relative;
height: 300px;
width: 100%;
}
.trx-addons-flipbox-container.trx-addons-animate-flip {
overflow: visible;
}
.trx-addons-flipbox-icon-image,
.trx-addons-flipbox-icon-image-back {
display: inline-block;
vertical-align: top;
margin: 0 auto 0px auto;
line-height: 1;
box-sizing: border-box;
}
.trx-addons-flipbox-icon-type-image {
width: 30%;
overflow: hidden;
}
.trx-addons-flipbox-icon-type-image img {
width: 100%;
}
.trx-addons-flipbox-icon-image i,
.trx-addons-flipbox-icon-image-back i {
font-size: 40px;
line-height: 1.1em;
}
.trx-addons-flipbox-overlay {
height: 100%;
padding: 35px;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
.trx-addons-flipbox-front,
.trx-addons-flipbox-back {
text-align: center;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.trx-addons-flipbox-front {
background: #1abc9c;
color: #fff;
z-index: 2;
}
.trx-addons-flipbox-back {
background: #444;
color: #fff;
}
.trx-addons-flipbox-back .trx-addons-flipbox-box-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.trx-addons-flipbox-heading {
margin: 0;
color: #fff;
}
.trx-addons-flipbox-content {
color: #fff;
}
.trx-addons-flipbox-content > *:first-child {
margin-top: 0;
}
.trx-addons-flipbox-content > *:last-child {
margin-bottom: 0;
}
.trx-addons-flipbox-heading.trx-addons-flipbox-linked-title {
color: #fff;
display: block;
font-size: 1.5em;
font-weight: 700;
} .trx-addons-flipbox-container {
perspective: 1000px;
}
.trx-addons-flipbox-front,
.trx-addons-flipbox-back {
transition-duration: 500ms;
transition-property: all;
transition-timing-function: ease;
}
.trx-addons-flipbox-flip-card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 500ms ease;
}
.trx-addons-flipbox-back,
.trx-addons-flipbox-front {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateX(0deg);
transform: rotateY(0deg);
} .elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-flip.trx-addons-direction-up .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-up.trx-addons-flipbox-container:hover .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-up .trx-addons-flipbox-back {
transform: rotateX(180deg);
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-flip.trx-addons-direction-down .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-down.trx-addons-flipbox-container:hover .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-down .trx-addons-flipbox-back {
transform: rotateX(-180deg);
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-flip.trx-addons-direction-left .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-left.trx-addons-flipbox-container:hover .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-left .trx-addons-flipbox-back {
transform: rotateY(-180deg);
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-flip.trx-addons-direction-right .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-right.trx-addons-flipbox-container:hover .trx-addons-flipbox-flip-card,
.trx-addons-animate-flip.trx-addons-direction-right .trx-addons-flipbox-back {
transform: rotateY(180deg);
} .trx-addons-animate-push.trx-addons-flipbox-container,
.trx-addons-animate-slide.trx-addons-flipbox-container {
overflow: hidden;
}
.trx-addons-animate-push .trx-addons-flipbox-back,
.trx-addons-animate-slide .trx-addons-flipbox-back {
z-index: 3;
}
.trx-addons-animate-push.trx-addons-direction-up .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-up .trx-addons-flipbox-back {
top: 100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-up .trx-addons-flipbox-back,
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-slide.trx-addons-direction-up .trx-addons-flipbox-back,
.trx-addons-animate-push.trx-addons-direction-up.trx-addons-flipbox-container:hover .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-up.trx-addons-flipbox-container:hover .trx-addons-flipbox-back {
top: 0;
}
.trx-addons-animate-push.trx-addons-direction-down .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-down .trx-addons-flipbox-back {
top: auto;
bottom: 100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-down .trx-addons-flipbox-back,
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-slide.trx-addons-direction-down .trx-addons-flipbox-back,
.trx-addons-animate-push.trx-addons-direction-down.trx-addons-flipbox-container:hover .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-down.trx-addons-flipbox-container:hover .trx-addons-flipbox-back {
top: auto;
bottom: 0;
}
.trx-addons-animate-push.trx-addons-direction-left .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-left .trx-addons-flipbox-back {
left: 100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-left .trx-addons-flipbox-back,
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-slide.trx-addons-direction-left .trx-addons-flipbox-back,
.trx-addons-animate-push.trx-addons-direction-left.trx-addons-flipbox-container:hover .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-left.trx-addons-flipbox-container:hover .trx-addons-flipbox-back {
left: 0;
}
.trx-addons-animate-push.trx-addons-direction-right .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-right .trx-addons-flipbox-back {
left: auto;
right: 100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-right .trx-addons-flipbox-back,
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-slide.trx-addons-direction-right .trx-addons-flipbox-back,
.trx-addons-animate-push.trx-addons-direction-right.trx-addons-flipbox-container:hover .trx-addons-flipbox-back,
.trx-addons-animate-slide.trx-addons-direction-right.trx-addons-flipbox-container:hover .trx-addons-flipbox-back {
left: auto;
right: 0;
} .elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-up .trx-addons-flipbox-front,
.trx-addons-animate-push.trx-addons-direction-up.trx-addons-flipbox-container:hover .trx-addons-flipbox-front {
top: -100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-down .trx-addons-flipbox-front,
.trx-addons-animate-push.trx-addons-direction-down.trx-addons-flipbox-container:hover .trx-addons-flipbox-front {
top: 100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-left .trx-addons-flipbox-front,
.trx-addons-animate-push.trx-addons-direction-left.trx-addons-flipbox-container:hover .trx-addons-flipbox-front {
left: -100%;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-push.trx-addons-direction-right .trx-addons-flipbox-front,
.trx-addons-animate-push.trx-addons-direction-right.trx-addons-flipbox-container:hover .trx-addons-flipbox-front {
left: 100%;
} .trx-addons-animate-zoom-in .trx-addons-flipbox-back {
opacity: 0;
transform: scale(0.75);
z-index: 3;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-zoom-in .trx-addons-flipbox-back,
.trx-addons-animate-zoom-in.trx-addons-flipbox-container:hover .trx-addons-flipbox-back {
opacity: 1;
transform: scale(1);
} .trx-addons-animate-zoom-out .trx-addons-flipbox-front {
opacity: 1;
transform: scale(1);
z-index: 1;
width: 100%;
transition: transform .5s, opacity .35s, width .1ms;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-zoom-out .trx-addons-flipbox-front,
.trx-addons-animate-zoom-out.trx-addons-flipbox-container:hover .trx-addons-flipbox-front {
opacity: 0;
width: 0;
transform: scale(0.75);
transition: transform .8s, opacity .5s .1s, width .1ms .5s;
}
.elementor-element-edit-mode.trx-addons-flipbox-back-show .trx-addons-animate-fade .trx-addons-flipbox-front,
.trx-addons-animate-fade.trx-addons-flipbox-container:hover .trx-addons-flipbox-front {
opacity: 0;
visibility: hidden;
}