Merge pull request #166 from webslides/dependabot/npm_and_yarn/node-sass-4.13.1

Bump node-sass from 4.9.4 to 4.13.1

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    ["es2015", {"modules": false}]
+  ],
+
+  "env": {
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
+    }
+  }
+}

.editorconfig

@@ -7,6 +7,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 max_line_length = 233
+end_of_line = lf
 
 [*.json]
 indent_style = space

.eslintrc

@@ -0,0 +1,135 @@
+{
+  "env": {
+    "jest/globals": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "jest"
+  ],
+  "rules": {
+    "no-cond-assign": 0,
+    "no-console": 2,
+    "no-constant-condition": 2,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-empty-character-class": 2,
+    "no-empty": [2, {
+      "allowEmptyCatch": true
+    }],
+    "no-ex-assign": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-semi": 2,
+    "no-func-assign": 2,
+    "no-inner-declarations": 2,
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-obj-calls": 2,
+    "no-regex-spaces": 2,
+    "no-sparse-arrays": 2,
+    "no-unexpected-multiline": 2,
+    "no-unreachable": 2,
+    "no-unsafe-finally": 2,
+    "use-isnan": 2,
+    "valid-jsdoc": [2, {
+      "requireParamDescription": false,
+      "requireReturnDescription": false,
+      "requireReturn": false,
+      "prefer": {"returns": "return"}
+    }],
+    "valid-typeof": 2,
+    "max-len": [1, 80, 2],
+
+    // Best Practices
+    "eqeqeq": 0,
+    "guard-for-in": 2,
+    "no-alert": 0,
+    "no-caller": 2,
+    "no-case-declarations": 2,
+    "no-empty-pattern": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-fallthrough": 2,
+    "no-invalid-this": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-new-wrappers": 2,
+    "no-octal": 2,
+    "no-redeclare": 2,
+    "no-self-assign": 2,
+    "no-throw-literal": 2,
+    "no-unused-labels": 2,
+    "no-with": 2,
+    "no-delete-var": 2,
+    "no-undef": 2,
+    "no-unused-vars": [2, {"args": "none"}],
+    // Stylistic Issues
+    // ----------------------------------------------
+    "array-bracket-spacing": [2, "never"],
+    "brace-style": 2,
+    "camelcase": [2, {"properties": "never"}],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": 2,
+    "comma-style": 2,
+    "computed-property-spacing": 2,
+    "eol-last": 2,
+    "func-call-spacing": 2,
+    "key-spacing": 2,
+    "keyword-spacing": 0,
+    "linebreak-style": 2,
+    "new-cap": 2,
+    "no-array-constructor": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multiple-empty-lines": [2, {"max": 2}],
+    "no-new-object": 2,
+    "no-trailing-spaces": 2,
+    "object-curly-spacing": 2,
+    "one-var": [2, {
+      "var": "never",
+      "let": "never",
+      "const": "never"
+    }],
+    "padded-blocks": [2, "never"],
+    "quote-props": [2, "consistent"],
+    "quotes": [2, "single", {"allowTemplateLiterals": true}],
+    "require-jsdoc": [2, {
+      "require": {
+        "FunctionDeclaration": true,
+        "MethodDefinition": true,
+        "ClassDeclaration": true
+      }
+    }],
+    "semi-spacing": 2,
+    "semi": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [2, "never"],
+    "spaced-comment": [2, "always"],
+    "space-in-parens": [2, "never"],
+
+    // ECMAScript 6
+    // http://eslint.org/docs/rules/#ecmascript-6
+    // ------------------------------------------
+    "arrow-parens": [2, "as-needed"],
+    "constructor-super": 2,
+    "generator-star-spacing": [2, "after"],
+    "no-const-assign": 0,
+    "no-dupe-class-members": 0,
+    "no-new-symbol": 2,
+    "no-this-before-super": 2,
+    "no-var": 2,
+    "prefer-rest-params": 2,
+    "prefer-spread": 2,
+    "prefer-const": 2,
+    "prefer-arrow-callback": 2,
+    "prefer-template": 2,
+    "require-yield": 2,
+    "rest-spread-spacing": 2,
+    "yield-star-spacing": [2, "after"]
+  }
+}

.gitignore

@@ -5,6 +5,8 @@
 # Third Party #
 ###############
 node_modules/
+coverage
+.eslintcache
 
 # OS generated files #
 ######################
@@ -15,4 +17,4 @@ node_modules/
 .Trashes
 ehthumbs.db
 Thumbs.db
-static/js/webslides*
+webslides.zip

.npmignore

@@ -0,0 +1 @@
+.babelrc

.sass-lint.yml

@@ -0,0 +1,95 @@
+files:
+  include: 'src/scss/**/*.scss'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  # Extends
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+
+  # Mixins
+  mixins-before-declarations: 2
+
+  # Line Spacing
+  one-declaration-per-line: 2
+  empty-line-between-blocks: 2
+  single-line-per-selector: 2
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 2
+  no-color-literals: 2
+  no-combinators: 0
+  no-debug: 2
+  no-disallowed-properties: 0
+  no-duplicate-properties: 2
+  no-empty-rulesets: 2
+  no-extends: 0
+  no-ids: 0
+  no-important: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  no-misspelled-properties: 2
+  no-qualifying-elements: 0
+  no-trailing-whitespace: 2
+  no-trailing-zero: 2
+  no-transition-all: 0
+  no-universal-selectors: 0
+  no-url-domains: 0
+  no-url-protocols: 0
+  no-vendor-prefixes: 2
+  no-warn: 2
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 2
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Name Formats
+  class-name-format: 0
+  function-name-format: 2
+  id-name-format: 0
+  mixin-name-format: 2
+  placeholder-name-format: 2
+  variable-name-format: 2
+
+  # Style Guide
+  attribute-quotes: 2
+  bem-depth: 0
+  border-zero: 2
+  brace-style: 2
+  clean-import-paths: 2
+  empty-args: 2
+  hex-length: 2
+  hex-notation: 2
+  indentation: 2
+  leading-zero: 2
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 2
+  property-sort-order: 2
+  pseudo-element: 0
+  quotes: 2
+  shorthand-values: 2
+  url-quotes: 2
+  variable-for-property: 0
+  zero-unit: 2
+
+  # Inner Spacing
+  space-after-comma: 2
+  space-before-colon: 2
+  space-after-colon: 2
+  space-before-brace: 2
+  space-before-bang: 2
+  space-after-bang: 2
+  space-between-parens: 2
+  space-around-operator: 2
+
+  # Final Items
+  trailing-semicolon: 2
+  final-newline: 2

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "10"

CHANGELOG.md

