mpgilbertusa

<section>
    
    <div class="box caption outline-pad">
        <span data-picture data-alt="Alt text here, unless image is decorative.">
            <span data-src="http://placehold.it/700x200&text=Responsive+Image+(700+x+200)"></span>
            <span data-src="http://placehold.it/1000x300&text=Responsive+Image+(1000+x+300)" data-media="(min-width: 700px)"></span>
            <!--[if (lt IE 9) & (!IEMobile)]>
                <span data-src="http://placehold.it/1000x300&text=IE+Fallback+Image+(1000+x+300)"></span>
            <![endif]-->
            <!-- Fallback content for non-JS browsers. Same img src as above. -->

mpgilbertusa

<div class="show-hide">

    <h3 class="toggle">Collapsible Section</h3>

    <div class="body">
        <p>Insert show-hide content here.</p>
        <a href="javascript:;" class="close-section">Show Less ^</a>
    </div><!-- /.body -->

</div><!-- /.show-hide -->

mpgilbertusa

<script>
$(document).ready(function () {
    
    // collapsible content
    if ($('.show-hide').length > 0) {
        // Close by default
        $('.show-hide .body').hide();
        
        // Expand/collapse content when header is clicked
        $('.show-hide .toggle').click(function(e) {

mpgilbertusa

<div class="flexible-video">
  <iframe src="http://player.vimeo.com/video/50905661" width="700" height="394" frameborder="0" allowfullscreen></iframe>
</div>

mpgilbertusa

<script src="assets/js/jquery.fitvids.js"></script>

<script>
$(document).ready(function() {
  // flexible videos (fitVids)
  if ($('.flexible-video').length > 0) {
      $(".flexible-video").fitVids();
  }
});
</script>

mpgilbertusa

<table class="responsive" summary="This is a sample data table.">
    <thead>
        <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>

mpgilbertusa

<script src="assets/js/responsive-tables.js"></script>

mpgilbertusa

<link rel="stylesheet" href="assets/css/responsive-tables.css">

mpgilbertusa

<div class="slider">                                
    <div class="flexslider">
        <ul class="slides">
            <li><img src="assets/img/image-1.jpg"></li>
            <li><img src="assets/img/image-2.jpg"></li>
            <li><img src="assets/img/image-3.jpg"></li>
            <li><img src="assets/img/image-4.jpg"></li>
            <li><img src="assets/img/image-5.jpg"></li>
        </ul>
    </div>    

mpgilbertusa

<script src="assets/js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function() {
    // Flexslider responsive carousel - http://flexslider.woothemes.com/
    if ($(".flexslider").length > 0) {
        $(".flexslider").flexslider({
            animation: 'slide',
            animationLoop: true,
            slideshow: false,
            itemWidth: 320,