.flip-box-wrapper {
height: 415px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.flip-box {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
transition: all .6s ease-in-out;
}
.flip-box-front,
.flip-box-back {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: stretch;
text-align: center;
position: relative;
z-index: 1;
padding: 20px;
}
.flip-box-front .flip-box-front-inner,
.flip-box-back .flip-box-back-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.elementor-flip-box--effect-flip .flip-box-back {
justify-content: center;
}
.elementor-flip-box--effect-flip .flip-front-side {
background-color: #000;
border-radius: 4px;
overflow: hidden;
transform: none;
z-index: 1;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.elementor-flip-box--effect-flip .flip-back-side {
background-color: #007bff;
border-radius: 4px;
overflow: hidden;
display: block;
position: absolute;
width: 100%;
height: 100%;
transition: all .6s ease-in-out;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0) rotateY(180deg);
}
.elementor-flip-box--effect-flip .flip-box-wrapper:hover .flip-front-side {
transform: rotateX(0) rotateY(-180deg);
}
.elementor-flip-box--effect-flip .flip-box-wrapper:hover .flip-back-side {
transform: none;
}
.flip-front-side .title {
color: #fff;
margin-bottom: 5px;
display: block;
}
.flip-front-side div.title {
font-size: 18px;
font-weight: 500;
line-height: 22px;
}
.flip-front-side .subtitle {
color: #fff;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.50px;
margin-bottom: 5px;
display: block;
}
.flip-box .elementor-icon {
display: block;
text-align: unset;
}
.flip-box .elementor-icon i,
.flip-box .elementor-icon svg {
display: inline-block;
}
.flip-box-front-inner img,
.flip-box-back-inner img {
width: 70px;
margin-bottom: 30px;
}
.flip-front-side .elementor-icon,
.flip-back-side .elementor-icon {
font-size: 50px;
margin-bottom: 30px;
color: #fff;
}
.flip-back-side .title {
color: #fff;
margin-bottom: 10px;
display: block;
}
.flip-back-side div.title {
font-weight: 500;
font-size: 16px;
line-height: 28px;
letter-spacing: 1px;
}
.flip-back-side .subtitle {
color: #fff;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.50px;
margin-bottom: 15px;
display: block;
}
.flip-back-side .description {
margin-bottom: 32px;
}
.elementor-flip-box--direction-up.elementor-flip-box--effect-flip .flip-back-side {
transform: rotateX(-180deg) rotateY(0);
}
.elementor-flip-box--direction-up.elementor-flip-box--effect-flip .flip-box-wrapper:hover .flip-front-side {
transform: rotateX(180deg) rotateY(0);
}
.elementor-flip-box--direction-down.elementor-flip-box--effect-flip .flip-back-side {
transform: rotateX(180deg) rotateY(0);
}
.elementor-flip-box--direction-down.elementor-flip-box--effect-flip .flip-box-wrapper:hover .flip-front-side {
transform: rotateX(-180deg) rotateY(0);
}
.elementor-flip-box--direction-right.elementor-flip-box--effect-flip .flip-back-side {
transform: rotateX(0) rotateY(-180deg);
}
.elementor-flip-box--direction-right.elementor-flip-box--effect-flip .flip-box-wrapper:hover .flip-front-side {
transform: rotateX(0) rotateY(180deg);
} .elementor-flip-box-3d .flip-box-wrapper {
perspective: 1000px;
transform-style: preserve-3d;
}
.elementor-flip-box-3d .flip-box-wrapper .flip-front-side,
.elementor-flip-box-3d .flip-box-wrapper .flip-box-front-inner,
.elementor-flip-box-3d .flip-box-wrapper .flip-back-side,
.elementor-flip-box-3d .flip-box-wrapper .flip-box-back-inner,
.elementor-flip-box-3d .flip-box-wrapper .flip-box-front,
.elementor-flip-box-3d .flip-box-wrapper .flip-box-back {
transform-style: preserve-3d;
}
.elementor-flip-box-3d .flip-box-wrapper .flip-box-front-inner,
.elementor-flip-box-3d .flip-box-wrapper .flip-box-back-inner {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.5, 0.3, 0.3, 1);
}
.elementor-flip-box-3d.elementor-flip-box--direction-left .flip-box-wrapper .flip-box-front-inner,
.elementor-flip-box-3d.elementor-flip-box--direction-right .flip-box-wrapper .flip-box-front-inner {
transform: translateX(0) scale(1);
}
.elementor-flip-box-3d.elementor-flip-box--direction-left .flip-box-wrapper:hover .flip-box-back-inner,
.elementor-flip-box-3d.elementor-flip-box--direction-right .flip-box-wrapper:hover .flip-box-back-inner {
transform: translateX(0) translateZ(0) scale(1);
transform-style: preserve-3d;
}
.elementor-flip-box-3d.elementor-flip-box--direction-left .flip-box-wrapper .flip-box-back-inner {
transform: translateX(400px) translateZ(60px) scale(0.88);
}
.elementor-flip-box-3d.elementor-flip-box--direction-left .flip-box-wrapper:hover .flip-box-front-inner {
transform: translateX(-400px) scale(0.88);
transform-style: preserve-3d;
}
.elementor-flip-box-3d.elementor-flip-box--direction-right .flip-box-wrapper .flip-box-back-inner {
transform: translateX(-400px) translateZ(60px) scale(0.88);
}
.elementor-flip-box-3d.elementor-flip-box--direction-right .flip-box-wrapper:hover .flip-box-front-inner {
transform: translateX(400px) scale(0.88);
transform-style: preserve-3d;
}
.elementor-flip-box-3d.elementor-flip-box--direction-up .flip-box-wrapper .flip-box-front-inner,
.elementor-flip-box-3d.elementor-flip-box--direction-down .flip-box-wrapper .flip-box-front-inner {
transform: translateX(0) scale(1);
}
.elementor-flip-box-3d.elementor-flip-box--direction-up .flip-box-wrapper:hover .flip-box-front-inner,
.elementor-flip-box-3d.elementor-flip-box--direction-down .flip-box-wrapper:hover .flip-box-front-inner {
transform: translateY(400px) scale(0.88);
transform-style: preserve-3d;
}
.elementor-flip-box-3d.elementor-flip-box--direction-up .flip-box-wrapper:hover .flip-box-back-inner,
.elementor-flip-box-3d.elementor-flip-box--direction-down .flip-box-wrapper:hover .flip-box-back-inner {
transform: translateY(0) translateZ(0) scale(1);
transform-style: preserve-3d;
}
.elementor-flip-box-3d.elementor-flip-box--direction-down .flip-box-wrapper .flip-box-back-inner {
transform: translateY(-400px) translateZ(60px) scale(0.88);
}
.elementor-flip-box-3d.elementor-flip-box--direction-up .flip-box-wrapper .flip-box-back-inner {
transform: translateY(400px) translateZ(60px) scale(0.88);
} .elementor-flip-box--effect-fade .flip-box-wrapper .flip-box.flip-front-side {
z-index: -1;
} .elementor-flip-box--effect-slide .flip-box-wrapper {
overflow: hidden;
}
.elementor-flip-box--effect-slide .flip-back-side {
transform: translateX(-100%) translateY(0);
z-index: 1;
}
.elementor-flip-box--effect-slide .flip-box-wrapper:hover .flip-back-side {
transform: none;
}
.elementor-flip-box--effect-slide.elementor-flip-box--direction-left .flip-back-side {
transform: translateX(100%) translateY(0);
}
.elementor-flip-box--effect-slide.elementor-flip-box--direction-up .flip-back-side {
transform: translateX(0) translateY(100%);
}
.elementor-flip-box--effect-slide.elementor-flip-box--direction-down .flip-back-side {
transform: translateX(0) translateY(-100%);
} .elementor-flip-box--effect-push .flip-box-wrapper {
overflow: hidden;
}
.elementor-flip-box--effect-push .flip-front-side {
transform: none;
}
.elementor-flip-box--effect-push .flip-back-side {
transform: translateX(-100%) translateY(0);
}
.elementor-flip-box--effect-push .flip-box-wrapper:hover .flip-back-side {
transform: none;
}
.elementor-flip-box--effect-push .flip-box-wrapper:hover .flip-front-side {
transform: translateX(100%) translateY(0);
} .elementor-flip-box--effect-zoom-in .flip-box-wrapper {
overflow: hidden;
}
.elementor-flip-box--effect-zoom-in .flip-box-wrapper .flip-back-side {
transition: opacity .5s .2s, -webkit-transform .7s;
transition: transform .7s, opacity .5s .2s;
transition: transform .7s, opacity .5s .2s, -webkit-transform .7s;
opacity: 0;
transform: scale(.7);
z-index: 1;
}
.elementor-flip-box--effect-zoom-in .flip-box-wrapper:hover .flip-back-side {
transition: opacity .5s, -webkit-transform .7s;
transition: transform .7s, opacity .5s;
transition: transform .7s, opacity .5s, -webkit-transform .7s;
opacity: 1;
transform: scale(1);
}
.elementor-flip-box--effect-zoom-out .flip-box-wrapper {
overflow: hidden;
}
.elementor-flip-box--effect-zoom-out .flip-box-wrapper .flip-front-side {
transition: opacity .35s, width .1ms, -webkit-transform .7s;
transition: transform .7s, opacity .35s, width .1ms;
transition: transform .7s, opacity .35s, width .1ms, -webkit-transform .7s;
opacity: 1;
transform: scale(1);
z-index: 2;
width: 100%;
}
.elementor-flip-box--effect-zoom-out .flip-box-wrapper:hover .flip-front-side {
width: 0;
opacity: 0;
transform: scale(.7);
transition: opacity .7s .1s, width .1ms .7s, -webkit-transform .8s;
transition: transform .8s, opacity .7s .1s, width .1ms .7s;
transition: transform .8s, opacity .7s .1s, width .1ms .7s, -webkit-transform .8s;
}
.elementor-flip-box--effect-zoom-out .flip-box-wrapper .flip-box {
overflow: visible;
} .elementor-flip-box--effect-fade .flip-back-side {
opacity: 0;
}
.elementor-flip-box--effect-fade .flip-box-wrapper:hover .flip-back-side {
opacity: 1;
}
.flip-front-box-overlay,
.flip-back-box-overlay {
background-color: #000;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3;
}
.flip-box-wrapper .flip-box.flip-front-side {
background-color: #fff;
}
.flip-box-wrapper .description,
.flip-box-wrapper .sub-description {
display: inline-block;
width: 80%;
} .flip-box-style-2.flip-box-wrapper {
height: auto;
}
.flip-box-style-2.flip-box-wrapper .flip-inner-wrap {
height: 415px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.flip-box-style-2 .flip-box-title {
text-align: center;
}
.flip-box-style-2 .flip-box-title .title {
margin: 25px 0 0;
}
.flip-box-style-2 .flip-box-title div.title,
.flip-box-style-2 .flip-box-title span.title {
font-size: 22px;
color: var( --e-global-color-secondary, #232323 );
display: inline-block;
}