<style type="text/css">
    .page-main, .footer-middle { display: none; }
    .product-item-photo { padding: 0; border: 0; border-radius: 0; }
    #parallax_02 .product-item-name > a, #parallax_02 .product.name a > a, #parallax_02 .price-box .price, #parallax_02 .product-item .rating-summary .rating-result > span:before { color: #333 !important; }
    #parallax_03 .product-item-name > a, #parallax_03 .product.name a > a, #parallax_03 .price-box .price, #parallax_03 .product-item .rating-summary .rating-result > span:before { color: #fff !important; }
</style>
<div id="parallax_01" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/13/slider/parallax_01.jpg"}}) 50% 0 no-repeat fixed; color: #fff; height: 100vh;width: 100%; padding: 0; position: relative;">
    <div class="parallax-content-13" style="width: 100%; text-align: center; position: absolute; top: 37%;">
        <div style="margin:0;line-height:1;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/13/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/13/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 id="parallax_02" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/13/slider/parallax_02.jpg"}}) 50% 0 no-repeat fixed; color: #fff; width: 100%;">
    <div class="parallax-content-13">
        <div class="container" style="text-align: right;">
            <div class="text-content" style="display: inline-block;">
                <em style="font-style: normal; text-align: right; display: block; color: #333;font-weight:600;">NEW ARRIVALS</em>
                <h2 style="color: #333; line-height: 1;font-weight:800;margin:0;">Fashion Dresses</h2>
                <p><span style="color: #333; vertical-align: top;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span>&nbsp;<a href="#" class="btn btn-default" style="background-color: #333; vertical-align: top; font-weight: 600; color: #fff;">SHOP NOW</a></p>
            </div>
            <div style="text-align: left;">
                <p style="color: #333; font-size: 15px;margin:0;font-weight:600;margin-bottom:15px;">FEATURED PRODUCTS</p>
                <div id="featured_products_1" class="hide-addtocart hide-addtolinks">
                    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="1" image_width="272" image_height="337" template="owl_list.phtml"}}
                </div>
                <script type="text/javascript">
                    require([
                        'jquery',
                        'owl.carousel/owl.carousel.min'
                    ], function ($) {
                        $("#featured_products_1 .owl-carousel").owlCarousel({
                            autoplay: true,
                            autoplayTimeout: 5000,
                            autoplayHoverPause: true,
                            loop: true,
                            navRewind: true,
                            margin: 10,
                            nav: false,
                            dots: true,
                            responsive: {
                                0: {
                                    items:2
                                },
                                768: {
                                    items:3
                                },
                                992: {
                                    items:4
                                },
                                1200: {
                                    items:5
                                }
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<div id="parallax_03" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/13/slider/parallax_03.jpg"}}) 50% 0 no-repeat fixed; color: #fff; width: 100%;">
    <div class="parallax-content-13">
        <div class="container" style="text-align: left;">
            <div class="text-content" style="display: inline-block;">
                <em style="font-style: normal; text-align: left; display: block; color: #fff;font-weight:600;">NEW ARRIVALS</em>
                <h2 style="color: #fff; line-height: 1;font-weight:800;margin:0;">Fashion Sunglasses</h2>
                <p><span style="color: #fff; vertical-align: top;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span>&nbsp;<a href="#" class="btn btn-default" style="background-color: #fff; color: #333; vertical-align: top; font-weight: 600;">SHOP NOW</a></p>
            </div>
            <div style="text-align: left;">
                <p style="color: #fff; font-size: 15px;margin:0;font-weight:600;text-align: right; margin-bottom: 15px;">FEATURED PRODUCTS</p>
                <div id="featured_products_2" class="hide-addtocart hide-addtolinks">
                    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="1" image_width="272" image_height="337" template="owl_list.phtml"}}
                </div>
                <script type="text/javascript">
                    require([
                        'jquery',
                        'owl.carousel/owl.carousel.min'
                    ], function ($) {
                        $("#featured_products_2 .owl-carousel").owlCarousel({
                            autoplay: true,
                            autoplayTimeout: 5000,
                            autoplayHoverPause: true,
                            loop: true,
                            navRewind: true,
                            margin: 10,
                            nav: false,
                            dots: true,
                            responsive: {
                                0: {
                                    items:2
                                },
                                768: {
                                    items:3
                                },
                                992: {
                                    items:4
                                },
                                1200: {
                                    items:5
                                }
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<div id="parallax_04" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/13/slider/parallax_04.jpg"}}) 50% 0 no-repeat fixed; color: #fff; height: 100vh;margin: 0; padding: 0;">
    <div style="width: 100%; height: 100%; position: relative;">
        <div class="parallax-content-13" style="width: 100%; text-align: center; position: absolute; top: 37%;">
            <div style="margin:0;line-height:1;">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/13/slider/quote_black.png"}}" alt="" class="quote" style="display:inline-block;vertical-align:middle;"/>
                <em style="display:inline-block;vertical-align:middle;line-height:1;color:#333;font-weight:300;font-style:normal;">LET THE MUSIC PLAY</em>
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/13/slider/quote_black.png"}}" alt="" class="quote" style="display:inline-block;vertical-align:middle;"/>
            </div>
            <h2 style="font-weight:800;color:#333;line-height:1;">Connect with the best tech!</h2>
            <p style="font-weight:300;color:#333;line-height:1;">Up to 70% OFF in the new collection.</p>
            <a href="#" class="btn btn-default" style="background-color: #333; color: #fff; border-radius: 0; border: 0;">SHOP NOW</a>
        </div>
    </div>
</div>