Elements:Overlays
Useful colour overlay classes so you can overlay background images or videos.
Basics
Overlays allow you to use background images or content and overlay them with a semi-transparent colour block. Use the class
.overlay
class or inline per element using the
.overlay-inline
.
Background image overlays
Background images can be applied quickly & easily using the attribute:
data-bg-img="IMAGE-PATH"
.
<div class="p-4 py-lg-8 bg-grey-dark text-center overlay overlay-op-7" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="text-uppercase font-weight-bold m-0 text-white">Simple Background Overlay</h2>
</div>
Hover Overlays
You can also use overlays to show hidden content in an overlay when it's hovered.
View code example<a href="assets/img/projects/project-1.jpg" class="overlay-hover"><!-- Wrapper: must have overlay-hover class -->
<img src="assets/img/projects/project-3-sm.jpg" alt="Project 3" class="img-fluid" /><!-- Background shown by default -->
<span class="overlay-hover-content"><!-- Hover content: must have overlay-hover-content class -->
<i class="fa fa-arrow-circle-right icon-3x text-white"></i>
<h5 class="mt-4">Duis Elit Minim Suscipere Volutpat</h5>
</span>
</a>
Overlay Colours
You can control the colour of the overlay using the
overlay-COLOUR
classes. For colour options will be added in the near future.
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default</h2>
</div>
<div class="p-4 py-lg-5 bg-faded text-center overlay overlay-white overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-inverse">.overlay-white</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-primary</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-info</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-success</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-warning</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-danger</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-green</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-red</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-blue</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-purple</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-pink</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-orange</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-lime</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-blue-dark</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-red-dark</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-brown</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-cyan-dark</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-yellow</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-slate</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-olive</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-teal</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">.overlay-green-bright</h2>
</div>
Overlay Opacity
You can control the strength or opacity of the overlay using the
overlay-op-(1-9)
classes, 1 being the weakest and 9 being the strongest.
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Default: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">White: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Primary: .overlay-op-9</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Info: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Success: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Warning: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Danger: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Purple: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Pink: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Orange: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-lime overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Lime: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue-dark overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Blue-dark: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red-dark overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Red-dark: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Brown: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-cyan-dark overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Cyan-dark: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-yellow overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Yellow: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Slate: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Olive: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Teal: .overlay-op-9</h2>
</div>
View code example
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-1 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-1</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-2 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-2</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-3 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-3</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-4 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-4</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-5 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-5</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-6 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-6</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-7 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-7</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-8 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-8</h2>
</div>
<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green-bright overlay-op-9 mb-3" data-bg-img="assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
<h2 class="font-weight-bold m-0 text-white">Green-bright: .overlay-op-9</h2>
</div>