Merge branch 'sass' into dev

# Conflicts:
#	package.json
#	static/css/base.css
#	static/css/legacy/colors.css
#	static/js/webslides.js
#	static/js/webslides.min.js

.sass-lint.yml

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

index.html

@@ -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 -->
+    <!-- CSS WebSlides -->
-    <link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
+    <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.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">

package.json

@@ -28,28 +28,35 @@
   },
   "homepage": "https://github.com/webslides/webslides#readme",
   "devDependencies": {
+    "autoprefixer": "^7.1.1",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-jest": "^19.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.4.0",
+    "babel-preset-env": "^1.5.1",
     "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^0.28.2",
     "eslint": "^3.19.0",
     "eslint-loader": "^1.7.1",
-    "eslint-plugin-jest": "^19.0.1",
+    "eslint-plugin-jest": "^20.0.3",
-    "jest": "^19.0.2",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "jest": "^20.0.3",
+    "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
+    "postcss-loader": "^2.0.5",
     "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.5",
     "simulant": "^0.2.2",
     "smart-banner-webpack-plugin": "^3.0.1",
-    "webpack": "^2.4.1",
+    "style-loader": "^0.18.1",
-    "webpack-dev-server": "^2.4.4"
+    "webpack": "^2.6.0",
+    "webpack-dev-server": "^2.4.5"
   },
   "scripts": {
     "prebuild": "rimraf static/js/webslide*",
-    "build": "npm-run-all --parallel build:*",
+    "build": "npm run build:min && npm run build:normal",
-    "build:main": "webpack",
+    "build:normal": "webpack",
-    "build:main.min": "webpack --output-filename [name].min.js -p",
+    "build:min": "webpack --output-filename [name].min.js -p",
     "dev": "webpack-dev-server",
     "test": "jest"
   },

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/scss/_base.scss

