Desktop:
Mobile:
<div class="events-block">
<div class="heading">
<h1>Events</h1>
</div>
<div class="two-columns-block">
<aside class="sidebar">
<div class="calendar-block">
<div class="datepicker"></div>
</div>
<div class="block">
<h2>Categories</h2>
<ul class="categories-list">
<li>
<label>
<input class="checkbox-all" title="All" type="checkbox">
<span>All</span>
</label>
</li>
<li>
<label>
<input class="opener" title="Aquatics" type="checkbox">
<span>Aquatics</span>
</label>
<div class="drop-list">
<ul>
<li>
<label>
<input title="Sub Category 01" type="checkbox">
<span>Sub Category 01</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 02" type="checkbox">
<span>Sub Category 02</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 03" type="checkbox">
<span>Sub Category 03</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 04" type="checkbox">
<span>Sub Category 04</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 05" type="checkbox">
<span>Sub Category 05</span>
</label>
</li>
</ul>
</div>
</li>
<li>
<label>
<input class="opener" title="Deployed Forces Support" type="checkbox">
<span>Deployed Forces Support</span>
</label>
<div class="drop-list">
<ul>
<li>
<label>
<input title="Sub Category 01" type="checkbox">
<span>Sub Category 01</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 02" type="checkbox">
<span>Sub Category 02</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 03" type="checkbox">
<span>Sub Category 03</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 04" type="checkbox">
<span>Sub Category 04</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 05" type="checkbox">
<span>Sub Category 05</span>
</label>
</li>
</ul>
</div>
</li>
<li>
<label>
<input class="opener" title="Fitness and Sports" type="checkbox">
<span>Fitness & Sports</span>
</label>
<div class="drop-list">
<ul>
<li>
<label>
<input title="Sub Category 01" type="checkbox">
<span>Sub Category 01</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 02" type="checkbox">
<span>Sub Category 02</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 03" type="checkbox">
<span>Sub Category 03</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 04" type="checkbox">
<span>Sub Category 04</span>
</label>
</li>
<li>
<label>
<input title="Sub Category 05" type="checkbox">
<span>Sub Category 05</span>
</label>
</li>
</ul>
</div>
</li>
<li>
<label>
<input title="Fleet and Family Support" type="checkbox">
<span>Fleet & Family Support</span>
</label>
</li>
<li>
<label>
<input title="Food, Beverage and Entertainment" type="checkbox">
<span>Food, Beverage & Entertainment</span>
</label>
</li>
<li>
<label>
<input title="Indoor Recreation" type="checkbox">
<span>Indoor Recreation</span>
</label>
</li>
<li>
<label>
<input title="Outdoor Recreation" type="checkbox">
<span>Outdoor Recreation</span>
</label>
</li>
<li>
<label>
<input title="Youth and Teens" type="checkbox">
<span>Youth & Teens</span>
</label>
</li>
</ul>
<div class="btn-holder">
<a href="#" class="btn">export</a>
</div>
</div>
</aside>
<section class="content">
<div class="loading-block">
<div class="loading-holder">
<div class="events-box open-close active">
<h2><a class="opener" href="#">Multi Day Events</a></h2>
<div class="slide">
<table class="events-table">
<caption class="hidden">events table</caption>
<tr>
<td><strong class="label">Multi-day</strong></td>
<td class="description">
<h3><a href="#">Multi-Day Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
<td class="date"><span>Mar 1 - Mar 31</span></td>
</tr>
<tr>
<td><strong class="label">Multi-day</strong></td>
<td class="description">
<h3><a href="#">Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb</a></h3>
<p>Building 123 Center Complex</p>
</td>
<td class="date"><span>Mar 1 - Mar 31</span></td>
</tr>
</table>
</div>
</div>
<div class="events-box">
<h2>Tuesday, March 10, 2015</h2>
<table class="events-table">
<caption class="hidden">events table</caption>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
<div class="events-area open-close">
<strong class="title">This Event repeats every week on Tuesday</strong>
<ul>
<li>Tue Mar 17 12:00PM</li>
<li>Tue Mar 24 12:00PM</li>
<li>Tue Mar 31 12:00PM</li>
</ul>
<div class="slide">
<ul>
<li>Tue Mar 17 12:00PM</li>
<li>Tue Mar 24 12:00PM</li>
<li>Tue Mar 31 12:00PM</li>
</ul>
</div>
<a class="more events-opener" href="#"><em>More Events</em><em class="less">Less Events</em></a>
</div>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
</table>
</div>
<div class="events-box">
<h2>Tuesday, March 10, 2015</h2>
<table class="events-table">
<caption class="hidden">events table</caption>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
<div class="events-area open-close">
<strong class="title">This Event repeats every week on Tuesday</strong>
<ul>
<li>Tue Mar 17 12:00PM</li>
<li>Tue Mar 24 12:00PM</li>
<li>Tue Mar 31 12:00PM</li>
</ul>
<div class="slide">
<ul>
<li>Tue Mar 17 12:00PM</li>
<li>Tue Mar 24 12:00PM</li>
<li>Tue Mar 31 12:00PM</li>
</ul>
</div>
<a class="more events-opener" href="#"><em>More Events</em><em class="less">Less Events</em></a>
</div>
</td>
</tr>
<tr>
<td><span>12:00pm</span></td>
<td class="description">
<h3><a href="#">Event/Class Title Here</a></h3>
<p>Building 123 Center Complex</p>
</td>
</tr>
</table>
</div>
</div>
<div class="load-box">
<a href="inc/events1.html" class="load-more more-link">load more</a>
</div>
</div>
</section>
</div>
</div>