{% extends "_layouts/main" %}

{% if currentSite.language == 'es' %}
    {% set esUrl = 'es/' %}
{% else %}
    {% set esUrl = '' %}
{% endif %}

{% block main %}

<i class="fa fa-chevron-right" id="home-slider-next"></i>
<div id="home-slider">
    {# <div class="home-slider-slide animate-slide bg-fade bg-fade-green bg-fade-left" slide-bg="green">
        <style>
            #slider-img-1 {
                background-image: url(img/home/medicinal-slide.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-1 {
                    background-image: url(img/home/medicinal-slide.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-1">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">
                <div class="col-10 col-md-8 col-lg-6 col-xl-5 slide-img">
                    <img data-anim="fadeIn" data-delay="2s" class="fadeIn animated" src="img/home/mushrooms-slide.png" alt="Medicinal Mushrooms">
                </div>
                <div class="col-10 col-md-8 col-lg-5 col-xl-4 slide-text">
                    <h3 data-anim="fadeIn" data-delay="2s" class="white-label-text text-spaced fadeIn animated"><span>Our Ingredients</span></h3>
                    <h1 data-anim="fadeIn" data-delay="2s" class="text-spaced fadeIn animated">Medicinal Mushrooms</h1>
                    <p data-anim="fadeIn" data-delay="3s" class="fadeIn animated">At Vida Divina® we proudly infuse all our products with 100% Certified Organic medicinal mushrooms, so you and your family can benefit from their long history of supporting a healthy lifestyle.</p>
                    <a data-anim="fadeIn" data-delay="3s" class="btn btn-primary fadeIn animated">Learn More</a>
                </div>
            </div>
        </div>
    </div> #}
    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-2 {
                background-image: url(img/home/tea-slide-alt.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-2 {
                    background-image: url(img/home/tea-slide-alt.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-2">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 col-lg-6 col-xl-4 offset-xl-1 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="2s" class="fadeInRight animated" src="img/home/tedivina-slide.png" alt="TeDivina">
                        <img data-anim="fadeIn" data-delay="2s" class="fadeIn animated slide-img-accent" src="img/home/slider/tedivina/slider-tedivina-accent-1.png" style="animation-delay: 1.5s; bottom: 5%; left: -8%; width: 40%; z-index: 3;">
                        <img data-anim="fadeIn" data-delay="2s" class="fadeIn animated slide-img-accent" src="img/home/slider/tedivina/slider-tedivina-accent-2.png" style="animation-delay: 2.25s; top: 35%; right: -13%; width: 40%; z-index: 1;">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    {# <h3 data-anim="fadeIn" data-delay="2s" class="white-label-text text-spaced fadeIn animated"><span>Our Products</span></h3> #}
                    <h1 data-anim="fadeInLeft" class="text-spaced fadeInLeft animated">TeDivina™</h1>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">Our flagship product TeDivina™ will cleanse your body and mind, creating the foundation for your own “Divine Life.” With its rich amber color, Dr. Ramos’ original formula provides 12 essential organic herbs and antioxidants that help optimize your healthy, balanced lifestyle. Drink to your health with TeDivina™!</p>
                    <a data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">Learn More</a>
                </div>

            </div>
        </div>
    </div>
    {# <div class="home-slider-slide animate-slide bg-fade bg-fade-yellow bg-fade-left" slide-bg="yellow">
        <style>
            #slider-img-3 {
                background-image: url(img/home/coffee-slide.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-3 {
                    background-image: url(img/home/coffee-slide.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-3">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">
                <div class="col-10 col-md-8 col-lg-6 slide-img">
                    <img src="img/home/cafedivina-slide.png" alt="CafeDivina">
                </div>
                <div class="col-10 col-md-8 col-lg-5 col-xl-4 slide-text">
                    <h3 data-anim="fadeIn" data-delay="2s" class="white-label-text text-spaced fadeIn animated"><span>Our Products</span></h3>
                    <h1 data-anim="fadeIn" class="text-spaced fadeIn animated">Café Divina</h1>
                    <p data-anim="fadeIn" data-delay="1s" class="fadeIn animated">With two billion cups of coffee consumed every day, Café Divina™ provides you with a powerful brand-building opportunity. Enjoy a cup of our coffee or tea from a variety of house-style healthy beverages infused with 100% Certified Organic Reishi any time of the day—hot or cold!</p>
                    <a data-anim="fadeIn" data-delay="2s" class="btn btn-primary fadeIn animated">Learn More</a>
                </div>
            </div>
        </div>
    </div>
    <div class="home-slider-slide animate-slide bg-fade bg-fade-purple bg-fade-right" slide-bg="purple">
        <style>
            #slider-img-4 {
                background-image: url(uploads/slider/vida-slider-1-mobile.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-4 {
                    background-image: url(uploads/slider/vida-slider-1.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-4">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">
                <div class="col-10 col-md-8 col-lg-6 col-xl-5 slide-img">
                    <img src="img/home/spore-oil-slide.png" alt="Reishi Spore Oil">
                </div>
                <div class="col-10 col-md-8 col-lg-5 col-xl-4 slide-text">
                    <h3 data-anim="fadeIn" data-delay="2s" class="white-label-text text-spaced fadeIn animated"><span>Our Products</span></h3>
                    <h1 data-anim="fadeIn" class="text-spaced fadeIn animated">Reishi Spore Oil</h1>
                    <p data-anim="fadeIn" data-delay="1s" class="fadeIn animated">Reishi Spore Oil is a pure essential oil that contains the most beneficial nutrients of the Reishi Spore. It takes approximately 2.2lbs of Organic Red Reishi to make each soft gel. We process our Spore Oil without any additives for optimum health benefits.</p>
                    <a data-anim="fadeIn" data-delay="2s" class="btn btn-primary fadeIn animated">Learn More</a>
                </div>
            </div>
        </div>
    </div> #}
</div>



<div id="home-about" class="container main-section">
    <div class="row justify-content-center">
        <div class="col-10 text-center">
            <img src="img/home/leadwithlove.png" alt="#leadwithlove" style="width: 640px; max-width: 80vw;">
        </div>
    </div>
</div>



<div id="new-products-slider">
    <div class="new-products-slide home-block d-flex justify-content-center align-items-center">
        <div class="col-12 col-sm-6">
            <img src="img/home/new-products/new-latte.png" alt="Vida Divina Latte Dorada & Latte Verde">
        </div>
        <div class="col-12 col-sm-6 col-lg-4">
            <h3 class="white-label-text text-spaced"><span>Discover Our New Products</span></h3>
            <h2>Latte Dorado & Latte Verde</h2>
            <p>We invite you to indulge your taste buds with Café Divina’s newest Latte additions.  These tantalizing treats are formulated with Turmeric, Matcha and Certified Organic Reishi to provide you a powerhouse of nutrients for your daily healthy lifestyle.  Drink to your health!</p>
            <a href="#" class="btn btn-default">Learn more</a>
        </div>
    </div>
    <div class="new-products-slide home-block d-flex justify-content-center align-items-center">
        <div class="col-12 col-sm-6">
            <img src="img/home/new-products/new-lean.png" alt="Vida Divina Vida Lean Cookies n Cream & Vida Lean Banana">
        </div>
        <div class="col-12 col-sm-6 col-lg-4">
            <h3 class="white-label-text text-spaced"><span>Discover Our New Products</span></h3>
            <h2>Vida Lean Cookies N Cream & Vida Lean Banana</h2>
            <p>We are proud to introduce two new flavors to our Vida Lean product line.  Cookies N Cream and Banana Lean will help support a proper daily diet by providing optimal nutritional support.  Enjoy our Vida Lean meal replacement shakes any time of the day.</p>
            <a href="#" class="btn btn-default">Learn more</a>
        </div>
    </div>
    <div class="new-products-slide home-block d-flex justify-content-center align-items-center">
        <div class="col-12 col-sm-6">
            <img src="img/home/new-products/new-cereal.png" alt="Vida Divina Divine Cereal">
        </div>
        <div class="col-12 col-sm-6 col-lg-4">
            <h3 class="white-label-text text-spaced"><span>Discover Our New Products</span></h3>
            <h2>Divine Cereal</h2>
            <p>Our long-awaited Divine Cereal is finally here.  This delicious breakfast favorite is formulated with Certified Organic Reishi and Spirulina to provide you with essential nutrients to start your day.  Divine Cereal will put a smile on your face right from the first spoonful.</p>
            <a href="#" class="btn btn-default">Learn more</a>
        </div>
    </div>
</div>



<div id="home-products-pre" class="container main-section">
    <div class="row justify-content-center">
        <div class="col-10 text-center">
            <h3><span>Products Are Made In The Factory</span>But Brands Are Created In The Heart</h3>
        </div>
    </div>
</div>



<div id="home-products" class="container-fluid wow fadeIn">

    <div class="row bg-fade bg-fade-red bg-fade-left" id="home-products-text">
        <div class="col-12 col-md-7 col-lg-5 offset-lg-1">
            <img src="img/logo.svg" alt="Vida Divina">
            <h1 class="text-spaced">Our Products</h1>
            <p>Our mission is to provide the highest quality health and wellness solutions for our customers, helping them achieve and maintain a healthy lifestyle.  We are also dedicated to creating a worldwide community centered around love and teamwork, offering everyone an equal chance to live a healthy life.</p>
            <a href="products" class="btn btn-primary">View All</a>
        </div>
    </div>
    <div class="row position-relative">
        <i id="home-products-prev" class="fas fa-chevron-left"></i>
        <i id="home-products-next" class="fas fa-chevron-right"></i>
        <div id="home-products-boxes">
            <div class="product-group">
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-tedivina.jpg);">
                    <h2>TeDivina</h2>
                </div>
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-supplements.jpg);">
                    <h2>Supplements</h2>
                </div>
            </div>
            <div class="product-group">
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-cafedivina.jpg);">
                    <h2>CaféDivina</h2>
                </div>
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-essentials.jpg);">
                    <h2>Essentials</h2>
                </div>
            </div>
            <div class="product-group">
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-tedivina.jpg);">
                    <h2>Vida Extracts</h2>
                </div>
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-supplements.jpg);">
                    <h2>Lean</h2>
                </div>
            </div>
            <div class="product-group">
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-cafedivina.jpg);">
                    <h2>Gano Bites</h2>
                </div>
                <div class="home-products-box" style="background-image: url(img/home/products/product-box-essentials.jpg);">
                    <h2>All Products</h2>
                </div>
            </div>
        </div>
    </div>

</div>



<div id="home-our-founders" class="container-fluid home-block bg-fade bg-fade-red bg-fade-left">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-5 col-lg-4">
            <h1>Meet Our Founders</h1>
            <p>From our humble beginnings, we finally created a company that had one direction and a loving purpose.  We have created transformative products that have given individuals an equal chance to obtain not only financial success but total health and wellness. We invite you to join us on our journey. </p>
            <a href="#" class="btn btn-default">Learn more</a>
        </div>
    </div>
</div>



<div id="home-live-healthy" class="container main-section">
    <div class="row justify-content-center">
        <div class="col-10 text-center">
            <h3>LIVE HEALTHY, LIVE WEALTHY, LIVE FREE!</h3>
        </div>
    </div>
</div>



<div id="home-affiliate-opportunities" class="container-fluid home-block bg-fade bg-fade-red bg-fade-right">
    <div class="row justify-content-end">
        <div class="col-12 col-sm-6 col-md-5 col-lg-4">
            <h1>Affiliate Opportunities</h1>
            <p>At Vida Divina®, we believe in helping each other succeed. Our rewards and benefits include but are not restricted to financial compensation and high-quality products. We are also committed to building a worldwide community of success-minded individuals who aim to grow beyond their limitations.</p>
            <p>We offer the entrepreneur a unique opportunity to earn an unlimited income by enhancing the lives of everyone we touch. We realize that the true measure of a company’s success is reflected in the health and wealth achieved by the many, not just a few.</p>
            <a href="#" class="btn btn-default">Learn more</a>
        </div>
    </div>
</div>

{% endblock %}