@@ -0,0 +1,185 @@
+// sass-lint:disable no-vendor-prefixes
+// sass-lint:disable no-misspelled-properties
+.ws-ready {
+  &,
+  body {
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+}
+
+#webslides {
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.baseline {
+  background: url('../images/baseline.png') left top .8rem/.8rem;
+}
+
+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);
+  }
+}
+
+.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;
+
+@media (min-width: 1024px) {
+  @each $size in $sizes {
+    .size#{$size} {
+      width: $size + '%';
+    }
+  }
+}
+
+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,681 @@
+// sass-lint:disable no-color-literals
+// sass-lint:disable no-vendor-prefixes
+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);
+}
+
+@each $name, $color in $bg-colors {
+  .bg-#{$name} {
+    background-color: $color;
+  }
+}
+
+[class*='bg-'] .bg-white {
+  color: $body-color;
+  text-shadow: none;
+}
+
+.bg-apple {
+  background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%);
+}
+
+.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;
+}
+
+.bg-trans-dark {
+  background: rgba($black, .8);
+}
+
+.bg-trans-light {
+  background: rgba($black, .2);
+}
+
+.bg-trans-gradient {
+  background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
+}
+
+.bg-gradient-h {
+  background: linear-gradient(134deg, #32b 0, #62b 100%);
+}
+
+.bg-gradient-v {
+  background: linear-gradient(to top, #62b 0%, #32b 100%);
+}
+
+.bg-gradient-r {
+  background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
+}
+
+.bg-gradient-white {
+  background: linear-gradient(180deg, #f2f4f6 0, $white 100%);
+  color: $body-color;
+  text-shadow: none;
+}
+
+.bg-gradient-gray {
+  background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
+  color: $body-color;
+  text-shadow: none;
+}
+
+.frame {
+  border: .8rem solid $white;
+}
+
+[class*='background'].frame {
+  border-width: .2rem;
+}
+
+.shadow,
+.pre {
+  position: relative;
+}
+
+.shadow:before,
+.shadow:after {
+  box-shadow: 0 16px 24px rgba($stratos, .3);
+}
+
+.text-separator:before {
+  background-color: rgba(170, 0, 0, .8);
+}
+
+[class*='text-pull-'] {
+  border-top: 4px solid rgba($black, .5);
+}
+
+img[class*='text-pull-'],
+figure[class*='text-pull-'] {
+  border-top: 0;
+}
+
+[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: 0 0 40px rgba($black, .5);
+}
+
+[class*='card-'] time,
+h1 span {
+  color: #abd;
+}
+
+.code-comment {
+  color: rgba(70, 170, 130, .9);
+  text-shadow: none;
+}
+
+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);
+
+    &:hover {
+      background-color: rgba(50, 50, 50, .7);
+    }
+  }
+}
+
+@each $name, $color in $social-nav {
+  nav li.#{$name} a:hover {
+    background-color: $color;
+  }
+}
+
+.flexblock li.active a,
+.metrics li:hover,
+.specs li:hover,
+.reasons li:hover {
+  background-color: rgba($stratos, .03);
+}
+
+.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);
+}
+
+.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;
+}
+
+.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;
+  }
+}
+
+.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;
+}
+
+.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;
+}
+
+.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 {
+  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;
+}
+
+.gallery li figcaption:before {
+  border: .8rem solid $black;
+  border-color: transparent transparent $white $white;
+}
+
+.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 li {
+  border-top: .1rem solid rgba($stratos, .1);
+}
+
+.activity li:hover {
+  background-color: rgba($stratos, .02);
+}
+
+.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.border figcaption {
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+img.blacklogo {
+  background: none;
+  filter: grayscale(100%) brightness(10%) contrast(100%);
+}
+
+img.graylogo {
+  filter: grayscale(100%) brightness(10%) contrast(10%);
+}
+
+img.whitelogo {
+  filter: brightness(0) invert(1);
+}
+
+li:hover img.blacklogo,
+li:hover img.graylogo,
+img.blacklogo:hover,
+img.graylogo:hover {
+  background: none;
+  filter: grayscale(0%);
+  transition: all .6s ease;
+}
+
+[class*='card-'] > a {
+  color: inherit;
+}
+
+.description>li {
+  border-bottom: 1px solid rgba($stratos, .1);
+}
+
+.description>li:last-child {
+  border-bottom: 0;
+}
+
+[class*='card-'][class*='bg-'] figure {
+  background-color: rgba($stratos, .06);
+}
+
+[class*='card'] figcaption,
+[class*='card'] figcaption a {
+  background: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, .2) 100%);
+  color: $white;
+}
+
+@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;
+  }
+}
+
+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 {
+  border: 1px solid rgba($stratos, .1);
+}
+
+.browser:hover {
+  box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
+}
+
+.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;
+}
+
+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;
+}
+
+input:hover,
+select:hover {
+  box-shadow: 0 0 8px rgba($black, .3);
+}
+
+[class*='badge-'] {
+  background-color: $black;
+  border: 1px solid #345;
+}
+
+form .flexblock li:hover {
+  background-color: rgba($black, .05);
+}
+
+.toc,
+.toc ol>li:before,
+.chapter {
+  background-color: #f7f9fb;
+}
+
+.toc li .toc-page:before {
+  border-bottom: 1px dotted rgba($black, .9);
+}
+
+#counter,
+#navigation a {
+  color: #abc;
+}
+
+#webslides:hover #navigation a:hover {
+  background-color: rgba($black, .9);
+  color: $white;
+}
+
+footer[role='contentinfo'] {
+  background-color: $white;
+}

src/scss/_typography.scss

