H1 Lorem Ipsum 50

H2 Lorem Ipsum 35

H3 Lorem Ipsum 24

H4 Lorem Ipsum 21

H5 Lorem Ipsum

H6 Lorem Ipsum

The font families in use on this website are Karla and Work Sans with weights of 300, 400, 600, 700 and 800.

<p class="lead">This is a lead paragraph.</p>

Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong. Pork tenderloin chicken corned beef, chuck burgdoggen landjaeger brisket sirloin alcatra pastrami. Filet mignon tenderloin chuck meatball andouille. Boudin tongue venison shoulder, strip steak t-bone ham salami bresaola andouille picanha ball tip tail biltong.

Accordions

Accordions can be used to shorten text sections or collapse content such as frequently asked questions. There are two styles, default and 'circles'. You will need to add an additional class of 'circles' to your accordion markup to achieve that style.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

Accordion Title

Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.

 <div class="accordion circles">
    <h4>Accordion Title</h4>
    <div><p>Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip.</p></div>
    <h4>Accordion Title</h4>
    <div><p>Accordion body. Bacon ipsum dolor amet salami ground round chicken tri-tip. Tongue short ribs swine, shoulder shank strip steak ground round jerky picanha short loin biltong.</p></div>
</div>

Box Styles

These box styles are available to use for call to actions within your content or as static sidebar blocks. Simply add your box class to the wrapping div or the block. You can also add the classes of 'center', 'title1' or 'title2' to further adjust your styling.

Box1 Center Style

This box style by default is light blue, but can be changed to several colors - navy, gray and light gray.

<div class="box1 center">
    <h4>Box1 Center Style</h4>
    <p>This box style by default is light blue, but can be changed to several colors - navy, gray and light gray. </p>
</div>

Box1 Blue Style

This box style is blue, with white text and aqua links.

This is a link.

<div class="box1 blue ">
    <h4>Box1 Blue Style</h4>
    <p>This box style is blue, with white text and aqua links. </p>
    <p><a href="">This is a link.</a></p>
</div>

Box1 Medium Blue Style

This box style is Medium blue, with white text and aqua links.

This is a link.

<div class="box1 md-blue ">
    <h4>Box1 Medium Blue Style</h4>
    <p>This box style is Medium blue, with white text and aqua links. </p>
    <p><a href="">This is a link.</a></p>
</div>

Box2 Style

This box style is has green top and bottom borders.

<div class="box2">
    <h4>Box2 Style</h4>
    <p>This box style is has green top and bottom borders </p>
</div>

Box3 Style

This box style is has light blue borders.

<div class="box3">
    <h5>Box3 Style</h5>
    <p>This box style is has light blue borders. </p>
</div>

Table

Tables are used to present tabular data or charts. If you wish to create a 'responsive table' see the second example below.

Table heading	Table heading	Table heading
Bacon ipsum dolor amet salami ground round chicken tri-tip.	Tongue short ribs swine, shoulder shank strip steak.	Filet mignon tenderloin chuck meatball andouille.
Filet mignon tenderloin chuck meatball andouille.	Bacon ipsum dolor amet salami ground round chicken tri-tip.	Tongue short ribs swine, shoulder shank strip steak.
Tongue short ribs swine, shoulder shank strip steak.	Filet mignon tenderloin chuck meatball andouille.	Bacon ipsum dolor amet salami ground round chicken tri-tip.

Table heading	Table heading	Table heading
Bacon ipsum dolor amet salami ground round chicken tri-tip.	Tongue short ribs swine, shoulder shank strip steak.	Filet mignon tenderloin chuck meatball andouille.

<table class="table">
    <tr>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
    </tr>
    <tr>
        <td>Bacon ipsum dolor amet salami ground round chicken tri-tip.</td>
        <td>Tongue short ribs swine, shoulder shank strip steak.</td>
        <td>Filet mignon tenderloin chuck meatball andouille.</td>
    </tr>
</table>

Table heading	Table heading	Table heading
Bacon ipsum dolor amet salami ground round chicken tri-tip.	Tongue short ribs swine, shoulder shank strip steak.	Filet mignon tenderloin chuck meatball andouille.

<div class="table-responsive">
    <table class="table">
        <tr>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
        <tr>
            <td>Bacon ipsum dolor amet salami ground round chicken tri-tip.</td>
            <td>Tongue short ribs swine, shoulder shank strip steak.</td>
            <td>Filet mignon tenderloin chuck meatball andouille.</td>
        </tr>
    </table>
</div>

Buttons

Because of the special effects of buttons on this site, any link you wish to make a button must have a span around the text. See the example for details. Once your span is in place, you can choose the color button you want from the styles dropdown. Various options are show below.

Learn More Learn More

Learn More Learn More

Learn More Learn More

Learn More Learn More

This is a blue button This is a large aqua button

<a href="" class="btn blue"><span>This is a blue button</span></a>
<a href="" class="btn aqua upper large"><span>This is a button</span></a>

Lists

There are several styled of lists to choose from, which are shown below. You can create your list in the cms, and then chose which style you'd like from the styles dropdown.

Default Unordered List

List Item
List Item
List Item
List Item
List Item
List Item
List Item

Unstyled Unordered List

List Item
List Item
List Item
List Item
List Item
List Item
List Item

Default ordered List

List Item
List Item
List Item
List Item
List Item
List Item
List Item

Default ordered List

List Item
List Item
List Item
List Item
List Item
List Item
List Item

Two Column Unordered List

List Item
List Item
List Item
List Item
List Item
List Item
List Item

<ul class="two-col">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Colors

sky-blue
#00a1df

aqua
#63d0df

lt-green
#b7dc78

green
#587f17

blue
#1073bf

md-blue
#0c4d80

dk-blue
#1c1f38

md-gray
#7d868c

lt-gray
#eaf0f3

lt-blue
#e5f5fc

xl-gray
#f4f7fa

gray
#d8dce1

dk-gray
#2d2d2d

blue-gray
#414956

Video Embeds

When adding in an embed code from youtube or vimeo you must remember to add it's wrapping div and responsive classes!

<div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/j50HN50E6JE?rel=0" frameborder="0" allowfullscreen=""> </iframe>
</div>

Image Styles

Image Style	Dimensions	Comments
Homepage Hero	1600 x 695
Homepage Servies CTA	800 x 600
Image/Video Sliders	800 x 450
Stories	800 x 450
Dr Profile	600 x 720
Hero Images	2400 x 690
CTA Images	800 x 600