{"html":"<div id=\"{{uc_id}}\" class=\"ue-flip-box\" data-id=\"{{uc_id}}\" data-closeonbody='{{close_on_body_click}}'>\n  \n  {% if ( anim_effect == \"ue-fade\" ) or ( anim_effect == \"ue-zoomin\" ) or ( anim_effect == \"ue-zoomout\" ) or ( anim_effect == \"ue-zoominout\" )%}\n  \t<div class=\"ue-flip-box__container uc-hide {{anim_effect}} ue-flip-box__container--{{animation_trigger}}\" tabindex=\"0\">\n  {% else %}\n    <div class=\"ue-flip-box__container uc-hide {{anim_effect}}_{{anim_direction}} ue-flip-box__container--{{animation_trigger}}\" tabindex=\"0\">\n  {% endif %}\n    \n    <div class=\"ue-flip-box__panel ue-flip-box__panel--front\">\n      <div class=\"ue-flip-box__panel--front-overlay\"><\/div>\n      {% if animation_trigger == \"trigger_button\" %}<a href=\"javascript:void(0)\" class=\"ue-flip-box__front-trigger\">{{front_trigger_button_html|raw}}<\/a>{% endif %}\n      <div class=\"ue-flip-box__panel__wrapper\">\n        <div class=\"ue-flip-box__panel__content\">\n            {% if show_front_icon == \"true\" %}\n              {% if graphic_element_position == \"above_title\" %}\n               {% if graphic_element_front == \"icon\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{icon_front_html|raw}}<\/div> {% endif %}\n               {% if graphic_element_front == \"img\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\"><img src=\"{{graphic_img_front}}\" title=\"{{graphic_img_front_title}}\" alt=\"{{graphic_img_front_alt}}\" {{graphic_img_front_attributes|raw}}><\/div> {% endif %}\n               {% if graphic_element_front == \"txt\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{graphic_txt_front|raw}}<\/div> {% endif %}\n              {% endif %}\n            {% endif %}\n            {% if show_front_title == \"true\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__title\">{{title_front|raw}}<\/div>{% endif %}\n            {% if show_front_icon == \"true\" %}\n              {% if graphic_element_position == \"below_title\" %}\n               {% if graphic_element_front == \"icon\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{icon_front_html|raw}}<\/div> {% endif %}\n               {% if graphic_element_front == \"img\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\"><img src=\"{{graphic_img_front}}\" title=\"{{graphic_img_front_title}}\" alt=\"{{graphic_img_front_alt}}\" {{graphic_img_front_attributes|raw}}><\/div> {% endif %}\n               {% if graphic_element_front == \"txt\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{graphic_txt_front|raw}}<\/div> {% endif %}\n              {% endif %}\n            {% endif %}\n            {% if show_front_text == \"true\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__description\">{{description_front|raw}}<\/div>{% endif %}\n        <\/div>\n      <\/div>\n    <\/div>\n    \n\n      \n    <div class=\"ue-flip-box__panel ue-flip-box__panel--back\">\n      <div class=\"ue-flip-box__panel--back-overlay\"><\/div>\n      {% if animation_trigger == \"trigger_button\" and show_back_trigger_button == \"true\" %}<a href=\"javascript:void(0)\" class=\"ue-flip-box__back-trigger\">{{back_trigger_button_html|raw}}<\/a>{% endif %}\n      <div class=\"ue-flip-box__panel__wrapper\">\n        <div class=\"ue-flip-box__panel__content\">\n          {% if show_back_icon == \"true\" %}\n            {% if graphic_element_position == \"above_title\" %}\n             {% if graphic_element_back == \"icon\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{icon_back_html|raw}}<\/div>{% endif %}\n             {% if graphic_element_back == \"img\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__icon\"><img src=\"{{graphic_img_back}}\" title=\"{{graphic_img_back_title}}\" alt=\"{{graphic_img_back_alt}}\" {{graphic_img_back_attributes|raw}}><\/div> {% endif %}\n             {% if graphic_element_back == \"txt\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{graphic_txt_back|raw}}<\/div> {% endif %}\n            {% endif %}\n          {% endif %}\n          {% if show_back_title == \"true\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__title\">{{title_back|raw}}<\/div>{% endif %}\n          {% if show_back_icon == \"true\" %}\n            {% if graphic_element_position == \"below_title\" %}\n             {% if graphic_element_back == \"icon\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{icon_back_html|raw}}<\/div>{% endif %}\n             {% if graphic_element_back == \"img\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__icon\"><img src=\"{{graphic_img_back}}\" title=\"{{graphic_img_back_title}}\" alt=\"{{graphic_img_back_alt}}\" {{graphic_img_back_attributes|raw}}><\/div> {% endif %}\n             {% if graphic_element_back == \"txt\" %} <div class=\"ue-flip-box__panel__element ue-flip-box__icon\">{{graphic_txt_back|raw}}<\/div> {% endif %}\n            {% endif %}\n          {% endif %}\n          {% if show_back_text == \"true\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__description\">{{description_back|raw}}<\/div>{% endif %}\n          {% if show_back_button == \"true\" %}<div class=\"ue-flip-box__panel__element ue-flip-box__button\"><a href=\"{{button_link}}\" class=\"ue_btn\" {{button_link_html_attributes|raw}}>{{button_text|raw}}<\/a><\/div>{% endif %}\n        <\/div>\n      <\/div>\n    <\/div>\n    \n  <\/div>\n  \n   \n      \n  {% if show_overlay == \"true\" %}\n  \t<div class=\"ue-flip-box__overlay\"><\/div>\n  {% endif %}\n      \n<\/div>","css":"\/* elementor container support *\/\n.e-con-inner>.elementor-widget-ucaddon_flip_box, .e-con>.elementor-widget-ucaddon_flip_box {\n    width: var(--container-widget-width);\n    --flex-grow: var(--container-widget-flex-grow);\n}\n\n#{{uc_id}} .ue-flip-box__panel.ue-flip-box__panel--front,\n#{{uc_id}} .ue-flip-box__panel.ue-flip-box__panel--back {\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden; \n}\n\n\n#{{uc_id}} .ue-flip-box__panel--back .ue_btn{\n\tdisplay: {{button_style}};\n}\n{% if ( anim_effect == \"ue-flip\" ) or ( anim_effect == \"ue-flip-alt\" )  %} \n\n\t{% if add_3d_depth == \"true\"  %}\n        #{{uc_id}} .ue-flip-box__panel__wrapper { \n            transform: translateZ(90px) scale(0.91);\n            transform-style: preserve-3d;\n        }\t\n    {% endif %}\n\n{% else %}\n\t\n\t#{{uc_id}} .ue-flip-box__container, #{{uc_id}} .ue-flip-box__panel {\n      overflow: hidden;\n    }\n\t\n{% endif %}\n\n{% if show_overlay == \"true\" %}\n  #{{uc_id}} .ue-flip-box__overlay {\n    position: fixed;\n  \ttop: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n  \topacity: 0;\n  \tz-index: -1;\n  \ttransition: all 0.3s;\n    bottom:0;\n    right:0;\n  }\n\n\n  #{{uc_id}} .ue-flip-box__container.uc-show { \n      z-index: 3;\n  }\n\n  #{{uc_id}} .ue-flip-box__container.uc-show + .ue-flip-box__overlay { \n    \topacity: 1;\n    \tz-index: 2;\n  }\n\n{% endif %}\n\n\n\n{% if animation_trigger == \"trigger_button\" %}\n\n#{{uc_id}} .ue-flip-box__front-trigger\n{\n  position:absolute;\n  {{front_trigger_horizontal_position}}:{{front_trigger_horizontal_spacing}}px;\n  {{front_trigger_vertical_position}}:{{front_trigger_vertical_spacing}}px;\n  cursor:pointer;\n  line-height:1em;\n  display:block;\n}\n\n#{{uc_id}} .ue-flip-box__front-trigger svg\n{\n  width:1em;\n  height:1em;\n}\n\n#{{uc_id}} .ue-flip-box__back-trigger\n{\n  position:absolute;\n  {{back_trigger_horizontal_position}}:{{back_trigger_horizontal_spacing}}px;\n  {{back_trigger_vertical_position}}:{{back_trigger_vertical_spacing}}px;\n  cursor:pointer;\n  line-height:1em;\n  display:block;\n}\n\n\n\n#{{uc_id}} .ue-flip-box__back-trigger svg\n{\n  width:1em;\n  height:1em;\n}\n\n{% endif %}\n\n#{{uc_id}} .ue-flip-box__panel--front-overlay, #{{uc_id}} .ue-flip-box__panel--back-overlay\n{\n  position:absolute;\n  top:0;\n  bottom:0;\n  right:0;\n  left:0;\n  z-index:-1;\n}\n\n{% if graphic_element_front == \"img\" %}\n#{{uc_id}} .ue-flip-box__panel--front .ue-flip-box__icon img{\n  max-width: none;\n}\n{% endif %}\n{% if graphic_element_back == \"img\" %}\n#{{uc_id}} .ue-flip-box__panel--back .ue-flip-box__icon img{\n  max-width: none;\n}\n{% endif %}","js":"jQuery(document).ready(function(){\t\nfunction {{uc_id}}_start(){\n\n  new UEFlipbox(\"#{{uc_id}}\");\n    \t\n}setTimeout(function(){if(jQuery(\"#{{uc_id}}\").length) {{uc_id}}_start(); else\n\tjQuery( document ).on( 'elementor\/popup\/show', () => { if(jQuery(\"#{{uc_id}}\").length) {{uc_id}}_start();});},100);\n});"}