<div class="green">Text Color</div>
<div class="bg-green">Background Color</div>
<div class="blue">Text Color</div>
<div class="bg-blue">Background Color</div>
<div class="dk-blue">Text Color</div>
<div class="bg-dk-blue">Background Color</div>
<div class="gray">Text Color</div>
<div class="bg-gray">Background Color</div>
<div class="lt-gray">Text Color</div>
<div class="bg-lt-gray">Background Color</div>
<div class="off-white">Text Color</div>
<div class="bg-off-white">Background Color</div>

<h3 class="headings">Section Headings</h3>
<h4 class="headings"><span class="icon-building"></span> Section Headings - with icon</h4>

<p class="lead">This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. <a href="#">Paragraph link</a>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignright border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignleft border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/1200x400" class="aligntop border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>

<p class="left-align"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="right-align"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="center"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>

<div class="row">
<div class="small-11 medium-10 large-9 xlarge-8 small-centered column article">
<h1>Article copy that decreases container width and increases font size</h1>
<p>Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<h2>Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.</h2>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>

<ul class="bullets">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ul class="checkmarks">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ol>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ol>
</li>
<li>List Item 6</li>
</ol>

<a class="button large" href="#">Primary Large</a>
<a class="button" href="#">Primary Default</a>
<a class="button tiny" href="#">Primary Tiny</a>
<a class="button outline large" href="#">Secondary Large</a>
<a class="button outline" href="#">Secondary Default</a>
<a class="button outline tiny" href="#">Secondary Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>

<a href="#" class="text-button">Text Button Primary</a>
<a href="#" class="text-button secondary">Text Button Secondary</a>
<a href="#" class="text-button tertiary">Text Button Secondary</a>
<a href="#" class="text-button tiny">Small Text Button Primary</a>
<a href="#" class="text-button secondary tiny">Small Text Button Secondary</a>
<a href="#" class="text-button tertiary tiny">Small Text Button Secondary</a>
<a href="#" class="text-button text-button--icon">Button Icon Primary</a>
<a href="#" class="text-button secondary text-button--icon">Button Icon Secondary</a>

<form>
<div class="row column">
<label>Input Label
<input type="text" placeholder=".row.column">
</label>
</div>
<div class="row">
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
</div>
<div class="row column">
<label>Select Box
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</label>
</div>
<div class="row">
<div class="large-6 columns mb3">
<fieldset>
<legend>Choose Your Favorite</legend>
<div class="radio">
  <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><span></span> Radio 1 </label>
</div>
<div class="radio">
  <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><span></span> Radio 2 </label>
</div>
</fieldset>
</div>
<div class="large-6 columns mb3">
<fieldset>
<legend>Check these out</legend>
<div class="checkbox">
  <label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
<div class="checkbox">
  <label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
</fieldset>
</div>
</div>
<div class="row column">
<label>Enable Some Fun</label>
<label class="switch">
<input type="checkbox" title="Switch Control" aria-label="Switch Control">
<span></span>
</label>
</div>
<div class="row column">
<label>Textarea Label
<textarea rows="8" placeholder=".row.column"></textarea>
</label>
</div>
<div class="row column">
<button type="submit" class="button">Submit</button>
</div>
</form>

<div class="row">
<div class="medium-6 column">
<p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
</div>
<div class="medium-6 column">
<p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
</div>
</div>
<div class="row">
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
</div>

<div class="row xsmall-up-1 small-up-2 medium-up-3 large-up-4 xlarge-up-5 xxlarge-up-6">
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
</div>

<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" data-scroll-ignore href="#">More Info</a> </p>
<div class="slide-content">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
<h3>Slide Toggle With Button</h3>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#" data-scroll-ignore> More Info</a>
<div class="slide-content">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>

<dl class="accordion">
<dt>FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>

<div class="resp-tabs resp-tabs--vertical">
<ul class="resp-tabs-list resp-tabs-group" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>

<div class="resp-tabs resp-tabs--horizontal">
<ul class="resp-tabs-list resp-tabs-group" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>

<table class="table">
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>

<div class="alert alert-success">
<p>This is an example successful alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-info">
<p>This is an example info alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-warning">
<p>This is an example warning alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-danger">
<p>This is an example danger alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>

<div class="block-icons">
<div class="row row-site column">
<div class="block-icon">
<a href="">
<div class="block-icon__inner">
  <span class="block-icon__icon icon-military"></span>
  <h5 class="block-icon__title">Military</h5>
</div>
</a>
</div>
<div class="block-icon">
<a href="">
<div class="block-icon__inner">
  <span class="block-icon__icon icon-medical"></span>
  <h5 class="block-icon__title">Medical</h5>
</div>
</a>
</div>
<div class="block-icon">
<a href="">
<div class="block-icon__inner">
  <span class="block-icon__icon icon-agriculture"></span>
  <h5 class="block-icon__title">Agriculture</h5>
</div>
</a>
</div>
<div class="block-icon">
<a href="">
<div class="block-icon__inner">
  <span class="block-icon__icon icon-cloud-computing"></span>
  <h5 class="block-icon__title">Cloud Computing</h5>
