{% extends "layout/base.html" %}

{% block content %}

<!-- main content start -->
<section id="slideshow" style="max-width: 100%">
     <div>
        <div class="item">
            <img class="hidden-xs img-responsive" src="imagenes/cabecera-llerena.jpg" class="img-responsive" alt="[Config::AZ_WEB_NAME]">
            <img class="hidden-lg hidden-md hidden-sm img-responsive" src="imagenes/cabecera-llerena.jpg" alt="[Config::AZ_WEB_NAME]">
        </div>
    </div>
</section>
<div class="top-header">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-sm-10 col-xs-8">
            <header class="header" id="header" role="banner">
    <!-- navigation start -->
    <div class="navbar">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style="float:right">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <nav class="collapse navbar-collapse">
                {{menus.render(1, seo)}}
            </nav>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </div>
</header>
            </div> <!--/.col-->
            <div class="col-md-2 col-sm-2 col-xs-4">
            	<div class="top-logout redes_sociales" style="padding-left: 0px;">

               	<!--<a href="https://www.jamonysalud.co.uk/contactar-company-providing-ham-from-extremadura.html"><i class="fa fa-envelope-o"></i> </a>-->
                	<a target="_blank" href="[Config::AZ_FACEBOOK]"><i class="fa fa-facebook"></i></a>
                	<a target="_blank" href="[Config::AZ_TWITTER]"><i class="fa fa-instagram"></i></a>
					<a target="_blank" href="https://www.tripadvisor.co.uk/Restaurant_Review-g186338-d13341128-Reviews-Llerena_Iberico_Tapas_Bar-London_England.html"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png" class="img-responsive"/></a>
					<script async src="https://www.jscache.com/wejs?wtype=socialButtonBubbles&amp;uniq=714&amp;locationId=13341128&amp;color=green&amp;size=rect&amp;lang=en_UK&amp;display_version=2"></script>
                </div>
        </div> <!--/.col-->
    </div> <!--/.row-->
</div> <!--/.container-->
</div>
<section id="main-content" class="main-content pad-60">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-xs-12">
                <div class="article">
                    <h3 class="sm-title"><span>Structured workflow</span></h3>
                    <p>Natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbis congue eros in purus convallis nec interdum urna porttitor. Vestibulum et orci augue. Vivamus felis nec pellentesque euismod, nisi massa pretium mauris, nec tincidunt tortor metus at nisi.</p>
                    <p>Morbi congue turpis eget mi sollicitudin non bibendum velit pellentesque Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis est non commodo luctus nisi erat porttitor.</p>
                </div> <!--/.article-->
            </div>
            <div class="col-sm-4 col-xs-12">
                <h3 class="sm-title"><span>Why choos us</span></h3>
                <ul class="fa-ul">
                    <li><i class="fa-li fa fa-joomla"></i> Latest Joomla Version</li>
                    <li><i class="fa-li fa fa-image"></i> Slider Revolution</li>
                    <li><i class="fa-li fa fa-gears"></i> Poweful T3 Framework</li>
                    <li><i class="fa-li fa fa-leaf"></i> Bootstrap and Fontawesome</li>
                    <li><i class="fa-li fa fa-file"></i> Well Documented</li>
                    <li><i class="fa-li fa fa-umbrella"></i> Stunning Support</li>
                </ul>
            </div>
        </div> <!--/.row-->
    </div> <!--/.container-->
</section>
<!-- main content end -->

<!-- feature start -->
<section id="feature" class="feature pad-b-80">
    <div class="container">
        <div class="row pad-b-60">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="service-box">
                    <div class="service-icon"><i class="fa fa-trophy fa-2x"></i></div>
                    <h3>Quality Template</h3>
                    <p>At vero eos et accusamus et iusto odio dignis simos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti dorel</p>
                </div> <!--//item1-->
            </div> <!--/.col-->
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="service-box">
                    <div class="service-icon"><i class="fa fa-file-code-o fa-2x"></i></div>
                    <h3>Clean Code</h3>
                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia dolores eos qui consequuntur magni</p>
                </div> <!--//item2-->
            </div> <!--/.col-->
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="service-box">
                    <div class="service-icon"><i class="fa fa-umbrella fa-2x"></i></div>
                    <h3>Help &amp; Support</h3>
                    <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur</p>
                </div> <!--//item3-->
            </div> <!--/.col-->
        </div> <!--/.row-->
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="service-box">
                    <div class="service-icon"><i class="fa fa-users fa-2x"></i></div>
                    <h3>Web Marketing</h3>
                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia dolores eos qui consequuntur magni</p>
                </div> <!--//item4-->
            </div> <!--/.col-->
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="service-box">
                    <div class="service-icon"><i class="fa fa-heart fa-2x"></i></div>
                    <h3>Made with love</h3>
                    <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur</p>
                </div> <!--//item5-->
            </div> <!--/.col-->
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="service-box">
                    <div class="service-icon"><i class="fa fa-download fa-2x">&nbsp;</i></div>
                    <h3>Free Updates</h3>
                    <p>At vero eos et accusamus et iusto odio dignis simos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti dorel</p>
                </div> <!--//item6-->
            </div> <!--/.col-->
        </div> <!--/.row-->
    </div> <!--/.container-->
</section>
<!-- feature end -->

<!--page-widget-section start-->
<section class="page-widget-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <h3 class="sm-title"><span>More about us</span></h3>
                <ul id="aboutTabs" class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="#tab1">Who we are</a></li>
                    <li role="presentation"><a href="#tab2">What we do</a></li>
                    <li role="presentation"><a href="#tab3">Why choose us</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="tab1">
                        <img src="http://placehold.it/270x200" class="tab-left-img img-thumbnail pull-left" alt="portrait" width="160">
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks</p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab2">
                        <p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. It uses a dictionary of over 200 Latin</p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab3">
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. It uses a dictionary of over 200 Latin. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xs-12">
                <h3 class="sm-title"><span>Causes progress</span></h3>
                <div class="p-bars">
                    <p>Save Africa's Children</p>
                    <div class="progress">
                        <div class="progress-bar" style="width: 70%;">70%</div>
                    </div>
                    <p>Education Needed</p>
                    <div class="progress">
                        <div class="progress-bar" style="width: 50%;">50%</div>
                    </div>
                    <p>Help Disabled</p>
                    <div class="progress">
                        <div class="progress-bar" style="width: 65%;">65%</div>
                    </div>
                    <p>Lets Fight Draught</p>
                    <div class="progress">
                        <div class="progress-bar" style="width: 85%;">95%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--page-widget-section end-->

<!-- sponsores start -->
<section id="clients" class="clients pad-80">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h2 class="lg-title text-center"><span>Our sponsores</span></h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div id="client-slider" class="client-slider">
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                    <div class="item"><img src="http://placehold.it/228x109" alt="clients logo"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- sponsores end -->
{% endblock %}