Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="main-container" class="main-container nav-effect-1">

  <nav class="nav-menu nav-effect-1" id="menu-1">
    <h2 class="">The Library</h2>
    <ul>
      <li><a class="" href="#">Checkout</a></li>
      <li><a class="" href="#">Return</a></li>
      <li><a class="" href="#">About</a></li>
      <li><a class="" href="#">Contact</a></li>
    </ul>
  </nav>

  <div class="main clearfix">

    <!-- Header Content -->
    <header id="header" class="page-header">
      <div class="page-header-container row">

        <!-- Logo -->
        <div class="main-logo">
          <a href="#" class="logo">The Library</a>
        </div>

        <div class="menu-search">
          <!-- Main Navigation -->
          <div class="main-navigation">
            <a href="#">Menu</a>
          </div>

          <!-- Search -->
          <div class="catalog-search">
            <input class="shuffle-search input_field " type="search" autocomplete="off" value="" maxlength="128" id="input-search" />
            <label class="input_label" for="input-search">
              <span class="input_label-content">Search Library</span>
              <span class="input_label-search"></span>
            </label>
          </div>

        </div>
      </div>
    </header>


    <!-- Main Section -->
    <div class="page-container">

      <div class="page-title category-title">
        <!-- <h1>Book Viewer</h1> -->
      </div>

      <section id="book_list">

        <div class="toolbar row">
          <div class="filter-options small-12 medium-9 columns">
            <a href="#" class="filter-item active" data-group="all">All Categories</a>
            <a href="#" class="filter-item" data-group="fantasy">Fantasy</a>
            <a href="#" class="filter-item" data-group="sci-fi">Sci-Fi</a>
            <a href="#" class="filter-item" data-group="classic">Classics</a>
            <a href="#" class="filter-item" data-group="fairy">Fairy Tale</a>
            <a href="#" class="filter-item" data-group="young">Young Adult</a>
          </div>

          <div class="small-12 medium-3 columns">
            <select class="sort-options">
            <option value="" disabled selected>Sort by</option>
            <option value="" >Featured</option>
            <option value="title">Alphabetical</option>
            <option value="date-created">Published</option>
            </select>
          </div>
        </div>

        <div class="grid-shuffle">
          <ul id="grid" class="row">

            <li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1937' data-title='Of Mice and Men' data-color='#fcc278'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_1-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Of Mice and Men</h3>
                <p class="author">by John Steinbeck &bull; 1937</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_1-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Of Mice and Men</h2>
                  <p class="author">by John Steinbeck</p>
                  <p class="published">1937</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","young"]' data-date-created='1951' data-title='The Catcher in the Rye' data-color='#009c8b'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_2-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">The Catcher in the Rye</h3>
                <p class="author">by J.D. Salinger &bull; 1951</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_2-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">The Catcher in the Rye</h2>
                  <p class="author">by J.D. Salinger</p>
                  <p class="published">1951</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","sci-fi"]' data-date-created='1949' data-title='1984' data-color='#9c9688'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_3-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">1984</h3>
                <p class="author">by George Orwell &bull; 1949</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_3-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">1984</h2>
                  <p class="author">by George Orwell</p>
                  <p class="published">1949</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","young"]' data-date-created='1954' data-title='Lord of the Flies' data-color='#db2e0f'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_4-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Lord of the Flies</h3>
                <p class="author">by William Golding &bull; 1954</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_4-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Lord of the Flies</h2>
                  <p class="author">by William Golding</p>
                  <p class="published">1954</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1925' data-title='The Great Gatsby' data-color='#e3b005'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_5-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">The Great Gatsby</h3>
                <p class="author">by F. Scott Fitzgerald &bull; 1925</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_5-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">The Great Gatsby</h2>
                  <p class="author">by F. Scott Fitzgerald</p>
                  <p class="published">1925</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1851' data-title='Moby Dick' data-color='#a9afad'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_6-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Moby Dick</h3>
                <p class="author">by Herman Melville &bull; 1851</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_6-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Moby Dick</h2>
                  <p class="author">by Herman Melville</p>
                  <p class="published">1851</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","sci-fi"]' data-date-created='1962' data-title='A Clockwork Orange' data-color='#fe7b21'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_7-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">A Clockwork Orange</h3>
                <p class="author">by Anthony Burgess &bull; 1962</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_7-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">A Clockwork Orange</h2>
                  <p class="author">by Anthony Burgess</p>
                  <p class="published">1962</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1835' data-title='The Princess and the Pea' data-color='#aea98c'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_8-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">The Princess and the Pea</h3>
                <p class="author">by Hans Christian Andersen &bull; 1835</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_8-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">The Princess and the Pea</h2>
                  <p class="author">by Hans Christian Andersen</p>
                  <p class="published">1835</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1900' data-title='The Wonderful Wizard of Oz' data-color='#705e1e'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_9-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">The Wonderful Wizard of Oz</h3>
                <p class="author">by L. Frank Baum &bull; 1900</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_9-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">The Wonderful Wizard of Oz</h2>
                  <p class="author">by L. Frank Baum</p>
                  <p class="published">1900</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1934' data-title='Mary Poppins' data-color='#939894'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_10-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Mary Poppins</h3>
                <p class="author">by P.L. Travers &bull; 1934</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_10-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Mary Poppins</h2>
                  <p class="author">by P.L. Travers</p>
                  <p class="published">1934</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1740' data-title='Beauty and the Beast' data-color='#b4aa91'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_11-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Beauty and the Beast</h3>
                <p class="author">by Gabrielle-Suzanne Barbot de Villeneuve &bull; 1740</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_11-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Beauty and the Beast</h2>
                  <p class="author">by Gabrielle-Suzanne Barbot de Villeneuve</p>
                  <p class="published">1740</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1812' data-title='Rapunzel' data-color='#725d64'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_12-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Rapunzel</h3>
                <p class="author">by Friedrich Schulz &bull; 1812</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_12-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Rapunzel</h2>
                  <p class="author">by Friedrich Schulz</p>
                  <p class="published">1812</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='1997' data-title="Harry Potter and the Sorcerer's Stone" data-color='#7a4930'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_13-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Sorcerer's Stone</h3>
                <p class="author">by J.K. Rowling &bull; 1997</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_13-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Sorcerer's Stone</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">1997</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='1998' data-title='Harry Potter and the Chamber of Secrets' data-color='#800020'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_14-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Chamber of Secrets</h3>
                <p class="author">by J.K. Rowling &bull; 1998</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_14-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Chamber of Secrets</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">1998</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='1999' data-title="Harry Potter and the Prisoner of Azkaban" data-color='#603060'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_15-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Prisoner of Azkaban</h3>
                <p class="author">by J.K. Rowling &bull; 1999</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_15-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Prisoner of Azkaban</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">1999</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2000' data-title="Harry Potter and the Goblet of Fire" data-color='#9a9c43'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_16-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Goblet of Fire</h3>
                <p class="author">by J.K. Rowling &bull; 2000</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_16-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Goblet of Fire</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">2000</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2003' data-title="Harry Potter and the Order of the Phoenix" data-color='#2c63a0'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_17-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Order of the Phoenix</h3>
                <p class="author">by J.K. Rowling &bull; 2003</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_17-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Order of the Phoenix</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">2003</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2005' data-title="Harry Potter and the Half-Blood Prince" data-color='#658539'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_18-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Half-Blood Prince</h3>
                <p class="author">by J.K. Rowling &bull; 2005</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_18-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Half-Blood Prince</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">2005</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

            <li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2007' data-title="Harry Potter and the Deathly Hallows" data-color='#b06010'>
              <div class="bk-img">
                <div class="bk-wrapper">
                  <div class="bk-book bk-bookdefault">
                    <div class="bk-front">
                      <div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_19-small.jpg')"></div>
                    </div>
                    <div class="bk-back"></div>
                    <div class="bk-left"></div>
                  </div>
                </div>
              </div>
              <div class="item-details">
                <h3 class="book-item_title">Harry Potter and the Deathly Hallows</h3>
                <p class="author">by J.K. Rowling &bull; 2007</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
                <a href="#" class="button ">Details</a>
              </div>

              <div class="overlay-details">
                <a href="#" class="close-overlay-btn">Close</a>
                <div class="overlay-image">
                  <img src="http://interactivejoe.com/book-viewer/assets/images/bk_19-large.jpg" alt="Book Cover">
                  <div class="back-color"></div>
                </div>
                <div class="overlay-desc activated">
                  <h2 class="overlay_title">Harry Potter and the Deathly Hallows</h2>
                  <p class="author">by J.K. Rowling</p>
                  <p class="published">2007</p>
                  <p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
                    non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                  <a href="#" class="button preview">Preview</a>
                </div>
                <div class="overlay-preview">
                  <a href="#" class="back-preview-btn">Back</a>
                  <h4 class="preview-title">Preview</h4>
                  <div class="preview-content">
                    <h5>Chapter 1</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
                      mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
                  </div>
                </div>
              </div>
            </li>

          </ul>
        </div>

      </section>

    </div>

    <!-- Footer Content -->
    <footer id="footer" class="page-footer">
      <div class="row footer-wrapper">
        <div class="original-version small-12 columns"><a href="http://interactivejoe.com/book-viewer/" target="_blank"><em>Original Version can be found here.</em></a></div>
        <div class="copyright small-12 columns">&copy; 2016 - <a href="http://interactivejoe.com/"  target="_blank">InteractiveJoe</a></div>
      </div>
    </footer>

  </div>
  <!-- /main -->

  <div class="main-overlay">
    <div class="overlay-full"></div>
  </div>

