From 7a8701c929ee0429ee680be3969ee4d58fdd7390 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Mon, 6 Mar 2017 17:35:08 +0100
Subject: [PATCH 1/6] create folder and files in rep styl

---
 styl/config/_breakpoints.styl   |   9 +
 styl/config/_mixins.styl        |  33 +++
 styl/config/_variables.styl     |  50 ++++
 styl/grids/_grillade.styl       | 293 ++++++++++++++++++++++
 styl/knacss.styl                |  64 +++++
 styl/library/_base.styl         | 169 +++++++++++++
 styl/library/_forms.styl        |  99 ++++++++
 styl/library/_misc.styl         |  46 ++++
 styl/library/_print.styl        |  83 +++++++
 styl/library/_styling.styl      |  97 ++++++++
 styl/library/_tables.styl       |  25 ++
 styl/objects/_autogrid.styl     |  19 ++
 styl/objects/_media.styl        |  18 ++
 styl/utilities/_helpers.styl    | 278 +++++++++++++++++++++
 styl/utilities/_layout.styl     |  98 ++++++++
 styl/utilities/_responsive.styl | 230 ++++++++++++++++++
 styl/vendor/_normalize.styl     | 419 ++++++++++++++++++++++++++++++++
 17 files changed, 2030 insertions(+)
 create mode 100644 styl/config/_breakpoints.styl
 create mode 100644 styl/config/_mixins.styl
 create mode 100644 styl/config/_variables.styl
 create mode 100644 styl/grids/_grillade.styl
 create mode 100644 styl/knacss.styl
 create mode 100644 styl/library/_base.styl
 create mode 100644 styl/library/_forms.styl
 create mode 100644 styl/library/_misc.styl
 create mode 100644 styl/library/_print.styl
 create mode 100644 styl/library/_styling.styl
 create mode 100644 styl/library/_tables.styl
 create mode 100644 styl/objects/_autogrid.styl
 create mode 100644 styl/objects/_media.styl
 create mode 100644 styl/utilities/_helpers.styl
 create mode 100644 styl/utilities/_layout.styl
 create mode 100644 styl/utilities/_responsive.styl
 create mode 100644 styl/vendor/_normalize.styl

