<div class="full-screen-slider">
    <div id="banner-slider-demo-4" class="owl-carousel owl-middle-narrow owl-banner-carousel">
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <div style="width:100%;height:100%;background:url({{media url="wysiwyg/smartwave/porto/homepage/04/slider/slide1.jpg"}}) 80% center no-repeat; background-size:cover;"></div>
            <div class="slide1-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="container" style="height:100%;position:relative;">
                    <div class="content-area" style="position:absolute;top:37%;left:7%;text-align:center;">
                        <div style="margin:0;line-height:1;">
                            <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/quote.png"}}" alt="" class="quote" style="display:inline-block;vertical-align:middle;"/>
                            <em style="display:inline-block;vertical-align:middle;line-height:1;color:#fff;font-weight:300;font-style:normal;">DO YOU NEED A NEW</em>
                            <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/quote.png"}}" alt="" class="quote" style="display:inline-block;vertical-align:middle;"/>
                        </div>
                        <h2 style="font-weight:800;color:#fff;line-height:1;">eCOMMERCE?</h2>
                        <p style="font-weight:300;color:#fff;line-height:1;">Check our options and features.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <div style="width:100%;height:100%;background:url({{media url="wysiwyg/smartwave/porto/homepage/04/slider/slide2.jpg"}}) 20% center no-repeat; background-size:cover;"></div>
            <div class="slide2-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="container" style="height:100%;position:relative;">
                    <div class="content-area" style="position:absolute;top:40%;right:20%;text-align:left;">
                        <em style="display:block;line-height:1;color:#fff;font-weight:300;font-style:normal;">up to <b>70%</b> off!</em>
                        <h2 style="font-weight:600;color:#fff;line-height:1;">HUGE <b style="font-weight:800;">SALE</b></h2>
                        <p style="font-weight:600;color:#fff;line-height:1;">Fashion<span class="split">-</span>Electronics<span class="split">-</span>Gifts<span class="split">-</span>Music<span class="split">-</span>Sports</p>
                        <div style="text-align:right;"><a href="#" class="btn btn-default" style="border:0;background-color:#fefefe;color:#777;font-weight:600;">SHOP NOW</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
            <div style="width:100%;height:100%;background:url({{media url="wysiwyg/smartwave/porto/homepage/04/slider/slide3.jpg"}}) center center no-repeat; background-size:cover;"></div>
            <div class="slide3-content" style="width:100%;height:100%;position:absolute;left:0;top:0;">
                <div class="container" style="height:100%;position:relative;">
                    <div class="content-area" style="position:absolute;left:0;top:40%;text-align:center;width:100%;">
                        <div style="display:inline-block;">
                            <em style="display:block;line-height:1;margin:0;color:#fff;font-weight:300;font-style:normal;text-align:right;">It’s time to feel</em>
                            <h2 style="font-weight:600;color:#fff;line-height:1;text-align:center;">THE <b style="font-weight:800;">POWER</b></h2>
                            <div style="text-align:right;"><a href="#" class="btn btn-default" style="border:0;background-color:#fefefe;color:#777;font-weight:600;">SHOP NOW</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#banner-slider-demo-4").owlCarousel({
                items: 1,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                navRewind: true,
                dots: false,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                loop: true,
                nav: true,
                navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
            });
            $(".main-container").remove();
        });
    </script>
</div>
<div class="row" style="margin:0;">
    <div class="col-sm-3 col-xs-6" style="padding:0;">
        <a class="image-link" href="#">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/image01.jpg"}}" alt="" />
        </a>
    </div>
    <div class="col-sm-3 col-xs-6" style="padding:0;">
        <a class="image-link" href="#">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/image02.jpg"}}" alt="" />
        </a>
    </div>
    <div class="col-sm-3 col-xs-6" style="padding:0;">
        <a class="image-link" href="#">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/image03.jpg"}}" alt="" />
        </a>
    </div>
    <div class="col-sm-3 col-xs-6" style="padding:0;">
        <a class="image-link" href="#">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/image04.jpg"}}" alt="" />
        </a>
    </div>
