.droplet-flip-box {
height: 280px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
.droplet-flip-box-front {
background-color: #fafafa;
}
.droplet-flip-box-back {
background-color: #fafafa;
display: block;
}
.droplet-flip-box-layer {
position: absolute;
width: 100%;
height: 100%;
transition: all .6s ease-in-out;
}
.droplet-flip-box-layer-overlay {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: stretch;
text-align: center;
padding: 20px;
}
.droplet-flip-box-layer-tagline {
margin: 0 0 10px;
}
.droplet-flip-box-layer-title {
margin: 0 0 8px;
}
.droplet-flip-box-layer-title:not(:last-child) {
margin: 0 0 20px 0;
padding: 0;
}
.droplet-flip-box-layer-desc:not(:last-child) {
margin: 0 0 20px 0;
padding: 0;
}
.droplet-flip-box-image {
margin: 0 0 20px 0;
display: inline-block;
width: 100%;
}
.droplet-flip-box-image img {
width: 50%;
}
.droplet-flip-box-3d-yes .droplet-flip-box-layer-inner {
transform: translateZ(90px) scale(.91);
}
.droplet-flip-box-3d-yes .droplet-flip-box-layer-overlay {
transform-style: preserve-3d;
transform: translateZ(.1px);
}
.droplet-flip-box-effect-flip .droplet-flip-box {
perspective: 1000px;
transform-style: preserve-3d;
}
.droplet-flip-box-effect-flip .droplet-flip-box:hover .droplet-flip-box-back {
transform: none;
}
.droplet-flip-box-effect-flip .droplet-flip-box-layer {
transform-style: preserve-3d;
backface-visibility: hidden;
}
.droplet-flip-box-effect-flip .droplet-flip-box-front {
transform: none;
z-index: 1;
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-right .droplet-flip-box-back {
transform: rotateX(0) rotateY(-180deg);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-right .droplet-flip-box:hover .droplet-flip-box-front {
transform: rotateX(0) rotateY(180deg);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-left .droplet-flip-box-back {
transform: rotateX(0) rotateY(180deg);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-left .droplet-flip-box:hover .droplet-flip-box-front {
transform: rotateX(0) rotateY(-180deg);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-up .droplet-flip-box-back {
transform: rotateX(-180deg) rotateY(0);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-up .droplet-flip-box:hover .droplet-flip-box-front {
transform: rotateX(180deg) rotateY(0);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-down .droplet-flip-box-back {
transform: rotateX(180deg) rotateY(0);
}
.droplet-flip-box-effect-flip.droplet-flip-box-direction-down .droplet-flip-box:hover .droplet-flip-box-front {
transform: rotateX(-180deg) rotateY(0);
}
.droplet-flip-box-effect-push .droplet-flip-box-front {
transform: none;
}
.droplet-flip-box-effect-push .droplet-flip-box {
overflow: hidden;
}
.droplet-flip-box-effect-push .droplet-flip-box:hover .droplet-flip-box-back {
transform: none;
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-right .droplet-flip-box:hover .droplet-flip-box-front {
transform: translateX(100%) translateY(0);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-right .droplet-flip-box-back {
transform: translateX(-100%) translateY(0);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-left .droplet-flip-box:hover .droplet-flip-box-front {
transform: translateX(-100%) translateY(0);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-left .droplet-flip-box-back {
transform: translateX(100%) translateY(0);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-up .droplet-flip-box:hover .droplet-flip-box-front {
transform: translateX(0) translateY(-100%);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-up .droplet-flip-box-back {
transform: translateX(0) translateY(100%);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-down .droplet-flip-box:hover .droplet-flip-box-front {
transform: translateX(0) translateY(100%);
}
.droplet-flip-box-effect-push.droplet-flip-box-direction-down .droplet-flip-box-back {
transform: translateX(0) translateY(-100%);
}
.droplet-flip-box-effect-slide .droplet-flip-box {
overflow: hidden;
}
.droplet-flip-box-effect-slide .droplet-flip-box:hover .droplet-flip-box-back {
transform: none;
}
.droplet-flip-box-effect-slide.droplet-flip-box-direction-right .droplet-flip-box-back {
transform: translateX(-100%) translateY(0);
}
.droplet-flip-box-effect-slide.droplet-flip-box-direction-left .droplet-flip-box-back {
transform: translateX(100%) translateY(0);
}
.droplet-flip-box-effect-slide.droplet-flip-box-direction-up .droplet-flip-box-back {
transform: translateX(0) translateY(100%);
}
.droplet-flip-box-effect-slide.droplet-flip-box-direction-down .droplet-flip-box-back {
transform: translateX(0) translateY(-100%);
}
.droplet-flip-box-effect-zoom-out .droplet-flip-box .droplet-flip-box-front {
transition: transform .7s, opacity .35s, width .1ms;
opacity: 1;
transform: scale(1);
z-index: 1;
width: 100%;
}
.droplet-flip-box-effect-zoom-out .droplet-flip-box:hover .droplet-flip-box-front {
width: 0;
opacity: 0;
transform: scale(.7);
transition: transform .8s, opacity .7s .1s, width .1ms .7s;
}
.droplet-flip-box-effect-zoom-in .droplet-flip-box .droplet-flip-box-back {
transition: transform .7s, opacity .5s .2s;
opacity: 0;
transform: scale(.7);
}
.droplet-flip-box-effect-zoom-in .droplet-flip-box:hover .droplet-flip-box-back {
transition: transform .7s, opacity .5s;
opacity: 1;
transform: scale(1);
}
.droplet-flip-box-effect-fade .droplet-flip-box .droplet-flip-box-back {
opacity: 0;
}
.droplet-flip-box-effect-fade .droplet-flip-box:hover .droplet-flip-box-back {
opacity: 1;
}
.elementor-widget-droplet-flip-box.droplet-flip-box-flipped .elementor-widget-container .droplet-flip-box-front {
display: none;
}
.elementor-widget-droplet-flip-box.droplet-flip-box-flipped .elementor-widget-container .droplet-flip-box-back {
transform: none;
opacity: 1;
}
@media (max-device-width:1024px) {
.droplet-flip-box {
cursor: pointer;
}
}