diff --git a/styl/config/_breakpoints.styl b/styl/config/_breakpoints.styl
new file mode 100644
index 0000000..e1e9221
--- /dev/null
+++ b/styl/config/_breakpoints.styl
@@ -0,0 +1,9 @@
+// Responsive breakpoints variables
+
+// Warning : you should use your own values, regardless of the devices
+// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
+tiny         = 543px // or 'em' if you prefer, of course
+small        = 767px
+medium       = 991px
+large        = 1199px
+extra-large  = 1439px
diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl
new file mode 100644
index 0000000..16dd059
--- /dev/null
+++ b/styl/config/_mixins.styl
@@ -0,0 +1,33 @@
+// Additionnal "utility" breakpoints aliases
+// ex. @include respond-to("medium-up") {...}
+breakpoint(bp)
+  if bp == 'tiny'
+    return '(max-width: {tiny})'
+  else if bp == 'small'
+    return '(max-width: {small})'
+  else if bp == 'medium'
+    return '(max-width: {medium})'
+  else if bp == 'large'
+    return '(max-width: {large})'
+  else if bp == 'extra-large'
+    return '(max-width: {extra-large})'
+  else if bp == 'tiny-up'
+    return '(min-width: {tiny + 1})'
+  else if bp == 'small-up'
+    return '(min-width: {small + 1})'
+  else if bp == 'medium-up'
+    return '(min-width: {medium + 1})'
+  else if bp == 'large-up'
+    return '(min-width: {large + 1})'
+  else if bp == 'extra-large-up'
+    return '(min-width: {extra-large + 1})'
+  else if bp == 'retina'
+    return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
+
+
+/*
+respond-to(value)
+  string = breakpoint(value)
+  @media screen and {string}
+    {block}
+*/
diff --git a/styl/config/_variables.styl b/styl/config/_variables.styl
new file mode 100644
index 0000000..7ddde94
--- /dev/null
+++ b/styl/config/_variables.styl
@@ -0,0 +1,50 @@
+// Config file and project variables
+
+// font sizes
+base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
+line-height    = 1.5 // equiv line-height 1.5
+h1-size        = 3.2rem // equiv "32px"
+h2-size        = 2.8rem // equiv "28px"
+h3-size        = 2.4rem // equiv "24px"
+h4-size        = 2.0rem // equiv "20px"
+h5-size        = 1.8rem // equiv "18px"
+h6-size        = 1.6rem // equiv "16px"
+
+// font stacks
+font-stack-common    = sans-serif // common font
+font-stack-headings  = sans-serif // headings font
+font-stack-monospace = consolas, courier, monospace // monospace font
+
+// color scheme
+color1    = #000
+color2    = #fff
+color3    = #333
+color4    = #000
+color5    = #6FA939
+
+// colors used in project
+base-color       = color1
+link-color       = color3
+base-background  = color2
+// If you don't want any effect on focused/hovered links,
+// comment variable below or make it equal to either link-color or false or null
+link-hover-color = color4
+brand-primary    = color5
+
+
+// spacings (choose unit you prefer)
+tiny-value             = .5rem // tiny value for margins / paddings
+tiny-plus-value        = .7rem // tiny+ value for margins / paddings
+small-value            = 1rem // small value for margins / paddings
+small-plus-value       = 1.5rem // small+ value for margins / paddings
+medium-value           = 2rem // medium value for margins / paddings
+medium-plus-value      = 3rem // medium+ value for margins / paddings
+large-value            = 4rem // large value for margins / paddings
+large-plus-value       = 6rem // large value for margins / paddings
+extra-large-value      = 8rem // extra large value for margins / paddings
+extra-large-plus-value = 12rem // extra large value for margins / paddings
+ultra-large-value      = 16rem // ultra large value for margins / paddings
+ultra-large-plus-value = 20rem // ultra large value for margins / paddings
+
+//kna-namespace (default : null)
+kna-namespace = null;
diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
new file mode 100644
index 0000000..5c7f34d
--- /dev/null
+++ b/styl/grids/_grillade.styl
@@ -0,0 +1,293 @@
+/* ---------------------------------- */
+/* ==Grillade : Simple Grid System    */
+/* ---------------------------------- */
+/* Doc : http://grillade.knacss.com */
+// gutter values for grid layouts. Unit can be: %, px, em, rem
+grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
+// IEfixing, see
+// https://github.com/alsacreations/KNACSS/issues/133;
+iefix = 0.01px
+
+tiny         = 543px
+small        = 767px
+medium       = 991px
+large        = 1199px
+extra-large  = 1439px
+
+displayFlex()
+  display: -webkit-box
+  display: -ms-flexbox
+  display: flex
+
+@media (min-width: tiny + 1)
+  [class*=" grid-"]
+  [class^="grid-"]
+    displayFlex()
+    -webkit-box-orient: horizontal
+    -webkit-box-direction: normal
+    flex-direction: row
+    flex-wrap: wrap
+    & > *
+      box-sizing: border-box
+      min-width: 0
+      min-height: 0
+
+// Multi-line grid constructor
+// example : .grid-perso { @include grid(12, 3rem); }
+grid(grid-number = 1, own-gutter = 0)
+  & > *
+    width: calc(100% / grid-number - iefix)
+
+  for key, size in grid-gutters
+    &.has-gutter{key}
+      margin-right: -(size / 2)
+      margin-left: -(size / 2)
+      & > *
+        width: calc(100% / grid-number - size - iefix)
+        margin-right size / 2
+        margin-left size / 2
+
+  if own-gutter != 0
+    margin-right: own-gutter / 2
+    margin-left: own-gutter / 2
+
+// Mono-line grid constructor (.grid)
+@media (min-width: tiny + 1)
+  .grid
+  .grid--reverse
+    displayFlex()
+    & > *
+      flex: 1 1 0%
+      box-sizing: border-box
+      min-width: 0
+      min-height: 0
+
+    for key, size in grid-gutters
+      &.has-gutter{key} > * + *
+        margin-left: size - iefix
+
+// Constructing grids : will be compiled in CSS
+@media (min-width: tiny + 1)
+  for i in 2..12
+    grid-selector = 'grid-%s' % i
+    [class*={grid-selector}] > *
+      grid(i, 0)
+
+.push {
+  margin-left: auto !important;
+}
+
+.pull {
+  margin-right: auto !important;
+}
+
+.item-first {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.item-last {
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+/*[class*="grid-"][class*="--reverse"] {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}*/
+
+/*@media (min-width: 544px) {
+  .full {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 1 - 0.01px);
+  }
+  .has-gutter .full {
+    width: calc(100% / 1 - 1rem - 0.01px);
+  }
+  .has-gutter-l .full {
+    width: calc(100% / 1 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .full {
+    width: calc(100% / 1 - 4rem - 0.01px);
+  }
+  .one-half {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 2 - 0.01px);
+  }
+  .has-gutter .one-half {
+    width: calc(100% / 2 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-half {
+    width: calc(100% / 2 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-half {
+    width: calc(100% / 2 - 4rem - 0.01px);
+  }
+  .one-third {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 3 - 0.01px);
+  }
+  .has-gutter .one-third {
+    width: calc(100% / 3 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-third {
+    width: calc(100% / 3 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-third {
+    width: calc(100% / 3 - 4rem - 0.01px);
+  }
+  .one-quarter {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 4 - 0.01px);
+  }
+  .has-gutter .one-quarter {
+    width: calc(100% / 4 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-quarter {
+    width: calc(100% / 4 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-quarter {
+    width: calc(100% / 4 - 4rem - 0.01px);
+  }
+  .one-fifth {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 5 - 0.01px);
+  }
+  .has-gutter .one-fifth {
+    width: calc(100% / 5 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-fifth {
+    width: calc(100% / 5 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-fifth {
+    width: calc(100% / 5 - 4rem - 0.01px);
+  }
+  .one-sixth {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 6 - 0.01px);
+  }
+  .has-gutter .one-sixth {
+    width: calc(100% / 6 - 1rem - 0.01px);
+  }
+  .has-gutter-l .one-sixth {
+    width: calc(100% / 6 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .one-sixth {
+    width: calc(100% / 6 - 4rem - 0.01px);
+  }
+  .two-thirds {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 3 * 2 - 0.01px);
+  }
+  .has-gutter .two-thirds {
+    width: calc(100% / 3 * 2 - 1rem - 0.01px);
+  }
+  .has-gutter-l .two-thirds {
+    width: calc(100% / 3 * 2 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .two-thirds {
+    width: calc(100% / 3 * 2 - 4rem - 0.01px);
+  }
+  .three-quarters {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 4 * 3 - 0.01px);
+  }
+  .has-gutter .three-quarters {
+    width: calc(100% / 4 * 3 - 1rem - 0.01px);
+  }
+  .has-gutter-l .three-quarters {
+    width: calc(100% / 4 * 3 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .three-quarters {
+    width: calc(100% / 4 * 3 - 4rem - 0.01px);
+  }
+  .five-sixths {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: calc(100% / 6 * 5 - 0.01px);
+  }
+  .has-gutter .five-sixths {
+    width: calc(100% / 6 * 5 - 1rem - 0.01px);
+  }
+  .has-gutter-l .five-sixths {
+    width: calc(100% / 6 * 5 - 2rem - 0.01px);
+  }
+  .has-gutter-xl .five-sixths {
+    width: calc(100% / 6 * 5 - 4rem - 0.01px);
+  }
+}*/
+
+/* Responsive Small Breakpoint */
+/*
+@media (min-width: 544px) and (max-width: 991px) {
+  [class*="-small-1"] > * {
+    width: calc(100% / 1 - 0.01px);
+  }
+  [class*="-small-1"].has-gutter > * {
+    width: calc(100% / 1 - 1rem - 0.01px);
+  }
+  [class*="-small-1"].has-gutter-l > * {
+    width: calc(100% / 1 - 2rem - 0.01px);
+  }
+  [class*="-small-1"].has-gutter-xl > * {
+    width: calc(100% / 1 - 4rem - 0.01px);
+  }
+  [class*="-small-2"] > * {
+    width: calc(100% / 2 - 0.01px);
+  }
+  [class*="-small-2"].has-gutter > * {
+    width: calc(100% / 2 - 1rem - 0.01px);
+  }
+  [class*="-small-2"].has-gutter-l > * {
+    width: calc(100% / 2 - 2rem - 0.01px);
+  }
+  [class*="-small-2"].has-gutter-xl > * {
+    width: calc(100% / 2 - 4rem - 0.01px);
+  }
+  [class*="-small-3"] > * {
+    width: calc(100% / 3 - 0.01px);
+  }
+  [class*="-small-3"].has-gutter > * {
+    width: calc(100% / 3 - 1rem - 0.01px);
+  }
+  [class*="-small-3"].has-gutter-l > * {
+    width: calc(100% / 3 - 2rem - 0.01px);
+  }
+  [class*="-small-3"].has-gutter-xl > * {
+    width: calc(100% / 3 - 4rem - 0.01px);
+  }
+  [class*="-small-4"] > * {
+    width: calc(100% / 4 - 0.01px);
+  }
+  [class*="-small-4"].has-gutter > * {
+    width: calc(100% / 4 - 1rem - 0.01px);
+  }
+  [class*="-small-4"].has-gutter-l > * {
+    width: calc(100% / 4 - 2rem - 0.01px);
+  }
+  [class*="-small-4"].has-gutter-xl > * {
+    width: calc(100% / 4 - 4rem - 0.01px);
+  }
+}
+*/
diff --git a/styl/knacss.styl b/styl/knacss.styl
new file mode 100644
index 0000000..0374b38
--- /dev/null
+++ b/styl/knacss.styl
@@ -0,0 +1,64 @@
+/*!
+* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+/* ----------------------------- */
+/* ==Table Of Content            */
+/* ----------------------------- */
+
+/* 1- Normalize (basic reset) */
+/* 2- Base (basic styles) */
+/* 3- Print (print quick reset) */
+/* 4- Stylings (minor stylings) */
+/* 5- Misc (skip links, hyphens) */
+/* 6- Tables (data tables consistency) */
+/* 7- Forms (forms consistency) */
+/* 8- Media object */
+/* 9- Autogrid object */
+/* 10- Global Layout (alignment, modules, positionning) */
+/* 11- Helpers (width and spacers helpers) */
+/* (12- WordPress reset (disabled by default)) */
+/* 13- Responsive (Responsive Web Design helpers) */
+/* 14- Grid Layout (grillade) */
+
+/* ---------------------------------- */
+/* ==Normalize (basic reset)          */
+/* ---------------------------------- */
+
+@import 'vendor/_normalize.styl' // normalize (basic reset)
+
+// WARNING : you should comment the following @import (variables)
+// and move variables file from knacss folder to your own project folder!
+@import 'config/_variables.styl'
+@import 'config/_breakpoints.styl'
+@import 'config/_mixins.styl'
+
+// Libraries
+@import 'library/_base.styl' // basic styles
+@import 'library/_print.styl' // print quick reset
+@import 'library/_styling.styl' // minor stylings
+@import 'library/_misc.styl'; // skip links, hyphens
+@import 'library/_tables.styl'; // data tables consistency
+@import 'library/_forms.styl'; // forms consistency
+
+// Objects
+@import 'objects/_media.styl'; // media object
+@import 'objects/_autogrid.styl'; // media autogrid
+
+// Utilities
+@import 'utilities/_layout.styl'; // alignment, modules, positionning
+@import 'utilities/_helpers.styl'; // width and spacers helpers
+@import 'utilities/_responsive.styl'; // Responsive Web Design helpers
+
+// Grids
+@import 'grids/_grillade.styl'; // grids
+
+
+/* ----------------------------- */
+/* ==Own stylesheet              */
+/* ----------------------------- */
+
+/* Here should go your own CSS styles */
+// You can also link them with a Sass @import
+// @import "my-styles";
diff --git a/styl/library/_base.styl b/styl/library/_base.styl
new file mode 100644
index 0000000..646a1a0
--- /dev/null
+++ b/styl/library/_base.styl
@@ -0,0 +1,169 @@
+/* ----------------------------- */
+/* ==Base (basic styles)         */
+/* ----------------------------- */
+
+/* switching to border-box model for all elements */
+html
+  box-sizing border-box
+
+*
+  box-sizing inherit
+
+html
+  /* set base font-size to equiv "10px", which is adapted to rem unit */
+  font-size 62.5%
+  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
+  /* thanks to @guardian, @victorbritopro and @eQRoeil */
+  font-size calc(1em * 0.625)
+
+body
+  font-size base-font-size
+  background-color base-background
+  color base-color
+  font-family font-stack-common
+  line-height line-height
+
+a
+  color link-color
+
+  // No styling on focus/hover if there's no effect. Avoids to then have to
+  // override it countless times. See Issue #232
+  if link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
+    &:focus,
+    &:hover,
+    &:active
+      color link-hover-color
+
+ul
+ol
+  padding-left 2em
+
+img
+  vertical-align middle
+
+blockquote
+figure
+  margin-left 0
+  margin-right 0
+
+/* font-sizing for content */
+p
+.{kna-namespace}p-like
+ul
+ol
+dl
+blockquote
+pre
+td
+th
+label
+textarea
+caption
+details
+figure
+  margin-top 0.75em
+  margin-bottom 0
+  line-height line-height
+
+h1 .{kna-namespace}h1-like
+  font-size h1-size
+  if font-stack-headings is defined && font-stack-headings != font-stack-common
+    font-family font-stack-headings
+
+h2 .{kna-namespace}h2-like
+  font-size h2-size
+  if font-stack-headings is defined && font-stack-headings != font-stack-common
+    font-family font-stack-headings
+
+h3 .{kna-namespace}h3-like
+  font-size h3-size
+
+h4 .{kna-namespace}h4-like
+  font-size h4-size
+
+h5 .{kna-namespace}h5-like
+  font-size h5-size
+
+h6 .{kna-namespace}h6-like
+  font-size h6-size
+
+/* alternate font-sizing */
+.{kna-namespace}smaller
+  font-size 0.6em
+
+.{kna-namespace}small
+  font-size 0.8em
+
+.{kna-namespace}big
+  font-size 1.2em
+
+.{kna-namespace}bigger
+  font-size: 1.5em
+
+.{kna-namespace}biggest
+  font-size 2em
+
+code
+pre
+samp
+kbd
+  /* IE fix */
+  white-space pre-line
+  white-space pre-wrap
+  font-family font-stack-monospace
+  line-height normal
+
+em
+.{kna-namespace}italic
+address
+cite
+i
+var
+  font-style italic
+
+/* avoid top margins on first content element */
+p
+.{kna-namespace}p-like
+ul
+ol
+dl
+blockquote
+pre
+h1
+.{kna-namespace}h1-like
+h2
+.{kna-namespace}h2-like
+h3
+.{kna-namespace}h3-like
+h4
+.{kna-namespace}h4-like
+h5
+.{kna-namespace}h5-like
+h6
+.{kna-namespace}h6-like
+  &:first-child
+    margin-top 0
+
+/* avoid margins on nested elements */
+li p
+li .{kna-namespace}p-like
+li ul
+li ol
+  margin-top 0
+  margin-bottom 0
+
+/* max values */
+img
+table
+td
+blockquote
+code
+pre
+textarea
+input
+video
+svg
+  max-width 100%
+
+img
+  height auto
diff --git a/styl/library/_forms.styl b/styl/library/_forms.styl
new file mode 100644
index 0000000..0830e75
--- /dev/null
+++ b/styl/library/_forms.styl
@@ -0,0 +1,99 @@
+/* ----------------------------- */
+/* ==Forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize and www.sitepen.com
+*/
+
+/* buttons */
+.{kna-namespace}btn
+  display inline-block
+
+/* forms items */
+form
+fieldset
+  border none
+
+input
+button
+select
+label
+.{kna-namespace}btn
+  font-family inherit
+  font-size inherit
+
+button
+input
+optgroup
+select
+textarea
+  color base-color
+
+label
+  vertical-align middle
+  cursor pointer
+
+legend
+  border 0
+  white-space normal
+
+textarea
+  min-height 5em
+  vertical-align top
+  font-family inherit
+  font-size inherit
+  resize vertical
+
+select
+  -webkit-appearance menulist-button
+
+/* if select styling bugs on WebKit */
+/* select { -webkit-appearance: none; } */
+
+/* 'x' appears on right of search input when text is entered. This removes it */
+input[type="search"]
+  &::-webkit-search-decoration
+  &::-webkit-search-cancel-button
+  &::-webkit-search-results-button
+  &::-webkit-search-results-decoration
+    display: none
+
+::-webkit-input-placeholder
+  color #777
+
+input:-moz-placeholder
+textarea:-moz-placeholder
+  color #777
+
+.{kna-namespace}btn
+input[type="button"]
+button
+  &:focus
+    -webkit-tap-highlight-color transparent
+    -webkit-user-select none
+    -moz-user-select none
+    -ms-user-select none
+    user-select none
+
+/* unstyled forms */
+
+button
+input[type="button"]
+input[type="submit"]
+input[type="reset"]
+  &.{kna-namespace}unstyled
+    padding 0
+    border none
+    line-height 1
+    text-align left
+    background none
+    border-radius 0
+    box-shadow none
+    -webkit-appearance none
+    -moz-appearance none
+    appearance none
+
+    &:focus
+      box-shadow none
+      outline none
diff --git a/styl/library/_misc.styl b/styl/library/_misc.styl
new file mode 100644
index 0000000..e69a384
--- /dev/null
+++ b/styl/library/_misc.styl
@@ -0,0 +1,46 @@
+/* ----------------------------- */
+/* ==Misc (skip links, hyphens)  */
+/* ----------------------------- */
+
+/* styling skip links */
+.{kna-namespace}skip-links
+  position absolute
+
+  & a
+    position absolute
+    overflow hidden
+    clip rect(1px, 1px, 1px, 1px)
+    padding 0.5em
+    background black
+    color white
+    text-decoration none
+
+    &:focus
+      position static
+      overflow visible
+      clip auto
+
+// hyphens on tiny screens
+@media (max-width: tiny)
+  /* you shall not pass */
+  div
+  textarea
+  table
+  td
+  th
+  code
+  pre
+  samp
+    word-wrap break-word
+    hyphens auto
+
+// use .no-wrapping to disallow hyphens on tiny screens
+@media (max-width: tiny)
+  .no-wrapping
+    word-wrap normal
+    hyphens manual
+
+// SVG width IE fix
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+  img[src$=".svg"]
+    width 100%
diff --git a/styl/library/_print.styl b/styl/library/_print.styl
new file mode 100644
index 0000000..723c4c0
--- /dev/null
+++ b/styl/library/_print.styl
@@ -0,0 +1,83 @@
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+
+@media print
+  *
+    background transparent !important
+    box-shadow none !important
+    text-shadow none !important
+
+  body
+    width auto
+    margin auto
+    font-family serif
+    font-size 12pt
+
+  p
+  .{kna-namespace}p-like
+  h1
+  .{kna-namespace}h1-like
+  h2
+  .{kna-namespace}h2-like
+  h3
+  .{kna-namespace}h3-like
+  h4
+  .{kna-namespace}h4-like
+  h5
+  .{kna-namespace}h5-like
+  h6
+  .{kna-namespace}h6-like
+  blockquote
+  ul
+  ol
+    color #000
+    margin auto
+
+  .{kna-namespace}print
+    display block
+
+  .{kna-namespace}no-print
+    display none
+
+  /* no orphans, no widows */
+  p
+  .{kna-namespace}p-like
+  blockquote
+    orphans 3
+    widows 3
+
+  /* no breaks inside these elements */
+  blockquote
+  ul
+  ol
+    page-break-inside avoid
+
+  /* page break before main headers
+  h1
+  .h1-like
+    page-break-before always
+  */
+
+  /* no breaks after these elements */
+  h1
+  .{kna-namespace}h1-like
+  h2
+  .{kna-namespace}h2-like
+  h3
+  .{kna-namespace}h3-like
+  caption
+    page-break-after avoid
+
+  a
+    color #000
+
+  /* displaying URLs
+  a[href]::after
+    content " (" attr(href) ")"
+  */
+
+  a[href^="javascript:"]
+  a[href^="#"]
+    &::after
+      content: ""
diff --git a/styl/library/_styling.styl b/styl/library/_styling.styl
new file mode 100644
index 0000000..216c02f
--- /dev/null
+++ b/styl/library/_styling.styl
@@ -0,0 +1,97 @@
+/* ----------------------------- */
+/* ==Stylings (minor stylings)   */
+/* ----------------------------- */
+
+/* styling elements */
+code
+kbd
+mark
+  border-radius 2px
+
+kbd
+  padding 0 2px
+  border 1px solid #999
+
+code
+  padding 2px 4px
+  background rgba(0, 0, 0, 0.04)
+  color #b11
+
+pre code
+  padding 0
+  background none
+  color inherit
+  border-radius 0
+
+mark
+  padding 2px 4px
+
+sup
+sub
+  vertical-align 0
+
+sup
+  bottom 1ex
+
+sub
+  top 0.5ex
+
+blockquote
+  position relative
+  padding-left 3em
+  min-height 2em
+
+blockquote::before
+  content "\201C"
+  position absolute
+  left 0
+  top 0
+  font-family georgia, serif
+  font-size 5em
+  height .4em
+  line-height .9
+  color rgba(0, 0, 0, .3)
+
+blockquote > footer
+  margin-top .75em
+  font-size 0.9em
+  color rgba(0, 0, 0, .7)
+
+  &::before
+    content "\2014 \0020"
+
+q
+  font-style normal
+
+q
+.{kna-namespace}q
+  quotes: "“\00a0" "\00a0”"
+
+  &:lang(fr)
+    quotes "«\00a0" "\00a0»"
+
+hr
+  display block
+  clear both
+  height 1px
+  margin 1em 0 2em
+  padding 0
+  border 0
+  color #ccc
+  background-color #ccc
+
+/* tables */
+table
+.{kna-namespace}table
+  border 1px solid #ccc
+
+caption
+  padding small-value
+  color #555
+  font-style italic
+
+td
+th
+  padding 0.3em 0.8em
+  border 1px #aaa dotted
+  text-align left
diff --git a/styl/library/_tables.styl b/styl/library/_tables.styl
new file mode 100644
index 0000000..6556957
--- /dev/null
+++ b/styl/library/_tables.styl
@@ -0,0 +1,25 @@
+/* ----------------------------- */
+/* ==Tables                      */
+/* ----------------------------- */
+
+table
+.{kna-namespace}table
+  width 100%
+  max-width 100%
+  table-layout fixed
+  border-collapse collapse
+  vertical-align top
+  margin-bottom medium-value
+
+.{kna-namespace}table
+  display table
+
+#recaptcha_table
+.{kna-namespace}table-auto
+  table-layout auto
+
+td
+th
+  vertical-align top
+  min-width medium-value
+  cursor default
diff --git a/styl/objects/_autogrid.styl b/styl/objects/_autogrid.styl
new file mode 100644
index 0000000..8383f8a
--- /dev/null
+++ b/styl/objects/_autogrid.styl
@@ -0,0 +1,19 @@
+/* Autogrid object */
+/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
+@media (min-width: (tiny + 1))
+  [class^="autogrid"]
+  [class*=" autogrid"]
+    display flex
+
+  [class^="autogrid"] > *
+  [class*=" autogrid"] > *
+    flex 1
+    min-width 0 /* avoid min-width:auto */
+
+/* Autogrid variants */
+@media (min-width: (tiny + 1))
+  .has-gutter > *:not(:first-child)
+    margin-left 1rem
+
+  [class*="--reverse"]
+    flex-direction: row-reverse
diff --git a/styl/objects/_media.styl b/styl/objects/_media.styl
new file mode 100644
index 0000000..04ca114
--- /dev/null
+++ b/styl/objects/_media.styl
@@ -0,0 +1,18 @@
+/* Media object */
+/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
+@media (min-width: (tiny + 1))
+  .o-media
+    display flex
+    align-items flex-start
+
+  .o-media-content
+    flex 1
+    min-width 0 /* avoid min-width:auto */
+
+/* Media variants */
+@media (min-width: (tiny + 1))
+  .o-media--reverse
+    flex-direction row-reverse
+
+  .o-media-figure--center
+    align-self center
diff --git a/styl/utilities/_helpers.styl b/styl/utilities/_helpers.styl
new file mode 100644
index 0000000..175074a
--- /dev/null
+++ b/styl/utilities/_helpers.styl
@@ -0,0 +1,278 @@
+/* ---------------------------------- */
+/* ==Helpers                          */
+/* ---------------------------------- */
+
+/* State Helpers */
+/* ------------- */
+
+/* invisible for all */
+.is-hidden
+[hidden]
+  display none
+
+/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
+.visually-hidden
+  position absolute !important
+  border 0 !important
+  height 1px !important
+  width 1px !important
+  padding 0 !important
+  overflow hidden !important
+  clip rect(0, 0, 0, 0) !important
+
+.is-disabled
+[disabled]
+  opacity 0.5
+  pointer-events none
+  cursor not-allowed
+  filter grayscale(1)
+
+
+ul
+  &.is-unstyled
+  &.unstyled
+    list-style none
+    padding-left 0
+
+/* Width Helpers */
+/* ------------- */
+
+/* blocks widths (percentage and pixels) */
+.{kna-namespace}w10
+  width 10%
+
+.{kna-namespace}w20
+  width 20%
+
+.{kna-namespace}w25
+  width 25%
+
+.{kna-namespace}w30
+  width 30%
+
+.{kna-namespace}w33
+  width 33.3333%
+
+.{kna-namespace}w40
+  width 40%
+
+.{kna-namespace}w50
+  width 50%
+
+.{kna-namespace}w60
+  width 60%
+
+.{kna-namespace}w66
+  width 66.6666%
+
+.{kna-namespace}w70
+  width 70%
+
+.{kna-namespace}w75
+  width 75%
+
+.{kna-namespace}w80
+  width 80%
+
+.{kna-namespace}w90
+  width 90%
+
+.{kna-namespace}w100
+  width 100%
+
+.{kna-namespace}w50p
+  width 50px
+
+.{kna-namespace}w100p
+  width 100px
+
+.{kna-namespace}w150p
+  width 150px
+
+.{kna-namespace}w200p
+  width 200px
+
+.{kna-namespace}w300p
+  width 300px
+
+@media (min-width: 401px)
+  .{kna-namespace}w400p
+    width 400px
+
+  .{kna-namespace}w500p
+    width 500px
+
+  .{kna-namespace}w600p
+    width 600px
+
+@media (min-width: 701px)
+
+  .{kna-namespace}w700p
+    width 700px
+
+  .{kna-namespace}w800p
+    width 800px
+
+@media (min-width: 961px)
+  .{kna-namespace}w960p
+    width 960px
+
+  .{kna-namespace}mw960p
+    max-width 960px
+
+  .{kna-namespace}w1140p
+    width 1140px
+
+  .{kna-namespace}mw1140p
+    max-width 1140px
+
+.{kna-namespace}wauto
+  width auto
+
+/* Spacing Helpers */
+/* --------------- */
+
+.{kna-namespace}man
+.{kna-namespace}ma0
+  margin 0
+
+.{kna-namespace}pan
+.{kna-namespace}pa0
+  padding 0
+
+.{kna-namespace}mas
+  margin small-value
+
+.{kna-namespace}mam
+  margin medium-value
+
+.{kna-namespace}mal
+  margin large-value
+
+.{kna-namespace}pas
+  padding small-value
+
+.{kna-namespace}pam
+  padding medium-value
+
+.{kna-namespace}pal
+  padding large-value
+
+.{kna-namespace}mtn
+.{kna-namespace}mt0
+  margin-top 0
+
+.{kna-namespace}mts
+  margin-top small-value
+
+.{kna-namespace}mtm
+  margin-top medium-value
+
+.{kna-namespace}mtl
+  margin-top large-value
+
+.{kna-namespace}mrn
+.{kna-namespace}mr0
+  margin-right 0
+
+.{kna-namespace}mrs
+  margin-right small-value
+
+.{kna-namespace}mrm
+  margin-right medium-value
+
+.{kna-namespace}mrl
+  margin-right large-value
+
+.{kna-namespace}mbn
+.{kna-namespace}mb0
+  margin-bottom 0
+
+.{kna-namespace}mbs
+  margin-bottom small-value
+
+.{kna-namespace}mbm
+  margin-bottom medium-value
+
+.{kna-namespace}mbl
+  margin-bottom large-value
+
+.{kna-namespace}mln
+.{kna-namespace}ml0
+  margin-left 0
+
+.{kna-namespace}mls
+  margin-left small-value
+
+.{kna-namespace}mlm
+  margin-left medium-value
+
+.{kna-namespace}mll
+  margin-left large-value
+
+.{kna-namespace}mauto
+  margin auto
+
+.{kna-namespace}mtauto
+  margin-top auto
+
+.{kna-namespace}mrauto
+  margin-right auto
+
+.{kna-namespace}mbauto
+  margin-bottom auto
+
+.{kna-namespace}mlauto
+  margin-left: auto
+
+.{kna-namespace}ptn
+.{kna-namespace}pt0
+  padding-top 0
+
+.{kna-namespace}pts
+  padding-top small-value
+
+.{kna-namespace}ptm
+  padding-top medium-value
+
+.{kna-namespace}ptl
+  padding-top large-value
+
+.{kna-namespace}prn
+.{kna-namespace}pr0
+  padding-right 0
+
+.{kna-namespace}prs
+  padding-right small-value
+
+.{kna-namespace}prm
+  padding-right medium-value
+
+.{kna-namespace}prl
+  padding-right large-value
+
+.{kna-namespace}pbn
+.{kna-namespace}pb0
+  padding-bottom 0
+
+.{kna-namespace}pbs
+  padding-bottom small-value
+
+.{kna-namespace}pbm
+  padding-bottom medium-value
+
+.{kna-namespace}pbl
+  padding-bottom large-value
+
+.{kna-namespace}pln
+.{kna-namespace}pl0
+  padding-left 0
+
+.{kna-namespace}pls
+  padding-left small-value
+
+.{kna-namespace}plm
+  padding-left medium-value
+
+.{kna-namespace}pll
+  padding-left large-value
diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl
new file mode 100644
index 0000000..4bae1a2
--- /dev/null
+++ b/styl/utilities/_layout.styl
@@ -0,0 +1,98 @@
+/* ----------------------------- */
+/* ==Global Layout               */
+/* ----------------------------- */
+
+/* module, gains superpower "BFC" Block Formating Context */
+.mod
+.bfc
+  overflow hidden
+
+/* blocks that needs to be placed under floats */
+.clear
+  clear both
+
+/* blocks that must contain floats */
+.clearfix
+  &::after
+    content ""
+    display table
+    clear both
+    border-collapse collapse
+
+/* simple blocks alignment */
+.{kna-namespace}left
+  margin-right auto
+
+.{kna-namespace}right
+  margin-left auto
+
+.{kna-namespace}center
+  margin-left auto
+  margin-right auto
+
+/* text and contents alignment */
+.{kna-namespace}txtleft
+  text-align left
+
+.{kna-namespace}txtright
+  text-align right
+
+.{kna-namespace}txtcenter
+  text-align center
+
+/* floating elements */
+.{kna-namespace}fl
+  float left
+
+img.{kna-namespace}fl
+  margin-right small-value
+
+.{kna-namespace}fr
+  float right
+
+img.{kna-namespace}fr
+  margin-left small-value
+
+img.{kna-namespace}fl
+img.{kna-namespace}fr
+  margin-bottom tiny-value
+
+/* inline-block */
+.{kna-namespace}inbl
+  display inline-block
+  vertical-align top
+
+/* flexbox layout
+http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
+*/
+
+[class*="{kna-namespace}flex-container"]
+.{kna-namespace}flex-container
+  display flex
+  flex-wrap wrap
+
+.{kna-namespace}flex-container-h
+  flex-direction row
+
+.{kna-namespace}flex-container-v
+  flex-direction column
+
+.{kna-namespace}flex-item-fluid
+  flex 1
+  min-width 0
+
+.{kna-namespace}flex-item-first
+.{kna-namespace}item-first
+  order -1
+
+.{kna-namespace}flex-item-medium
+.{kna-namespace}item-medium
+  order 0
+
+.{kna-namespace}flex-item-last
+.{kna-namespace}item-last
+  order 1
+
+.{kna-namespace}flex-item-center
+.{kna-namespace}item-center
+  margin auto
diff --git a/styl/utilities/_responsive.styl b/styl/utilities/_responsive.styl
new file mode 100644
index 0000000..4996461
--- /dev/null
+++ b/styl/utilities/_responsive.styl
@@ -0,0 +1,230 @@
+/* -------------------------- */
+/* ==Responsive helpers       */
+/* -------------------------- */
+
+/* large screens */
+/* ------------- */
+
+@media (min-width: (medium + 1))
+
+  /* layouts for large screens */
+  .{kna-namespace}large-hidden
+    display none !important
+
+  .{kna-namespace}large-visible
+    display block !important
+
+  .{kna-namespace}large-no-float
+    float none
+
+  .{kna-namespace}large-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for large screens */
+  .{kna-namespace}large-w25
+    width 25% !important
+
+  .{kna-namespace}large-w33
+    width 33.333333% !important
+
+  .{kna-namespace}large-w50
+    width 50% !important
+
+  .{kna-namespace}large-w66
+    width 66.666666% !important
+
+  .{kna-namespace}large-w75
+    width 75% !important
+
+  .{kna-namespace}large-w100
+  .{kna-namespace}large-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for large screens */
+  .{kna-namespace}large-man
+  .{kna-namespace}large-ma0
+    margin 0 !important
+
+/* medium screens */
+/* -------------- */
+
+@media (min-width: (small + 1)) and (max-width: large)
+
+  /* layouts for medium screens */
+  .{kna-namespace}medium-hidden
+    display none !important
+
+  .{kna-namespace}medium-visible
+    display block !important
+
+  .{kna-namespace}medium-no-float
+    float none
+
+  .{kna-namespace}medium-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for medium screens */
+  .{kna-namespace}medium-w25
+    width 25% !important
+
+  .{kna-namespace}medium-w33
+    width 33.333333% !important
+
+  .{kna-namespace}medium-w50
+    width 50% !important
+
+  .{kna-namespace}medium-w66
+    width 66.666666% !important
+
+  .{kna-namespace}medium-w75
+    width 75% !important
+
+  .{kna-namespace}medium-w100
+  .{kna-namespace}medium-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for medium screens */
+  .{kna-namespace}medium-man
+  .{kna-namespace}medium-ma0
+    margin 0 !important
+
+/* small screens */
+/* ------------- */
+
+@media (min-width: (tiny + 1)) and (max-width: small)
+
+  /* layouts for small screens */
+  .{kna-namespace}small-hidden
+    display none !important
+
+  .{kna-namespace}small-visible
+    display block !important
+
+  .{kna-namespace}small-no-float
+    float none
+
+  .{kna-namespace}small-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for small screens */
+  .{kna-namespace}small-w25
+    width 25% !important
+
+  .{kna-namespace}small-w33
+    width 33.333333% !important
+
+  .{kna-namespace}small-w50
+    width 50% !important
+
+  .{kna-namespace}small-w66
+    width 66.666666% !important
+
+  .{kna-namespace}small-w75
+    width 75% !important
+
+  .{kna-namespace}small-w100
+  .{kna-namespace}small-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for small screens */
+  .{kna-namespace}small-man
+  .{kna-namespace}small-ma0
+    margin 0 !important
+
+  .{kna-namespace}small-pan
+  .{kna-namespace}small-pa0
+    padding 0 !important
+
+/* tiny screens */
+/* ------------ */
+
+@media (max-width: tiny)
+
+  /* quick small resolution reset */
+  .{kna-namespace}mod
+  .{kna-namespace}col
+  fieldset
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  .{kna-namespace}flex-container
+    flex-direction column
+
+  /* layouts for tiny screens */
+  .{kna-namespace}tiny-hidden
+    display none !important
+
+  .{kna-namespace}tiny-visible
+    display block !important
+
+  .{kna-namespace}tiny-no-float
+    float none
+
+  .{kna-namespace}tiny-inbl
+    display inline-block
+    float none
+    vertical-align top
+
+  /* widths for tiny screens */
+  .{kna-namespace}tiny-w25
+    width 25% !important
+
+  .{kna-namespace}tiny-w33
+    width 33.333333% !important
+
+  .{kna-namespace}tiny-w50
+    width 50% !important
+
+  .{kna-namespace}tiny-w66
+    width 66.666666% !important
+
+  .{kna-namespace}tiny-w75
+    width 75% !important
+
+  .{kna-namespace}tiny-w100
+  .{kna-namespace}tiny-wauto
+    display block !important
+    float none !important
+    clear none !important
+    width auto !important
+    margin-left 0 !important
+    margin-right 0 !important
+    border 0
+
+  /* margins for tiny screens */
+  .{kna-namespace}tiny-man
+  .{kna-namespace}tiny-ma0
+    margin 0 !important
+
+  .{kna-namespace}tiny-pan
+  .{kna-namespace}tiny-pa0
+    padding 0 !important
diff --git a/styl/vendor/_normalize.styl b/styl/vendor/_normalize.styl
new file mode 100644
index 0000000..18ddf7f
--- /dev/null
+++ b/styl/vendor/_normalize.styl
@@ -0,0 +1,419 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}

From 603e9c2fa942034e145204418fb29d09f8087895 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Tue, 7 Mar 2017 17:43:34 +0100
Subject: [PATCH 2/6] Creation de mixin multinavigateurs et comp grillade

---
 styl/config/_mixins.styl  |  42 ++++--
 styl/grids/_grillade.styl | 285 +++++++-------------------------------
 2 files changed, 80 insertions(+), 247 deletions(-)

diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl
index 16dd059..7dbb788 100644
--- a/styl/config/_mixins.styl
+++ b/styl/config/_mixins.styl
@@ -2,32 +2,50 @@
 // ex. @include respond-to("medium-up") {...}
 breakpoint(bp)
   if bp == 'tiny'
-    return '(max-width: {tiny})'
+    return '(max-width: %s)' % tiny
   else if bp == 'small'
-    return '(max-width: {small})'
+    return '(max-width: %s)' % small
   else if bp == 'medium'
-    return '(max-width: {medium})'
+    return '(max-width: %s)' % medium
   else if bp == 'large'
-    return '(max-width: {large})'
+    return '(max-width: %s)' % large
   else if bp == 'extra-large'
-    return '(max-width: {extra-large})'
+    return '(max-width: %s)' % extra-large
   else if bp == 'tiny-up'
-    return '(min-width: {tiny + 1})'
+    return '(min-width: %s + 1)' % tiny
   else if bp == 'small-up'
-    return '(min-width: {small + 1})'
+    return '(min-width: %s + 1)' % small
   else if bp == 'medium-up'
-    return '(min-width: {medium + 1})'
+    return '(min-width: %s + 1)' % medium
   else if bp == 'large-up'
-    return '(min-width: {large + 1})'
+    return '(min-width: %s + 1)' % large
   else if bp == 'extra-large-up'
-    return '(min-width: {extra-large + 1})'
+    return '(min-width: %s + 1)' % extra-large
   else if bp == 'retina'
     return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
 
-
 /*
 respond-to(value)
   string = breakpoint(value)
-  @media screen and {string}
+  @media screen and string
     {block}
 */
+
+displayFlex()
+  display: -webkit-box
+  display: -ms-flexbox
+  display: flex
+
+box-orient()
+  -webkit-box-orient arguments
+
+box-direction()
+    -webkit-box-direction arguments
+
+flex-direction()
+  -ms-flex-direction arguments
+  flex-direction arguments
+
+flex-wrap()
+  -ms-flex-wrap arguments
+  flex-wrap arguments
diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
index 5c7f34d..ea65fce 100644
--- a/styl/grids/_grillade.styl
+++ b/styl/grids/_grillade.styl
@@ -14,16 +14,11 @@ medium       = 991px
 large        = 1199px
 extra-large  = 1439px
 
-displayFlex()
-  display: -webkit-box
-  display: -ms-flexbox
-  display: flex
-
 @media (min-width: tiny + 1)
   [class*=" grid-"]
   [class^="grid-"]
     displayFlex()
-    -webkit-box-orient: horizontal
+    box-orient(horizontal)
     -webkit-box-direction: normal
     flex-direction: row
     flex-wrap: wrap
@@ -36,20 +31,18 @@ displayFlex()
 // example : .grid-perso { @include grid(12, 3rem); }
 grid(grid-number = 1, own-gutter = 0)
   & > *
-    width: calc(100% / grid-number - iefix)
-
-  for key, size in grid-gutters
+    width 'calc(100% / %s - %s)' % (grid-number iefix)
+   for key, size in grid-gutters
     &.has-gutter{key}
-      margin-right: -(size / 2)
-      margin-left: -(size / 2)
+      margin-right -(size / 2)
+      margin-left -(size / 2)
       & > *
-        width: calc(100% / grid-number - size - iefix)
-        margin-right size / 2
-        margin-left size / 2
-
-  if own-gutter != 0
-    margin-right: own-gutter / 2
-    margin-left: own-gutter / 2
+        width 'calc(100% / %s - %s - %s)' % (grid-number size iefix)
+        margin-right (size / 2)
+        margin-left (size / 2)
+   if own-gutter != 0
+    margin-right (own-gutter / 2)
+    margin-left (own-gutter / 2)
 
 // Mono-line grid constructor (.grid)
 @media (min-width: tiny + 1)
@@ -57,14 +50,13 @@ grid(grid-number = 1, own-gutter = 0)
   .grid--reverse
     displayFlex()
     & > *
-      flex: 1 1 0%
-      box-sizing: border-box
-      min-width: 0
-      min-height: 0
-
+      flex 1 1 0%
+      box-sizing border-box
+      min-width 0
+      min-height 0
     for key, size in grid-gutters
       &.has-gutter{key} > * + *
-        margin-left: size - iefix
+        margin-left 'calc(%s - %s)' % (size iefix)
 
 // Constructing grids : will be compiled in CSS
 @media (min-width: tiny + 1)
@@ -73,221 +65,44 @@ grid(grid-number = 1, own-gutter = 0)
     [class*={grid-selector}] > *
       grid(i, 0)
 
-.push {
-  margin-left: auto !important;
-}
+.push
+  margin-left auto !important
 
-.pull {
-  margin-right: auto !important;
-}
+.pull
+  margin-right auto !important
 
-.item-first {
-  -webkit-box-ordinal-group: 0;
-  -ms-flex-order: -1;
-  order: -1;
-}
+.item-first
+  -webkit-box-ordinal-group 0
+  -ms-flex-order -1
+  order -1
 
-.item-last {
-  -webkit-box-ordinal-group: 2;
-  -ms-flex-order: 1;
-  order: 1;
-}
+.item-last
+  -webkit-box-ordinal-group 2
+  -ms-flex-order 1
+  order 1
 
-/*[class*="grid-"][class*="--reverse"] {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}*/
+[class*="grid-"][class*="--reverse"]
+  -webkit-box-orient: horizontal
+  -webkit-box-direction: reverse
+  flex-direction row-reverse
 
-/*@media (min-width: 544px) {
-  .full {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 1 - 0.01px);
-  }
-  .has-gutter .full {
-    width: calc(100% / 1 - 1rem - 0.01px);
-  }
-  .has-gutter-l .full {
-    width: calc(100% / 1 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .full {
-    width: calc(100% / 1 - 4rem - 0.01px);
-  }
-  .one-half {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 2 - 0.01px);
-  }
-  .has-gutter .one-half {
-    width: calc(100% / 2 - 1rem - 0.01px);
-  }
-  .has-gutter-l .one-half {
-    width: calc(100% / 2 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .one-half {
-    width: calc(100% / 2 - 4rem - 0.01px);
-  }
-  .one-third {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 3 - 0.01px);
-  }
-  .has-gutter .one-third {
-    width: calc(100% / 3 - 1rem - 0.01px);
-  }
-  .has-gutter-l .one-third {
-    width: calc(100% / 3 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .one-third {
-    width: calc(100% / 3 - 4rem - 0.01px);
-  }
-  .one-quarter {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 4 - 0.01px);
-  }
-  .has-gutter .one-quarter {
-    width: calc(100% / 4 - 1rem - 0.01px);
-  }
-  .has-gutter-l .one-quarter {
-    width: calc(100% / 4 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .one-quarter {
-    width: calc(100% / 4 - 4rem - 0.01px);
-  }
-  .one-fifth {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 5 - 0.01px);
-  }
-  .has-gutter .one-fifth {
-    width: calc(100% / 5 - 1rem - 0.01px);
-  }
-  .has-gutter-l .one-fifth {
-    width: calc(100% / 5 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .one-fifth {
-    width: calc(100% / 5 - 4rem - 0.01px);
-  }
-  .one-sixth {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 6 - 0.01px);
-  }
-  .has-gutter .one-sixth {
-    width: calc(100% / 6 - 1rem - 0.01px);
-  }
-  .has-gutter-l .one-sixth {
-    width: calc(100% / 6 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .one-sixth {
-    width: calc(100% / 6 - 4rem - 0.01px);
-  }
-  .two-thirds {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 3 * 2 - 0.01px);
-  }
-  .has-gutter .two-thirds {
-    width: calc(100% / 3 * 2 - 1rem - 0.01px);
-  }
-  .has-gutter-l .two-thirds {
-    width: calc(100% / 3 * 2 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .two-thirds {
-    width: calc(100% / 3 * 2 - 4rem - 0.01px);
-  }
-  .three-quarters {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 4 * 3 - 0.01px);
-  }
-  .has-gutter .three-quarters {
-    width: calc(100% / 4 * 3 - 1rem - 0.01px);
-  }
-  .has-gutter-l .three-quarters {
-    width: calc(100% / 4 * 3 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .three-quarters {
-    width: calc(100% / 4 * 3 - 4rem - 0.01px);
-  }
-  .five-sixths {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: calc(100% / 6 * 5 - 0.01px);
-  }
-  .has-gutter .five-sixths {
-    width: calc(100% / 6 * 5 - 1rem - 0.01px);
-  }
-  .has-gutter-l .five-sixths {
-    width: calc(100% / 6 * 5 - 2rem - 0.01px);
-  }
-  .has-gutter-xl .five-sixths {
-    width: calc(100% / 6 * 5 - 4rem - 0.01px);
-  }
-}*/
+@media (min-width: tiny + 1)
+  flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
+  for flow, divider  in flowToDivid
+    .{flow}
+      flex 0 0 auto
+      width 'calc(100% / %s - %s)' % (divider iefix)
+      for key, size in grid-gutters
+        .has-gutter{key} .{flow}
+          width 'calc(100% / %s - %s - %s)' % (divider size iefix)
 
 /* Responsive Small Breakpoint */
-/*
-@media (min-width: 544px) and (max-width: 991px) {
-  [class*="-small-1"] > * {
-    width: calc(100% / 1 - 0.01px);
-  }
-  [class*="-small-1"].has-gutter > * {
-    width: calc(100% / 1 - 1rem - 0.01px);
-  }
-  [class*="-small-1"].has-gutter-l > * {
-    width: calc(100% / 1 - 2rem - 0.01px);
-  }
-  [class*="-small-1"].has-gutter-xl > * {
-    width: calc(100% / 1 - 4rem - 0.01px);
-  }
-  [class*="-small-2"] > * {
-    width: calc(100% / 2 - 0.01px);
-  }
-  [class*="-small-2"].has-gutter > * {
-    width: calc(100% / 2 - 1rem - 0.01px);
-  }
-  [class*="-small-2"].has-gutter-l > * {
-    width: calc(100% / 2 - 2rem - 0.01px);
-  }
-  [class*="-small-2"].has-gutter-xl > * {
-    width: calc(100% / 2 - 4rem - 0.01px);
-  }
-  [class*="-small-3"] > * {
-    width: calc(100% / 3 - 0.01px);
-  }
-  [class*="-small-3"].has-gutter > * {
-    width: calc(100% / 3 - 1rem - 0.01px);
-  }
-  [class*="-small-3"].has-gutter-l > * {
-    width: calc(100% / 3 - 2rem - 0.01px);
-  }
-  [class*="-small-3"].has-gutter-xl > * {
-    width: calc(100% / 3 - 4rem - 0.01px);
-  }
-  [class*="-small-4"] > * {
-    width: calc(100% / 4 - 0.01px);
-  }
-  [class*="-small-4"].has-gutter > * {
-    width: calc(100% / 4 - 1rem - 0.01px);
-  }
-  [class*="-small-4"].has-gutter-l > * {
-    width: calc(100% / 4 - 2rem - 0.01px);
-  }
-  [class*="-small-4"].has-gutter-xl > * {
-    width: calc(100% / 4 - 4rem - 0.01px);
-  }
-}
-*/
+@media (min-width: tiny + 1) and (max-width: small)
+  for i in 1..4
+    index = '-small-%s' % i
+    [class*={index}]
+      & > *
+        width: 'calc(100% / %s - %s)' % (i iefix)
+        for key, size in grid-gutters
+          &.has-gutter{key} > *
+            width: 'calc(100% / %s - %s - %s)' % (i size iefix)

From b8c60d3286c025c222c9030f0812245d32492ca3 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Thu, 9 Mar 2017 10:56:37 +0100
Subject: [PATCH 3/6] add submodule flexbox-stylus

---
 .gitmodules                | 3 +++
 styl/grids/_grillade.styl  | 7 +------
 styl/vendor/flexbox-stylus | 1 +
 3 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 .gitmodules
 create mode 160000 styl/vendor/flexbox-stylus

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..5f15df4
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "styl/vendor/flexbox-stylus"]
+	path = styl/vendor/flexbox-stylus
+	url = git@github.com:psa-acariou/flexbox-stylus.git
diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
index ea65fce..bdd4c6f 100644
--- a/styl/grids/_grillade.styl
+++ b/styl/grids/_grillade.styl
@@ -1,6 +1,7 @@
 /* ---------------------------------- */
 /* ==Grillade : Simple Grid System    */
 /* ---------------------------------- */
