<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>
<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>
/* No context defined. */
// slider section
.s-slider {
.captions {
@extend %transform_05;
bottom: 0;
left: 0;
max-height: 100%;
@include breakpoint(desktop) {
width: calc(100% - 1rem) !important;
left: 50%;
transform: translateX(-50%);
}
.extra {
@extend %transform_05;
opacity: 0;
height: 200px;
overflow: hidden;
margin-top: -200px;
}
}
.images {
border-radius: 2rem !important;
}
.card {
&:hover {
.captions {
@include border-radius(2rem);
}
.extra {
opacity: 1;
margin-top: 0;
}
}
}
.dots {
&.dots {
&-arrow {
.flickity-button {
background-color: $color_white;
.flickity-button-icon { fill: $color_primary; }
}
}
}
}
}
No notes defined.