.bdt-flip-box { height: 280px; position: relative; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .bdt-flip-box .elementor-icon { color: #fff; } .bdt-flip-box .elementor-icon svg * { fill: #fff; } .bdt-flip-box .elementor-view-framed .elementor-icon { color: #fff; border-color: #fff; } .bdt-flip-box .elementor-view-stacked .elementor-icon { color: #fff; background-color: rgba(0, 0, 0, 0.5); } .bdt-flip-box .elementor-icon-wrapper { margin-bottom: 20px; } .bdt-flip-box-front { background-color: #1e87f0; } .bdt-flip-box-back { background-color: #b7b4b4; display: block; } .bdt-flip-box-easing-quad .bdt-flip-box-layer { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .bdt-flip-box-easing-cubic .bdt-flip-box-layer { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .bdt-flip-box-easing-quart .bdt-flip-box-layer { transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .bdt-flip-box-easing-quint .bdt-flip-box-layer { transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .bdt-flip-box-easing-expo .bdt-flip-box-layer { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .bdt-flip-box-easing-circ .bdt-flip-box-layer { transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } .bdt-flip-box-layer { position: absolute; width: 100%; height: 100%; transition: all 0.6s ease-out; } .bdt-flip-box-layer-overlay { display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: stretch; text-align: center; padding: 35px; } .bdt-flip-box-layer-title { font-size: 21px; line-height: 1; font-weight: 600; color: #fff; } .bdt-flip-box-layer-title:not(:last-child) { margin: 0 0 20px 0; padding: 0; } .bdt-flip-box-layer-desc { font-size: 14px; color: #e5e5e5; } .bdt-flip-box-layer-desc:not(:last-child) { margin: 0 0 20px 0; padding: 0; } .bdt-flip-box-image { margin: 0 0 20px 0; display: inline-block; width: 100%; } .bdt-flip-box-image img { width: 50%; display: inline-block; } .bdt-flip-box-3d-yes .bdt-flip-box-layer-inner { transform: translateZ(90px) scale(0.91); } .bdt-flip-box-3d-yes .bdt-flip-box-layer-overlay { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translateZ(0.1px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bdt-flip-box-effect-flip .bdt-flip-box { perspective: 1000px; transform-style: preserve-3d; } .bdt-flip-box-effect-flip .bdt-flip-box:hover .bdt-flip-box-back { transform: none; } .bdt-flip-box-effect-flip .bdt-flip-box-layer { transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .bdt-flip-box-effect-flip .bdt-flip-box-front { transform: none; z-index: 1; } .bdt-flip-box-effect-flip.bdt-flip-box-direction-right .bdt-flip-box-back { transform: rotateX(0) rotateY(-180deg); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-right .bdt-flip-box:hover .bdt-flip-box-front { transform: rotateX(0) rotateY(180deg); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-left .bdt-flip-box-back { transform: rotateX(0) rotateY(180deg); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-left .bdt-flip-box:hover .bdt-flip-box-front { transform: rotateX(0) rotateY(-180deg); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-up .bdt-flip-box-back { transform: rotateX(-180deg) rotateY(0); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-up .bdt-flip-box:hover .bdt-flip-box-front { transform: rotateX(180deg) rotateY(0); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-down .bdt-flip-box-back { transform: rotateX(180deg) rotateY(0); } .bdt-flip-box-effect-flip.bdt-flip-box-direction-down .bdt-flip-box:hover .bdt-flip-box-front { transform: rotateX(-180deg) rotateY(0); } .bdt-flip-box-effect-push .bdt-flip-box-front { transform: none; } .bdt-flip-box-effect-push .bdt-flip-box { overflow: hidden; } .bdt-flip-box-effect-push .bdt-flip-box:hover .bdt-flip-box-back { transform: none; } .bdt-flip-box-effect-push.bdt-flip-box-direction-right .bdt-flip-box:hover .bdt-flip-box-front { transform: translateX(100%) translateY(0); } .bdt-flip-box-effect-push.bdt-flip-box-direction-right .bdt-flip-box-back { transform: translateX(-100%) translateY(0); } .bdt-flip-box-effect-push.bdt-flip-box-direction-left .bdt-flip-box:hover .bdt-flip-box-front { transform: translateX(-100%) translateY(0); } .bdt-flip-box-effect-push.bdt-flip-box-direction-left .bdt-flip-box-back { transform: translateX(100%) translateY(0); } .bdt-flip-box-effect-push.bdt-flip-box-direction-up .bdt-flip-box:hover .bdt-flip-box-front { transform: translateX(0) translateY(-100%); } .bdt-flip-box-effect-push.bdt-flip-box-direction-up .bdt-flip-box-back { transform: translateX(0) translateY(100%); } .bdt-flip-box-effect-push.bdt-flip-box-direction-down .bdt-flip-box:hover .bdt-flip-box-front { transform: translateX(0) translateY(100%); } .bdt-flip-box-effect-push.bdt-flip-box-direction-down .bdt-flip-box-back { transform: translateX(0) translateY(-100%); } .bdt-flip-box-effect-slide .bdt-flip-box { overflow: hidden; } .bdt-flip-box-effect-slide .bdt-flip-box:hover .bdt-flip-box-back { transform: none; } .bdt-flip-box-effect-slide.bdt-flip-box-direction-right .bdt-flip-box-back { transform: translateX(-100%) translateY(0); } .bdt-flip-box-effect-slide.bdt-flip-box-direction-left .bdt-flip-box-back { transform: translateX(100%) translateY(0); } .bdt-flip-box-effect-slide.bdt-flip-box-direction-up .bdt-flip-box-back { transform: translateX(0) translateY(100%); } .bdt-flip-box-effect-slide.bdt-flip-box-direction-down .bdt-flip-box-back { transform: translateX(0) translateY(-100%); } .bdt-flip-box-effect-zoom-out .bdt-flip-box .bdt-flip-box-front { transition: transform 0.7s, opacity 0.35s, width 0.1ms; opacity: 1; transform: scale(1); z-index: 1; width: 100%; } .bdt-flip-box-effect-zoom-out .bdt-flip-box:hover .bdt-flip-box-front { width: 0; opacity: 0; transform: scale(0.7); transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s; } .bdt-flip-box-effect-zoom-in .bdt-flip-box .bdt-flip-box-back { transition: transform 0.7s, opacity 0.5s 0.2s; opacity: 0; transform: scale(0.7); } .bdt-flip-box-effect-zoom-in .bdt-flip-box:hover .bdt-flip-box-back { transition: transform 0.7s, opacity 0.5s; opacity: 1; transform: scale(1); } .bdt-flip-box-effect-fade .bdt-flip-box .bdt-flip-box-back { opacity: 0; } .bdt-flip-box-effect-fade .bdt-flip-box:hover .bdt-flip-box-back { opacity: 1; } .elementor-widget-bdt-flip-box.bdt-flip-box-flipped .elementor-widget-container .bdt-flip-box-front { display: none; } .elementor-widget-bdt-flip-box.bdt-flip-box-flipped .elementor-widget-container .bdt-flip-box-back { transform: none; opacity: 1; } @media (max-device-width: 1024px) { .bdt-flip-box { cursor: pointer; } } .bdt-flip-box-effect-slide-overflow.bdt-flip-box-direction-up .bdt-flip-box .bdt-flip-box-front { z-index: 1; } .bdt-flip-box-effect-slide-overflow.bdt-flip-box-direction-up .bdt-flip-box:hover .bdt-flip-box-front { transform: translateX(0) translateY(-50%); } .bdt-flip-box-effect-slide-overflow.bdt-flip-box-direction-up .bdt-flip-box:hover .bdt-flip-box-back { transform: translateX(0) translateY(50%); } .bdt-flip-box-effect-slide-overflow.bdt-flip-box-direction-down .bdt-flip-box .bdt-flip-box-front { z-index: 1; } .bdt-flip-box-effect-slide-overflow.bdt-flip-box-direction-down .bdt-flip-box:hover .bdt-flip-box-front { transform: translateX(0) translateY(50%); } .bdt-flip-box-effect-slide-overflow.bdt-flip-box-direction-down .bdt-flip-box:hover .bdt-flip-box-back { transform: translateX(0) translateY(-50%); }