{HEADER}

<div id="firstPage" class="ha-bg-parallax main_banner " data-type="background" data-speed="10">
    <div class="ha-parallax-body">

        <div id="carousel-example-generic" class="carousel slide vertical text-right" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="container">
                <div class="carousel-inner " role="listbox">
                    <div class="item active">

                        <div class="container">
                            <h2 data-aos="fade-down" data-aos-delay="100">medialuna</h2>
                            <p class="px-5 mx-5" data-aos="zoom-in" data-aos-delay="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus imperdiet tortor id porta. Ut eget tortor pretium, cursus ante at, aliquet ante.
                            </p>
                            <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                        </div>

                    </div>
                    <div class="item">

                    </div>
                    <div class="item">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="container text-center">
    <h2>ONDULACION</h2>
</div>
<style>
    body {
        height: 1000px
    }
    
    .ha-bg-parallax {
        background: url(https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/23621599_1243573765772587_1463122925949401168_n.jpg?oh=b6641b3c2f50526b0fa2d2046943c7aa&oe=5B12D8F4) 50% -0 no-repeat fixed;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
        min-height: 650px;
        margin: 0 auto;
        width: 100%;
        display: table;
        vertical-align: middle;
        position: relative;
    }
    
    .ha-parallax-body {
        vertical-align: middle;
        background: rgba(0, 0, 0, 0.45);
        text-align: center;
        color: #FFFFFF;
        min-height: 650px;
    }
    
    .vertical .carousel-inner {
        height: 100%;
    }
    
    .carousel.vertical .item {
        -webkit-transition: 0.6s ease-in-out top;
        -moz-transition: 0.6s ease-in-out top;
        -ms-transition: 0.6s ease-in-out top;
        -o-transition: 0.6s ease-in-out top;
        transition: 0.6s ease-in-out top;
    }
    
    .carousel.vertical .active {
        top: 0;
    }
    
    .carousel.vertical .next {
        top: 100%;
    }
    
    .carousel.vertical .prev {
        top: -100%;
    }
    
    .carousel.vertical .next.left,
    .carousel.vertical .prev.right {
        top: 0;
    }
    
    .carousel.vertical .active.left {
        top: -100%;
    }
    
    .carousel.vertical .active.right {
        top: 100%;
    }
    
    .carousel.vertical .item {
        left: 0;
    }
    
    .carousel-indicators {
        color: #ffffff;
        position: absolute;
        bottom: 100px;
        left: unset;
        right: 2%;
        z-index: 15;
        width: 1%;
        padding-left: 0;
        margin-left: -30%;
        text-align: right;
        list-style: none;
        top: 30%;
    }
    
    #carousel-example-generic {
        top: 200px;
    }
    
    .carousel-indicators li {
        float: none
    }
    
    #carousel-example-generic h3 {
        font: normal 50px poppinsregular;
        color: #FFFFFF;
        margin: 0;
        text-shadow: 0 0 10px #666;
    }
    
    #carousel-example-generic h1 {
        font: normal 80px/61px poppinssemibold;
        color: #FFFFFF;
        margin: 0;
        text-shadow: 0 0 10px #666;
    }
</style>
<script>
    $(document).ready(function() {
        var header = $('.main_banner ');

        var backgrounds = new Array(
            'url(assets/img/slide/slide-1.jpg)', 'url(assets/img/slide/slide-2.jpg)', 'url(assets/img/slide/slide-3.jpg)'


        );

        var current = 0;

        function nextBackground() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', backgrounds[current]);
        }
        setInterval(nextBackground, 5000);

        header.css('background-image', backgrounds[0]);
    });
</script>

<!---- >
<section id="hero">
    <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active" style="background-image: url(assets/img/slide/slide-1.jpg)">
                <div class="container">
                    <h2 data-aos="fade-down" data-aos-delay="100">medialuna</h2>
                    <p class="px-5 mx-5" data-aos="zoom-in" data-aos-delay="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus imperdiet tortor id porta. Ut eget tortor pretium, cursus ante at, aliquet ante.
                    </p>
                    <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(assets/img/slide/slide-2.jpg)">
                <div class="container">
                    <h2 data-aos="fade-down" data-aos-delay="100">Lorem Ipsum</h2>
                    <p class="px-5 mx-5" data-aos="zoom-in" data-aos-delay="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus imperdiet tortor id porta. Ut eget tortor pretium, cursus ante at, aliquet ante.
                    </p>
                    <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(assets/img/slide/slide-3.jpg)">
                <div class="container">
                    <h2 data-aos="fade-down" data-aos-delay="100">Sequi ea ut</h2>
                    <p class="px-5 mx-5" data-aos="zoom-in" data-aos-delay="200">Ut velit est quam dolor ad a aliquid qui aliquid. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel.
                    </p>
                    <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
        </a>
    </div>