+@import '../vendor/flexbox-stylus/stylus/flexbox.styl'
 /* Doc : http://grillade.knacss.com */
 // gutter values for grid layouts. Unit can be: %, px, em, rem
 grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
@@ -8,12 +9,6 @@ grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
 // https://github.com/alsacreations/KNACSS/issues/133;
 iefix = 0.01px
 
-tiny         = 543px
-small        = 767px
-medium       = 991px
-large        = 1199px
-extra-large  = 1439px
-
 @media (min-width: tiny + 1)
   [class*=" grid-"]
   [class^="grid-"]
diff --git a/styl/vendor/flexbox-stylus b/styl/vendor/flexbox-stylus
new file mode 160000
index 0000000..b060889
--- /dev/null
+++ b/styl/vendor/flexbox-stylus
@@ -0,0 +1 @@
+Subproject commit b060889b8100e9f2d69ffc69b4da368d1a40f297

From c330c7f704f0a11c57a30ca6d770d33500ecedd7 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Thu, 9 Mar 2017 12:00:22 +0100
Subject: [PATCH 4/6] add mixin flex box and

comp blackberry in flexbox-stylus
---
 styl/grids/_grillade.styl  | 12 ++++--------
 styl/vendor/flexbox-stylus |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
index bdd4c6f..a8191ee 100644
--- a/styl/grids/_grillade.styl
+++ b/styl/grids/_grillade.styl
@@ -12,11 +12,9 @@ iefix = 0.01px
 @media (min-width: tiny + 1)
   [class*=" grid-"]
   [class^="grid-"]