@@ -0,0 +1,440 @@
+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%;
+}
+
+
+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;
+}
+
+@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;
+}
+
+.text-intro,
+[class*='content-'] p {
+  font-size: 2.4rem;
+  line-height: 4rem;
+}
+
+.text-serif,
+h1 span {
+  font-family: 'Maitree', times, serif;
+}
+
+.text-landing {
+  letter-spacing: .4rem;
+  text-transform: uppercase;
+
+  @media (min-width: 768px) {
+    letter-spacing: 1.6rem;
+  }
+}
+
+.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;
+}
+
+.text-emoji {
+  font-size: 6.8rem;
+  line-height: 8.8rem;
+
+  @media (min-width: 768px) {
+    font-size: 12.8rem;
+    line-height: 16rem;
+  }
+}
+
+.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;
+}
+
+@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;
+}
+
+.text-context {
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    height: .2rem;
+    margin-bottom: .6rem;
+    width: 12rem;
+
+    .column & {
+      width: 100%;
+    }
+  }
+
+  &.text-uppercase {
+    letter-spacing: .1rem;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+[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;
+}
+
+.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%;
+  }
+}
+
+.text-info {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.text-apple,
+.bg-apple {
+  font-family: 'San Francisco', helvetica, arial, sans-serif;
+}
+
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 100;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2');
+}
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 200;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2');
+}
+
+@font-face {
+  font-family: 'San Francisco';
+  font-weight: 400;
+  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2');
+}
+
+@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,60 @@
+// 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: #edf2f7;
+$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;
+
+$bg-colors: (
+  'primary': $royal-blue,
+  'secondary': $havelock-blue,
+  'light': $catskill-white,
+  'black': $cod-gray,
+  'black-blue': $big-stone,
+  'blue': $rhino,
+  'brown': $athens-gray,
+  '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;

src/scss/full.scss

@@ -0,0 +1,42 @@
+@import 'vars';
+@import 'utils/mixins';
+@import 'utils/animations';
+@import 'utils/reset';
+@import 'base';
+@import 'color';
+@import 'typography';
+
+@import 'utils/bugs';
+@import 'utils/clear';
+
+@import 'modules/avatars';
+@import 'modules/badges';
+@import 'modules/browser';
+@import 'modules/button';
+@import 'modules/cards';
+@import 'modules/flexblock';
+@import 'modules/flexblock-activity';
+@import 'modules/flexblock-clients';
+@import 'modules/flexblock-features';
+@import 'modules/flexblock-gallery';
+@import 'modules/flexblock-metrics';
+@import 'modules/flexblock-plans';
+@import 'modules/flexblock-reasons';
+@import 'modules/flexblock-specs';
+@import 'modules/flexblock-steps';
+@import 'modules/form';
+@import 'modules/grid';
+@import 'modules/header-footer';
+@import 'modules/logo';
+@import 'modules/longform';
+@import 'modules/media';
+@import 'modules/navigation';
+@import 'modules/print';
+@import 'modules/promos';
+@import 'modules/quotes';
+@import 'modules/slides';
+@import 'modules/slides-bg';
+@import 'modules/slides-navigation';
+@import 'modules/tables';
+@import 'modules/toc';
+@import 'modules/work';

src/scss/modules/_avatars.scss

@@ -0,0 +1,18 @@
+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,40 @@
+[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,43 @@
+
+h1 + .browser,
+h2 + .browser,
+p + .browser {
+  margin-top: 4.8rem;
+}
+
+.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,13 @@
+[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,136 @@
+[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,53 @@
+.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,34 @@
+.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,73 @@
+.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,136 @@
+.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;
+      }
+    }
+
+    figcaption,
+    &: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,28 @@
+.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,81 @@
+.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,35 @@
+.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;
+
+    &:before {
+      left: 2.4rem;
+      position: absolute;
+    }
+  }
+}
+

src/scss/modules/_flexblock-specs.scss

@@ -0,0 +1,45 @@
+.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,33 @@
+.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,98 @@
+.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,155 @@
+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,56 @@
+.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,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,13 @@
+.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;
+    vertical-align: middle;
+    width: 4.8rem;
+  }
+}

src/scss/modules/_longform.scss

