<div style="background:url({{media url="wysiwyg/smartwave/porto/homepage/06/slider/banner-img.jpg"}}) 73% 0 no-repeat; color: #3d3734; background-size: cover;">
    <div class="banner-content-6">
        <div class="container" style="text-align: left;">
            <div class="row" style="padding-left:5%">
                <div class="col-sm-8">
                    <div class="text-content" style="display: inline-block">
                        <em style="font-style: normal; display: block;font-weight:600;">NEW ARRIVALS</em>
                        <h2 style="line-height: 1;font-weight:800;margin:0;color:#3d3734">FASHION</h2>
                        <p><span style="vertical-align: top;font-weight:300;">UP TO <b style="font-weight:800;">70% OFF</b> IN THE NEW COLLECTION</span></p>
                        <p><a href="#" class="btn btn-default" style="vertical-align: top; font-weight: 400;">SHOP NOW</a></p>
                    </div>
                    <div class="owl-middle-outer-narrow" style="text-align: left;">
                        <p class="filter-title-type-2"><span style="width:215px">SELECTED <b>PRODUCTS</b></span><span class="title-line">&nbsp;</span></p>
                        <div id="featured_products" class = "hide-addtocart hide-addtolinks">
                            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" product_count="8" aspect_ratio="0" image_width="250" image_height="250" template="owl_list.phtml"}}
                        </div>
                        <script type="text/javascript">
                            require([
                                'jquery',
                                'owl.carousel/owl.carousel.min'
                            ], function ($) {
                                $("#featured_products .owl-carousel").owlCarousel({
                                    autoplay: true,
                                    autoplayTimeout: 5000,
                                    autoplayHoverPause: true,
                                    margin: 10,
                                    nav: true,
                                    navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                                    dots: false,
                                    navRewind: true,
                                    animateIn: 'fadeIn',
                                    animateOut: 'fadeOut',
                                    loop: true,
                                    responsive: {
                                        0: {
                                            items:1
                                        },
                                        320: {
                                            items:1
                                        },
                                        480: {
                                            items:2
                                        },
                                        768: {
                                            items:2
                                        },
                                        992: {
                                            items:3
                                        },
                                        1200: {
                                            items:3
                                        }
                                    }
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="masonry-grid" id="masonry_grid_18">
    <div class="grid-sizer"></div>
    <div class="masonry-grid-item w2"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_01.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_02.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_03.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item w3"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_04.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item w4"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_05.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_06.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_07.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item w2"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_08.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_09.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_10.jpg"}}" alt="" /></a></div>
    <div class="masonry-grid-item"><a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/homepage/06/slider/grid_item_11.jpg"}}" alt="" /></a></div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'Smartwave_Porto/js/imagesloaded',
        'Smartwave_Porto/js/packery.pkgd'
    ], function ($, imagesLoaded, Packery) {
        $.bridget( 'packery', Packery );
        var $container = $('#masonry_grid_18').imagesLoaded(function(){
            $container.packery({
                itemSelector: ".masonry-grid-item",
                columnWidth: ".grid-sizer",
                percentPosition: true
            });
        });
    });
</script>
<style type="text/css">
    .masonry-grid{margin: 3px;position:relative;}
    .grid-sizer, .masonry-grid-item{width:25%;padding:3px}
    .masonry-grid-item a{display:block;position:relative;}
    .masonry-grid-item a:before{width:100%;height:100%;display:block;content:"";position:absolute;visibility:hidden;opacity:0;filter:alpha(opacity=0);background-color:#000;transition:0.3s all;}
    .masonry-grid-item a:hover:before{visibility:visible;opacity:0.2;filter:alpha(opacity=20);}
    .masonry-grid-item.w2{width:50%;}
    .masonry-grid-item.w3{width:75%;}
    .masonry-grid-item.w4{width:100%;}
    .masonry-grid img{width:100%;}
    .owl-middle-outer-narrow .owl-controls .owl-buttons div{color:#3d3734}
    @media(max-width:767px){
        .masonry-grid-item{width:50%}
        .masonry-grid-item.w2,.masonry-grid-item.w3{width:100%}
    }
    @media(max-width:480px){
        .masonry-grid-item{width:100%}
    }
    @media(min-width:768px){
        .page-header.type5 {
            background: transparent;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }
    }
</style>