</div>
<!-- /main-container -->
              
            
!

CSS

              
                /*
 *  Imports
*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');

/*
 *  Variables
*/

$global-width: 1024px;
// Colors
$library-palette: ( primary: #219e9a,
);
$primary: #219e9a;
$light-gray: #ecf0f1;
$medium-gray: #d2d6d5;
$dark-gray: #313131;
$black: #000;
$white: #fff;
// Typography
$body-font-family: 'Lato',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;

/* Single Line truncation */

@mixin truncate() {
  // width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Multiline truncation */

@mixin multi-truncate($font-size: 15px,
$line-height: 1.4,
$lines-to-show: 3) {
  display: block;
  display: -webkit-box;
  height: $font-size * $line-height * $lines-to-show;
  /* Fallback for non-webkit */
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*
 *  Global styles
*/

html,
body,
.main,
.main-container {
  height: 100%;
}

body {
  font-family: $body-font-family;
  color: $dark-gray;
  background: $light-gray;
}

.row {
  max-width: $global-width;
}


/*
 *  Typography
*/

body,
p,
a,
li {
  font-family: $body-font-family;
  font-size: 15px;
}

a {
  color: $primary;
}

h2,
h3 {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: -1px;
  color: $dark-gray;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 40px;
  color: rgba($dark-gray, 0.7);
}

p:not(.author) {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
}

p.author {
  margin-bottom: 10px;
  letter-spacing: -1px;
  font-weight: 400;
  color: rgba($dark-gray, 0.5);
}


/*
 *  Button
*/

a.button {
  margin-bottom: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  background-color: rgba($dark-gray, 0.5);
  &:hover,
  &:focus {
    background-color: $primary;
  }
}


/*
 *  Header
*/

.page-header {
  position: relative;
  margin-bottom: 55px;
  width: 100%;
  border-bottom: 1px solid $medium-gray;
  background-color: $white;
}

.main-logo {
  display: inline-block;
  padding: 1em;
  width: auto;
  a.logo {
    display: block;
    width: 150px;
    height: 40px;
    text-indent: -9999px;
    background: url("http://interactivejoe.com/book-viewer/assets/images/logo.svg");
    background-color: $white;
    transition: background-color 250ms ease-out;
    &:hover,
    &:focus {
      background-color: $light-gray;
    }
  }
}

.menu-search {
  float: right;
  width: calc(100% - 200px);
}


/*
 *  Search Input
*/

.catalog-search {
  position: relative;
  // z-index: 1;
  // display: inline-block;
  margin: 0 20px;
  max-width: 275px;
  width: calc(100% - 2em);
  vertical-align: top;
  overflow: hidden;
  float: right;
}

.input_field {
  position: relative;
  display: block;
  float: right;
  margin-top: 10px;
  padding: 14px 7px 0;
  width: 100%;
  border: none;
  border-radius: 0;
  color: $dark-gray;
  font-weight: normal;
  font-family: $body-font-family;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
  /* for box shadows to show on iOS */
  &:focus {
    outline: none;
    border: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    .input_label-content {
      bottom: 20px;
    }
  }
}

.input_label {
  position: absolute;
  display: inline-block;
  bottom: 0;
  left: 0;
  padding: 0 0.25em;
  width: 100%;
  height: calc(100% - 1em);
  color: $medium-gray;
  font-weight: light;
  font-size: 15px;
  text-align: left;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  user-select: none;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 10px);
    border-bottom: 1px solid rgba($dark-gray, 0.45);
  }
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 2px;
    width: 100%;
    height: calc(100% - 10px);
    border-bottom: 3px solid $primary;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.3s;
  }
}