@@ -0,0 +1,53 @@
+.longform {
+  width: 72rem;
+
+  &.alignleft,
+  &.alignright {
+    max-width: 40%;
+  }
+
+  img.aligncenter,
+  .longform 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;
+  }
+
+  @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,51 @@
+.embed {
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.6%;
+  position: relative;
+
+  iframe,
+  object,
+  embed,
+  video {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .fullscreen > & {
+    bottom: 0;
+    height: auto;
+    left: 0;
+    padding-bottom: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+
+    & > iframe,
+    & > object,
+    & > embed,
+    & > video {
+      @media (min-aspect-ratio: 16 / 9) {
+        height: 300%;
+        top: -100%;
+      }
+
+      @media (max-aspect-ratio: 16 / 9) {
+        left: -100%;
+        width: 300%;
+      }
+
+      @supports (object-fit: cover) {
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}

src/scss/modules/_navigation.scss

@@ -0,0 +1,55 @@
+nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  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 {
+  justify-content: center;
+}
+
+nav.navbar ul li {
+  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,48 @@
+// 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,93 @@
+.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;
+    }
+  }
+}
+
+.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,68 @@
+blockquote {
+  display: inline-block;
+  position: relative;
+
+  p {
+    font-size: 2.4rem;
+    line-height: 4rem;
+
+    &:last-child {
+      margin-bottom: 3.2rem;
+    }
+  }
+}
+
+dd blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.bg-apple blockquote p {
+  font-family: 'San Francisco', 'Roboto', helvetica, arial, sans-serif;
+  font-weight: 300;
+}
+
+cite {
+  display: block;
+  text-align: center;
+
+  &:before {
+    content: '\2014 \2009';
+    margin-right: 6px;
+  }
+}
+
+cite span {
+  display: block;
+}
+
+.text-quote,
+.wall {
+  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,110 @@
+.background,
+[class*='background-'] {
+  background-repeat: no-repeat;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.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;
+    }
+  }
+
+  &-video {
+    height: 100%;
+    object-fit: fill;
+    width: 100%;
+  }
+}
+
+[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;
+  }
+}
+
+.background.anim {
+  animation: anim 80s linear infinite;
+  background-position: center top;
+  background-repeat: repeat;
+  background-size: 100%;
+  height: 200%;
+
+}
+
+[class*='background'].frame {
+  margin: 2.4rem;
+}

src/scss/modules/_slides-navigation.scss

@@ -0,0 +1,67 @@
+#navigation {
+  animation: fadeIn 8s;
+  bottom: 0;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  width: 24.4rem;
+  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,99 @@
+section * {
+  animation: fadeIn .6s ease-in-out;
+}
+
+section .background,
+section .light,
+section .dark {
+  animation-duration: 0s;
+}
+
+section,
+.slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2.4rem;
+  page-break-after: always;
+  position: relative;
+  word-wrap: break-word;
+
+  @media (min-width: 1024px) {
+    padding-bottom: 12rem;
+    padding-top: 12rem;
+  }
+}
+
+.fullscreen {
+  padding: 0;
+}
+
+.slide-top {
+  justify-content: flex-start;
+}
+
+.slide-bottom {
+  justify-content: flex-end;
+}
+
+[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,30 @@
+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,62 @@
+.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;
+    }
+  }
+}

src/scss/modules/_work.scss

@@ -0,0 +1,114 @@
+.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;
+  }
+
+  li a {
+    display: block;
+    float: left;
+    height: 100%;
+    padding: 2.4rem 0;
+    width: 100%;
+  }
+
+  li a p,
+  li:first-child a:hover p:first-child {
+    transition: .3s;
+  }
+
+  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;
+  }
+}
+
+.text-pull.embed {
+  margin-left: -2.4rem;
+  margin-right: -2.4rem;
+  padding-bottom: 60.6%;
+}

src/scss/utils/_animations.scss

@@ -0,0 +1,95 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation: fadeIn 1s;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation: fadeInUp 1s;
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  animation: zoomIn 1s;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  animation: slideInLeft 1s;
+  animation-fill-mode: both;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  animation: slideInRight 1s;
+  animation-fill-mode: both;
+}
+
+
+@keyframes anim {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-1200px);
+  }
+}
+
+
+.slow {
+  animation-duration: 4s;
+
+  & + & {
+    animation-duration: 5s;
+  }
+}

src/scss/utils/_bugs.scss

@@ -0,0 +1,8 @@
+.flexblock:before,
+.flexblock:after,
+.grid:before,
+.grid:after,
+.cta:before,
+.cta:after {
+  width: 0;
+}

src/scss/utils/_clear.scss

@@ -0,0 +1,17 @@
+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,296 @@
+// sass-lint:disable no-vendor-prefixes
+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/legacy/base.css

