The classes and styles indicated in this guide are contained in the main files generated in AEM, where 24-hour-fitness-global.min.css contains the general aspects and clientlib-components.min.css is the CSS for the specific components.

https://www.24hourfitness.com/etc/designs/24-hour-fitness-global.min.css
https://www.24hourfitness.com/etc/designs/24-hour-fitness/clientlib-components.min.css

Din Font used for headers, titles and buttons.
 

din-2014

din-2014 italic

din-2014

din-2014 italic

font-family: 'din-2014';


Bold
font-weight: bold;

Opens Sans font used for body content.
 

Open Sans

Open Sans italic

Open Sans

Open Sans italic

font-family: 'Open Sans';

Bold
font-weight: bold;

font-size: 45px;
line-height: 50px;

Responsive (max-width:961px)
font-size: 34px;
line-height: 37px;

font-size: 40px;
line-height: 44px;

Responsive (max-width:961px)
font-size: 28px;
line-height: 31px;

font-size: 27px;
line-height: 30px;

Responsive (max-width:961px)
font-size: 24px;
line-height: 26px;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

font-size: 18px;
line-height: 26px;
font-family: "Open Sans";

<div class="link-button-24">
      <a href="#">Button CTA</a>
</div>

<div class="link-button-24 text-cta-24">
      <a href="#">Text CTA</a>
</div>

In addition to the used bootstrap breakpoints, there are some extras that help in the creation of layouts that could be out of the standard.

The 3 main breakpoins are:

Portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide
min-width:481px;

Tablet, landscape iPad, lo-res laptops ands desktops
min-width:961px;

Large devices (large desktops, 1200px and up)
min-width:1200px;

Others used less frequently but created to help in more complex cases:

Portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
min-width:641px;

Big landscape tablets, laptops, and desktops
min-width:1025px;

Hi-res laptops and desktops
min-width:1281px;