
<!-- Generated by ai2html v0.108.0 - 2022-08-18 02:13 -->
<!-- ai file: ai2html-scrolly.ai -->
<style media="screen,print">
	#g-water_2-box ,
	#g-water_2-box .g-artboard {
		margin:0 auto;
	}
	#g-water_2-box p {
		margin:0;
	}
	#g-water_2-box .g-aiAbs {
		position:absolute;
	}
	#g-water_2-box .g-aiImg {
		position:absolute;
		top:0;
		display:block;
		width:100% !important;
	}
	#g-water_2-box .g-aiSymbol {
		position: absolute;
		box-sizing: border-box;
	}
	#g-water_2-box .g-aiPointText p { white-space: nowrap; }
	#g-water_2-wide {
		position:relative;
		overflow:hidden;
	}
	#g-water_2-wide p {
		font-weight:500;
		line-height:10px;
		height:auto;
		opacity:1;
		letter-spacing:0em;
		font-size:9px;
		text-align:left;
		color:rgb(239,239,239);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
		position:static;
	}
	#g-water_2-wide .g-pstyle0 {
		height:10px;
		text-align:center;
		color:rgb(255,255,255);
	}
	#g-water_2-wide .g-pstyle1 {
		height:10px;
	}
	#g-water_2-wide .g-pstyle2 {
		line-height:9px;
		height:9px;
		font-size:8px;
		color:rgb(239,238,238);
	}
	#g-water_2-wide .g-pstyle3 {
		line-height:8px;
		height:8px;
		font-size:6px;
		color:rgb(0,0,0);
	}
	#g-water_2-medium {
		position:relative;
		overflow:hidden;
	}
	#g-water_2-small {
		position:relative;
		overflow:hidden;
	}
	#g-water_2-mobile {
		position:relative;
		overflow:hidden;
	}

</style>

<div id="g-water_2-box" class="ai2html">

	<!-- Artboard: wide -->
	<div id="g-water_2-wide" class="g-artboard" style="min-width: 1200px;" data-aspect-ratio="1.538" data-min-width="1200">
<div style="padding: 0 0 65% 0;"></div>
		<img id="g-water_2-wide-img" class="g-water_2-wide-img g-aiImg" alt="" src="./ai2html-output/ai2html-images/water_2-wide.jpg"/>
		<div id="g-ai0-1" class="g-water_2 g-aiAbs g-aiPointText" style="transform: matrix(0,-1,1,0,0,0);transform-origin: 50% 59.3841642228739%;-webkit-transform: matrix(0,-1,1,0,0,0);-webkit-transform-origin: 50% 59.3841642228739%;-ms-transform: matrix(0,-1,1,0,0,0);-ms-transform-origin: 50% 59.3841642228739%;top:56.4523%;margin-top:-5.3px;left:46.6519%;margin-left:-23px;width:46px;">
			<p class="g-pstyle0">Litres</p>
		</div>
		<div id="g-ai0-2" class="g-water_2 g-aiAbs g-aiPointText" style="top:58.7538%;margin-top:-5.3px;left:50.5279%;width:60px;">
			<p class="g-pstyle1">Bananas</p>
		</div>
		<div id="g-ai0-3" class="g-water_2 g-aiAbs g-aiPointText" style="top:60.2922%;margin-top:-5.3px;left:50.5279%;width:58px;">
			<p class="g-pstyle1">114.5 /kg</p>
		</div>
		<div id="g-ai0-4" class="g-water_2 g-aiAbs g-aiPointText" style="top:60.8034%;margin-top:-5.3px;left:63.733%;width:58px;">
			<p class="g-pstyle1">6000/kg</p>
		</div>
		<div id="g-ai0-5" class="g-water_2 g-aiAbs g-aiPointText" style="top:62.8009%;margin-top:-4.8px;left:50.0806%;width:79px;">
			<p class="g-pstyle2">Low water use</p>
		</div>
		<div id="g-ai0-6" class="g-water_2 g-aiAbs g-aiPointText" style="top:62.8849%;margin-top:-4.5px;left:59.0601%;width:71px;">
			<p class="g-pstyle3">High water use</p>
		</div>
	</div>

	<!-- Artboard: medium -->
	<div id="g-water_2-medium" class="g-artboard" style="min-width: 700px;max-width: 1199px;max-height: 1285px" data-aspect-ratio="0.933" data-min-width="700" data-max-width="1199">