</div>
</a>
</div>
<div class="block-icon">
<a href="">
<div class="block-icon__inner">
  <span class="block-icon__icon icon-apps"></span>
  <h5 class="block-icon__title">Custom Applications</h5>
</div>
</a>
</div>
</div>
</div>

<section class="full-page-banner" style="background:url(/wp-content/uploads/cta.jpg);background-size:cover;background-repeat:no-repeat;">
<div class="row">
<div class="full-page-banner__body center">
<h2 class="full-page-banner__title h1">Let’s Get Started</h2>
<p class="lead full-page-banner__overview">Connect with one of our team members today to learn more.</p>
<a href="" class="button m0">Get in Touch</a>
</div>
</div>
</section>

<section class="split-panel split-panel--left mb12">
<div class="row row-site column">
<div class="column xsmall-12 xlarge-6 matchheight-me">
<div class="split-panel__image" style="background:url(/wp-content/uploads/circuit-board-01.jpg);background-size:cover;background-position:center;" data-aos="fade-right" data-aos-delay="300">
<div class="split-panel__callout">
<div class="split-panel__callout--inner">
  <span class="split-panel__number">35+</span>
  <span class="split-panel__blurb">years of<br/> experience</span>
  </div>
</div>
</div>
</div>
<div class="column xsmall-12 xlarge-6 matchheight-me">
<div class="split-panel__inner">
<div class="split-panel__body" data-aos="fade-up-xsmall" data-aos-delay="50">
  <h2 class="split-panel__title h1">Specialized in Vapor Deposition</h2>
  <p class="split-panel__overview">Deep Coat Industries LLC has a core competency in physical vapor deposition of metals utilizing electrical resistive heating to evaporate metals for coating. We specialize in coatings for EMI/RFI shielding, and can deposit onto many different types of housings, inserts, and covers.</p>
  <a href="#" class="text-button text-button--icon">Learn More</a>
</div>
</div>
</div>
</div>
</section>

<section class="split-panel split-panel--right">
<div class="row row-site column">
<div class="column xsmall-12 medium-12 xlarge-6 xlarge-push-6 matchheight-me">
<div class="split-panel__image" style="background:url(/wp-content/uploads/addtl-services.jpg);background-size:cover;background-position:center;" data-aos="fade-left" data-aos-delay="300">
<div class="split-panel__callout">
<div class="split-panel__callout--inner">
<span class="split-panel__number">100+</span>
<span class="split-panel__blurb">completed<br/> projects</span>
</div>
</div>
</div>
</div>
<div class="column xsmall-12 medium-12 xlarge-6 xlarge-pull-6 matchheight-me">
<div class="split-panel__inner">
<div class="split-panel__body" data-aos="fade-up-xsmall" data-aos-delay="50">
<h2 class="split-panel__title h1">Additional Services</h2>
<p class="split-panel__overview">Deep Coat also provides the additional services of: cleaning for parts that cannot be cleaned before arriving at our facility, sand/bead blasting, hand-masked samples, thermoforming shields to be metallized, and tooling/masking design. Check out the detailed sections below for more information on each of our services.</p>
<a href="#" class="text-button text-button--icon">Learn More</a>
</div>
</div>
</div>
</div>
</section>

<div class="section-heading center pt11 pb8">
<div class="row row-site column">
<div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
<h2 class="label tertiary">What we do</h2>
<h3 class="h1">How We Bring Value</h3>
</div>
</div>
</div>
<div class="cards">
<div class="row row-site column">
<div class="row small-up-1 medium-up-2 xlarge-up-3">
<div class="column">
<a href="" class="card center">
  <div class="card__inner">
    <img src="/wp-content/uploads/deposition.svg" alt="" class="card__icon">
    <h4 class="card__title">Direct Deposition</h4>
    <p class="card__overview">Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra.</p>
    <span class="icon-arrow-right-long"></span>
  </div>
</a>
</div>
<div class="column">
<a href="" class="card center">
  <div class="card__inner">
    <img src="/wp-content/uploads/deposition.svg" alt="" class="card__icon">
    <h4 class="card__title">Direct Deposition</h4>
    <p class="card__overview">Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra.</p>
    <span class="icon-arrow-right-long"></span>
  </div>
</a>
</div>
<div class="column">
<a href="" class="card center">
  <div class="card__inner">
    <img src="/wp-content/uploads/deposition.svg" alt="" class="card__icon">
    <h4 class="card__title">Direct Deposition</h4>
    <p class="card__overview">Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra.</p>
    <span class="icon-arrow-right-long"></span>
  </div>
</a>
</div>
</div>
</div>
</div>

