AppStrap.

• More Theme Elements
• Alerts
• Animations
• Badges
• Button Groups
• Buttons
• Cards
• Carousels
• Collapse / Accordions
• Colours Utils
• Counters
• Call To Action Blocks
• Dividers
• Dropdowns
• Forms
• Forms Input Groups
• Icons
  • Icon Utils/Overview
  • Icons: Font Awesome
  • Icons: Ionicons
  • Icons: Linearicons
  • Icons: Flags
• List Groups
• Modals
• Modals Onload
• Navs
• Tabbable Navs
• Overlays
• Progress Bars
• Spacers
• Tables
• Tooltips & Popovers
• Type Effect
• Typography
• Utilities
• Video Blocks

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" .

View code example

<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-34-sm.jpg" alt="Project 34" 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">Iaceo Ideo Nobis Os Quidem</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.

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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.

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

View code example

<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>

---