.input_label-content {
  position: absolute;
  width: 100%;
  bottom: 14px;
}

.input_label-search {
  position: relative;
  display: block;
  color: rgba($dark-gray, 0.45);
  &:after {
    content: '\f002';
    position: absolute;
    top: 7px;
    right: 5px;
    font-family: 'fontawesome';
  }
}

.input_field:focus + .input_label::after,
.input--filled .input_label::after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.input_field:focus + .input_label .input_label-content,
.input--filled .input_label-content {
  -webkit-animation: anim-1 0.3s forwards;
  animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(1em, 0, 0);
    transform: translate3d(1em, 0, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(-1em, -40%, 0);
    transform: translate3d(-1em, -40%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
}

@keyframes anim-1 {
  50% {
    opacity: 0;
    bottom: 24px;
    -webkit-transform: translate3d(5em, 0, 0);
    transform: translate3d(5em, 0, 0);
  }
  51% {
    opacity: 0;
    bottom: 24px;
    -webkit-transform: translate3d(-5em, -40%, 0);
    transform: translate3d(-5em, -40%, 0);
  }
  100% {
    opacity: 1;
    bottom: 24px;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
}


/*
 *  Menu
*/

.main-navigation {
  position: relative;
  float: right;
  margin: 16px 0;
  padding: 0 20px;
  height: 40px;
  border-left: 1px solid $medium-gray;
  a {
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: $dark-gray;
    &:before {
      content: '\f0c9';
      position: relative;
      display: inline-block;
      padding-right: 10px;
      font-family: "fontawesome";
      font-size: 18px;
      font-weight: 400;
      color: rgba($dark-gray, 0.45);
      vertical-align: middle;
    }
  }
}


/*
 *  Off Canvas Menu
*/

.main-container {
  position: relative;
  overflow-x: hidden;
  &.prevent-scroll,
  &.nav-menu-open {
    overflow: hidden;
  }
}

// Offcanvas Menu
.nav-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  visibility: visible;
  width: 300px;
  height: 100%;
  background: $primary;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  &:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    display: none;
  }
  h2 {
    margin: 0;
    padding: 1em;
    color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    font-weight: 300;
    font-size: 2em;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  li {
    a {
      display: block;
      padding: 1em 1em 1em 1.2em;
      outline: none;
      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
      color: #f3efe0;
      text-transform: uppercase;
      text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
      letter-spacing: 1px;
      font-weight: 400;
      -webkit-transition: background 0.3s, box-shadow 0.3s;
      transition: background 0.3s, box-shadow 0.3s;
    }
    &:first-child {
      a {
        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
      }
    }
    &:hover {
      background: rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
      color: #fff;
    }
  }
}

// If menu OPEN
.nav-menu-open {
  .nav-menu {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    &:after {
      width: 0;
      height: 0;
      opacity: 0;
      -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
      transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }
  }
}


/*
 *  book List
*/

// Filterable
.toolbar {
  margin-bottom: 30px;
  // max-width: 960px;
  border-bottom: 1px solid $medium-gray;
  select {
    margin-bottom: 7px;
    color: $dark-gray;
    font-size: 14px;
    border: none;
    // border-bottom: 1px solid rgba($dark-gray, 0.45);
    background-color: transparent;
  }
  .filter-options {
    line-height: 40px;
  }
  a.filter-item {
    margin-right: 16px;
    padding-bottom: 18px;
    font-size: 14px;
    color: $dark-gray;
    border-bottom: 0px solid transparent;
    transition: all 250ms ease-out;
    &:last-child {
      margin-right: 0;
    }
    &.active {
      padding-bottom: 15px;
      color: $primary;
      font-weight: bold;
      border-bottom: 3px solid $primary;
    }
  }
}

// List Items
#grid {
  margin-bottom: 60px;
}

.book-item {
  margin: 15px 0;
  padding: 15px;
  list-style-type: none;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 15px;
    width: calc(100% - 105px);
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 0 0 0 transparent;
    background-color: rgba($white, 0);
    z-index: -1;
    transition: all 250ms ease-out;
  }
  &:hover {
    &:after {
      box-shadow: 0px 1px 1px 1px rgba($medium-gray, 0.5);
      background-color: $white;
    }
    .item-img {
      img {
        box-shadow: 0px 0px 10px 0px rgba($dark-gray, 0.25);
      }
    }
    a.button {
      background-color: $primary;
    }
    .bk-bookdefault {
      -webkit-transform: rotate3d(0, 1, 0, 25deg);
      transform: rotate3d(0, 1, 0, 25deg);
    }
    .bk-back {
      opacity: 1;
    }
  }
  .item-img {
    display: inline-block;
    float: left;
    padding-right: 30px;
    img {
      box-shadow: 0 0 0 0 transparent;
      transition: all 250ms ease-out;
    }
  }
  .item-details {
    padding-right: 30px;
  }
  h3 {
    @include truncate;
  }
  p:not(.author) {
    @include multi-truncate;
  }
}