</section>
<!---->
<main id="main">

    <section id="about" class="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 position-relative">
                    <img src="assets/img/about.jpg" alt="" class="position-absolute" style="top: 10px; left: -150px;">
                </div>
                <div class="col-lg-6 pt-5 content" data-aos="fade-in">
                    <div class="roboto-thin mt-5 mb-0 p-0" style="color: #828282; font-size: 21px; line-height: 25px;">
                        PASIÓN POR LA COMIDA</div>
                    <div class="mt-0 p-0" style="font-size: 75px; font-weight: 200; line-height: 65px; color: #9CD3CD;">
                        medialuna</div>
                    <p class="roboto-light mt-4 mb-3" style="font-size: 18px; color: #333333; text-align: justify; ">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus imperdiet tortor id porta. Ut eget tortor pretium, cursus ante at, aliquet ante. Nam vel gravida velit.<br>Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit. Vivamus dapibus.</p>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="/nosotros" class="btn bml mb-3" type="button">Leer mas</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="nuestrosproductos" class="pt-1 mb-5">
        <div class="cta mb-3">
            <div class="container" data-aos="zoom-in">
                <div class="text-center">
                    <h3 class="roboto" style="color: #FFF; font-size: 75px; font-weight: 200; line-height: 88px;">
                        nuestros productos
                    </h3>
                    <p class="roboto" style="color: #4F4F4F; font-size: 16px; font-weight: 700; line-height: 24px;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus imperdiet tortor id porta.
                    </p>
                </div>
            </div>
        </div>


        <div class="container">
            <div style="text-align: center;">
                <ul id="categorias" class="nav justify-content-center">
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate active" aria-current="page" href="#">Categoría</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" href="#">Categoría</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tab-cate" href="#">Categoría</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" href="#">Categoría</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" style="" href="#">Categoría</a>
                    </li>
                </ul>
            </div>
            <div class="line-cate mb-4"></div>
            <div class="row mb-4">
                <div class="col-md-9">
                    <span class="roboto-light" style="font-size: 14px; color: #333333;">1-24 de 27 resultados</span>
                </div>
                <div class="col-md-3">
                    <select name="department" id="department" class="form-select roboto-light" style="font-size: 11px; color: #111111; background-color: #FBFBFB; text-align-last:center; ">
                        <option value="">Ordenar por</option>
                        <option value="Department 1">Destacados</option>
                        <option value="Department 1">Ordendos</option>
                    </select>
                </div>
            </div>


            <div id="divFilas" class="row">
                {FILAS}
            </div>

            <div class="text-center mt-3">
                <div class="row">
                    <div class="col-md-3">
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">&laquo; Anterior</a></li>
                        </ul>

                    </div>
                    <div class="col-md-6">
                        <ul class="pagination justify-content-center">
                            <!--/paginas-->
                            <li class="page-item {ACTIVE}"><a class="page-link primary" href="/web-pag-{NUM}">{NUM}</a>
                            </li>
                            <!--paginas/-->
                        </ul>

                    </div>
                    <div class="col-md-3">
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">Siguiente &raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <section id="contact" class="contact pt-1" style="margin-bottom: -250px;">
        <div class="container">
            <div class="row">
                <div class="col-md-7 col-lg-8 p-0">
                    <iframe class="mb-4 mb-lg-0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3519.5093437663604!2d-15.456290149150247!3d28.10050571462516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xc40944d343e5711%3A0xa330b85a403c9199!2sLa%20Cocina%20de%20MediaLuna!5e0!3m2!1ses!2ses!4v1626798000993!5m2!1ses!2ses"
                        frameborder="0" style="border:0; width: 100%; height: 350px;" allowfullscreen=""></iframe>
                </div>
                <div class="col-md-5 col-lg-4  p-0">
                    <div class="p-5 text-center" style="height: 350px; background-color: #1E1E1E;">
                        <h3 style="font-weight: 300;">¿hablamos?</h3>
                        <p><a href="https://goo.gl/maps/oNKYBN2FziLEDU5Q9" class="enlace2">Av. Pintor Felo Monzón
                                38,<br />Las Palmas de Gran Canaria</a></p>
                        <p><a href="tel:828048232" class="enlace2">828 04 82 32</a></p>
                        <p>
                            <a href="mailto:info@medialuna.com" class="enlace2">info@medialuna.com</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="gallery" class="gallery" style="padding-top: 270px;">
        <div class="container" data-aos="fade-up">
            <div class="section-title mb-1 pb-1">
                <p class="text-white" style="font-size: 18px;">sigue nuestro día a día en Instagram</p>
                <hr style="color: #ffffff;">
            </div>
            <div class="gallery-slider swiper-container">
                <div class="swiper-wrapper align-items-center">
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-1.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-2.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-3.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-4.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-5.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-6.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-7.jpg" class="img-fluid" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="assets/img/gallery/gallery-8.jpg" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

{FOOTER}