.ba-flipbox-content-templates {
width: 100%
}
.brxe-ba-flipbox {
width: 100%;
}
.brxe-ba-flipbox .icon {
display: inline-block;
font-size: 40px;
line-height: 1;
text-align: center
}
:where(.brxe-ba-flipbox) .icon a {
display: inline-flex;
}
.brxe-ba-flipbox .icon-box-wrapper {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.brxe-ba-flipbox .icon-box-wrapper.icon-position-left {
display: flex;
flex-direction: row
}
.brxe-ba-flipbox .icon-box-wrapper.icon-position-right {
display: flex;
flex-direction: row-reverse
}
.brxe-ba-flipbox .icon-box-wrapper.icon-position-top .icon-image-wrapper,
.brxe-ba-flipbox .icon-box-wrapper.icon-position-top i.icon {
margin-bottom: 20px
}
.brxe-ba-flipbox .icon-box-wrapper.icon-position-left .icon-image-wrapper,
.brxe-ba-flipbox .icon-box-wrapper.icon-position-left i.icon {
margin-right: 20px
}
.brxe-ba-flipbox .icon-box-wrapper.icon-position-bottom .icon-image-wrapper,
.brxe-ba-flipbox .icon-box-wrapper.icon-position-bottom i.icon {
margin-top: 20px
}
.brxe-ba-flipbox .icon-box-wrapper.icon-position-right .icon-image-wrapper,
.brxe-ba-flipbox .icon-box-wrapper.icon-position-right i.icon {
margin-left: 20px
}
.ba-flipbox-wrapper {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px
}
.ba-flipbox-front {
z-index: 1
}
.ba-flipbox-back,
.ba-flipbox-front {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute !important;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
background-position: top left;
background-size: cover;
-webkit-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
-moz-transition: all .65s ease-in-out;
-ms-transition: all .65s ease-in-out;
-o-transition: all .65s ease-in-out
}
.ba-flipbox-front {
-webkit-transform: none;
-ms-transform: none;
transform: none;
-moz-transform: none;
-o-transform: none
}
.ba-flipbox-3d .icon-box-wrapper {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 70px) scale(.9);
transform: translate3d(0, 0, 70px) scale(.9);
-moz-transform: translate3d(0, 0, 70px) scale(.9);
-ms-transform: translate3d(0, 0, 70px) scale(.9);
-o-transform: translate3d(0, 0, 70px) scale(.9)
}
.ba-flipbox-flip-elastic .ba-flipbox-back,
.ba-flipbox-flip-elastic .ba-flipbox-front {
-webkit-transition: all .65s cubic-bezier(.2, .85, .4, 1.275);
transition: all .65s cubic-bezier(.2, .85, .4, 1.275);
-moz-transition: all .65s cubic-bezier(.2, .85, .4, 1.275);
-ms-transition: all .65s cubic-bezier(.2, .85, .4, 1.275);
-o-transition: all .65s cubic-bezier(.2, .85, .4, 1.275)
}
.ba-flipbox-flip-left .ba-flipbox-front {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-left .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(180deg);
transform: rotateX(0) rotateY(180deg);
-moz-transform: rotateX(0) rotateY(180deg);
-ms-transform: rotateX(0) rotateY(180deg);
-o-transform: rotateX(0) rotateY(180deg)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-left .ba-flipbox-front {
-webkit-transform: rotateX(0) rotateY(-180deg);
transform: rotateX(0) rotateY(-180deg);
-moz-transform: rotateX(0) rotateY(-180deg);
-ms-transform: rotateX(0) rotateY(-180deg);
-o-transform: rotateX(0) rotateY(-180deg)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-left .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-right .ba-flipbox-front {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-right .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(-180deg);
transform: rotateX(0) rotateY(-180deg);
-moz-transform: rotateX(0) rotateY(-180deg);
-ms-transform: rotateX(0) rotateY(-180deg);
-o-transform: rotateX(0) rotateY(-180deg)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-right .ba-flipbox-front {
-webkit-transform: rotateX(0) rotateY(180deg);
transform: rotateX(0) rotateY(180deg);
-moz-transform: rotateX(0) rotateY(180deg);
-ms-transform: rotateX(0) rotateY(180deg);
-o-transform: rotateX(0) rotateY(180deg)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-right .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-up .ba-flipbox-front {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-up .ba-flipbox-back {
-webkit-transform: rotateX(-180deg) rotateY(0);
transform: rotateX(-180deg) rotateY(0);
-moz-transform: rotateX(-180deg) rotateY(0);
-ms-transform: rotateX(-180deg) rotateY(0);
-o-transform: rotateX(-180deg) rotateY(0)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-up .ba-flipbox-front {
-webkit-transform: rotateX(180deg) rotateY(0);
transform: rotateX(180deg) rotateY(0);
-moz-transform: rotateX(180deg) rotateY(0);
-ms-transform: rotateX(180deg) rotateY(0);
-o-transform: rotateX(180deg) rotateY(0)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-up .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-bottom .ba-flipbox-front {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-flip-bottom .ba-flipbox-back {
-webkit-transform: rotateX(180deg) rotateY(0);
transform: rotateX(180deg) rotateY(0);
-moz-transform: rotateX(180deg) rotateY(0);
-ms-transform: rotateX(180deg) rotateY(0);
-o-transform: rotateX(180deg) rotateY(0)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-bottom .ba-flipbox-front {
-webkit-transform: rotateX(-180deg) rotateY(0);
transform: rotateX(-180deg) rotateY(0);
-moz-transform: rotateX(-180deg) rotateY(0);
-ms-transform: rotateX(-180deg) rotateY(0);
-o-transform: rotateX(-180deg) rotateY(0)
}
.brxe-ba-flipbox:hover .ba-flipbox-flip-bottom .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0)
}
.ba-flipbox-zoom-in .ba-flipbox-back {
opacity: 0;
-webkit-transform: scale(.75);
-ms-transform: scale(.75);
transform: scale(.75);
z-index: 1;
-moz-transform: scale(.75);
-o-transform: scale(.75)
}
.brxe-ba-flipbox:hover .ba-flipbox-zoom-in .ba-flipbox-back {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
z-index: 1;
-moz-transform: scale(1);
-o-transform: scale(1)
}
.brxe-ba-flipbox:hover .ba-flipbox-zoom-out .ba-flipbox-front {
opacity: 0;
-webkit-transform: scale(.75);
-ms-transform: scale(.75);
transform: scale(.75);
-moz-transform: scale(.75);
-o-transform: scale(.75)
}
.ba-flipbox-fade-in .ba-flipbox-back {
opacity: 0;
z-index: 1
}
.brxe-ba-flipbox:hover .ba-flipbox-fade-in .ba-flipbox-back {
opacity: 1;
z-index: 1
}
[class*=" ba-flipbox-slide-"],
[class*=" ba-flipbox-swap-"] {
overflow: hidden;
-webkit-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
-moz-transition: all .65s ease-in-out;
-ms-transition: all .65s ease-in-out;
-o-transition: all .65s ease-in-out
}
[class*=" ba-flipbox-slide-"] .ba-flipbox-front,
[class*=" ba-flipbox-swap-"] .ba-flipbox-front {
z-index: 0;
}
[class*=" ba-flipbox-slide-"] .ba-flipbox-back,
[class*=" ba-flipbox-swap-"] .ba-flipbox-back {
z-index: 1;
}
.ba-flipbox-slide-left .ba-flipbox-back {
transform: translateX(100%) translateY(0);
}
.ba-flipbox-slide-right .ba-flipbox-back {
transform: translateX(-100%) translateY(0);
}
.ba-flipbox-slide-up .ba-flipbox-back {
transform: translateX(0) translateY(100%);
}
.ba-flipbox-slide-down .ba-flipbox-back {
transform: translateX(0) translateY(-100%);
}
.brxe-ba-flipbox:hover [class*=" ba-flipbox-slide-"] .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0);
}
.ba-flipbox-swap-left .ba-flipbox-back {
transform: translateX(100%) translateY(0);
}
.brxe-ba-flipbox:hover .ba-flipbox-swap-left .ba-flipbox-front {
transform: translateX(100%) translateY(0);
}
.ba-flipbox-swap-right .ba-flipbox-back {
transform: translateX(-100%) translateY(0);
}
.brxe-ba-flipbox:hover .ba-flipbox-swap-right .ba-flipbox-front {
transform: translateX(-100%) translateY(0);
}
.ba-flipbox-swap-up .ba-flipbox-back {
transform: translateX(0) translateY(100%);
}
.brxe-ba-flipbox:hover .ba-flipbox-swap-up .ba-flipbox-front {
transform: translateX(0) translateY(100%);
}
.ba-flipbox-swap-down .ba-flipbox-back {
transform: translateX(0) translateY(-100%);
}
.brxe-ba-flipbox:hover .ba-flipbox-swap-down .ba-flipbox-front {
transform: translateX(0) translateY(-100%);
}
.brxe-ba-flipbox:hover [class*=" ba-flipbox-swap-"] .ba-flipbox-back {
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-moz-transform: rotateX(0) rotateY(0);
-ms-transform: rotateX(0) rotateY(0);
-o-transform: rotateX(0) rotateY(0);
}