/*
 *  Book Rotate
*/

.bk-img {
  position: relative;
  display: inline-block;
  float: left;
  padding-right: 30px;
  list-style: none;
  .bk-wrapper {
    position: relative;
    width: 150px;
    height: 215px;
    float: left;
    z-index: 1;
    -webkit-perspective: 1400px;
    perspective: 1400px;
    &:last-child {
      margin-right: 0;
    }
  }
  .bk-book {
    position: absolute;
    width: 100%;
    height: 215px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
  }
  .bk-book > div,
  .bk-front > div {
    display: block;
    position: absolute;
  }
  .bk-front {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    -webkit-transform: translate3d(0, 0, 20px);
    transform: translate3d(0, 0, 20px);
    z-index: 10;
    > div {
      z-index: 1;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      border-radius: 0 3px 3px 0;
      box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
    }
    &:after {
      content: '';
      position: absolute;
      top: 1px;
      bottom: 1px;
      left: -1px;
      width: 1px;
    }
  }
  .bk-front,
  .bk-back,
  .bk-front > div {
    width: 150px;
    height: 215px;
  }
  .bk-left,
  .bk-right {
    width: 40px;
    left: -20px;
  }
  .bk-back {
    -webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
    transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
    box-shadow: 5px 7px 15px rgba(0, 0, 0, 0.3);
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity 250ms ease-out;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 10px;
      bottom: 0;
      width: 3px;
      background: rgba(0, 0, 0, 0.06);
      box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
    }
  }
  .bk-left {
    height: 215px;
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
    transform: rotate3d(0, 1, 0, -90deg);
    h2 {
      width: 215px;
      height: 40px;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: rotate(90deg) translateY(-40px);
      transform: rotate(90deg) translateY(-40px);
    }
  }
  .bk-cover {
    /*background-image: url(../images/1.png);*/
    background-repeat: no-repeat;
    background-position: 10px 40px;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 10px;
      bottom: 0;
      width: 3px;
      background: rgba(0, 0, 0, 0.06);
      box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
    }
  }
  /* Individual style & artwork */
  .bk-cover {
    background-repeat: no-repeat;
    background-position: top left !important;
  }
  .bk-front > div,
  .bk-left {
    background-color: $primary;
  }
}