</div>
<div class="row" style="margin:0;background-color:#f9f9f9;">
    <div class="col-sm-6 sm-f-right" style="padding:0;">
        <div id="half-image-1" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/04/slider/men.jpg"}}) center left no-repeat;background-size:cover;width:100%;">
        <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/men.jpg"}}" style="width:100%;visibility:hidden;" alt="" />
        </div>
    </div>
    <div id="half-content-1" class="col-sm-6" style="padding:4% 6% 1.5%;position:relative;text-align:left;">
        <h3 class="fullwidth-filter-title">Amazing New<br/>Collection</h3>
        <p class="fullwidth-filter-description">Yes, this is our new collection, check it<br/>out our new arrivals.</p>
        <div id="men_product" class="hide-addtocart hide-addtolinks no-border" style="margin-top: 25px;">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="men_product" product_count="4" aspect_ratio="0" image_width="400" image_height="496" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#men_product .owl-carousel").owlCarousel({
                    loop: true,
                    margin: 10,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    navRewind: true,
                    nav: false,
                    dots: true,
                    responsive: {
                        0: {
                            items:1
                        },
                        640: {
                            items:2
                        }
                    }
                });
            });
        </script>
    </div>
</div>
<div class="row" style="margin:0;background-color:#f9f9f9;">
    <div class="col-sm-6" style="padding:0;">
        <div id="half-image-2" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/04/slider/women.jpg"}}) center right no-repeat;background-size:cover;width:100%;">
        <img src="{{media url="wysiwyg/smartwave/porto/homepage/04/slider/women.jpg"}}" style="width:100%;visibility:hidden;" alt="" />
        </div>
    </div>
    <div id="half-content-2" class="col-sm-6" style="padding:4% 6% 1.5%;position:relative;text-align:left;">
        <h3 class="fullwidth-filter-title">Amazing New<br/>Collection</h3>
        <p class="fullwidth-filter-description">Yes, this is our new collection, check it<br/>out our new arrivals.</p>
        <div id="women_product" class="hide-addtocart hide-addtolinks no-border" style="margin-top: 25px;">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="women_product" product_count="4" aspect_ratio="0" image_width="400" image_height="496" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
            $("#women_product .owl-carousel").owlCarousel({
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                navRewind: true,
                nav: false,
                dots: true,
                responsive: {
                    0: {
                        items:1
                    },
                    640: {
                        items:2
                    }
                }
            });
        });
    </script>
    </div>
</div>
<div style="text-align:left; padding: 30px;">
    <h3 class="fullwidth-filter-title">Amazing New<br/>Collection</h3>
    <div id="fashion_product" class="hide-addtocart hide-addtolinks no-border" style="margin-top: 25px;">
         {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" product_count="8" aspect_ratio="0" image_width="400" image_height="496" template="owl_list.phtml"}}
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#fashion_product .owl-carousel").owlCarousel({
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                navRewind: true,
                nav: false,
                dots: true,
                responsive: {
                    0: {
                        items:2
                    },
                    768: {
                        items:3
                    },
                    992: {
                        items:4
                    },
                    1200: {
                        items:5
                    }
                }
            });
        });
    </script>
</div>
<script type="text/javascript">
    require([
        'jquery'
    ], function ($) {
        $("#half-image-1").css("min-height",$("#half-content-1").outerHeight()+"px");
        $("#half-image-2").css("min-height",$("#half-content-2").outerHeight()+"px");
    setTimeout(function(){
        $("#half-image-1").css("min-height",$("#half-content-1").outerHeight()+"px");
        $("#half-image-2").css("min-height",$("#half-content-2").outerHeight()+"px");
    }, 5000);
    $(window).resize(function(){
        setTimeout(function(){
            $("#half-image-1").css("min-height",$("#half-content-1").outerHeight()+"px");
            $("#half-image-2").css("min-height",$("#half-content-2").outerHeight()+"px");
        }, 500);
    });
});
</script>
<style type="text/css">
.product-item-photo {
    border-radius: 0;
    border: 0;
}
</style>