<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carnival</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="[ bg-light ]">
<div class="[ container ]">
<div class="[ row ]">
<div class="[ col-xs-6 col-md-3 ][ no-padding ]">
<a href="index.html" class="[ show ]">
<img class="[ width-logo ]" src="img/carnival-logo.png">
</a>
</div>
<div class="[ hidden-xs ][ col-md-9 ][ margin-top ]">
<div class="[ pull-right ][ fz-medium color-secondary ]">
<a class="[ color-secondary ]" href="promociones.html">
<img class="[ svg ][ icon icon--iconed--large icon--stroke ]" src="icons/promotions.svg">
<span>Promociones</span>
</a>
<a class="[ color-secondary ]" href="tel:+525552555555">
<img class="[ svg ][ icon icon--iconed--large icon--stroke ]" src="icons/phone.svg">
<span>5255 - 5555</span>
</a>
</div>
</div>
<div class="[ hidden-sm hidden-md hidden-lg ][ col-xs-6 ][ text-right ][ margin-top--small ]">
<a data-toggle="modal" data-target="#myModal">
<img src="icons/navigation.svg" class="[ svg ][ icon icon--min icon--stroke ][ color-secondary ]" alt="">
</a>
</div>
</div>
</div>
<div class="[ hidden-xs ][ bg-primary ]">
<div class="[ nav ][ container ][ text-center ]">
<a class="[ inline-block ][ color-light ]" href="cruceros.html">¿Por qué cruceros Carnival?</a>
<a class="[ inline-block ][ color-light ]" href="destinos.html">Destinos</a>
<a class="[ inline-block ][ color-light ]" href="actividades.html">Actividades</a>
<a class="[ inline-block ][ color-light ]" href="antes-viajar.html">Antes de Viajar</a>
<a class="[ inline-block ][ color-light ]" href="barcos.html">Barcos</a>
<a class="[ inline-block ][ color-light ]" href="preguntas-frecuentes.html">Preguntas frecuentes</a>
</div>
</div>
</header>
<!-- Caribe description -->
<section class="[ margin-bottom--large ]">
<img class="[ visible-xs ][ img-responsive ]" src="img/destinos.jpg">
<div class="[ hidden-xs ][ bg-image square img-destinos ]"></div>
<div class="[ container ]">
<h2 class="[ margin-top--large margin-bottom ] [ text-uppercase ][ text-center ][ color-secondary ] ">Caribe</h2>
<div class="[ row ]">
<p class="[ col-md-6 ][ col-md-offset-3 ][ margin-medium ]">We don’t have proof, but evidence suggests that the Caribbean was made for cruising. And with more than 5,000 islands and cays, there’s a lot of paradise to see! So how do you choose where to go on your next cruise? See for yourself — best of all, the mild climate means it doesn’t even matter what time of year you go. A Carnival cruise takes you to some of the greatest hotspots stretching across the world’s designated hotspot.</p>
</div>
</div>
</section>
<!-- Excursiones -->
<div class="[ container ]">
<div class="[ row ]">
<section class="[ col-sm-6 ][ margin-bottom--xlarge ]">
<h3 class=" [ text-center text-primary ][ margin-bottom ] " >Excursiones</h3>
<div class="[ row ][ margin-bottom--xsmall ]">
<div class="[ col-xs-6 ]">
<img class="[ img-responsive ][ margin-bottom--small ]" src="img/destinos/tulum.jpg">
<p class="[ text-primary ]" >Mayan Ruins of Tulum & playa Del Carmen Experience</p>
</div>
<div class="[ col-xs-6 ]">
<img class="[ img-responsive ][ margin-bottom--small ]" src="img/destinos/coral-garden.jpg">
<p class="[ text-primary ]" >Coral &Stingray Sandbar</p>
</div>
</div>
<div class="[ text-center ]">
<button type="submit" class="[ btn btn-primary btn-small ]">VER MÁS</button>
</div>
</section>
<!-- Puertos -->
<section class="[ col-sm-6 ][ margin-bottom--xlarge ]">
<h3 class=" [ text-center text-primary ][ margin-bottom ] " >Puertos</h3>
<div class="[ row ][ margin-bottom--xsmall ]">
<div class="[ col-xs-6 ]">
<img class="[ img-responsive ][ margin-bottom--small ]" src="img/destinos/nassau.jpg">
<p class="[ text-primary ]" >Nassau</p>
</div>
<div class="[ col-xs-6 ]">
<img class="[ img-responsive ][ margin-bottom--small ]" src="img/destinos/freeport.png">
<p class="[ text-primary ]" >Freeport</p>
</div>
</div>
<div class="[ text-center ][ margin-medium ][ margin-bottom ]">
<button type="submit" class="[ btn btn-primary btn-small ]">VER MÁS</button>
</div>
</section>
</div>
</div>
<footer class="[ border--top--primary margin-bottom ]">
<div class="[ container ]">
<div class="[ row ][ margin-bottom--large ]">
<section class="[ premios ][ padding--top-bottom--large ][ col-xs-12 col-sm-6 col-md-3 ]">
<h3 class="[ text-center text-uppercase ][ color-primary ][ margin-bottom ]"> Premios </h3>
<div class="[ row ]">
<div class="[ col-xs-4 ]">
<img class="[ img-responsive ]" src="img/premios/bon_voyage.jpg">
</div>
<div class="[ col-xs-4 ]">
<img class="[ img-responsive ]" src="img/premios/premios_porthole.jpg">
</div>
<div class="[ col-xs-4 ]">
<img class="[ img-responsive ]" src="img/premios/caribbean_news.jpg">
</div>
</div>
</section>
<section class="[ social ][ padding--top-bottom--large ][ col-xs-12 col-sm-6 col-md-3 ]">
<h3 class="[ text-center text-uppercase ][ color-primary ][ margin-bottom ]"> Síguenos </h3>
<div class="[ text-center ]">
<a href="https://twitter.com/CarnivalMexico" class="[ btn bg-twitter ][ text-light ]" target="_blank">
<img src="icons/twitter.svg" class="[ svg ][ icon icon--iconed icon--fill ][ color-light ]" alt="">
Twitter
</a>
<a href="https://www.facebook.com/CarnivalCrucerosMexico/?fref=ts" class="[ btn bg-facebook ][ text-light ]" target="_blank">
<img src="icons/facebook.svg" class="[ svg ][ icon icon--iconed icon--fill ][ color-light ]" alt="">
Facebook
</a>
</div>
</section>
<div class="[ visible-sm ][ clearfix ]"></div>
<section class="[ box-primary ][ padding--top-bottom--large ][ col-xs-12 col-sm-6 col-md-3 ]">
<div class="[ row ]">
<h3 class="[ col-xs-12 ][ text-uppercase ][ margin-bottom ]"> Links </h3>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="registro.html">Registro de agencias</a>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="folletos.html">Folletos</a>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="directorio.html">Directorio</a>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="politicas.html">Políticas</a>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="contacto.html">Contacto</a>
</div>
</section>
<section class="[ box-primary ][ padding--top-bottom--large ][ col-xs-12 col-sm-6 col-md-3 ]">
<div class="[ row ]">
<h3 class="[ col-xs-12 ][ text-uppercase ][ margin-bottom ]"> Visas </h3>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="http://www.canadainternational.gc.ca/mexico-mexique/index.aspx?lang=spa" target="_blank">Canada</a>
<a class="[ col-sm-6 col-md-12 ][ site-links__link ]" href="http://spanish.mexico.usembassy.gov/es/visas.html" target="_blank">Estados Unidos</a>
</div>
</section>
</div>
<section class="[ text-center ][ padding-top-bottom-small ]">
<p>Todos los derechos reservados 2006 - 2016. <br />Carnival Corporation.</p>
</section>
</div>
</footer>
<!-- Modal menú -->
<div id="myModal" class="[ modal fade ]" role="dialog">
<div class="[ modal-dialog ]">
<div class="[ modal-content ][ color-light ]">
<div class="[ modal-header modal-menu__header ][ bg-light ]">
<div class="[ container ]">
<div class="[ row ]">
<div class="[ col-xs-6 ][ no-padding ]">
<a href="index.html" class="[ show ]">
<img class="[ width-logo ]" src="img/carnival-logo.png">
</a>
</div>
<div class="[ col-xs-6 ][ pull-right ][ text-right ][ margin-top--small ]">
<span type="button" class="[ closer ][ color-secondary ]" data-dismiss="modal">
<img src="icons/close.svg" class="[ svg ][ icon--iconed--xlarge icon--secondary icon--stroke ]" alt="">
</span>
</div>
</div>
</div>
</div>
<div class="[ modal-nav ][ modal-body ][ bg-primary ][ large ][ padding--top--xxlarge ][ text-center ]">
<p class="[ margin-bottom--large ]"><a class="[ color-light ]" href="cruceros.html">¿Por qué cruceros Carnival?</a></p>
<p class="[ margin-bottom--large ]"><a class="[ color-light ]" href="destinos.html">Destinos</a></p>
<p class="[ margin-bottom--large ]"><a class="[ color-light ]" href="actividades.html">Actividades</a></p>
<p class="[ margin-bottom--large ]"><a class="[ color-light ]" href="antes-viajar.html">Antes de Viajar</a></p>
<p class="[ margin-bottom--large ]"><a class="[ color-light ]" href="barcos.html">Barcos</a></p>
<p class="[ margin-bottom--large ]"><a class="[ color-light ]" href="preguntas-frecuentes.html">Preguntas frecuentes</a></p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<script>
$( document ).ready(function() {
/**
* On ready
**/
imgToSvg();
/**
* Triggered events
**/
//$('#send_btn').popover({content: 'Thank You'},'click');
});
</script>
</body>
</html>