/*
 *  Lightbox
*/

.main-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba($dark-gray, 0.65);
  .overlay-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .overlay-details {
    position: absolute;
    display: block;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 800px;
    max-height: 480px;
    padding: 40px;
    overflow: hidden;
    border-radius: 3px;
    background-color: $white;
    box-shadow: 0px 2px 1px 2px rgba($black, 0.3);
    transform: translate(-50%, -50%);
  }
  .overlay-image {
    // position: relative;
    display: inline-block;
    margin-right: 30px;
    max-width: 275px;
    vertical-align: top;
    img {
      position: relative;
      display: inline-block;
      z-index: 1;
      box-shadow: -12px 12px 15px -5px rgba(0, 0, 0, 0.3);
    }
    .back-color {
      position: absolute;
      top: 0;
      left: 0;
      width: 275px;
      height: 100%;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      background-color: green;
    }
  }
  .close-overlay-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    opacity: 0.3;
    text-indent: -9999px;
    transition: opacity 250ms ease-out;
    &:hover {
      opacity: 1;
    }
    &:before {
      content: ' ';
      position: absolute;
      left: 15px;
      width: 2px;
      height: 33px;
      background-color: $dark-gray;
    }
    &:after {
      content: ' ';
      position: absolute;
      left: 15px;
      width: 2px;
      height: 33px;
      background-color: $dark-gray;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
  .back-preview-btn {
    position: absolute;
    top: 7px;
    left: -34px;
    // top: 15px;
    // left: 15px;
    width: 30px;
    height: 30px;
    opacity: 0.3;
    text-indent: -9999px;
    transition: opacity 250ms ease-out;
    &:hover {
      opacity: 1;
    }
    &:before {
      content: ' ';
      position: absolute;
      left: 15px;
      width: 2px;
      height: 15px;
      background-color: $dark-gray;
    }
    &:after {
      content: ' ';
      position: absolute;
      top: 10px;
      left: 15px;
      width: 2px;
      height: 15px;
      background-color: $dark-gray;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
  .overlay-desc {
    display: inline-block;
    margin-top: -400px;
    width: calc(100% - 320px);
    vertical-align: top;
    transition: all 500ms ease-out;
    &.activated {
      display: inline-block;
      margin-top: 0;
    }
  }
  .overlay-preview {
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 40px;
    width: calc(100% - 310px);
    vertical-align: top;
    transition: all 500ms ease-out;
    &.activated {
      margin-top: -430px;
    }
  }
  .preview-content {
    // position: relative;
    padding-right: 24px;
    padding-top: 10px;
    @include multi-truncate(15px,
    1.5,
    16);
    overflow: scroll;
    text-overflow: clip;
    font-weight: 400;
    h5,
    p {
      font-family: 'Roboto Slab', serif;
    }
    h5 {
      font-weight: bold;
    }
    p {
      font-weight: normal;
    }
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 40px;
      width: 100%;
      height: 30px;
      background: rgba(255, 255, 255, 0);
      background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 80%);
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: rgba(255, 255, 255, 0);
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 80%);
    }
  }
}