<section class="image-cards pb10">
<div class="section-heading border-label center pt11 pb8">
<div class="row row-site column">
<div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
<h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="0">Industries We Serve</h3>
<p data-aos="fade-up-xsmall" data-aos-delay="50">Deep Coat Industries LLC is capable of providing electromagnetic interference shielding to products in many different industries. However, our customers most commonly shield products with the following uses.</p>
</div>
</div>
</div>
<div class="image-cards">
<div class="row row-site column">
<div class="row small-up-1 medium-up-2 xlarge-up-4">
<div class="column" data-aos="fade-up-xsmall" data-aos-delay="000">
  <a href="" class="image-card zoom-trigger">
    <div class="image-card__image zoom-img" style="background:url(/wp-content/uploads/medical-01.jpg);background-size:cover;background-position:center;">
      <div class="image-card__icon">
        <span class="icon-medical"></span>
      </div>
    </div>
    <div class="image-card__body">
      <h4>Medical</h4>
      <p>Fluid transfer devices and robust field-use equipment</p>
    </div>
  </a>
</div>
<div class="column" data-aos="fade-up-xsmall" data-aos-delay="000">
  <a href="" class="image-card zoom-trigger">
    <div class="image-card__image zoom-img" style="background:url(/wp-content/uploads/medical-01.jpg);background-size:cover;background-position:center;">
      <div class="image-card__icon">
        <span class="icon-medical"></span>
      </div>
    </div>
    <div class="image-card__body">
      <h4>Medical</h4>
      <p>Fluid transfer devices and robust field-use equipment</p>
    </div>
  </a>
</div>
<div class="column" data-aos="fade-up-xsmall" data-aos-delay="000">
  <a href="" class="image-card zoom-trigger">
    <div class="image-card__image zoom-img" style="background:url(/wp-content/uploads/medical-01.jpg);background-size:cover;background-position:center;">
      <div class="image-card__icon">
        <span class="icon-medical"></span>
      </div>
    </div>
    <div class="image-card__body">
      <h4>Medical</h4>
      <p>Fluid transfer devices and robust field-use equipment</p>
    </div>
  </a>
</div>
<div class="column" data-aos="fade-up-xsmall" data-aos-delay="000">
  <a href="" class="image-card zoom-trigger">
    <div class="image-card__image zoom-img" style="background:url(/wp-content/uploads/medical-01.jpg);background-size:cover;background-position:center;">
      <div class="image-card__icon">
        <span class="icon-medical"></span>
      </div>
    </div>
    <div class="image-card__body">
      <h4>Medical</h4>
      <p>Fluid transfer devices and robust field-use equipment</p>
    </div>
  </a>
</div>
</div>
</div>
</div>
</section>

<section class="cta-card mt12 mb12">
<div class="row row-site column">
<div class="column small-12 medium-11 large-10 medium-centered">
<div class="cta-card__inner bg-lt-gray">
<div class="cta-card__left">
  <h4>Looking for Custom Applications?</h4>
  <p class="m0">Deep Coat offers additional custom solutions for your applications.</p>
</div>
<div class="cta-card__right">
  <a href="" class="button outline">Learn More</a>
</div>
</div>
</div>
</div>
</section>

<section class="featured-section bg-dk-blue featured-section--cards">
<div class="section-heading center pt11">
<div class="row row-site column">
<div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
<h2 class="label tertiary" data-aos="fade-up-xsmall" data-aos-delay="0">Our Customers</h2>
<p class="lead white" data-aos="fade-up-xsmall" data-aos-delay="50">Deep Coat Industries LLC services a wide array of <span class="underline--green">customers</span>, from molders to assemblers, who represent a variety of industries. Read on to see <span class="underline--green">testimonials</span> from a handful of our existing customers.</p>
</div>
</div>
</div>
<div class="info-cards">
<div class="row row-site column">
<div class="column small-12 medium-10 large-7 medium-centered">
<div class="row xsmall-up-2">
  <div class="column center" data-aos="flip-left">
    <div class="info-card">
      <h5 class="h1">120</h5>
      <span>Customers</span>
    </div>
  </div>
  <div class="column center" data-aos="flip-left">
    <div class="info-card">
      <h5 class="h1">10</h5>
      <span>Chambers</span>
    </div>
  </div>
</div>
</div>
</div>
</div>
</section>

<section class="featured-logos mt8 mb8">
  <div class="row row-site column">
    <div class="logos xsmall-up-2 medium-up-3 large-up-6">
      <div class="column">
        <a href="" class="logo__item">
          <img src="/wp-content/uploads/zoll.png" alt="">
        </a>
      </div>
      <div class="column">
        <a href="" class="logo__item">
          <img src="/wp-content/uploads/zoll.png" alt="">
        </a>
      </div>
      <div class="column">
        <a href="" class="logo__item">
          <img src="/wp-content/uploads/zoll.png" alt="">
        </a>
      </div>
      <div class="column">
        <a href="" class="logo__item">
          <img src="/wp-content/uploads/zoll.png" alt="">
        </a>
      </div>
      <div class="column">
        <a href="" class="logo__item">
          <img src="/wp-content/uploads/zoll.png" alt="">
        </a>
      </div>
      <div class="column">
        <a href="" class="logo__item">
          <img src="/wp-content/uploads/zoll.png" alt="">
        </a>
      </div>
    </div>
  </div>
</section>