@@ -1,8 +1,8 @@
 /*---------------------------------------------------------------------------------
 
 	App: WebSlides
-	Version: 1.0.0
+	Version: 1.3.0
-	Date: 2017-02-11
+	Date: 2017-04-20
 	Description: A simple and versatile framework for building HTML presentations, landings, and portfolios.
 	Authors: @jlantunez, @belelros, and @luissacristan
 	Author URI: http://twitter.com/webslides
@@ -47,12 +47,12 @@
 	12. Avatars
 	13. Tables
 	14. Forms
-	15. Longform Elements
+  15. Longform Elements
 	16. Safari Bug (flex-wrap)
-	17. Slides Index: Thumbnails navigation gallery
+	17. Print
-	18. Print
 
 ----------------------------------------------------------------------------------- */
+
 /*=========================================
 0. CSS Reset & Normalize
 =========================================== */
@@ -322,10 +322,10 @@ html.ws-ready body {
 /* -- Hide scrollbar, but still being able to scroll -- */
 
 #webslides {
-    -ms-overflow-style: none;  /* IE 10+ */
+  -ms-overflow-style: none;  /* IE 10+ */
 }
 #webslides::-webkit-scrollbar {
-    display: none;  /* Safari and Chrome */
+  display: none;  /* Safari and Chrome */
 }
 
 /* -- Prototype faster - Vertical rhythm  -- */
@@ -402,14 +402,15 @@ nav a[rel="external"] em,
   z-index: 2;
 }
 @media (min-width: 1024px) {
-.wrap,header nav, footer nav {
+  .wrap,header nav, footer nav {
-width: 90%;
+    width: 90%;
- }
+  }
 }
 
 .frame,.shadow {
   padding: 2.4rem;
 }
