File: /var/www/html/triad-infosec/wp-content/plugins/fusion-builder/assets/css/shortcodes/flip-boxes.css
/* stylelint-disable length-zero-no-unit */
/* stylelint-enable length-zero-no-unit */
.fusion-flip-boxes {
--awb-margin-top: 0;
--awb-margin-right: 0;
--awb-margin-bottom: 25px;
--awb-margin-left: 0;
--awb-flip-duration: var(--flip_boxes_flip_duration);
--awb-icon-color: var(--icon_color, inherit);
--awb-circle-color: var(--icon_circle_color, transparent);
--awb-circle-border-color: var(--icon_border_color, currentColor);
--awb-background-color-front: var(--flip_boxes_front_bg);
--awb-background-color-back: var(--flip_boxes_back_bg);
--awb-background-image-front: transparent;
--awb-background-image-back: transparent;
--awb-background-front-blend-mode: normal;
--awb-background-back-blend-mode: normal;
--awb-title-front-color: var(--flip_boxes_front_heading);
--awb-title-back-color: var(--flip_boxes_back_heading);
--awb-border-color: var(--flip_boxes_border_color);
--awb-border-size: var(--flip_boxes_border_size);
--awb-border-radius: var(--flip_boxes_border_radius);
--awb-text-front-color: var(--flip_boxes_front_text);
--awb-text-back-color: var(--flip_boxes_back_text);
margin: var(--awb-margin-top) var(--awb-margin-right) var(--awb-margin-bottom) var(--awb-margin-left);
}
.fusion-flip-boxes.row {
--awb-margin-left: calc(30px / -2);
/* stylelint-disable-line function-calc-no-invalid */
--awb-margin-right: calc(30px / -2);
/* stylelint-disable-line function-calc-no-invalid */
margin: var(--awb-margin-top) var(--awb-margin-right) var(--awb-margin-bottom) var(--awb-margin-left);
}
.fusion-flip-boxes .fusion-column {
box-sizing: border-box;
}
.fusion-flip-boxes .fusion-flip-box {
position: relative;
z-index: 1;
padding: 0;
margin: 0;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.fusion-flip-boxes .fusion-flip-box .flip-box-inner-wrapper {
position: relative;
margin-bottom: 15px;
perspective: 1000px;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-back,
.fusion-flip-boxes .fusion-flip-box .flip-box-front {
display: flex;
align-items: center;
top: 0;
right: 0;
left: 0;
perspective: 1000px;
padding: 27px 20px;
text-align: center;
backface-visibility: hidden;
background-clip: padding-box;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition-duration: var(--awb-flip-duration);
border: var(--awb-border-size) solid var(--awb-border-color);
border-radius: var(--awb-border-radius);
}
.fusion-flip-boxes .fusion-flip-box .flip-box-front {
position: relative;
bottom: 0;
z-index: 10;
background-color: var(--awb-background-color-front);
background-image: var(--awb-background-image-front);
background-blend-mode: var(--awb-background-front-blend-mode);
color: var(--awb-text-front-color);
}
.fusion-flip-boxes .fusion-flip-box .flip-box-back {
position: absolute;
z-index: -1;
background-color: var(--awb-background-color-back);
background-image: var(--awb-background-image-back);
background-blend-mode: var(--awb-background-back-blend-mode);
color: var(--awb-text-back-color);
}
.fusion-flip-boxes .fusion-flip-box .flip-box-back .fusion-button {
display: table;
margin: 20px auto 0;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-front-inner,
.fusion-flip-boxes .fusion-flip-box .flip-box-back-inner {
width: 100%;
}
.fusion-flip-boxes .fusion-flip-box.hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box:hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box:focus .flip-box-back,
.fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-back {
z-index: 1;
}
.fusion-flip-boxes .fusion-flip-box.hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box:hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box:focus .flip-box-front,
.fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-front {
z-index: -1;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-grafix {
display: table;
margin: 0 auto 10px;
color: var(--awb-icon-color);
}
.fusion-flip-boxes .fusion-flip-box .flip-box-image {
table-layout: fixed;
width: 100%;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-circle {
height: 64px;
width: 64px;
border: 1px solid var(--awb-circle-border-color);
border-radius: 50%;
background-color: var(--awb-circle-color);
background-clip: padding-box;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-circle i {
display: table-cell;
vertical-align: middle;
font-size: 24px;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-no-circle i {
font-size: 60px;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-heading {
margin-top: 0;
margin-bottom: 9px;
padding-top: 0;
color: var(--awb-title-front-color);
}
.fusion-flip-boxes .fusion-flip-box .flip-box-heading.without-text {
margin-bottom: 0;
}
.fusion-flip-boxes .fusion-flip-box .flip-box-heading-back {
margin-bottom: 9px;
margin-top: 0;
color: var(--awb-title-back-color);
}
.fusion-flip-boxes .fusion-flip-box .finished-animating {
transition: none !important;
animation: none !important;
}
.fusion-flip-boxes .fusion-flip-box.flip-right .flip-box-front {
transform: rotateY(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-right .flip-box-back {
transform: rotateY(-180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-right.hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-right:hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-right:focus .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-right:focus-within .flip-box-back {
transform: rotateY(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-right.hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-right:hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-right:focus .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-right:focus-within .flip-box-front {
transform: rotateY(180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-left .flip-box-front {
transform: rotateY(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-left .flip-box-back {
transform: rotateY(180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-left.hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-left:hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-left:focus .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-left:focus-within .flip-box-back {
transform: rotateY(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-left.hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-left:hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-left:focus .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-left:focus-within .flip-box-front {
transform: rotateY(-180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-up .flip-box-front {
transform: rotateX(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-up .flip-box-back {
transform: rotateX(-180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-up.hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-up:hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-up:focus .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-up:focus-within .flip-box-back {
transform: rotateX(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-up.hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-up:hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-up:focus .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-up:focus-within .flip-box-front {
transform: rotateX(180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-down .flip-box-front {
transform: rotateX(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-down .flip-box-back {
transform: rotateX(180deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-down.hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-down:hover .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-down:focus .flip-box-back,
.fusion-flip-boxes .fusion-flip-box.flip-down:focus-within .flip-box-back {
transform: rotateX(0deg);
}
.fusion-flip-boxes .fusion-flip-box.flip-down.hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-down:hover .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-down:focus .flip-box-front,
.fusion-flip-boxes .fusion-flip-box.flip-down:focus-within .flip-box-front {
transform: rotateX(-180deg);
}
.fusion-flip-boxes.flip-effect-classic .flip-box-back,
.fusion-flip-boxes.flip-effect-classic .flip-box-front {
transition: transform var(--awb-flip-duration) cubic-bezier(0.2, 0.85, 0.4, 1.275);
}
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box.hover .flip-box-grafix i:before,
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box:hover .flip-box-grafix i:before,
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box:focus .flip-box-grafix i:before,
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box:focus-within .flip-box-grafix i:before {
display: none;
}
.fusion-flip-boxes.flip-effect-3d .flip-box-inner-wrapper {
transform-style: preserve-3d;
}
.fusion-flip-boxes.flip-effect-3d .flip-box-back,
.fusion-flip-boxes.flip-effect-3d .flip-box-front {
transform-style: preserve-3d;
transition: transform var(--awb-flip-duration) ease-in-out;
}
.fusion-flip-boxes.flip-effect-3d .flip-box-front-inner,
.fusion-flip-boxes.flip-effect-3d .flip-box-back-inner {
transform: translateZ(50px) scale(0.9);
}
.ua-edge .fusion-flip-boxes .fusion-flip-box.hover .flip-box-back,
.ua-edge .fusion-flip-boxes .fusion-flip-box:hover .flip-box-back,
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus .flip-box-back,
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-back {
transform: rotateY(0deg);
z-index: 1;
}
.ua-edge .fusion-flip-boxes .fusion-flip-box.hover .flip-box-front,
.ua-edge .fusion-flip-boxes .fusion-flip-box:hover .flip-box-front,
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus .flip-box-front,
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-front {
transform: rotateY(180deg);
z-index: -1;
}