diff --git a/demos/components.html b/demos/components.html
index a8a682d..06f9d7e 100644
--- a/demos/components.html
+++ b/demos/components.html
@@ -2663,10 +2663,10 @@
             </h3>
             <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
             <pre>&lt;section&gt;
-	&lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+  &lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
             <p>
               <svg class="fa-info">
@@ -2682,11 +2682,11 @@
           <div class="wrap size-50">
             <h1 class="text-landing text-shadow">Opacity</h1>
             <p><code>[class*="bg-"] > .background.light</code></p>
-            <pre>&lt;section class="bg-black"&gt;
-	&lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+            <pre>&lt;section&gt;
+  &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
           </div>
         </section>
@@ -2695,11 +2695,11 @@
           <div class="wrap size-50">
             <h1 class="text-landing text-shadow">Opacity</h1>
             <p><code>[class*="bg-"] > .background.dark</code></p>
-            <pre>&lt;section class="bg-black"&gt;
-	&lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+            <pre>&lt;section&gt;
+  &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
           </div>
         </section>
@@ -2804,6 +2804,8 @@
         </section>
         <section class="bg-black aligncenter">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/MDGpwpMY2Ws/')"></span>
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
           <div class="wrap">
             <h2>Embedding Media</h2>
             <p>Videos, charts, maps...</p>
diff --git a/demos/interviews.html b/demos/interviews.html
index 4d590f5..e00eec4 100644
--- a/demos/interviews.html
+++ b/demos/interviews.html
@@ -294,27 +294,27 @@
           <div class="column">
             <h3>Company</h3>
             <ul>
-              <li><a href="">About</a></li>
-              <li><a href="">Team</a></li>
-              <li><a href="">Blog</a></li>
+              <li><a href="#">About</a></li>
+              <li><a href="#">Team</a></li>
+              <li><a href="#">Blog</a></li>
             </ul>
           </div>
           <!-- .end .column -->
           <div class="column">
             <h3>Support</h3>
             <ul>
-              <li><a href="">Shipping &amp; Returns</a></li>
-              <li><a href="">FAQ</a></li>
-              <li><a href="">Contact</a></li>
+              <li><a href="#">Shipping &amp; Returns</a></li>
+              <li><a href="#">FAQ</a></li>
+              <li><a href="#">Contact</a></li>
             </ul>
           </div>
           <!-- .end .column -->
           <div class="column">
             <h3>Legal</h3>
             <ul>
-              <li><a href="">Terms of Service</a></li>
-              <li><a href="">Privacy Policy</a></li>
-              <li><a href="">Cookies</a></li>
+              <li><a href="#">Terms of Service</a></li>
+              <li><a href="#">Privacy Policy</a></li>
+              <li><a href="#">Cookies</a></li>
             </ul>
           </div>
           <!-- .end .column -->
@@ -322,7 +322,7 @@
             <h3>Community</h3>
             <ul>
               <li>
-                <a href="">
+                <a href="#">
                   <svg class="fa-facebook">
                     <use xlink:href="#fa-facebook"></use>
                   </svg>
@@ -330,7 +330,7 @@
                 </a>
               </li>
               <li>
-                <a href="">
+                <a href="#">
                   <svg class="fa-youtube">
                     <use xlink:href="#fa-youtube"></use>
                   </svg>
@@ -338,7 +338,7 @@
                 </a>
               </li>
               <li>
-                <a href="">
+                <a href="#">
                   <svg class="fa-twitter">
                     <use xlink:href="#fa-twitter"></use>
                   </svg>
diff --git a/demos/longforms.html b/demos/longforms.html
index fde1326..366f62b 100644
--- a/demos/longforms.html
+++ b/demos/longforms.html
@@ -195,7 +195,25 @@
               </figcaption>
             </figure>
             <p>When the sun is well above the horizon, direct scattering of sunlight (Rayleigh scattering) is the overwhelmingly dominant source of light. However, in twilight, the period of time between sunset and night and between night and sunrise, the situation is more complicated.</p>
-            <hr>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-80">
+            <h3><strong>Building a platform for storytelling</strong></h3>
+            <p><code>.text-cols (2 columns)</code>.</p>
+            <div class="text-cols">
+              <p>The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories.</p>
+              <p>Human knowledge is based on stories and the human brain consists of cognitive machinery necessary to understand, remember and tell stories.</p>
+              <p>Humans are storytelling organisms that both individually and socially, lead storied lives. Stories mirror human thought as humans think in narrative structures and most often remember facts in story form. </p>
+              <p>Facts can be understood as smaller versions of a larger story, thus storytelling can supplement analytical thinking. Because storytelling requires auditory and visual senses from listeners, one can learn to organize their mental representation of a story, recognize structure of language and express his or her thoughts.</p>
+              <h4><strong>Stories with karma</strong></h4>
+              <p>For many multi-media communication complex institutions, communicating by using storytelling techniques can be a more compelling and effective route of delivering information than that of using only dry facts. Uses include:</p>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <div class="wrap longform">
             <h1>Heading one</h1>
             <h2>Heading two</h2>
             <h3>Heading three</h3>
