<header class="container-fluid fixed-top bg bg-color-white px-0 position position-z-3">
<div class="container py-lg-2">
<div class="row align-items-center justify-content-between">
<div class="col-7 col-lg-2">
<img src='../../../img/logo.png' alt="logo" class="img img-auto img-w" />
</div>
<div class="menu col-12 col-lg-10 p-0 d-lg-flex flex-lg-wrap">
<nav class="list list-none d-flex flex-wrap align-items-center col-12 col-lg-7 order-lg-1">
<li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
<p class="text text-size-1-2 text-size-lg-1 m-0">Inicio</p>
</li>
<li class="item px-3 px-lg-2 col-12 col-lg-auto text-center active">
<p class="text text-size-1-2 text-size-lg-1 m-0">Hoteles</p>
</li>
<li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
<p class="text text-size-1-2 text-size-lg-1 m-0">Destinos</p>
</li>
<li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
<p class="text text-size-1-2 text-size-lg-1 m-0">Motivos de viaje</p>
</li>
</nav>
<div class="booking col-12 align-self-end col-lg-2 px-5 px-lg-1 mb-3 mb-lg-0 order-lg-4">
<button class="btn btn-round btn-round-primary text text-size-1-2 text-size-lg-1 px-3 px-lg-2 py-2 py-lg-1 mb-2 mb-lg-0 w-100 text text-uppercase text-w-bold">tus reservas</button>
</div>
<div class="social d-flex flex-wrap align-self-end align-self-lg-center px-4 justify-content-between pt-2 pt-lg-0 px-lg-1 order-lg-2">
<a href="" class="d-inline-block btn btn-reset ml-lg-1">
<img src="../../../img/icon_ins.png" alt="" class="img img-auto img-h-1-5">
</a>
<a href="" class="d-inline-block btn btn-reset ml-lg-1">
<img src="../../../img/icon_tw.png" alt="" class="img img-auto img-h-1-5">
</a>
<a href="" class="d-inline-block btn btn-reset ml-lg-1">
<img src="../../../img/icon_fb.png" alt="" class="img img-auto img-h-1-5">
</a>
</div>
<div class="c-menu-lenguage col-1 d-none d-lg-block order-lg-3 mr-0 ml-2 position-relative">
<span class="btn text ">
<i class="icon fas fa-globe-americas mr-2 d-none"></i> ES <i class="icon fas fa-chevron-down mr-2 "></i>
</span>
<div class="wrapper position-absolute bg bg-color-white">
<ul class="list list-none m-0 p-0 pl-0">
<li class="item ">
<a href="#" class="btn text ">EN</a>
</li>
<li class="item ">
<a href="#" class="btn text ">FR</a>
</li>
<li class="item ">
<a href="#" class="btn text ">DE</a>
</li>
</ul>
</div>
</div>
</div>
<div class="icons col-auto ml-auto d-lg-none">
<button class="btn btn-reset text text-size-1-5 btn-open-menu">
<span class="icon icon-size-1-5 open">
<i class="fa fa-bars"></i>
</span>
<span class="icon icon-size-1-5 icon-color-primary close">
<i class="fa fa-times"></i>
</span>
</button>
</div>
</div>
</div>
</header>
<div class="s-hero container-fluid mb-5 px-0 overflow-hidden">
<div class="row align-content-center align-items-center">
<div class="main-carousel main-carousel-full dots dots-bullets dots-no-zoom dots-no-arrow col-12 px-0">
<div class="item w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
<div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
<div class="wrapper position position-relative position-z-1 pt-3">
<p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
<p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
</div>
</div>
</div>
<div class="item w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
<div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
<div class="wrapper position position-relative position-z-1 pt-3">
<p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
<p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="container mb-5 px-3 pr-lg-0 anima anima-home anima-1 anima-lg-show anima-lg-up">
<div class="row align-items-lg-center">
<div class="col-12 col-lg-3 mb-5">
<h2 class="text text-color-secondary text-w-bold text-size-2 text-lh-100 text-uppercase mb-2">Destinos recomendados</h2>
<p class="text text-color-gray">Quisque cursus lacus a ultricies imperdiet. Maecenas ex arcu, dignissim a pellentesque molestie, sodales at risus. Cras neque odio, maximus ac magna in, mattis cursus metus. Aenean hendrerit velit ultricies, iaculis libero vel, pellentesque quam. Aliquam erat volutpat. Donec sed placerat velit, sed hendrerit sapien. Quisque pharetra risus sapien, in semper est finibus sed. Quisque mattis venenatis feugiat.</p>
<button class="btn btn-round btn-round-primary text text-color-white px-5 col-12 col-md-auto text-w-bold">Ver mas</button>
</div>
<div class="col-12 col-lg-9 d-flex flex-wrap">
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="s-promo-banner container-fluid bg bg-image position-relative" style="background-image: url(../../../img/dummy.png)">
<div class="row position position-relative position-lg-static">
<div class="promo container px-0 px-lg-3">
<div class="wrapper col-12 col-lg-auto p-4 p-lg-5 ml-lg-auto">
<p class="text text-w-bold text-size-1-5 text-size-lg-3 text-uppercase text-color-white text-lh-100 m-0 mb-lg-5">hay una gran variedad de motivos por los que viajar a cuba.</p>
<p class="text text-w-light text-size-1-3 text-size-lg-1-5 text-color-white m-0">Cual es el tuyo?</p>
</div>
</div>
</div>
</section>
<section class="s-cards container-fluid d-none">
<div class="row">
<div class="col-12 text-center mb-3">
<h2 class="text text-color-primary text-w-bold text-size-2 text-size-lg-3-5 text-lh-100 mb-lg-5">Motivos del viaje</h2>
</div>
<div class="col-12 p-0 bg bg-color-secondary pt-4 pb-md-4 pb-lg-0 pt-lg-3">
<div class="container">
<div class="row flex-lg-row-reverse align-items-lg-center">
<div class="col-11 col-lg-6 mx-auto mb-lg-4 text-center text-lg-left text pl-lg-5">
<p class="text text-color-white text-w-bold text-size-2 text-size-lg-3 mb-3">Hay una gran variedad de motivos por los que viajar a Cuba. </p>
<p class="text text-color-white text-w-bold text-size-1-5 ">¿Cuál es el tuyo?</p>
</div>
<div class="chica col-12 text-center px-0 d-md-none d-lg-block order-lg-2 col-lg-6 anima anima-home">
<img src="../../../img/dummy_chica_grande.png" alt="" class="img img-contain img-w img-h-lg-600">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="s-slider container-fluid mb-5 py-4 bg bg-color-primary">
<div class="container">
<div class="row">
<div class="col-10 mx-auto px-0">
<div class="main-carousel main-carousel-full dots dots-no-bullets dots-arrow dots-no-zoom dots-round border border-none w-100">
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="card thumb col-12 col-md-4 col-lg-3 px-0 px-md-3 px-lg-1">
<div class="images w-100">
<img src="../../../img/dummy.png" alt="Buceo" class="img img-auto img-w img-h-2500">
</div>
<div class="captions position position-absolute w-100 bg bg-color-white text-center p-2 px-lg-3 py-lg-1">
<p class="text text-color-primary text-size-1-5 text-w-bold mb-0 bg bg-color-white position position-z-1">Buceo</p>
<p class="extra text text-color-black text-size-1 mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container mb-3">
<div class="row">
<div class="col-12">
<h3 class="text text-w-bold text-size-1-5 text-size-lg-2 text-color-secondary m-0">Disfrute de nuestras ofertas Exclusivas</h3>
</div>
</div>
</div>
<section class="s-newsletter container-fluid px-0 bg bg-color-secondary">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-8 px-0">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h-300 img-h-lg-350">
</div>
<div class="col-12 col-md-6 col-lg-4 p-3 p-lg-5">
<div class="w-100 main-carousel main-carousel-full dots dots-no-zoom dots-no-bullets dots-arrow px-3 mb-3">
<div class="item col-12 px-0">
<p class="text text-w-bold text-color-white text-uppercase text-size-1-5 text-size-lg-2 mb-1">Title</p>
<p class="text text-color-white text-size-1-2 text-size-lg-1-5 mb-5">Sub Title</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2 m-0">$44</p>
</div>
<div class="item col-12 px-0">
<p class="text text-w-bold text-color-white text-uppercase text-size-1-5 text-size-lg-2 mb-1">Title</p>
<p class="text text-color-white text-size-1-2 text-size-lg-1-5 mb-5">Sub Title</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2 m-0">$44</p>
</div>
<div class="item col-12 px-0">
<p class="text text-w-bold text-color-white text-uppercase text-size-1-5 text-size-lg-2 mb-1">Title</p>
<p class="text text-color-white text-size-1-2 text-size-lg-1-5 mb-5">Sub Title</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2 m-0">$44</p>
</div>
</div>
<div class="w-100 pl-3">
<button class="btn btn-round btn-round-white text text-color-secondary text-w-bold px-2 py-1">Accion</button>
</div>
</div>
</div>
</div>
</section>
<section class="s-brands container-fluid py-4 mb-5">
<div class="container">
<div class="row">
<div class="col-12 px-5">
<h3 class="text text-w-bold text-size-1-5 text-size-lg-2 text-color-secondary mb-2 mb-lg-3">Grupo Hotelero Cubanacan S.A. <span class="text text-size-1-2 text-size-lg-1 text-color-secondary pl-2 border-left">Nuestras marcas, la mejor forma de conocer y disfrutar Cuba.</span></h3>
</div>
<div class="col-12 mx-auto">
<img src="../../../img/multiLogo.png" alt="logo" class="img img-auto img-w">
</div>
</div>
</div>
</section>
<footer class="container-fluid px-0 overflow-hidden">
<div class="container">
<div class="row">
<div class="col-12 px-5 px-lg-0 mb-2 openmodal text-center">
<img src='../../../img/logo.png' alt="logo" class="img img-auto col-10 col-md-3" />
</div>
<div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
<p class='text text-family-secondary text-lh-150 text-color-gray m-0'>En compañía de experimentados profesionales del turismo y una acertada calidad en los servicios, el Grupo Hotelero de Cubanacan harán que sus vacaciones en Cuba tengan un encanto único al que le acompañarán modalidades diversas en hoteles de playa, ciudad y campos de Cuba.</p>
</div>
<div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
<p class='text text-family-secondary text-w-bold'>Grupo Hotelero Cubanacan S.A.</p>
<p class='text text-family-secondary text-color-gray'>Política de Privacidad</p>
<p class='text text-family-secondary text-color-gray'>Términos y Condiciones</p>
<p class='text text-family-secondary text-color-gray'>Sobre Nosotros</p>
<p class='text text-family-secondary text-color-gray'>Contáctenos</p>
</div>
<div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
<p class='text text-family-secondary text-w-bold text-color-six mb-1'>Descargue nuestra App</p>
<p class='text text-family-secondary text-color-gray'>Contáctenos</p>
<img src='../../../img/logo_store.png' alt="logo store" class="img img-auto col-3 col-lg-6" />
</div>
<div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
<p class='text text-family-secondary text-w-bold text-color-six mb-1'>Contactenos</p>
<div class="w-100 d-flex flex-wrap">
<i class="icon fas fa-map-marker-alt d-inline-block mt-1 col-1"></i>
<p class='text text-family-secondary text-lh-150 col-11 m-0 pl-1 text-color-gray'>Calle 23, Nº 156 N Y O. Vedado, Plaza de la Revolución La Habana, Cuba</p>
</div>
<div class="w-100 d-flex flex-wrap">
<i class="icon fas fa-phone d-inline-block mt-1 col-1"></i>
<p class='text text-family-secondary text-lh-150 col-11 m-0 pl-1 text-color-gray'>(+53) 7 838 5252</p>
</div>
<div class="w-100 d-flex flex-wrap">
<i class="icon fas fa-envelope d-inline-block mt-1 col-1"></i>
<p class='text text-family-secondary text-lh-150 col-11 m-0 pl-1 text-color-gray'>callcenter@cubanacan.tur.cu</p>
</div>
</div>
</div>
</div>
<div class="w-100 bg bg-color-quintary py-3 mt-lg-5">
<div class="container">
<div class="row">
<div class="col-12 d-lg-flex flex-lg-wrap align-items-center">
<p class="text text-family-secondary text-color-gray mb-3 mb-lg-0 col-lg-8">© 2022 SISTEMA DE RESERVAS ON LINE S.L. Todos los Derechos Reservados</p>
<img src='../../../img/logos_footer.png' alt="logo footer" class="img img-auto col-12 col-lg-4" />
</div>
</div>
</div>
</div>
</footer>
<div class="c-modal w-100 h-100 position position-fixed position-z-5 p-4">
<span class="mask w-100 h-100 position-fixed position-z-2 openmodal"></span>
<div class="wrapper col-11 col-md-7 col-lg-5 mx-auto position position-50-50 position-absolute position-z-3 p-4 bg bg-color-white">
<p class="text text-w-bold text-size-1-5 text-size-lg-2 mb-2">Titulo</p>
<p class="text">Texto</p>
<form class="c-form">
<div class="form-group text-center mb-3">
<input type="text" class="form-control border" placeholder="texto">
</div>
<div class="form-group text-center mb-3">
<input type="text" class="form-control border" placeholder="texto">
</div>
<div class="form-group text-center mb-3">
<input type="submit" class="btn btn-solid btn-solid-primary px-4 py-2 w-100 d-block" value="texto">
</div>
</form>
</div>
</div>
{{> @s-header }}
{{> @s-hero
s_hero_class="container-fluid my-5 my-lg-7"
}}
<section class="container mb-5 px-3 pr-lg-0 anima anima-home anima-1 anima-lg-show anima-lg-up">
<div class="row align-items-lg-center">
<div class="col-12 col-lg-3 mb-5">
<h2 class="text text-color-secondary text-w-bold text-size-2 text-lh-100 text-uppercase mb-2">Destinos recomendados</h2>
<p class="text text-color-gray">Quisque cursus lacus a ultricies imperdiet. Maecenas ex arcu, dignissim a pellentesque molestie, sodales at risus. Cras neque odio, maximus ac magna in, mattis cursus metus. Aenean hendrerit velit ultricies, iaculis libero vel, pellentesque quam. Aliquam erat volutpat. Donec sed placerat velit, sed hendrerit sapien. Quisque pharetra risus sapien, in semper est finibus sed. Quisque mattis venenatis feugiat.</p>
<button class="btn btn-round btn-round-primary text text-color-white px-5 col-12 col-md-auto text-w-bold">Ver mas</button>
</div>
<div class="col-12 col-lg-9 d-flex flex-wrap">
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
<div class="card thumb col-12 col-lg-4 position-relative px-3 mb-3 mb-lg-5">
<div class="wrapper overflow-hidden">
<div class="images w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-200">
</div>
<div class="captions w-100 bg bg-color-white p-2 py-lg-1 text-center">
<p class="text text-lh-100 text-w-bold text-color-secondary text-size-1-2 mb-1">Guardalavaca</p>
<p class="text text-lh-100 m-0">2 hoteles</p>
</div>
</div>
</div>
</div>
</div>
</section>
{{> @s-promo-banner
s_promo_banner_class="container-fluid bg bg-image position-relative"
s_promo_banner_promo_class="container px-0 px-lg-3"
s_promo_banner_wrapper_class="col-12 col-lg-auto p-4 p-lg-5 ml-lg-auto"
s_promo_banner_bg="../../../img/dummy.png"
s_promo_banner_text1_cont="hay una gran variedad de motivos por los que viajar a cuba."
s_promo_banner_text1_class="text-w-bold text-size-1-5 text-size-lg-3 text-uppercase text-color-white text-lh-100 m-0 mb-lg-5"
s_promo_banner_text2_cont="Cual es el tuyo?"
s_promo_banner_text2_class="text-w-light text-size-1-3 text-size-lg-1-5 text-color-white m-0"
}}
<section class="s-cards container-fluid d-none">
<div class="row">
<div class="col-12 text-center mb-3">
<h2 class="text text-color-primary text-w-bold text-size-2 text-size-lg-3-5 text-lh-100 mb-lg-5">Motivos del viaje</h2>
</div>
<div class="col-12 p-0 bg bg-color-secondary pt-4 pb-md-4 pb-lg-0 pt-lg-3">
<div class="container">
<div class="row flex-lg-row-reverse align-items-lg-center">
<div class="col-11 col-lg-6 mx-auto mb-lg-4 text-center text-lg-left text pl-lg-5">
<p class="text text-color-white text-w-bold text-size-2 text-size-lg-3 mb-3">Hay una gran variedad de motivos por los que viajar a Cuba. </p>
<p class="text text-color-white text-w-bold text-size-1-5 ">¿Cuál es el tuyo?</p>
</div>
<div class="chica col-12 text-center px-0 d-md-none d-lg-block order-lg-2 col-lg-6 anima anima-home">
<img src="../../../img/dummy_chica_grande.png" alt="" class="img img-contain img-w img-h-lg-600">
</div>
</div>
</div>
</div>
</div>
</section>
{{> @s-slider }}
{{> @s-newsletter }}
{{> @s-brands }}
{{> @s-footer }}
/* No context defined. */
// home animation
.anima {
&.anima {
&-home {
&.s-hero {
@include breakpoint(desktop) {
transform: translateY(15%);
}
}
&.chica {
@include breakpoint(desktop) {
// @extend %transform_075;
transform: translateX(-50vh);
opacity: 0;
}
}
}
}
}
.top {
&-scroll {
.anima {
&.anima {
&-home {
&.s-hero {
@include breakpoint(desktop) { transform: translateY(0); }
}
&.anima {
&-1 {
@include breakpoint(desktop) {
opacity: 1;
transform: translateY(0);
}
}
}
}
}
}
&-4 {
.anima {
&.anima {
&-home {
&.chica {
@include breakpoint(desktop) {
transform: translateX(0);
opacity: 1;
}
}
}
}
}
}
}
}
export function animaHome_1() {
setTimeout(function() {
$('.s-hero').removeClass('anima')
$('.anima-1').removeClass('anima-lg-show')
$('.anima-1').removeClass('anima-lg-up')
}, 1500);
}
export function animaHome_chica() {
setTimeout(function() {
$('.chica').removeClass('anima');
}, 1500)
}
No notes defined.