@@ -1,19 +1,124 @@
+# 1.5.0 (2017-09-16)
+
+- [[#96]((https://github.com/webslides/webslides/issues/96))] Using Shift Space now allows to go to previous slide.
+- [[#97]((https://github.com/webslides/webslides/issues/97))] Fixing CTRL/CMD + F not allowing to search.
+- Dependencies updated.
+
+# 1.4.2 (2017-09-12)
+
+- Fixed `.toc` class. (Regression from Sass)
+- Fixed baseline being incorrectly included.
+
+# 1.4.1 (2017-08-18)
+
+- Fixed longform alignments. (Regression from Sass)
+- Updated demos to use correct reference.
+- Added new unsplash to [demo](http://webslides.tv/demos/keynote).
+
+# 1.4.0 (2017-08-14)
+
+## Misc
+
+- [[#52]((https://github.com/webslides/webslides/issues/52))] We've moved to Sass! We've migrated all of our content to sass so you can customise it a bit more easily.
+Tests! We've added tests with the awesome Jest and Travis to keep it tested.
+
+## New features
+
+- [[#73]((https://github.com/webslides/webslides/issues/73))] Slides Index. Press - or click on our slide count to access a fancy new index to quickly navigate to a new slide. Press + or esc to exit or click on one slide to navigate to the slide. You can also disable this feature entirely with an option. Read more
+- [[#84]((https://github.com/webslides/webslides/issues/84))] Full Screen Mode. Pressing F now toggles full screen mode to remove all the distractions from the browser. Thanks solilokiam!
+- [[#66]((https://github.com/webslides/webslides/issues/66))] New option to disable scroll to navigate.
+
+# 1.3.0 (2017-04-20)
+
+## Misc
+
+- 4 new demos: Longforms, Interviews, Netflix Culture, and Media (YouTube API, videos, images, maps...)
+- Deps updated.
+- Now using [eslint](http://eslint.org/) to enforce code style.
+- Adding a new badge so the release number is quickly seen.
+- [[#51](https://github.com/webslides/webslides/issues/51)] Autoslide is now a plugin.
+- Docs moved to [Wiki](https://github.com/webslides/WebSlides/wiki)!
+- Moved to org!
+- Demos: GitHub links updated.
+
+## New features
+
+- Videos
+  - [[#72](https://github.com/webslides/webslides/issues/72)] Integration with YouTube's API.
+  - [[#54](https://github.com/webslides/webslides/issues/54)] Added video and youtube plugins to allow autoplaying videos (and pausing) entering and leaving the slide.
+  - [[#68](https://github.com/webslides/webslides/issues/68)] Responsive background videos (`<video>`).
+- [[#46](https://github.com/webslides/webslides/issues/46)] Added slide animation for mobile devices. `.slideInLeft` and `.slideInRight`.
+- Added longform elements.
+- Naming conventions: 
+  - Introducing `.text-emoji`.
+  - Introducing `.text-quote`.
+  - Introducing `.text-interview` = `dl.text-interview`, dt (name), dd (question/answer).
+  - `.card` is now a `card: width: 100%`.
+- [[#51](https://github.com/webslides/webslides/issues/51)] Autoslide now pauses if a focusable element gains focus.
+- [[#56](https://github.com/webslides/webslides/issues/56)] Added option to disable looping.
+- [[#74](https://github.com/webslides/webslides/issues/74)] Added `ws-ready` to actually lock the scroll.
+- Fluid `.wrap` (`width: 90%`).
+- `.gallery li:nth-child(n+4)`: `auto-fill` removed. Now: equal width (useful for gallery layouts).
+- Added padding to `form[class*="bg-"]`.
+- A better CSS print: A4 landscape.
+
+## Bugfixes
+
+- Fixed issues with the grid.
+- [[#33](https://github.com/webslides/webslides/issues/33)] Fixed video issue.
+- [[#61](https://github.com/webslides/webslides/issues/61)] Fixed print issue which prevented to export the slides to PDF in an easy way.
+
+
+# 1.2.1 (2017-03-02)
+
+## Bugfixes
+
+- Scrollbar showing in Firefox
+
+# 1.2.0 (2017-03-02)
+
+## New Features
+
+- [[#48](https://github.com/webslides/webslides/issues/48)] Allows to navigate with AvPag & RePag to allow presentation devices to work.
+- [[#49](https://github.com/webslides/webslides/issues/49)] Allowing to go to first and last slides by using home and end keys respectively.
+- [[#50](https://github.com/webslides/webslides/issues/50)] Using the keyboard on inputs and editable content won't trigger any events that might cause navigation.
+- [[#47](https://github.com/webslides/webslides/issues/47)] Allowing options to be configured. [Read More](/docs/technical.md#options).
+
+# 1.1.0 (2017-02-28)
+
+## Bugfixes
+
+- Fixed a bug which caused Chrome on OSX to stutter a lot on vertical transitioning due to elastic scroll bounce.
+- [[#28](https://github.com/webslides/webslides/issues/28)] Fixed scroll on Firefox.
+- [[#38](https://github.com/webslides/webslides/issues/38)] Fixed a bug in Safari which lead to unexpected behaviour using any form of movements.
+- [[#10](https://github.com/webslides/webslides/issues/10)] Fixed animation flash on Safari.
+
+## New Features
+
+- [[#1](https://github.com/webslides/webslides/issues/1)] Adding option to click to go to the next slide. Read more [here](https://github.com/webslides/webslides/blob/master/docs/click-to-nav.md).
+- [[#1](https://github.com/webslides/webslides/issues/1)] Improved sliding with mouse scroll and touchpad. It's now possible to use scroll to move an horizontal presentation.
+It's also possible to scroll horizontally on horizontal presentations to move forward/backwards the presentation.
+
+## Regression
+
+- Introduced a minor bug on iOS Safari which leads to the bottom part of the page not being visible on the first scroll. This is likely a browser bug but it has been unearthed in this version due to a much needed improvement on scrolling behaviour bugs. We're trying to investigate a bit more and will provide a fix ASAP.
+
 # 1.0.0 (2017-02-23)
 
 This release is a special one since it sets up in the path of a better development environment. Although it's far from
-perfect, it's a solid beginning. 
+perfect, it's a solid beginning.
 
-All the code has been migrated from jQuery with ES5 to vanilla JavaScript with ES2015 (or ES6) and is fully modular. 
-This means that WebSlides is a (base module)[src/js/modules/webslides.js] with a solid API (few public methods) and 
+All the code has been migrated from **jQuery** with ES5 to **vanilla JavaScript with ES2015 (or ES6) and is fully modular**.
+This means that WebSlides is a (base module)[src/js/modules/webslides.js] with a solid API (few public methods) and
 it's extended by (plugins)[src/js/plugins]. This leads to more granularity and less code to dive through while fixing a
-bug. 
+bug.
 
-The benefit from this approach is that now it's really easy to extend WebSlides to achieve what you need. You can also
+**The benefit from this approach is that now it's really easy to extend WebSlides** to achieve what you need. You can also
 overwrite current plugins. Say you don't like the current navigation with arrows and want to create a menu instead, you
 can just write that for yourself with your custom needs and register it as `nav` and it will overwrite our nav with
 your code.
 
-We hope this leads to a better environment in which WebSlides can grow better. 
+We hope this leads to a better environment in which WebSlides can grow better.
 
 All the technical specs live now in [this document](docs/technical.md).
 

README.md

@@ -1,21 +1,45 @@
-# WebSlides = Good Karma
+# WebSlides = Create stories with Karma
 
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
-[![Twitter](https://img.shields.io/twitter/url/https/github.com/jlantunez/webslides.svg?style=social)](https://twitter.com/webslides)
+[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
+[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
+[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
 
-Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — https://webslides.tv/demos.
+Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
 
-A new release (at least) every 8th day of the month.
+* * *
+### Download
+Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
+* * *
 
-### Why WebSlides?
-Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
 
-### Features
+### What's in the download?
 
-- Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
+The download includes demos and images (devices and logos). 
+All content is for demo purposes only. Images are property of their respective owners.
+
+```
+webslides/
+├── index.html
+├── css/
+│   ├── base.css
+│   └── colors.css
+│   └── svg-icons.css (optional)
+├── js/
+│   ├── webslides.js
+│   └── svg-icons.js (optional)
+└── demos/
+└── images/
+```
+
+## Features
+
+- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
 - Slide counter.
 - Permalinks: go to a specific slide.
-- Autoslide
+- Autoslide.
+- Click to nav.
 - Simple CSS alignments. Put content wherever you want (vertical centering...)
 - 40+ components: background images/videos, quotes, cards, covers...
 - Flexible blocks with auto-fill and equal height.
@@ -47,25 +71,6 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required.
 <article id="webslides" class="vertical">
 ```
 
-### What's in the download?
-
-The download includes demos and images (devices and logos). 
-All content is for demo purposes only. Images are property of their respective owners.
-
-```
-webslides/
-├── index.html
-├── css/
-│   ├── base.css
-│   └── colors.css
-│   └── svg-icons.css (optional)
-├── js/
-│   ├── webslides.js
-│   └── svg-icons.js (optional)
-└── demos/
-└── images/
-```
-
 ### CSS Syntax (classes)
 
 - Typography: `.text-landing`, `.text-data`, `.text-intro`...
@@ -74,7 +79,6 @@ webslides/
 - Cards: `.card-50`, `.card-40`...
 - Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
 
-
 ### Extensions
 
 You can add:
@@ -82,22 +86,20 @@ You can add:
 - [Unsplash](https://unsplash.com) photos
 - [animate.css](https://daneden.github.io/animate.css)
 - [particles.js](https://github.com/VincentGarreau/particles.js)
+- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
 - [pt](http://williamngan.github.io/pt/)
 
-### License
-
-WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT). 
-Use it to make something cool.
-
 ### Dive In!
 
-Please check out:
-
- - Want to get techie? Read [our technical docs](docs/technical.md)
- - Do not miss [our demos](https://webslides.tv/) 
+- Do not miss [our demos](https://webslides.tv/). 
+- Want to get techie? Read [our wiki](https://github.com/webslides/WebSlides/wiki):
+  - [FAQ](https://github.com/webslides/WebSlides/wiki)
+  - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
+  - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
+  - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
  
 ### Credits
 
 - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
-- Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :)
+- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
 - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

demos/classes.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +93,18 @@
         <!-- 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 1200px
+          - <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/6njoEbtarec/')"></span>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Classes</h1>
             <p class="text-symbols">* * * </p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -119,7 +115,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2><strong>WebSlides Classes</strong></h2>
             <p class="text-intro">Friendly naming conventions.</p>
@@ -226,7 +222,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -244,7 +240,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px with fadein&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -405,7 +401,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.grid + .column</h2>
             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -417,7 +413,7 @@
               </div>
               <!-- end .column -->
               <div class="column">
-                <figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <!-- end .column -->
               <div class="column">
@@ -432,7 +428,7 @@
           <!-- end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.grid.<strong>vertical-align</strong> + .column</h2>
             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -444,7 +440,7 @@
               </div>
               <!-- end .column -->
               <div class="column">
-                <figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <!-- end .column -->
               <div class="column">
@@ -518,43 +514,6 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        <section>
-          <div class="wrap">
-            <div class="card-50 bg-white">
-              <figure>
-                <img src="https://source.unsplash.com/POYDluw0tyw/800x600" alt="Big Ben, London">
-                <figcaption>
-                  <a href="https://unsplash.com/@dibert" title="David Dibert">
-                    <svg class="fa-camera">
-                      <use xlink:href="#fa-camera"></use>
-                    </svg>
-                    David Dibert (Unsplash)
-                  </a>
-                </figcaption>
-              </figure>
-              <!-- end figure-->
-              <div class="flex-content">
-                <h2>
-                  Discover London
-                </h2>
-                <p>.card-50.bg-white</p>
-                <ul class="description">
-                  <li>
-                    <strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
-                  </li>
-                  <li><strong title="Population">Population:</strong> 8,673,713</li>
-                  <li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
-                </ul>
-                <p>
-                  There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
-                </p>
-              </div>
-              <!-- end .flex-content-->
-            </div>
-            <!-- end .card-50-->
-          </div>
-          <!-- .end .wrap -->
-        </section>
         <section>
          <div class="wrap">
           <div class="card-50 bg-white">
@@ -590,6 +549,43 @@
          </div>
           <!-- .end .wrap -->
         </section>
+        <section>
+          <div class="wrap">
+            <div class="card-50 bg-white">
+              <figure>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.8442158987712!2d-0.1268272!3d51.5005848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig+Ben!5e0!3m2!1ses!2ses!4v1491497625579" width="800" height="600" allowfullscreen></iframe>
+                <figcaption>
+                  <a href="https://maps.google.com" title="Google Maps">
+                    <svg class="fa-maps">
+                      <use xlink:href="#fa-maps"></use>
+                    </svg>
+                    Google Maps
+                  </a>
+                </figcaption>
+              </figure>
+              <!-- end figure-->
+              <div class="flex-content">
+                <h2>
+                  Discover London
+                </h2>
+                <p>.card-50.bg-white</p>
+                <ul class="description">
+                  <li>
+                    <strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
+                  </li>
+                  <li><strong title="Population">Population:</strong> 8,673,713</li>
+                  <li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
+                </ul>
+                <p>
+                  There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
+                </p>
+              </div>
+              <!-- end .flex-content-->
+            </div>
+            <!-- end .card-50-->
+          </div>
+          <!-- .end .wrap -->
+        </section>
         <section class="fullscreen">
           <div class="card-50">
             <figure>
@@ -711,7 +707,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-h aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h1>Horizontal Gradient</h1>
             <p><code>section.bg-gradient-h</code></p>
@@ -726,7 +722,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-v aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h1>Vertical Gradient</h1>
             <p><code>section.bg-gradient-v</code></p>
@@ -768,10 +764,10 @@
             <div class="content-left">
               <h3>Fullscreen Background Images</h3>
               <pre>&lt;section&gt;
-	&lt;span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
-	&lt;section&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/section&gt;
+  &lt;span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
               <p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p>
             </div>
@@ -856,7 +852,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -1545,7 +1541,7 @@
           <!-- .end card-50 -->
         </section>
         <section class="bg-gradient-gray">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h3>.flexblock.reasons</h3>
             <hr>
@@ -1723,7 +1719,7 @@
           <p><code>.text-data</code></p>
         </section>
         <section>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <p class="text-context">Why WebSlides? .text-context</p>
             <h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
@@ -1828,7 +1824,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter text-serif">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides is incredibly easy and versatile.</h2>
@@ -1905,12 +1901,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -1933,11 +1929,13 @@
     </main>
     <!--main-->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- 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>
 

demos/components.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +93,18 @@
         <!-- 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 1200px
+          - <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/6njoEbtarec/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Components</h1>
             <p class="text-symbols">* * *</p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -186,12 +182,12 @@
                     <li><a target="_blank" href="#slide=101">Background Videos</a></li>
                     <li><a target="_blank" href="#slide=103">Embedding videos, charts...</a></li>
                     <li><a target="_blank" href="#slide=108">Maps</a></li>
-                    <li><a target="_blank" href="#slide=109">500+ SVG Icons</a></li>
-                    <li><a target="_blank" href="#slide=110">Logos</a></li>
-                    <li><a target="_blank" href="#slide=111">Avatars</a></li>
-                    <li><a target="_blank" href="#slide=112">Devices</a></li>
-                    <li><a target="_blank" href="#slide=113">Screenshots</a></li>
-                    <li><a target="_blank" href="#slide=114">CSS Animations</a></li>
+                    <li><a target="_blank" href="#slide=110">500+ SVG Icons</a></li>
+                    <li><a target="_blank" href="#slide=111">Logos</a></li>
+                    <li><a target="_blank" href="#slide=112">Avatars</a></li>
+                    <li><a target="_blank" href="#slide=113">Devices</a></li>
+                    <li><a target="_blank" href="#slide=114">Screenshots</a></li>
+                    <li><a target="_blank" href="#slide=115">CSS Animations</a></li>
                   </ol>
                 </div>
               </li>
@@ -200,7 +196,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -218,7 +214,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px with fadein&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -319,11 +315,6 @@
         <section>
           <div class="wrap">
             <h1>Navigation</h1>
-            <ul class="tabs">
-              <li class="tab current" data-tab="tab-1">ul.tabs</li>
-              <li class="tab" data-tab="tab-2">columns</li>
-            </ul>
-            <div id="tab-1" class="tab-content current">
               <nav role="navigation">
                 <ul>
                   <li><a href="">About</a></li>
@@ -372,9 +363,7 @@
                 </ul>
               </nav>
               <p>nav.navbar</p>
-            </div>
-            <!-- end .tab-content -->
-            <div id="tab-2" class="tab-content">
+              <hr>
               <div class="grid">
                 <div class="column">
                   <h3>Company</h3>
@@ -433,8 +422,6 @@
                   </ul>
                 </div>
                 <!-- .end .column -->
-              </div>
-              <!-- .end .grid -->
             </div>
             <!-- end .tab-content -->
           </div>
@@ -1697,7 +1684,7 @@
             <p class="text-intro">Create a simple web presence easily. <br> Clean markup and lovely CSS.
             </p>
             <p>
-              <a href="https://github.com/jlantunez/webslides" class="button">
+              <a href="https://github.com/webslides/webslides" class="button">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -1728,18 +1715,18 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
               <p class="alignright">
-                <a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
+                <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
                   <svg class="fa-cloud-download">
                     <use xlink:href="#fa-cloud-download"></use>
                   </svg>
                   WebSlides
                 </a>
-                <span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
+                <span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
               </p>
             </div>
             <ul class="flexblock features">
@@ -1801,7 +1788,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div id="tab-3" class="tab-content current">
               <h1 class="text-landing">Tell a Story</h1>
@@ -1948,7 +1935,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$56 Billion</h2>
             <h3>Revenue in Q3 2017</h3>
@@ -2015,7 +2002,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides was made to inspire people.</h2>
@@ -2152,7 +2139,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>iPhone 7</h2>
@@ -2432,7 +2419,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -2446,9 +2433,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <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.</p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Sheryl_Sandberg">Sheryl Sandberg</a>, COO of Facebook.</cite></p>
             </blockquote>
@@ -2456,9 +2443,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-primary">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>Finally, everything you need to make HTML presentations in a simple way.</p>
               <p><cite><a href="https://twitter.com/jlantunez">@jlantunez</a></cite></p>
             </blockquote>
@@ -2544,7 +2531,7 @@
         </section>
         <section class="bg-black">
           <span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-70 aligncenter">
             <h2>Planning a vacation?</h2>
             <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -2559,7 +2546,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-green">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -2633,7 +2620,7 @@
         </section>
         <section class="bg-primary">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-30">
             <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
             <form action="/" method="post">
@@ -2673,10 +2660,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">
@@ -2692,11 +2679,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>
@@ -2705,11 +2692,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>
@@ -2778,7 +2765,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -2786,26 +2773,36 @@
         </section>
         <section>
           <div class="wrap size-60">
-            <h3>Background Videos</h3>
-            <pre>&lt;video class="background-video" autoplay muted loop poster="image.jpg"&gt;
-  &lt;source src="video.mp4" type="video/mp4"&gt;
-&lt;/video&gt;</pre>
-            <p><code>.background-video</code></p>
+            <h3>Background videos</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;video autoplay loop poster="image.jpg"&gt;
+      &lt;source src="video.mp4" type="video/mp4"&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>.fullscreen > .embed (responsive) > video</p>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-blue aligncenter">
+         <div class="embed dark">
+          <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <div class="wrap">
-            <h2><strong>Be Awesome</strong></h2>
-            <p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
           </div>
-          <!-- .end .wrap -->
+          <!-- .end .embed -->
+          <div class="wrap">
+            <h2><strong>Muted</strong></h2>
+            <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
+           </div>
+           <!-- .end .wrap -->
         </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>
@@ -2815,12 +2812,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -2838,7 +2836,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/_m67JbGjWnc?list=PL27Ptt5XwkS39IrY8SeNaELghs_NLjMEs" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -2874,6 +2872,43 @@
           </div>
           <!-- .end .wrap -->
         </section>
+        <section>
+          <div class="wrap">
+            <div class="card-50 bg-white">
+              <figure>
+                <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>
+                <figcaption>
+                  <a href="https://maps.google.com" title="Google Maps">
+                    <svg class="fa-map">
+                      <use xlink:href="#fa-map"></use>
+                    </svg>
+                    Google Maps
+                  </a>
+                </figcaption>
+              </figure>
+              <!-- end figure-->
+              <div class="flex-content">
+                <h2>
+                  Discover Seville
+                </h2>
+                <p>.card-50.bg-white</p>
+                <ul class="description">
+                  <li>
+                    <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
+                  </li>
+                  <li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
+                  <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 Alcázar palace complex, the Cathedral and the General Archive of the Indies.
+                </p>
+              </div>
+              <!-- end .flex-content-->
+            </div>
+            <!-- end .card-50-->
+          </div>
+          <!-- .end .wrap -->
+        </section>
         <section>
           <div class="wrap size-50">
             <p class="text-subtitle">Optional &middot; 500+ icons</p>
@@ -2945,9 +2980,9 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>"An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism."</p>
               <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
             </blockquote>
@@ -3015,7 +3050,7 @@
               <h2>Screenshots</h2>
               <p>HTML/CSS Browser.</p>
               <pre>&lt;figure class="browser"&gt;
-	&lt;img alt="Screenshot" src="image.png"&gt;
+  &lt;img alt="Screenshot" src="image.png"&gt;
 &lt;/figure&gt;</pre>
             </div>
             <!-- .end .content-left -->
@@ -3033,7 +3068,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -3070,40 +3105,13 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        <section>
-          <div class="wrap size-60">
-            <h3>WebSlides is clean, consistent, and <strong>extensible</strong>.</h3>
-            <p>If you want to add more animations, videos...</p>
-            <ul class="flexblock border blink">
-              <li>
-                <a href="https://github.com/daneden/animate.css/" title="Animate.css">
-                  <h2>Animate.css</h2>
-                  Highly recommended. It is so easy and cool.
-                </a>
-              </li>
-              <li>
-                <a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
-                  <h2>particles.js</h2>
-                  A lightweight .js library for creating particles.
-                </a>
-              </li>
-              <li>
-                <a href="https://pixabay.com/en/videos" title="Pixabay">
-                  <h2>Pixabay</h2>
-                  Beautiful background videos. 100% license free.
-                </a>
-              </li>
-            </ul>
-          </div>
-          <!-- .end .wrap -->
-        </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in Seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -3126,8 +3134,9 @@
     </main>
     <!--main-->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
+
     <script>
       window.ws = new WebSlides();
     </script>

demos/index.html

@@ -9,7 +9,7 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
       Thanks,
       @jlantunez.
@@ -26,10 +26,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +68,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +83,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,12 +94,12 @@
         <!-- 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 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
           <span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1><strong>WebSlides Demos</strong></h1>
             <p class="text-intro">All of these presentations are free and responsive.<br>
@@ -112,7 +109,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-white">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <ul class="flexblock gallery">
               <li>
@@ -121,7 +118,7 @@
                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
                     <figcaption>
                       <h2>Why WebSlides?</h2>
-                      <time datetime="2017-12-08T21:21:44-05:00">Jan 08, 2017</time>
+                      <time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -132,7 +129,7 @@
                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
                     <figcaption>
                       <h2>Landings</h2>
-                      <time datetime="2017-01-07T19:21:26-05:00">Jan 07, 2017</time>
+                      <time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -143,7 +140,7 @@
                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
                     <figcaption>
                       <h2>Portfolios</h2>
-                      <time datetime="2017-01-06T21:22:21-05:00">Jan 06, 2017</time>
+                      <time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -154,7 +151,40 @@
                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
                     <figcaption>
                       <h2>Apple Keynote</h2>
-                      <time datetime="2017-01-05T20:13:48-05:00">Jan 05, 2017</time>
+                      <time datetime="2017-01-05T20:13:48-08:00">Jan 05, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/netflix-culture.html" title="Netflix's Culture">
+                  <figure>
+                    <img alt="Thumbnail Netflix's Culture" src="https://webslides.tv/static/images/demos-netflix.png">
+                    <figcaption>
+                      <h2>Netflix's Culture</h2>
+                      <time datetime="2017-04-16T20:16:48-08:00">Mar 16, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/longforms.html" title="Longform Articles">
+                  <figure>
+                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
+                    <figcaption>
+                      <h2>Longforms</h2>
+                      <time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/interviews.html" title="Interviews">
+                  <figure>
+                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
+                    <figcaption>
+                      <h2>Interviews</h2>
+                      <time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -164,10 +194,10 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2 class="aligncenter">General Questions</h2>
-            <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
+            <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> &middot; <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
             <div class="grid">
               <div class="column">
                 <h6>Why WebSlides? Good karma</h6>
@@ -177,12 +207,12 @@
               </div>
               <!-- end .column -->
               <div class="column">
-                <figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <!-- end .column -->
               <div class="column">
                 <h6>What can you do with WebSlides?</h6>
-                <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/components.html#slide=98">background images</a>, <a href="../demos/components.html#slide=101">videos</a>...
+                <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
                 </p>
                 <h6>How easy is WebSlides?</h6>
                 <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
@@ -194,12 +224,12 @@
           <!-- end .wrap -->
         </section>
         <section class="bg-white aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -222,7 +252,7 @@
     </main>
     <!-- end main -->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
     <script>
       window.ws = new WebSlides();

demos/interviews.html

@@ -0,0 +1,358 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <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 Demo: Longform Interviews</title>
+    <meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
+
+    <!-- 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/webslides.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="http://your-url.com/permalink">
+
+    <!-- EDIT -->
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="WebSlides Demo: Longform Interviews" />
+
+    <!-- EDIT -->
+    <meta property="og:description" content="Create longform interviews with ease. Just the essentials.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-03-28T12:17:24">
+
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+
+    <!-- EDIT -->
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- 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 Demo: Longform Interviews">
+
+    <!-- EDIT -->
+    <meta name="twitter:description" content="Create longform interviews with ease. Just the essentials.">
+
+    <!-- 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">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <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">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+
+    <main role="main">
+      <article>
+
+        <section class="bg-black">
+          <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
+          <span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span>
+          <!--.wrap = container width: 90% -->
+          <div class="wrap">
+            <p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a>.</p>
+            <h1>
+              <strong>Designing Interviews</strong>
+            </h1>
+            <p>All content is for demo purposes only.</p>
+            <p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David Yang"> By David Yang. Nov 8th, 2024.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
+          <div class="wrap longform">
+            <h2><strong>The Art of the Interview</strong></h2>
+            <p class="text-intro">The stories you tell, whether in text form, by way of video or through audio, are only as good as the information you gather.</p>
+            <p>Interviewing is the cornerstone of journalism. Interviews usually take place face to face and in person, although modern communications technologies such as the Internet have enabled conversations to happen in which parties are separated geographically, such as with videoconferencing software, and of course telephone interviews can happen without visual contact.</p>
+            <hr>
+            <dl class="text-interview">
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Hi, this is a WebSlides Demo, where we interview the people who make us happy. I’m your host, David González. This week I interviewed lawyer Sheryl Hadid. Hi Sheryl!</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>Hi David!</p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Are interviews copyrighted? When does an interview become copyrightable?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>The answer is it depends. Copyright of speech given during an interview relies heavily on the "fixation" element of copyright law. When a work is fixed in a copy or recording, the work is created. This gives the work its copyright. Therefore, when an interview is physically recorded it becomes copyrighted.</p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>How could the person being interviewed own the copyright to an interview?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>This may be a surprise but there are moments when the person being interviewed could in fact have copyright ownership in their words. For example, if the person being interviewed receives a list of questions from the interviewer and records their calculated responses, they could have copyright ownership in their answers because they not the interviewer actually wrote down or otherwise recorded their response.</p>
+              </dd>
+              <dd>
+                <blockquote class="text-quote">
+                  <p>People want to be smart. So, if you ask smart questions and show an interest in a particular subject they love sharing their insight.<code>.text-quote</code>.</p>
+                </blockquote>
+              </dd>
+              <dd>
+                <p>However, courts are hesitant to apply this concept broadly to spoken interviews because of the impact it could have on the First Amendment and the heavy caseload it would bring to an already overloaded court system. See Falwell v. Penthouse Intern., Ltd.  This also opens the door for other legal arguments such as fair use. Furthermore, there are times when contractual releases could affect the copyright and alter default copyright rules. </p>
+              </dd>
+            </dl>
+            <hr>
+            <div class="text-pull embed">
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&amp;controls=0" allowfullscreen></iframe>
+            </div>
+            <!--.text-pull.embed (responsive video) -->
+            <hr>
+            <dl class="text-interview">
+              <dt>David:</dt>
+              <dd>
+                <p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>Most often when problems with interview ownership arise it’s because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation.  Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
+              </dd>
+              <dd>
+                <p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others.  And if you truly don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
+              </dd>
+            </dl>
+          </div>
+        </section>
+        <section>
+          <!--.wrap = container width: 90% -->
+          <div class="wrap size-50 aligncenter">
+            <h3><strong>Things you can do with WebSlides</strong></h3>
+            <p class="text-intro"><a href="/demos/why-webslides" title="Why WebSlides?">Presentations</a>, <a href="/demos/landings" title="Landings">landings</a>, <a href="/demos/portfolios" title="Portfolios">portfolios</a>, and <a href="/demos/longforms" title="Longforms">longforms</a>.</p>
+            <div class="bg-white shadow">
+              <ul class="flexblock reasons">
+                <li>
+                  <h2>An opportunity to engage.</h2>
+                  <p><a href="https://webslides.tv" title="WebSlides">WebSlides</a> is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
+                </li>
+                <li>
+                  <h2>Work better, faster.</h2>
+                  <p>Designers, marketers, and journalists can now focus on the content. Simply <a href="https://webslides.tv/demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
+                </li>
+              </ul>
+            </div>
+            <!-- .end .bg-white shadow -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <!--.wrap = container width: 90% -->
+          <div class="wrap longform">
+            <dl class="text-interview">
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Is a web address (a domain name) subject to copyright law?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>No, for a variety of reasons web addresses (also known as a domain names or URLs) aren't protected by copyright. Even though copyright doesn’t protect domain names, that doesn’t mean domain names are entirely unprotected. Trademark law protects web addresses. And for a variety of reasons, companies are often more apt to go after individual instances of trademark infringement than individual copyright infringers. </p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Are there easier alternatives than copyright?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>Some persons and organizations hope to make the rules about using and reusing work more user-friendly. These groups may make their work freely available under <a href="https://creativecommons.org/">Creative Commons</a> licenses or expressly abandon them into the public domain. </p>
+              </dd>
+              <dd>
+                <p>But just because an author employs either of these copyright alternatives, that doesn’t mean that they are completely free of legal issues. For example, imagine you’re an advertising designer for Virgin Mobile, and you need a photo of a pretty teenage girl for your latest ad. You find a photo on Flickr that is free to use under a Creative Commons Attribution license. You use the photo in your ad campaign and plaster the photo on bus stops across Australia. This is exactly what happened, and since the photographer was adequately credited and copyright issues were non-existent everybody lived happily ever after, right?</p>
+              </dd>
+              <dd>
+                <p>If you have any questions about alternatives to the standard copyright scheme or how these alternatives are being utilized by thousands of artists every day, feel free to contact <a href="https://www.newmediarights.org/about_us/contact_us">New Media Rights</a>.</p>
+              </dd>
+            </dl>
+            <p><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">"Are interviews copyrighted"</a> by NewMediaRights is licensed under CC BY NC 3.0.</p>
+            <hr>
+            <h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
+            <p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
+            <form action="/" class="bg-light user" method="post">
+              <input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
+              <button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
+            </form>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!-- .wrap = container width: 90% -->
+          <div class="wrap aligncenter">
+            <h2><strong>Ready to start?</strong> </h2>
+            <p class="text-intro">Create your stories instantly.</p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                Free Download
+              </a>
+              <span class="try">
+                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
+                  <svg class="fa-paypal">
+                    <use xlink:href="#fa-paypal"></use>
+                  </svg>
+                  Pay what you want.
+                </a>
+              </span>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+
+    <footer role="contentinfo">
+      <div class="wrap">
+        <div class="grid">
+          <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>
+            </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>
+            </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>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Community</h3>
+            <ul>
+              <li>
+                <a href="#">
+                  <svg class="fa-facebook">
+                    <use xlink:href="#fa-facebook"></use>
+                  </svg>
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-youtube">
+                    <use xlink:href="#fa-youtube"></use>
+                  </svg>
+                  YouTube
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-twitter">
+                    <use xlink:href="#fa-twitter"></use>
+                  </svg>
+                  Twitter
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+        </div>
+        <!-- .end .grid -->
+      </div>
+      <!-- .end .wrap -->
+    </footer>
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/keynote.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +93,18 @@
         <!-- 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 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h1>Make a Keynote presentation using HTML</h1>
             <p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p>
@@ -117,7 +113,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>HTML presentations can be easy</h2>
           </div>
@@ -328,7 +324,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$48 Billion</h2>
             <h3>Revenue in Q4 2024</h3>
@@ -490,7 +486,7 @@
         </section>
         <section class="bg-apple">
           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>Payments Made Simple</h2>
@@ -568,9 +564,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p>
               <p>
                 <cite>
@@ -723,12 +719,12 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="bg-black aligncenter">
-          <span class="background light" style="background-image:url('https://source.unsplash.com/bopC0sTGu-E/')"></span>
+          <span class="background light" style="background-image:url('https://source.unsplash.com/UxtIESWxLh8/')"></span>
           <div class="wrap">
             <h2>Embedding Media</h2>
           </div>
@@ -737,18 +733,18 @@
         <section class="bg-apple">
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.</p>
               <pre>&lt;div class="embed"&gt;
- &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
- &lt;/iframe&gt;
+ &lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
               <!-- <div class="embed"> = Responsive -->
               <div class="embed">
-                <iframe src="https://www.youtube.com/embed/CQY3KUR3VzM" allowfullscreen></iframe>
+                <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-no-controls></div>
               </div>
               <!-- end .embed -->
             </div>
@@ -759,26 +755,31 @@
         <section class="bg-apple fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/mtY0K2fiFOA" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="lvOKBQvbLhg" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-apple aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+           </video>
+          </div><!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Be Awesome</strong></h2>
           </div>
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+        <section class="fullscreen bg-black aligncenter">
+          <div class="embed dark">
+             <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div><!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Think Different</strong></h2>
-            <p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p>
+            <p>Overlay: <code>fullscreen.bg-black > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -810,12 +811,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong></h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -834,17 +835,18 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <h2><strong>Thank you!</strong></h2>
-          <p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
-          <p class="text-symbols">* * *</p>
+          <h2 class="text-emoji zoomIn">😎</h2>
+          <h3><strong>Thank you!</strong></h2>
+          <p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
         </section>
 
       </article>
     </main>
     <!--main-->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
+
     <script>
       window.ws = new WebSlides();
     </script>

demos/landings.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -96,16 +92,16 @@
         <!-- 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 1200px / <div class="wrap size-50"> = 600px;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-purple aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1 class="text-landing">Landings</h1>
             <p class="text-symbols">* * * </p>
-            <p><a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides for free"><svg class="fa-github">
+            <p><a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides for free"><svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg> WebSlides</a>
             </p>
@@ -113,7 +109,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <p class="text-subtitle">The interface is your brand:</p>
             <h2>Create a stylish web presence easily</h2>
@@ -121,7 +117,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -139,7 +135,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -176,7 +172,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2 class="text-landing">Welcomes</h2>
             <p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br>
@@ -185,13 +181,13 @@
                <ul>
                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
-                 <li><a href="https://github.com/jlantunez/webslides">Github</a></li>
+                 <li><a href="https://github.com/webslides/webslides">Github</a></li>
                </ul>
              </nav>
           </div>
         </section>
         <section class="bg-secondary">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 frame">
             <h2 class="text-serif aligncenter">How to Tell Your Story?</h2>
             <p class="text-symbols">* * *</p>
@@ -199,7 +195,7 @@
           </div>
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-60">
             <h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3>
             <hr>
@@ -231,18 +227,18 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
               <p class="alignright">
-                <a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
+                <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
                   <svg class="fa-cloud-download">
                     <use xlink:href="#fa-cloud-download"></use>
                   </svg>
                   WebSlides
                 </a>
-                <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
+                <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
               </p>
             </div>
             <ul class="flexblock features">
@@ -600,7 +596,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid">
               <div class="column">
@@ -880,7 +876,7 @@
         </section>
         <section>
           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>iPhone 7</h2>
@@ -1447,7 +1443,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -1461,9 +1457,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.
               </p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Zaha_Hadid">Zaha Hadid</a></cite></p>
@@ -1553,7 +1549,7 @@
         </section>
         <section class="bg-black">
           <span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-70 aligncenter">
             <h2>Planning a vacation?</h2>
             <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -1568,7 +1564,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-white">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -1643,7 +1639,7 @@
         </section>
         <section class="bg-primary">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-30">
             <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
             <form action="/" method="post">
@@ -1737,7 +1733,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1809,12 +1805,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -1832,7 +1829,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -1841,28 +1838,32 @@
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+        <section class="fullscreen bg-black aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+           </video>
+          </div><!-- .end .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Every end is a new beginning</strong></h2>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+        <section class="fullscreen bg-blue aligncenter">
+         <div class="embed dark">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+           </video>
+          </div><!-- .end .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Overlay</strong></h2>
-            <p><code>section.bg-blue > .background-video.dark</code> or .light</p>
+            <p><code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1890,12 +1891,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -1918,13 +1919,15 @@
     </main>
     <!--main-->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- 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>

demos/longforms.html

@@ -0,0 +1,415 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <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 Demo: Longforms</title>
+    <meta name="description" content="WebSlides is about telling stories. Create longform articles with ease.">
+
+    <!-- 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/webslides.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="https://webslides.tv/demos/why-webslides">
+
+    <!-- EDIT -->
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="WebSlides Demo: Longforms" />
+
+    <!-- EDIT -->
+    <meta property="og:description" content="Create longform articles with ease. Just the essentials.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-03-28T18:24:48">
+
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+
+    <!-- EDIT -->
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- 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 Demo: Longforms">
+
+    <!-- EDIT -->
+    <meta name="twitter:description" content="Create longform articles with ease. Just the essentials.">
+
+    <!-- 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">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <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">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+    <main role="main">
+      <article>
+        <section>
+          <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
+          <span class="background-bottom" style="background-image:url('https://webslides.tv/static/images/nyc.jpg')"></span>
+          <!--.wrap = container width: 90% -->
+          <div class="wrap aligncenter">
+            <h1 class="text-landing">
+              <strong>Longform Demo</strong>
+            </h1>
+            <p class="text-intro">How to engage readers with longform journalism?<br> All content is for demo purposes only.
+            </p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free" class="button zoomIn">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                WebSlides
+              </a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
+          <div class="wrap longform">
+            <h2><strong>The Art of Storytelling</strong></h2>
+            <p><a href="https://twitter.com/webslides" title="David Yang"><img class="avatar-40" src="../static/images/avatar.jpg" alt="David Yang"></a> David Yang. Nov 16th, 2032.</p>
+            <p class="text-intro">
+              WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
+            </p>
+            <p>People share content that makes them feel inspired. WebSlides is free and open source. We built it because we need a platform for beautiful storytelling. Longform journalism has grown in popularity over the past several years, with blogs and media organizations including <a href="https://medium.com">Medium</a>, <a href="http://highline.huffingtonpost.com/">The Huffington Post</a>, and <a href="http://nytimes.com">The New York Times</a> creating or expanding longform coverage and new companies such as <a href="https://atavist.com/">The Atavist</a>, <a href="https://longreads.com/">Longreads.com</a> and <a href="https://longform.com/">Longform.org</a> being founded to capitalize on the new interest.</p>
+            <hr>
+            <p class="aligncenter"><code>.wrap.longform</code> = 72rem (720px). <br>
+              Why? Reading efficiency is highest at <a href="http://uxmovement.com/content/how-margins-and-line-lengths-affect-user-reading/">90-95 characters per line</a>.
+            </p>
+            <hr>
+            <p>Longform journalism is a branch of journalism dedicated to longer articles with larger amounts of content. Typically this will be between 1,000 and 20,000 words.</p>
+            <p>Storytelling is the social and cultural activity of sharing stories, often with improvisation, theatrics, or embellishment. Stories or narratives have been shared in every culture as a means of entertainment, education, cultural preservation and instilling moral values.</p>
+            <p>Crucial elements of stories and storytelling include plot, characters and narrative point of view. The term 'storytelling' is used in a narrow sense to refer specifically to oral storytelling and also in a looser sense to refer to techniques used in other media to unfold or disclose the narrative of a story.</p>
+            <p>Storytelling predates writing, with the earliest forms of storytelling usually oral combined with gestures and expressions. In addition to being part of religious rituals, some archaeologists believe rock art may have served as a form of storytelling for many ancient cultures.</p>
+            <h2><strong>Alignments</strong></h2>
+            <p>This is an image of a Nao (robot), aligned to the right. It also has a small caption.</p>
+            <figure class="alignright">
+              <img src="https://source.unsplash.com/2EJCSULRwC8/600x400" alt="Robot">
+              <figcaption>
+                <p><code>figure.alignright</code></p>
+              </figcaption>
+            </figure>
+            <p>For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text.</p>
+            <p>Nao (pronounced now) is an autonomous, programmable humanoid robot developed by Aldebaran Robotics, a French robotics company headquartered in Paris. The robot's development began with the launch of Project Nao in 2004. On 15 August 2007, Nao replaced Sony's robot dog Aibo as the robot used in the RoboCup Standard Platform League (SPL), an international robot soccer competition. The Nao was used in RoboCup 2008 and 2009, and the NaoV3R was chosen as the platform for the SPL at RoboCup 2010.</p>
+            <hr>
+            <figure class="text-pull-left">
+              <img src="https://source.unsplash.com/cr6RJblqjyo/600x400" alt="Skater">
+              <figcaption>
+                <p><code>.text-pull-left</code></p>
+              </figcaption>
+            </figure>
+            <p>This is an image of a skate, aligned to the left. It also has a small caption. For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text</p>
+            <p>Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.</p>
+            <hr>
+            <p>The story was then told using a combination of oral narrative, music, rock art and dance, which bring understanding and meaning of human existence through remembrance and enactment of stories. People have used the carved trunks of living trees and ephemeral media (such as sand and leaves) to record stories in pictures or with writing. Complex forms of tattooing may also represent stories, with information about genealogy, affiliation and social status.</p>
+            <blockquote class="text-pull-right">
+              <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." &mdash; <code>.text-pull-right</code>.</p>
+            </blockquote>
+            <p>With the advent of writing and the use of stable, portable media, stories were recorded, transcribed and shared over wide regions of the world. Stories have been carved, scratched, painted, printed or inked onto wood or bamboo, ivory and other bones, pottery, clay tablets, stone, palm-leaf books, skins (parchment), bark cloth, paper, silk, canvas and other textiles, recorded on film and stored electronically in digital form. Oral stories continue to be created, improvisationally by impromptu storytellers, as well as committed to memory and passed from generation to generation, despite the increasing popularity of written and televised media in much of the world.</p>
+            <hr>
+            <h3>Center aligned</h3>
+            <figure class="aligncenter">
+              <img src="https://source.unsplash.com/BnQULvE2mEA/800x600" alt="Scene from the Women’s March on Washington, DC.">
+              <figcaption>
+                <p><code>figure.aligncenter</code></p>
+              </figcaption>
+            </figure>
+            <p>This is a center aligned image. It also has a small caption. The sky (or celestial dome) is everything that lies above the surface of the Earth, including the atmosphere and outer space. The intensity of the sky varies greatly over the day, and the primary cause of that intensity differs as well. </p>
+            <hr>
+            <figure class="text-pull">
+              <img src="https://source.unsplash.com/9bdt03k4ujw/800x400" alt="Japan">
+              <figcaption>
+                <p><code>figure.text-pull</code></p>
+              </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>
+          </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>
+            <h4>Heading four</h4>
+            <h5>Heading five</h5>
+            <h6>Heading six</h6>
+            <hr />
+            <h3>Ordered List</h3>
+            <ol>
+              <li>Medium = Beautiful articles.</li>
+              <li>Typeform = Beautiful forms.</li>
+              <li>WebSlides = Beautiful presentations and longforms.</li>
+            </ol>
+            <h3>Unordered List</h3>
+            <ul>
+              <li>List Item 1</li>
+              <li>List Item 2</li>
+              <li>List Item 3</li>
+            </ul>
+            <h3>Mixed List</h3>
+            <ol>
+              <li>
+                List Item 1
+                <ul>
+                  <li>List Item 1</li>
+                  <li>
+                    List Item 2
+                    <ol>
+                      <li>List Item 1</li>
+                      <li>
+                        List Item 2
+                        <ul>
+                          <li>List Item 1</li>
+                          <li>List Item 2</li>
+                          <li>List Item 3</li>
+                        </ul>
+                      </li>
+                      <li>List Item 3</li>
+                    </ol>
+                  </li>
+                  <li>List Item 3</li>
+                </ul>
+              </li>
+              <li>List Item 2</li>
+              <li>List Item 3</li>
+            </ol>
+            <hr />
+            <h3>Table Styles</h3>
+            <table>
+              <tbody>
+                <tr>
+                  <th>Table Header 1</th>
+                  <th>Table Header 2</th>
+                  <th>Table Header 3</th>
+                </tr>
+                <tr>
+                  <td>Division 1</td>
+                  <td>Division 2</td>
+                  <td>Division 3</td>
+                </tr>
+                <tr class="even">
+                  <td>Division 1</td>
+                  <td>Division 2</td>
+                  <td>Division 3</td>
+                </tr>
+                <tr>
+                  <td>Division 1</td>
+                  <td>Division 2</td>
+                  <td>Division 3</td>
+                </tr>
+              </tbody>
+            </table>
+            <hr>
+            <h2>Blockquote</h2>
+            <p>The blockquote tag can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:</p>
+            <blockquote>
+              <p>"Women, like men, should try to do the impossible. And when they fail, their failure should be a challenge to others."</p>
+              <p><cite>Amelia Earhart.</cite></p>
+            </blockquote>
+            <p>Modern storytelling has a broad purview. In addition to its traditional forms (fairytales, folktales, mythology, legends, fables etc.), it has extended itself to representing history, personal narrative, political commentary and evolving cultural norms. Contemporary storytelling is also widely used to address educational objectives.</p>
+            <blockquote class="text-pull">
+              <p>"Without freedom of thought, there can be no such thing as wisdom - and no such thing as public liberty without freedom of speech." <code>.text-pull </code> </p>
+              <p><cite>Benjamin Franklin.</cite></p>
+            </blockquote>
+            <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><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.
+            </p>
+            <p>Storytelling can be used as a method to teach ethics, values and cultural norms and differences. Learning is most effective when it takes place in social environments that provide authentic social cues about how knowledge is to be applied. Stories function as a tool to pass on knowledge in a social context. So, every story has 3 parts. First, The setup (The Hero's world before the adventure starts). Second, The Confrontation (The hero's world turned upside down). Third, The Resolution (Hero conquer's villain, but it's not enough for Hero to survive. The Hero or World must be transformed). Any story can be framed in such format.</p>
+            <hr>
+            <h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
+            <p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
+            <form action="/" class="bg-light user" method="post">
+              <input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
+              <button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
+            </form>
+          </div>
+        </section>
+        <section>
+          <!-- .wrap = container width: 90% -->
+          <div class="wrap aligncenter">
+            <h2><strong>Ready to start?</strong> </h2>
+            <p class="text-intro">Create your stories instantly.</p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                Free Download
+              </a>
+              <span class="try">
+                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
+                  <svg class="fa-paypal">
+                    <use xlink:href="#fa-paypal"></use>
+                  </svg>
+                  Pay what you want.
+                </a>
+              </span>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+
+    <footer role="contentinfo">
+      <div class="wrap">
+        <div class="grid">
+          <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>
+            </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>
+            </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>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Community</h3>
+            <ul>
+              <li>
+                <a href="#">
+                  <svg class="fa-facebook">
+                    <use xlink:href="#fa-facebook"></use>
+                  </svg>
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-youtube">
+                    <use xlink:href="#fa-youtube"></use>
+                  </svg>
+                  YouTube
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-twitter">
+                    <use xlink:href="#fa-twitter"></use>
+                  </svg>
+                  Twitter
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+        </div>
+        <!-- .end .grid -->
+      </div>
+      <!-- .end .wrap -->
+    </footer>
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/media.html

@@ -0,0 +1,947 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <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/webslides.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">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <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">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </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%) -->
+          <div class="wrap">
+            <p class="text-subtitle">WebSlides Tutorial</p>
+            <h1 class="text-landing">Media</h1>
+            <p class="text-symbols">* * *</p>
+            <p>
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
+                <svg class="fa-github">
+                  <use xlink:href="#fa-github"></use>
+                </svg>
+                Free Download
+              </a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter">
+          <div class="wrap">
+            <h2><strong>A quick reference guide for beginners</strong></h2>
+            <p class="text-intro">Videos, images, maps, and charts.</p>
+            <ul class="flexblock border">
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=3">Images</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=4">Background Images</a></li>
+                    <li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li>
+                    <li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li>
+                    <li><a target="_blank" href="#slide=13">Logos</a></li>
+                    <li><a target="_blank" href="#slide=14">Avatars</a></li>
+                    <li><a target="_blank" href="#slide=15">Devices</a></li>
+                    <li><a target="_blank" href="#slide=16">Screenshots</a></li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=17">Videos</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
+                    <li><a target="_blank" href="#slide=22">Embedding YouTube videos</a></li>
+                    <li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li>
+                    <li>
+                      <a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
+                      <ol>
+                        <li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li>
+                        <li><a target="_blank" href="#slide=30">Fullscreen video</a></li>
+                        <li><a target="_blank" href="#slide=32">Background video with overlay</a></li>
+                      </ol>
+                    </li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=35">Embedding maps</a></li>
+                    <li><a target="_blank" href="#slide=36">Embedding the map in a card</a></li>
+                    <li><a target="_blank" href="#slide=37">Fullscreen maps</a></li>
+                    <li><a target="_blank" href="#slide=38">Embedding charts</a></li>
+                  </ol>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap aligncenter">
+            <h3>
+              <svg class="fa-camera">
+                <use xlink:href="#fa-camera"></use>
+              </svg>
+              Insert images wherever you want
+            </h3>
+            <p class="text-intro">15 different positions.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3>15 Different Backgrounds</h3>
+            <ul class="text-cols">
+              <li><strong>.background</strong> (fullscreen)</li>
+              <li>.background-top (cover)</li>
+              <li>.background-bottom (cover)</li>
+              <li>.background.light (opacity)</li>
+              <li>.background.dark (opacity)</li>
+              <li>.background-center</li>
+              <li>.background-center-top</li>
+              <li>.background-center-bottom</li>
+              <li>.background-left</li>
+              <li>.background-left-top</li>
+              <li>.background-left-bottom</li>
+              <li>.background-right</li>
+              <li>.background-right-top</li>
+              <li>.background-right-bottom</li>
+              <li>.background-anim (animated)</li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <h4>
+              <svg class="fa-camera">
+                <use xlink:href="#fa-camera"></use>
+              </svg>
+              .background = Fullscreen Backgrounds
+            </h4>
+            <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/nwfuaYecNUs/')"&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">
+                <use xlink:href="#fa-info"></use>
+              </svg>
+              Position .background outside of .wrap container.
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>.background-(position)</h3>
+              <p><code>.background-right-bottom</code></p>
+              <ul class="flexblock specs">
+                <li>
+                  <div>
+                    <svg class="fa-wifi">
+                      <use xlink:href="#fa-wifi"></use>
+                    </svg>
+                    <h2>Ultra-Fast WiFi</h2>
+                    Simple and secure file sharing.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-battery-full">
+                      <use xlink:href="#fa-battery-full"></use>
+                    </svg>
+                    <h2>All day battery life</h2>
+                    Your battery worries may be over.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-life-ring">
+                      <use xlink:href="#fa-life-ring"></use>
+                    </svg>
+                    <h2>Lifetime Warranty </h2>
+                    We'll fix it or if we can't, we'll replace it.
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
+          <div class="wrap">
+            <div class="content-right">
+              <h3>.background-(position)</h3>
+              <p><code>.background-left-bottom</code></p>
+              <ul class="flexblock specs">
+                <li>
+                  <div>
+                    <svg class="fa-wifi">
+                      <use xlink:href="#fa-wifi"></use>
+                    </svg>
+                    <h2>Ultra-Fast WiFi</h2>
+                    Simple and secure file sharing.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-battery-full">
+                      <use xlink:href="#fa-battery-full"></use>
+                    </svg>
+                    <h2>All day battery life</h2>
+                    Your battery worries may be over.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-life-ring">
+                      <use xlink:href="#fa-life-ring"></use>
+                    </svg>
+                    <h2>Lifetime Warranty </h2>
+                    We'll fix it or if we can't, we'll replace it.
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter bg-black">
+          <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <h2>.background.anim</h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black aligncenter">
+          <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+          <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;
+&lt;/section&gt;</pre>
+          </div>
+        </section>
+        <section class="bg-black aligncenter">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
+          <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;
+&lt;/section&gt;</pre>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <p class="text-subtitle">Optional &middot; 500+ icons</p>
+            <h2>
+              <a href="http://fontawesome.io/icons/">
+                <svg class="fa-flag">
+                  <use xlink:href="#fa-flag"></use>
+                </svg>
+                Font Awesome
+              </a>
+              as SVG icons
+            </h2>
+            <pre>&lt;svg class="fa-flag"&gt;
+	&lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
+&lt;/svg&gt;</pre>
+            <p>How to change icons?</p>
+            <ol class="text-cols">
+              <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
+              <li>Create a free account.</li>
+              <li>Select new icons.</li>
+              <li>Publish as SVG sprite.</li>
+              <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-green">
+          <div class="wrap">
+            <h3>ul.flexblock.metrics.border</h3>
+            <!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
+            <ul class="flexblock metrics border">
+              <li> Founded
+                <span>2024</span>
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-users">
+                    <use xlink:href="#fa-users"></use>
+                  </svg>
+                </span>
+                24M Subscribers
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-line-chart">
+                    <use xlink:href="#fa-line-chart"></use>
+                  </svg>
+                </span>
+                Revenue: $16M
+              </li>
+              <li>
+                Monthly Growth
+                <span>64%</span>
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-building-o">
+                    <use xlink:href="#fa-building-o"></use>
+                  </svg>
+                </span>
+                8 Offices
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-smile-o">
+                    <use xlink:href="#fa-smile-o"></use>
+                  </svg>
+                </span>
+                48 Employees
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-usd">
+                    <use xlink:href="#fa-usd"></use>
+                  </svg>
+                </span>
+                EBITDA: $2,4M
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-university">
+                    <use xlink:href="#fa-university"></use>
+                  </svg>
+                </span>
+                Bank: $32M
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h2>Transparent Logos</h2>
+            <p>
+              Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
+            </p>
+            <hr>
+            <ul class="flexblock blink">
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img src="../static/images/logos/google.svg" alt="Google">
+                    <p><strong>Height recommended</strong>: 48px</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
+                    <p><code>img.blacklogo</code></p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
+                    <p><code>img.graylogo</code></p>
+                  </div>
+                </a>
+              </li>
+              <li class="bg-blue">
+                <a href="" title="Block Link = .blink">
+                  <div>
+                    <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
+                    <p><code>img.whitelogo</code></p>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <blockquote class="text-quote">
+              <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
+              <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
+            </blockquote>
+            <hr>
+            <p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="grid vertical-align">
+              <div class="column">
+                <h2>Devices</h2>
+                <ul class="flexblock specs">
+                  <li>
+                    <div>
+                      <svg class="fa-wifi">
+                        <use xlink:href="#fa-wifi"></use>
+                      </svg>
+                      <h2>Ultra-Fast WiFi</h2>
+                      Simple and secure file sharing.
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <svg class="fa-battery-full">
+                        <use xlink:href="#fa-battery-full"></use>
+                      </svg>
+                      <h2>All day battery life</h2>
+                      Your battery worries may be over.
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <svg class="fa-life-ring">
+                        <use xlink:href="#fa-life-ring"></use>
+                      </svg>
+                      <h2>Lifetime Warranty </h2>
+                      We'll fix it or if we can't, we'll replace it.
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <!-- end .column-->
+              <div class="column">
+                <figure>
+                  <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
+                </figure>
+              </div>
+              <!-- end .column-->
+            </div>
+            <!-- end .grid-->
+          </div>
+          <!-- end .wrap-->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <figure class="browser">
+                <img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
+              </figure>
+            </div>
+            <!-- .end .content-left -->
+            <div class="content-left">
+              <h2>Screenshots</h2>
+              <p>HTML/CSS Browser.</p>
+              <pre>&lt;figure class="browser"&gt;
+  &lt;img alt="Screenshot" src="image.jpg"&gt;
+&lt;/figure&gt;</pre>
+            </div>
+            <!-- .end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </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
+            </h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Background videos</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;video autoplay loop poster="image.jpg"&gt;
+      &lt;source src="video.mp4" type="video/mp4"&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>.fullscreen > .embed (responsive) > video</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen aligncenter">
+          <div class="embed">
+            <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Background videos</h3>
+            <p>Transparent overlay:</p>
+            <pre><strong>&lt;section class="fullscreen bg-blue"&gt;</strong>
+  &lt;div class="embed <strong>dark</strong>"&gt;
+    &lt;video autoplay muted loop poster="image.jpg"&gt;
+      &lt;source src="video.mp4" type="video/mp4"&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-blue aligncenter">
+          <div class="embed dark">
+            <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div>
+          <!-- .end .embed -->
+          <div class="wrap">
+            <h2><strong>Muted</strong></h2>
+            <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>Responsive Videos</h3>
+              <p>Just copy and paste the code from YouTube to your slide.</p>
+              <pre>&lt;div class="embed"&gt;
+ <strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
+ &lt;/iframe&gt;</strong>
+&lt;/div&gt;</pre>
+              <p><code>.embed</code> (responsive)</p>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <!-- Responsive video/iframe... Add <div class="embed"> -->
+            <div class="embed">
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
+            </div>
+            <!-- .end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Fullscreen YouTube Video</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
+    &lt;/iframe&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <!-- Fullscreen Video -->
+          <div class="embed">
+            <iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section class="frame">
+          <p class="aligncenter">
+            <svg class="fa-thumbs-up large">
+              <use xlink:href="#fa-thumbs-up"></use>
+            </svg>
+          </p>
+          <div class="wrap size-60 bg-white">
+            <h3>
+              <a href="https://developers.google.com/youtube">
+                <svg class="fa-youtube">
+                  <use xlink:href="#fa-youtube"></use>
+                </svg>
+                YouTube API
+              </a>
+            </h3>
+            <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
+            <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3>
+              <svg class="fa-youtube">
+                <use xlink:href="#fa-youtube"></use>
+              </svg>
+              YouTube API Parameters
+            </h3>
+            <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
+            <hr>
+            <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;
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre>
+                <p>autoplay + loop</p>
+              </div>
+              <!-- .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;
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre>
+                <p>autoplay + mute + no controls.</p>
+              </div>
+              <!-- .end .column -->
+            </div>
+            <!-- .end .grid -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <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&gt;
+&lt;/div&gt;</pre>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="frame">
+          <div class="wrap size-60 bg-white">
+            <h3>
+              <svg class="fa-info-circle large">
+                <use xlink:href="#fa-info-circle"></use>
+              </svg>
+              <strong>Autoplay Feature</strong>
+            </h3>
+            <p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Let's make some magic with the YouTube API</strong></h3>
+            <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
+            <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>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>The video will automatically play when the slide is loaded.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <!-- Fullscreen Video -->
+          <div class="embed">
+            <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Fullscreen YouTube video background</strong></h3>
+            <p>Overlaying a transparent background on an embedded Youtube video:</p>
+            <hr>
+            <pre><strong>&lt;section class="fullscreen bg-black"&gt;</strong>
+  &lt;div class="embed dark"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-blue">
+          <!-- Fullscreen Video -->
+          <div class="embed dark">
+            <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
+          </div>
+          <!-- .end .embed -->
+          <div class="wrap aligncenter">
+            <h2><strong>Overlay</strong></h2>
+            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-primary">
+          <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
+          <div class="wrap aligncenter">
+            <h3>
+              <svg class="fa-map">
+                <use xlink:href="#fa-map"></use>
+              </svg>
+              Maps & Charts
+            </h3>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black-blue">
+          <div class="wrap size-50">
+            <p class="text-context">Status of Net Neutrality around the world.</p>
+            <div class="embed">
+              <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
+            </div>
+            <!-- .end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="card-50 bg-white">
+              <figure>
+                <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>
+                <figcaption>
+                  <a href="https://maps.google.com" title="Google Maps">
+                    <svg class="fa-map">
+                      <use xlink:href="#fa-map"></use>
+                    </svg>
+                    Google Maps
+                  </a>
+                </figcaption>
+              </figure>
+              <!-- end figure-->
+              <div class="flex-content">
+                <h2>
+                  Discover Seville
+                </h2>
+                <p>.card-50.bg-white</p>
+                <ul class="description">
+                  <li>
+                    <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
+                  </li>
+                  <li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
+                  <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.
+                </p>
+              </div>
+              <!-- end .flex-content-->
+            </div>
+            <!-- end .card-50-->
+          </div>
+          <!-- .end .wrap -->
+        </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>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
+            <!-- Responsive video/iframe/chart... Add <div class="embed"> -->
+            <div class="embed">
+              <!-- I love Quartz's charts -->
+              <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div>
+              <script src="https://www.theatlas.com/javascripts/atlas.js"></script>
+            </div>
+            <!-- end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter">
+          <!-- .wrap = container width: 90% -->
+          <div class="wrap">
+            <h2><strong>Start in seconds</strong></h2>
+            <p class="text-intro">120+ prebuilt slides ready to use.</p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                Free Download
+              </a>
+              <span class="try">
+                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
+                  <svg class="fa-paypal">
+                    <use xlink:href="#fa-paypal"></use>
+                  </svg>
+                  Pay what you want.
+                </a>
+              </span>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-primary aligncenter">
+          <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>

demos/netflix-culture.html

@@ -0,0 +1,388 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <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>Netflix's Culture &middot; WebSlides</title>
+    <meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley.">
+
+    <!-- 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/webslides.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 -->
+    <!-- EDIT -->
+    <meta property="og:url" content="http://your-url.com/permalink">
+
+    <!-- EDIT -->
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="WebSlides: Netflix's Culture" />
+    <meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-04-16T16:24:56">
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+    <!-- EDIT -->
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- 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: Netflix's Culture">
+    <!-- EDIT -->
+    <meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
+    <!-- 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">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <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">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </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-red">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap aligncenter">
+            <h1>
+              <strong>Netflix's Culture</strong>
+            </h1>
+            <p class="text-symbols">* * * </p>
+            <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
+              <svg class="fa-cloud-download">
+                <use xlink:href="#fa-cloud-download"></use>
+              </svg> WebSlides</a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50 bg-white">
+            <h2>
+              <svg class="fa-info-circle large">
+                <use xlink:href="#fa-info-circle"></use>
+              </svg>
+              <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>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <div class="grid vertical-align">
+              <div class="column">
+                <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.
+                </p>
+              </div>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-red">
+          <span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap aligncenter fadeInUp">
+            <h3><strong>Diversity & Inclusiveness</strong></h3>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50">
+            <h2><strong>7 Aspects</strong> of our Culture</h2>
+            <hr>
+            <ol class="text-cols">
+              <li><strong>Values are what we Value</strong></li>
+              <li>High Performance</li>
+              <li>Freedom & Responsibility</li>
+              <li>Context, not Control</li>
+              <li>Highly Alined, Loosely Coupled</li>
+              <li>Pay Top of Market</li>
+              <li>Promotions & Development</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50 bg-white">
+            <h3><strong>1/7 Values are what we value</strong></h3>
+            <p class="text-intro">Make your values mean something.</p>
+            <hr>
+            <p>Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went <strong>bankrupt from <a href="https://www.youtube.com/watch?v=jrEf8uabe7E">fraud</a></strong> had these values displayed in their lobby: <strong>integrity, communication, respect, and excellence</strong>.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50">
+            <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">
+              <li>Judgment</li>
+              <li>Communication</li>
+              <li>Impact</li>
+              <li>Curiosity</li>
+              <li>Innovation</li>
+              <li>Courage</li>
+              <li>Passion</li>
+              <li>Honesty</li>
+              <li>Selflessness</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50">
+            <h2><strong>7 Aspects</strong> of our Culture</h2>
+            <hr>
+            <ol class="text-cols">
+              <li><strong>Values are what we Value</strong></li>
+              <li><strong>High Performance</strong></li>
+              <li>Freedom & Responsibility</li>
+              <li>Context, not Control</li>
+              <li>Highly Alined, Loosely Coupled</li>
+              <li>Pay Top of Market</li>
+              <li>Promotions & Development</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
+          <div class="wrap">
+            <h3><strong>2/7 High Performance</strong></h3>
+            <ul class="flexblock features">
+              <li>
+                <div>
+                  <h2>
+                    <svg class="fa-users">
+                      <use xlink:href="#fa-users"></use>
+                    </svg>
+                    We're a team
+                  </h2>
+                  not a family.
+                </div>
+              </li>
+              <li>
+                <div>
+                  <h2>
+                    <svg class="fa-trophy">
+                      <use xlink:href="#fa-trophy"></use>
+                    </svg>
+                    We're a pro sports team
+                  </h2>
+                  not a kid's recreational team.
+                </div>
+              </li>
+              <li>
+                <div>
+                  <h2>
+                    <svg class="fa-star">
+                      <use xlink:href="#fa-star"></use>
+                    </svg>
+                    We have stars
+                  </h2>
+                  in every position.
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
+          <div class="wrap size-60 bg-trans-dark">
+            <h4><strong>Why are we so manic on high performance?</strong></h4>
+            <p class="text-intro">In procedural work, the best are 2x better than the average.</p>
+            <hr>
+            <p class="text-intro">In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black">
+          <span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
+          <div class="wrap aligncenter">
+            <h2><strong>Content that people love</strong></h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <div class="embed">
+            <video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
+              <source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
+            </video>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <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>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <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.
+            </li>
+            <li>
+              Travel as you would if it were your own money.
+            </li>
+            <li>
+              What gifts you can accept?
+              Disclose non-trivial vendor gifts.
+            </li>
+            <li>
+              Take from Netflix only when it is inefficient to not take (calls...)
+            </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50 bg-white">
+            <h4><strong>Summary of Freedom & Responsibility</strong></h4>
+            <hr>
+            <ol>
+              <li>As we grow, minimize rules.</li>
+              <li>Inhibit chaos with ever more high performance people.</li>
+              <li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="grid">
+              <div class="column">
+                <p class="text-context">
+                  This is a homage.
+                </p>
+                <p class="text-intro"><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> wrote <strong>"Netflix Culture: Freedom & Responsibility"</strong>. Go to <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> to read the whole document.</p>
+              </div>
+              <div class="column">
+               <div>
+                <div class="embed">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&amp;controls=0"  allowfullscreen></iframe>
+                </div>
+                <!-- normalize flexbox -->
+               </div>
+               <!-- end .embed -->
+              </div>
+              <!-- end .column -->
+            </div>
+            <!-- end .grid -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+
+    <footer>
+      <div class="wrap">
+        <p>
+          <span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
+        </p>
+      </div>
+    </footer>
+
+    <!-- Required -->
+    <script src="../static/js/webslides.js"></script>
+    <script>
+      window.ws = new WebSlides();
+    </script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/portfolios.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,7 +93,7 @@
         <!-- 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 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-primary">
@@ -105,14 +101,14 @@
           <div class="wrap aligncenter">
             <h1 class="text-landing">Portfolios</h1>
             <p class="text-symbols">* * * </p>
-            <p><a class="button ghost" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
+            <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
                 <use xlink:href="#fa-cloud-download"></use>
               </svg> WebSlides</a>
             </p>
           </div>
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <p class="text-subtitle">Design faster, better.</p>
             <h2>Create a beautiful portfolio for your work</h2>
@@ -120,7 +116,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -138,7 +134,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -333,7 +329,7 @@
           </div>
         </section>
         <section class="bg-black-blue">
-          <span class="background dark" style="background-image:url('https://source.unsplash.com/nw6xREmkXkg/')"></span>
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span>
           <div class="wrap size-50">
             <p class="text-subtitle">Mercedes-Benz</p>
             <h2>Defining a new platform for the connected car</h2>
@@ -432,7 +428,7 @@
         <section class="aligncenter">
           <div class="wrap size-50">
             <figure class="browser">
-              <a href="#" title="Title"><img src="../static/images/cover-apple.jpg" alt="Screenshot"></a>
+              <a href="#" title="Title"><img src="https://webslides.tv/static/images/cover-apple.jpg" alt="Screenshot"></a>
             </figure>
             <p>HTML/CSS Browser: <code>.browser</code></p>
           </div>
@@ -569,7 +565,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$48 Billion</h2>
             <h3>Revenue in Q2 2019</h3>
@@ -1211,7 +1207,7 @@
         </section>
         <section>
           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>Call to action</h2>
@@ -1389,7 +1385,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 aligncenter">
               <h2><strong>Why WebSlides?</strong></h2>
               <blockquote>
@@ -1400,9 +1396,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p>
             </blockquote>
@@ -1619,7 +1615,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1720,12 +1716,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -1743,7 +1740,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -1752,28 +1749,33 @@
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-black aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+           </video>
+          </div><!-- .end .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We build brands with integrity and substance</strong></h2>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-blue">
+         <div class="embed dark">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+           </video>
+          </div>
+          <!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We help with design direction</strong></h2>
-            <p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
+            <p>0verlay: <code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1858,8 +1860,9 @@
     </main>
     <!--main-->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
+
     <script>
       window.ws = new WebSlides();
     </script>

demos/why-webslides.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en-US" prefix="og: http://ogp.me/ns#">
+<html lang="en" prefix="og: http://ogp.me/ns#">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <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">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -70,10 +66,10 @@
   <body>
     <header role="banner">
       <nav role="navigation">
-        <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -88,7 +84,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -99,11 +95,11 @@
         <!-- 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 1200px / <div class="wrap size-50"> = 600px;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <h1 class="text-landing">Good Karma</h1>
             <p class="text-intro">
@@ -114,7 +110,7 @@
                <ul>
                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
-                 <li><a href="https://github.com/jlantunez/webslides">Github</a></li>
+                 <li><a href="https://github.com/webslides/webslides">Github</a></li>
                </ul>
              </nav>
           </div>
@@ -123,7 +119,9 @@
         <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>
-          <!--.wrap = container 1200px -->
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap fadeInUp">
             <h1>
               Everyone
@@ -136,7 +134,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -150,7 +148,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -168,7 +166,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -181,7 +179,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides was made to inspire people.</h2>
@@ -302,7 +300,7 @@
                 </ul>
               </div>
               <div class="column">
-                <a href="https://github.com/jlantunez/webslides" title="Github"><img src="../static/images/setup.png" alt="WebSlides Files"></a>
+                <a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
               </div>
               <div class="column">
                 <h3>Extensible</h3>
@@ -338,8 +336,9 @@
     </main>
     <!--main-->
 
-    <script src="../static/js/svg-icons.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
+
     <!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
     <script>
       window.ws = new WebSlides({ autoslide: 5000 });

docs/technical.md

@@ -1,135 +0,0 @@
-## Project Setup
-
-This project assumes you have NodeJS. You should also have npm installed as well (this usually comes packaged with Node). Once you have it cloned, you should run `npm install` to get all the dependencies.
-
-Finally, run one of the following commands in the cloned directory:
-
-- `npm run dev`: This starts a dev server with autoreload on the port `8080`.
-- `npm run build`: This creates the `dist` files.
-
-## JavaScript
-
-In order to bootstrap the WebSlides you'll need to create a instance of it:
-
-```javascript
-const ws = new WebSlides();
-```
-
-That'll make everything run without any hassle. 
-
-### Options
-
-WebSlides constructor accepts an object with options.
-
-| Param | Type | Default | Description |
-|-----------|----------------|-----------|-------------------------------------------------------------------------------|
-| `autoslide` | `number` or `boolean` | `false` | Amount of milliseconds to wait to go to next slide automatically. |
-
-
-```javascript
-const ws = new WebSlides({
-  autoslide: false
-});
-```
-
-### API
-
-Do you want to get your hands dirty? This is the API for the WebSlides module:
-
-<dl>
-    <dt><a href="#goToSlide">goToSlide(slideIndex, opt_forward)</a></dt>
-    <dd><p>Goes to a given slide.</p></dd>
-    <dt><a href="#goNext">goNext()</a></dt>
-    <dd><p>Goes to the next slide.</p></dd>
-    <dt><a href="#goPrev">goPrev()</a></dt>
-    <dd><p>Goes to the previous slide.</p>
-    <dt><a href="#play">play()</a></dt>
-    <dd><p>Starts autosliding.</p>
-    <dt><a href="#stop">stop()</a></dt>
-    <dd><p>Stops autosliding.</p>    
-    </dd>
-    <dt><a href="#registerPlugin">registerPlugin(key, cto)</a></dt>
-    <dd><p>Registers a plugin to be loaded when the instance is created. It allows
-        (on purpose) to replace default plugins.
-        Those being:</p>
-        <ul>
-            <li>Navigation</li>
-            <li>Hash</li>
-            <li>Keyboard</li>
-        </ul>
-    </dd>
-</dl>
-
-<a name="goToSlide"></a>
-
-### `goToSlide(slideI, forward)`
-Goes to a given slide.
-
-| Param | Type | Description |
-| --- | --- | --- | --- |
-| slideIndex | <code>number</code> | The slide index. |
-| forward | <code>boolean</code> | Whether we're forcing moving forward/backwards. This parameter is used only from the `goNext`, `goPrev` functions to adjust the scroll animations. |
-
-<a name="goNext"></a>
-
-### `goNext()`
-Goes to the next slide. If the page is vertical, it will animate the scroll down.
-
-<a name="goPrev"></a>
-
-### `goPrev()`
-Goes to the previous slide. If the page is vertical, it will animate the scroll up
-
-<a name="play"></a>
-
-### `play(time)`
-Autoplays slides. If time is omitted, it will use the default time passed to the constructor. This is useful if you don't want to autoslide from the beginning but you want to add a button to do it.
-
-| Param | Type | Description |
-| --- | --- | --- | --- |
-| time | <code>number</code> | Amount of milliseconds to wait to go to next slide automatically. |
-
-<a name="stop"></a>
-
-### `stop()`
-Stops autosliding.
-
-<a name="registerPlugin"></a>
-
-### `registerPlugin(key, cto)`
-Registers a plugin to be loaded when the instance is created. It allows
-(on purpose) to replace default plugins.
-
-Those being:
-
- - Navigation
- - Hash
- - Keyboard
-
-| Param | Type | Description |
-| --- | --- | --- |
-| key | <code>string</code> | They key under which it'll be stored inside of the instance, inside the plugins dict. |
-| cto | <code>function</code> | Plugin constructor. |
-
-### Plugin development
-
-Almost every single feature of WebSlides is a plugin that can be overwritten and you are able to create your custom plugins. Just call `registerPlugin` (as seen above) **before creating** the instance:
-
-```javascript
-// Adding the constructor to WebSlides
-WebSlides.registerPlugin('myPlugin', MyPlugin);
-
-// Starting WebSlides
-// Your plugin will be constructed at this time and it will receive the webslides instance as the only parameter.
-const ws = new WebSlides();
-// You can also access ws.plugins.myPlugin now
-```
-
-This allows you to rewrite the navigation to use a menu (for example) or add that missing piece of functionality you'd like to see. See [this part of the code](../src/js/modules/webslides.js#L11) to see all the plugins we're using and the name they're using.
-
-Make sure to let us know so it could get added to the repo!
-
-### Roadmap
-
-* Fix crossbrowser issues. Safari mostly.
-* Write tests

error.html

@@ -3,39 +3,39 @@
   <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/jlantunez/webslides
-      
+      https://github.com/webslides/webslides
+
       Thanks,
       @jlantunez.
     -->
-    
+
     <!-- SEO -->
     <title>Page not found (404) - WebSlides</title>
     <meta name="description" content="Unfortunately, this page does not exist.">
-    
+
     <!-- 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">
 
-    
+
     <!-- 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">
-    
+
     <!-- Android -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#333333">
@@ -46,7 +46,7 @@
         <p class="logo"><a href="index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -61,11 +61,11 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
         </ul>
       </nav>
     </header>
-    
+
     <main role="main">
       <section class="aligncenter">
         <div class="wrap">
@@ -73,14 +73,14 @@
           <p class="text-symbols">* * *</p>
           <p>Please check your URL or <a href="index.html">return to the Home Page</a>.</p>
         </div>
-        <!-- end .wrap --> 
+        <!-- end .wrap -->
       </section>
-      <!-- end section --> 
+      <!-- end section -->
     </main>
-    <!-- end main --> 
+    <!-- end main -->
 
     <!-- svg-icons.js is optional (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>

index.html

@@ -9,7 +9,7 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
       Thanks,
       @jlantunez.
@@ -25,11 +25,8 @@
     <!-- 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">
+    <!-- CSS WebSlides -->
+    <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
@@ -72,7 +69,7 @@
         <p class="logo"><a href="index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -87,7 +84,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,19 +94,19 @@
         <!-- 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 1200px / <div class="wrap size-50"> = 600px;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
          <span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <h1><strong>Create beautiful stories</strong></h1>
             <p class="text-intro">WebSlides makes HTML presentations easy.<br>
               Just the essentials and using lovely CSS.
             </p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button zoomIn" title="Download WebSlides for free">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button zoomIn" title="Download WebSlides for free">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -120,15 +117,15 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 aligncenter">
             <h2><strong>Why WebSlides?</strong></h2>
-            <p class="text-intro">Good karma and productivity.</p>
+            <p class="text-intro"><a href="demos/why-webslides.html" title="Why WebSlides?">Presentations</a>, <a href="demos/landings.html" title="Landings">landings</a>, <a href="demos/portfolios.html" title="Portfolios">portfolios</a>, and <a href="demos/longforms.html" title="Longforms">longforms</a>.</p>
             <div class="bg-white shadow">
               <ul class="flexblock reasons">
                 <li>
                   <h2>An opportunity to engage.</h2>
-                  <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+                  <p>WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
                 </li>
                 <li>
                   <h2>Work better, faster.</h2>
@@ -141,7 +138,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -159,7 +156,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -181,7 +178,7 @@
                     <span>&rarr;</span>
                     Simple Navigation
                   </h2>
-                  with arrow keys and swipe.
+                  with arrow keys, presenter...
                 </div>
               </li>
               <li>
@@ -241,7 +238,7 @@
         <section>
           <div class="wrap">
             <h2><strong>WebSlides Demos</strong></h2>
-            <p>Contribute on <a href="https://github.com/jlantunez/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all &rsaquo;</a></span></p>
+            <p>Contribute on <a href="https://github.com/webslides/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all &rsaquo;</a></span></p>
             <ul class="flexblock gallery">
               <li>
                 <a href="demos/why-webslides.html" title="Why WebSlides?">
@@ -297,14 +294,15 @@
                   </svg>
                   <strong>Guides</strong>
                 </h4>
-                <p>If you need some help, here's just two tutorials. Just a basic knowledge of HTML is required:</p>
+                <p>If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:</p>
                 <ul class="description">
-                  <li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
-                  <li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
+                  <li><a href="/demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="/demos/classes.html" title="WebSlides Classes">Classes</a>.</li>
+                  <li><a href="https://codepen.io/webslides" title="WebSlides on Codepen">WebSlides on Codepen</a>.</li>
+                  <li><a href="/demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
                 </ul>
               </div>
               <div class="column">
-                <figure><img src="static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <div class="column">
                 <h4>
@@ -313,10 +311,11 @@
                   </svg>
                   <strong>Built to expand</strong>
                 </h4>
-                <p>The best way to <strong>inspire with your content</strong> is to connect on a personal level. We love these solutions:</p>
+                <p>The best way to <strong>inspire with your content</strong> is to connect on a personal level:</p>
                 <ul class="description">
                   <li>Background images: <a href="http://unsplash.com">Unsplash</a>.</li>
                   <li>CSS animations: <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</li>
+                  <li>Longforms: <a href="http://michalsnik.github.io/aos/"> Animate on scroll</a>.</li>
                 </ul>
               </div>
             </div>
@@ -324,12 +323,12 @@
           </div>
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Ready to Start?</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -358,12 +357,8 @@
                   </svg>
                 </a>
               </h2>
-              <p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams. Best, <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
-              <figure>
-                <a href="http://linkedin.com/in/jlantunez" title="LinkedIN — José Luis Antúnez">
-                  <img class="aligncenter fadeInUp" src="https://webslides.tv/static/images/signature.png" alt="Signature">
-                </a>
-              </figure>
+              <p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p>
+              <p>Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>, <a href="https://twitter.com/belelros">@belelros</a>, and <a href="https://twitter.com/luissacristan">@luissacristan</a>.</p>
             </div>
             <!-- .end .content-right -->
           </div>
@@ -375,15 +370,15 @@
     </main>
     <!-- end main -->
 
-   <!-- Remove #webslides element :)
+   <!-- A global footer
 
      <footer role="contentinfo">
       <div class="wrap">
-        <p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
+        <p>An <a href="https://github.com/webslides/webslides">open source solution</a>, by <a href="https://twitter.com/webslides">@webslides</a>.</p>
       </div>
     </footer>  -->
 
-    <script src="static/js/svg-icons.js"></script>
+    <!-- Required -->
     <script src="static/js/webslides.js"></script>
     <script>
       window.ws = new WebSlides();

package.json

@@ -1,48 +1,92 @@
 {
   "name": "webslides",
-  "version": "1.0.0",
+  "version": "1.5.0",
   "description": "Making HTML presentations easy",
-  "main": "index.js",
+  "main": "static/js/webslides.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jlantunez/webslides.git"
+    "url": "git+https://github.com/webslides/webslides.git"
   },
   "keywords": [
     "webslides",
     "presentation",
     "css"
   ],
-  "author": "Jose Luís Antúnez",
+  "author": "Jose Luís Antúnez <jlantunez@gmail.com>",
+  "contributors": [
+    {
+      "name": "Luís Sacristán"
+    },
+    {
+      "name": "Antonio Laguna",
+      "email": "anlagmat@gmail.com"
+    }
+  ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/jlantunez/webslides/issues"
+    "url": "https://github.com/webslides/webslides/issues"
   },
-  "homepage": "https://github.com/jlantunez/webslides#readme",
+  "homepage": "https://github.com/webslides/webslides#readme",
   "devDependencies": {
-    "babel-cli": "^6.23.0",
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
-    "babel-preset-es2015": "^6.22.0",
-    "npm-run-all": "^4.0.2",
-    "rimraf": "^2.6.0",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1"
+    "archiver": "^2.0.3",
+    "autoprefixer": "^7.1.4",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.0.4",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-es2015": "^6.24.1",
+    "codecov": "^3.0.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.7.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-jest": "^21.1.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "jest": "^22.0.4",
+    "node-sass": "4.13.1",
+    "npm-run-all": "^4.1.1",
+    "postcss-loader": "^2.0.6",
+    "pre-commit": "^1.2.2",
+    "rimraf": "^2.6.2",
+    "sass-lint": "^1.11.1",
+    "sass-loader": "^6.0.6",
+    "simulant": "^0.2.2",
+    "smart-banner-webpack-plugin": "^3.0.1",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
   },
   "scripts": {
     "prebuild": "rimraf static/js/webslide*",
-    "build": "npm-run-all --parallel build:*",
-    "build:main": "webpack",
-    "build:main.min": "webpack --output-filename [name].min.js -p",
-    "dev": "webpack-dev-server"
+    "build": "npm-run-all -s lint build:*",
+    "build:min": "webpack --output-filename [name].min.js -p",
+    "build:normal": "webpack",
+    "lint": "npm-run-all -p lint:*",
+    "lint:js": "eslint ./src/js --cache --ignore-pattern .gitignore",
+    "lint:tests": "eslint ./test --cache --ignore-pattern .gitignore",
+    "lint:css": "sass-lint -v -f stylish",
+    "dev": "webpack-dev-server",
+    "test": "jest && codecov",
+    "preversion": "npm jest",
+    "postversion": "npm run build && git add -A static && node ./zip-release.js && git push && git push --tags"
   },
-  "babel": {
-    "presets": [
-      [
-        "es2015",
-        {
-          "modules": false
-        }
-      ]
+  "release": {
+    "files": [
+      "demos/**/**",
+      "static/**/**",
+      "*.html",
+      "LICENSE",
+      "README.md"
     ]
+  },
+  "jest": {
+    "collectCoverage": true,
+    "testURL": "http://localhost/"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "dependencies": {
+    "request": "^2.83.0"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')({
+            browsers: ['last 2 versions'],
+        })
+    ]
+};

src/js/full.js

@@ -1,3 +1,4 @@
 import WebSlides from './modules/webslides';
+require('../scss/full.scss');
 
 window.WebSlides = WebSlides;

src/js/modules/slide.js

@@ -5,10 +5,18 @@ const CLASSES = {
   CURRENT: 'current'
 };
 
+const Events = {
+  ENTER: 'dom:enter',
+  LEAVE: 'dom:leave',
+  DISABLE: 'slide:disable',
+  ENABLE: 'slide:enable',
+  SHOW: 'slide:show'
+};
+
 /**
  * Wrapper for the Slide section.
  */
-export default class Slide {
+class Slide {
   /**
    * Bootstraps the slide by saving some data, adding a class and hiding it.
    * @param {Element} el Section element.
@@ -29,7 +37,7 @@ export default class Slide {
      */
     this.i = i;
 
-    this.el.id = 'section-' + (i + 1);
+    this.el.id = this.el.id ? this.el.id : `section-${(i + 1)}`;
     this.el.classList.add(CLASSES.SLIDE);
 
     // Hide slides by default
@@ -50,24 +58,60 @@ export default class Slide {
   show() {
     DOM.show(this.el);
     this.el.classList.add(CLASSES.CURRENT);
+    this.fire_(Events.SHOW);
   }
 
   /**
    * Moves the section to the bottom of the section's list.
+   * @fires Slide#dom:leave
+   * @fires Slide#dom:enter
    */
   moveAfterLast() {
     const last = this.parent.childNodes[this.parent.childElementCount - 1];
 
+    this.fire_(Events.LEAVE);
     this.parent.insertBefore(this.el, last.nextSibling);
+    this.fire_(Events.ENTER);
   }
 
   /**
    * Moves the section to the top of the section's list.
+   * @fires Slide#dom:leave
+   * @fires Slide#dom:enter
    */
   moveBeforeFirst() {
     const first = this.parent.childNodes[0];
 
+    this.fire_(Events.LEAVE);
     this.parent.insertBefore(this.el, first);
+    this.fire_(Events.ENTER);
+  }
+
+  /**
+   * Fires an enable event.
+   * @fires Slide#slide:enable
+   */
+  enable() {
+    this.fire_(Events.ENABLE);
+  }
+
+  /**
+   * Fires a disable event.
+   * @fires Slide#slide:disable
+   */
+  disable() {
+    this.fire_(Events.DISABLE);
+  }
+
+  /**
+   * Fires an event passing the slide instance on the detail.
+   * @param {String} name Name of the event to fire.
+   * @private
+   */
+  fire_(name) {
+    DOM.fireEvent(this.el, name, {
+      slide: this
+    });
   }
 
   /**
@@ -79,4 +123,33 @@ export default class Slide {
   static isCandidate(el) {
     return el.nodeType === 1 && el.tagName === 'SECTION';
   }
+
+  /**
+   * Gets the section element from an inner element.
+   * @param {Node} el
+   * @return {{section: ?Node, i: ?number}} A map with the section and the
+   * position of the section.
+   */
+  static getSectionFromEl(el) {
+    let parent = el;
+    let section = null;
+    let i = null;
+
+    while (parent.parentElement &&
+          !parent.classList.contains(CLASSES.SLIDE)) {
+      parent = parent.parentElement;
+    }
+
+    if (parent.classList.contains(CLASSES.SLIDE)) {
+      section = parent;
+      i = parseInt(section.id.replace('section-', ''), 10);
+    }
+
+    return {section, i};
+  }
 }
+
+export {
+  Slide as default,
+  Events
+};

src/js/modules/webslides.js

@@ -1,36 +1,71 @@
 import Plugins from '../plugins/plugins';
 import Slide from './slide';
 import DOM from '../utils/dom';
-import ScrollHelper from '../utils/scroll-to';
+import scrollTo from '../utils/scroll-to';
 
 const CLASSES = {
-  VERTICAL: 'vertical'
+  VERTICAL: 'vertical',
+  READY: 'ws-ready',
+  DISABLED: 'disabled'
 };
 
 // Default plugins
 const PLUGINS = {
+  'autoslide': Plugins.AutoSlide,
+  'clickNav': Plugins.ClickNav,
   'grid': Plugins.Grid,
   'hash': Plugins.Hash,
   'keyboard': Plugins.Keyboard,
   'nav': Plugins.Navigation,
   'scroll': Plugins.Scroll,
-  'touch': Plugins.Touch
+  'touch': Plugins.Touch,
+  'video': Plugins.Video,
+  'youtube': Plugins.YouTube,
+  'zoom': Plugins.Zoom
 };
 
+
+/**
+ * WebSlides module.
+ */
 export default class WebSlides {
   /**
    * Options for WebSlides
-   * @param {number|boolean} autoslide Is false by default. If a number is
-   * provided, it will autoslide every given milliseconds.
+   * @param {number|boolean} autoslide If a number is provided, it will allow
+   * autosliding by said amount of milliseconds.
+   * @param {boolean} changeOnClick If true, it will allow
+   * clicking on any place to change the slide.
+   * @param {boolean} loop Whether to go to first slide from last one or not.
+   * @param {number} minWheelDelta Controls the amount of needed scroll to
+   * trigger navigation.
+   * @param {boolean} navigateOnScroll Whether scroll can trigger navigation or
+   * not.
+   * @param {number} scrollWait Controls the amount of time to wait till
+   * navigation can occur again with scroll.
+   * @param {number} slideOffset Controls the amount of needed touch delta to
+   * trigger navigation.
+   * @param {boolean} showIndex Controls if the index can be shown.
    */
   constructor({
-    autoslide = false
+    autoslide = false,
+    changeOnClick = false,
+    loop = true,
+    minWheelDelta = 40,
+    navigateOnScroll = true,
+    scrollWait = 450,
+    slideOffset = 50,
+    showIndex = true
   } = {}) {
     /**
      * WebSlide element.
      * @type {Element}
      */
     this.el = document.getElementById('webslides');
+
+    if (!this.el) {
+      throw new Error('Couldn\'t find the webslides container!');
+    }
+
     /**
      * Moving flag.
      * @type {boolean}
@@ -70,29 +105,30 @@ export default class WebSlides {
      */
     this.plugins = {};
     /**
-     * Interval ID reference for the autoslide.
-     * @type {?number}
-     * @private
+     * Options dictionary.
+     * @type {Object}
      */
-    this.interval_ = null;
+    this.options = {
+      autoslide,
+      changeOnClick,
+      loop,
+      minWheelDelta,
+      navigateOnScroll,
+      scrollWait,
+      slideOffset,
+      showIndex
+    };
     /**
-     * Amount of time to wait to go to next slide automatically or false to
-     * disable the feature.
-     * @type {boolean|number}
-     * @private
+     * Initialisation flag.
+     * @type {boolean}
      */
-    this.autoslide_ = autoslide;
-
-    if (!this.el) {
-      throw new Error('Couldn\'t find the webslides container!');
-    }
+    this.initialised = false;
 
     // Bootstrapping
     this.removeChildren_();
     this.grabSlides_();
     this.createPlugins_();
     this.initSlides_();
-    this.play();
     // Finished
     this.onInit_();
   }
@@ -122,8 +158,8 @@ export default class WebSlides {
    */
   createPlugins_() {
     Object.keys(PLUGINS).forEach(pluginName => {
-      const pluginCto = PLUGINS[pluginName];
-      this.plugins[pluginName] = new pluginCto(this);
+      const PluginCto = PLUGINS[pluginName];
+      this.plugins[pluginName] = new PluginCto(this);
     });
   }
 
@@ -133,7 +169,9 @@ export default class WebSlides {
    * @fires WebSlide#ws:init
    */
   onInit_() {
+    this.initialised = true;
     DOM.fireEvent(this.el, 'ws:init');
+    document.documentElement.classList.add(CLASSES.READY);
   }
 
   /**
@@ -141,7 +179,7 @@ export default class WebSlides {
    * @private
    */
   grabSlides_() {
-    this.slides = Array.from(this.el.childNodes)
+    this.slides = DOM.toArray(this.el.childNodes)
         .map((slide, i) => new Slide(slide, i));
 
     this.maxSlide_ = this.slides.length;
@@ -150,12 +188,14 @@ export default class WebSlides {
   /**
    * Goes to a given slide.
    * @param {!number} slideI The slide index.
-   * @param {?boolean} forward Whether we're forcing moving forward/backwards.
+   * @param {?boolean=} forward Whether we're forcing moving forward/backwards.
    * This parameter is used only from the goNext, goPrev functions to adjust the
    * scroll animations.
    */
   goToSlide(slideI, forward = null) {
-    if (this.isValidIndexSlide_(slideI) && !this.isMoving) {
+    if (this.isValidIndexSlide_(slideI) &&
+        !this.isMoving &&
+        this.currentSlideI_ !== slideI) {
       this.isMoving = true;
       let isMovingForward = false;
 
@@ -186,35 +226,36 @@ export default class WebSlides {
    * @param {Function} callback Callback to be called upon finishing. This is an
    * async function so it'll happen once the scroll animation finishes.
    * @private
-   * @see DOM.lockScroll
-   * @see DOM.unlockScroll
-   * @see ScrollHelper.scrollTo
+   * @see scrollTo
    */
   scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
-    DOM.lockScroll();
+    this.el.style.overflow = 'hidden';
 
     if (!isMovingForward) {
       nextSlide.moveBeforeFirst();
       nextSlide.show();
-      ScrollHelper.scrollTo(this.currentSlide_.el.offsetTop, 0);
+      scrollTo(this.currentSlide_.el.offsetTop, 0);
     } else {
       nextSlide.show();
     }
 
-    ScrollHelper.scrollTo(nextSlide.el.offsetTop, 500, () => {
+    scrollTo(nextSlide.el.offsetTop, 500, () => {
       this.currentSlide_.hide();
 
       if (isMovingForward) {
         this.currentSlide_.moveAfterLast();
       }
 
-      DOM.unlockScroll();
-      setTimeout(() => { callback.call(this, nextSlide); }, 150);
+      this.el.style.overflow = 'auto';
+      setTimeout(() => {
+        callback.call(this, nextSlide);
+      }, 150);
     });
   }
 
   /**
-   * Transitions to a slide, without doing the scroll animation.
+   * Transitions to a slide, without doing the scroll animation. If the page is
+   * already initialised and on mobile device, it will do a slide animation.
    * @param {boolean} isMovingForward Whether we're going forward or backwards.
    * @param {Slide} nextSlide Next slide.
    * @param {Function} callback Callback to be called upon finishing. This is a
@@ -222,10 +263,12 @@ export default class WebSlides {
    * @private
    */
   transitionToSlide_(isMovingForward, nextSlide, callback) {
-    ScrollHelper.scrollTo(0, 0);
+    scrollTo(0, 0);
+    let className = 'slideInRight';
 
     if (!isMovingForward) {
       nextSlide.moveBeforeFirst();
+      className = 'slideInLeft';
     }
 
     if (this.currentSlide_) {
@@ -237,7 +280,19 @@ export default class WebSlides {
     }
 
     nextSlide.show();
-    callback.call(this, nextSlide);
+
+    if (this.initialised &&
+        this.plugins.touch &&
+        this.plugins.touch.isEnabled) {
+      DOM.once(nextSlide.el, DOM.getAnimationEvent(), () => {
+        nextSlide.el.classList.remove(className);
+        callback.call(this, nextSlide);
+      });
+
+      nextSlide.el.classList.add(className);
+    } else {
+      callback.call(this, nextSlide);
+    }
   }
 
   /**
@@ -249,8 +304,13 @@ export default class WebSlides {
    * @private
    */
   onSlideChange_(slide) {
+    if (this.currentSlide_) {
+      this.currentSlide_.disable();
+    }
+
     this.currentSlide_ = slide;
     this.currentSlideI_ = slide.i;
+    this.currentSlide_.enable();
     this.isMoving = false;
 
     DOM.fireEvent(this.el, 'ws:slide-change', {
@@ -267,6 +327,10 @@ export default class WebSlides {
     let nextIndex = this.currentSlideI_ + 1;
 
     if (nextIndex >= this.maxSlide_) {
+      if (!this.options.loop) {
+        return;
+      }
+
       nextIndex = 0;
     }
 
@@ -280,6 +344,10 @@ export default class WebSlides {
     let prevIndex = this.currentSlideI_ - 1;
 
     if (prevIndex < 0) {
+      if (!this.options.loop) {
+        return;
+      }
+
       prevIndex = this.maxSlide_ - 1;
     }
 
@@ -293,7 +361,7 @@ export default class WebSlides {
    * @private
    */
   isValidIndexSlide_(i) {
-    return i >= 0 && i < this.maxSlide_;
+    return typeof i === 'number' && i >= 0 && i < this.maxSlide_;
   }
 
   /**
@@ -314,6 +382,7 @@ export default class WebSlides {
     // Keeping the order
     if (slideNumber !== 0) {
       let i = 0;
+
       while(i < slideNumber) {
         this.slides[i].moveAfterLast();
         i++;
@@ -323,13 +392,78 @@ export default class WebSlides {
     this.goToSlide(slideNumber);
   }
 
+  /**
+   * Toggles zoom
+   */
+  toggleZoom() {
+    if (this.options.showIndex) {
+      this.plugins.zoom.toggleZoom();
+    }
+  }
+
+  /**
+   * Disables the webslides element adding a class "disabled"
+   */
+  disable() {
+    this.el.classList.add(CLASSES.DISABLED);
+
+    if (this.plugins.autoslide &&
+      this.plugins.autoslide.time !== false) {
+      this.plugins.autoslide.stop();
+    }
+  }
+
+  /**
+   * Enables the webslides element removing a class "disabled"
+   */
+  enable() {
+    this.el.classList.remove(CLASSES.DISABLED);
+
+    if (this.plugins.autoslide &&
+      this.plugins.autoslide.time !== false) {
+      this.plugins.autoslide.play();
+    }
+  }
+
+  /**
+   * Checks if it is disabled
+   * @return {boolean}
+   */
+  isDisabled() {
+    return this.el.classList.contains(CLASSES.DISABLED);
+  }
+
+  /**
+   * Puts the browser into fullscreen
+   */
+  fullscreen() {
+    const el = document.documentElement;
+    const isFullscreen = document.fullscreen
+      || document.webkitIsFullScreen
+      || document.mozFullScreen
+      || document.msFullScreenElement;
+
+    if (!isFullscreen) {
+      /* istanbul ignore next hard to test prefixes */
+      const requestFullscreen = el.requestFullscreen
+          || el.webkitRequestFullScreen
+          || el.mozRequestFullScreen
+          || el.msRequestFullscreen;
+      requestFullscreen.call(el);
+    } else {
+      /* istanbul ignore next hard to test prefixes */
+      const cancelFullscreen = document.exitFullScreen
+        || document.webkitCancelFullScreen
+        || document.mozCancelFullScreen
+        || document.msExitFullscreen;
+
+      cancelFullscreen.call(document);
+    }
+  }
+
   /**
    * Registers a plugin to be loaded when the instance is created. It allows
    * (on purpose) to replace default plugins.
-   * Those being:
-   *  - Navigation
-   *  - Hash
-   *  - Keyboard
    * @param {!string} key They key under which it'll be stored inside of the
    * instance, inside the plugins dict.
    * @param {!Function} cto Plugin constructor.
@@ -337,28 +471,4 @@ export default class WebSlides {
   static registerPlugin(key, cto) {
     PLUGINS[key] = cto;
   }
-
-  /**
-   * Starts autosliding all the slides if it's not currently doing it and the
-   * autoslide option was a number greater than 0.
-   * @param {?number} time Amount of milliseconds to wait to go to next slide
-   * automatically.
-   */
-  play(time) {
-    time = time || this.autoslide_;
-
-    if (!this.interval_ && Number.isInteger(time) && time > 0) {
-      this.interval_ = setInterval(this.goNext.bind(this), time);
-    }
-  }
-
-  /**
-   * Stops autosliding all the slides.
-   */
-  stop() {
-    if (this.interval_) {
-      clearInterval(this.interval_);
-      this.interval_ = null;
-    }
-  }
 }

src/js/plugins/autoslide.js

@@ -0,0 +1,74 @@
+import DOM from '../utils/dom';
+
+/**
+ * Autoslide plugin.
+ */
+export default class AutoSlide {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+    /**
+     * Interval ID reference for the autoslide.
+     * @type {?number}
+     * @private
+     */
+    this.interval_ = null;
+    /**
+     * Internal stored time.
+     * @type {?number}
+     */
+    this.time = this.ws_.options.autoslide;
+
+    if (this.time) {
+      DOM.once(wsInstance.el, 'ws:init', this.play.bind(this));
+      document.body.addEventListener('focus', this.onFocus.bind(this));
+    }
+  }
+
+  /**
+   * On focus handler. Will decide if stops/play depending on the focused
+   * element if autoslide is active.
+   */
+  onFocus() {
+    if (DOM.isFocusableElement()) {
+      this.stop();
+    } else if (this.interval_ === null) {
+      this.play();
+    }
+  }
+
+  /**
+   * Starts autosliding all the slides if it's not currently doing it and the
+   * autoslide option was a number greater than 0.
+   * @param {?number=} time Amount of milliseconds to wait to go to next slide
+   * automatically.
+   */
+  play(time) {
+    if (typeof time !== 'number') {
+      time = this.time;
+    }
+
+    this.time = time;
+
+    if (!this.interval_ && typeof time === 'number' && time > 0) {
+      this.interval_ = setInterval(this.ws_.goNext.bind(this.ws_), time);
+    }
+  }
+
+  /**
+   * Stops autosliding all the slides.
+   */
+  stop() {
+    if (this.interval_) {
+      clearInterval(this.interval_);
+      this.interval_ = null;
+    }
+  }
+}

src/js/plugins/click-nav.js

@@ -0,0 +1,42 @@
+const CLICKABLE_ELS = [
+  'INPUT',
+  'SELECT',
+  'OPTION',
+  'BUTTON',
+  'A',
+  'TEXTAREA'
+];
+
+/**
+ * ClickNav plugin that allows to click on the page to get to the next slide.
+ */
+export default class ClickNav {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    if (wsInstance.options.changeOnClick) {
+      this.ws_.el.addEventListener('click', this.onClick_.bind(this));
+    }
+  }
+
+  /**
+   * Reacts to the click event. It will go to the next slide unless the element
+   * has a data-prevent-nav attribute or is on the list of CLICKABLE_ELS.
+   * @param {MouseEvent} event The click event.
+   * @private
+   */
+  onClick_(event) {
+    if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 &&
+      typeof event.target.dataset.preventNav === 'undefined') {
+      this.ws_.goNext();
+    }
+  }
+}

src/js/plugins/grid.js

@@ -1,9 +1,16 @@
 import Keys from '../utils/keys';
 
+const GRID_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAg' +
+  'MAAACdGdVrAAAACVBMVEUAAAAtXsUtXcPDDPUWAAAAA3RSTlMAZmHzZFkxAAAAFklEQVQI12M' +
+  'AA9bBR3ExhAJB1iooBQBGwgVEs/QtuAAAAABJRU5ErkJggg==';
+
+/**
+ * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
+ */
 export default class Grid {
   /**
-   * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
    * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
    */
   constructor(wsInstance) {
     /**
@@ -13,14 +20,14 @@ export default class Grid {
     this.ws_ = wsInstance;
 
     const CSS = `body.baseline {
-                  background: url(../images/baseline.png) left top .8rem/.8rem;
+                  background: url(${GRID_IMAGE}) left top .8rem/.8rem;
                 }`;
     const head = document.head || document.getElementsByTagName('head')[0];
     const style = document.createElement('style');
 
     style.type = 'text/css';
 
-    if (style.styleSheet){
+    if (style.styleSheet) {
       style.styleSheet.cssText = CSS;
     } else {
       style.appendChild(document.createTextNode(CSS));
@@ -38,7 +45,7 @@ export default class Grid {
    */
   onKeyPress_(event) {
     if (event.which === Keys.ENTER) {
-      document.body.toggleClass('baseline');
+      document.body.classList.toggle('baseline');
     }
   }
 }

src/js/plugins/hash.js

@@ -7,8 +7,8 @@ const slideRegex = /#slide=(\d+)/;
  */
 export default class Hash {
   /**
-   * Listens to the slide change event and the hash change events.
-   * @param wsInstance
+   * @param {WebSlides} wsInstance
+   * @constructor
    */
   constructor(wsInstance) {
     this.ws_ = wsInstance;
@@ -29,6 +29,11 @@ export default class Hash {
     }
   }
 
+  /**
+   * Handler for the slide change event which updates the slide on the hash.
+   * @param {Event} event
+   * @private
+   */
   static onSlideChange_(event) {
     Hash.setSlideNumber(event.detail.currentSlide);
   }
@@ -40,14 +45,14 @@ export default class Hash {
    * @return {?number}
    */
   static getSlideNumber() {
-    let results = document.location.hash.match(slideRegex);
+    const results = document.location.hash.match(slideRegex);
     let slide = 0;
 
     if (Array.isArray(results)) {
       slide = parseInt(results[1], 10);
     }
 
-    if (!Number.isInteger(slide) || slide < 0 || !Array.isArray(results)) {
+    if (typeof slide !== 'number' || slide < 0 || !Array.isArray(results)) {
       slide = null;
     } else {
       slide--; // Convert to 0 index

src/js/plugins/keyboard.js

@@ -1,9 +1,13 @@
 import Keys from '../utils/keys';
+import DOM from '../utils/dom';
 
+/**
+ * Keyboard interaction plugin.
+ */
 export default class Keyboard {
   /**
-   * Keyboard interaction plugin.
    * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
    */
   constructor(wsInstance) {
     /**
@@ -23,27 +27,58 @@ export default class Keyboard {
    */
   onKeyPress_(event) {
     let method;
+    let argument;
 
-    if (event.which === Keys.SPACE) {
-      method = this.ws_.goNext;
-    } else {
-      if (this.ws_.isVertical) {
-        if (event.which === Keys.DOWN) {
-          method = this.ws_.goNext;
-        } else if (event.which === Keys.UP) {
+    if (DOM.isFocusableElement() || this.ws_.isDisabled()) {
+      return;
+    }
+
+    switch (event.which) {
+      case Keys.AV_PAGE:
+        method = this.ws_.goNext;
+        break;
+      case Keys.SPACE:
+        if (event.shiftKey) {
           method = this.ws_.goPrev;
-        }
-      } else {
-        if (event.which === Keys.RIGHT) {
+        } else {
           method = this.ws_.goNext;
-        } else if (event.which === Keys.LEFT) {
-          method = this.ws_.goPrev;
         }
-      }
+        break;
+      case Keys.RE_PAGE:
+        method = this.ws_.goPrev;
+        break;
+      case Keys.HOME:
+        method = this.ws_.goToSlide;
+        argument = 0;
+        break;
+      case Keys.END:
+        method = this.ws_.goToSlide;
+        argument = this.ws_.maxSlide_ - 1;
+        break;
+      case Keys.DOWN:
+        method = this.ws_.isVertical ? this.ws_.goNext : null;
+        break;
+      case Keys.UP:
+        method = this.ws_.isVertical ? this.ws_.goPrev : null;
+        break;
+      case Keys.LEFT:
+        method = !this.ws_.isVertical ? this.ws_.goPrev : null;
+        break;
+      case Keys.RIGHT:
+        method = !this.ws_.isVertical ? this.ws_.goNext : null;
+        break;
+      case Keys.F:
+        if (!event.metaKey && ! event.ctrlKey) {
+          method = this.ws_.fullscreen;
+        }
+
+        break;
     }
 
     if (method) {
-      method.call(this.ws_);
+      method.call(this.ws_, argument);
+      // Prevents Firefox key events.
+      event.preventDefault();
     }
   }
 }

src/js/plugins/navigation.js

@@ -18,11 +18,13 @@ const LABELS = {
   }
 };
 
+/**
+ * Navigation plugin.
+ */
 export default class Navigation {
   /**
-   * The Navigation constructor. It'll create all the nodes needed for the
-   * navigation such as the arrows and the counter.
    * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
    */
   constructor(wsInstance) {
     const arrowLabels = wsInstance.isVertical ?
@@ -46,7 +48,7 @@ export default class Navigation {
      * Counter Element.
      * @type {Element}
      */
-    this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER);
+    this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER, wsInstance);
     /**
      * @type {WebSlides}
      * @private
@@ -58,6 +60,9 @@ export default class Navigation {
     this.el.appendChild(this.counter);
 
     this.ws_.el.appendChild(this.el);
+    this.slides = Array.prototype.slice.call(
+      document.querySelectorAll('#webslides section')).map(s => s.id);
+
     this.bindEvents_();
   }
 
@@ -70,6 +75,30 @@ export default class Navigation {
       'ws:slide-change', this.onSlideChanged_.bind(this));
     this.next.addEventListener('click', this.onButtonClicked_.bind(this));
     this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
+    this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
+    document.body.addEventListener('click', this.onBodyClicked_.bind(this));
+  }
+
+  /**
+   * Whenever the body is clicked, check if the element has [data-slide] attr
+   * and if so, navigate to it.
+   * @param {MouseEvent} event Click event
+   */
+  onBodyClicked_(event) {
+    const matches = document.body.matches || document.body.msMatchesSelector;
+    let el;
+
+    if (matches.call(event.target, '[data-slide]')) {
+      el = event.target;
+    } else if (matches.call(event.target, '[data-slide] *')) {
+      el = event.target.querySelector('[data-slide]');
+    }
+
+    if (el) {
+      event.preventDefault();
+      const i = this.slides.indexOf(el.dataset.slide);
+      this.ws_.goToSlide(i);
+    }
   }
 
   /**
@@ -78,7 +107,11 @@ export default class Navigation {
    * @param {string|number} max Max slide number.
    */
   updateCounter(current, max) {
-    this.counter.textContent = `${current} / ${max}`;
+    if (this.ws_.options.showIndex) {
+      this.counter.childNodes[0].textContent = `${current} / ${max}`;
+    } else {
+      this.counter.textContent = `${current} / ${max}`;
+    }
   }
 
   /**
@@ -95,6 +128,24 @@ export default class Navigation {
     return arrow;
   }
 
+  /**
+   * Creates the navigation counter.
+   * @param {!String} id Desired ID for the counter.
+   * @param {WebSlides} ws_ WebSlides object.
+   * @return {Element} The arrow element.
+   */
+  static createCounter(id, ws_) {
+    const counter = DOM.createNode('span', id);
+    if (ws_.options.showIndex) {
+      const link = document.createElement('a');
+      link.href = '#';
+      link.title = 'View all slides';
+      counter.appendChild(link);
+    }
+
+    return counter;
+  }
+
   /**
    * Slide Change event handler. Will update the text on the navigation.
    * @param {CustomEvent} event
@@ -113,8 +164,10 @@ export default class Navigation {
     event.preventDefault();
     if (event.target === this.next) {
       this.ws_.goNext();
-    } else {
+    } else if (event.target === this.prev) {
       this.ws_.goPrev();
+    } else {
+      this.ws_.toggleZoom();
     }
   }
 }

src/js/plugins/plugins.js

@@ -1,15 +1,25 @@
+import AutoSlide from './autoslide';
+import ClickNav from './click-nav';
 import Grid from './grid';
 import Hash from './hash';
 import Keyboard from './keyboard';
 import Navigation from './navigation';
 import Scroll from './scroll';
 import Touch from './touch';
+import Video from './video';
+import YouTube from './youtube';
+import Zoom from './zoom';
 
 export default {
+  AutoSlide,
+  ClickNav,
   Grid,
   Hash,
   Keyboard,
   Navigation,
   Scroll,
-  Touch
+  Touch,
+  Video,
+  YouTube,
+  Zoom
 };

src/js/plugins/scroll.js

@@ -1,11 +1,13 @@
-import ScrollHelper from '../utils/scroll-to';
+import MobileDetector from '../utils/mobile-detector';
 
-const MIN_WHEEL_DELTA = 40;
 
+/**
+ * Scroll plugin.
+ */
 export default class Scroll {
   /**
-   * Scroll handler for the WebSlides.
    * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
    */
   constructor(wsInstance) {
     /**
@@ -13,16 +15,60 @@ export default class Scroll {
      * @private
      */
     this.ws_ = wsInstance;
-
-    this.scrollContainer_ = ScrollHelper.getScrollableContainer();
+    /**
+     * Where the scroll is going to happen. The WebSlides element.
+     * @type {Element}
+     * @private
+     */
+    this.scrollContainer_ = wsInstance.el;
+    /**
+     * Whether movement is happening up or down.
+     * @type {boolean}
+     * @private
+     */
     this.isGoingUp_ = false;
+    /**
+     * Whether movement is happening left or right.
+     * @type {boolean}
+     * @private
+     */
+    this.isGoingLeft_ = false;
+    /**
+     * Timeout id holder.
+     * @type {?number}
+     * @private
+     */
+    this.timeout_ = null;
 
-    if (this.ws_.isVertical) {
+    // Disabling from option
+    if (!this.ws_.options.navigateOnScroll) {
+      return;
+    }
+
+    if (!MobileDetector.isAny()) {
         this.scrollContainer_.addEventListener(
             'wheel', this.onMouseWheel_.bind(this));
+
+        if (!wsInstance.isVertical) {
+          wsInstance.el.addEventListener(
+              'ws:slide-change', this.onSlideChange_.bind(this));
+        }
     }
   }
 
+  /**
+   * When the slides change, set an inner timeout to avoid prematurely
+   * changing to the next slide again.
+   * @private
+   */
+  onSlideChange_() {
+    this.timeout_ = setTimeout(
+        () => {
+          this.timeout_ = null;
+        },
+        this.ws_.options.scrollWait);
+  }
+
   /**
    * Reacts to the wheel event. Detects whether is going up or down and decides
    * if it needs to move the slide based on the amount of delta.
@@ -30,15 +76,39 @@ export default class Scroll {
    * @private
    */
   onMouseWheel_(event) {
-    if (this.ws_.isMoving) {
+    if (this.ws_.isDisabled()) {
       return;
     }
 
-    const { deltaY: wheelDelta } = event;
-    this.isGoingUp_ = wheelDelta < 0;
+    if (this.ws_.isMoving || this.timeout_) {
+      event.preventDefault();
+      return;
+    }
 
-    if (Math.abs(wheelDelta) >= MIN_WHEEL_DELTA) {
-      if (this.isGoingUp_) {
+    // Firefox uses lines instead of pixels for delta
+    const linesToPx = event.deltaMode * this.ws_.options.minWheelDelta;
+    const {deltaY: wheelDeltaY, deltaX: wheelDeltaX} = event;
+    const isVertical = this.ws_.isVertical;
+    const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
+    this.isGoingUp_ = wheelDeltaY < 0;
+    this.isGoingLeft_ = wheelDeltaX < 0;
+
+
+    // If we're mainly moving horizontally, prevent default
+    if (isHorizontalMovement) {
+      if (!isVertical) {
+        event.preventDefault();
+      } else {
+        // If we're moving horizontally but this is vertical, return to avoid
+        // unwanted navigation.
+        return;
+      }
+    }
+
+    if (Math.abs(wheelDeltaY + linesToPx) >= this.ws_.options.minWheelDelta ||
+        Math.abs(wheelDeltaX + linesToPx) >= this.ws_.options.minWheelDelta) {
+      if ((isHorizontalMovement && this.isGoingLeft_) ||
+          (!isHorizontalMovement && this.isGoingUp_)) {
         this.ws_.goPrev();
       } else {
         this.ws_.goNext();
@@ -47,4 +117,4 @@ export default class Scroll {
       event.preventDefault();
     }
   }
-};
+}

src/js/plugins/touch.js

@@ -13,11 +13,13 @@ const EVENTS = {
   }
 };
 
-const SLIDE_OFFSET = 50;
-
+/**
+ * Touch plugin.
+ */
 export default class Touch {
   /**
    * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
    */
   constructor(wsInstance) {
     /**
@@ -27,14 +29,14 @@ export default class Touch {
     this.ws_ = wsInstance;
 
     /**
-     * Start position for the X coord.
+     * Start position for the X coordinate.
      * @type {number}
      * @private
      */
     this.startX_ = 0;
 
     /**
-     * Start position for the Y coord.
+     * Start position for the Y coordinate.
      * @type {number}
      * @private
      */
@@ -61,6 +63,27 @@ export default class Touch {
      */
     this.isEnabled = false;
 
+    /**
+     * Whether is a gesture or not.
+     * @type {boolean}
+     * @private
+     */
+    this.isGesture = false;
+
+    /**
+     * Stores start touch event (x, y).
+     * @type {array}
+     * @private
+     */
+    this.startTouches = [];
+
+    /**
+     * Stores end touch event (x, y).
+     * @type {array}
+     * @private
+     */
+    this.endTouches = [];
+
     let events;
 
     if (MobileDetector.isAny()) {
@@ -75,35 +98,52 @@ export default class Touch {
       this.isEnabled = true;
       document.addEventListener(events.START, this.onStart_.bind(this), false);
       document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
-      document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
       document.addEventListener(events.END, this.onStop_.bind(this), false);
     }
   }
 
   /**
    * Start touch handler. Saves starting points.
-   * @param event
+   * @param {Event} event The Touch event.
    * @private
    */
   onStart_(event) {
+    if (this.ws_.isDisabled()) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
-    this.startX_ = info.x;
-    this.startY_ = info.y;
-    this.endX_ = info.x;
-    this.endY_ = info.y;
+    if (event.touches.length === 1) {
+      this.startX_ = info.x;
+      this.startY_ = info.y;
+      this.endX_ = info.x;
+      this.endY_ = info.y;
+    } else if (event.touches.length > 1) {
+      this.startTouches = Touch.getTouchCoordinates(event);
+      this.endTouches = this.startTouches;
+      this.isGesture = true;
+    }
   }
 
   /**
    * Move touch handler. Saves end points.
-   * @param event
+   * @param {Event} event The Touch event.
    * @private
    */
   onMove_(event) {
+    if (this.ws_.isDisabled()) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
-    this.endX_ = info.x;
-    this.endY_ = info.y;
+    if (this.isGesture) {
+      this.endTouches = Touch.getTouchCoordinates(event);
+    } else {
+      this.endX_ = info.x;
+      this.endY_ = info.y;
+    }
   }
 
   /**
@@ -111,41 +151,76 @@ export default class Touch {
    * @private
    */
   onStop_() {
-    const diffX = this.startX_ - this.endX_;
-    const diffY = this.startY_ - this.endY_;
+    if (this.ws_.isDisabled()) {
+      return;
+    }
 
-    // It's an horizontal drag
-    if (Math.abs(diffX) > Math.abs(diffY)) {
-      if(diffX < -SLIDE_OFFSET) {
-        this.ws_.goPrev();
-      } else if(diffX > SLIDE_OFFSET) {
-        this.ws_.goNext();
+    if (this.isGesture) {
+      const startDistance = Math.sqrt(
+        Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) +
+        Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2)
+      );
+      const endDistance = Math.sqrt(
+        Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) +
+        Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2)
+      );
+      if (startDistance > endDistance) {
+        // Pinch gesture
+        this.ws_.toggleZoom();
+      }
+      this.isGesture = false;
+    } else {
+      const diffX = this.startX_ - this.endX_;
+      const diffY = this.startY_ - this.endY_;
+
+      // It's an horizontal drag
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        if (diffX < -this.ws_.options.slideOffset) {
+          this.ws_.goPrev();
+        } else if(diffX > this.ws_.options.slideOffset) {
+          this.ws_.goNext();
+        }
       }
     }
   }
 
+  /**
+   * Get X,Y coordinates from touch pointers.
+   * @param {Event} event
+   * @return {Object}
+   */
+  static getTouchCoordinates(event) {
+    return [
+      {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      },
+      {
+        x: event.touches[1].clientX,
+        y: event.touches[1].clientY
+      }
+    ];
+  }
+
   /**
    * Normalizes an event to deal with differences between PointerEvent and
    * TouchEvent.
-   * @param event
-   * @return {*}
+   * @param {Event} event
+   * @return {Object} Normalised touch points.
    */
   static normalizeEventInfo(event) {
-    let x;
-    let y;
-    let touchEvent = { pageX : 0, pageY : 0};
+    let touchEvent = {pageX: 0, pageY: 0};
 
-    if (typeof event.changedTouches !== 'undefined'){
+    if (typeof event.changedTouches !== 'undefined') {
       touchEvent = event.changedTouches[0];
-    }
-    else if (typeof event.originalEvent !== 'undefined' &&
-        typeof event.originalEvent.changedTouches !== 'undefined'){
+    } else if (typeof event.originalEvent !== 'undefined' &&
+        typeof event.originalEvent.changedTouches !== 'undefined') {
       touchEvent = event.originalEvent.changedTouches[0];
     }
 
-    x = event.offsetX || event.layerX || touchEvent.pageX;
-    y = event.offsetY || event.layerY || touchEvent.pageY;
+    const x = event.offsetX || event.layerX || touchEvent.pageX;
+    const y = event.offsetY || event.layerY || touchEvent.pageY;
 
-    return { x, y };
+    return {x, y};
   }
-};
+}

src/js/plugins/video.js

@@ -0,0 +1,57 @@
+import DOM from '../utils/dom';
+import {default as Slide, Events as SlideEvents} from '../modules/slide';
+
+/**
+ * Video plugin. Video plugin that allows to autoplay videos once the slide gets
+ * active.
+ */
+export default class Video {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance.
+   * @constructor
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    const videos = DOM.toArray(this.ws_.el.querySelectorAll('video'));
+
+    if (videos.length) {
+      videos.forEach(video => {
+        if (!video.hasAttribute('autoplay')) {
+          return;
+        }
+
+        video.removeAttribute('autoplay');
+        video.pause();
+        video.currentTime = 0;
+        const {i} = Slide.getSectionFromEl(video);
+        const slide = wsInstance.slides[i - 1];
+
+        slide.video = video;
+
+        slide.el.addEventListener(SlideEvents.ENABLE, Video.onSectionEnabled);
+        slide.el.addEventListener(SlideEvents.DISABLE, Video.onSectionDisabled);
+      });
+    }
+  }
+
+  /**
+   * On Section enable hook. Will play the video.
+   * @param {CustomEvent} event
+   */
+  static onSectionEnabled(event) {
+    event.detail.slide.video.play();
+  }
+
+  /**
+   * On Section enable hook. Will pause the video.
+   * @param {CustomEvent} event
+   */
+  static onSectionDisabled(event) {
+    event.detail.slide.video.pause();
+  }
+}

src/js/plugins/youtube.js

@@ -0,0 +1,270 @@
+/* global YT */
+import DOM from '../utils/dom';
+import {default as Slide, Events as SlideEvents} from '../modules/slide';
+
+/**
+ * Player wrapper around the YT player. This is mostly to get around the event
+ * in which we need to play a video which player isn't ready yet.
+ */
+class Player {
+  /**
+   * @param {Element} el
+   */
+  constructor(el) {
+    /**
+     * Whether the Player is ready or not.
+     * @type {boolean}
+     */
+    this.ready = false;
+    /**
+     * Ready callback.
+     * @type {?function}
+     */
+    this.onReadyCb = null;
+    /**
+     * Slide element in which the video is located.
+     * @type {Node}
+     */
+    this.slide = Slide.getSectionFromEl(el).section;
+    /**
+     * Whether it should autoplay on load or not.
+     * @type {boolean}
+     */
+    this.autoplay = typeof el.dataset.autoplay !== 'undefined';
+    /**
+     * Whether the video should be muted or not.
+     * @type {boolean}
+     */
+    this.isMuted = typeof el.dataset.mute !== 'undefined';
+
+    /**
+     * Options with which the player is created.
+     * @type {Object}
+     */
+    this.options = {
+      videoId: el.dataset.youtubeId,
+      playerVars: this.getPlayerVars(el),
+      events: {
+        onReady: this.onPlayerReady.bind(this)
+      }
+    };
+
+    /**
+     * The iframe in which the video is loaded.
+     * @type {Element}
+     */
+    this.el = el;
+    /**
+     * Timeout id.
+     * @type {?number}
+     */
+    this.timeout = null;
+
+    this.create();
+  }
+
+  /**
+   * Destroys the iframe. Saves the current time in case it gets restored.
+   */
+  destroy() {
+    this.currentTime = this.player.getCurrentTime();
+    this.player.destroy();
+    this.player = null;
+    this.el = this.slide.querySelector('[data-youtube]');
+    this.ready = false;
+  }
+
+  /**
+   * Creates the player.
+   */
+  create() {
+    this.player = new YT.Player(this.el, this.options);
+    this.el = this.player.getIframe();
+  }
+
+  /**
+   * Player ready callback. Will play the video if it was intended to be played
+   * and will also call any pending callbacks.
+   */
+  onPlayerReady() {
+    this.ready = true;
+
+    // Restoring the current time if saved
+    if (this.currentTime) {
+      this.player.seekTo(this.currentTime, true);
+      this.player.pauseVideo();
+      this.currentTime = null;
+    }
+
+    if (this.timeout && this.player.getPlayerState() !== 1) {
+      this.play();
+    }
+
+    if (this.onReadyCb) {
+      this.onReadyCb();
+      this.onReadyCb = null;
+    }
+  }
+
+  /**
+   * Plays the video.
+   */
+  play() {
+    if (this.ready) {
+      this.timeout = setTimeout(() => {
+        this.timeout = null;
+      }, 1000);
+
+      if (this.isMuted) {
+        this.player.mute();
+      } else {
+        this.player.unMute();
+      }
+
+      this.player.playVideo();
+    } else {
+      this.onReadyCb = this.play;
+    }
+  }
+
+  /**
+   * Pause playing the video if it's already playing.
+   */
+  pause() {
+    if (this.player &&
+        this.player.pauseVideo &&
+        this.player.getPlayerState() === 1) {
+      this.player.pauseVideo();
+    }
+  }
+
+  /**
+   * Parses the element to have the proper variables.
+   * @param {Element} element
+   * @return {Object} Player variables.
+   */
+  getPlayerVars(element) {
+    const vars = {
+      modestbranding: 1,
+      rel: 0,
+      origin: window.location.origin
+    };
+
+    if (this.slide.classList.contains('fullscreen')) {
+      // Disabling keyboard interaction for fullscreenvideos
+      vars.disablekb = 1;
+    }
+
+    if (typeof element.dataset.noControls !== 'undefined') {
+      vars.controls = 0;
+      vars.showinfo = 0;
+    }
+
+    if (typeof element.dataset.loop !== 'undefined') {
+      vars.loop = 1;
+      vars.playlist = element.dataset.youtubeId;
+    }
+
+    return vars;
+  }
+}
+
+/**
+ * Video plugin.
+ */
+export default class YouTube {
+  /**
+   * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
+   * @param {WebSlides} wsInstance The WebSlides instance
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    this.videos = DOM.toArray(this.ws_.el.querySelectorAll('[data-youtube]'));
+
+    if (this.videos.length) {
+      this.inject();
+    }
+  }
+
+  /**
+   * Once the YouTube API is ready this gets called so we can start the videos.
+   */
+  onYTReady() {
+    this.videos.forEach(video => {
+      const player = new Player(video);
+
+      if (typeof video.dataset.autoplay !== 'undefined') {
+        const {i} = Slide.getSectionFromEl(player.el);
+        const slide = this.ws_.slides[i - 1];
+
+        slide.player = player;
+
+        slide.el.addEventListener(SlideEvents.ENABLE, YouTube.onSlideEvent);
+        slide.el.addEventListener(SlideEvents.DISABLE, YouTube.onSlideEvent);
+        slide.el.addEventListener(SlideEvents.ENTER, YouTube.onSlideEvent);
+        slide.el.addEventListener(SlideEvents.LEAVE, YouTube.onSlideEvent);
+
+        if (this.ws_.currentSlide_ === slide) {
+          YouTube.onSectionEnabled(slide);
+        }
+      }
+    });
+  }
+
+  /**
+   * Injects the YouTube iFrame API into the page.
+   */
+  inject() {
+    window.onYouTubeIframeAPIReady = this.onYTReady.bind(this);
+    const tag = document.createElement('script');
+    tag.src = `https://www.youtube.com/iframe_api`;
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+  }
+
+  /**
+   * Reacts to any event on the slide.
+   * @param {CustomEvent} event
+   */
+  static onSlideEvent(event) {
+    const slide = event.detail.slide;
+
+    switch (event.type) {
+      case SlideEvents.ENABLE:
+        YouTube.onSectionEnabled(slide);
+        break;
+      case SlideEvents.DISABLE:
+        YouTube.onSectionDisabled(slide);
+        break;
+      case SlideEvents.LEAVE:
+        slide.player.destroy();
+        break;
+      case SlideEvents.ENTER:
+        slide.player.create();
+        break;
+    }
+  }
+
+  /**
+   * On Section enable hook. Will play the video.
+   * @param {Slide} slide
+   */
+  static onSectionEnabled(slide) {
+    if (slide.player.autoplay) {
+      slide.player.play();
+    }
+  }
+
+  /**
+   * On Section enable hook. Will pause the video.
+   * @param {Slide} slide
+   */
+  static onSectionDisabled(slide) {
+    slide.player.pause();
+  }
+}

src/js/plugins/zoom.js

@@ -0,0 +1,196 @@
+import DOM from '../utils/dom';
+import Keys from '../utils/keys';
+import scrollTo from '../utils/scroll-to';
+import Slide from '../modules/slide';
+
+const CLASSES = {
+  ZOOM: 'grid',
+  DIV: 'column',
+  WRAP: 'wrap-zoom',
+  WRAP_CONTAINER: 'wrap',
+  CURRENT: 'current',
+  SLIDE: 'slide',
+  ZOOM_ENABLED: 'ws-ready-zoom'
+};
+
+const ID = 'webslides-zoomed';
+
+/**
+ * Zoom plugin.
+ */
+export default class Zoom {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.zws_ = {};
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.isZoomed_ = false;
+
+    this.preBuildZoom_();
+    document.body.addEventListener('keydown', this.onKeyDown.bind(this));
+  }
+
+  /**
+   * On key down handler. Will decide if Zoom in or out
+   * @param {Event} event Key down event.
+   */
+  onKeyDown(event) {
+    if (!this.isZoomed_ && Keys.MINUS.some(key => key === event.which)) {
+      this.zoomIn();
+    } else if (this.isZoomed_ &&
+      (Keys.PLUS.some(key => key === event.which) ||
+        event.which === Keys.ESCAPE)) {
+      this.zoomOut();
+    }
+  }
+
+  /**
+   * Prepare zoom structure, scales the slides and uses a grid layout
+   * to show them.
+   */
+  preBuildZoom_() {
+    // Clone #webslides element
+    this.zws_.el = this.ws_.el.cloneNode();
+    this.zws_.el.id = ID;
+    this.zws_.wrap = DOM.createNode('div');
+    this.zws_.wrap.className = CLASSES.WRAP_CONTAINER;
+    this.zws_.el.appendChild(this.zws_.wrap);
+    this.zws_.grid = DOM.createNode('div');
+    this.zws_.grid.className = CLASSES.ZOOM;
+    this.zws_.wrap.appendChild(this.zws_.grid);
+
+    this.zws_.el.addEventListener('click', () => this.toggleZoom());
+
+    // Clone the slides
+    this.zws_.slides = [].map.call(this.ws_.slides,
+        (slide, i) => {
+          const s_ = slide.el.cloneNode(true);
+          this.zws_.grid.appendChild(s_);
+          return new Slide(s_, i);
+        });
+
+    this.disable();
+    DOM.after(this.zws_.el, this.ws_.el);
+
+    // Creates the container for each slide
+    this.zws_.slides.forEach(elem => this.createSlideBlock_(elem));
+  }
+
+  /**
+   * Creates a block structure around the slide.
+   * @param {Element} elem slide element.
+   */
+  createSlideBlock_(elem) {
+    // Wraps the slide around a container
+    const wrap = DOM.wrap(elem.el, 'div');
+    wrap.className = CLASSES.WRAP;
+    wrap.setAttribute('id', `zoomed-${elem.el.getAttribute('id')}`);
+
+    // Slide container, need due to flexbox styles
+    const div = DOM.wrap(wrap, 'div');
+    div.className = CLASSES.DIV;
+
+    // Adding some layer for controlling click events
+    const divLayer = DOM.createNode('div');
+    divLayer.className = 'zoom-layer';
+    divLayer.addEventListener('click', e => {
+      e.stopPropagation();
+      this.zoomOut();
+      this.ws_.goToSlide(elem.i);
+    });
+    wrap.appendChild(divLayer);
+
+    // Slide number
+    const slideNumber = DOM.createNode('p', '', `${elem.i + 1}`);
+    slideNumber.className = 'text-slide-number';
+    div.appendChild(slideNumber);
+  }
+
+  /**
+   * Toggles zoom.
+   */
+  toggleZoom() {
+    if (this.isZoomed_) {
+      this.zoomOut();
+    } else {
+      this.zoomIn();
+    }
+  }
+
+  /**
+   * Zoom In the slider, scales the slides and uses a grid layout to show them.
+   */
+  zoomIn() {
+    if (!this.ws_.options.showIndex) return;
+    this.enable();
+    const currentId = this.ws_.currentSlide_.el.id;
+    const zoomedCurrent = this.zws_.el
+      .querySelector(`.${CLASSES.WRAP}.${CLASSES.CURRENT}`);
+
+    if (zoomedCurrent) {
+      zoomedCurrent.classList.remove(CLASSES.CURRENT);
+    }
+
+    const actualCurrent = this.zws_.el
+      .querySelector(`#zoomed-${currentId}`);
+    actualCurrent.classList.add(CLASSES.CURRENT);
+
+    this.isZoomed_ = true;
+    document.documentElement.classList.add(CLASSES.ZOOM_ENABLED);
+
+    setTimeout(() => {
+      this.ws_.disable();
+      this.zws_.el.classList.add('in');
+      const wrapCSS = window.getComputedStyle(this.zws_.grid);
+      const scrollingElement = document.body;
+
+      scrollTo(actualCurrent.parentNode.offsetTop
+        + DOM.parseSize(wrapCSS.paddingTop), 50, () => {}, scrollingElement);
+    }, 50);
+  }
+
+  /**
+   * Zoom Out the slider, remove scale from the slides.
+   */
+  zoomOut() {
+    if (!this.ws_.options.showIndex) return;
+    this.zws_.el.classList.remove('in');
+
+    setTimeout(() => {
+      this.ws_.enable();
+      this.disable();
+      this.isZoomed_ = false;
+      document.documentElement.classList.remove(CLASSES.ZOOM_ENABLED);
+    }, 400);
+  }
+
+  /**
+   * Hides the zoom container
+   */
+  disable() {
+    this.zws_.el.classList.add('disabled');
+  }
+
+  /**
+   * Shows the zoom container
+   */
+  enable() {
+    this.zws_.el.classList.remove('disabled');
+  }
+}

src/js/utils/custom-event.js

@@ -5,12 +5,17 @@ const NativeCustomEvent = window.CustomEvent;
  * completely on IE.
  * @return {boolean} Whether it can be used or not.
  */
-function canIuseNativeCustom () {
+function canIuseNativeCustom() {
   try {
-    const p = new NativeCustomEvent('t', { detail: { a: 'b' } });
-    return  't' === p.type && 'b' === p.detail.a;
-  } catch (e) {
-  }
+    const p = new NativeCustomEvent('t', {
+      detail: {
+        a: 'b'
+      }
+    });
+    return 't' === p.type && 'b' === p.detail.a;
+  } catch (e) { }
+
+  /* istanbul ignore next: hard to reproduce on test environment  */
   return false;
 }
 
@@ -21,6 +26,7 @@ function canIuseNativeCustom () {
  * @return {Event}
  * @constructor
  */
+/* istanbul ignore next: hard to reproduce on test environment  */
 const IECustomEvent = function CustomEvent(type, params) {
   const e = document.createEvent('CustomEvent');
 
@@ -33,6 +39,7 @@ const IECustomEvent = function CustomEvent(type, params) {
   return e;
 };
 
+/* istanbul ignore next: hard to reproduce on test environment  */
 const WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
 
 export default WSCustomEvent;

src/js/utils/dom.js

@@ -1,5 +1,7 @@
 import WSCustomEvent from './custom-event';
 
+let transitionEvent = '';
+let animationEvent = '';
 
 /**
  * Static class for DOM helper.
@@ -10,13 +12,15 @@ export default class DOM {
    * @param {string} tag The name of the tag of the needed element.
    * @param {string} id The desired id for the element. It defaults to an
    * empty string.
-   * @param {string} text The desired text to go inside of the element. It defaults
-   * to an empty string.
+   * @param {string} text The desired text to go inside of the element. It
+   * defaults to an empty string.
    * @return {Element}
    */
   static createNode(tag, id = '', text = '') {
     const node = document.createElement(tag);
-    node.id = id;
+    if (id) {
+      node.id = id;
+    }
 
     if (text) {
       node.textContent = text;
@@ -25,6 +29,90 @@ export default class DOM {
     return node;
   }
 
+  /**
+   * Listens for an event once.
+   * @param {Element} el Element to listen to.
+   * @param {string} event Event Type.
+   * @param {Function} callback Function to execute once the event fires.
+   */
+  static once(el, event, callback) {
+    const cb = e => {
+      if (e.target === el) {
+        el.removeEventListener(event, cb);
+        callback(e);
+      }
+    };
+
+    el.addEventListener(event, cb, false);
+  }
+
+  /**
+   * Gets the prefixed transitionend event.
+   * @param {?Element} optEl Element to check
+   * @return {string}
+   */
+  static getTransitionEvent(optEl) {
+    if (transitionEvent && !optEl) {
+      return transitionEvent;
+    }
+
+    transitionEvent = '';
+
+    const el = optEl || document.createElement('ws');
+    const transitions = {
+      'transition': 'transitionend',
+      'OTransition': 'oTransitionEnd',
+      'MozTransition': 'transitionend',
+      'WebkitTransition': 'webkitTransitionEnd'
+    };
+    const transitionNames = Object.keys(transitions);
+
+    for (let i = 0, length = transitionNames.length;
+          i < length && !transitionEvent; i++) {
+      const transitionName = transitionNames[i];
+
+      if (typeof el.style[transitionName] !== 'undefined') {
+        transitionEvent = transitions[transitionName];
+      }
+    }
+
+    return transitionEvent;
+  }
+
+  /**
+   * Gets the prefixed animation end event.
+   * @param {?Element} optEl Element to check
+   * @return {string}
+   */
+  static getAnimationEvent(optEl) {
+    if (animationEvent && !optEl) {
+      return animationEvent;
+    }
+
+    animationEvent = 'animationend';
+
+    const el = optEl || document.createElement('ws');
+    const animations = {
+      'animation': 'animationend',
+      'OAnimation': 'oAnimationEnd',
+      'MozAnimation': 'animationend',
+      'WebkitAnimation': 'webkitAnimationEnd'
+    };
+    const animationNames = Object.keys(animations);
+
+    for (let i = 0, length = animationNames.length;
+          i < length; i++) {
+      const animationName = animationNames[i];
+
+      if (typeof el.style[animationName] !== 'undefined') {
+        animationEvent = animations[animationName];
+        break;
+      }
+    }
+
+    return animationEvent;
+  }
+
   /**
    * Hides an element setting the display to none.
    * @param {Element} el Element to be hidden.
@@ -43,19 +131,12 @@ export default class DOM {
   }
 
   /**
-   * Locks the scroll on the document by setting the HTML to have a hidden
-   * overflow.
+   * Checks if the element is visible.
+   * @param {Element} el Element to check.
+   * @return {boolean}
    */
-  static lockScroll() {
-    document.documentElement.style.overflow = 'hidden';
-  }
-
-  /**
-   * Unlocks the scroll on the document by setting the HTML to have an auto
-   * overflow.
-   */
-  static unlockScroll() {
-    document.documentElement.style.overflow = 'auto';
+  static isVisible(el) {
+    return (el.offsetParent !== null);
   }
 
   /**
@@ -67,9 +148,78 @@ export default class DOM {
    */
   static fireEvent(target, eventType, eventInfo = {}) {
     const event = new WSCustomEvent(eventType, {
-      detail: eventInfo
+      detail: eventInfo,
+      bubbles: true
     });
 
     target.dispatchEvent(event);
   }
+
+  /**
+   * Converts an iterable to an array.
+   * @param {*} iterable Element to convert to array
+   * @return {Array} the element casted to an array.
+   */
+  static toArray(iterable) {
+    return [].slice.call(iterable);
+  }
+
+  /**
+   * Checks whether the document has focus on an input or contenteditable
+   * element.
+   * @return {boolean} Whether the focused element is an input or content
+   * editable.
+   */
+  static isFocusableElement() {
+    let result = false;
+
+    if (document.activeElement) {
+      const isContentEditable =
+          document.activeElement.contentEditable !== 'inherit' &&
+          document.activeElement.contentEditable !== undefined;
+      const isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA']
+          .indexOf(document.activeElement.tagName) > -1;
+      result = isInput || isContentEditable;
+    }
+
+    return result;
+  }
+
+  /**
+   * Gets the integer value of a style property.
+   * @param {string} prop CSS property value.
+   * @return {Number} The property without the units.
+   */
+  static parseSize(prop) {
+    return Number(prop.replace(/[^\d\.]/g, ''));
+  }
+
+  /**
+   * Wraps a HTML structure around an element.
+   * @param {Element} elem the element to be wrapped.
+   * @param {string} tag the new element tag.
+   * @return {Element} the new element.
+   */
+  static wrap(elem, tag) {
+    const wrap = document.createElement(tag);
+    elem.parentElement.insertBefore(wrap, elem);
+    wrap.appendChild(elem);
+
+    return wrap;
+  }
+
+  /**
+   * Inserts and element after another element.
+   * @param {Element} elem the element to be inserted.
+   * @param {Element} target the element to be inserted after.
+   */
+  static after(elem, target) {
+    const parent = target.parentNode;
+
+    if (parent.lastChild === target) {
+      parent.appendChild(elem);
+    } else {
+      parent.insertBefore(elem, target.nextSibling);
+    }
+  }
 }

src/js/utils/easing.js

@@ -3,17 +3,8 @@
  * @param {number} p The percentage of time that has passed.
  * @return {number}
  */
-function swing (p) {
+function swing(p) {
   return 0.5 - Math.cos(p * Math.PI) / 2;
 }
 
-/**
- * Linear easing function.
- * @param {number} p The percentage of time that has passed.
- * @return {number}
- */
-function linear(p) {
-  return p;
-}
-
-export default { swing, linear };
+export default {swing};

src/js/utils/keys.js

@@ -1,10 +1,18 @@
 const Keys = {
   ENTER: 13,
   SPACE: 32,
+  RE_PAGE: 33,
+  AV_PAGE: 34,
+  END: 35,
+  HOME: 36,
   LEFT: 37,
   UP: 38,
   RIGHT: 39,
-  DOWN: 40
+  DOWN: 40,
+  PLUS: [107, 171, 187],
+  MINUS: [109, 173, 189],
+  ESCAPE: 27,
+  F: 70
 };
 
 export default Keys;

src/js/utils/mobile-detector.js

@@ -1,5 +1,9 @@
 const UA = window.navigator.userAgent;
 
+/**
+ * Mobile detector helper class. Tests the User Agent to see if we're, likely,
+ * on a mobile device.
+ */
 export default class MobileDetector {
   /**
    * Whether the device is Android or not.
@@ -22,7 +26,7 @@ export default class MobileDetector {
    * @return {Boolean}
    */
   static isiOS() {
-    return !!UA.match(/iPhone/i);
+    return !!UA.match(/iPad|iPhone|iPod/i);
   }
 
   /**

src/js/utils/scroll-to.js

@@ -1,33 +1,6 @@
 import Easings from './easing';
 
-let SCROLLABLE_CONTAINER = getScrollableContainer();
-
-/**
- * Returns the correct DOM element to be used for scrolling the
- * page, due to Firefox not scrolling on document.body.
- * @return {Element} Scrollable Element.
- */
-function getScrollableContainer() {
-  if (SCROLLABLE_CONTAINER) {
-    return SCROLLABLE_CONTAINER;
-  }
-
-  const documentElement = window.document.documentElement;
-  let scrollableContainer;
-
-  documentElement.scrollTop = 1;
-
-  if (documentElement.scrollTop === 1) {
-    documentElement.scrollTop = 0;
-    scrollableContainer = documentElement;
-  } else {
-    scrollableContainer = document.body;
-  }
-
-  SCROLLABLE_CONTAINER = scrollableContainer;
-
-  return scrollableContainer;
-}
+let SCROLLABLE_CONTAINER = document.getElementById('webslides');
 
 /**
  * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a
@@ -35,15 +8,19 @@ function getScrollableContainer() {
  * @param {number} y Offset of the page to scroll to.
  * @param {number} duration Duration of the animation. 500ms by default.
  * @param {function} cb Callback function to call upon completion.
+ * @param {HTMLElement} container The HTML element where to scroll
  */
-function scrollTo(y, duration = 500, cb = () => {}) {
-  const scrollableContainer = getScrollableContainer();
-  const delta = y - scrollableContainer.scrollTop;
-  const startLocation = scrollableContainer.scrollTop;
+export default function scrollTo(
+    y, duration = 500, cb = () => {}, container = null) {
+  SCROLLABLE_CONTAINER = container ?
+      container : document.getElementById('webslides');
+
+  const delta = y - SCROLLABLE_CONTAINER.scrollTop;
+  const startLocation = SCROLLABLE_CONTAINER.scrollTop;
   const increment = 16;
 
   if (!duration) {
-    scrollableContainer.scrollTop = y;
+    SCROLLABLE_CONTAINER.scrollTop = y;
     cb();
     return;
   }
@@ -58,7 +35,7 @@ function scrollTo(y, duration = 500, cb = () => {}) {
       delta,
       duration);
 
-    scrollableContainer.scrollTop = Math.floor(startLocation +
+    SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation +
         (easingP * delta));
 
     if (elapsedTime < duration) {
@@ -70,5 +47,3 @@ function scrollTo(y, duration = 500, cb = () => {}) {
 
   animateScroll(0);
 }
-
-export default { getScrollableContainer, scrollTo };

src/scss/_base.scss

@@ -0,0 +1,198 @@
+// sass-lint:disable no-vendor-prefixes
+
+/*=========================================
+1. Base --> Baseline: 8px = .8rem
+=========================================== */
+
+/* -- Disable elastic scrolling/bounce:
+webslides.js will add .ws-ready automatically. Don't worry :) -- */
+
+.ws-ready {
+  &,
+  body {
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  &.ws-ready-zoom {
+    overflow: visible;
+
+    body {
+      overflow: auto;
+    }
+  }
+}
+
+#webslides {
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+li li {
+  margin-left: 1.6rem;
+}
+
+a,
+a:active,
+a:focus,
+a:visited,
+input:focus,
+textarea:focus,
+button {
+  text-decoration: none;
+  transition: all .3s ease-out;
+}
+
+p a:active {
+  position: relative;
+  top: 2px;
+}
+
+nav a[rel='external'] em,
+.hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.shadow {
+  position: relative;
+
+  &:before,
+  &:after {
+    bottom: 1.6rem;
+    content: '';
+    max-width: 300px;
+    position: absolute;
+    top: 80%;
+    width: 50%;
+    z-index: -1;
+  }
+
+  &:after {
+    right: 2.4rem;
+    transform: rotate(3deg);
+  }
+
+  &:before {
+    left: 2.4rem;
+    transform: rotate(-3deg);
+  }
+}
+
+/*=== 1.1 WRAP/CONTAINER === */
+.wrap,
+header nav,
+footer nav {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+  z-index: 2;
+
+  @media (min-width: 1024px) {
+    width: 90%;
+  }
+}
+
+.frame,
+.shadow {
+  padding: 2.4rem;
+}
+
+.radius {
+  border-radius: .4rem;
+}
+
+.alignright {
+  float: right;
+}
+
+.alignleft {
+  float: left;
+}
+
+.aligncenter {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+img.aligncenter,
+figure.aligncenter {
+  display: block;
+  margin-bottom: .8rem;
+  margin-top: .8rem;
+}
+
+img.alignleft,
+figure.alignleft,
+img.alignright,
+figure.alignright,
+img.aligncenter,
+figure.aligncenter {
+  margin-bottom: 3.2rem;
+  margin-top: 3.2rem;
+}
+
+img.alignright,
+svg.alignright,
+figure.alignright {
+  margin: .8rem 0 .8rem 2.4rem;
+}
+
+img.alignleft,
+svg.alignleft,
+figure.alignleft {
+  margin: .8rem 2.4rem .8rem 0;
+}
+
+$sizes: 80, 70, 60, 50, 40, 30, 20;
+
+/*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
+@media (min-width: 1024px) {
+  @each $size in $sizes {
+    .size-#{$size} {
+      width: $size * 1%;
+    }
+  }
+}
+
+pre,
+code {
+  font-family: 'Cousine', monospace;
+}
+
+pre {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  overflow: auto;
+  padding: 2.4rem;
+  text-align: left;
+  white-space: pre-wrap;
+  width: 100%;
+  word-wrap: break-word;
+
+  & + p {
+    margin-top: 3.2rem;
+  }
+
+  code {
+    padding: 0;
+  }
+}
+
+code {
+  padding: .4rem;
+}

src/scss/_color.scss

@@ -0,0 +1,817 @@
+// sass-lint:disable no-color-literals
+// sass-lint:disable no-vendor-prefixes
+
+/*=========================================
+19. Colors
+=========================================== */
+
+/* -- Disable elastic scrolling/bounce:
+webslides.js will add .ws-ready automatically. Don't worry :) -- */
+
+body {
+  background-color: $body-bg;
+  color: $body-color;
+}
+
+:focus {
+  box-shadow: $focus-box-shadow;
+}
+
+svg {
+  fill: currentColor;
+}
+
+[class*='bg-'] a,
+[class*='bg-gradient-'] a {
+  color: $spindle;
+}
+
+.bg-brown a {
+  color: $link-color-secondary;
+}
+
+a,
+.bg-white a,
+.bg-light a,
+.bg-gradient-white a {
+  color: $link-color;
+}
+
+a:hover {
+  color: $link-hover;
+}
+
+.flexblock li>a,
+[class*='bg-'] li>a,
+[class*='bg-gradient-'] li>a,
+article header a {
+  color: inherit;
+}
+
+hr {
+  background: $hr-bg;
+}
+
+hr:after {
+  background-color: rgba($white, .8);
+  color: $body-color;
+}
+
+abbr,
+acronym {
+  border-bottom: 1px dotted $body-bg;
+}
+
+mark,
+ins {
+  background-color: rgba($pattens-blue, .8);
+  color: inherit;
+}
+
+::-moz-selection {
+  background-color: rgba($pattens-blue, .8);
+}
+
+::-webkit-selection {
+  background-color: rgba($pattens-blue, .8);
+}
+
+::selection {
+  background-color: rgba($pattens-blue, .8);
+}
+
+pre {
+  background: $white;
+  border: 1px solid rgba($stratos, .1);
+  box-shadow: 0 8px 16px rgba($stratos, .04), 0 4px 16px rgba($black, .08);
+}
+
+pre:hover {
+  box-shadow: 0 8px 16px rgba(0, 40, 160, .08), 0 8px 24px rgba($black, .08);
+}
+
+code,
+[class*='bg-'] pre {
+  background-color: rgba($white, .09);
+}
+
+.bg-white code {
+  background: rgba($stratos, .03);
+}
+
+/*================================================
+Slides - Backgrounds <section class="bg-primary">
+================================================== */
+
+/*3 Corp Colors*/
+@each $name, $color in $bg-colors {
+  .bg-#{$name} {
+    background-color: $color;
+  }
+}
+
+[class*='bg-'] .bg-white {
+  color: $body-color;
+  text-shadow: none;
+}
+
+/* BG Apple Keynote*/
+.bg-apple {
+  background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%);
+}
+
+/*Font Color*/
+.bg-trans-dark,
+.bg-trans-gradient,
+.bg-primary,
+.bg-secondary,
+.bg-blue,
+.bg-green,
+.bg-purple,
+.bg-red,
+.bg-facebook,
+.bg-apple,
+[class*='bg-black'],
+[class*='bg-gradient-'] {
+  color: $white;
+  text-shadow: 0 1px 0 #013;
+}
+
+.bg-light p {
+  color: #456;
+}
+
+.bg-brown p {
+  color: #666;
+}
+
+/*Transparent/Opacity*/
+.bg-trans-dark {
+  background: rgba($black, .8);
+}
+
+.bg-trans-light {
+  background: rgba($black, .2);
+}
+
+/*Covers/Longforms...*/
+.bg-trans-gradient {
+  background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
+}
+
+/*Horizontal Gradient*/
+.bg-gradient-h {
+  background: linear-gradient(134deg, #32b 0, #62b 100%);
+}
+
+/*Vertical Gradient*/
+.bg-gradient-v {
+  background: linear-gradient(to top, #62b 0%, #32b 100%);
+}
+
+/*Radial Gradient*/
+.bg-gradient-r {
+  background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
+}
+
+/*White Gradient (vertical)*/
+.bg-gradient-white {
+  background: linear-gradient(180deg, #f2f4f6 0, $white 100%);
+  color: $body-color;
+  text-shadow: none;
+}
+
+/*Gray Gradient (horizontal)*/
+.bg-gradient-gray {
+  background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
+  color: $body-color;
+  text-shadow: none;
+}
+
+/*Border/Frame*/
+.frame {
+  border: .8rem solid $white;
+}
+
+[class*='background'].frame {
+  border-width: .2rem;
+}
+
+/*Layer/Box Shadow*/
+.shadow,
+.pre {
+  position: relative;
+}
+
+.shadow:before,
+.shadow:after {
+  box-shadow: 0 16px 24px rgba($stratos, .3);
+}
+
+/*============================
+TYPOGRAPHY
+============================== */
+
+/* -- Horizontal separator  -- */
+.text-separator:before {
+  background-color: rgba(170, 0, 0, .8);
+}
+
+/* -- Pull Quote (Right/Left)  -- */
+[class*='text-pull-'] {
+  border-top: 4px solid rgba($black, .5);
+}
+
+img[class*='text-pull-'],
+figure[class*='text-pull-'] {
+  border-top: 0;
+}
+
+/* -- Context  -- */
+[class*='bg-'] .text-context:before {
+  background-color: $white;
+}
+
+.text-context:before,
+.bg-white .text-context:before {
+  background-color: rgba($stratos, .2);
+}
+
+/* -- Text shadow  -- */
+.text-shadow {
+  text-shadow: 0 0 40px rgba($black, .5);
+}
+
+/* -- time, ampersands, prepositions (for, of...), symbols...
+[class*='card-'] time,
+h1 span {
+  color: #abd;
+}
+
+/* -- <pre> comment  -- */
+.code-comment {
+  color: rgba(70, 170, 130, .9);
+  text-shadow: none;
+}
+
+/*=========================================
+Header/Nav
+=========================================== */
+header[role='banner'] {
+  background-color: $white;
+}
+
+.logo a {
+  color: inherit;
+}
+
+nav[role='navigation'] li {
+  &.active a {
+    background-color: #555;
+    color: $white;
+  }
+
+  a {
+    background-color: rgba(50, 50, 50, .9);
+    color: $white;
+
+    &:hover {
+      background-color: rgba(50, 50, 50, .7);
+    }
+  }
+}
+
+@each $name, $color in $social-nav {
+  nav li.#{$name} a:hover {
+    background-color: $color;
+  }
+}
+
+/*===================================================
+.flexblock li hover/active
+===================================================== */
+.flexblock li.active a,
+.metrics li:hover,
+.specs li:hover,
+.reasons li:hover {
+  background-color: rgba($stratos, .03);
+}
+
+/*=========================================
+Features & Clients List
+=========================================== */
+.features li,
+.clients li  {
+  background-color: rgba($white, .9);
+}
+
+[class*='bg-'] .features li,
+[class*='bg-'] .clients li {
+  background-color: rgba($white, .1);
+}
+
+.features li:hover,
+.clients li:hover  {
+  box-shadow: 0 8px 16px rgba($stratos, .02), 0 4px 16px rgba($black, .08);
+}
+
+/*============================
+.flexblock with border
+============================== */
+.border {
+  border-bottom: 1px solid rgba($stratos, .1);
+  border-right: 1px solid rgba($stratos, .1);
+}
+
+.border li {
+  border-left: 1px solid rgba($stratos, .1);
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+.flexblock.border li li {
+  border: 0;
+}
+
+/*===========================================
+flexblock.steps
+============================================= */
+.steps li:nth-child(1) {
+  background-color: #e8eef7;
+}
+
+.steps li:nth-child(2) {
+  background-color: #dde5f3;
+}
+
+.steps li:nth-child(3) {
+  background-color: #cdd8ec;
+}
+
+.steps li:nth-child(4) {
+  background-color: #bbcdec;
+}
+
+.process {
+  border-bottom: 15px solid transparent;
+  border-top: 15px solid transparent;
+}
+
+.steps li:hover,
+.steps.blink li:hover>a {
+  background-color: #b8cef7;
+}
+
+@media (min-width: 1024px) {
+  .process.step-2 {
+    border-left-color: #e8eef7;
+  }
+
+  .process.step-3 {
+    border-left-color: #dde5f3;
+  }
+
+  .process.step-4 {
+    border-left-color: #cdd8ec;
+  }
+
+  .steps li:hover + li [class*='step-'] {
+    border-left-color: #b8cef7;
+  }
+}
+
+/*=========================================================
+Items: You can use for settings, drag&drop, close/delete...
+=========================================================== */
+.specs li:after {
+  background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
+}
+
+.specs li:last-child:after {
+  background: none;
+}
+
+/*=========================================================
+Why/Steps/Motivation/Reasons -  Decimal/Numbers
+=========================================================== */
+.reasons li:after {
+  background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
+}
+
+.reasons li:last-child:after {
+  background: none;
+}
+
+/*=========================================
+Overlays
+=========================================== */
+.overlay {
+  background-color: rgba($black, .2);
+}
+
+li:hover .overlay {
+  background-color: rgba($black, .1);
+}
+
+.overlay,
+.overlay a {
+  color: $white;
+  text-shadow: 0 1px 0 #111;
+}
+
+/*=========================================
+Gallery li+.overlay+image
+=========================================== */
+.gallery li {
+  background-color: rgba($stratos, .06);
+  box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .03);
+}
+
+.gallery li figcaption {
+  background-color: $white;
+}
+
+.flexblock.gallery li:hover {
+  box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .08);
+}
+
+.gallery li footer {
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+.gallery li a {
+  color: $body-color;
+  text-shadow: none;
+}
+
+.flesblock.gallery li a footer {
+  color: #aaa;
+}
+
+/*Arrow */
+.gallery li figcaption:before {
+  border: .8rem solid $black;
+  border-color: transparent transparent $white $white;
+}
+
+/*=========================================
+Plans / Pricing
+=========================================== */
+.plans>li div,
+.flexblock.plans li:hover div {
+  background-color: $white;
+}
+
+.plans>li:hover,
+.plans>li:nth-child(2) {
+  box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
+}
+
+.plans:hover li:nth-child(2):not(:hover) {
+  box-shadow: none;
+}
+
+.plans li h2 {
+  background-color: rgba($stratos, .5);
+  color: $white;
+}
+
+.plans ul li {
+  border-bottom: 1px solid rgba($stratos, .1);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.plans > li > a {
+  color: $body-color;
+  text-shadow: none;
+}
+
+/*============================
+Activity/CV/Timeline/News
+============================== */
+.activity li {
+  border-top: .1rem solid rgba($stratos, .1);
+}
+
+.activity li:hover {
+  background-color: rgba($stratos, .02);
+}
+
+/*=========================================
+Resume/Work/CV/Portfolio
+=========================================== */
+.work-label,
+.work li a {
+  border-bottom: 1px solid rgba($stratos, .1);
+}
+
+.work li:nth-child(odd)>a {
+  background-color: rgba($stratos, .03);
+}
+
+.work li a:hover {
+  background-color: rgba($stratos, .04);
+}
+
+/*===========================================
+Clients / Services / Logos...
+============================================= */
+.clients.border figcaption {
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+/*====================
+LOGOS
+====================== */
+
+/* --- Images (black logo/image) --- */
+img.blacklogo {
+  background: none;
+  filter: grayscale(100%) brightness(10%) contrast(100%);
+}
+
+/* --- Images (gray logo/image) --- */
+img.graylogo {
+  filter: grayscale(100%) brightness(10%) contrast(10%);
+}
+
+/* --- Images (white Logo/Image) --- */
+img.whitelogo {
+  filter: brightness(0) invert(1);
+}
+
+/* --- Logo/Images Hover --- */
+li:hover img.blacklogo,
+li:hover img.graylogo,
+img.blacklogo:hover,
+img.graylogo:hover {
+  background: none;
+  filter: grayscale(0%);
+  transition: all .6s ease;
+}
+
+/*=========================================================
+Cards
+=========================================================== */
+[class*='card-'] > a {
+  color: inherit;
+}
+
+/* ---  card ul specs --- */
+.description>li {
+  border-bottom: 1px solid rgba($stratos, .1);
+}
+
+.description>li:last-child {
+  border-bottom: 0;
+}
+
+/*== Figure Background === */
+[class*='card-'][class*='bg-'] figure {
+  background-color: rgba($stratos, .06);
+}
+
+/*== Ficaption Cards === */
+[class*='card'] figcaption,
+[class*='card'] figcaption a {
+  background: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, .2) 100%);
+  color: $white;
+}
+
+/*===CTA (Call to Action - Numbers, Price, Promo...)  ===== */
+@media (min-width: 768px) {
+  .cta .benefit {
+    border-image: linear-gradient(90deg, transparent, rgba($black, .4) 50%, transparent) 1 100%;
+    border-left-width: 1px;
+    border-style: solid;
+  }
+}
+
+/*=========================================
+Tables
+=========================================== */
+table td,
+th,
+thead {
+  border: 1px solid rgba($black, .5);
+}
+
+thead {
+  background-color: rgba($black, .3);
+}
+
+tr:nth-child(even)>td {
+  background: rgba($black, .1);
+}
+
+tr>td {
+  border-top: 1px solid rgba($black, .5);
+}
+
+td:hover,
+tr:nth-child(even)>td:hover {
+  background-color: rgba($white, .5);
+}
+
+/*============================
+Browser (Screenshots)
+============================== */
+.browser {
+  border: 1px solid rgba($stratos, .1);
+}
+
+.browser:hover {
+  box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
+}
+
+/*=== Topbar === */
+.browser:before {
+  background-color: rgba($stratos, .1);
+  border-bottom: 1px solid rgba($stratos, .2);
+  color: rgba($white, .9);
+}
+
+.browser:hover:before {
+  background-color: rgba($stratos, .12);
+  color: $white;
+}
+
+/*=========================================
+Forms
+=========================================== */
+input,
+textarea {
+  background-color: #fafbfc;
+}
+
+input:focus,
+textarea:focus {
+  background-color: $white;
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+}
+
+input:focus::-moz-placeholder {
+  color: #ddd;
+}
+
+input:focus::-webkit-input-placeholder {
+  color: #ddd;
+}
+
+a.button,
+[class*='badge-'],
+button[type='submit'],
+input {
+  box-shadow: 0 10px 16px -8px rgba($stratos, .3);
+}
+
+button,
+input,
+select,
+textarea,
+button[type='submit'],
+input[type='submit'],
+.button,
+.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+  border: 1px solid $royal-blue;
+}
+
+button[type='submit'],
+input[type='submit'],
+.button,
+.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+  background-color: $royal-blue;
+  color: $white;
+  text-shadow: 0 1px 0 #123;
+}
+
+.button:active,
+button[type='submit']:active,
+input[type='submit']:active {
+  background-color: #17d;
+}
+
+.ghost,
+.ghost:hover {
+  background: none;
+  color: inherit;
+  text-shadow: none;
+}
+
+.bg-primary select,
+.bg-primary textarea,
+.bg-primary .button,
+.bg-primary button,
+.bg-primary button:hover,
+.bg-primary input,
+[class*='bg-gradient-'] .button,
+[class*='bg-'] a.button.ghost {
+  border-color: $white;
+}
+
+[class*='bg-'] a.button {
+  color: $white;
+}
+
+.bg-white a.button.ghost,
+.bg-gradient-white a.button.ghost {
+  border: 1px solid $royal-blue;
+  color: $body-color;
+}
+
+:disabled,
+button:disabled:hover {
+  background-color: #eee;
+  border-color: #eee;
+  color: #ccc;
+}
+
+fieldset {
+  background-color: rgba($stratos, .2);
+  border: 1px solid $royal-blue;
+}
+
+legend {
+  background-color: rgba($black, .6);
+  color: $white;
+}
+
+/* Inputs/Buttons - hover */
+input:hover,
+select:hover {
+  box-shadow: 0 0 8px rgba($black, .3);
+}
+
+/* App Store Badges */
+[class*='badge-'] {
+  background-color: $black;
+  border: 1px solid #345;
+}
+
+form .flexblock li:hover {
+  background-color: rgba($black, .05);
+}
+
+/*============================
+Table of Contents
+============================== */
+.toc,
+.toc ol>li:before,
+.chapter {
+  background-color: #f7f9fb;
+}
+
+.toc li .toc-page:before {
+  border-bottom: 1px dotted rgba($black, .9);
+}
+
+/*============================
+Slides (Counter/Arrows)
+============================== */
+#counter,
+#navigation a {
+  color: #abc;
+}
+
+#webslides:hover #navigation a:hover {
+  background-color: $index-overlay;
+  color: $white;
+}
+
+/*============================
+Footer
+============================== */
+footer[role='contentinfo'] {
+  background-color: $white;
+}
+
+/*============================
+Slides Index
+============================== */
+#webslides-zoomed {
+  background: $index-overlay;
+}
+
+#webslides-zoomed .column > .wrap-zoom {
+  background-color: $catskill-white;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .04);
+  color: $mine-shaft;
+
+  &:hover {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .08);
+  }
+
+  &.current {
+    border: .6rem solid rgba(0, 20, 280, .2);
+  }
+}
+
+.text-slide-number {
+  color: #abc;
+ }

src/scss/_typography.scss

@@ -0,0 +1,468 @@
+/*============================
+2. TYPOGRAPHY & LISTS
+============================== */
+html,
+body {
+  font-weight: 300;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+}
+
+html,
+body,
+input,
+select,
+textarea {
+  font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
+  font-size: 62.5%;
+}
+
+body,
+textarea {
+  font-size: 1.8rem;
+}
+
+p,
+li,
+dt,
+dd,
+time,
+table,
+big,
+textarea,
+label {
+  line-height: 3.2rem;
+  margin-bottom: 3.2rem;
+}
+
+li,
+p:last-child {
+  margin-bottom: 0;
+}
+
+
+ul>li,
+ol>li {
+  margin-left: 3.2rem;
+}
+
+li li {
+  font-size: 100%;
+}
+
+/*== List .description (Product/Specs) === */
+ul.description {
+  padding: 0;
+
+  & + p {
+    margin-top: 3.2rem;
+  }
+
+  li {
+    padding-bottom: .8rem;
+    padding-top: .8rem;
+    position: relative;
+    transition: .3s;
+  }
+
+  li:hover {
+    padding-left: .4rem;
+  }
+}
+
+ul.description li,
+.column ul li {
+  list-style: none;
+  margin-left: 0;
+}
+
+.column ol>li {
+  margin-left: 1.6rem;
+}
+
+h1 svg,
+h2 svg,
+h3 svg,
+h4 svg {
+  margin-top: -.8rem;
+}
+
+.text-intro svg,
+.text-quote p svg,
+.wall p svg,
+.try svg {
+  margin-top: -.4rem;
+}
+
+h1 {
+  font-size: 4rem;
+  line-height: 5.6rem;
+
+  @media (min-width: 768px) {
+    font-size: 5.6rem;
+    line-height: 7.2rem;
+  }
+}
+
+h1 span {
+  font-style: italic;
+}
+
+h2 {
+  font-size: 3.2rem;
+  line-height: 4.8rem;
+
+  @media (min-width: 768px) {
+    font-size: 4.8rem;
+    line-height: 6.4rem;
+  }
+}
+
+h3 {
+  font-size: 2.4rem;
+  line-height: 4rem;
+
+  @media (min-width: 768px) {
+    font-size: 4rem;
+    line-height: 5.6rem;
+  }
+}
+
+h4 {
+  font-size: 2.2rem;
+  line-height: 4rem;
+
+  @media (min-width: 768px) {
+    font-size: 3.2rem;
+    line-height: 4.8rem;
+  }
+}
+
+h5 {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 3.2rem;
+}
+
+h6 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 3.2rem;
+}
+
+h2.alignleft + p.alignright {
+  margin-bottom: 0;
+  margin-top: 1.2rem;
+}
+
+h3.alignleft + p.alignright {
+  margin-bottom: 0;
+  margin-top: .4rem;
+}
+
+@for $i from 1 through 6 {
+  @for $j from 1 through 6 {
+    h#{$i}+h#{$j} {
+      margin-top: .8rem;
+    }
+  }
+}
+
+h1+img,
+h2+img,
+h3+img {
+  margin-bottom: 4.8rem;
+  margin-top: 4.8rem;
+}
+
+[class*='content-'] > [class*='content-'] h2,
+[class*='content-'] > [class*='content-'] h3,
+[class*='content-'] > [class*='content-'] h4 {
+  font-size: 2.4rem;
+  line-height: 4rem;
+}
+
+/*== 2.1. Headings with background ==*/
+@for $i from 1 through 6 {
+  h#{$i}[class*='bg-'] {
+    padding: 2.4rem;
+  }
+}
+
+
+ul[class*='bg-'],
+ol[class*='bg-'],
+li[class*='bg-'],
+p[class*='bg-'] {
+  padding: 2.4rem;
+}
+
+h1 [class*='bg-'],
+h2 [class*='bg-'],
+h3 [class*='bg-'] {
+  padding: .4rem .8rem;
+}
+
+/*== 2.2. Typography Classes = .text- == */
+.text-intro,
+[class*='content-'] p {
+  font-size: 2.4rem;
+  line-height: 4rem;
+}
+
+/* -- Serif -- */
+.text-serif,
+h1 span {
+  font-family: 'Maitree', times, serif;
+}
+
+/* -- h1,h2... Promo/Landings -- */
+.text-landing {
+  letter-spacing: .4rem;
+  text-transform: uppercase;
+
+  @media (min-width: 768px) {
+    letter-spacing: 1.6rem;
+  }
+}
+
+/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */
+.text-subtitle {
+  letter-spacing: .2rem;
+  margin-bottom: 0;
+  text-transform: uppercase;
+
+  p#{&} {
+    font-size: 1.6rem;
+
+    svg {
+      vertical-align: text-top;
+    }
+  }
+
+  + p {
+    margin-top: 3.2rem;
+  }
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+/* -- Emoji (you'll love this) -- */
+.text-emoji {
+  font-size: 6.8rem;
+  line-height: 8.8rem;
+
+  @media (min-width: 768px) {
+    font-size: 12.8rem;
+    line-height: 16rem;
+  }
+}
+
+/* -- Numbers (results, sales... 23,478,289 iphones) -- */
+.text-data {
+  font-size: 6.4rem;
+  line-height: 8rem;
+  margin-bottom: .8rem;
+
+  @media (min-width: 768px) {
+    font-size: 15.2rem;
+    line-height: 16.8rem;
+  }
+}
+
+.text-label {
+  display: inline-block;
+  font-weight: 600;
+  text-transform: uppercase;
+  width: 12.8rem;
+}
+
+/* -- Magazine Two Columns -- */
+@media (min-width: 768px) {
+  .text-cols {
+    column-count: 2;
+    column-gap: 4.8rem;
+    text-align: left;
+  }
+
+  .text-landing + .text-cols {
+    margin-top: 3.2rem;
+  }
+}
+
+.text-cols p:first-child:first-letter {
+  float: left;
+  font-size: 11rem;
+  font-weight: 600;
+  line-height: 1;
+  margin: -.4rem 1.6rem 0 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+/* -- Heading with border -- */
+.text-context {
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    height: .2rem;
+    margin-bottom: .6rem;
+    width: 12rem;
+
+    .column & {
+      width: 100%;
+    }
+  }
+
+  &.text-uppercase {
+    letter-spacing: .1rem;
+  }
+}
+
+/* -- Separator/Symbols (stars ***...) -- */
+.text-symbols {
+  font-weight: 600;
+  letter-spacing: .8rem;
+  text-align: center;
+}
+
+.text-separator {
+  margin-top: 2.4rem;
+
+  &:before {
+    content: '';
+    height: .4rem;
+    left: 0;
+    margin-top: -1.6rem;
+    position: absolute;
+    width: 16%;
+  }
+
+  @media (min-width: 568px) {
+    margin-left: 20%;
+    margin-top: 0;
+    width: 80%;
+
+    &:before {
+      margin-top: 1.2rem;
+    }
+  }
+}
+
+/* -- Pull Quote (Right/Left)  -- */
+[class*='text-pull'] {
+  font-size: 2.4rem;
+  font-weight: 400;
+  line-height: 4rem;
+  margin-bottom: 3.2rem;
+  margin-left: 2.4rem;
+  margin-right: 2.4rem;
+  position: relative;
+}
+
+[class*='text-pull-'] {
+  margin-top: .8rem;
+  padding-top: 1.4rem;
+
+  @media (min-width: 1024px) {
+    margin-left: -4.8rem;
+    margin-right: -4.8rem;
+  }
+}
+
+@media (min-width: 568px) {
+  [class*='text-pull-'] {
+    max-width: 40%;
+  }
+
+  .text-pull-right {
+    float: right;
+    margin-left: 2.4rem;
+    margin-right: -2.4rem;
+  }
+
+  .text-pull-left {
+    float: left;
+    margin-left: -2.4rem;
+    margin-right: 2.4rem;
+  }
+}
+
+img[class*='text-pull-'],
+figure[class*='text-pull-'] {
+  margin-top: .8rem;
+  padding-top: 0;
+}
+
+/* -- Interviews (Questions & Answers)  --- */
+/* -- <dl class="text-interview">
+<dt>name</dt>
+<dd><p>question or answer</p>
+</dd>
+--- */
+.text-interview dt {
+  font-weight: 600;
+  margin-bottom: 0;
+  text-transform: uppercase;
+}
+
+@media (min-width: 1024px) {
+  .text-interview dt {
+    margin-left: -34%;
+    position: absolute;
+    text-align: right;
+    white-space: nowrap;
+    width: 30%;
+  }
+}
+
+
+/* -- Info Messages (error, warning, success... -- */
+.text-info {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+/*=========================================
+2.1. San Francisco Font (Apple's new font)
+=========================================== */
+.text-apple,
+.bg-apple {
+  font-family: 'San Francisco', helvetica, arial, sans-serif;
+}
+
+/* Ultra Light */
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 100;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2');
+}
+
+/* Thin */
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 200;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2');
+}
+
+/* Regular */
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 400;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2');
+}
+
+/* Bold */
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: bold;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2');
+}

src/scss/_vars.scss

@@ -0,0 +1,63 @@
+// sass-lint:disable no-color-literals
+
+// =========
+// Colors. Names from http://chir.ag/projects/name-that-color/
+// =========
+$black: #000;
+$white: #fff;
+$mine-shaft: #333;
+$royal-blue: #44d;
+$havelock-blue: #67d;
+$catskill-white: #f7f9fb;
+$cod-gray: #111;
+$big-stone: #123;
+$rhino: #346;
+$athens-gray: #f8f8f9;
+$mischka: #d5d9e2;
+$pine-green: #077;
+$purple-heart: #62b;
+$cardinal: #c23;
+$mirage: #1a2028;
+$pickled-bluewood: #293845;
+$facebook: #3b5998;
+$spindle: #bce;
+$dodger-blue: #3af;
+$pattens-blue: #def;
+$stratos: #001450;
+$gray-brown: #f9f8f2;
+
+$bg-colors: (
+  'primary': $royal-blue,
+  'secondary': $havelock-blue,
+  'light': $catskill-white,
+  'black': $cod-gray,
+  'black-blue': $big-stone,
+  'blue': $rhino,
+  'brown': $gray-brown,
+  'gray': $mischka,
+  'green': $pine-green,
+  'purple': $purple-heart,
+  'red': $cardinal,
+  'white': $white,
+  // Branding
+  'facebook': $facebook
+) !default;
+
+$social-nav: (
+  'twitter': #1da1f3,
+  'facebook': $facebook,
+  'linkedin': #1683bb,
+  'dribbble': #ea4c89,
+  'github': #60b044,
+  'email': #dd4b39
+) !default;
+
+$body-color: $mine-shaft !default;
+$body-bg: $catskill-white !default;
+$focus-box-shadow: 0 0 2px rgba(150, 187, 238, 1) !default;
+$link-color: $royal-blue !default;
+$link-color-secondary: $cardinal !default;
+$link-hover: $dodger-blue !default;
+$hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default;
+$current-zoomed-slide-shadow: 0 0 7px rgba(0, 187, 255, .5);
+$index-overlay: rgba(0, 10, 40, .8);

src/scss/full.scss

@@ -0,0 +1,98 @@
+/*-----------------------------------------------------------------------------------
+	0. CSS Reset & Normalize
+	1. Base
+		1.1 Wrap/Container
+		1.2 Animations
+		1.3 Responsive Media (videos, iframe, screenshots...)
+		1.4 Basic Grid (2,3,4 columns)
+	2. Typography & Lists
+		2.1 Headings with background
+		2.2 Classes: .text-
+		2.3 San Francisco Font (Apple)
+	3. Header & Footer
+		3.1 Logo
+	4. Navigation
+		4.1 Navbars
+	5. SLIDES (vertically and horizontally centered)
+		5.1 Mini container & Alignment
+		5.2 Counter / Navigation Slides
+		5.3 Background Images/Video
+	6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height).
+		6.1 .flexblock.features
+		6.2 .flexblock.clients
+		6.3 .flexblock.steps
+		6.4 .flexblock.metrics
+		6.5 .flexblock.specs
+		6.6 .flexblock.reasons
+		6.7 .flexblock.gallery
+		6.8 .flexblock.plans
+		6.9. flexblock.activity
+	7. Promos/Offers (pricing, tagline, CTA...)
+	8. Work / Resume / CV
+	9. Table of contents
+	10. Cards
+	11. Quotes
+	12. Avatars
+	13. Tables
+	14. Forms
+  15. Longform Elements
+	16. Safari Bug (flex-wrap)
+	17. Slidex index (aka zoom)
+  18. Print
+  19. Colors
+----------------------------------------------------------------------------------- */
+
+@import 'vars';
+@import 'utils/mixins';
+@import 'utils/reset';
+@import 'utils/clear';
+
+@import 'base';
+@import 'utils/animations';
+@import 'modules/media';
+@import 'modules/browser';
+@import 'modules/grid';
+
+@import 'typography';
+
+@import 'modules/header-footer';
+@import 'modules/logo';
+@import 'modules/navigation';
+
+@import 'modules/slides';
+@import 'modules/slides-bg';
+@import 'modules/slides-navigation';
+
+@import 'modules/flexblock';
+@import 'modules/flexblock-features';
+@import 'modules/flexblock-clients';
+@import 'modules/flexblock-steps';
+@import 'modules/flexblock-metrics';
+@import 'modules/flexblock-specs';
+@import 'modules/flexblock-reasons';
+@import 'modules/flexblock-gallery';
+@import 'modules/flexblock-plans';
+@import 'modules/flexblock-activity';
+@import 'modules/promos';
+@import 'modules/work';
+@import 'modules/toc';
+
+@import 'modules/cards';
+
+@import 'modules/quotes';
+@import 'modules/avatars';
+
+@import 'modules/tables';
+
+@import 'modules/form';
+@import 'modules/button';
+@import 'modules/badges';
+
+@import 'modules/longform';
+
+@import 'utils/bugs';
+@import 'modules/zoom';
+
+@import 'modules/print';
+
+@import 'color';

src/scss/modules/_avatars.scss

@@ -0,0 +1,22 @@
+/*=========================================
+12. Avatars - uifaces.com
+=========================================== */
+
+cite img,
+img[class*='avatar-'] {
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+img[class*='avatar-'] {
+  border-radius: 50%;
+}
+
+$avatar-sizes: 40, 48, 56, 64, 72, 80;
+
+@each $size in $avatar-sizes {
+  img.avatar-#{$size} {
+    @include square(#{$size}px);
+  }
+}

src/scss/modules/_badges.scss

@@ -0,0 +1,43 @@
+/*=== App Store Badges === */
+/* Change width and height: 216x64px, 162x48px, 135x40... */
+
+[class*='badge-'] {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: .6rem;
+  display: inline-block;
+  height: 40px;
+  line-height: 4rem;
+  text-indent: -4000px;
+  width: 135px;
+
+  &:hover {
+    opacity: .7;
+  }
+
+  @media (min-width: 1024px) {
+    height: 48px;
+    line-height: 4.8rem;
+    width: 162px;
+  }
+
+  @media (min-width: 500px) {
+    & + & {
+      margin-left: 1.8rem;
+    }
+  }
+
+  @media (max-width: 499px) {
+    & + & {
+      margin-top: .8rem;
+    }
+  }
+}
+
+.badge-ios {
+  background-image: url('../images/bt-appstore.png');
+}
+
+.badge-android {
+  background-image: url('../images/bt-playstore.png');
+}

src/scss/modules/_browser.scss

@@ -0,0 +1,39 @@
+/*=== HTML Browser (Screenshots) ================ */
+/* <figure class="browser"> img </figure> */
+
+.browser {
+  border-radius: .3rem;
+  margin: 0 auto 3.2rem;
+  max-width: 1024px;
+  overflow: hidden;
+
+  li & {
+    margin-bottom: 0;
+  }
+
+  h1 + &,
+  h2 + &,
+  p + & {
+    margin-top: 4.8rem;
+  }
+
+  figcaption {
+    padding: 2.4rem;
+  }
+
+  &:before {
+    content: '● ● ●';
+    font-size: .8rem;
+    left: 0;
+    line-height: 0;
+    padding: 1.6rem;
+    position: absolute;
+    text-align: left;
+    top: 0;
+    width: 100%;
+
+    @media (min-width: 768px) {
+      font-size: 1.6rem;
+    }
+  }
+}

src/scss/modules/_button.scss

@@ -0,0 +1,14 @@
+/* Buttons/Badges */
+[class*='button'] {
+  @media (min-width: 500px) {
+    & + & {
+      margin-left: 1.8rem;
+    }
+  }
+
+  @media (max-width: 499px) {
+    & + & {
+      margin-top: .8rem;
+    }
+  }
+}

src/scss/modules/_cards.scss

@@ -0,0 +1,140 @@
+/*===========================================
+10. Cards
+============================================= */
+
+[class*='card-'] {
+  &,
+  & > a {
+    clear: both;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+
+  .fullscreen &,
+  .fullscreen & > a {
+    min-height: 100vh;
+  }
+
+  figure img,
+  figure iframe {
+    display: block;
+    margin: 0 auto;
+  }
+
+  figure figcaption {
+    bottom: 0;
+    font-size: 1.4rem;
+    left: 0;
+    line-height: 2.4rem;
+    padding: .8rem 2.4rem;
+    position: absolute;
+    z-index: 2;
+
+    svg {
+      font-size: 1rem;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  [class*='card'][class*='bg-'] figure,
+  .fullscreen [class*='card'] figure {
+    max-height: 100%;
+    min-width: 380px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  [class*='card-'][class*='bg-'] figure img,
+  [class*='card-'][class*='bg-'] figure iframe,
+  .fullscreen [class*='card-'] figure img,
+  .fullscreen [class*='card-'] figure iframe {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+.flex-content,
+[class*='card'] blockquote {
+  padding: 2.4rem;
+  position: relative;
+}
+
+[class*='card-'] .flex-content,
+[class*='card-'] blockquote {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.flex-content p {
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .card-50 figure,
+  .card-50 blockquote,
+  .card-50 .flex-content {
+    width: 50%;
+  }
+
+  .card-30 figure,
+  .card-70 .flex-content,
+  .card-70 blockquote {
+    width: 30%;
+  }
+
+  .card-40 figure,
+  .card-60 .flex-content,
+  .card-60 blockquote {
+    width: 40%;
+  }
+
+  .card-60 figure,
+  .card-40 .flex-content,
+  .card-40 blockquote {
+    width: 60%;
+  }
+
+  .card-70 figure,
+  .card-30 .flex-content,
+  .card-30 blockquote {
+    width: 70%;
+  }
+
+  [class*='card']:nth-child(odd) figure {
+    order: 0;
+  }
+
+  [class*='card']:nth-child(even) figure {
+    order: 1;
+  }
+
+  .flex-content,
+  [class*='card'] blockquote {
+    padding: 4.8rem;
+  }
+
+  .fullscreen [class*='card'] .flex-content,
+  .fullscreen [class*='card'] blockquote {
+    padding: 6.4rem;
+  }
+}
+
+@media (max-width: 767px) {
+  [class*='card-'],
+  [class*='card-'] > a {
+    flex-flow: column;
+  }
+
+  .card figure,
+  .card header {
+    width: 100%;
+  }
+}

src/scss/modules/_flexblock-activity.scss

@@ -0,0 +1,58 @@
+/*===========================================
+6.9 Block Activity <ul class="activity">
+CV / News
+============================================= */
+
+.flexblock.activity {
+  flex-direction: column;
+
+  li {
+    flex: 1;
+    position: relative;
+    width: auto;
+  }
+
+  p {
+    margin-bottom: 0;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .year,
+  .title {
+    display: inline;
+    font-weight: 600;
+  }
+
+  .summary {
+    width: 100%;
+  }
+
+  .title {
+    margin-left: 1rem;
+  }
+
+
+  @media (min-width: 768px) {
+    p {
+      float: left;
+    }
+
+    .year {
+      width: 15%;
+    }
+
+    .title {
+      margin-left: 4%;
+      margin-right: 4%;
+      width: 27%;
+    }
+
+    .summary {
+      width: 50%;
+    }
+  }
+}

src/scss/modules/_flexblock-clients.scss

@@ -0,0 +1,38 @@
+/*=====================================================================
+6.2 Clients Logos <ul class="flexblock clients">
+======================================================================= */
+
+.flexblock.clients.blink li > a,
+.flexblock.clients li {
+  padding: 0;
+}
+
+.flexblock.clients li figcaption {
+  padding: 0 2.4rem 2.4rem;
+}
+
+.flexblock.clients.border li figcaption {
+  padding-top: 2.4rem;
+}
+
+.clients.blink li>a,
+.clients li {
+  justify-content: inherit;
+}
+
+.clients li img,
+.clients li svg {
+  display: block;
+  padding: 2.4rem;
+}
+
+.clients.border li img,
+.clients.border li svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.clients li:hover {
+  z-index: 1;
+}

src/scss/modules/_flexblock-features.scss

@@ -0,0 +1,77 @@
+/*====================================================================
+6.1 Features <ul class="flexblock features">
+====================================================================== */
+
+.flexblock.features {
+  > li {
+    border-radius: .4rem;
+    margin-bottom: 4.8rem;
+    width: 100%;
+  }
+
+  li h2 {
+    text-transform: uppercase;
+  }
+
+  li span {
+    font-weight: 300;
+  }
+
+  li p {
+    margin: 0;
+  }
+
+  li p em {
+    display: block;
+  }
+
+  li span,
+  li svg {
+    display: block;
+    font-size: 6.4rem;
+    line-height: 1;
+    margin: 0;
+  }
+
+  li img {
+    width: 6.4rem;
+  }
+
+  li span sup {
+    font-size: 3rem;
+  }
+
+  @media (min-width: 1200px) {
+    li span,
+    li svg,
+    li img {
+      float: left;
+      margin-right: .8rem;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .flexblock.features {
+    margin-left: -2%;
+    margin-right: -2%;
+  }
+
+  .flexblock.features > li {
+    margin-left: 2%;
+    margin-right: 2%;
+    width: 29%;
+  }
+
+  .size-50 .flexblock.features > li {
+    width: 46%;
+  }
+
+  .column .flexblock.features > li {
+    width: 100%;
+  }
+
+  footer .flexblock.features>li {
+    margin-bottom: 0;
+  }
+}

src/scss/modules/_flexblock-gallery.scss

@@ -0,0 +1,141 @@
+/*=================================================
+6.7 Gallery - <ul class="flexblock gallery">
+Block Thumbnails li+.overlay+image
+img size recommended:800x600px
+=================================================== */
+
+.flexblock.gallery {
+  li {
+    margin-bottom: 4.8rem;
+
+    &:nth-child(n+4) {
+      flex: inherit;
+    }
+
+    figcaption {
+      padding: 1.6rem;
+      position: relative;
+
+      &:before {
+        content: '';
+        height: 0;
+        left: 20%;
+        margin-left: -.5em;
+        position: absolute;
+        top: .4rem;
+        transform: rotate(135deg);
+        transform-origin: 0 0;
+        transition: .1s;
+        width: 0;
+      }
+    }
+
+    &:hover figcaption:before {
+      top: .3rem;
+    }
+  }
+
+  .aligncenter & li figcaption:before {
+    left: 55%;
+    margin-left: 0;
+  }
+
+  li,
+  &.blink li > a {
+    padding: 0;
+  }
+
+  h2 {
+    text-transform: uppercase;
+  }
+
+  h2 + p,
+  h3 + p {
+    margin-top: .8rem;
+  }
+
+  p {
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+    margin-bottom: 0;
+  }
+
+  li footer {
+    margin-top: .8rem;
+    padding: 1.2rem 0 0;
+    position: relative;
+  }
+
+  li img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (min-width: 600px) {
+    margin-left: -2%;
+    margin-right: -2%;
+
+    li {
+      margin-left: 2%;
+      margin-right: 2%;
+      width: 46%;
+    }
+  }
+}
+
+
+
+@media (min-width: 1024px) {
+  .flexblock.gallery li {
+    width: 21%;
+  }
+
+  .grid.sm .flexblock.gallery li,
+  .grid.ms .flexblock.gallery li {
+    width: 29%;
+  }
+
+  .grid.sms .flexblock.gallery li {
+    width: 46%;
+  }
+}
+
+.overlay {
+  bottom: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: all .3s linear;
+  width: 100%;
+  z-index: 2;
+}
+
+li .overlay {
+  align-items: center;
+}
+
+li .overlay h2 {
+  letter-spacing: .2rem;
+  margin: 0;
+  padding: 0 2.4rem;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+.overlay p,
+.overlay time {
+  margin-bottom: 0;
+}
+
+li:hover .overlay {
+  cursor: pointer;
+}

src/scss/modules/_flexblock-metrics.scss

@@ -0,0 +1,32 @@
+/*=================================================
+6.4 Block Numbers - <ul class="flexblock metrics">
+=================================================== */
+
+.metrics li {
+  text-align: center;
+  width: 100%;
+
+  @media (min-width: 568px) {
+    width: 50%;
+  }
+
+  @media (min-width: 1024px) {
+    width: 25%;
+  }
+}
+
+.metrics li strong {
+  display: block;
+}
+
+.metrics li span,
+.metrics li svg {
+  display: block;
+  font-size: 6.4rem;
+  line-height: 7.2rem;
+  margin: 0 auto;
+}
+
+.card-50 .metrics li {
+  width: 50%;
+}

src/scss/modules/_flexblock-plans.scss

@@ -0,0 +1,85 @@
+/*===============================================
+6.8 Plans / Pricing <ul class="flexblock plans">
+================================================= */
+
+.flexblock.plans {
+  > li {
+    border-radius: 3px;
+    margin-bottom: 4.8rem;
+    text-align: center;
+    z-index: 1;
+  }
+
+  li,
+  &.blink li>a {
+    padding: 0;
+  }
+
+  &.blink li > a div,
+  li div {
+    padding-bottom: 3.2rem;
+  }
+
+  li p,
+  li h2 {
+    padding: .8rem 3.2rem;
+  }
+
+  li h2 {
+    float: left;
+    font-weight: 400;
+    letter-spacing: .1rem;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  .price {
+    clear: both;
+    display: block;
+    font-size: 4.8rem;
+    font-weight: 400;
+    line-height: 6.2rem;
+    padding: 2.4rem;
+
+    sup {
+      font-size: 1.8rem;
+      margin-right: .4rem;
+    }
+
+    li ul {
+      margin-bottom: 2.4rem;
+    }
+  }
+
+  li ul li {
+    display: block;
+    padding: .8rem 3.2rem;
+    text-align: left;
+    width: 100%;
+  }
+
+
+  @media (min-width: 1024px) {
+    margin-left: -2%;
+    margin-right: -2%;
+
+    >li {
+      margin-left: 2%;
+      margin-right: 2%;
+      width: 29%;
+    }
+
+    >li:hover,
+    >li:nth-child(2) {
+      position: relative;
+      transform: scale(1.08);
+      z-index: 2;
+    }
+
+    &:hover li:nth-child(2):not(:hover) {
+      position: relative;
+      transform: scale(1);
+      z-index: 1;
+    }
+  }
+}

src/scss/modules/_flexblock-reasons.scss

@@ -0,0 +1,41 @@
+/*=================================================
+6.6 Reasons/Why/Numbers (counter-increment)
+<ul class="flexblock reasons">
+=================================================== */
+.flexblock.reasons {
+  li {
+    counter-increment: list;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      transform: translateY(-.2rem);
+    }
+
+    &:after {
+      bottom: -2.4rem;
+      content: '';
+      display: block;
+      height: 1px;
+      position: relative;
+    }
+
+    &:before {
+      content: counter(list)'.';
+      font-size: 6.4rem;
+      line-height: 1;
+    }
+
+    @media (min-width: 768px) {
+      padding-left: 8.8rem;
+      /* You need two digits? (1-10)*/
+      /*padding-left: 12rem; */
+
+      &:before {
+        left: 2.4rem;
+        position: absolute;
+      }
+    }
+  }
+}
+

src/scss/modules/_flexblock-specs.scss

@@ -0,0 +1,49 @@
+/*=====================================================
+6.5 Specs/Items: <ul class="flexblock specs">
+======================================================= */
+
+.specs li {
+  text-align: left;
+  width: 100%;
+
+  &:after {
+    bottom: -2.4rem;
+    content: '';
+    display: block;
+    height: 1px;
+    position: relative;
+  }
+
+  &:hover {
+    transform: translateX(.2rem);
+  }
+
+  span,
+  svg {
+    display: block;
+    font-size: 6.4rem;
+    line-height: 1;
+    margin: 0;
+  }
+
+  img {
+    width: 6.4rem;
+  }
+
+  span {
+    font-weight: 300;
+
+    sup {
+      font-size: 3rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    span,
+    svg,
+    img {
+      float: left;
+      margin-right: 2.4rem;
+    }
+  }
+}

src/scss/modules/_flexblock-steps.scss

@@ -0,0 +1,38 @@
+/*==================================================
+6.3 flexblock.steps <ul class="flexblock steps">
+About, Philosophy...
+=================================================== */
+
+.steps li {
+  width: 100%;
+
+  img,
+  span {
+    display: block;
+    margin: 0 auto .8rem;
+  }
+
+  span {
+    font-size: 6.4rem;
+  }
+
+  @media (min-width: 768px) {
+    width: 50%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .steps li {
+    width: 25%;
+  }
+
+  .process {
+    border-left-style: solid;
+    border-left-width: 15px;
+    height: 0;
+    left: 0;
+    position: absolute;
+    top: 60px;
+    width: 0;
+  }
+}

src/scss/modules/_flexblock.scss

@@ -0,0 +1,101 @@
+/*===============================================================
+6. Magic blocks with flexbox (Auto-fill & Equal Height)
+Blocks Links li>a = .flexblock.blink (.blink required)
+================================================================= */
+
+.flexblock {
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+
+  &:after {
+    clear: both;
+  }
+
+  &:before {
+    content: '';
+    display: table;
+  }
+
+  li,
+  &.blink li > a {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 2.4rem;
+    position: relative;
+  }
+
+  li {
+    flex: auto;
+    text-align: left;
+    transition: .3s;
+    width: 100%;
+
+    &:hover {
+      transform: translateY(-.2rem);
+    }
+
+    @media (min-width: 600px) {
+      width: 50%;
+    }
+
+    @media (min-width: 1024px) {
+      width: 25%;
+    }
+  }
+
+  &.aligncenter li {
+    text-align: center;
+  }
+
+  &.vertical-align li {
+    justify-content: center;
+  }
+
+  &.blink li {
+    padding: 0;
+  }
+
+  li h2 svg,
+  li h3 svg {
+    margin-top: 0;
+  }
+}
+
+h1 + .flexblock,
+h2 + .flexblock,
+h3 + .flexblock,
+div + ul,
+div + ol {
+  margin-top: 3.2rem;
+}
+
+.flexblock li h2,
+.flexblock li h3,
+footer .column h2,
+footer .column h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 3.2rem;
+  margin-bottom: 0;
+}
+
+.flexblock li li,
+.flexblock.blink li li {
+  padding: 0;
+  width: 100%;
+}
+
+[class*='content-'] .flexblock li p {
+  font-size: 1.8rem;
+  line-height: 3.2rem;
+}
+
+.content-right .flexblock.features li,
+.content-left .flexblock.features li {
+  width: 46%;
+}

src/scss/modules/_form.scss

@@ -0,0 +1,159 @@
+/*=========================================
+14. Forms
+=========================================== */
+
+form {
+  text-align: left;
+
+  & + p,
+  input + p,
+  textarea + p {
+    margin-top: .8rem;
+  }
+}
+
+
+input[type='text'],
+input[type='email'],
+input[type='tel'],
+input[type='url'],
+input[type='search'],
+input[type='password'] {
+  appearance: none;
+  border-radius: 0;
+}
+
+input,
+button,
+select {
+  display: inline-block;
+  font-size: 1.6rem;
+  font-weight: 400;
+  height: 4.8rem;
+  margin: 0;
+  padding: .7rem;
+  position: relative;
+  width: 100%;
+
+}
+
+input[type='radio'],
+input[type='checkbox'] {
+  height: auto;
+  padding: 4px;
+  width: auto;
+}
+
+button[type='submit'],
+textarea {
+  width: 100%;
+}
+
+textarea {
+  padding: .7rem;
+}
+
+button {
+  cursor: pointer;
+  text-align: center;
+  width: auto;
+}
+
+.button {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.8rem;
+  font-weight: 400;
+  line-height: 4.8rem;
+  min-width: 16rem;
+  padding: 0 1.6rem;
+  text-align: center;
+
+  svg {
+    font-size: 2.4rem;
+  }
+}
+
+.button.radius,
+input.radius {
+  border-radius: 2.4rem;
+}
+
+button,
+input[type='submit'] {
+  font-weight: 400;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+}
+
+
+.plans .button {
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+
+.try {
+  display: block;
+  font-size: 1.6rem;
+  margin-top: 1.6rem;
+}
+
+fieldset {
+  padding: 2.4rem;
+}
+
+legend {
+  border: 0;
+  font-weight: 400;
+  letter-spacing: .1rem;
+  padding: 1.6rem 2.4rem;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-width: 1px;
+}
+
+a.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+  transform: scale(1.01);
+}
+
+:disabled,
+button:disabled:hover {
+  cursor: not-allowed;
+}
+
+.user {
+  input {
+    margin-bottom: 0;
+
+    &[type='email'],
+    &[type='search'],
+    &[type='text'] {
+      width: 100%;
+
+      @media (min-width: 500px) {
+        float: left;
+        width: 70%;
+      }
+    }
+  }
+
+  button,
+  input[type='submit'] {
+    left: 0;
+    width: 100%;
+
+    @media (min-width: 500px) {
+      cursor: pointer;
+      width: 30%;
+    }
+  }
+}

src/scss/modules/_grid.scss

@@ -0,0 +1,59 @@
+/*=== 1.4. Basic Grid (Flexible blocks)
+Auto-fill & Equal height === */
+
+.grid {
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:after {
+    clear: both;
+  }
+
+  &:before {
+    content: '';
+    display: table;
+  }
+
+  & > .column {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    padding: 2.4rem;
+    position: relative;
+    transition: .3s;
+    width: 100%;
+  }
+
+  &.vertical-align .column {
+    justify-content: center;
+  }
+
+  @media (min-width: 768px) {
+    & > .column {
+      width: 25%;
+    }
+
+    &.sm .column:nth-child(1) {
+      width: 30%;
+    }
+
+    &.sm .column:nth-child(2) {
+      width: 70%;
+    }
+
+    &.ms .column:nth-child(1) {
+      width: 70%;
+    }
+
+    &.ms .column:nth-child(2) {
+      width: 30%;
+    }
+
+    &.sms .column:nth-child(2) {
+      width: 50%;
+    }
+  }
+}

src/scss/modules/_header-footer.scss

@@ -0,0 +1,64 @@
+/*=========================================
+3. Header & Footer
+=========================================== */
+
+/* -- If you want an unique, global header/footer,read this:
+https://github.com/webslides/webslides/issues/57 -- */
+
+header,
+footer,
+#navigation {
+  padding: 2.4rem;
+  transition: all .4s ease-in-out;
+  width: 100%;
+}
+
+header p,
+footer p {
+  line-height: 4.8rem;
+  margin-bottom: 0;
+}
+
+header[role='banner'] img,
+footer img {
+  height: 4rem;
+  vertical-align: middle;
+}
+
+footer {
+  position: relative;
+}
+
+header,
+footer {
+  z-index: 3;
+}
+
+header,
+.ws-ready footer {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.ws-ready footer {
+  bottom: 0;
+  top: auto;
+}
+
+// Remove "opacity=0" if you want an unique, visible header on each slide
+header[role='banner'] {
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 767px) {
+  footer .alignleft,
+  footer .alignright {
+    display: block;
+    float: none;
+  }
+}

src/scss/modules/_logo.scss

@@ -0,0 +1,17 @@
+/*=== 3.1. Logo === */
+
+.logo {
+  text-transform: lowercase;
+
+  a {
+    background: url('../images/logos/logo.svg') no-repeat 0 0;
+    background-size: 4.8rem;
+    float: left;
+    height: 4.8rem;
+    text-indent: -4000px;
+    /*If you remove text-indent and add: */
+    /*padding-left: 6rem;*/
+    vertical-align: middle;
+    width: 4.8rem;
+  }
+}

src/scss/modules/_longform.scss

@@ -0,0 +1,67 @@
+/*=========================================
+15. Longform
+=========================================== */
+/* -- Posts = .wrap.longform -- */
+
+.longform {
+  width: 72rem;
+  /* Why 72rem=720px?
+  90-95 characters per line = better reading speed */
+
+  & .alignleft,
+  & .alignright {
+    max-width: 40%;
+  }
+
+  img.aligncenter,
+  figure.aligncenter {
+    margin-bottom: 3.2rem;
+    margin-top: 3.2rem;
+  }
+
+  ul,
+  ol {
+    margin-bottom: 3.2rem;
+  }
+
+  ul ol,
+  ol ul,
+  ul ul,
+  ol ol {
+    margin-bottom: 0;
+  }
+
+  figcaption p,
+  [class*='text-pull-'] p {
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+  }
+
+  /* Mobile: video full width */
+  .text-pull.embed {
+    margin-left: -2.4rem;
+    margin-right: -2.4rem;
+    padding-bottom: 60.6%;
+  }
+
+  @media (min-width: 1280px) {
+    [class*='text-pull-'] {
+      max-width: 32%;
+    }
+
+    .text-pull-right {
+      margin-right: -256px;
+    }
+
+    .text-pull-left {
+      margin-left: -256px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .text-quote {
+      margin-left: -4.8rem;
+      margin-right: -4.8rem;
+    }
+  }
+}

src/scss/modules/_media.scss

@@ -0,0 +1,61 @@
+/*=== 1.3 Responsive Media (videos, iframe...) === */
+
+.embed {
+  height: 0;
+  overflow: hidden;
+  /*aspect ratio:16:9*/
+  padding-bottom: 56.6%;
+  /*aspect ratio: 4:3*/
+  /*padding-bottom: 75%;*/
+  position: relative;
+
+  iframe,
+  object,
+  embed,
+  video {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  /* -- Responsive background video
+  https://fvsch.com/code/video-background/ -- */
+
+  .fullscreen > & {
+    bottom: 0;
+    height: auto;
+    left: 0;
+    padding-bottom: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+
+    /* 1. No object-fit support: */
+    & > iframe,
+    & > object,
+    & > embed,
+    & > video {
+      @media (min-aspect-ratio: 16 / 9) {
+        height: 300%;
+        top: -100%;
+      }
+
+      @media (max-aspect-ratio: 16 / 9) {
+        left: -100%;
+        width: 300%;
+      }
+
+      /* 2. If supporting object-fit, overriding (1): */
+      @supports (object-fit: cover) {
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}

src/scss/modules/_navigation.scss

@@ -0,0 +1,72 @@
+/*=========================================
+4. Navigation
+=========================================== */
+
+/*=== 4.1. Navbars === */
+
+nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  /*====align left====*/
+  justify-content: flex-start;
+  /* ==== align center ====*/
+  /*justify-content: center; */
+  /*====align right====*/
+  /* justify-content: flex-end; */
+  /*====separated columns li a====*/
+  /* justify-content: space-between; */
+  /*====separated columns centered li a====*/
+  /*justify-content: space-around;*/
+
+  li {
+    float: left;
+    list-style: none;
+    position: relative;
+  }
+}
+
+nav ul li:first-child,
+nav[role='navigation'] ul li {
+  margin-left: 0;
+}
+
+nav[role='navigation'] li a {
+  display: flex;
+  justify-content: center;
+  line-height: 4.8rem;
+  max-width: 100%;
+  padding: 0 1.6rem;
+  position: relative;
+  text-decoration: none;
+
+  svg {
+    margin: 1.5rem .4rem 1.5rem 0;
+  }
+}
+
+header nav ul {
+  justify-content: flex-end;
+  margin: 0;
+}
+
+nav.aligncenter ul,
+.aligncenter nav ul {
+  /* ==== align center ====*/
+  justify-content: center;
+}
+
+nav.navbar ul li {
+  /*====full float li a ====*/
+  flex: 1 1 auto;
+}
+
+@media (max-width: 568px) {
+  nav.navbar ul {
+    flex-flow: column wrap;
+    padding: 0;
+  }
+
+  nav.navbar li a {
+    justify-content: flex-start;
+  }
+}

src/scss/modules/_print.scss

@@ -0,0 +1,52 @@
+/*=========================================
+17. PRINT
+=========================================== */
+
+// sass-lint:disable no-important
+@media print {
+  @page {
+    margin: .5cm;
+    size: A4 landscape;
+  }
+
+  // Black prints faster
+  * {
+    background: transparent !important;
+    color: $black !important;
+    filter: none !important;
+    text-shadow: none !important;
+  }
+
+  html,
+  body,
+  #webslides {
+    height: auto !important;
+    overflow: auto !important;
+    width: auto !important;
+  }
+
+  #webslides {
+    overflow-x: auto !important;
+    overflow-y: auto !important;
+  }
+
+  section,
+  .slide {
+    display: flex !important;
+    height: auto !important;
+  }
+
+  section * {
+    animation: none;
+  }
+
+  table,
+  figure {
+    page-break-inside: avoid;
+  }
+
+  #counter,
+  #navigation {
+    display: none;
+  }
+}

src/scss/modules/_promos.scss

@@ -0,0 +1,98 @@
+/*=============================================
+7. Promos/Offers (pricing, tagline, CTA...)
+=============================================== */
+
+.cta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.number,
+.cta .benefit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 100%;
+  padding: .8rem;
+}
+
+.number {
+  text-align: center;
+}
+
+.cta .benefit {
+  max-width: 100%;
+  text-align: center;
+}
+
+.number span {
+  display: block;
+  font-size: 8rem;
+  line-height: 8rem;
+}
+
+.number span sup {
+  font-size: 4rem;
+}
+
+.cta p {
+  margin-bottom: 0;
+}
+
+@media (min-width: 768px) {
+  .number,
+  .cta .benefit {
+    max-width: 50%;
+    padding: 4.8rem;
+  }
+
+  .cta .benefit {
+    text-align: left;
+  }
+
+  .number span {
+    font-size: 16rem;
+    line-height: 16rem;
+
+    sup {
+      font-size: 6rem;
+      vertical-align: middle;
+    }
+  }
+}
+
+/* --- Header CTA --- */
+.cta-cover {
+  display: table;
+  width: 100%;
+
+  h1 strong {
+    font-weight: 400;
+  }
+
+  @media (min-width: 1024px) {
+    h1 {
+      float: left;
+      max-width: 80%;
+    }
+
+    h1 strong {
+      display: block;
+    }
+
+    .button {
+      margin-top: 1.2rem;
+    }
+
+    .try {
+      text-align: center;
+    }
+  }
+
+  @media (max-width: 1023px) {
+    .alignright {
+      float: none;
+    }
+  }
+}

src/scss/modules/_quotes.scss

@@ -0,0 +1,71 @@
+/*=========================================
+11. Quotes
+=========================================== */
+
+blockquote {
+  display: inline-block;
+  position: relative;
+
+  p {
+    font-size: 2.4rem;
+    line-height: 4rem;
+
+    &:last-child {
+      margin-bottom: 3.2rem;
+    }
+  }
+}
+
+/* -- Interviews dl.text-interview -- */
+dd blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+cite {
+  display: block;
+  text-align: center;
+
+  &:before {
+    content: '\2014 \2009';
+    margin-right: 6px;
+  }
+}
+
+cite span {
+  display: block;
+}
+
+/* -- A big Blockquote -- */
+/* .wall will be deprecated soon. Use .text-quote ;) */
+.text-quote,
+.wall {
+  /* Versatility: blockquote, p, h2... */
+  position: relative;
+
+  &:before {
+    content: '\201C';
+    font-family: arial, sans-serif;
+    font-size: 12rem;
+    height: 5.6rem;
+    left: -.8rem;
+    line-height: 1;
+    position: absolute;
+    text-align: center;
+    top: -4rem;
+    width: 5.6rem;
+  }
+
+  @media (min-width: 768px) {
+    padding-left: 6.4rem;
+
+    p {
+      font-size: 3.2rem;
+      line-height: 4.8rem;
+    }
+
+    &:before {
+      left: .8rem;
+      top: -1.6rem;
+    }
+  }
+}

src/scss/modules/_slides-bg.scss

@@ -0,0 +1,126 @@
+/*=== 5.3 Slides - Background Images/Videos === */
+
+.background,
+[class*='background-'] {
+  background-repeat: no-repeat;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+/*=== BG Positions === */
+
+.background {
+  background-position: center;
+  background-size: cover;
+
+  &-top {
+    background-position: top;
+    background-size: cover;
+  }
+
+  &-bottom {
+    background-position: bottom;
+    background-size: cover;
+  }
+
+  &-center {
+    background-position: center;
+  }
+
+  &-center-top {
+    background-position: center top;
+  }
+
+  &-right-top {
+    background-position: right top;
+  }
+
+  &-left-top {
+    background-position: left top;
+  }
+
+  &-center-bottom,
+  &-left-bottom,
+  &-right-bottom,
+  &-left,
+  &-right {
+    background-position: center bottom;
+  }
+
+  @media (min-width: 1024px) {
+    &-left-bottom {
+      background-position: left bottom;
+    }
+
+    &-right-bottom {
+      background-position: right bottom;
+    }
+
+    &-right {
+      background-position: right;
+    }
+
+    &-left {
+      background-position: left;
+    }
+  }
+
+  /*fullscreen video
+    <video class="background-video">
+  */
+
+  &-video {
+    height: 100%;
+    object-fit: fill;
+    width: 100%;
+  }
+}
+/*=== bg image/video overlay === */
+/*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark...  -- */
+
+[class*='bg-'] .light,
+[class*='bg-'] .light {
+  opacity: .8;
+}
+
+[class*='bg-'] .dark,
+[class*='bg-'] .dark {
+  opacity: .2;
+}
+
+[class*='bg-'] .background-video.dark {
+  opacity: .5;
+}
+
+@media (max-width: 1023px) {
+  [class*='background-'] {
+    animation: fadeIn ease-in .2;
+    opacity: .2;
+  }
+
+  .background-video {
+    opacity: .8;
+  }
+}
+
+/*=== Animated Background Image === */
+
+.background.anim {
+  animation: anim 80s linear infinite;
+  background-position: center top;
+  background-repeat: repeat;
+  background-size: 100%;
+  height: 200%;
+
+}
+
+/*=== Background with a frame === */
+/*<span class="background" style="background-image:url('image.jpg')"></span>
+<span class="background frame"></span>*/
+
+[class*='background'].frame {
+  margin: 2.4rem;
+}

src/scss/modules/_slides-navigation.scss

@@ -0,0 +1,70 @@
+/* === 5.2 Counter / Navigation Slides  === */
+
+#navigation {
+  animation: fadeIn 8s;
+  bottom: 0;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  width: 24.4rem;
+  /* hover/visibility */
+  z-index: 4;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+#counter {
+  display: block;
+  line-height: 4.8rem;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  text-align: center;
+  width: 10rem;
+
+  a:hover {
+    padding: .8rem;
+  }
+}
+
+a#next,
+a#previous {
+  border-radius: .4rem;
+  cursor: pointer;
+  font-size: 2.4rem;
+  height: 4rem;
+  padding: .8rem;
+  position: absolute;
+  text-align: center;
+  width: 4rem;
+}
+
+a#next {
+  right: 3.2rem;
+}
+
+a#previous {
+  left: 3.2rem;
+}
+
+@media (max-width: 1024px) {
+  #navigation {
+    animation: fadeIn 6s;
+    background: url('../images/swipe.svg') no-repeat center top;
+    background-size: 4.8rem;
+  }
+
+  #navigation a,
+  #counter {
+    display: none;
+  }
+}

src/scss/modules/_slides.scss

@@ -0,0 +1,118 @@
+/*============================================
+5. SLIDES (Full Screen)
+Vertically and horizontally centered
+============================================== */
+
+/* Fade transition to all slides.
+* = All HTML elements will have those styles.*/
+
+section * {
+  animation: fadeIn .6s ease-in-out;
+}
+
+section .background,
+section .light,
+section .dark {
+  animation-duration: 0s;
+}
+
+/*=== Section = Slide === */
+section,
+.slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh; /*Fullscreen*/
+  /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/
+  padding: 2.4rem;
+  /*Fixed/Visible header? padding-top: 12rem; */
+  page-break-after: always;
+  position: relative;
+  word-wrap: break-word;
+
+  @media (min-width: 1024px) {
+    padding-bottom: 12rem;
+    padding-top: 12rem;
+  }
+}
+
+/*slide with no padding (full card, .embed youtube video...) */
+.fullscreen {
+  padding: 0;
+  /* Fixed/Visible header?
+  padding:8.2rem 0 0 0;
+  */
+}
+
+/* slide alignment - top */
+.slide-top {
+  justify-content: flex-start;
+}
+
+/* slide alignment - bottom */
+.slide-bottom {
+  justify-content: flex-end;
+}
+
+/*== 5.1. Mini container width:50%
+Aligned items [class*="content-"]=== */
+[class*='content-'] {
+  position: relative;
+  text-align: left;
+}
+
+.wrap[class*='bg-'],
+.wrap.frame,
+[class*='content-'][class*='bg-'],
+[class*='content-'].frame,
+[class*='align'][class*='bg-'] {
+  padding: 4.8rem;
+}
+
+form[class*='bg-'] {
+  padding: 2.4rem;
+}
+
+[class*='content-'] > [class*='content-'] p {
+  font-size: 1.8rem;
+  line-height: 3.2rem;
+}
+
+.content-center {
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  [class*='content-'] {
+    width: 50%;
+
+    &:after,
+    &:before {
+      content: '';
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  .content-left {
+    float: left;
+  }
+
+  .content-right {
+    float: right;
+  }
+
+  [class*='content-'] + [class*='content-'] {
+    margin-bottom: 4.8rem;
+    padding-left: 2.4rem;
+  }
+
+  [class*='content-'] + [class*='size-'] {
+    clear: both;
+    margin-top: 6.4rem;
+  }
+}

src/scss/modules/_tables.scss

@@ -0,0 +1,34 @@
+/*=========================================
+13. Tables
+=========================================== */
+
+table {
+  margin-bottom: 3.2rem;
+  margin-top: 3.2rem;
+}
+
+td,
+th,
+thead {
+  border-spacing: 0;
+  padding: .7rem 2.4rem;
+}
+
+thead th,
+th {
+  cursor: default;
+  font-weight: 600;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+thead,
+td.goals {
+  font-weight: 600;
+  text-shadow: none;
+}
+
+tr > td {
+  font-weight: 400;
+}

src/scss/modules/_toc.scss

@@ -0,0 +1,77 @@
+/*===========================================
+9. Table of contents
+============================================= */
+
+.toc,
+.toc ol > li:before,
+.chapter {
+  position: relative;
+  z-index: 2;
+}
+
+.toc {
+  ol {
+    counter-reset: item;
+    position: relative;
+
+    & > li:before {
+      content: counters(item, '.') '. ';
+      display: table-cell;
+      padding-right: .8rem;
+      width: 2.4rem;
+    }
+
+    li li:before {
+      content: counters(item, '.') ' ';
+    }
+  }
+
+  li {
+    counter-increment: item;
+    display: table;
+    font-weight: 400;
+    margin-bottom: .8rem;
+    margin-left: 0;
+    transition: .3s;
+    width: 100%;
+
+    li {
+      font-weight: 300;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    .toc-page:before {
+      content: '';
+      display: block;
+      left: 0;
+      margin-top: 1.8rem;
+      position: absolute;
+      right: 4rem;
+    }
+
+    & > a {
+      display: inline-block;
+      width: 100%;
+    }
+
+    a:hover span {
+      font-weight: 600;
+    }
+
+    a:hover .toc-page:before {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+.chapter {
+  display: inline-block;
+  font-size: 1.8rem;
+  line-height: 3.2rem;
+  padding-right: .8rem;
+}
+
+.toc-page {
+  float: right;
+}

src/scss/modules/_work.scss

@@ -0,0 +1,107 @@
+/*=========================================
+8. Work/Resumé/CV <ul class="work">
+=========================================== */
+.work {
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  h1 + &,
+  h2 + &,
+  h3 + &,
+  p + & {
+    margin-top: 4.8rem;
+  }
+
+  li {
+    flex: 1;
+    list-style: none;
+    margin: 0;
+    position: relative;
+  }
+
+  p {
+    margin-bottom: 0;
+    transition: .3s;
+  }
+
+  li a {
+    display: block;
+    float: left;
+    height: 100%;
+    padding: 2.4rem 0;
+    width: 100%;
+  }
+
+  li p {
+    padding-left: 1.2rem;
+  }
+
+  li.work-label p {
+    padding-left: 0;
+  }
+
+  li a:hover p:first-child {
+    padding-left: 1.6rem;
+  }
+
+  li p:last-child {
+    position: absolute;
+    right: 1.2rem;
+    top: 2.4rem;
+  }
+
+  li.work-label p:last-child {
+    right: 0;
+    top: 0;
+  }
+
+  &-label {
+    float: left;
+    font-weight: 600;
+    padding: 0 0 2.4rem;
+    width: 100%;
+  }
+
+  &-title {
+    display: block;
+    padding-right: 1.2rem;
+    width: 75%;
+  }
+}
+
+@media (min-width: 768px) {
+  .work-label p,
+  .work li p {
+    float: left;
+    margin-right: 2%;
+    width: 25%;
+  }
+
+  .work li.work-label p:last-child,
+  .work li p:last-child {
+    float: right;
+    margin-right: 0;
+    padding-right: 1.2rem;
+    position: relative;
+    right: auto;
+    text-align: right;
+    top: auto;
+  }
+
+  .work li p.work-date {
+    width: 120px;
+  }
+}
+
+@media (max-width: 768px) {
+  .work-client,
+  .work-label .work-services {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+  }
+}

src/scss/modules/_zoom.scss

@@ -0,0 +1,155 @@
+/*==============================================
+18. Slides Index: Thumbnails navigation gallery
+================================================ */
+
+#webslides-zoomed {
+  align-content: flex-start;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: 100vh;
+  position: relative;
+  z-index: 2;
+
+  &.disabled {
+    left: -100000px;
+    position: absolute;
+  }
+
+  .slide {
+    height: 400%;
+    width: 400%;
+
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      height: 200%;
+      width: 200%;
+    }
+
+    @media (max-aspect-ratio: 2 / 3) {
+      height: 200%;
+      width: 200%;
+    }
+  }
+
+  > .wrap {
+    @media (min-width: 1024px) {
+      padding-bottom: 12rem;
+      padding-top: 12rem;
+    }
+  }
+
+  > .wrap > .grid > .column {
+    align-self: auto;
+    flex: 0 1 auto;
+    order: 0;
+    position: relative;
+    width: 25%;
+
+    @media screen and (max-width: 567px) {
+      width: 100%;
+    }
+
+    @media screen and (min-width: 568px) and (max-width: 1024px) {
+      width: 50%;
+    }
+
+    @media screen and (max-width: 567px) and (orientation: portrait) {
+      width: 100%;
+    }
+
+    > .wrap-zoom {
+      border-radius: .3rem;
+      display: inline-block;
+      height: 25vh;
+      overflow: hidden;
+      position: relative;
+      transition: .3s;
+
+      @media screen and (max-width: 567px) {
+        height: 50vh;
+      }
+
+      @media screen and (min-width: 568px) and (max-width: 1023px) {
+        height: 33vh;
+      }
+
+      @media screen and (orientation: portrait) {
+        height: 50vw;
+      }
+
+      &:hover {
+        transform: scale(1.02);
+        z-index: 2;
+      }
+
+      &.current {
+        transform: scale(1.08);
+      }
+    }
+
+    > .wrap-zoom > .zoom-layer {
+      background: transparent;
+      cursor: pointer;
+      height: 100%;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  .column > .wrap-zoom > .slide {
+    clip: rect(0 auto auto 0);
+    display: flex !important; //  sass-lint:disable-line no-important
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: scale(.25) translate(-150%, -150vh);
+
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      transform: scale(.5) translate(-50%, -50%);
+    }
+
+    @media (max-aspect-ratio: 2 / 3) {
+      transform: scale(.5) translate(-50%, -50%);
+    }
+  }
+
+  & .column {
+    opacity: 0;
+    transform: scale(1.2);
+    transition: opacity .4s, transform .4s;
+    transition-delay: .2s;
+  }
+
+  &.in {
+    .column {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.text-slide-number {
+  display: inline-block;
+  margin: .8rem auto;
+  text-align: center;
+}
+
+#webslides {
+  transition: filter .3s;
+
+  &.disabled,
+  &.zooming {
+    position: fixed;
+    width: 100%;
+    z-index: 0;
+  }
+
+  &.disabled {
+    /*
+    filter: blur(10px);
+    transform: scale(1.1);
+    */
+    /* Blur makes scroll no accesible */
+    width: calc(100% - 10px);
+  }
+}

src/scss/utils/_animations.scss

@@ -0,0 +1,106 @@
+/* === 1.2 Animations ================
+Just 5 basic animations:
+.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight
+https://github.com/daneden/animate.css */
+
+/*-- fadeIn -- */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation: fadeIn 1s;
+}
+
+/*-- fadeInUp -- */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation: fadeInUp 1s;
+}
+
+/*-- zoomIn -- */
+@keyframes zoomIn {
+  from {
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  animation: zoomIn 1s;
+}
+
+/*-- slideInLeft -- */
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  animation: slideInLeft 1s;
+  animation-fill-mode: both;
+}
+
+/*-- slideInRight -- */
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  animation: slideInRight 1s;
+  animation-fill-mode: both;
+}
+
+/* Animated Background (Matrix) */
+@keyframes anim {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-1200px);
+  }
+}
+
+/* Duration */
+.slow {
+  animation-duration: 4s;
+
+  & + & {
+    animation-duration: 5s;
+  }
+}

src/scss/utils/_bugs.scss

@@ -0,0 +1,13 @@
+/*=========================================
+16. SAFARI BUGS (flex-wrap)
+Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
+=========================================== */
+
+.flexblock:before,
+.flexblock:after,
+.grid:before,
+.grid:after,
+.cta:before,
+.cta:after {
+  width: 0;
+}

src/scss/utils/_clear.scss

@@ -0,0 +1,19 @@
+/*=== Clearing === */
+
+header,
+main,
+section,
+aside,
+footer,
+.clear,
+.wrap {
+  &:before,
+  &:after {
+    content: '';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}

src/scss/utils/_mixins.scss

@@ -0,0 +1,4 @@
+@mixin square($width) {
+  height: $width;
+  width: $width;
+}

src/scss/utils/_reset.scss

@@ -0,0 +1,300 @@
+// sass-lint:disable no-vendor-prefixes
+/*
+=========================================
+0. CSS Reset & Normalize
+=========================================
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: '' '';
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+embed,
+iframe,
+object {
+  max-width: 100%;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+ul {
+  list-style: square;
+  text-indent: inherit;
+}
+
+ol {
+  list-style: decimal;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+a {
+  background-color: transparent;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+sup,
+sub {
+  font-size: .75em;
+  height: 0;
+  line-height: 2.2em;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  bottom: 1ex;
+}
+
+sub {
+  top: .5ex;
+}
+
+small {
+  font-size: .75em;
+  line-height: 1.72;
+}
+
+big {
+  font-size: 1.25em;
+}
+
+hr {
+  border: 0;
+  clear: both;
+  display: block;
+  height: 1px;
+  margin: 3.2rem auto;
+  text-align: center;
+  width: 100%;
+}
+
+h2 + hr,
+h3 + hr {
+  margin-bottom: 4.8rem;
+}
+
+p + hr {
+  margin-bottom: 4rem;
+}
+
+dfn,
+cite,
+em,
+i {
+  font-style: italic;
+}
+
+abbr,
+acronym {
+  cursor: help;
+}
+
+mark,
+ins {
+  padding: 0 4px;
+  text-decoration: none;
+  text-shadow: none;
+
+}
+
+::-moz-selection {
+  text-shadow: none;
+}
+
+::selection {
+  text-shadow: none;
+}
+
+img {
+  border: 0;
+  height: auto;
+  max-width: 100%;
+}
+
+img:hover {
+  opacity: .9;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  line-height: 0;
+  margin: 0;
+  position: relative;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin: 0;
+}

static/css/colors.css

@@ -1,917 +0,0 @@
-/*=========================================
-WebSlides - Colors
-=========================================== */
-
-/* == Backgrounds == */
-
-/* .bg-primary */
-/* .bg-secondary */
-/* .bg-light */
-
-/* == General == */
-/* .bg-white */
-/* .bg-black */
-/* .bg-black-blue */
-/* .bg-brown */
-/* .bg-blue */
-/* .bg-gray */
-/* .bg-purple */
-/* .bg-red */
-
-/* == Brands == */
-/* .bg-apple */
-/* .bg-facebook */
-
-/* == Gradients == */
-/* .bg-gradient-r (radial) */
-/* .bg-gradient-h (horizontal) */
-/* .bg-gradient-v (vertical) */
-/* .bg-gradient-white */
-/* .bg-gradient-gray */
-
-/* == Transparent/Opacity Black == */
-/* .bg-trans-dark */
-/* .bg-trans-light */
-/* .bg-trans-gradient */
-
-
-/*=========================================
-Base
-=========================================== */
-
-body {
-  color: #333;
-  background-color: #f7f9fb;
-}
-:focus {
-  box-shadow: 0 0 2px rgba(150, 187, 238, 1);
-}
-svg {
-  fill: currentColor;
-}
-
-[class*="bg-"] a,
-[class*="bg-gradient-"] a {
-  color: #bce;
-}
-.bg-brown a {color: #c23;}
-
-a,
-.bg-white a,
-.bg-light a,.bg-gradient-white a {
-  color: #44d;
-}
-
-a:hover {
-  color: #3af;
-}
-.flexblock li>a,[class*="bg-"] li>a,
-[class*="bg-gradient-"] li>a,
-article header a {
-  color: inherit;
-}
-
-hr {
-  background: rgba(0, 20, 80, 0.2);
-  background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%);
-}
-
-hr:after {
-  background-color: rgba(255, 255, 255, 0.8);
-  color: #333;
-}
-
-abbr,
-acronym {
-  border-bottom: 1px dotted #333;
-}
-
-mark,
-ins {
-  background-color: rgba(221,238,255, 0.8);
-  color: inherit;
-}
-
-::-moz-selection {
-  background-color: rgba(221,238,255, 0.8);
-}
-
-::-webkit-selection {
-  background-color: rgba(221,238,255, 0.8);
-}
-
-::selection {
-  background-color: rgba(221,238,255, 0.8);
-}
-
-pre {
-  border: 1px solid rgba(0, 20, 80, 0.1);
-  box-shadow: 0 8px 16px rgba(0,20,80,.04),0 4px 16px rgba(0,0,0,.08);
-  background: #fff;
-
-}
-pre:hover {
-  box-shadow: 0 8px 16px rgba(0,40,160,.08),0 8px 24px rgba(0,0,0,.08);
-
-}
-code,[class*="bg-"] pre {
-  background-color: rgba(255, 255, 255, 0.09);
-}
-
-.bg-white code{
-  background: rgba(0, 20, 80, 0.03);
-}
-/*================================================
-Slides - Backgrounds <section class="bg-primary">
-================================================== */
-
-/*3 Corp Colors*/
-
-.bg-primary {
-  background-color: #44d;
-}
-
-.bg-secondary {
-  background-color: #67d;
-}
-
-.bg-light {
-  background-color: #edf2f7;
-}
-
-/*General Colors*/
-
-.bg-black {
-  background-color: #111;
-}
-.bg-black-blue {
-  background-color: #123;
-}
-.bg-blue {
-  background-color: #346;
-}
-.bg-brown {
-  background-color: #f8f8f9;
-}
-.bg-gray {
-  background-color: #d5d9e2;
-}
-.bg-green {
-  background-color: #077;
-}
-.bg-purple {
-  background-color: #62b;
-}
-
-.bg-red {
-  background-color: #c23;
-}
-
-.bg-white {
-  background-color: #fff;
-}
-[class*="bg-"] .bg-white {
-  text-shadow: none;
-  color: #333;
-}
-
-/* BG Apple Keynote*/
-
-.bg-apple {
-  background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%);
-}
-
-
-/* BG Facebook */
-
-.bg-facebook {
-  background: #3b5998;
-}
-
-
-/*Font Color*/
-.bg-trans-dark,.bg-trans-gradient,
-.bg-primary,
-.bg-secondary,
-.bg-blue,
-.bg-green,.bg-purple,.bg-red,.bg-facebook,.bg-apple,[class*="bg-black"],[class*="bg-gradient-"] {
-  color: #fff;
-  text-shadow: 0 1px 0 #013;
-}
-
-.bg-light p {
-  color: #456;
-}
-/*.bg-white p,*/
-.bg-brown p{color: #666;
-}
-
-/*Transparent/Opacity*/
-
-.bg-trans-dark {
-  background: rgba(0, 0, 0, 0.8);
-}
-
-.bg-trans-light {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-/*Covers/Longforms...*/
-.bg-trans-gradient{
-  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
-}
-
-/*Horizontal Gradient*/
-
-.bg-gradient-h {
-  background: linear-gradient(134deg,#32b 0,#62b 100%);
-}
-
-
-/*Vertical Gradient*/
-
-.bg-gradient-v {
-  background: linear-gradient(to top, #62b 0%, #32b 100%);
-}
-
-
-/*Radial Gradient*/
-
-.bg-gradient-r {
-  background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
-}
-
-/*White Gradient (vertical)*/
-.bg-gradient-white {
-  background: linear-gradient(180deg,#f2f4f6 0,#fff 100%);
-  color: #333;
-  text-shadow: none;
-}
-
-/*Gray Gradient (horizontal)*/
-.bg-gradient-gray{
-  background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
-  color: #333;
-  text-shadow: none;
-}
-/*Border/Frame*/
-.frame {
-  border: .8rem solid #fff;
-}
-
-/*Layer/Box Shadow*/
-.shadow,.pre {
-  position: relative;
-}
-.shadow:before,.shadow:after {
-  box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
-}
-
-/*============================
-TYPOGRAPHY
-============================== */
-
-/* -- Horizontal separator  -- */
-
-.text-separator:before {
-  background-color: rgba(170, 0, 0, 0.8);
-}
-
-/* -- Pull Quote (Right/Left)  -- */
-
-[class*="text-pull-"] {
-  border-top: 4px solid rgba(0, 0, 0, 0.5);
-}
-/* -- Context  -- */
-
-[class*="bg-"] .text-context:before {
-  background-color: #fff;
-}
-.text-context:before,.bg-white .text-context:before{
-  background-color: rgba(0, 20, 80, 0.2);
-}
-
-/* -- Text shadow  -- */
-.text-shadow {
-  text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
-}
-
-/* -- time, ampersands, prepositions (for, of...), symbols...  -- */
-
-[class*="card-"] time,
-h1 span {
-  color: #abd;
-}
-
-/* -- <pre> comment  -- */
-.code-comment {
-  color: rgba(70, 170, 130, 0.9);
-  text-shadow: none;
-}
-
-/*=========================================
-Header/Nav
-=========================================== */
-
-header[role=banner] {
-  background-color: #fff;
-}
-
-.logo a {
-  color: inherit;
-}
-
-nav[role=navigation] li a {
-  background-color: rgba(50, 50, 50, .9);
-}
-
-nav[role=navigation] li a:hover {
-  background-color: rgba(50, 50, 50, .7);
-}
-
-nav[role=navigation] li a,
-nav[role=navigation] li a:hover {
-  color: #fff;
-}
-
-nav[role=navigation] li.active a {
-  background-color: #555;
-  color: #fff;
-}
-
-
-nav li.twitter a:hover {
-  background-color: #1da1f3;
-}
-nav li.facebook a:hover {
-  background-color: #3b5998;
-}
-
-nav li.linkedin a:hover {
-  background-color: #1683bb;
-}
-
-nav li.dribbble a:hover {
-  background-color: #ea4c89;
-}
-
-nav li.github a:hover {
-  background-color: #60b044;
-}
-
-nav li.email a:hover {
-  background: #dd4b39;
-}
-
-/*===================================================
-.flexblock li hover/active
-===================================================== */
-
-.flexblock li.active a,
-.metrics li:hover,
-.specs li:hover,.reasons li:hover {
-  background-color: rgba(0, 20, 80, 0.03);
-}
-
-/*=========================================
-Features & Clients List
-=========================================== */
-
-.features li,.clients li  {
-  background-color: rgba(255, 255, 255, 0.9);
-}
-
-[class*="bg-"] .features li,
-[class*="bg-"] .clients li {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.features li:hover,.clients li:hover  {
-  box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
-}
-/*.features li span,.features li svg{color: #44d;}*/
-
-/*============================
-.flexblock with border
-============================== */
-
-.border {
-  border-right: 1px solid rgba(0, 20, 80, 0.1);
-  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-.border li {
-  border-top: 1px solid rgba(0, 20, 80, 0.1);
-  border-left: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-.flexblock.border li li {
-  border: none;
-}
-
-/*===========================================
-flexblock.steps
-============================================= */
-
-.steps li:nth-child(1) {
-  background-color: #e8eef7;
-}
-
-.steps li:nth-child(2) {
-  background-color: #dde5f3;
-}
-
-.steps li:nth-child(3) {
-  background-color: #cdd8ec;
-}
-
-.steps li:nth-child(4) {
-  background-color: #bbcdec;
-}
-
-.process {
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-}
-
-.steps li:hover,
-.steps.blink li:hover>a {
-  background-color: #b8cef7;
-}
-
-@media (min-width: 1024px) {
-  .process.step-2 {
-    border-left-color: #e8eef7;
-  }
-  .process.step-3 {
-    border-left-color: #dde5f3;
-  }
-  .process.step-4 {
-    border-left-color: #cdd8ec;
-  }
-  .steps li:hover + li [class*="step-"] {
-    border-left-color: #b8cef7;
-  }
-}
-
-
-/*=========================================================
-Items: You can use for settings, drag&drop, close/delete...
-=========================================================== */
-
-.specs li:after {
-  background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
-}
-
-.specs li:last-child:after {
-  background: none;
-}
-
-/*.specs li {background: rgba(255,255,255,0.2);}*/
-
-/*=========================================================
-Why/Steps/Motivation/Reasons -  Decimal/Numbers
-=========================================================== */
-
-.reasons li:after {
-  background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
-}
-
-.reasons li:last-child:after {
-  background: none;
-}
-
-/*=========================================
-Overlays
-=========================================== */
-
-.overlay {
-  background-color: rgba(0, 0, 0, 0.2);
-  /*background-color: rgba(255,255,255 , 0.9);*/
-  /*border: 3px double #fff;*/
-}
-
-li:hover .overlay {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.overlay,
-.overlay a {
-  color: #fff;
-  text-shadow: 0 1px 0 #111;
-}
-
-
-/*=========================================
-Gallery li+.overlay+image
-=========================================== */
-
-.gallery li {
-  background-color: rgba(0, 20, 80, 0.06);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
-}
-
-.gallery li figcaption {
-  background-color: #fff;
-}
-
-.flexblock.gallery li:hover {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
-}
-.gallery li footer {
-  border-top:1px solid rgba(0,20,80,0.1);
-}
-
-.gallery li a {
-  color: #333;
-  text-shadow: none;
-}
-.flesblock.gallery li a footer{color: #aaa;}
-/*Arrow */
-
-.gallery li figcaption:before {
-  border: .8rem solid black;
-  border-color: transparent transparent #fff #fff;
-  /*box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);*/
-}
-
-
-
-/*=========================================
-Plans / Pricing
-=========================================== */
-
-.plans>li div,
-.flexblock.plans li:hover div {
-  background-color: #fff;
-}
-
-.plans>li:hover,
-.plans>li:nth-child(2) {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-.plans:hover li:nth-child(2):not(:hover) {
-  box-shadow: none;
-}
-
-.plans li h2 {
-  background-color: rgba(0, 20, 80, 0.5);
-  color: #fff;
-}
-
-.plans ul li {
-  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-.plans ul li:last-child {
-  border-bottom: none;
-}
-
-.plans>li>a {
-  color: inherit;
-}
-
-.plans>li>a {
-  color: #333;
-  text-shadow: none;
-}
-
-
-/*============================
-Activity/CV/Timeline/News
-============================== */
-
-.activity li {
-  border-top: .1rem solid rgba(0, 20, 80, 0.1);
-}
-
-.activity li:hover {
-  background-color: rgba(0, 20, 80, 0.02);
-}
-
-
-/*=========================================
-Resume/Work/CV/Portfolio
-=========================================== */
-
-.work-label,
-.work li a {
-  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-.work li:nth-child(odd)>a {
-  background-color: rgba(0, 20, 80, 0.03);
-}
-
-.work li a:hover {
-  background-color: rgba(0, 20, 80, 0.04);
-}
-
-
-/*===========================================
-Clients / Services / Logos...
-============================================= */
-
-
-.clients.border figcaption {border-top:1px solid rgba(0,20,80,0.1);
-}
-/*.clients>li {
-  background: rgba(255, 255, 255, 0.8);
-}
-*/
-
-/*====================
-LOGOS
-====================== */
-
-img.blacklogo {
-  background: none;
-  /* --- Images (black logo/image) --- */
-  -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
-  filter: grayscale(100%) brightness(10%) contrast(100%);
-}
-
-
-/* --- Images (gray logo/image) --- */
-
-img.graylogo {
-  -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
-  filter: grayscale(100%) brightness(10%) contrast(10%);
-}
-
-
-/* --- Images (white Logo/Image) --- */
-
-img.whitelogo {
-  -webkit-filter: brightness(0) invert(1);
-  filter: brightness(0) invert(1);
-}
-
-
-/* --- Logo/Images Hover --- */
-
-li:hover img.blacklogo,
-li:hover img.graylogo,
-img.blacklogo:hover,img.graylogo:hover {
-  background: none;
-  /*Images - Original Color*/
-  filter: grayscale(0%);
-  -webkit-filter: grayscale(0%);
-  filter: none;
-  transition: all 0.6s ease;
-}
-
-
-/*=========================================================
-Cards
-=========================================================== */
-
-[class*="card-"]>a {
-  color: inherit;
-}
-
-/* ---  card ul specs --- */
-
-.description>li {
-  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-.description>li:last-child {
-  border-bottom: none;
-}
-
-/*== Figure Background === */
-
-[class*="card-"][class*="bg-"] figure {
-  background-color: rgba(0, 20, 80, 0.06);
-}
-
-/*== Ficaption Cards === */
-
-[class*="card-"] figcaption,
-[class*="card-"] figcaption a {
-  color: #fff;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
-}
-
-@media (min-width: 768px) {
-  /*===CTA (Call to Action - Numbers, Price, Promo...)  ===== */
-  .cta .benefit {
-    border-left-width: 1px;
-    border-style: solid;
-    border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-    -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-    -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-
-  }
-}
-
-
-/*=========================================
-Tables
-=========================================== */
-
-table td,
-th,
-thead {
-  border: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-thead {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-tr:nth-child(even)>td {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-tr>td {
-  border-top: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-td:hover,
-tr:nth-child(even)>td:hover {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-
-/*============================
-Browser (Screenshots)
-============================== */
-
-.browser {
-  border: 1px solid rgba(0, 20, 80, 0.1);
-}
-
-.browser:hover {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-
-/*=== Topbar === */
-
-.browser:before {
-  background-color: rgba(0, 20, 80, 0.1);
-  color: rgba(255, 255, 255, 0.9);
-  border-bottom: 1px solid rgba(0, 20, 80, 0.2);
-}
-
-.browser:hover:before {
-  background-color: rgba(0, 20, 80, 0.12);
-  color: #fff;
-}
-
-
-/*=========================================
-Forms
-=========================================== */
-
-input,
-textarea {
-  background-color: #fafbfc;
-}
-
-input:focus,
-textarea:focus {
-  background-color: #fff;
-  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-}
-input:focus::-moz-placeholder {
-  color: #ddd;
-}
-input:focus::-webkit-input-placeholder {
-  color: #ddd;
-}
-a.button,[class*="badge-"],
-button[type="submit"],
-input {
-  box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
-}
-
-button,
-input,
-select,
-textarea,
-button[type="submit"],
-input[type="submit"],
-.button,.button:hover,
-button[type="submit"]:hover,
-input[type="submit"]:hover
-{
-  border: 1px solid #44d;
-}
-
-button[type="submit"],
-input[type="submit"],
-.button,.button:hover,button[type="submit"]:hover,input[type="submit"]:hover {
-  color: #fff;
-  background-color: #44d;
-  text-shadow: 0 1px 0 #123;
-}
-.button:active,button[type="submit"]:active,input[type="submit"]:active {
-  background-color: #17d;
-}
-.ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
-.bg-primary select,
-.bg-primary textarea,
-.bg-primary .button,
-.bg-primary button,.bg-primary button:hover,
-.bg-primary input,
-[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
-{
-  border-color: #fff;
-}
-
-[class*="bg-"] a.button {
-  color: #fff;
-}
-
-.bg-white a.button.ghost,.bg-gradient-white a.button.ghost {color: #333;border: 1px solid #44d;}
-
-:disabled,
-button:disabled:hover {
-  background-color: #eee;
-  border-color: #eee;
-  color: #ccc;
-}
-fieldset {
-  border: 1px solid #44d;
-  background-color: rgba(0, 20, 80, 0.2)
-}
-
-legend {
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #fff;
-}
-
-
-/* Inputs/Buttons - hover */
-
-input:hover,
-select:hover {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-}
-
-
-/* App Store Badges */
-
-[class*="badge-"] {
-  border: 1px solid #345;
-  background-color: #000;
-  /* Transparent Button */
-  /* background: none;*/
-}
-
-
-form .flexblock li:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-/*============================
-Table of Contents
-============================== */
-
-.toc,
-.toc ol>li:before,
-.chapter {
-  background-color: #f7f9fb;
-}
-
-.toc li .toc-page:before {
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.9);
-}
-
-
-/*============================
-Slides (Counter/Arrows)
-============================== */
-
-
-/*#navigation:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-*/
-#counter,
-#navigation a {
-  color: #abc;
-}
-
-#webslides:hover #navigation a:hover {
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.9);
-}
-
-
-/*============================
-Footer
-============================== */
-
-footer[role=contentinfo] {
-  background-color: #fff;
-}
-
-/*footer:hover {
-background-color:rgba(255,255,255 , 0.3);
-}
-*/

test/modules/slide.test.js

@@ -0,0 +1,152 @@
+import Slide from '../../src/js/modules/slide';
+
+describe('Slide module', () => {
+  test('Candidate', () => {
+    const valid = document.createElement('section');
+    const invalid = document.createElement('p');
+
+    expect(Slide.isCandidate(valid)).toBe(true);
+    expect(Slide.isCandidate(invalid)).toBe(false);
+  });
+
+  describe('Instance behaviour', () => {
+    let ws;
+    let slides;
+
+    beforeEach(() => {
+      const template =
+        '<section><div class="content">Content</div></section>'
+        .repeat(5);
+      document.body.innerHTML = `<div id="webslides">${template}</div>`;
+
+      const el = document.getElementById('webslides');
+      slides = [];
+
+      el.querySelectorAll('section').forEach((el, i) => {
+        slides.push(new Slide(el, i));
+      });
+
+      ws = {
+        el,
+        slides
+      };
+    });
+
+    afterEach(() => {
+      document.body.innerHTML = '';
+    });
+
+    test('Slides should have some properties', () => {
+      const slide = ws.slides[0];
+
+      expect(slide.el).toBeInstanceOf(Element);
+      expect(slide.el.id).toBe('section-1');
+      expect(slide.parent).toBeInstanceOf(Element);
+      expect(slide.parent.id).toBe('webslides');
+      expect(slide.i).toBe(0);
+    });
+
+    test('Slides should get a slide class and be hidden', () => {
+      const slide = ws.slides[0];
+
+      expect(slide.el.classList.contains('slide')).toBe(true);
+      expect(slide.el.style.display).toBe('none');
+    });
+
+    test('Show/hide', () => {
+      const slide = ws.slides[0];
+
+      slide.show();
+      expect(slide.el.style.display).not.toBe('none');
+      expect(slide.el.classList.contains('current')).toBe(true);
+
+      slide.hide();
+      expect(slide.el.style.display).toBe('none');
+      expect(slide.el.classList.contains('current')).not.toBe(true);
+    });
+
+    test('Events', () => {
+      const slide = ws.slides[0];
+      const leave = jest.fn();
+      const enter = jest.fn();
+      const enable = jest.fn();
+      const disable = jest.fn();
+      const show = jest.fn();
+
+      slide.el.addEventListener('dom:leave', leave);
+      slide.el.addEventListener('dom:enter', enter);
+      slide.el.addEventListener('slide:enable', enable);
+      slide.el.addEventListener('slide:disable', disable);
+      slide.el.addEventListener('slide:show', show);
+
+      expect(enter).not.toHaveBeenCalled();
+      expect(leave).not.toHaveBeenCalled();
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
+
+      slide.enable();
+      expect(enter).not.toHaveBeenCalled();
+      expect(leave).not.toHaveBeenCalled();
+      expect(enable).toHaveBeenCalledTimes(1);
+      expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
+      enable.mockClear();
+
+      slide.disable();
+      expect(enter).not.toHaveBeenCalled();
+      expect(leave).not.toHaveBeenCalled();
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).toHaveBeenCalledTimes(1);
+      expect(show).not.toHaveBeenCalled();
+      disable.mockClear();
+
+      slide.moveAfterLast();
+      expect(enter).toHaveBeenCalledTimes(1);
+      expect(leave).toHaveBeenCalledTimes(1);
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
+      enter.mockClear();
+      leave.mockClear();
+
+      slide.moveBeforeFirst();
+      expect(enter).toHaveBeenCalledTimes(1);
+      expect(leave).toHaveBeenCalledTimes(1);
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
+      enter.mockClear();
+      leave.mockClear();
+
+      slide.show();
+      expect(show).toHaveBeenCalled();
+    });
+
+    test('Move', () => {
+      const wsEl = document.getElementById('webslides');
+      const slide = ws.slides[0];
+
+      expect(wsEl.lastChild).not.toBe(slide.el);
+      slide.moveAfterLast();
+      expect(wsEl.lastChild).toBe(slide.el);
+
+      expect(wsEl.firstChild).not.toBe(slide.el);
+      slide.moveBeforeFirst();
+      expect(wsEl.firstChild).toBe(slide.el);
+    });
+
+    test('Get section from el', () => {
+      const wsEl = document.getElementById('webslides');
+      const el = ws.slides[3].el.firstChild;
+      const found = Slide.getSectionFromEl(el);
+
+      expect(found.section.id).toBe('section-4');
+      expect(found.i).toBe(4);
+
+      const notFound = Slide.getSectionFromEl(wsEl);
+      expect(notFound.section).toBeNull();
+      expect(notFound.i).toBeNull();
+    });
+  });
+});

test/modules/webslides.test.js

@@ -0,0 +1,411 @@
+import WebSlides from '../../src/js/modules/webslides';
+import Slide from '../../src/js/modules/slide';
+import DOM from '../../src/js/utils/dom';
+
+jest.useFakeTimers();
+
+let ws;
+let webslides;
+
+beforeEach(() => {
+  const slides =
+    '<section class="slide"><div class="content">Content</section>'.repeat(20);
+  document.body.innerHTML =
+      `<div id="webslides">${slides}<div id="other"></div></div>`;
+
+  ws = document.getElementById('webslides');
+  webslides = new WebSlides();
+});
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  location.hash = '';
+});
+
+test('Should throw if no element is found with webslides id', () => {
+  document.body.innerHTML = '';
+
+  expect(() => {
+    ws.setAttribute('id', '');
+    new WebSlides();
+  }).toThrow('Couldn\'t find the webslides container!');
+});
+
+test('Should have correct properties', () => {
+  expect(webslides.isMoving).toBe(false);
+  expect(webslides.slides.length).toBe(20);
+  expect(webslides.currentSlideI_).toBe(0);
+  expect(webslides.currentSlide_).toBe(webslides.slides[0]);
+  expect(webslides.maxSlide_).toBe(20);
+  expect(webslides.isVertical).toBe(false);
+  expect(webslides.initialised).toBe(true);
+
+  expect(webslides.slides[0]).toBeInstanceOf(Slide);
+
+  // Plugins
+  expect(webslides.plugins.autoslide).toBeDefined();
+  expect(webslides.plugins.clickNav).toBeDefined();
+  expect(webslides.plugins.grid).toBeDefined();
+  expect(webslides.plugins.hash).toBeDefined();
+  expect(webslides.plugins.keyboard).toBeDefined();
+  expect(webslides.plugins.nav).toBeDefined();
+  expect(webslides.plugins.scroll).toBeDefined();
+  expect(webslides.plugins.touch).toBeDefined();
+  expect(webslides.plugins.video).toBeDefined();
+  expect(webslides.plugins.youtube).toBeDefined();
+  expect(webslides.plugins.zoom).toBeDefined();
+
+  // Options
+  expect(webslides.options.autoslide).toBe(false);
+  expect(webslides.options.changeOnClick).toBe(false);
+  expect(webslides.options.loop).toBe(true);
+  expect(webslides.options.minWheelDelta).toBe(40);
+  expect(webslides.options.navigateOnScroll).toBe(true);
+  expect(webslides.options.scrollWait).toBe(450);
+  expect(webslides.options.slideOffset).toBe(50);
+});
+
+test('Should be able to define vertical WS', () => {
+  ws.classList.add('vertical');
+  webslides = new WebSlides();
+
+  expect(webslides.isVertical).toBe(true);
+});
+
+test('Should remove all elements that are not sections', () => {
+  expect(document.getElementById('other')).toBeNull();
+});
+
+test('Ready', () => {
+  // Already initialised
+  expect(document.documentElement.classList.contains('ws-ready')).toBe(true);
+  document.documentElement.classList.remove('ws-ready');
+  const listener = jest.fn();
+
+  ws.addEventListener('ws:init', listener);
+  webslides.initialised = false;
+  webslides.onInit_();
+  expect(listener).toHaveBeenCalled();
+  expect(document.documentElement.classList.contains('ws-ready')).toBe(true);
+  expect(webslides.initialised).toBe(true);
+});
+
+test('Should be possible to init with a different slide', () => {
+  location.hash = '#slide=4';
+  webslides = new WebSlides();
+  expect(webslides.currentSlideI_).toBe(3);
+});
+
+describe('Go to slide', () => {
+  beforeEach(() => {
+    jest.spyOn(webslides, 'scrollTransitionToSlide_');
+    jest.spyOn(webslides, 'transitionToSlide_');
+  });
+
+  test('Shouldn\'t allow to go to invalid indexes', () => {
+    webslides.goToSlide(-4);
+    webslides.goToSlide(null);
+    webslides.goToSlide(99);
+
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).not.toHaveBeenCalled();
+  });
+
+  test('Shouldn\'t allow to move if already moving', () => {
+    webslides.isMoving = true;
+    webslides.goToSlide(2);
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).not.toHaveBeenCalled();
+  });
+
+  test('Shouldn\'t allow to move if going to same slide', () => {
+    webslides.goToSlide(0);
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).not.toHaveBeenCalled();
+  });
+
+  test('Shouldn\'t use Scroll if first slide', () => {
+    webslides.isVertical = true;
+    webslides.currentSlide_ = null;
+
+    webslides.goToSlide(1);
+
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).toHaveBeenCalled();
+  });
+
+  test('Shouldn\'t use Scroll if not vertical', () => {
+    webslides.isVertical = false;
+    webslides.goToSlide(1);
+
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).toHaveBeenCalled();
+  });
+
+  test('Shouldn\'t use Scroll if no touch or not enabled', () => {
+    webslides.plugins.touch = null;
+    webslides.goToSlide(1);
+
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).toHaveBeenCalled();
+    webslides.transitionToSlide_.mockClear();
+
+    webslides.plugins.touch = {
+      isEnabled: false
+    };
+
+    webslides.goToSlide(2);
+
+    expect(webslides.scrollTransitionToSlide_).not.toHaveBeenCalled();
+    expect(webslides.transitionToSlide_).toHaveBeenCalled();
+  });
+
+  test('Forward should be true if moving ahead or forced', () => {
+    const getIsMovingForward = () =>
+        webslides.transitionToSlide_.mock.calls[0][0];
+
+    webslides.goToSlide(2);
+    expect(getIsMovingForward()).toBe(true);
+    webslides.transitionToSlide_.mockClear();
+
+    // Going back
+    webslides.goToSlide(1);
+    expect(getIsMovingForward()).toBe(false);
+    webslides.transitionToSlide_.mockClear();
+
+    // Going forward but forced
+    webslides.goToSlide(3, false);
+    expect(getIsMovingForward()).toBe(false);
+    webslides.transitionToSlide_.mockClear();
+  });
+
+  test('Should pass correct arguments to transition to slide', () => {
+    webslides.goToSlide(2);
+    const args = webslides.transitionToSlide_.mock.calls[0];
+
+    expect(args[1]).toBeInstanceOf(Slide);
+    expect(args[1]).toBe(webslides.slides[2]);
+    expect(args[2]).toBe(webslides.onSlideChange_);
+  });
+
+  test('Should pass correct arguments to scroll to slide', () => {
+    webslides.isVertical = true;
+    webslides.goToSlide(2);
+    const args = webslides.scrollTransitionToSlide_.mock.calls[0];
+
+    expect(args[1]).toBeInstanceOf(Slide);
+    expect(args[1]).toBe(webslides.slides[2]);
+    expect(args[2]).toBe(webslides.onSlideChange_);
+  });
+
+  test('After move', () => {
+    webslides.isVertical = true;
+    const mock = jest.fn();
+    const currentSlide = webslides.currentSlide_;
+    webslides.el.addEventListener('ws:slide-change', mock);
+
+    webslides.goToSlide(1);
+    expect(webslides.isMoving).toBe(true);
+    jest.runAllTimers();
+    expect(webslides.isMoving).toBe(false);
+    expect(webslides.currentSlide_).not.toBe(currentSlide);
+    expect(webslides.currentSlide_).toBe(webslides.slides[1]);
+    expect(webslides.currentSlideI_).toBe(1);
+    expect(currentSlide.el.style.display).toBe('none');
+
+    const mockEvent = mock.mock.calls[0][0].detail;
+    expect(mockEvent.slides).toBe(webslides.maxSlide_);
+    expect(mockEvent.currentSlide0).toBe(1);
+    expect(mockEvent.currentSlide).toBe(2);
+  });
+});
+
+describe('Go next/prev', () => {
+  beforeEach(() => {
+    jest.spyOn(webslides, 'goToSlide');
+  });
+
+  test('Go next should go to the next slide', () => {
+    webslides.goNext();
+    expect(webslides.goToSlide).toHaveBeenCalledWith(1, true);
+  });
+
+  test('Go prev should go to the previous slide', () => {
+    webslides.currentSlideI_ = 2;
+    webslides.goPrev();
+    expect(webslides.goToSlide).toHaveBeenCalledWith(1, false);
+  });
+
+  test('Should not be possible to move if loop is disabled and on edge', () => {
+    webslides.options.loop = false;
+    webslides.goPrev();
+    expect(webslides.goToSlide).not.toHaveBeenCalled();
+    webslides.currentSlideI_ = webslides.maxSlide_;
+    webslides.goNext();
+    expect(webslides.goToSlide).not.toHaveBeenCalled();
+  });
+
+  test('It should loop correctly', () => {
+    webslides.currentSlideI_ = webslides.maxSlide_ - 1;
+    webslides.goNext();
+    expect(webslides.goToSlide).toHaveBeenCalledWith(0, true);
+
+    webslides.goPrev();
+    expect(webslides.goToSlide).toHaveBeenCalledWith(19, false);
+  });
+});
+
+describe('Scroll to', () => {
+  test('Overflow should be removed and resetted', () => {
+    webslides.scrollTransitionToSlide_(true, webslides.slides[1], () => {});
+    expect(webslides.el.style.overflow).toBe('hidden');
+    jest.runAllTimers();
+    expect(webslides.el.style.overflow).not.toBe('hidden');
+  });
+
+  test('Should move slide if not moving forward', () => {
+    const getHTML = () => webslides.el.innerHTML;
+
+    expect(getHTML().indexOf('section-1"'))
+      .toBeLessThan(getHTML().indexOf('section-20"'));
+
+    webslides.scrollTransitionToSlide_(false, webslides.slides[19], () => {});
+
+    expect(getHTML().indexOf('section-20"'))
+      .toBeLessThan(getHTML().indexOf('section-1"'));
+  });
+
+  test('Should not move slide if moving forward', () => {
+    const getHTML = () => webslides.el.innerHTML;
+
+    expect(getHTML().indexOf('section-1"'))
+      .toBeLessThan(getHTML().indexOf('section-2"'));
+
+    webslides.scrollTransitionToSlide_(true, webslides.slides[1], () => {});
+
+    expect(getHTML().indexOf('section-1"'))
+      .toBeLessThan(getHTML().indexOf('section-2"'));
+  });
+
+  test('Should call the callback once finished with the next slide', () => {
+    const cb = jest.fn();
+
+    webslides.scrollTransitionToSlide_(true, webslides.slides[1], cb);
+    expect(cb).not.toHaveBeenCalled();
+    jest.runAllTimers();
+    expect(cb).toHaveBeenCalledWith(webslides.slides[1]);
+  });
+});
+
+describe('Transition to', () => {
+  test('Should move slide if not moving forward', () => {
+    const getHTML = () => webslides.el.innerHTML;
+
+    expect(getHTML().indexOf('section-1"'))
+      .toBeLessThan(getHTML().indexOf('section-20"'));
+
+    webslides.transitionToSlide_(false, webslides.slides[19], () => {});
+
+    expect(getHTML().indexOf('section-20"'))
+      .toBeLessThan(getHTML().indexOf('section-1"'));
+  });
+
+  test('Should move current slide to last if moving forward', () => {
+    const getHTML = () => webslides.el.innerHTML;
+
+    expect(getHTML().indexOf('section-1'))
+      .toBeLessThan(getHTML().indexOf('section-2'));
+
+    webslides.transitionToSlide_(true, webslides.slides[1], () => {});
+
+    expect(getHTML().indexOf('section-1"'))
+      .toBeGreaterThan(getHTML().indexOf('section-20"'));
+  });
+
+  test('Should slideInRight if touch and moving forward', () => {
+    const callback = jest.fn();
+    const nextSlideEl = webslides.slides[19].el;
+    webslides.initialised = true;
+    webslides.plugins.touch = {
+      isEnabled: true
+    };
+
+    webslides.transitionToSlide_(true, webslides.slides[19], callback);
+    expect(nextSlideEl.classList.contains('slideInRight'))
+      .toBe(true);
+    expect(callback).not.toBeCalled();
+    DOM.fireEvent(nextSlideEl, 'animationend');
+    expect(callback).toHaveBeenCalledWith(webslides.slides[19]);
+    expect(nextSlideEl.classList.contains('slideInRight'))
+      .toBe(false);
+  });
+
+  test('Should slideInLeft if touch and not moving forward', () => {
+    const callback = jest.fn();
+    const nextSlideEl = webslides.slides[1].el;
+    webslides.initialised = true;
+    webslides.plugins.touch = {
+      isEnabled: true
+    };
+
+    webslides.transitionToSlide_(false, webslides.slides[1], callback);
+    expect(nextSlideEl.classList.contains('slideInLeft'))
+      .toBe(true);
+    expect(callback).not.toBeCalled();
+    DOM.fireEvent(nextSlideEl, 'animationend');
+    expect(callback).toHaveBeenCalledWith(webslides.slides[1]);
+    expect(nextSlideEl.classList.contains('slideInLeft'))
+      .toBe(false);
+  });
+});
+
+test('Enable/Disable', () => {
+  expect(webslides.isDisabled()).toBe(false);
+  expect(webslides.el.classList.contains('disabled')).toBe(false);
+  webslides.disable();
+  expect(webslides.el.classList.contains('disabled')).toBe(true);
+  expect(webslides.isDisabled()).toBe(true);
+
+  webslides.enable();
+  expect(webslides.isDisabled()).toBe(false);
+
+  expect(webslides.el.classList.contains('disabled')).toBe(false);
+});
+
+test('Fullscreen', () => {
+  // Mocking FullScreen API
+  document.fullscreen = false;
+  document.documentElement.requestFullscreen = jest.fn();
+  document.exitFullScreen = jest.fn();
+
+  expect(document.documentElement.requestFullscreen).not.toHaveBeenCalled();
+  webslides.fullscreen();
+  expect(document.documentElement.requestFullscreen).toHaveBeenCalled();
+  document.fullscreen = true;
+  expect(document.exitFullScreen).not.toHaveBeenCalled();
+  webslides.fullscreen();
+  expect(document.exitFullScreen).toHaveBeenCalled();
+});
+
+test('Zoom', () => {
+  webslides.plugins.zoom = {
+    toggleZoom: jest.fn()
+  };
+
+  expect(webslides.plugins.zoom.toggleZoom).not.toHaveBeenCalled();
+  webslides.toggleZoom();
+  expect(webslides.plugins.zoom.toggleZoom).toHaveBeenCalled();
+});
+
+test('Plugin register', () => {
+  const cto = jest.fn();
+  const Mock = function() {
+    cto();
+  };
+
+  WebSlides.registerPlugin('mock', Mock);
+  webslides = new WebSlides();
+
+  expect(cto).toHaveBeenCalled();
+  expect(webslides.plugins.mock).toBeDefined();
+});

test/plugins/autoslide.test.js

@@ -0,0 +1,43 @@
+import DOM from '../../src/js/utils/dom';
+import AutoSlide from '../../src/js/plugins/autoslide';
+
+jest.useFakeTimers();
+
+beforeAll(() => {
+  document.body.innerHTML =
+      `<div id="webslides"></div><input id="focusable" />`;
+});
+
+test('AutoSlide plugin', () => {
+  const next = jest.fn();
+  const ws = document.getElementById('webslides');
+  const webslides = {
+    options: {
+      autoslide: 100
+    },
+    goNext: next,
+    el: ws
+  };
+
+  expect(next).not.toBeCalled();
+
+  new AutoSlide(webslides);
+  DOM.fireEvent(ws, 'ws:init');
+
+  // Wait until next execution
+  jest.runTimersToTime(101);
+
+  expect(next.mock.calls.length).toBe(1);
+
+  // Wait until next execution
+  jest.runTimersToTime(101);
+
+  expect(next.mock.calls.length).toBe(2);
+
+  // Pause on focus
+  document.getElementById('focusable').focus();
+  DOM.fireEvent(document.body, 'focus');
+  jest.runTimersToTime(101);
+
+  expect(next.mock.calls.length).toBe(2);
+});

test/plugins/click-nav.test.js

@@ -0,0 +1,26 @@
+import DOM from '../../src/js/utils/dom';
+import ClickNav from '../../src/js/plugins/click-nav';
+
+beforeAll(() => {
+  document.body.innerHTML =
+      `<div id="webslides" data-test="test"><p>Text</p></div>`;
+});
+
+test('Click nav plugin', () => {
+  const next = jest.fn();
+  const ws = document.getElementById('webslides');
+
+  const webslides = {
+    options: {
+      changeOnClick: true
+    },
+    goNext: next,
+    el: ws
+  };
+
+  expect(next).not.toBeCalled();
+
+  new ClickNav(webslides);
+  DOM.fireEvent(ws, 'click');
+  expect(next.mock.calls.length).toBe(1);
+});

test/plugins/keyboard.test.js

@@ -0,0 +1,91 @@
+import Keyboard from '../../src/js/plugins/keyboard';
+import Keys from '../../src/js/utils/keys';
+
+// @TODO: Check to do this with simulant
+const simulateKeyEvent = (el, code, extra) => {
+  const config = Object.assign({
+    bubbles: true,
+    cancelableCode: true,
+    which: code,
+    shiftKey: false}, extra);
+
+  const evt = new KeyboardEvent('keydown', config);
+  el.dispatchEvent(evt);
+};
+
+beforeAll(() => {
+  document.body.innerHTML = `<div id="webslides" data-test="test">
+                              <p>Text</p>
+                             </div>
+                             <input id="focusable" />`;
+});
+
+test('Keyboard plugin', () => {
+  const goto = jest.fn();
+  const next = jest.fn();
+  const prev = jest.fn();
+  const fullscreen = jest.fn();
+  const ws = document.getElementById('webslides');
+
+  let disabled = true;
+
+  const webslides = {
+    goToSlide: goto,
+    goNext: next,
+    goPrev: prev,
+    isVertical: false,
+    fullscreen: fullscreen,
+    isDisabled: () => disabled,
+    el: ws
+  };
+
+  const key = new Keyboard(webslides);
+
+  expect(goto).not.toBeCalled();
+  expect(next).not.toBeCalled();
+  expect(prev).not.toBeCalled();
+
+  simulateKeyEvent(document, Keys.AV_PAGE);
+  expect(next.mock.calls.length).toBe(0);
+
+  disabled = false;
+  simulateKeyEvent(document, Keys.AV_PAGE);
+  expect(next.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.SPACE);
+  expect(next.mock.calls.length).toBe(2);
+  // Shift + Space
+  simulateKeyEvent(document, Keys.SPACE, {shiftKey: true});
+  expect(next.mock.calls.length).toBe(2);
+  expect(prev.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.RE_PAGE);
+  expect(prev.mock.calls.length).toBe(2);
+
+  // Home - End
+  simulateKeyEvent(document, Keys.HOME);
+  expect(goto.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.END);
+  expect(goto.mock.calls.length).toBe(2);
+
+  // Arrow keys, only left right should increase
+  simulateKeyEvent(document, Keys.DOWN);
+  simulateKeyEvent(document, Keys.UP);
+  simulateKeyEvent(document, Keys.LEFT);
+  simulateKeyEvent(document, Keys.RIGHT);
+  expect(prev.mock.calls.length).toBe(3);
+  expect(next.mock.calls.length).toBe(3);
+
+  // Arrow keys, only up down should increase
+  key.ws_.isVertical = true;
+  simulateKeyEvent(document, Keys.DOWN);
+  simulateKeyEvent(document, Keys.UP);
+  simulateKeyEvent(document, Keys.LEFT);
+  simulateKeyEvent(document, Keys.RIGHT);
+  expect(prev.mock.calls.length).toBe(4);
+  expect(next.mock.calls.length).toBe(4);
+
+  // F, only trigger on when alone
+  simulateKeyEvent(document, Keys.F);
+  simulateKeyEvent(document, Keys.F, {ctrlKey: true});
+  simulateKeyEvent(document, Keys.F, {metaKey: true});
+  expect(fullscreen.mock.calls.length).toBe(1);
+});