{"html":"<div class=\"uc_list_image_background_hover_switcher {{remote_parent.class|raw}} {{uc_filtering_addclass}}\" id=\"{{uc_id}}\" {{remote_parent.attributes|raw}} {{uc_filtering_attributes|raw}} data-first-selected=\"{{first_selected}}\">\n\t<div class=\"uc_hover_switcher_row uc-items-wrapper\">\n\t\t{{put_items()}}\n\t<\/div>\n\t<div class=\"uc_hover_remote_container uc-items-wrapper2\">\n  \t\t{{put_items2()}}\n  \t<\/div>\n<\/div>","html_item":"<div class=\"uc_hover_switcher_col uc_hover_switcher_col-{{item.item_index}}\" id=\"{{item.item_id}}\">\n  <div class=\"ue-item-overlay\"><\/div>\n  <div class=\"uc_hover_switcher_content\">\n    {% if show_title == \"true\" %}\n      {% if link_on_title == \"true\" %}<a href=\"{{item.button_link}}\" {{item.button_link_html_attributes|raw}}>{% endif %}\n        <{{title_html_tag}} class=\"uc_hover_switcher_title title_space\">{{item.title|raw}}<\/{{title_html_tag}}>\n      {% if link_on_title == \"true\" %}<\/a>{% endif %}\n    {% endif %}\n    <div class=\"uc_hover_switcher_link\">\n      {% if show_description == \"true\" %}<div class=\"uc_hover_switcher_desc\">{{item.description|raw}}<\/div>{% endif %}\n      {% if show_button == \"true\" %}\n      \t<a class=\"uc_button uc_more_btn\" href=\"{{item.button_link}}\" {{item.button_link_html_attributes|raw}}>\n          {% if item.button_text|raw is empty %}\n          \t{{button_text|raw}}\n          {% else %}\n          \t{{item.button_text|raw}}\n          {% endif %}\n      \t<\/a>\n      {% endif %}\n    <\/div>\n  <\/div>\n<\/div>\n\n<figure class=\"uc_background_img\">\n  <div class=\"uc_hover_switcher_overlay\"><\/div>\n  <img src=\"{{item.image}}\" alt=\"{{item.image_alt}}\" id=\"{{item.item_id}}\">\n<\/figure>","html_item2":"<div class=\"uc_hover_remote_item\">\n  <div class=\"uc_hover_remote_segment\"><\/div>\n<\/div>","css":"#{{uc_id}} *{\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n}\n\n\n#{{uc_id}} .ue-item-overlay\n{\n  position:absolute;\n  top:0;\n  left:0;\n  right:0;\n  bottom:0;\n  transition:0.3s;\n}\n\n\n#{{uc_id}} .uc_hover_switcher_row{\n\tposition: relative;\n\twidth: 100%;\n\toverflow: hidden;\n\tdisplay: {{layout}};\n    background: {{background_color}};\n    direction:{{direction_ltr_rtl}};\n}\n#{{uc_id}} .uc_hover_switcher_col{\n\tposition: relative;\n\tz-index: 2;\n    \n  {% if layout == \"grid\" %}\n  \t\tborder-top-color:{{border_color}};\n      border-top-width:{{border_width}}px;\n      border-top-style:solid;\n  {% endif %}\n  \n    {% if direction_ltr_rtl == \"ltr\" %}\n      border-right-color:{{border_color}};\n      border-right-width:{{border_width}}px;\n      border-right-style:solid;\n    {% endif %}\n    {% if direction_ltr_rtl == \"rtl\" %}\n      border-left-color:{{border_color}};\n      border-left-width:{{border_width}}px;\n      border-left-style:solid;\n    {% endif %}\t\n    flex:1;\n    overflow: hidden;\n}\n\n#{{uc_id}} .uc_hover_switcher_content{\n\tdisplay: flex;\n\theight: 100%;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\tcolor: #fff;\n    text-align:{{alignment}};\n    position:relative;\n}\n #{{uc_id}} .uc_hover_switcher_title{\n\t\n\ttransition: {{hover_duration}}ms;\n\n}\n\n.uc_hover_switcher_title\n{\n  font-size: 21px;\n}\n\n#{{uc_id}} .uc_hover_switcher_link{\n\toverflow: hidden;\n\ttransform-origin: bottom;\n\ttransition: {{hover_duration_out}}ms;\n    max-height: 0px;\n  \n}\n#{{uc_id}} .uc_hover_switcher_col:hover .uc_hover_switcher_link{\n    max-height: 500px;\n\toverflow: visible;\n    transition: {{hover_duration}}ms;\n}\n\n#{{uc_id}}[data-remoteid] .uc_hover_switcher_col.uc_hover .uc_hover_switcher_link,\n#{{uc_id}}[data-sync] .uc_hover_switcher_col.uc_hover .uc_hover_switcher_link{\n \tmax-height: 500px;\n\toverflow: visible;\n}\n\n#{{uc_id}} .uc_hover_switcher_desc{\n\t\n}\n#{{uc_id}} .uc_button{\n\t\n\tdisplay: {{button_style}};\n\ttext-decoration: none;\n    text-align:center;\n}\n\n#{{uc_id}} .uc_background_img img {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover;\n}\n#{{uc_id}} .uc_hover_switcher_overlay{\t\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\theight: 100%;\n\twidth: 100%;\n\tz-index: 0;\n\toverflow: hidden;\n}\n#{{uc_id}} .uc_hover_switcher_overlay{\n\tz-index: 1;\n}\n\n#{{uc_id}} .uc_background_img{\n\tposition: absolute;\n  \n\ttop: 0;\n    {% if direction_ltr_rtl == \"ltr\" %}\n      left: 0;\n    {% endif %}\n    {% if direction_ltr_rtl == \"rtl\" %}\n      right: 0;\n    {% endif %}\t\n\t\n\theight: 100%;\n\twidth: 100%;\n\tz-index: 0;\n\toverflow: hidden;\n\tvisibility: hidden;\n\topacity: 0;\n}\n\n#{{uc_id}} .uc_hover_switcher_col + .uc_background_img{\n\ttransition-duration: {{hover_duration}}ms;\n}\n\n#{{uc_id}} .uc_hover_switcher_col.uc_hover + .uc_background_img{\n\ttransition-duration: {{hover_duration}}ms;\n\topacity: 1;\n\tmargin: 0;\n\tvisibility: visible;\n\ttransform: scale(1.05);\n}\n\n#{{uc_id}} .uc_hover_switcher_col:last-of-type{\n  \n  {% if direction_ltr_rtl == \"ltr\" %}\n      border-right: 0px;\n    {% endif %}\n  \n  {% if direction_ltr_rtl == \"rtl\" %}\n      border-left: 0px;\n    {% endif %}\n\t\n}\n\n@media screen and (max-width: {{responsive_breakpoint}}px) {\n  \n  #{{uc_id}} .uc_hover_switcher_row{\n\n\tdisplay: flex;\n  }\n}\n\n\n\n{% if direction == \"horizontal\" %}\n\n@media screen and (max-width: {{responsive_breakpoint}}px) {\n\t#{{uc_id}}.uc_list_image_background_hover_switcher .uc_hover_switcher_col{ \n     \n        flex:1 0 {{item_width_on_mobile}}px\n    }\n  \n\n  \n  \t#{{uc_id}}.uc_list_image_background_hover_switcher .uc_hover_switcher_row{ overflow-x: auto;}\t\n  \t#{{uc_id}}.uc_list_image_background_hover_switcher .uc_background_img {\n    \twidth: calc({{item_width_on_mobile}}px * {{uc_num_items}}) !important;\n    }\n  \n  \n}\n{% endif %}\n\n\n\n{% if direction == \"vertical\" %}\n    #{{uc_id}} .uc_hover_switcher_row{\n        \n\t\tflex-direction: column;\n\t\tjustify-content: space-around;\n    }\n    #{{uc_id}} .uc_hover_switcher_col {\n        \n        border-right-style:none;\n        border-right-color:transparent;\n        border-left-color:transparent;\n        border-right-width:0px;\n        border-left-width:0px;\n        border-bottom-color:{{border_color}};\n        border-bottom-style:solid;\n        border-bottom-width:{{border_width}}px;\n        flex:auto;\n    }\n\t#{{uc_id}} .uc_hover_switcher_col:last-of-type{\n        border-bottom: 0px;\n    }\n\n\t\n\t\n{% endif %}\n\n@media screen and (max-width: 767px) {\n  \n  {% if vertical_direction_on_mobile == \"true\" %}\n     #{{uc_id}} .uc_hover_switcher_row{\n          flex-direction: column;\n          justify-content: space-around;\n      }\n      #{{uc_id}} .uc_hover_switcher_col {\n\n          border-right-style:none;\n          border-right-color:transparent;\n          border-left-color:transparent;\n          border-right-width:0px;\n          border-left-width:0px;\n          border-bottom-color:{{border_color}};\n          border-bottom-style:solid;\n          border-bottom-width:{{border_width}}px;\n          flex:auto;\n      }\n      #{{uc_id}} .uc_hover_switcher_col:last-of-type{\n          border-bottom: 0px;\n      }\n  {% endif %}\n\n}","css_item":"#{{item.item_id}}\n{\n  object-position:{{item.image_position}};\n}\n\n\n{% if split_mode == \"true\" %}\n#{{item.item_id}} \n{\n  background-image:url({{item.image}});\n  background-size:cover;\n  background-repeat:none;\n}\n\n#{{uc_id}}:hover #{{item.item_id}} \n{\n  background-image:none;\n}\n{% endif %}","js":"jQuery(document).ready(function(){\n\tfunction {{uc_id}}_start(){\n      \n      var objSwitcher = jQuery('#{{uc_id}}');\n      \n      function initSwitcher(){\n      \n        var objSwitcherCols = objSwitcher.find('.uc_hover_switcher_col');\n        var objSwitcherRemoteItems = objSwitcher.find(\".uc_hover_remote_item\");\n        var classActive = 'uc_hover';\n        \n        var isFirstSelected = objSwitcher.data('first-selected');\n        \n        var firstObjSwitcherCol = objSwitcherCols.eq({{first_selected_num}});      \n        var firstObjSwitcherRemoteItem = objSwitcherRemoteItems.eq({{first_selected_num}});\n        \n        if(isFirstSelected == true){          \n          \n          firstObjSwitcherCol.addClass(classActive);\n          firstObjSwitcherRemoteItem.addClass(classActive);\n          \n        }        \n\n        function setActiveItem(objSwitcherCol, objSwitcherRemoteItem){\n\n          objSwitcherCols.removeClass(classActive);\n          objSwitcherCol.addClass(classActive);\n\n          objSwitcherRemoteItems.removeClass(classActive);\n          objSwitcherRemoteItem.addClass(classActive);\n\n        }\n\n        function onMouseEnter(){\n\n          var objSwitcherCol = jQuery(this);\n          var currentItemIndex = Math.floor(objSwitcherCol.index() \/ 2);\n          var objSwitcherRemoteItem = objSwitcherRemoteItems.eq(currentItemIndex);\n\n          setActiveItem(objSwitcherCol, objSwitcherRemoteItem);\n\n          objSwitcherCol.trigger(\"click\");\n          objSwitcherRemoteItem.trigger(\"click\"); \n\n        }\n\n        function onMouseClick(){\n\n          var objSwitcherRemoteItem = jQuery(this);\n          var currentItemIndex = objSwitcherRemoteItem.index();\n          var objSwitcherCol = objSwitcherCols.eq(currentItemIndex);\n\n          setActiveItem(objSwitcherCol, objSwitcherRemoteItem);\n\n        }\n\n        objSwitcherCols.on('mouseenter', onMouseEnter);\n        objSwitcherRemoteItems.on('click', onMouseClick);\n      \n      }      \n     \n      initSwitcher();\n      \n      objSwitcher.on(\"uc_ajax_refreshed\",function(){      \n     \tinitSwitcher();      \n  \t  }); \n           \n\n      var objRemoteOptions = {\n          class_items:\"uc_hover_remote_item\",\n          class_active:\"uc_hover\",\n          selector_item_trigger:\".uc_hover_remote_segment\"\n      };\n\n      {{ucfunc(\"put_remote_parent_js\",\"objSwitcher\",\"objRemoteOptions\")}}\n      \n\t}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   \n });"}