/* 1🌱 Flip Card — front-end styles.
 * Ported from Flip Cards Module For Divi 0.9.5 (learnhowwp.com, GPL) with the same class names, so a card
 * converted from that plugin looks the same and any custom CSS written against it keeps working.
 * Added: the card also turns on keyboard focus (:focus-visible) and on tap (osfc.js adds .osfc-flipped).
 * Hover only applies where the pointer can hover, so a tap on a phone is not overridden by a stuck :hover.
 * The hover rules sit at the end so each direction still overrides the base rotateY on specificity. */
.flip_box{background-color:transparent;max-width:550px;height:455px;-webkit-perspective:1000px;perspective:1000px}
.flip_box_inner{position:relative;width:100%;height:100%;transition:transform .8s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.flip_box:focus-visible .flip_box_inner,.flip_box:has(:focus-visible) .flip_box_inner,.flip_box.osfc-flipped .flip_box_inner{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.flip_box_back,.flip_box_front{position:absolute;box-sizing:border-box;width:100%;height:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding:25px}
.flip_box_front{background-color:#bbb;color:#000}
.flip_box_back{background-color:#1e90ff;color:#fff;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.flip_box .image_wrap{display:block;margin-left:auto;margin-right:auto;margin-bottom:30px;text-align:center}
.flip_box .icon_circle{display:inline-block;border-radius:100%;padding:25px;line-height:1}
.flip_box.flip_down:focus-visible .flip_box_inner,.flip_box.flip_down:has(:focus-visible) .flip_box_inner,.flip_box.flip_down.osfc-flipped .flip_box_inner,.flip_down .flip_box_back{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}
.flip_box.flip_up:focus-visible .flip_box_inner,.flip_box.flip_up:has(:focus-visible) .flip_box_inner,.flip_box.flip_up.osfc-flipped .flip_box_inner,.flip_up .flip_box_back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
.flip_box.flip_left:focus-visible .flip_box_inner,.flip_box.flip_left:has(:focus-visible) .flip_box_inner,.flip_box.flip_left.osfc-flipped .flip_box_inner,.flip_left .flip_box_back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.flip_box_back .et_pb_button_wrapper{margin-top:20px}
.lwp_flip_box_3d .et_pb_button_wrapper,.lwp_flip_box_3d .flip_box_back .back_body,.lwp_flip_box_3d .flip_box_back .back_title,.lwp_flip_box_3d .flip_box_back span.image_wrap,.lwp_flip_box_3d .flip_box_front .front_body,.lwp_flip_box_3d .flip_box_front .front_title,.lwp_flip_box_3d .flip_box_front span.image_wrap{-webkit-transform:translateZ(90px);transform:translateZ(90px);transition:all .3s ease;width:90%;margin-left:auto;margin-right:auto}
.lwp_flip_box_3d span.image_wrap{margin-top:15px}
.lwp_flip_box_3d .back_body,.lwp_flip_box_3d .et_pb_button_wrapper,.lwp_flip_box_3d .front_body{margin-bottom:15px}
.lwp_flip_box_3d .flip_box_back,.lwp_flip_box_3d .flip_box_front{position:absolute;width:100%;height:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding:25px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.osfc .flip_card{border-style:solid;border-width:0}
.flip_box:focus{outline:none}
.flip_box:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.flip_box_inner{transition-duration:.01ms!important}}
/* Builder preview: the card sizes to its front so it can be selected and edited; the back still shows on hover. */
.osfc-vb.flip_box{min-height:200px}
.osfc-vb .flip_box_front{position:relative}
.osfc-vb .flip_box_back{top:0;left:0}
.osfc:hover .osfc-vb .flip_box_inner{transform:rotateY(180deg)}
.osfc:hover .osfc-vb.flip_left .flip_box_inner{transform:rotateY(-180deg)}
.osfc:hover .osfc-vb.flip_up .flip_box_inner{transform:rotateX(180deg)}
.osfc:hover .osfc-vb.flip_down .flip_box_inner{transform:rotateX(-180deg)}
@media (hover:hover){.flip_box:hover .flip_box_inner{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}}
@media (hover:hover){.flip_box.flip_down:hover .flip_box_inner{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}
@media (hover:hover){.flip_box.flip_up:hover .flip_box_inner{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}}
@media (hover:hover){.flip_box.flip_left:hover .flip_box_inner{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}
.osfc-vcenter .flip_box_front,.osfc-vcenter .flip_box_back{display:flex;flex-direction:column;justify-content:center}
.osfc-vcenter .flip_box_front>*,.osfc-vcenter .flip_box_back>*{flex:0 0 auto}
.osfc-vcenter.osfc-vb .flip_box_front{min-height:inherit}
/* A card with its own Card Height: both sides fill it (so Vertical Alignment has room to work). */
.osfc-fixed-height .flip_box_front,.osfc-fixed-height .flip_box_back{height:100%}