+
 .radius {border-radius: .4rem;}
 
 .alignright {
@@ -1085,15 +1086,15 @@ p.text-subtitle svg {vertical-align: text-top;}
 /* -- Emoji (you'll love this) -- */
 
 .text-emoji {
-font-size: 6.8rem;
+  font-size: 6.8rem;
-line-height: 8.8rem;
+  line-height: 8.8rem;
 }
 
 @media (min-width: 768px) {
-.text-emoji {
+  .text-emoji {
-font-size: 12.8rem;
+    font-size: 12.8rem;
-line-height: 16rem;
+    line-height: 16rem;
- }
+  }
 }
 
 /* -- Numbers (results, sales... 23,478,289 iphones) -- */
@@ -1244,13 +1245,13 @@ img[class*="text-pull-"],figure[class*="text-pull-"] {
 --- */
 
 .text-interview dt {
-    font-weight: 600;
+  font-weight: 600;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 @media (min-width: 1024px) {
-.text-interview dt {
+  .text-interview dt {
     margin-left: -34%;
     position: absolute;
     text-align: right;
@@ -1540,7 +1541,7 @@ Aligned items [class*="content-"]=== */
   padding: 4.8rem;
 }
 form[class*="bg-"] {
-padding: 2.4rem;
+  padding: 2.4rem;
 }
 [class*="content-"] > [class*="content-"] p {
   font-size: 1.8rem;
@@ -1621,7 +1622,7 @@ opacity: 1;
   line-height: 4.8rem;
 }
 #counter a:hover {
-padding: .8rem;
+  padding: .8rem;
 }
 #navigation p {
   margin-bottom: 0;
@@ -1683,6 +1684,7 @@ a#previous {
   background-size: cover;
 }
 
+
 /*fullscreen video
   <video class="background-video">
 */
@@ -1772,6 +1774,13 @@ a#previous {
   animation: anim 80s linear infinite;
 
 }
+/*=== 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;
+}
 
 /*===============================================================
 6. Magic blocks with flexbox (Auto-fill & Equal Height)
@@ -2764,7 +2773,7 @@ object-fit to re-frame images rather than just stretch and resize them  === */
   /* -- imgs/frames size recommended:800x600 -- */
   [class*="card-"][class*="bg-"] figure img,
   [class*="card-"][class*="bg-"] figure iframe,
-  /* -- Make small images/iframes larger -- */
+    /* -- Make small images/iframes larger -- */
   .fullscreen [class*="card-"] figure img,
   .fullscreen [class*="card-"] figure iframe {
     position: absolute;
@@ -2884,11 +2893,11 @@ blockquote p {
   line-height: 4rem;
 }
 blockquote p:last-child {
-margin-bottom: 3.2rem;
+  margin-bottom: 3.2rem;
 }
 /* -- Interviews dl.text-interview -- */
 dd blockquote p:last-child {
-margin-bottom: 0;
+  margin-bottom: 0;
 }
 .bg-apple blockquote p {
   font-family: "San Francisco", "Roboto", helvetica, arial, sans-serif;
@@ -2912,7 +2921,7 @@ cite:before {
 /* Info: .wall will be deprecated soon. Use .text-quote ;) */
 
 .text-quote,.wall {
-position: relative; /* Versatility: blockquote, p, h2... */
+  position: relative; /* Versatility: blockquote, p, h2... */
 }
 .text-quote:before,.wall:before {
   position: absolute;
@@ -3233,49 +3242,49 @@ button:disabled:hover {
 /* -- Posts = .wrap.longform -- */
 
 .longform {
-width: 72rem;
+  width: 72rem;
-/* Why 72rem=720px?
+  /* Why 72rem=720px?
-90-95 characters per line = better reading speed */
+  90-95 characters per line = better reading speed */
 }
 .longform .alignleft, .longform .alignright {
-    max-width: 40%;
+  max-width: 40%;
 }
 .longform img.aligncenter,.longform figure.aligncenter {
   margin-top: 3.2rem;
   margin-bottom: 3.2rem;
 }
 .longform ul,.longform ol {
-margin-bottom: 3.2rem;
+  margin-bottom: 3.2rem;
 }
 .longform ul ol,.longform ol ul,.longform ul ul,.longform ol ol {
-margin-bottom: 0;
+  margin-bottom: 0;
 }
 .longform figcaption p,.longform [class*="text-pull-"] p{
-line-height: 2.4rem;
+  line-height: 2.4rem;
-font-size: 1.6rem;
+  font-size: 1.6rem;
 }
 /* Mobile: video full width */
 .text-pull.embed {
-padding-bottom: 60.6%; /*without black borders; */
+  padding-bottom: 60.6%; /*without black borders; */
-margin-right: -2.4rem;
+  margin-right: -2.4rem;
-margin-left: -2.4rem;
+  margin-left: -2.4rem;
 }
 @media (min-width:1280px) {
-.longform [class*="text-pull-"] {
+  .longform [class*="text-pull-"] {
-max-width: 32%;
+    max-width: 32%;
-}
+  }
-.longform .text-pull-right {
+  .longform .text-pull-right {
-margin-right:-256px;
+    margin-right:-256px;
-}
+  }
-.longform .text-pull-left {
+  .longform .text-pull-left {
-margin-left:-256px;
+    margin-left:-256px;
- }
+  }
 }
 @media (min-width:1024px) {
-.longform .text-quote {
+  .longform .text-quote {
-margin-right: -4.8rem;
+    margin-right: -4.8rem;
-margin-left: -4.8rem;
+    margin-left: -4.8rem;
- }
+  }
 }
 
 
@@ -3289,212 +3298,8 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   width: 0;
 }
 
-
-/*==============================================
-17. Slides Index: Thumbnails navigation gallery
-================================================ */
-
-#webslides-zoomed {
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  -webkit-align-content: flex-start;
-  align-content: flex-start;
-  -webkit-align-items: flex-start;
-  align-items: flex-start;
-  min-height: 100vh;
-  background: transparent;
-  position: relative;
-  z-index: 2;
-}
-@media (min-width: 1024px) {
-  #webslides-zoomed>.wrap {
-    padding-top: 12rem;
-    padding-bottom: 12rem;
-    width: 100%;
-  }
-}
-#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
-  position: relative;
-  -webkit-transition: .3s;
-  transition: .3s;
-  overflow: hidden;
-}
-#webslides-zoomed > .wrap > .grid > .column {
-  width: 25%;
-  -webkit-order: 0;
-  order: 0;
-  -webkit-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-align-self: auto;
-  align-self: auto;
-}
-
-#webslides-zoomed .column > .wrap-zoom > .slide {
-  transform: scale(0.25) translate(-150%, -150vh);
-  /*transform: scale(0.34) translate(-99%, -99%); */  /* 3 colums */
-  display: flex !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  clip: rect(0px auto auto 0);
-}
-
-#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
-  position: absolute;
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
-  transform: scale(1.02);
-  z-index: 2;
-}
-
-.text-slide-number {
-  text-align: center;
-  display: inline-block;
-  margin: .8rem auto;
-}
-
-
-@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) {
-  #webslides-zoomed .column {
-    width: 50%;
-  }
-  #webslides-zoomed .column > .wrap-zoom > .slide {
-    transform: scale(0.5) translate(-50%, -50%);
-  }
-}
-
-@media (max-aspect-ratio: 2/3) {
-  #webslides-zoomed .column {
-    width: 100%;
-  }
-  #webslides-zoomed .column > .wrap-zoom > .slide {
-    transform: scale(0.5) translate(-50%, -50%);
-  }
-}
-
-#webslides.disabled, #webslides.zooming {
-	position: fixed;
-	width: 100%;
-	z-index: 0;
-}
-#webslides.disabled {
-  filter: blur(10px);
-}
-#webslides-zoomed.zooming {
-  opacity: 1;
-  transform: scale(1);
-}
-#webslides.zooming.in {
-  -webkit-animation: bg-zoom-in 0.4s 1;
-  animation: bg-zoom-in 0.4s 1;
-}
-
-#webslides.zooming.out {
-  -webkit-animation: bg-zoom-out 0.4s 1;
-  animation: bg-zoom-out 0.4s 1;
-}
-
-#webslides-zoomed.zooming.in {
-  -webkit-animation: grid-zoom-in 0.4s 1;
-  animation: grid-zoom-in 0.4s 1;
-}
-
-#webslides-zoomed.zooming.out {
-  -webkit-animation: grid-zoom-out 0.4s 1;
-  animation: grid-zoom-out 0.4s 1;
-}
-
-@-webkit-keyframes bg-zoom-in {
-  0% {
-    filter: blur(0px);
-  }
-  100% {
-    filter: blur(10px);
-  }
-}
-@keyframes bg-zoom-in {
-  0% {
-    filter: blur(0px);
-  }
-  100% {
-    filter: blur(10px);
-  }
-}
-
-@-webkit-keyframes bg-zoom-out {
-  0% {
-    filter: blur(10px);
-  }
-  100% {
-    filter: blur(0px);
-  }
-}
-@keyframes bg-zoom-out {
-  0% {
-    filter: blur(10px);
-  }
-  100% {
-    filter: blur(0px);
-  }
-}
-
-@-webkit-keyframes grid-zoom-in {
-  0% {
-    opacity: 0;
-    transform: scale(1.2);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes grid-zoom-in {
-  0% {
-    opacity: 0;
-    transform: scale(1.2);
-    filter: blur(10px);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-    filter: blur(0px);
-  }
-}
-
-@-webkit-keyframes grid-zoom-out {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-    filter: blur(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.2);
-    filter: blur(10px);
-  }
-}
-@keyframes grid-zoom-out {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-    filter: blur(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.2);
-    filter: blur(10px);
-  }
-}
-
-
 /*=========================================
-18. PRINT
+17. PRINT
 =========================================== */
 
 @media print {

static/css/legacy/colors.css

@@ -39,9 +39,7 @@ WebSlides - Colors
 Base
 =========================================== */
 
-body,
+body {
-/*index of slides: mini-slides same bg color as body */
-#webslides-zoomed .column > .wrap-zoom {
   color: #333;
   background-color: #f7f9fb;
 }
@@ -90,20 +88,20 @@ acronym {
 
 mark,
 ins {
-background-color: rgba(221,238,255, 0.8);
+  background-color: rgba(221,238,255, 0.8);
-color: inherit;
+  color: inherit;
 }
 
 ::-moz-selection {
-    background-color: rgba(221,238,255, 0.8);
+  background-color: rgba(221,238,255, 0.8);
 }
 
 ::-webkit-selection {
-    background-color: rgba(221,238,255, 0.8);
+  background-color: rgba(221,238,255, 0.8);
 }
 
 ::selection {
-    background-color: rgba(221,238,255, 0.8);
+  background-color: rgba(221,238,255, 0.8);
 }
 
 pre {
@@ -121,7 +119,7 @@ code,[class*="bg-"] pre {
 }
 
 .bg-white code{
-    background: rgba(0, 20, 80, 0.03);
+  background: rgba(0, 20, 80, 0.03);
 }
 /*================================================
 Slides - Backgrounds <section class="bg-primary">
@@ -220,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
 
 /*Covers/Longforms...*/
 .bg-trans-gradient{
-background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
+  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
 }
 
 /*Horizontal Gradient*/
@@ -252,18 +250,20 @@ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
 
 /*Gray Gradient (horizontal)*/
 .bg-gradient-gray{
-background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
+  background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
-color: #333;
+  color: #333;
-text-shadow: none;
+  text-shadow: none;
 }
 /*Border/Frame*/
 .frame {
   border: .8rem solid #fff;
 }
-
+[class*="background"].frame {
+  border-width: .2rem;
+}
 /*Layer/Box Shadow*/
 .shadow,.pre {
-position: relative;
+  position: relative;
 }
 .shadow:before,.shadow:after {
   box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
@@ -276,16 +276,16 @@ TYPOGRAPHY
 /* -- Horizontal separator  -- */
 
 .text-separator:before {
-    background-color: rgba(170, 0, 0, 0.8);
+  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);
+  border-top: 4px solid rgba(0, 0, 0, 0.5);
 }
 img[class*="text-pull-"],figure[class*="text-pull-"] {
-border-top: none;
+  border-top: none;
 }
 /* -- Context  -- */
 
@@ -392,7 +392,7 @@ Features & Clients List
 }
 
 .features li:hover,.clients li:hover  {
-box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
+  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;}*/
 
@@ -524,7 +524,7 @@ Gallery li+.overlay+image
   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);
+  border-top:1px solid rgba(0,20,80,0.1);
 }
 
 .gallery li a {
@@ -689,7 +689,7 @@ Cards
 /*== Figure Background === */
 
 [class*="card-"][class*="bg-"] figure {
-background-color: rgba(0, 20, 80, 0.06);
+  background-color: rgba(0, 20, 80, 0.06);
 }
 
 /*== Ficaption Cards === */
@@ -815,7 +815,7 @@ input[type="submit"],
   text-shadow: 0 1px 0 #123;
 }
 .button:active,button[type="submit"]:active,input[type="submit"]:active {
-background-color: #17d;
+  background-color: #17d;
 }
 .ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
 .bg-primary select,