-    displayFlex()
-    box-orient(horizontal)
-    -webkit-box-direction: normal
-    flex-direction: row
-    flex-wrap: wrap
+    flexbox(flex)
+    flex-direction(row)
+    flex-wrap(wrap)
     & > *
       box-sizing: border-box
       min-width: 0
@@ -77,9 +75,7 @@ grid(grid-number = 1, own-gutter = 0)
   order 1
 
 [class*="grid-"][class*="--reverse"]
-  -webkit-box-orient: horizontal
-  -webkit-box-direction: reverse
-  flex-direction row-reverse
+  flex-direction(row-reverse)
 
 @media (min-width: tiny + 1)
   flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
diff --git a/styl/vendor/flexbox-stylus b/styl/vendor/flexbox-stylus
index b060889..f6b3c6a 160000
--- a/styl/vendor/flexbox-stylus
+++ b/styl/vendor/flexbox-stylus
@@ -1 +1 @@
-Subproject commit b060889b8100e9f2d69ffc69b4da368d1a40f297
+Subproject commit f6b3c6ab21a597b721011d14ba33f0f0cd92b7b1

From 4bccce7af6e4b19840032d7ac02a15fc3c945c06 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Thu, 9 Mar 2017 14:21:09 +0100
Subject: [PATCH 5/6] add task gulp

