{
	"data": {
		"_customHTML": "<section class=\"features2\" group=\"Features\" data-bg-video=\"{{bg.type == 'video'&amp;&amp;bg.value.url}}\" mbr-class=\"{\n         'mbr-fullscreen': fullScreen,\n         'mbr-parallax-background': bg.parallax}\">\n\n    <mbr-parameters>\n    <!-- Block parameters controls (Blue \"Gear\" panel) -->\n        <input type=\"range\" inline=\"\" title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"9\" step=\"1\" value=\"3\">\n        <input type=\"range\" inline=\"\" title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"9\" step=\"1\" value=\"3\">\n\n        <input type=\"checkbox\" title=\"Show Title\" name=\"showTitle\" checked=\"\">\n        <input type=\"checkbox\" title=\"Show Text\" name=\"showText\" checked=\"\">\n        \n        <select title=\"Cards\" name=\"cardsAmount\">\n            <option value=\"1\" selected=\"\">1</option>\n            <option value=\"2\">2</option>\n            <option value=\"3\">3</option>\n            </select>\n            \n\n      \n <header>Before 1</header>\n      <input type=\"image\" title=\"Image 1\" name=\"bgImgBe3\" value=\"https://www.unsitepourtous.be/mobi/lionaf.jpg\" condition=\"cardsAmount <= '3'\">\n      <input type=\"image\" title=\"Image 2\" name=\"bgImgAf3\" value=\"https://www.unsitepourtous.be/mobi/lionbe.jpg\" condition=\"cardsAmount <= '3'\">\n\n      <input type=\"range\" title=\"Height Tunning\" name=\"Heightcon3\" min=\"100\" max=\"1300\" step=\"1\" value=\"247\" condition=\"cardsAmount <= '3'\">\n      <input type=\"range\" title=\"Width Tunning\" name=\"Widthcon3\" min=\"100\" max=\"1300\" step=\"1\" value=\"331\" condition=\"cardsAmount <= '3'\">\n      \n        <select inline=\"\" title=\"Comparision Style\" name=\"comparlogo\" condition=\"cardsAmount <= '3'\">\n            <option value=\" \">Nothing</option>\n            <option value=\"https://www.unsitepourtous.be/mobi//comparision.png\" selected=\"\">Round</option>\n            <option value=\"https://www.unsitepourtous.be/mobi//comparision2.png\">Arrow</option>\n                       <option value=\"https://www.unsitepourtous.be/mobi//comparision3.png\">Carré</option>\n        </select>\n      \n       <header condition=\"cardsAmount == '2' || cardsAmount == '3'\">Before 2</header>\n      \n       <input type=\"image\" title=\"Image 1\" name=\"bgImgBe4\" value=\"https://www.unsitepourtous.be/mobi/lionaf.jpg\" condition=\"cardsAmount == '2' || cardsAmount == '3'\">\n      <input type=\"image\" title=\"Image 2\" name=\"bgImgAf4\" value=\"https://www.unsitepourtous.be/mobi/lionbe.jpg\" condition=\"cardsAmount == '2' || cardsAmount == '3'\">\n\n      <input type=\"range\" title=\"Height Tunning\" name=\"Heightcon4\" min=\"100\" max=\"1300\" step=\"1\" value=\"247\" condition=\"cardsAmount == '2' || cardsAmount == '3'\">\n      <input type=\"range\" title=\"Width Tunning\" name=\"Widthcon4\" min=\"100\" max=\"1300\" step=\"1\" value=\"331\" condition=\"cardsAmount == '2' || cardsAmount == '3'\">\n       <header condition=\"cardsAmount == '3'\">Before 3</header>\n       \n       \n                    <input type=\"image\" title=\"Image 1\" name=\"bgImgBe5\" value=\"https://www.unsitepourtous.be/mobi/lionaf.jpg\" condition=\"cardsAmount == '3'\">\n      <input type=\"image\" title=\"Image 2\" name=\"bgImgAf5\" value=\"https://www.unsitepourtous.be/mobi/lionbe.jpg\" condition=\"cardsAmount == '3'\">\n\n      <input type=\"range\" title=\"Height Tunning\" name=\"Heightcon5\" min=\"100\" max=\"1300\" step=\"1\" value=\"247\" condition=\"cardsAmount == '3'\">\n      <input type=\"range\" title=\"Width Tunning\" name=\"Widthcon5\" min=\"100\" max=\"1300\" step=\"1\" value=\"331\" condition=\"cardsAmount == '3'\">\n\t  \n\t   <header>Background</header>\n        <fieldset type=\"background\" name=\"bg\" parallax=\"\">\n            <input type=\"image\" title=\"Background Image\" value=\"https://www.unsitepourtous.be/mobi/lionaf.jpg\" parallax=\"\">\n            <input type=\"color\" title=\"Background Color\" value=\"#cc2952\" selected=\"\">\n            <input type=\"video\" title=\"Background Video\" value=\"http://www.youtube.com/watch?v=uNCr7NdOJgw\">\n      </fieldset>\n        \n         <input type=\"color\" title=\"Color 2\" name=\"color2\" value=\"#232323\" condition=\"bg.type == 'color'\">\n         <input type=\"range\" name=\"angle\" title=\"Angle\" min=\"0\" max=\"270\" value=\"0\" step=\"1\" condition=\"bg.type == 'color'\">\n\t\t <input type=\"checkbox\" title=\"Background Transparent\" name=\"transp\" condition=\"bg.type == 'color'\">\n\t\t\n\t\t\n\t\t        <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\">\n        <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#232323\" condition=\"overlay &amp;&amp; bg.type !== 'color'\">\n        <input type=\"range\" inline=\"\" title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.6\" condition=\"overlay &amp;&amp; bg.type !== 'color'\">\n\t\t\n    <!-- End block parameters -->\n    </mbr-parameters>\n\n    <div class=\"mbr-overlay\" mbr-if=\"overlay&amp;&amp;bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\">\n    </div>  \n \n\n    <div class=\"container\">\n        <div class=\"media-container-row\">\n            <div class=\"card p-3 col-12 col-md-6\" mbr-class=\"{'col-lg-3': cardsAmount == '4',\n                             'col-lg-4': cardsAmount == '3'}\">\n                <div class=\"card-wrapper\">\n    <div class=\"container3\">\n  <figure>\n    <div id=\"compare3\"></div>\n  </figure>\n  <input oninput=\"beforeAfter3()\" onchange=\"beforeAfter3()\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" id=\"slider3\">\n</div>\n                    <div class=\"card-box\">\n                        <h4 class=\"card-title pb-3 mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n                            No Coding\n                        </h4>\n                        <p class=\"mbr-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\">\n                            Mobirise is an easy website builder - just drop site elements to your page, add content and style it to look the way you like. <a href=\"https://mobiri.se\">Learn more...</a>\n                        </p>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"card p-3 col-12 col-md-6\" mbr-if=\"cardsAmount > 1\" mbr-class=\"{'col-lg-3': cardsAmount == '4',\n                             'col-lg-4': cardsAmount == '3'}\">\n                <div class=\"card-wrapper\">\n    <div class=\"container4\">\n  <figure>\n    <div id=\"compare4\"></div>\n  </figure>\n  <input oninput=\"beforeAfter4()\" onchange=\"beforeAfter4()\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" id=\"slider4\">\n</div>\n                    <div class=\"card-box \">\n                        <h4 class=\"card-title pb-3 mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n                            Mobile Friendly\n                        </h4>\n                        <p class=\"mbr-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\">\n                            All sites you make with Mobirise are mobile-friendly. You don't have to create a special mobile version of your site. <a href=\"https://mobiri.se\">Learn more...</a>\n                        </p>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"card p-3 col-12 col-md-6\" mbr-if=\"cardsAmount > 2\" mbr-class=\"{'col-lg-3': cardsAmount == '4',\n                             'col-lg-4': cardsAmount == '3'}\">\n                <div class=\"card-wrapper\">\n                \n                \n                \n    <div class=\"container5\">\n  <figure>\n    <div id=\"compare5\"></div>\n  </figure>\n  <input oninput=\"beforeAfter5()\" onchange=\"beforeAfter5()\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" id=\"slider5\">\n</div>\n\n\n                    <div class=\"card-box\">\n                        <h4 class=\"card-title pb-3 mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n                            Unlimited Sites\n                        </h4>\n                        <p class=\"mbr-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\">\n                            Mobirise gives you the freedom to develop as many websites as you like given the fact that it is a desktop app. <a href=\"https://mobiri.se\">Learn more...</a>\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <script type=\"text/javascript\">\n\nfunction beforeAfter3() {\n  document.getElementById('compare3').style.width = document.getElementById('slider3').value + \"%\";\n}\n\nfunction beforeAfter4() {\n  document.getElementById('compare4').style.width = document.getElementById('slider4').value + \"%\";\n}\n\nfunction beforeAfter5() {\n  document.getElementById('compare5').style.width = document.getElementById('slider5').value + \"%\";\n}\n</script>\n</section>",
    "_styles": 
{
  "padding-top": "(@paddingTop * 15px)",
    "padding-bottom": "(@paddingBottom * 15px)",
    "& when (@bg-type = 'color')": {
      "& when not (@transp)": {
        "background": "linear-gradient(@angle * 1deg, @bg-value, @color2)"
      },
      "& when (@transp)": {
        "background": "transparent"
      }
    },
    "& when (@bg-type = 'image')": {
      "background-image": "url(@bg-value)"
    },
    "h4": {
      "font-weight": "500",
      "margin-bottom": "0",
      "text-align": "left"
    },
    "p": {
      "color": "#767676",
      "text-align": "left"
    },
    ".card-box": {
      "padding-top": "2rem"
    },
    ".card-wrapper": {
      "height": "100%"
    },
    ".container3": {
      "height": "73.5vw",
      "margin": "1vw auto",
      "max-height": "(@Heightcon3 * 1px)",
      "max-width": "(@Widthcon3 * 1px)",
      "overflow": "hidden",
      "width": "98vw"
    },
    ".container3 figure": {
      "background-image": "url(@bgImgBe3)",
      "background-size": "cover",
      "font-size": "0",
      "height": "100%",
      "margin": "0",
      "position": "relative",
      "width": "100%"
    },
    ".container4": {
      "height": "73.5vw",
      "margin": "1vw auto",
      "max-height": "(@Heightcon4 * 1px)",
      "max-width": "(@Widthcon4 * 1px)",
      "overflow": "hidden",
      "width": "98vw"
    },
    ".container4 figure": {
      "background-image": "url(@bgImgBe4)",
      "background-size": "cover",
      "font-size": "0",
      "height": "100%",
      "margin": "0",
      "position": "relative",
      "width": "100%"
    },
    ".container5": {
      "height": "73.5vw",
      "margin": "1vw auto",
      "max-height": "(@Heightcon5 * 1px)",
      "max-width": "(@Widthcon5 * 1px)",
      "overflow": "hidden",
      "width": "98vw"
    },
    ".container5 figure": {
      "background-image": "url(@bgImgBe5)",
      "background-size": "cover",
      "font-size": "0",
      "height": "100%",
      "margin": "0",
      "position": "relative",
      "width": "100%"
    },
    "#compare3": {
      "background-image": "url(@bgImgAf3)",
      "background-size": "cover",
      "bottom": "0",
      "border-right": "5px solid rgba(255, 255, 255, 0.7)",
      "box-shadow": "10px 0 15px -13px #000000",
      "height": "100%",
      "max-width": "98.6%",
      "min-width": "0.6%",
      "overflow": "visible",
      "position": "absolute",
      "width": "50%",
      "animation": "first 2s 1 normal ease-in-out 0.1s",
      "-webkit-animation": "first 2s 1 normal ease-in-out 0.1s"
    },
    "#compare4": {
      "background-image": "url(@bgImgAf4)",
      "background-size": "cover",
      "bottom": "0",
      "border-right": "5px solid rgba(255, 255, 255, 0.7)",
      "box-shadow": "10px 0 15px -13px #000000",
      "height": "100%",
      "max-width": "98.6%",
      "min-width": "0.6%",
      "overflow": "visible",
      "position": "absolute",
      "width": "50%",
      "animation": "first 2s 1 normal ease-in-out 0.1s",
      "-webkit-animation": "first 2s 1 normal ease-in-out 0.1s"
    },
    "#compare5": {
      "background-image": "url(@bgImgAf5)",
      "background-size": "cover",
      "bottom": "0",
      "border-right": "5px solid rgba(255, 255, 255, 0.7)",
      "box-shadow": "10px 0 15px -13px #000000",
      "height": "100%",
      "max-width": "98.6%",
      "min-width": "0.6%",
      "overflow": "visible",
      "position": "absolute",
      "width": "50%",
      "animation": "first 2s 1 normal ease-in-out 0.1s",
      "-webkit-animation": "first 2s 1 normal ease-in-out 0.1s"
    },
    "input#slider3": {
      "-moz-appearance": "none",
      "-webkit-appearance": "none",
      "border": "none",
      "background": "transparent",
      "cursor": "col-resize",
      "height": "100vw",
      "left": "0",
      "margin": "0",
      "outline": "none",
      "padding": "0",
      "position": "relative",
      "top": "-100vw",
      "width": "100%"
    },
    "input#slider3::-moz-range-track": {
      "background": "transparent"
    },
    "input#slider3::-ms-track": {
      "border": "none",
      "background-color": "transparent",
      "height": "100vw",
      "left": "0",
      "outline": "none",
      "position": "relative",
      "top": "-100vw",
      "width": "100%",
      "margin": "0",
      "padding": "0",
      "cursor": "col-resize",
      "color": "transparent"
    },
    "input#slider3::-ms-fill-lower": {
      "background-color": "transparent"
    },
    "input#slider3::-webkit-slider-thumb": {
      "-webkit-appearance": "none",
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider3::-moz-range-thumb": {
      "-moz-appearance": "none",
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider3::-ms-thumb": {
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider::-ms-tooltip": {
      "display": "none"
    },
    "#compare3::before": {
      "background": "url(@comparlogo) no-repeat scroll 0 center transparent",
      "background-size": "contain",
      "content": "\" \"",
      "float": "right",
      "height": "100%",
      "margin-right": "-34px",
      "position": "relative",
      "top": "0",
      "width": "64px"
    },
    "input#slider4": {
      "-moz-appearance": "none",
      "-webkit-appearance": "none",
      "border": "none",
      "background": "transparent",
      "cursor": "col-resize",
      "height": "100vw",
      "left": "0",
      "margin": "0",
      "outline": "none",
      "padding": "0",
      "position": "relative",
      "top": "-100vw",
      "width": "100%"
    },
    "input#slider4::-moz-range-track": {
      "background": "transparent"
    },
    "input#slider4::-ms-track": {
      "border": "none",
      "background-color": "transparent",
      "height": "100vw",
      "left": "0",
      "outline": "none",
      "position": "relative",
      "top": "-100vw",
      "width": "100%",
      "margin": "0",
      "padding": "0",
      "cursor": "col-resize",
      "color": "transparent"
    },
    "input#slider4::-ms-fill-lower": {
      "background-color": "transparent"
    },
    "input#slider4::-webkit-slider-thumb": {
      "-webkit-appearance": "none",
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider4::-moz-range-thumb": {
      "-moz-appearance": "none",
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider4::-ms-thumb": {
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider4::-ms-tooltip": {
      "display": "none"
    },
    "#compare4::before": {
      "background": "url(@comparlogo) no-repeat scroll 0 center transparent",
      "background-size": "contain",
      "content": "\" \"",
      "float": "right",
      "height": "100%",
      "margin-right": "-34px",
      "position": "relative",
      "top": "0",
      "width": "64px"
    },
    "input#slider5": {
      "-moz-appearance": "none",
      "-webkit-appearance": "none",
      "border": "none",
      "background": "transparent",
      "cursor": "col-resize",
      "height": "100vw",
      "left": "0",
      "margin": "0",
      "outline": "none",
      "padding": "0",
      "position": "relative",
      "top": "-100vw",
      "width": "100%"
    },
    "input#slider5::-moz-range-track": {
      "background": "transparent"
    },
    "input#slider5::-ms-track": {
      "border": "none",
      "background-color": "transparent",
      "height": "100vw",
      "left": "0",
      "outline": "none",
      "position": "relative",
      "top": "-100vw",
      "width": "100%",
      "margin": "0",
      "padding": "0",
      "cursor": "col-resize",
      "color": "transparent"
    },
    "input#slider5::-ms-fill-lower": {
      "background-color": "transparent"
    },
    "input#slider5::-webkit-slider-thumb": {
      "-webkit-appearance": "none",
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider5::-moz-range-thumb": {
      "-moz-appearance": "none",
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider5::-ms-thumb": {
      "height": "100vw",
      "width": "0.5%",
      "opacity": "0"
    },
    "input#slider5::-ms-tooltip": {
      "display": "none"
    },
    "#compare5::before": {
      "background": "url(@comparlogo) no-repeat scroll 0 center transparent",
      "background-size": "contain",
      "content": "\" \"",
      "float": "right",
      "height": "100%",
      "margin-right": "-34px",
      "position": "relative",
      "top": "0",
      "width": "64px"
    },
    "@keyframes first": {
      "0%": {
        "width": "0%"
      },
      "50%": {
        "width": "80%"
      },
      "100%": {
        "width": "50%"
      }
    },
    "@-webkit-keyframes first": {
      "0%": {
        "width": "0%"
      },
      "50%": {
        "width": "80%"
      },
      "100%": {
        "width": "50%"
      }
    },
    ".card-title": {
      "color": "#ffffff"
    },
    "P": {
      "color": "#ffffff"
    }
}
    }
	}