@@ -919,18 +919,3 @@ footer[role=contentinfo] {
 background-color:rgba(255,255,255 , 0.3);
 }
 */
-
-/*============================
-Slides Index
-============================== */
-
-#webslides-zoomed .column > .wrap-zoom {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
-}
-#webslides-zoomed .column > .wrap-zoom:hover {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
-}
-.text-slide-number {
-  /*background-color: rgba(255, 255, 255, 0.1);*/
-  color: #abc;
- }

webpack.config.js

@@ -1,5 +1,6 @@
 const SmartBannerPlugin = require('smart-banner-webpack-plugin');
 const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const src = path.join(__dirname, 'src');
 const pkg = require('./package.json');
@@ -27,10 +28,19 @@ module.exports = {
           'eslint-loader',
         ],
         include: src
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader?url=false!postcss-loader!sass-loader'
+        }),
+        include: src
       }
     ]
   },
   plugins: [
+    new ExtractTextPlugin('../css/webslides.css'),
     new SmartBannerPlugin({
       banner: `Name: WebSlides\nVersion: ${pkg.version}\nDate: ${new Date().toISOString().slice(0,10)}\nDescription: ${pkg.description}\nURL: ${pkg.homepage}\nCredits: @jlantunez, @LuisSacristan, @Belelros`,
       raw: false,