<div style="padding: 0 0 107.1429% 0;"></div>
		<img id="g-water_2-medium-img" class="g-water_2-medium-img g-aiImg" alt="" src="./ai2html-output/ai2html-images/water_2-medium.jpg"/>
	</div>

	<!-- Artboard: small -->
	<div id="g-water_2-small" class="g-artboard" style="min-width: 520px;max-width: 699px;max-height: 968px" data-aspect-ratio="0.722" data-min-width="520" data-max-width="699">
<div style="padding: 0 0 138.4615% 0;"></div>
		<img id="g-water_2-small-img" class="g-water_2-small-img g-aiImg" alt="" src="./ai2html-output/ai2html-images/water_2-small.jpg"/>
	</div>

	<!-- Artboard: mobile -->
	<div id="g-water_2-mobile" class="g-artboard" style="max-width: 519px;max-height: 708px" data-aspect-ratio="0.733" data-min-width="0" data-max-width="519">
<div style="padding: 0 0 136.3636% 0;"></div>
		<img id="g-water_2-mobile-img" class="g-water_2-mobile-img g-aiImg" alt="" src="./ai2html-output/ai2html-images/water_2-mobile.jpg"/>
	</div>

</div>


<!-- Custom JS -->
<script type="text/javascript">
    (function() {
        // only want one resizer on the page
        if (document.documentElement.className.indexOf("g-resizer-v3-init") > -1) return;
        document.documentElement.className += " g-resizer-v3-init";
        // require IE9+
        if (!("querySelector" in document)) return;
        function resizer() {
            var elements = Array.prototype.slice.call(document.querySelectorAll(".g-artboard[data-min-width]")),
                widthById = {};
            elements.forEach(function(el) {
                var parent = el.parentNode,
                    width = widthById[parent.id] || parent.getBoundingClientRect().width,
                    minwidth = el.getAttribute("data-min-width"),
                    maxwidth = el.getAttribute("data-max-width");
                widthById[parent.id] = width;
                if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
                    el.style.display = "block";
                } else {
                    el.style.display = "none";
                }
            });
            try {
                if (window.parent && window.parent.$) {
                    window.parent.$("body").trigger("resizedcontent", [window]);
                }
                if (window.require) {
                    require(['foundation/main'], function() {
                        require(['shared/interactive/instances/app-communicator'], function(AppCommunicator) {
                            AppCommunicator.triggerResize();
                        });
                    });
                }
            } catch(e) { console.log(e); }
        }
        document.addEventListener('DOMContentLoaded', resizer);
        // feel free to replace throttle with _.throttle, if available
        window.addEventListener('resize', throttle(resizer, 200));        
        function throttle(func, wait) {
            // from underscore.js
            var _now = Date.now || function() { return new Date().getTime(); },
                context, args, result, timeout = null, previous = 0;
            var later = function() {
                previous = _now();
                timeout = null;
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            };
            return function() {
                var now = _now(), remaining = wait - (now - previous);
                context = this;
                args = arguments;
                if (remaining <= 0 || remaining > wait) {
                    if (timeout) {
                        clearTimeout(timeout);
                        timeout = null;
                    }
                    previous = now;
                    result = func.apply(context, args);
                    if (!timeout) context = args = null;
                } else if (!timeout && options.trailing !== false) {
                    timeout = setTimeout(later, remaining);
                }
                return result;
            };
        }
    })();
</script>
<!-- End ai2html - 2022-08-18 02:13 -->