// Lightbox details for book item
.overlay-details {
  display: none;
}


/*
 *  Footer
*/

#footer {
  margin-top: 60px;
  padding: 15px 0 20px;
  border-top: 1px solid $white;
  background-color: rgba($dark-gray, 0.5);
  div,
  a,
  p {
    color: $white;
    font-size: 12px;
    text-align: center;
  }
}
              
            
!

JS

              
                // Get Color Attribute
// Set the background book color
$("li.book-item").each(function() {
  var $this = $(this);

  $this.find(".bk-front > div").css('background-color', $(this).data("color"));
  $this.find(".bk-left").css('background-color', $(this).data("color"));
  $this.find(".back-color").css('background-color', $(this).data("color"));

  $this.find(".item-details a.button").on('click', function() {
    displayBookDetails($this);
  });
});

function displayBookDetails(el) {
  var $this = $(el);
  $('.main-container').addClass('prevent-scroll');
  $('.main-overlay').fadeIn();

  $this.find('.overlay-details').clone().prependTo('.main-overlay');

  $('a.close-overlay-btn').on('click', function(e) {
    e.preventDefault();
    $('.main-container').removeClass('prevent-scroll');
    $('.main-overlay').fadeOut();
    $('.main-overlay').find('.overlay-details').remove();
  });

  $('.main-overlay a.preview').on('click', function() {
    $('.main-overlay .overlay-desc').toggleClass('activated');
    $('.main-overlay .overlay-preview').toggleClass('activated');
  });

  $('.main-overlay a.back-preview-btn').on('click', function() {
    $('.main-overlay .overlay-desc').toggleClass('activated');
    $('.main-overlay .overlay-preview').toggleClass('activated');
  });
}

/*
 *  Offcanvas Menu
 */
// Open Offcanvas Menu
$('.main-navigation a').on('click', function() {
  $('.main-container').addClass('nav-menu-open');
  $('.main-overlay').fadeIn();
});

// Close Offcanvas Menu
$('.overlay-full').on('click', function() {
  $('.main-container').removeClass('nav-menu-open');
  $('.main-container').removeClass('prevent-scroll');
  $(this).parent().fadeOut();
  $(this).parent().find('.overlay-details').remove();
});

/*
 *  Shuffle.js for Search, Catagory filter and Sort
 */

// Initiate Shuffle.js
var Shuffle = window.shuffle;