@@ -283,7 +301,7 @@
             <p>Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.</p>
             <p>A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.</p>
             <blockquote class="text-quote">
-              <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place. </p>
+              <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place.</p>
               <p><cite>Sheryl Sandberg.</cite></p>
             </blockquote>
             <p>Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. <strong>Stories are universal in that they can bridge cultural, linguistic and age-related divides</strong>. Storytelling can be adaptive for all ages, leaving out the notion of age segregation.
@@ -333,27 +351,27 @@
           <div class="column">
             <h3>Company</h3>
             <ul>
-              <li><a href="">About</a></li>
-              <li><a href="">Team</a></li>
-              <li><a href="">Blog</a></li>
+              <li><a href="#">About</a></li>
+              <li><a href="#">Team</a></li>
+              <li><a href="#">Blog</a></li>
             </ul>
           </div>
           <!-- .end .column -->
           <div class="column">
             <h3>Support</h3>
             <ul>
-              <li><a href="">Shipping &amp; Returns</a></li>
-              <li><a href="">FAQ</a></li>
-              <li><a href="">Contact</a></li>
+              <li><a href="#">Shipping &amp; Returns</a></li>
+              <li><a href="#">FAQ</a></li>
+              <li><a href="#">Contact</a></li>
             </ul>
           </div>
           <!-- .end .column -->
           <div class="column">
             <h3>Legal</h3>
             <ul>
-              <li><a href="">Terms of Service</a></li>
-              <li><a href="">Privacy Policy</a></li>
-              <li><a href="">Cookies</a></li>
+              <li><a href="#">Terms of Service</a></li>
+              <li><a href="#">Privacy Policy</a></li>
+              <li><a href="#">Cookies</a></li>
             </ul>
           </div>
           <!-- .end .column -->
@@ -361,7 +379,7 @@
             <h3>Community</h3>
             <ul>
               <li>
-                <a href="">
+                <a href="#">
                   <svg class="fa-facebook">
                     <use xlink:href="#fa-facebook"></use>
                   </svg>
@@ -369,7 +387,7 @@
                 </a>
               </li>
               <li>
-                <a href="">
+                <a href="#">
                   <svg class="fa-youtube">
                     <use xlink:href="#fa-youtube"></use>
                   </svg>
@@ -377,7 +395,7 @@
                 </a>
               </li>
               <li>
-                <a href="">
+                <a href="#">
                   <svg class="fa-twitter">
                     <use xlink:href="#fa-twitter"></use>
                   </svg>
diff --git a/demos/media.html b/demos/media.html
index e65611e..869419f 100644
--- a/demos/media.html
+++ b/demos/media.html
@@ -3,72 +3,72 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    
     <!-- CLEAN MARKUP = GOOD KARMA.
       Hi source code lover,
-
+      
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
       https://github.com/webslides/webslides
-
+      
       Thanks!
     -->
-
+    
     <!-- SEO -->
     <title>WebSlides Tutorial: Videos, Images, and Maps</title>
     <meta name="description" content="How to embed images, videos, and maps in your presentation.">
-
+    
     <!-- URL CANONICAL -->
     <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
-
+    
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
-
+    
     <!-- CSS Base -->
     <link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css">
-
+    
     <!-- CSS Colors -->
     <link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css">
-
+    
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
-
+    
     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
-
+    
     <!-- FACEBOOK -->
     <meta property="og:url" content="/" />
     <meta property="og:type" content="article" />
     <meta property="og:title" content="WebSlides Tutorial: Media" />
-
+    
     <!-- EDIT -->
     <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
-
+    
     <!-- EDIT -->
     <meta property="og:updated_time" content="2017-01-04T17:25:31">
-
+    
     <!-- EDIT -->
     <meta property="og:image" content="../static/images/share-webslides.jpg" >
-
+    
     <!-- EDIT -->
-
+    
     <!-- TWITTER -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@webslides">
-
+    
     <!-- EDIT -->
     <meta name="twitter:creator" content="@jlantunez">
-
+    
     <!-- EDIT -->
     <meta name="twitter:title" content="WebSlides Tutorial: Media">
