<div id="banner-slider-demo-17" class="owl-carousel owl-banner-carousel owl-middle-narrow">
    <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/17/slider/layer1.jpg"}}) no-repeat; background-size: cover;">
        <div class="container" style="position:relative">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/17/slider/layer2.png"}}" alt="">
            <div class="content-17 type1" style="position:absolute;top:30%;left:9%;text-align:right">
                <em style="font-weight:300;font-style:normal;color:#a39a8c;float:left;">Feel the real</em>
                <div class="clearfix"></div>
                <h2 style="font-weight:400;font-style:italic;line-height:1;color:#79a939;margin:0;"><b style="font-weight:800">MOBILE</b> music</h2>
                <p style="color:#010101;font-weight:700;line-height:1;margin-bottom:15px">$999</p>
                <a href="#" style="font-weight:600;color:#1e1e1e;"><span>SHOP NOW</span><i class="porto-icon-angle-right theme-bg-color"></i></a>
            </div>
        </div>
    </div>
    <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/17/slider/layer3.jpg"}}) no-repeat; background-size: cover;">
        <div class="container" style="position:relative">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/17/slider/layer4.png"}}" alt="">
        </div>
    </div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        $("#banner-slider-demo-17").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="homepage-bar">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <em class="porto-icon-truck" style="font-size:36px;"></em><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
            </div>
            <div class="col-md-4">
                <em class="porto-icon-dollar"></em><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
            </div>
            <div class="col-md-4">
                <em class="porto-icon-lifebuoy" style="font-size:32px;"></em><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="filterproducts-tab" style="margin-top: 40px;">
        <div class="data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <div class="data item title" aria-labeledby="tab-label-featured-title" data-role="collapsible" id="tab-label-featured">
                <a class="data switch" tabindex="-1" data-toggle="switch" href="#featured" id="tab-label-featured-title">Featured</a>
            </div>
            <div class="data item content" id="featured" data-role="content">
                <div id="featured_product" class="owl-top-narrow hide-addtolinks hide-addtocart">
                    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="0" image_width="212" image_height="263" template="owl_list.phtml"}}
                </div>
                <script type="text/javascript">
                    require([
                        'jquery',
                        'owl.carousel/owl.carousel.min'
                    ], function ($) {
                        $("#featured_product .owl-carousel").owlCarousel({
                            autoplay: true,
                            autoplayTimeout: 5000,
                            autoplayHoverPause: true,
                            loop: true,
                            navRewind: true,
                            margin: 10,
                            nav: true,
                            navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                            dots: false,
                            responsive: {
                                0: {
                                    items:2
                                },
                                768: {
                                    items:3
                                },
                                992: {
                                    items:3
                                },
                                1200: {
                                    items:4
                                }
                            }
                        });
                    });
                </script>
            </div>
            <div class="data item title" aria-labeledby="tab-label-latest-title" data-role="collapsible" id="tab-label-latest">
                <a class="data switch" tabindex="-1" data-toggle="switch" href="#latest" id="tab-label-latest-title">Latest</a>
            </div>
            <div class="data item content" id="latest" data-role="content">
                <div id="latest_product" class="owl-top-narrow hide-addtolinks hide-addtocart">
                    {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_count="10" aspect_ratio="0" image_width="212" image_height="263" template="owl_list.phtml"}}
                </div>
                <script type="text/javascript">
                    require([
                        'jquery',
                        'owl.carousel/owl.carousel.min'
                    ], function ($) {
                        $("#latest_product .owl-carousel").owlCarousel({
                            autoplay: true,
                            autoplayTimeout: 5000,
                            autoplayHoverPause: true,
                            loop: true,
                            navRewind: true,
                            margin: 10,
                            nav: true,
                            navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                            dots: false,
                            responsive: {
                                0: {
                                    items:2
                                },
                                768: {
                                    items:3
                                },
                                992: {
                                    items:3
                                },
                                1200: {
                                    items:4
                                }
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<div style="padding-top: 40px;" class="custom-support">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <em class="porto-icon-star" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></em>
                <div class="content">
                    <h2>Customer Support</h2>
                    <em>YOU WON'T BE ALONE</em>
                    <p>We really care about you and your website as much as you do. Purchasing Porto or any other theme from us you get 100% free support.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <em class="porto-icon-reply" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></em>
                <div class="content">
                    <h2>Fully Customizable</h2>
                    <em>TONS OF OPTIONS</em>
                    <p>With Porto you can customize the layout, colors and styles within only a few minutes. Start creating an amazing website right now!</p>
                </div>
            </div>
            <div class="col-sm-4">
                <em class="porto-icon-paper-plane" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></em>
                <div class="content">
                    <h2>Powerful Admin</h2>
                    <em>MADE TO HELP YOU</em>
                    <p>Porto has very powerful admin features to help customer to build their own shop in minutes without any special skills in web development.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="parallax-wrapper" style="margin: 50px 0 20px;">
    <div class="overlay overlay-color" style="background-color: #000000; opacity: 0.75; filter: alpha(opacity=75);"></div>
    <div class="parallax" style="background-image: url({{media url="wysiwyg/smartwave/porto/homepage/17/slider/parallax_bg.jpg"}});">
        <div class="parallax-slider" style="position: relative; z-index: 3;">
            <div class="container">
                <div id="parallax-slider-demo-17" class="owl-carousel">
                    <div class="item">
                        <h2 style="font-weight:600;">EXPLORE <b style="font-weight:800;">PORTO</b></h2>
                        <p style="font-weight:300;">Premium theme, unlimited possibilities...</p>
                        <a href="#" style="font-weight:300;">Purchase now &gt;</a>
                    </div>
                    <div class="item">
                        <h2 style="font-weight:600;">EXPLORE <b style="font-weight:800;">PORTO</b></h2>
                        <p style="font-weight:300;">Premium theme, unlimited possibilities...</p>
                        <a href="#" style="font-weight:300;">Purchase now &gt;</a>
                    </div>
                    <div class="item">
                        <h2 style="font-weight:600;">EXPLORE <b style="font-weight:800;">PORTO</b></h2>
                        <p style="font-weight:300;">Premium theme, unlimited possibilities...</p>
                        <a href="#" style="font-weight:300;">Purchase now &gt;</a>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                require([
                    'jquery',
                    'owl.carousel/owl.carousel.min'
                ], function ($) {
                    $("#parallax-slider-demo-17").owlCarousel({
                        items: 1,
                        autoplay: true,
                        autoplayTimeout: 5000,
                        autoplayHoverPause: true,
                        dots: true,
                        nav: false,
                        loop: true,
                        navRewind: true
                    });
                });
            </script>
        </div>
    </div>
</div>