---
 css/stylus/knacss-unminified.css | 1893 ++++++++++++++++++++++++++++++
 css/stylus/knacss.css            |    1 +
 gulpfile.js                      |   17 +
 package.json                     |    9 +-
 styl/config/_mixins.styl         |   19 -
 styl/grids/_grillade.styl        |   16 +-
 styl/utilities/_layout.styl      |   12 +-
 7 files changed, 1930 insertions(+), 37 deletions(-)
 create mode 100644 css/stylus/knacss-unminified.css
 create mode 100644 css/stylus/knacss.css

diff --git a/css/stylus/knacss-unminified.css b/css/stylus/knacss-unminified.css
new file mode 100644
index 0000000..7c75115
--- /dev/null
+++ b/css/stylus/knacss-unminified.css
@@ -0,0 +1,1893 @@
+/*
+* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
+* Licence WTFPL http://www.wtfpl.net/
+*/
+/* ----------------------------- */
+/* ==Table Of Content            */
+/* ----------------------------- */
+/* 1- Normalize (basic reset) */
+/* 2- Base (basic styles) */
+/* 3- Print (print quick reset) */
+/* 4- Stylings (minor stylings) */
+/* 5- Misc (skip links, hyphens) */
+/* 6- Tables (data tables consistency) */
+/* 7- Forms (forms consistency) */
+/* 8- Media object */
+/* 9- Autogrid object */
+/* 10- Global Layout (alignment, modules, positionning) */
+/* 11- Helpers (width and spacers helpers) */
+/* (12- WordPress reset (disabled by default)) */
+/* 13- Responsive (Responsive Web Design helpers) */
+/* 14- Grid Layout (grillade) */
+/* ---------------------------------- */
+/* ==Normalize (basic reset)          */
+/* ---------------------------------- */
+/* normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+/* 1 */
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+progress {
+  vertical-align: baseline;
+}
+template,
+[hidden] {
+  display: none;
+}
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+a:active,
+a:hover {
+  outline-width: 0;
+}
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+b,
+strong {
+  font-weight: inherit;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+dfn {
+  font-style: italic;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+img {
+  border-style: none;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+optgroup {
+  font-weight: bold;
+}
+button,
+input {
+/* 1 */
+  overflow: visible;
+}
+button,
+select {
+/* 1 */
+  text-transform: none;
+}
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+html {
+/* set base font-size to equiv "10px", which is adapted to rem unit */
+  font-size: 62.5%;
+/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
+/* thanks to @guardian, @victorbritopro and @eQRoeil */
+  font-size: calc(1em * 0.625);
+}
+body {
+  font-size: 1.6rem;
+  background-color: #fff;
+  color: #000;
+  font-family: sans-serif;
+  line-height: 1.5;
+}
+a {
+  color: #333;
+}
+a:focus,
+a:hover,
+a:active {
+  color: #000;
+}
+ul,
+ol {
+  padding-left: 2em;
+}
+img {
+  vertical-align: middle;
+}
+blockquote,
+figure {
+  margin-left: 0;
+  margin-right: 0;
+}
+p,
+.p-like,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption,
+details,
+figure {
+  margin-top: 0.75em;
+  margin-bottom: 0;
+  line-height: 1.5;
+}
+h1 .h1-like {
+  font-size: 3.2rem;
+}
+h2 .h2-like {
+  font-size: 2.8rem;
+}
+h3 .h3-like {
+  font-size: 2.4rem;
+}
+h4 .h4-like {
+  font-size: 2rem;
+}
+h5 .h5-like {
+  font-size: 1.8rem;
+}
+h6 .h6-like {
+  font-size: 1.6rem;
+}
+.smaller {
+  font-size: 0.6em;
+}
+.small {
+  font-size: 0.8em;
+}
+.big {
+  font-size: 1.2em;
+}
+.bigger {
+  font-size: 1.5em;
+}
+.biggest {
+  font-size: 2em;
+}
+code,
+pre,
+samp,
+kbd {
+/* IE fix */
+  white-space: pre-line;
+  white-space: pre-wrap;
+  font-family: consolas, courier, monospace;
+  line-height: normal;
+}
+em,
+.italic,
+address,
+cite,
+i,
+var {
+  font-style: italic;
+}
+p:first-child,
+.p-like:first-child,
+ul:first-child,
+ol:first-child,
+dl:first-child,
+blockquote:first-child,
+pre:first-child,
+h1:first-child,
+.h1-like:first-child,
+h2:first-child,
+.h2-like:first-child,
+h3:first-child,
+.h3-like:first-child,
+h4:first-child,
+.h4-like:first-child,
+h5:first-child,
+.h5-like:first-child,
+h6:first-child,
+.h6-like:first-child {
+  margin-top: 0;
+}
+li p,
+li .p-like,
+li ul,
+li ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+video,
+svg {
+  max-width: 100%;
+}
+img {
+  height: auto;
+}
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  body {
+    width: auto;
+    margin: auto;
+    font-family: serif;
+    font-size: 12pt;
+  }
+  .p-like,
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  h4,
+  .h4-like,
+  h5,
+  .h5-like,
+  h6,
+  .h6-like,
+  blockquote,
+  ul,
+  ol {
+    color: #000;
+    margin: auto;
+  }
+  .print {
+    display: block;
+  }
+  .no-print {
+    display: none;
+  }
+  .p-like,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+  blockquote,
+  ul,
+  ol {
+    page-break-inside: avoid;
+  }
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  caption {
+    page-break-after: avoid;
+  }
+  a {
+    color: #000;
+  }
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after {
+    content: "";
+  }
+}
+code,
+kbd,
+mark {
+  border-radius: 2px;
+}
+kbd {
+  padding: 0 2px;
+  border: 1px solid #999;
+}
+code {
+  padding: 2px 4px;
+  background: rgba(0,0,0,0.04);
+  color: #b11;
+}
+pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+}
+mark {
+  padding: 2px 4px;
+}
+sup,
+sub {
+  vertical-align: 0;
+}
+sup {
+  bottom: 1ex;
+}
+sub {
+  top: 0.5ex;
+}
+blockquote {
+  position: relative;
+  padding-left: 3em;
+  min-height: 2em;
+}
+blockquote::before {
+  content: "\201C";
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: georgia, serif;
+  font-size: 5em;
+  height: 0.4em;
+  line-height: 0.9;
+  color: rgba(0,0,0,0.3);
+}
+blockquote > footer {
+  margin-top: 0.75em;
+  font-size: 0.9em;
+  color: rgba(0,0,0,0.7);
+}
+blockquote > footer::before {
+  content: "\2014 \0020";
+}
+q {
+  font-style: normal;
+}
+q,
+.q {
+  quotes: "“\00a0" "\00a0”";
+}
+q:lang(fr),
+.q:lang(fr) {
+  quotes: "«\00a0" "\00a0»";
+}
+hr {
+  display: block;
+  clear: both;
+  height: 1px;
+  margin: 1em 0 2em;
+  padding: 0;
+  border: 0;
+  color: #ccc;
+  background-color: #ccc;
+}
+table,
+.table {
+  border: 1px solid #ccc;
+}
+caption {
+  padding: 1rem;
+  color: #555;
+  font-style: italic;
+}
+td,
+th {
+  padding: 0.3em 0.8em;
+  border: 1px #aaa dotted;
+  text-align: left;
+}
+.skip-links {
+  position: absolute;
+}
+.skip-links a {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0.5em;
+  background: #000;
+  color: #fff;
+  text-decoration: none;
+}
+.skip-links a:focus {
+  position: static;
+  overflow: visible;
+  clip: auto;
+}
+@media (max-width: 543px) {
+  div,
+  textarea,
+  table,
+  td,
+  th,
+  code,
+  pre,
+  samp {
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+        -ms-hyphens: auto;
+            hyphens: auto;
+  }
+}
+@media (max-width: 543px) {
+  .no-wrapping {
+    word-wrap: normal;
+    -webkit-hyphens: manual;
+        -ms-hyphens: manual;
+            hyphens: manual;
+  }
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  img[src$=".svg"] {
+    width: 100%;
+  }
+}
+table,
+.table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+  margin-bottom: 2rem;
+}
+.table {
+  display: table;
+}
+#recaptcha_table,
+.table-auto {
+  table-layout: auto;
+}
+td,
+th {
+  vertical-align: top;
+  min-width: 2rem;
+  cursor: default;
+}
+.btn {
+  display: inline-block;
+}
+form,
+fieldset {
+  border: none;
+}
+input,
+button,
+select,
+label,
+.btn {
+  font-family: inherit;
+  font-size: inherit;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: #000;
+}
+label {
+  vertical-align: middle;
+  cursor: pointer;
+}
+legend {
+  border: 0;
+  white-space: normal;
+}
+textarea {
+  min-height: 5em;
+  vertical-align: top;
+  font-family: inherit;
+  font-size: inherit;
+  resize: vertical;
+}
+select {
+  -webkit-appearance: menulist-button;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+::-webkit-input-placeholder {
+  color: #777;
+}
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #777;
+}
+.btn:focus,
+input[type="button"]:focus,
+button:focus {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+button.unstyled,
+input[type="button"].unstyled,
+input[type="submit"].unstyled,
+input[type="reset"].unstyled {
+  padding: 0;
+  border: none;
+  line-height: 1;
+  text-align: left;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+button.unstyled:focus,
+input[type="button"].unstyled:focus,
+input[type="submit"].unstyled:focus,
+input[type="reset"].unstyled:focus {
+  box-shadow: none;
+  outline: none;
+}
+@media (min-width: 544px) {
+  .o-media {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+  .o-media-content {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    min-width: 0 /* avoid min-width:auto */;
+  }
+}
+@media (min-width: 544px) {
+  .o-media--reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+  }
+  .o-media-figure--center {
+    -ms-flex-item-align: center;
+        -ms-grid-row-align: center;
+        align-self: center;
+  }
+}
+@media (min-width: 544px) {
+  [class^="autogrid"],
+  [class*=" autogrid"] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  [class^="autogrid"] > *,
+  [class*=" autogrid"] > * {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    min-width: 0 /* avoid min-width:auto */;
+  }
+}
+@media (min-width: 544px) {
+  .has-gutter > *:not(:first-child) {
+    margin-left: 1rem;
+  }
+  [class*="--reverse"] {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+  }
+}
+.mod,
+.bfc {
+  overflow: hidden;
+}
+.clear {
+  clear: both;
+}
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+  border-collapse: collapse;
+}
+.left {
+  margin-right: auto;
+}
+.right {
+  margin-left: auto;
+}
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.txtleft {
+  text-align: left;
+}
+.txtright {
+  text-align: right;
+}
+.txtcenter {
+  text-align: center;
+}
+.fl {
+  float: left;
+}
+img.fl {
+  margin-right: 1rem;
+}
+.fr {
+  float: right;
+}
+img.fr {
+  margin-left: 1rem;
+}
+img.fl,
+img.fr {
+  margin-bottom: 0.5rem;
+}
+.inbl {
+  display: inline-block;
+  vertical-align: top;
+}
+[class*="flex-container"],
+.flex-container {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.flex-container-h {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+.flex-container-v {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.flex-item-fluid {
+  -ms-flex: 1;
+  -webkit-box-flex: 1;
+          flex: 1;
+  min-width: 0;
+}
+.flex-item-first,
+.item-first {
+  -ms-flex-order: -1;
+  -webkit-box-ordinal-group: 0;
+          order: -1;
+}
+.flex-item-medium,
+.item-medium {
+  -ms-flex-order: 0;
+  -webkit-box-ordinal-group: 1;
+          order: 0;
+}
+.flex-item-last,
+.item-last {
+  -ms-flex-order: 1;
+  -webkit-box-ordinal-group: 2;
+          order: 1;
+}
+.flex-item-center,
+.item-center {
+  margin: auto;
+}
+.is-hidden,
+[hidden] {
+  display: none;
+}
+.visually-hidden {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+.is-disabled,
+[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+  -webkit-filter: grayscale(1);
+          filter: grayscale(1);
+}
+ul.is-unstyled,
+ul.unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+.w10 {
+  width: 10%;
+}
+.w20 {
+  width: 20%;
+}
+.w25 {
+  width: 25%;
+}
+.w30 {
+  width: 30%;
+}
+.w33 {
+  width: 33.3333%;
+}
+.w40 {
+  width: 40%;
+}
+.w50 {
+  width: 50%;
+}
+.w60 {
+  width: 60%;
+}
+.w66 {
+  width: 66.6666%;
+}
+.w70 {
+  width: 70%;
+}
+.w75 {
+  width: 75%;
+}
+.w80 {
+  width: 80%;
+}
+.w90 {
+  width: 90%;
+}
+.w100 {
+  width: 100%;
+}
+.w50p {
+  width: 50px;
+}
+.w100p {
+  width: 100px;
+}
+.w150p {
+  width: 150px;
+}
+.w200p {
+  width: 200px;
+}
+.w300p {
+  width: 300px;
+}
+@media (min-width: 401px) {
+  .w400p {
+    width: 400px;
+  }
+  .w500p {
+    width: 500px;
+  }
+  .w600p {
+    width: 600px;
+  }
+}
+@media (min-width: 701px) {
+  .w700p {
+    width: 700px;
+  }
+  .w800p {
+    width: 800px;
+  }
+}
+@media (min-width: 961px) {
+  .w960p {
+    width: 960px;
+  }
+  .mw960p {
+    max-width: 960px;
+  }
+  .w1140p {
+    width: 1140px;
+  }
+  .mw1140p {
+    max-width: 1140px;
+  }
+}
+.wauto {
+  width: auto;
+}
+.man,
+.ma0 {
+  margin: 0;
+}
+.pan,
+.pa0 {
+  padding: 0;
+}
+.mas {
+  margin: 1rem;
+}
+.mam {
+  margin: 2rem;
+}
+.mal {
+  margin: 4rem;
+}
+.pas {
+  padding: 1rem;
+}
+.pam {
+  padding: 2rem;
+}
+.pal {
+  padding: 4rem;
+}
+.mtn,
+.mt0 {
+  margin-top: 0;
+}
+.mts {
+  margin-top: 1rem;
+}
+.mtm {
+  margin-top: 2rem;
+}
+.mtl {
+  margin-top: 4rem;
+}
+.mrn,
+.mr0 {
+  margin-right: 0;
+}
+.mrs {
+  margin-right: 1rem;
+}
+.mrm {
+  margin-right: 2rem;
+}
+.mrl {
+  margin-right: 4rem;
+}
+.mbn,
+.mb0 {
+  margin-bottom: 0;
+}
+.mbs {
+  margin-bottom: 1rem;
+}
+.mbm {
+  margin-bottom: 2rem;
+}
+.mbl {
+  margin-bottom: 4rem;
+}
+.mln,
+.ml0 {
+  margin-left: 0;
+}
+.mls {
+  margin-left: 1rem;
+}
+.mlm {
+  margin-left: 2rem;
+}
+.mll {
+  margin-left: 4rem;
+}
+.mauto {
+  margin: auto;
+}
+.mtauto {
+  margin-top: auto;
+}
+.mrauto {
+  margin-right: auto;
+}
+.mbauto {
+  margin-bottom: auto;
+}
+.mlauto {
+  margin-left: auto;
+}
+.ptn,
+.pt0 {
+  padding-top: 0;
+}
+.pts {
+  padding-top: 1rem;
+}
+.ptm {
+  padding-top: 2rem;
+}
+.ptl {
+  padding-top: 4rem;
+}
+.prn,
+.pr0 {
+  padding-right: 0;
+}
+.prs {
+  padding-right: 1rem;
+}
+.prm {
+  padding-right: 2rem;
+}
+.prl {
+  padding-right: 4rem;
+}
+.pbn,
+.pb0 {
+  padding-bottom: 0;
+}
+.pbs {
+  padding-bottom: 1rem;
+}
+.pbm {
+  padding-bottom: 2rem;
+}
+.pbl {
+  padding-bottom: 4rem;
+}
+.pln,
+.pl0 {
+  padding-left: 0;
+}
+.pls {
+  padding-left: 1rem;
+}
+.plm {
+  padding-left: 2rem;
+}
+.pll {
+  padding-left: 4rem;
+}
+@media (min-width: 992px) {
+  .large-hidden {
+    display: none !important;
+  }
+  .large-visible {
+    display: block !important;
+  }
+  .large-no-float {
+    float: none;
+  }
+  .large-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+  .large-w25 {
+    width: 25% !important;
+  }
+  .large-w33 {
+    width: 33.333333% !important;
+  }
+  .large-w50 {
+    width: 50% !important;
+  }
+  .large-w66 {
+    width: 66.666666% !important;
+  }
+  .large-w75 {
+    width: 75% !important;
+  }
+  .large-w100,
+  .large-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+  .large-man,
+  .large-ma0 {
+    margin: 0 !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 1199px) {
+  .medium-hidden {
+    display: none !important;
+  }
+  .medium-visible {
+    display: block !important;
+  }
+  .medium-no-float {
+    float: none;
+  }
+  .medium-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+  .medium-w25 {
+    width: 25% !important;
+  }
+  .medium-w33 {
+    width: 33.333333% !important;
+  }
+  .medium-w50 {
+    width: 50% !important;
+  }
+  .medium-w66 {
+    width: 66.666666% !important;
+  }
+  .medium-w75 {
+    width: 75% !important;
+  }
+  .medium-w100,
+  .medium-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+  .medium-man,
+  .medium-ma0 {
+    margin: 0 !important;
+  }
+}
+@media (min-width: 544px) and (max-width: 767px) {
+  .small-hidden {
+    display: none !important;
+  }
+  .small-visible {
+    display: block !important;
+  }
+  .small-no-float {
+    float: none;
+  }
+  .small-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+  .small-w25 {
+    width: 25% !important;
+  }
+  .small-w33 {
+    width: 33.333333% !important;
+  }
+  .small-w50 {
+    width: 50% !important;
+  }
+  .small-w66 {
+    width: 66.666666% !important;
+  }
+  .small-w75 {
+    width: 75% !important;
+  }
+  .small-w100,
+  .small-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+  .small-man,
+  .small-ma0 {
+    margin: 0 !important;
+  }
+  .small-pan,
+  .small-pa0 {
+    padding: 0 !important;
+  }
+}
+@media (max-width: 543px) {
+  .mod,
+  .col,
+  fieldset {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+  .flex-container {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+  .tiny-hidden {
+    display: none !important;
+  }
+  .tiny-visible {
+    display: block !important;
+  }
+  .tiny-no-float {
+    float: none;
+  }
+  .tiny-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+  .tiny-w25 {
+    width: 25% !important;
+  }
+  .tiny-w33 {
+    width: 33.333333% !important;
+  }
+  .tiny-w50 {
+    width: 50% !important;
+  }
+  .tiny-w66 {
+    width: 66.666666% !important;
+  }
+  .tiny-w75 {
+    width: 75% !important;
+  }
+  .tiny-w100,
+  .tiny-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+  .tiny-man,
+  .tiny-ma0 {
+    margin: 0 !important;
+  }
+  .tiny-pan,
+  .tiny-pa0 {
+    padding: 0 !important;
+  }
+}
+@media (min-width: 544px) {
+  [class*=" grid-"],
+  [class^="grid-"] {
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+  }
+  [class*=" grid-"] > *,
+  [class^="grid-"] > * {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+  }
+}
+@media (min-width: 544px) {
+  .grid,
+  .grid--reverse {
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: flex;
+  }
+  .grid > *,
+  .grid--reverse > * {
+    -ms-flex: 1 1 0%;
+    -webkit-box-flex: 1;
+            flex: 1 1 0%;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+  }
+  .grid.has-gutter > * + *,
+  .grid--reverse.has-gutter > * + * {
+    margin-left: calc(1rem - 0.01px);
+  }
+  .grid.has-gutter-l > * + *,
+  .grid--reverse.has-gutter-l > * + * {
+    margin-left: calc(2rem - 0.01px);
+  }
+  .grid.has-gutter-xl > * + *,
+  .grid--reverse.has-gutter-xl > * + * {
+    margin-left: calc(4rem - 0.01px);
+  }
+}
+@media (min-width: 544px) {
+  [class*="grid-2"] > * {
+    width: calc(100% / 2 - 0.01px);
+  }
+  [class*="grid-2"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-2"].has-gutter > * {
+    width: calc(100% / 2 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-2"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-2"].has-gutter-l > * {
+    width: calc(100% / 2 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-2"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-2"].has-gutter-xl > * {
+    width: calc(100% / 2 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-3"] > * {
+    width: calc(100% / 3 - 0.01px);
+  }
+  [class*="grid-3"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-3"].has-gutter > * {
+    width: calc(100% / 3 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-3"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-3"].has-gutter-l > * {
+    width: calc(100% / 3 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-3"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-3"].has-gutter-xl > * {
+    width: calc(100% / 3 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-4"] > * {
+    width: calc(100% / 4 - 0.01px);
+  }
+  [class*="grid-4"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-4"].has-gutter > * {
+    width: calc(100% / 4 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-4"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-4"].has-gutter-l > * {
+    width: calc(100% / 4 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-4"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-4"].has-gutter-xl > * {
+    width: calc(100% / 4 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-5"] > * {
+    width: calc(100% / 5 - 0.01px);
+  }
+  [class*="grid-5"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-5"].has-gutter > * {
+    width: calc(100% / 5 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-5"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-5"].has-gutter-l > * {
+    width: calc(100% / 5 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-5"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-5"].has-gutter-xl > * {
+    width: calc(100% / 5 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-6"] > * {
+    width: calc(100% / 6 - 0.01px);
+  }
+  [class*="grid-6"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-6"].has-gutter > * {
+    width: calc(100% / 6 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-6"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-6"].has-gutter-l > * {
+    width: calc(100% / 6 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-6"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-6"].has-gutter-xl > * {
+    width: calc(100% / 6 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-7"] > * {
+    width: calc(100% / 7 - 0.01px);
+  }
+  [class*="grid-7"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-7"].has-gutter > * {
+    width: calc(100% / 7 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-7"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-7"].has-gutter-l > * {
+    width: calc(100% / 7 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-7"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-7"].has-gutter-xl > * {
+    width: calc(100% / 7 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-8"] > * {
+    width: calc(100% / 8 - 0.01px);
+  }
+  [class*="grid-8"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-8"].has-gutter > * {
+    width: calc(100% / 8 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-8"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-8"].has-gutter-l > * {
+    width: calc(100% / 8 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-8"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-8"].has-gutter-xl > * {
+    width: calc(100% / 8 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-9"] > * {
+    width: calc(100% / 9 - 0.01px);
+  }
+  [class*="grid-9"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-9"].has-gutter > * {
+    width: calc(100% / 9 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-9"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-9"].has-gutter-l > * {
+    width: calc(100% / 9 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-9"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-9"].has-gutter-xl > * {
+    width: calc(100% / 9 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-10"] > * {
+    width: calc(100% / 10 - 0.01px);
+  }
+  [class*="grid-10"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-10"].has-gutter > * {
+    width: calc(100% / 10 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-10"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-10"].has-gutter-l > * {
+    width: calc(100% / 10 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-10"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-10"].has-gutter-xl > * {
+    width: calc(100% / 10 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-11"] > * {
+    width: calc(100% / 11 - 0.01px);
+  }
+  [class*="grid-11"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-11"].has-gutter > * {
+    width: calc(100% / 11 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-11"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-11"].has-gutter-l > * {
+    width: calc(100% / 11 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-11"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-11"].has-gutter-xl > * {
+    width: calc(100% / 11 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  [class*="grid-12"] > * {
+    width: calc(100% / 12 - 0.01px);
+  }
+  [class*="grid-12"].has-gutter {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  [class*="grid-12"].has-gutter > * {
+    width: calc(100% / 12 - 1rem - 0.01px);
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+  [class*="grid-12"].has-gutter-l {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  [class*="grid-12"].has-gutter-l > * {
+    width: calc(100% / 12 - 2rem - 0.01px);
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  [class*="grid-12"].has-gutter-xl {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  [class*="grid-12"].has-gutter-xl > * {
+    width: calc(100% / 12 - 4rem - 0.01px);
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+}
+.push {
+  margin-left: auto !important;
+}
+.pull {
+  margin-right: auto !important;
+}
+.item-first {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  -ms-flex-order: -1;
+  order: -1;
+}
+.item-last {
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+}
+[class*="grid-"][class*="--reverse"] {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+@media (min-width: 544px) {
+  .full {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 1 - 0.01px);
+  }
+  .full .has-gutter .full {
+    width: calc(100% / 1 - 1rem - 0.01px);
+  }
+  .full .has-gutter-l .full {
+    width: calc(100% / 1 - 2rem - 0.01px);
+  }
+  .full .has-gutter-xl .full {
+    width: calc(100% / 1 - 4rem - 0.01px);
+  }
+  .one-half {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 2 - 0.01px);
+  }
+  .one-half .has-gutter .one-half {
+    width: calc(100% / 2 - 1rem - 0.01px);
+  }
+  .one-half .has-gutter-l .one-half {
+    width: calc(100% / 2 - 2rem - 0.01px);
+  }
+  .one-half .has-gutter-xl .one-half {
+    width: calc(100% / 2 - 4rem - 0.01px);
+  }
+  .one-third {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 3 - 0.01px);
+  }
+  .one-third .has-gutter .one-third {
+    width: calc(100% / 3 - 1rem - 0.01px);
+  }
+  .one-third .has-gutter-l .one-third {
+    width: calc(100% / 3 - 2rem - 0.01px);
+  }
+  .one-third .has-gutter-xl .one-third {
+    width: calc(100% / 3 - 4rem - 0.01px);
+  }
+  .one-quarter {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 4 - 0.01px);
+  }
+  .one-quarter .has-gutter .one-quarter {
+    width: calc(100% / 4 - 1rem - 0.01px);
+  }
+  .one-quarter .has-gutter-l .one-quarter {
+    width: calc(100% / 4 - 2rem - 0.01px);
+  }
+  .one-quarter .has-gutter-xl .one-quarter {
+    width: calc(100% / 4 - 4rem - 0.01px);
+  }
+  .one-fifth {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 5 - 0.01px);
+  }
+  .one-fifth .has-gutter .one-fifth {
+    width: calc(100% / 5 - 1rem - 0.01px);
+  }
+  .one-fifth .has-gutter-l .one-fifth {
+    width: calc(100% / 5 - 2rem - 0.01px);
+  }
+  .one-fifth .has-gutter-xl .one-fifth {
+    width: calc(100% / 5 - 4rem - 0.01px);
+  }
+  .one-sixth {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 6 - 0.01px);
+  }
+  .one-sixth .has-gutter .one-sixth {
+    width: calc(100% / 6 - 1rem - 0.01px);
+  }
+  .one-sixth .has-gutter-l .one-sixth {
+    width: calc(100% / 6 - 2rem - 0.01px);
+  }
+  .one-sixth .has-gutter-xl .one-sixth {
+    width: calc(100% / 6 - 4rem - 0.01px);
+  }
+  .two-thirds {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 6 - 0.01px);
+  }
+  .two-thirds .has-gutter .two-thirds {
+    width: calc(100% / 6 - 1rem - 0.01px);
+  }
+  .two-thirds .has-gutter-l .two-thirds {
+    width: calc(100% / 6 - 2rem - 0.01px);
+  }
+  .two-thirds .has-gutter-xl .two-thirds {
+    width: calc(100% / 6 - 4rem - 0.01px);
+  }
+  .three-quarters {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 12 - 0.01px);
+  }
+  .three-quarters .has-gutter .three-quarters {
+    width: calc(100% / 12 - 1rem - 0.01px);
+  }
+  .three-quarters .has-gutter-l .three-quarters {
+    width: calc(100% / 12 - 2rem - 0.01px);
+  }
+  .three-quarters .has-gutter-xl .three-quarters {
+    width: calc(100% / 12 - 4rem - 0.01px);
+  }
+  .five-sixths {
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+            flex: 0 0 auto;
+    width: calc(100% / 30 - 0.01px);
+  }
+  .five-sixths .has-gutter .five-sixths {
+    width: calc(100% / 30 - 1rem - 0.01px);
+  }
+  .five-sixths .has-gutter-l .five-sixths {
+    width: calc(100% / 30 - 2rem - 0.01px);
+  }
+  .five-sixths .has-gutter-xl .five-sixths {
+    width: calc(100% / 30 - 4rem - 0.01px);
+  }
+}
+@media (min-width: 544px) and (max-width: 991px) {
+  [class*="-small-1"] > * {
+    width: calc(100% / 1 - 0.01px);
+  }
+  [class*="-small-1"] > *.has-gutter > * {
+    width: calc(100% / 1 - 1rem - 0.01px);
+  }
+  [class*="-small-1"] > *.has-gutter-l > * {
+    width: calc(100% / 1 - 2rem - 0.01px);
+  }
+  [class*="-small-1"] > *.has-gutter-xl > * {
+    width: calc(100% / 1 - 4rem - 0.01px);
+  }
+  [class*="-small-2"] > * {
+    width: calc(100% / 2 - 0.01px);
+  }
+  [class*="-small-2"] > *.has-gutter > * {
+    width: calc(100% / 2 - 1rem - 0.01px);
+  }
+  [class*="-small-2"] > *.has-gutter-l > * {
+    width: calc(100% / 2 - 2rem - 0.01px);
+  }
+  [class*="-small-2"] > *.has-gutter-xl > * {
+    width: calc(100% / 2 - 4rem - 0.01px);
+  }
+  [class*="-small-3"] > * {
+    width: calc(100% / 3 - 0.01px);
+  }
+  [class*="-small-3"] > *.has-gutter > * {
+    width: calc(100% / 3 - 1rem - 0.01px);
+  }
+  [class*="-small-3"] > *.has-gutter-l > * {
+    width: calc(100% / 3 - 2rem - 0.01px);
+  }
+  [class*="-small-3"] > *.has-gutter-xl > * {
+    width: calc(100% / 3 - 4rem - 0.01px);
+  }
+  [class*="-small-4"] > * {
+    width: calc(100% / 4 - 0.01px);
+  }
+  [class*="-small-4"] > *.has-gutter > * {
+    width: calc(100% / 4 - 1rem - 0.01px);
+  }
+  [class*="-small-4"] > *.has-gutter-l > * {
+    width: calc(100% / 4 - 2rem - 0.01px);
+  }
+  [class*="-small-4"] > *.has-gutter-xl > * {
+    width: calc(100% / 4 - 4rem - 0.01px);
+  }
+}
+/* ----------------------------- */
+/* ==Own stylesheet              */
+/* ----------------------------- */
+/* Here should go your own CSS styles */
diff --git a/css/stylus/knacss.css b/css/stylus/knacss.css
new file mode 100644
index 0000000..ed14b28
--- /dev/null
+++ b/css/stylus/knacss.css
@@ -0,0 +1 @@
+html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.table,table,td,th{vertical-align:top}.clear,hr{clear:both}.txtleft,td,th{text-align:left}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle;height:auto}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}body{margin:0;font-size:1.6rem;background-color:#fff;font-family:sans-serif;line-height:1.5}ol,ul{padding-left:2em}blockquote,figure{margin-left:0;margin-right:0}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}h1 .h1-like{font-size:3.2rem}h2 .h2-like{font-size:2.8rem}h3 .h3-like{font-size:2.4rem}h4 .h4-like{font-size:2rem}h5 .h5-like{font-size:1.8rem}h6 .h6-like{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h2,h3{page-break-after:avoid}a{color:#000}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em;min-height:2em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;height:.4em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc;width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:2rem}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;min-width:2rem;cursor:default}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){img[src$=".svg"]{width:100%}}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}.inbl,textarea{vertical-align:top}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}@media (min-width:544px){.o-media{display:flex;align-items:flex-start}.o-media-content{flex:1;min-width:0}.o-media--reverse{flex-direction:row-reverse}.o-media-figure--center{align-self:center}[class*=" autogrid"],[class^=autogrid]{display:flex}[class*=" autogrid"]>*,[class^=autogrid]>*{flex:1;min-width:0}.has-gutter>:not(:first-child){margin-left:1rem}[class*="--reverse"]{flex-direction:row-reverse}}.center,.right{margin-left:auto}.bfc,.mod{overflow:hidden}.clearfix::after{content:"";display:table;clear:both;border-collapse:collapse}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.item-first{-ms-flex-order:-1;-webkit-order:-1;order:-1}.flex-item-medium,.item-medium{-ms-flex-order:0;-webkit-order:0;order:0}.flex-item-last,.item-last{-ms-flex-order:1;-webkit-order:1;order:1}.flex-item-center,.item-center{margin:auto}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}@media (min-width:401px){.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}}@media (min-width:701px){.w700p{width:700px}.w800p{width:800px}}@media (min-width:961px){.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:992px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.333333%!important}.large-w50{width:50%!important}.large-w66{width:66.666666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:768px) and (max-width:1199px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.333333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.666666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:544px) and (max-width:767px){.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-w25{width:25%!important}.small-w33{width:33.333333%!important}.small-w50{width:50%!important}.small-w66{width:66.666666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:543px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;hyphens:auto}.no-wrapping{word-wrap:normal;hyphens:manual}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{display:block!important;float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-direction:column;-ms-flex-direction:column;flex-direction:column}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-w25{width:25%!important}.tiny-w33{width:33.333333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.666666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media (min-width:544px){[class*=" grid-"],[class^=grid-]{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{box-sizing:border-box;min-width:0;min-height:0}.grid--reverse>*,.grid>*{-webkit-flex:1;-ms-flex:1;flex:1;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}[class*=grid-2]>*>*{width:calc(100% / 2 - .01px)}[class*=grid-2]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2]>.has-gutter>*{width:calc(100% / 2 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2]>.has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2]>.has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*>*{width:calc(100% / 3 - .01px)}[class*=grid-3]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3]>.has-gutter>*{width:calc(100% / 3 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3]>.has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3]>.has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*>*{width:calc(100% / 4 - .01px)}[class*=grid-4]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4]>.has-gutter>*{width:calc(100% / 4 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4]>.has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4]>.has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*>*{width:calc(100% / 5 - .01px)}[class*=grid-5]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5]>.has-gutter>*{width:calc(100% / 5 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5]>.has-gutter-l>*{width:calc(100% / 5 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5]>.has-gutter-xl>*{width:calc(100% / 5 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*>*{width:calc(100% / 6 - .01px)}[class*=grid-6]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6]>.has-gutter>*{width:calc(100% / 6 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6]>.has-gutter-l>*{width:calc(100% / 6 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6]>.has-gutter-xl>*{width:calc(100% / 6 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*>*{width:calc(100% / 7 - .01px)}[class*=grid-7]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7]>.has-gutter>*{width:calc(100% / 7 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7]>.has-gutter-l>*{width:calc(100% / 7 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7]>.has-gutter-xl>*{width:calc(100% / 7 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*>*{width:calc(100% / 8 - .01px)}[class*=grid-8]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8]>.has-gutter>*{width:calc(100% / 8 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8]>.has-gutter-l>*{width:calc(100% / 8 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8]>.has-gutter-xl>*{width:calc(100% / 8 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*>*{width:calc(100% / 9 - .01px)}[class*=grid-9]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9]>.has-gutter>*{width:calc(100% / 9 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9]>.has-gutter-l>*{width:calc(100% / 9 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9]>.has-gutter-xl>*{width:calc(100% / 9 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*>*{width:calc(100% / 10 - .01px)}[class*=grid-10]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10]>.has-gutter>*{width:calc(100% / 10 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10]>.has-gutter-l>*{width:calc(100% / 10 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10]>.has-gutter-xl>*{width:calc(100% / 10 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*>*{width:calc(100% / 11 - .01px)}[class*=grid-11]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11]>.has-gutter>*{width:calc(100% / 11 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11]>.has-gutter-l>*{width:calc(100% / 11 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11]>.has-gutter-xl>*{width:calc(100% / 11 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*>*{width:calc(100% / 12 - .01px)}[class*=grid-12]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12]>.has-gutter>*{width:calc(100% / 12 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12]>.has-gutter-l>*{width:calc(100% / 12 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12]>.has-gutter-xl>*{width:calc(100% / 12 - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;-webkit-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;-webkit-order:1;order:1}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-moz-box-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:544px){.full{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 1 - .01px)}.full .has-gutter .full{width:calc(100% / 1 - 1rem - .01px)}.full .has-gutter-l .full{width:calc(100% / 1 - 2rem - .01px)}.full .has-gutter-xl .full{width:calc(100% / 1 - 4rem - .01px)}.one-half{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 2 - .01px)}.one-half .has-gutter .one-half{width:calc(100% / 2 - 1rem - .01px)}.one-half .has-gutter-l .one-half{width:calc(100% / 2 - 2rem - .01px)}.one-half .has-gutter-xl .one-half{width:calc(100% / 2 - 4rem - .01px)}.one-third{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 3 - .01px)}.one-third .has-gutter .one-third{width:calc(100% / 3 - 1rem - .01px)}.one-third .has-gutter-l .one-third{width:calc(100% / 3 - 2rem - .01px)}.one-third .has-gutter-xl .one-third{width:calc(100% / 3 - 4rem - .01px)}.one-quarter{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 4 - .01px)}.one-quarter .has-gutter .one-quarter{width:calc(100% / 4 - 1rem - .01px)}.one-quarter .has-gutter-l .one-quarter{width:calc(100% / 4 - 2rem - .01px)}.one-quarter .has-gutter-xl .one-quarter{width:calc(100% / 4 - 4rem - .01px)}.one-fifth{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 5 - .01px)}.one-fifth .has-gutter .one-fifth{width:calc(100% / 5 - 1rem - .01px)}.one-fifth .has-gutter-l .one-fifth{width:calc(100% / 5 - 2rem - .01px)}.one-fifth .has-gutter-xl .one-fifth{width:calc(100% / 5 - 4rem - .01px)}.one-sixth{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 6 - .01px)}.one-sixth .has-gutter .one-sixth{width:calc(100% / 6 - 1rem - .01px)}.one-sixth .has-gutter-l .one-sixth{width:calc(100% / 6 - 2rem - .01px)}.one-sixth .has-gutter-xl .one-sixth{width:calc(100% / 6 - 4rem - .01px)}.two-thirds{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 6 - .01px)}.two-thirds .has-gutter .two-thirds{width:calc(100% / 6 - 1rem - .01px)}.two-thirds .has-gutter-l .two-thirds{width:calc(100% / 6 - 2rem - .01px)}.two-thirds .has-gutter-xl .two-thirds{width:calc(100% / 6 - 4rem - .01px)}.three-quarters{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 12 - .01px)}.three-quarters .has-gutter .three-quarters{width:calc(100% / 12 - 1rem - .01px)}.three-quarters .has-gutter-l .three-quarters{width:calc(100% / 12 - 2rem - .01px)}.three-quarters .has-gutter-xl .three-quarters{width:calc(100% / 12 - 4rem - .01px)}.five-sixths{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 30 - .01px)}.five-sixths .has-gutter .five-sixths{width:calc(100% / 30 - 1rem - .01px)}.five-sixths .has-gutter-l .five-sixths{width:calc(100% / 30 - 2rem - .01px)}.five-sixths .has-gutter-xl .five-sixths{width:calc(100% / 30 - 4rem - .01px)}}@media (min-width:544px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% / 1 - .01px)}[class*=-small-1]>.has-gutter>*{width:calc(100% / 1 - 1rem - .01px)}[class*=-small-1]>.has-gutter-l>*{width:calc(100% / 1 - 2rem - .01px)}[class*=-small-1]>.has-gutter-xl>*{width:calc(100% / 1 - 4rem - .01px)}[class*=-small-2]>*{width:calc(100% / 2 - .01px)}[class*=-small-2]>.has-gutter>*{width:calc(100% / 2 - 1rem - .01px)}[class*=-small-2]>.has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px)}[class*=-small-2]>.has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px)}[class*=-small-3]>*{width:calc(100% / 3 - .01px)}[class*=-small-3]>.has-gutter>*{width:calc(100% / 3 - 1rem - .01px)}[class*=-small-3]>.has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px)}[class*=-small-3]>.has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px)}[class*=-small-4]>*{width:calc(100% / 4 - .01px)}[class*=-small-4]>.has-gutter>*{width:calc(100% / 4 - 1rem - .01px)}[class*=-small-4]>.has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px)}[class*=-small-4]>.has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px)}}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index c83281b..1185f5a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,6 +8,7 @@ var rename = require('gulp-rename');
 var minifycss = require('gulp-minify-css');
 // var sourcemaps = require('gulp-sourcemaps');
 var autoprefixer = require('gulp-autoprefixer');
+var stylus = require('gulp-stylus');
 
 
 // tâche CSS = compile vers knacss.css et knacss-unminified.css
@@ -36,6 +37,22 @@ gulp.task('grillade', function() {
     .pipe(gulp.dest('./css/'));
 });
 
+gulp.task('styluscss', function () {
+  return gulp.src('./styl/knacss.styl')
+    .pipe(stylus())
+    .pipe(autoprefixer())
+    .pipe(rename('knacss-unminified.css'))
+    .pipe(gulp.dest('./css/stylus/'));
+});
+
+gulp.task('styluscssmin', function () {
+  return gulp.src('./styl/knacss.styl')
+    .pipe(stylus({compress: true}))
+    .pipe(gulp.dest('./css/stylus/'))
+    .pipe(minifycss())
+    .pipe(gulp.dest('./css/stylus/'));
+});
+
 // Watcher
 gulp.task('watch', function() {
   gulp.watch(['./sass/*.scss'], ['css']);
diff --git a/package.json b/package.json
index 3e51f5f..7250eab 100644
--- a/package.json
+++ b/package.json
@@ -29,12 +29,13 @@
   "dependencies": {},
   "devDependencies": {
     "gulp": "latest",
-    "gulp-rename": "latest",
-    "gulp-sass": "latest",
+    "gulp-autoprefixer": "latest",
     "gulp-concat": "latest",
     "gulp-minify-css": "latest",
-    "gulp-autoprefixer": "latest",
-    "gulp-sourcemaps": "latest"
+    "gulp-rename": "latest",
+    "gulp-sass": "latest",
+    "gulp-sourcemaps": "latest",
+    "gulp-stylus": "^2.6.0"
   },
   "engines": {}
 }
diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl
index 7dbb788..bf1b834 100644
--- a/styl/config/_mixins.styl
+++ b/styl/config/_mixins.styl
@@ -30,22 +30,3 @@ respond-to(value)
   @media screen and string
     {block}
 */
-
-displayFlex()
-  display: -webkit-box
-  display: -ms-flexbox
-  display: flex
-
-box-orient()
-  -webkit-box-orient arguments
-
-box-direction()
-    -webkit-box-direction arguments
-
-flex-direction()
-  -ms-flex-direction arguments
-  flex-direction arguments
-
-flex-wrap()
-  -ms-flex-wrap arguments
-  flex-wrap arguments
diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
index a8191ee..368e672 100644
--- a/styl/grids/_grillade.styl
+++ b/styl/grids/_grillade.styl
@@ -25,7 +25,7 @@ iefix = 0.01px
 grid(grid-number = 1, own-gutter = 0)
   & > *
     width 'calc(100% / %s - %s)' % (grid-number iefix)
-   for key, size in grid-gutters
+  for key, size in grid-gutters
     &.has-gutter{key}
       margin-right -(size / 2)
       margin-left -(size / 2)
@@ -33,7 +33,7 @@ grid(grid-number = 1, own-gutter = 0)
         width 'calc(100% / %s - %s - %s)' % (grid-number size iefix)
         margin-right (size / 2)
         margin-left (size / 2)
-   if own-gutter != 0
+  if own-gutter != 0
     margin-right (own-gutter / 2)
     margin-left (own-gutter / 2)
 
@@ -41,9 +41,9 @@ grid(grid-number = 1, own-gutter = 0)
 @media (min-width: tiny + 1)
   .grid
   .grid--reverse
-    displayFlex()
+    flexbox(flex)
     & > *
-      flex 1 1 0%
+      flex(1 1 0%)
       box-sizing border-box
       min-width 0
       min-height 0
@@ -55,7 +55,7 @@ grid(grid-number = 1, own-gutter = 0)
 @media (min-width: tiny + 1)
   for i in 2..12
     grid-selector = 'grid-%s' % i
-    [class*={grid-selector}] > *
+    [class*=\"{grid-selector}\"]
       grid(i, 0)
 
 .push
@@ -81,17 +81,17 @@ grid(grid-number = 1, own-gutter = 0)
   flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
   for flow, divider  in flowToDivid
     .{flow}
-      flex 0 0 auto
+      flex(0 0 auto)
       width 'calc(100% / %s - %s)' % (divider iefix)
       for key, size in grid-gutters
         .has-gutter{key} .{flow}
           width 'calc(100% / %s - %s - %s)' % (divider size iefix)
 
 /* Responsive Small Breakpoint */
-@media (min-width: tiny + 1) and (max-width: small)
+@media (min-width: tiny + 1) and (max-width: medium)
   for i in 1..4
     index = '-small-%s' % i
-    [class*={index}]
+    [class*=\"{index}\"]
       & > *
         width: 'calc(100% / %s - %s)' % (i iefix)
         for key, size in grid-gutters
diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl
index 4bae1a2..1f9b4eb 100644
--- a/styl/utilities/_layout.styl
+++ b/styl/utilities/_layout.styl
@@ -1,7 +1,7 @@
 /* ----------------------------- */
 /* ==Global Layout               */
 /* ----------------------------- */
-
+@import '../vendor/flexbox-stylus/stylus/flexbox.styl'
 /* module, gains superpower "BFC" Block Formating Context */
 .mod
 .bfc
@@ -66,16 +66,16 @@ img.{kna-namespace}fr
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-[class*="{kna-namespace}flex-container"]
+[class*={kna-namespace}"flex-container"]
 .{kna-namespace}flex-container
-  display flex
-  flex-wrap wrap
+  flexbox(flex)
+  flex-wrap(wrap)
 
 .{kna-namespace}flex-container-h
-  flex-direction row
+  flex-direction(row)
 
 .{kna-namespace}flex-container-v
-  flex-direction column
+  flex-direction(column)
 
 .{kna-namespace}flex-item-fluid
   flex 1

From 9c8b9f870e74c7c5bde9c758ef9b75c3aa9b25d3 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Thu, 9 Mar 2017 14:33:39 +0100
Subject: [PATCH 6/6] add doc

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/README.md b/README.md
index 2e4bd2e..35cb321 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,23 @@ Vous pouvez également inclure ou non les fichiers partiels qui vous intéressen
 
 Téléchargez [KNACSS complet](https://github.com/alsacreations/KNACSS/archive/master.zip) pour bénéficier de toute l'architecture de l'outil, avec les fichiers Sass, package.json et gulpfile.js si nécessaires.
 
+### Vous préférez Stylus&nbsp;?
+
+KNACSS possède une version adapté au préprocesseur Stylus.
+
+Les fichiers de configuration se trouvent dans le [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/styl/config).
+
+Pour compiler cette version vous devez lancer les commandes :
+```
+npm install && gulp styluscss
+```
+Ceci génèrera le fichier non compressé.
+Et
+ ```
+ npm install && gulp styluscssmin
+ ```
+ pour la version minifié, qui se trouverons dans le répertoire `./css/stylus/`
+
 ### Installation via Bower, npm ou yarn
 
 - via [Bower](http://bower.io/) : `bower install knacss`