var bookList = function(element) {
  this.element = element;

  this.shuffle = new Shuffle(element, {
    itemSelector: '.book-item',
  });

  this._activeFilters = [];
  this.addFilterButtons();
  this.addSorting();
  this.addSearchFilter();
  this.mode = 'exclusive';
};

bookList.prototype.toArray = function(arrayLike) {
  return Array.prototype.slice.call(arrayLike);
};

// Catagory Filter Functions
// Toggle mode for the Catagory filters
bookList.prototype.toggleMode = function() {
  if (this.mode === 'additive') {
    this.mode = 'exclusive';
  } else {
    this.mode = 'additive';
  }
};

// Filter buttons eventlisteners
bookList.prototype.addFilterButtons = function() {
  var options = document.querySelector('.filter-options');
  if (!options) {
    return;
  }
  var filterButtons = this.toArray(options.children);

  filterButtons.forEach(function(button) {
    button.addEventListener('click', this._handleFilterClick.bind(this), false);
  }, this);
};

// Function for the Catagory Filter
bookList.prototype._handleFilterClick = function(evt) {
  var btn = evt.currentTarget;
  var isActive = btn.classList.contains('active');
  var btnGroup = btn.getAttribute('data-group');

  if (this.mode === 'additive') {
    if (isActive) {
      this._activeFilters.splice(this._activeFilters.indexOf(btnGroup));
    } else {
      this._activeFilters.push(btnGroup);
    }

    btn.classList.toggle('active');
    this.shuffle.filter(this._activeFilters);

  } else {
    this._removeActiveClassFromChildren(btn.parentNode);

    var filterGroup;
    if (isActive) {
      btn.classList.remove('active');
      filterGroup = Shuffle.ALL_ITEMS;
    } else {
      btn.classList.add('active');
      filterGroup = btnGroup;
    }

    this.shuffle.filter(filterGroup);
  }
};

// Remove classes for active states
bookList.prototype._removeActiveClassFromChildren = function(parent) {
  var children = parent.children;
  for (var i = children.length - 1; i >= 0; i--) {
    children[i].classList.remove('active');
  }
};

// Sort By
// Watching for the select box to change to run
bookList.prototype.addSorting = function() {
  var menu = document.querySelector('.sort-options');
  if (!menu) {
    return;
  }
  menu.addEventListener('change', this._handleSortChange.bind(this));
};

// Sort By function Handler runs on change
bookList.prototype._handleSortChange = function(evt) {
  var value = evt.target.value;
  var options = {};

  function sortByDate(element) {
    return element.getAttribute('data-created');
  }

  function sortByTitle(element) {
    return element.getAttribute('data-title').toLowerCase();
  }

  if (value === 'date-created') {
    options = {
      reverse: true,
      by: sortByDate,
    };
  } else if (value === 'title') {
    options = {
      by: sortByTitle,
    };
  }

  this.shuffle.sort(options);
};

// Searching the Data-attribute Title
// Advanced filtering
// Waiting for input into the search field
bookList.prototype.addSearchFilter = function() {
  var searchInput = document.querySelector('.shuffle-search');
  if (!searchInput) {
    return;
  }
  searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};

// Search function Handler to search list
bookList.prototype._handleSearchKeyup = function(evt) {
  var searchInput = document.querySelector('.shuffle-search');
  var searchText = evt.target.value.toLowerCase();

  // Check if Search input has value to toggle class
  if (searchInput && searchInput.value) {
    $('.catalog-search').addClass('input--filled');
  } else {
    $('.catalog-search').removeClass('input--filled');
  }

  this.shuffle.filter(function(element, shuffle) {

    // If there is a current filter applied, ignore elements that don't match it.
    if (shuffle.group !== Shuffle.ALL_ITEMS) {
      // Get the item's groups.
      var groups = JSON.parse(element.getAttribute('data-groups'));
      var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;

      // Only search elements in the current group
      if (!isElementInCurrentGroup) {
        return false;
      }
    }

    var titleElement = element.querySelector('.book-item_title');
    var titleText = titleElement.textContent.toLowerCase().trim();

    return titleText.indexOf(searchText) !== -1;
  });
};

// Wait till dom load to start the Shuffle js funtionality
document.addEventListener('DOMContentLoaded', function() {
  window.book_list = new bookList(document.getElementById('grid'));
});
              
            
!
999px

Console