<nav class="navbar navbar-default navbar-fixed-top " >
        <div class="container-fluid">
                <div class="col-xs-6">
                    <div> <a class="navbar-brand-custom" href="#">Historia de Zainab</a> </div>
                    {{if showPrev}} <a class="prev move-link" href="#"> <span class="circle glyphicon glyphicon-chevron-left"> </span></a> {{/if}}
                    <span class="chapter-name"> Capitulo {{:n_page}}  </span>
                    {{if showNext}} <a class="next move-link" href="#"><span class="circle glyphicon glyphicon-chevron-right">  </span></a>{{/if}}
                </div>
                <div class="col-xs-2 nopadding ">
                        <a class="link-menu" href="#story"><img src="images/c{{:n_page}}_menu_story.png"  class="img-menu"/>
                        story
                        </a>
                    </div>
                    <div class="col-xs-2 nopadding">
                        <a class="link-menu" href="#mapa"> <img src="images/c{{:n_page}}_menu_mapa.png" class="img-menu"/>
                            mapa
                        </a>
                    </div>
                    <div class="col-xs-2 nopadding">
                        <a class="link-menu" href="#datos"> <img src="images/c{{:n_page}}_menu_datos.png" class="img-menu"/>
                        datos
                    </a>
                    </div>
                </div>
    </nav>

    <div class="container-fluid" id="page-{{:n_page}}">
        <div id="main-content">
            <div id="story" class="section">
                <img src="images/c{{:n_page}}_IMG_story_mob.jpg" class="img-responsive full-width-img"/>
                <div id="story-text">
                    {{:storytext}}
                </div>
            </div>
            <div id="mapa" class="section">
                <img src="images/c{{:n_page}}_mapa_mob.jpg" class="img-responsive full-width-img"/>
            </div>
            <div id="datos" class="section">
                <div class="row">
                    <div class="col-sm-10 col-lg-11">
                        <div id="myCarousel" class="carousel" data-ride="carousel">
                            <div class="carousel-inner">
                                <div class="item active">
                                  <img src="images/c6_aerea2011_mob.jpg" alt="2011">
                                </div>

                                <div class="item">
                                  <img src="images/c6_aerea2012_mob.jpg" alt="2012">
                                </div>

                                <div class="item">
                                  <img src="images/c6_aerea2013_mob.jpg" alt="2013">
                                </div>
                                <div class="item">
                                  <img src="images/c6_aerea2014_mob.jpg" alt="2014">
                                </div>
                                <div class="item">
                                  <img src="images/c6_aerea2015_mob.jpg" alt="2015">
                                </div>
                                <div class="item">
                                  <img src="images/c6_aerea2016_mob.jpg" alt="2016">
                                </div>
                                <div class="item">
                                  <img src="images/c6_aerea2017_mob.jpg" alt="2017">
                                </div>
                              </div>
                          </div>
                          <div class="col-sm-2 col-lg-1 " style="margin-top:1em;padding-left: 0px;padding-right: 0px;">
                              <ul class="carousel-btn">
                                  <a href="#" data-target="#myCarousel" data-slide-to="0" class="carouselGotoBtn btn btn-default active" >
                                      <li  >
                                          2011
                                      </li>
                                  </a>
                                  <a href="#" data-target="#myCarousel" data-slide-to="1" class="carouselGotoBtn btn btn-default">
                                      <li >
                                      2012
                                  </li></a>
                                  <a href="#" data-target="#myCarousel" data-slide-to="2" class="carouselGotoBtn btn btn-default">
                                      <li >
                                      2013
                                  </li></a>
                                  <a href="#" data-target="#myCarousel" data-slide-to="3" class="carouselGotoBtn btn btn-default">
                                      <li  >
                                      2014
                                  </li></a>
                                  <a href="#" data-target="#myCarousel" data-slide-to="4" class="carouselGotoBtn btn btn-default">
                                      <li >
                                      2015
                                  </li></a>
                                  <a href="#" data-target="#myCarousel" data-slide-to="5" class="carouselGotoBtn btn btn-default">
                                      <li >
                                      2016
                                  </li></a>
                                  <a href="#" data-target="#myCarousel" data-slide-to="6" class="carouselGotoBtn btn btn-default">
                                      <li>
                                      2017
                                  </li></a>
                              </ul>
                          </div>

                      </div>
                  </div>
                <img src="images/c{{:n_page}}_IMG_grafico_mob.jpg" class="img-responsive"/>
                <div id="map-text">
                    {{:maptext}}
                </div>
                <a href="#" class="referencias" id="referencias-page-btn-{{:n_page}}"> Referencias bibliográficas </a>
            </div>
        </div>
    </div>