<div id="banner-slider-demo-11" class="owl-carousel owl-banner-carousel owl-middle-narrow">
    <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/11/slider/slide01_bg.png"}}) repeat;">
        <div class="container" style="position:relative">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/11/slider/slide01_img.png"}}" alt="">
            <div class="slide-1" style="position: absolute; bottom: 27%; width:100%;">
                <div class="container" style="text-align: left;">
            <div class="text-content" style="display: inline-block; margin-left: 6%;">
            <em style="font-style: normal; text-align: left; display: block; color: #2c3232;font-weight:600;">PROFESSIONAL</em>
            <h2 style="color: #2c3232; line-height: 1;font-weight:800;margin:0;">COSMETICS</h2>
                <p><span style="color: #2c3232; vertical-align: top; font-weight: 300;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span></p>
                <a href="#" class="btn btn-default" style="background-color: #b74173; color: #fff; vertical-align: top; font-weight: 600;">SHOP NOW</a>
            </div>
                </div>
            </div>
        </div>
    </div>
    <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/11/slider/slide02_bg.png"}}) center center no-repeat;background-size:cover;">
        <div class="container" style="position:relative">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/11/slider/slide02_img.png"}}" alt="">
            <div class="slide-2" style="position: absolute; bottom: 27%; width:100%;">
                <div class="container" style="text-align: center;">
            <div class="text-content" style="display: inline-block; margin-left: 6%;">
            <em style="font-style: normal; display: block; color: #2c3232;font-weight:600;">CHECK OUT THE NEW</em>
            <h2 style="color: #2c3232; line-height: 1;font-weight:800;margin:0;">GLOSS FOR LIPS</h2>
                <p><span style="color: #2c3232; vertical-align: top; font-weight: 300;">Starting at $9.99</span></p>
                <a href="#" class="btn btn-default" style="background-color: #b74173; color: #fff; vertical-align: top; font-weight: 600;">SHOP NOW</a>
            </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        $("#banner-slider-demo-11").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: false,
            nav: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
        });
    });
</script>
<div class="container">
    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="8" column_count="4" aspect_ratio="0" image_width="250" image_height="250" template="flex_grid.phtml"}}
</div>
<div style="background-color:#efefef">
    <div class="container">
        <div id="brands-slider-demo-11" class="owl-no-narrow flex-owl-slider">
            <div class="owl-carousel">
                <div class="item" style="padding-top:10px;text-align:center;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand1.png"}}" alt="" style="display: inline-block;"/></div>
                <div class="item" style="padding-top:10px;text-align:center;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand2.png"}}" alt="" style="display: inline-block;"/></div>
                <div class="item" style="padding-top:10px;text-align:center;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand3.png"}}" alt="" style="display: inline-block;"/></div>
                <div class="item" style="padding-top:10px;text-align:center;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand4.png"}}" alt="" style="display: inline-block;"/></div>
            </div>
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#brands-slider-demo-11 .owl-carousel").owlCarousel({
                    autoplay: false,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    margin: 0,
                    nav: false,
                    dots: false,
                    loop: false,
                    responsive: {
                        0: {
                            items:2
                        },
                        640: {
                            items:2
                        },
                        768: {
                            items:2
                        },
                        992: {
                            items:3
                        },
                        1200: {
                            items:4
                        }
                    }
                });
            });
        </script>
    </div>
</div>