-
+    
     <!-- EDIT -->
     <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
-
+    
     <!-- EDIT -->
     <meta name="twitter:image" content="../static/images/share-webslides.jpg">
-
+    
     <!-- EDIT -->
-
+    
     <!-- FAVICONS -->
     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
     <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -77,11 +77,11 @@
     <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
     <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
     <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
-
+    
     <!-- Android -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#333333">
-
+  
   </head>
   <body>
     <header role="banner">
@@ -108,16 +108,16 @@
         </ul>
       </nav>
     </header>
-
+    
     <main role="main">
       <article id="webslides">
-
+      
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
           - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
-
+        
         <section class="bg-black-blue aligncenter">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
           <!--.wrap = container (width: 90%) -->
@@ -577,6 +577,8 @@
         </section>
         <section class="bg-blue">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
           <div class="wrap aligncenter">
             <h2>
               Videos
@@ -722,7 +724,7 @@
             <div class="grid">
               <div class="column">
                 <pre>&lt;div class="embed"&gt;
-  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt; 
   &lt;/div&gt;</strong>
 &lt;/div&gt;</pre>
                 <p>autoplay + loop</p>
@@ -730,7 +732,7 @@
               <!-- .end .column -->
               <div class="column">
                 <pre>&lt;div class="embed"&gt;
-  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt; 
   &lt;/div&gt;</strong>
 &lt;/div&gt;</pre>
                 <p>autoplay + mute + no controls.</p>
@@ -747,7 +749,7 @@
               <h3>YouTube API</h3>
               <p><code>autoplay + loop</code></p>
               <pre>&lt;div class="embed"&gt;
-  &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
+  &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt; 
   &lt;/div&gt;
 &lt;/div&gt;</pre>
             </div>
@@ -782,7 +784,7 @@
             <hr>
             <pre><strong>&lt;section class="fullscreen"&gt;</strong>
   &lt;div class="embed"&gt;
-    &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&gt;&lt;/div&gt;
+    &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
   &lt;/div&gt;
 <strong>&lt;/section&gt;</strong>
 </pre>
@@ -874,7 +876,7 @@
                   <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
                 </ul>
                 <p>
-                  There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
+                  There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies. 
                 </p>
               </div>
               <!-- end .flex-content-->
@@ -885,7 +887,7 @@
         </section>
         <section class="fullscreen">
           <div class="embed">
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe> 
           </div>
           <!-- .end .embed -->
         </section>
@@ -930,20 +932,20 @@
           <h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
           <h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
         </section>
-
+        
       </article>
     </main>
     <!--main-->
     <!-- Required -->
-
+    
     <script src="../static/js/webslides.js"></script>
-
+    
     <script>
       window.ws = new WebSlides();
     </script>
-
+    
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-
+  
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/demos/netflix-culture.html b/demos/netflix-culture.html
index e65e8fd..41cb22a 100644
--- a/demos/netflix-culture.html
+++ b/demos/netflix-culture.html
@@ -138,7 +138,7 @@
               <svg class="fa-info-circle large">
                 <use xlink:href="#fa-info-circle"></use>
               </svg>
-              <strong>A Bit of Context</strong>
+              <strong>A bit of context</strong>
             </h2>
             <hr>
             <p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
@@ -150,7 +150,7 @@
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
-                <h3><strong>We Seek Excellence</strong></h3>
+                <h3><strong>We seek excellence</strong></h3>
               </div>
               <div class="column">
                 <p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
@@ -198,7 +198,7 @@
         <section>
           <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
-            <h2><strong>9 behaviors</strong></h2>
+            <h2><strong>9 Behaviors</strong></h2>
             <p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
             <hr>
             <ol class="text-cols">
@@ -304,13 +304,13 @@
             <h3><strong>3/7 Freedom & Responsibility</strong></h3>
             <p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
             <hr>
-            <p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's Best Interest" (5 words long).</p>
+            <p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
           </div>
           <!-- .end .wrap -->
         </section>
         <section>
           <div class="wrap">
-            <h3><strong>"Act in Netflix's Best Interest"</strong> Generally Means...</h3>
+            <h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
             <ul class="flexblock border">
             <li>
               Expense only what you would otherwise not spend.
diff --git a/demos/why-webslides.html b/demos/why-webslides.html
index ea90d2b..357175d 100644
--- a/demos/why-webslides.html
+++ b/demos/why-webslides.html
@@ -122,6 +122,8 @@
         <section class="bg-black aligncenter">
           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
           <span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
           <!--.wrap = container (width: 90%) -->
           <div class="wrap fadeInUp">
             <h1>