diff --git a/future-proof/.pleeeaserc b/future-proof/.pleeeaserc
new file mode 100644
index 0000000..6acaf5b
--- /dev/null
+++ b/future-proof/.pleeeaserc
@@ -0,0 +1,15 @@
+{
+	"input": "styles.css",
+	"output": "styles.min.css",
+	"fallbacks": {
+		"autoprefixer": true,
+		"variables": true,
+		"rem": ["62.5%", {"replace": false}],
+		"pseudoElements": true
+	},
+	"optimizers": {
+		"import": true,
+		"minifier": false,
+		"mqpacker": true
+	}
+}
\ No newline at end of file
diff --git a/future-proof/_README.md b/future-proof/_README.md
new file mode 100644
index 0000000..ddd5b1e
--- /dev/null
+++ b/future-proof/_README.md
@@ -0,0 +1,18 @@
+KNACSS-canary is an **experimental version** for KNACSS.
+
+No preprocessors, nos cheats. Only pure, standard CSS.
+
+Uses :
+- standards CSS variables
+- calc()
+- rem
+- other standards
+
+Needs :
+- a CSS post-processor such as www.pleeease.io in order to polyfill every features used
+
+Config :
+- install nodeJS
+- install Pleeease : `npm install pleeease -g`
+- adjust `.pleeeaserc` config to your needs
+- the `styles.css` file imports KNACSS and will be watched and compiled to `styles.min.css` with a simple `pleeease compile` or `pleeease watch` command
diff --git a/future-proof/css-includes/00-config.css b/future-proof/css-includes/00-config.css
new file mode 100644
index 0000000..6191f10
--- /dev/null
+++ b/future-proof/css-includes/00-config.css
@@ -0,0 +1,46 @@
+/* Config file : variables, mixins, ... */
+
+:root {
+
+	/* font sizes */
+	--base-font-size	: 14; /* if "14" then 1em = 14px */
+	--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		: Helvetica, Arial, sans-serif; 
+	--font-stack-monospace	: Consolas, 'DejaVu Sans Mono', Courier, monospace;
+	--font-stack-universal	: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 
+
+	/* font colors */
+	--base-color			: #000; /* text color on body */
+	--base-color-link		: #333; /* primary links color */
+	--base-color-link-hover	: #000; /* primary hovered/focused links color */
+
+	/* backgrounds */
+	--base-background		: #fff; /* body background color */
+
+	/* spacings */
+	--tiny-value			: 0.5em; /* tiny value for margins / paddings */
+	--small-value			: 1em; /* small value for margins / paddings */
+	--medium-value			: 2em; /* medium value for margins / paddings */
+	--large-value			: 4em; /* large value for margins / paddings */
+	--extra-large-value		: 6em; /* extra large value for margins / paddings */
+	--ultra-large-value		: 10em; /* ultra large value for margins / paddings */
+
+	/* breakpoints */
+	--tiny-screen			: 320px; /* tiny screens media query */
+	--small-screen			: 480px; /* small screens media query */
+	--medium-screen			: 768px; /* small screens media query */
+	--large-screen			: 1024px; /* large screens media query */
+	--extra-large-screen	: 1280px; /* extra large screens media query */
+	--ultra-large-screen	: 1600px; /* ultra large screens media query */
+
+	/* misc */
+	--gutter		: 20px; /* gutter value (%, px, em, rem) for grid layouts */
+}
\ No newline at end of file
diff --git a/future-proof/css-includes/01-base.css b/future-proof/css-includes/01-base.css
new file mode 100644
index 0000000..0a190f3
--- /dev/null
+++ b/future-proof/css-includes/01-base.css
@@ -0,0 +1,637 @@
+/*!
+* www.KNACSS.com V3.0.3 (2014-05-21) @author: Raphael Goetter, Alsacreations
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+/* ----------------------------- */
+/* == soft reset                 */
+/* ----------------------------- */
+
+/* switching box model for all elements */
+* {
+	box-sizing: border-box;
+}
+
+/* soft reset */
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+ul,
+ol {
+	padding-left: 2em;
+}
+
+ul.unstyled {
+	list-style: none;
+}
+
+img {
+	height: auto;
+	vertical-align: middle;
+	border: 0;
+}
+
+audio,
+canvas,
+video {
+	display: inline-block;
+}
+
+svg:not(:root) {
+	overflow: hidden;
+}
+
+/* ----------------------------- */
+/* == typography                 */
+/* ----------------------------- */
+
+
+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);
+	
+	/* disallow text zooming on orientation change (non standard property) */
+	-webkit-text-size-adjust: 100%;
+	    -ms-text-size-adjust: 100%;
+}
+
+body {
+	
+	/* set body font-size in em (1.4em equiv "14px") */
+	font-size: calc(var(--base-font-size) * 0.1em);
+	
+	background-color: var(--base-background);
+	color: var(--base-color);
+	font-family: var(--font-stack-common);	
+	line-height: var(--line-height);
+}
+
+/* font-sizing for content */
+p,
+.p-like,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption,
+details, 
+figure {
+	margin-top: 0.75em;
+	margin-bottom: 0;
+	line-height: var(--line-height);
+}
+
+h1,
+.h1-like {
+	font-size: var(--h1-size);
+}
+
+h2,
+.h2-like {
+	font-size: var(--h2-size);
+}
+
+h3,
+.h3-like {
+	font-size: var(--h3-size);
+}
+
+h4,
+.h4-like {
+	font-size: var(--h4-size);
+}
+
+h5,
+.h5-like {
+	font-size: var(--h5-size);
+}
+
+h6,
+.h6-like {
+	font-size: var(--h6-size);
+}
+
+/* alternate font-sizing */
+.smaller {
+	font-size: 0.7em;
+}
+
+.small {
+	font-size: 0.9em;
+}
+
+.big {
+	font-size: 1.1em;
+}
+
+.bigger {
+	font-size: 1.3em;
+}
+
+.biggest {
+	font-size: 1.6em;
+}
+
+code, 
+pre,
+samp,
+kbd {
+	/* IE fix */
+	white-space: pre-line; 
+	white-space: pre-wrap;
+	font-family: var(--font-stack-monospace);
+	line-height: normal;
+}
+em,
+.em,
+address,
+cite,
+dfn,
+i,
+var {
+	font-style: italic;
+}
+.no-em {
+	font-style: normal;
+}
+strong,
+.strong {
+	font-weight: bold;
+}
+.no-strong {
+	font-weight: normal;
+}
+small,
+sub,
+sup {
+	font-size: smaller;
+}
+
+/* ----------------------------- */
+/* == hiding content             */
+/* ----------------------------- */
+
+/* hidden but not for assistance tools, Yahoo! method */
+.visually-hidden { 
+	position: absolute !important;
+    border: 0 !important;
+    height: 1px !important; 
+    width: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+}
+
+body > script {
+	display: none !important;
+}
+
+@media (max-width: 480px) {
+	.no-small-screen {
+		display: none;
+	}
+}
+
+@media (min-width: 1024px) {
+	.no-large-screen {
+		display: none;
+	}
+}
+
+/* ----------------------------- */
+/* == browsers consistency       */
+/* ----------------------------- */
+
+/* avoid top margins on first content element */
+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, 
+h2:first-child, 
+h3:first-child, 
+h4:first-child, 
+h5:first-child, 
+h6:first-child {
+	margin-top: 0;
+}
+
+/* avoid margins on nested elements */
+li p,
+li .p-like,
+li ul,
+li ol {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/* max values */
+img, 
+table, 
+td, 
+blockquote, 
+code, 
+pre, 
+textarea, 
+input, 
+video {
+	max-width: 100%;
+}
+
+/* margin-bottom on tables */
+table {
+	margin-bottom: var(--medium-value);
+}
+
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/* float layout */
+/* module, gains superpower "BFC" Block Formating Context */
+.mod { 
+	overflow: hidden;
+}
+
+/* blocks that needs to be placed under floats */
+.clear,
+.line,
+.row {
+	clear: both;
+}
+
+/* blocks that must contain floats */
+.clearfix:after,
+.line:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+/* table layout */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/* inline-block */
+.inbl {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* alignments (blocks and inline) */
+/* ------------------------------ */
+
+/* left (or starting) elements */
+.left,
+.start {
+	float: left;
+}
+
+img.left,
+img.start  {
+	margin-right: var(--small-value);
+}
+
+/* right (or ending) elements */
+.right,
+.end {
+	float: right;
+}
+
+img.right,
+img.end {
+	margin-left: var(--small-value);
+}
+
+img.left, 
+img.right,
+img.start, 
+img.end {
+	margin-bottom: var(--tiny-value);
+}
+
+.center    {
+	margin-left: auto; 
+	margin-right: auto;
+}
+
+.txtleft   {
+	text-align: left;
+}
+
+.txtright  {
+	text-align: right;
+}
+
+.txtcenter {
+	text-align: center;
+}
+
+/* blocks widths (percentage and pixels) */
+.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; 
+}
+
+.w400p  { 
+	width: 400px; 
+}
+
+.w500p  { 
+	width: 500px; 
+}
+
+.w600p  { 
+	width: 600px; 
+}
+
+.w700p  { 
+	width: 700px; 
+}
+
+.w800p  { 
+	width: 800px; 
+}
+
+.w960p  { 
+	width: 960px; 
+}
+
+.mw960p { 
+	max-width: 960px; 
+}
+
+.w1140p  { 
+	width: 1140px; 
+}
+
+.mw1140p { 
+	max-width: 1140px; 
+}
+
+.wauto  { 
+	width: auto; 
+}
+
+/* spacing helpers
+p,m = padding,margin
+a,t,r,b,l = all,top,right,bottom,left
+s,m,l,n = small, medium, large, none
+*/
+.man { 
+	margin: 0; 
+}
+
+.pan { 
+	padding: 0; 
+}
+
+.mas { 
+	margin: var(--small-value); 
+}
+
+.mam { 
+	margin: var(--medium-value); 
+}
+
+.mal { 
+	margin: var(--large-value); 
+}
+
+.pas { 
+	padding: var(--small-value); 
+}
+
+.pam { 
+	padding: var(--medium-value); 
+}
+
+.pal { 
+	padding: var(--large-value); 
+}
+
+.mtn { 
+	margin-top: 0; 
+}
+
+.mts { 
+	margin-top: var(--small-value); 
+}
+
+.mtm { 
+	margin-top: var(--medium-value); 
+}
+
+.mtl { 
+	margin-top: var(--large-value); 
+}
+
+.mrn { 
+	margin-right: 0; 
+}
+
+.mrs { 
+	margin-right: var(--small-value); 
+}
+
+.mrm { 
+	margin-right: var(--medium-value); 
+}
+
+.mrl { 
+	margin-right: var(--large-value); 
+}
+
+.mbn { 
+	margin-bottom: 0; 
+}
+
+.mbs { 
+	margin-bottom: var(--small-value); 
+}
+
+.mbm { 
+	margin-bottom: var(--medium-value); 
+}
+
+.mbl { 
+	margin-bottom: var(--large-value); 
+}
+
+.mln { 
+	margin-left: 0; 
+}
+
+.mls { 
+	margin-left: var(--small-value); 
+}
+
+.mlm { 
+	margin-left: var(--medium-value); 
+}
+
+.mll { 
+	margin-left: var(--large-value); 
+}
+
+.ptn { 
+	padding-top: 0; 
+}
+
+.pts { 
+	padding-top: var(--small-value); 
+}
+
+.ptm { 
+	padding-top: var(--medium-value); 
+}
+
+.ptl { 
+	padding-top: var(--large-value); 
+}
+
+.prn { 
+	padding-right: 0; 
+}
+
+.prs { 
+	padding-right: var(--small-value); 
+}
+
+.prm { 
+	padding-right: var(--medium-value); 
+}
+
+.prl { 
+	padding-right: var(--large-value); 
+}
+
+.pbn { 
+	padding-bottom: 0; 
+}
+
+.pbs { 
+	padding-bottom: var(--small-value); 
+}
+
+.pbm { 
+	padding-bottom: var(--medium-value); 
+}
+
+.pbl { 
+	padding-bottom: var(--large-value); 
+}
+
+.pln { 
+	padding-left: 0; 
+}
+
+.pls { 
+	padding-left: var(--small-value); 
+}
+
+.plm { 
+	padding-left: var(--medium-value); 
+}
+
+.pll { 
+	padding-left: var(--large-value); 
+}
+
diff --git a/future-proof/css-includes/02-grids.css b/future-proof/css-includes/02-grids.css
new file mode 100644
index 0000000..d21dc25
--- /dev/null
+++ b/future-proof/css-includes/02-grids.css
@@ -0,0 +1,225 @@
+
+/* ---------------------------------- */
+/* ==classic grids                    */
+/* .. use it when gutter size matters */
+/* ---------------------------------- */
+
+/* grids inspired from SUIT https://github.com/suitcss/suit */
+
+/* overall container of grids */
+.grid { 
+	overflow: hidden;
+}
+
+/* global styles for direct child ex. .grid3 */
+.grid > * { 
+	display: block;
+	padding: 0;
+	/* gutter value */
+	margin-left: -var(--gutter);
+	text-align: left;
+}
+
+/* global styles for each "cell" */
+.grid > * > * { 
+	display: inline-block;
+	/* gutter value */
+	padding-left: var(--gutter);
+	margin-left: 0;
+	vertical-align: top;
+}
+
+/* whitespace fixing for modern browsers including IE9+ */
+:root .grid {
+	font-size: 0;
+	/* fallback for IE9+ */
+	text-justify: distribute-all-lines;
+}
+
+:root .grid > * > * {
+	font-size: calc(var(--base-font-size) / 10rem);
+}
+
+/* Opera hack */
+.opera:-o-prefocus,
+.grid > * {
+	word-spacing: -0.43em;
+}
+
+.grid2 > * {
+	width: 50%;
+}
+
+.grid3 > * {
+	width: 33.333%;
+}
+
+.grid4 > * {
+	width: 25%;
+}
+
+.grid5 > * {
+	width: 20%;
+}
+
+.grid6 > * {
+	width: 16.667%;
+}
+
+.grid8 > * {
+	width: 12.5%;
+}
+
+.grid10 > * {
+	width: 10%;
+}
+
+.grid12 > * {
+	width: 8.333%;
+}
+
+/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
+.grid2-1 > *:first-child,
+.grid1-2 > * + * { 
+	width: 66.666%; 
+}
+
+.grid1-2 > *:first-child,
+.grid2-1 > * + * { 
+	width: 33.333%; 
+}
+
+.grid1-3 > *:first-child,
+.grid3-1 > * + * { 
+	width: 25%; 
+}
+
+.grid3-1 > *:first-child,
+.grid1-3 > * + * { 
+	width: 75%; 
+}
+
+/* Responsiv-o-matic */
+@media (max-width: 1024px) {
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {
+		width: 33.333%;
+	}
+}
+@media (max-width: 480px) {
+	.grid3 > *,
+	.grid4 > *,
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {
+		width: 50%;
+	}
+}
+@media (max-width: 320px) {
+	.grid > * > * {
+		width: 100% !important;
+	}
+}
+
+/* ---------------------------------- */
+/* ==autogrids                        */
+/* .. to automatically justify blocs  */
+/* ---------------------------------- */
+
+/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
+/* container of autogrids */
+[class*="autogrid"] { 
+	text-align: justify;
+}
+
+[class*="autogrid"]:after {
+	content: "";
+	display: inline-block;
+	width: 100%; 
+}
+
+[class*="autogrid"] > * {
+	display: inline-block;
+	vertical-align: top;
+	text-align: left;
+}
+
+/* whitespace fixing for modern browsers including IE9+ */
+:root [class*="autogrid"] {
+	font-size: 0;
+	/* fallback for IE9+ */
+	text-justify: distribute-all-lines;
+}
+
+:root [class*="autogrid"] > * {
+	font-size: calc(var(--base-font-size) / 10rem);
+}
+
+/* Opera hack */
+[class*="autogrid"]:-o-prefocus {
+	word-spacing: -0.43em;
+}
+
+.autogrid2 > * {
+	width: 49%;
+}
+
+.autogrid3 > * {
+	width: 32%;
+}
+
+.autogrid4 > * {
+	width: 23.6%;
+}
+
+.autogrid5 > * {
+	width: 19%;
+}
+
+.autogrid6 > * {
+	width: 15%;
+}
+
+.autogrid8 > * {
+	width: 10.8%;
+}
+
+.autogrid10 > * {
+	width: 9%;
+}
+
+.autogrid12 > * {
+	width: 6.4%;
+}
+
+@media (max-width: 1024px) {
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {
+		width: 32%;
+	}
+}
+
+@media (max-width: 480px) {
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {
+		width: 49%;
+	}
+}
+
+@media (max-width: 320px) {
+	[class*="autogrid"] > * {
+		width: 100%;
+	}
+}
diff --git a/future-proof/css-includes/03-tables.css b/future-proof/css-includes/03-tables.css
new file mode 100644
index 0000000..2ba3e2e
--- /dev/null
+++ b/future-proof/css-includes/03-tables.css
@@ -0,0 +1,39 @@
+
+/* ----------------------------- */
+/* ==tables                      */
+/* ----------------------------- */
+
+table,
+.table {
+	width: 100%;
+	max-width : 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	vertical-align: top;
+	border: 1px solid #ccc;
+}
+
+.table {
+	display: table;
+}
+
+table#recaptcha_table,
+table.table-auto {
+	table-layout:auto;
+}
+
+caption {
+	padding: var(--small-value);
+	color: #555;
+	font-style: italic;	
+}
+
+td,
+th {
+	padding: 0.3em 0.8em;
+	border: 1px #aaa dotted;
+	vertical-align: top;
+	min-width: var(--medium-value);
+	cursor: default;
+	text-align: left;
+}
diff --git a/future-proof/css-includes/04-forms.css b/future-proof/css-includes/04-forms.css
new file mode 100644
index 0000000..cd4a570
--- /dev/null
+++ b/future-proof/css-includes/04-forms.css
@@ -0,0 +1,89 @@
+/* ----------------------------- */
+/* ==forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize and www.sitepen.com
+*/
+
+/* buttons */
+.btn {
+	display: inline-block;
+}
+
+/* forms items */
+form,
+fieldset {
+	border: none;
+}
+
+input,
+button,
+select,
+label,
+.btn {
+	vertical-align: middle;
+	font-family: inherit;
+	font-size: inherit;
+}
+
+label { 
+	display: inline-block;
+	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;
+}
+
+/* clickable input types in iOS */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	cursor: pointer;
+	-webkit-appearance: button; 
+}
+
+input[type="search"] {
+	-webkit-appearance: textfield;
+}
+
+/* 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,
+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;
+}
+
+/* Removes inner padding and border in FF3+ */
+button::-moz-focus-inner,
+input[type='button']::-moz-focus-inner,
+input[type='reset']::-moz-focus-inner,
+input[type='submit']::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
diff --git a/future-proof/css-includes/05-icons.css b/future-proof/css-includes/05-icons.css
new file mode 100644
index 0000000..b75d7bb
--- /dev/null
+++ b/future-proof/css-includes/05-icons.css
@@ -0,0 +1,159 @@
+/* ----------------------------- */
+/* ==icons and bullets	         */
+/* ----------------------------- */
+
+.icon {display: inline-block;}
+
+.icon:before,
+.icon.after:after {
+	content: "";
+	display: inline-block;
+	vertical-align: middle;
+	position: relative; top: -0.1em;
+	margin: 0 0.3em 0 0;
+	font: 1.4em/1 sans-serif;
+	color: #000;
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
+	speak: none;
+}
+
+@media (min-device-width: 480px) {
+	.icon:before,
+	.icon.after:after {
+		font: 1em/0.6 sans-serif;
+	}
+}
+
+.icon.after:after {
+	margin: 0 0 0 8px;
+}
+
+.icon.after:before {
+	content: "" !important
+}
+
+.icon-rate:before,
+.icon-rate.after:after {
+	content: "\2605";
+}
+
+.icon-unrate:before,
+.icon-unrate.after:after{
+	content: "\2606";
+}
+
+.icon-check:before,
+.icon-check.after:after{
+	content: "\2713";
+}
+
+.icon-uncheck:before,
+.icon-uncheck.after:after{
+	content: "\2717";
+}
+
+.icon-cloud:before,
+.icon-cloud.after:after {
+	content: "\2601";
+}
+
+.icon-dl:before,
+.icon-dl.after:after {
+	content: "\21E3";
+	font-weight: bold;
+}
+
+.icon-cross:before,
+.icon-cross.after:after {
+	content: "\2716";
+	font-weight: bold;
+}
+
+.icon-arrow1:before, 
+.icon-arrow1.after:after {
+	content: "\2192";
+	position: relative; 
+		top: -0.15em;
+}
+
+.icon-arrow2:before,
+.icon-arrow2.after:after {
+	content: "\279E";
+}
+
+.icon-arrow3:before,
+.icon-arrow3.after:after {
+	content: "\279A";
+}
+
+.icon-bracket1:before,
+.icon-bracket1.after:after {
+	content: "\2039";
+	font-weight: bold;
+	font-size: 1.6em;
+	position: relative; 
+		top: -0.15em;
+}
+
+.icon-bracket2:before,
+.icon-bracket2.after:after {
+	content: "\203A";
+	font-weight: bold;
+	font-size: 1.6em;
+	position: relative; 
+		top: -0.15em;
+}
+
+.icon-up:before,
+.icon-up.after:after {
+	content: "\25B2";
+}
+
+.icon-down:before,
+.icon-down.after:after {
+	content: "\25BC";
+}
+
+.icon-bull:before,
+.icon-bull.after:after {
+	content: "\2022";
+	font-size: 1.2em;
+	top: -0.05em;
+}
+
+.icon-bull2:before,
+.icon-bull2.after:after {
+	content: "\25E6";
+	top: -0.05em;
+}
+
+.icon-bull3:before,
+.icon-bull3.after:after{
+	content: "\2023";
+	font-size: 1.6em;
+	top: -0.05em;
+}
+
+.icon-nav:before,
+.icon-nav.after:after {
+	content: "\2261";
+	font-weight: bold;
+}
+
+.icon-losange:before,
+.icon-losange.after:after {
+	content: "\25C6";
+}
+
+.icon-asteri:before,
+.icon-asteri.after:after {
+	content: "\2731";
+	font-weight: bold;
+}
+
+.icon-mail:before,
+.icon-mail.after:after {
+	content: "\2709";
+	font-size: 1.6em;
+	top: -.05em;
+}
diff --git a/future-proof/css-includes/06-rwd.css b/future-proof/css-includes/06-rwd.css
new file mode 100644
index 0000000..671b1b3
--- /dev/null
+++ b/future-proof/css-includes/06-rwd.css
@@ -0,0 +1,275 @@
+/* ----------------------------- */
+/* ==desktop and HD devices      */
+/* ----------------------------- */
+
+@media (min-width: 480px) {
+/* rules for big resources and big screens like: background-images, font-faces, etc. */
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
+/* style adjustments for high density devices */
+}
+
+/* ---------------------------------- */
+/* ==Responsive large / small / tiny  */
+/* ---------------------------------- */
+
+@media (min-width: 1024px) {
+
+	/* layouts for large screens */
+	.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-row {
+		display: table;
+		table-layout: fixed;
+		width: 100% !important;
+	}
+	.large-col {
+		display: table-cell;
+		vertical-align: top;
+	}
+
+	/* widths for large screens */
+	.large-w25 { 
+		width: 25% !important; 
+	}
+	
+	.large-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.large-w50 { 
+		width: 50% !important; 
+	}
+	
+	.large-w66 { 
+		width: 66.6666% !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;		
+	}
+
+	/* margins for large screens */
+	.large-man { 
+		margin: 0 !important; 
+	}
+}
+
+@media (max-width: 480px) {
+
+	/* quick reset in small resolution and less */
+	.w600p,
+	.w700p,
+	.w800p,
+	.w960p,
+	.mw960p {
+		width: auto;
+		float: none;
+	} 
+
+	/* layouts for small screens */
+	.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-row {
+		display: table !important;
+		table-layout: fixed !important;
+		width: 100% !important;
+	}
+	.small-col {
+		display: table-cell !important;
+		vertical-align: top !important;
+	}
+
+	/* widths for small screens */
+	.small-w25 { 
+		width: 25% !important; 
+	}
+	
+	.small-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.small-w50 { 
+		width: 50% !important; 
+	}
+	
+	.small-w66 { 
+		width: 66.6666% !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;		
+	}
+	
+	/* margins for small screens */
+	.small-man { 
+		margin: 0 !important; 
+	}
+	
+	.small-pan { 
+		padding: 0 !important; 
+	}
+}
+
+@media (max-width: 320px) {
+
+	/* quick tiny resolution reset */
+	.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;
+	}
+	
+	.w300p,
+	.w400p,
+	.w500p {
+		width: auto;
+		float: none;
+	}
+	
+	.row { 
+		display: block !important;
+		width: 100% !important;
+	}
+
+	/* layouts for tiny screens */
+	.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-row {
+		display: table !important;
+		table-layout: fixed !important;
+		width: 100% !important;
+	}
+	
+	.tiny-col {
+		display: table-cell !important;
+		vertical-align: top !important;
+	}
+	
+	th,
+	td {
+		display: block !important;
+		width: auto !important;
+		text-align: left !important;
+	}
+	
+	thead { 
+		display: none; 
+	}
+
+	/* widths for tiny screens */
+	.tiny-w25 { 
+		width: 25% !important; 
+	}
+	
+	.tiny-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.tiny-w50 { 
+		width: 50% !important; 
+	}
+	
+	.tiny-w66 { 
+		width: 66.6666% !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;
+	}
+	
+	/* margins for tiny screens */
+	.tiny-man { 
+		margin: 0 !important; 
+	}
+	
+	.tiny-pan { 
+		padding: 0 !important; 
+	}
+}
diff --git a/future-proof/css-includes/07-flexbox.css b/future-proof/css-includes/07-flexbox.css
new file mode 100644
index 0000000..189a809
--- /dev/null
+++ b/future-proof/css-includes/07-flexbox.css
@@ -0,0 +1,30 @@
+
+/* flexbox layout 
+Tutorial: http://knacss.com/demos/tutoriel.html#flex */
+.flex {
+	display : flex;
+}
+
+.flex-h {
+	flex-direction: row;
+}
+
+.flex-v {
+	flex-direction: column;
+}
+
+.flex-fluid {
+	flex: 1;
+}
+
+.flex-start {
+	order : -1;
+}
+
+.flex-mid {
+	order : 1;
+}
+
+.flex-end {
+	order : 42;
+}
diff --git a/future-proof/css-includes/08-print.css b/future-proof/css-includes/08-print.css
new file mode 100644
index 0000000..952cc72
--- /dev/null
+++ b/future-proof/css-includes/08-print.css
@@ -0,0 +1,87 @@
+
+/* quick print reset */
+@media print {
+	
+	* {
+		background: transparent !important;
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+	
+	body {
+		width: auto !important;
+		margin: auto !important;
+		font-family: serif;
+		font-size: 12pt;
+		background-color: #fff !important;
+		color: #333 !important;
+	}
+	
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	blockquote,
+	ul,
+	ol {
+		color: #000 !important;
+		margin: auto !important;
+	}
+	
+	.print {
+		display: block; 
+	}
+	
+	.no-print {
+		display: none;
+	}
+	
+	img { 
+		filter: grayscale(100%);
+	}
+	
+	/* no orphans, no widows */
+	p,
+	blockquote {
+		orphans: 3; 
+		widows: 3;
+	}
+	
+	/* no breaks inside these elements */
+	blockquote,
+	ul,
+	ol {
+		page-break-inside: avoid; 
+	}
+	
+	/* page break before main headers */
+	h1 {
+		page-break-before: always; 
+	}
+	
+	/* no breaks after these elements */
+	h1,
+	h2,
+	h3,
+	caption {
+		page-break-after: avoid; 
+	}
+	
+	a {
+		color: #000 !important;
+		text-decoration: underline !important;
+	}
+	
+	/* displaying URLs */
+	a[href]:after {
+		content: " (" attr(href) ")"; 
+	}
+	
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+}
diff --git a/future-proof/css-includes/09-booleans.css b/future-proof/css-includes/09-booleans.css
new file mode 100644
index 0000000..584a885
--- /dev/null
+++ b/future-proof/css-includes/09-booleans.css
@@ -0,0 +1,38 @@
+
+/* styling skip links */
+
+.skip-links {
+	position: absolute;
+}
+
+.skip-links	a {
+	position: absolute;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0.5em;
+	background: black;
+	color: white;
+	text-decoration: none;
+}
+
+.skip-links	a:focus {
+	position: static;
+	overflow: visible;
+	clip: auto;
+}
+
+@media (max-width: 480px) {
+	/* hyphenations on small screens */
+	/* you shall not pass */
+	div, 
+	textarea, 
+	table, 
+	td, 
+	th, 
+	code, 
+	pre, 
+	samp {
+		word-wrap: break-word;
+		hyphens: auto;
+	}
+}
diff --git a/future-proof/css-includes/10-gmaps.css b/future-proof/css-includes/10-gmaps.css
new file mode 100644
index 0000000..486a3dc
--- /dev/null
+++ b/future-proof/css-includes/10-gmaps.css
@@ -0,0 +1,18 @@
+
+/* ----------------------------- */
+/* ==gmaps support               */
+/* ----------------------------- */
+/* Google Gmap3 bug fix on images */
+.gm-style img {
+	height: 100%;
+}
+
+:not(.gm-style) img {
+	height: auto;
+}
+
+.gm-style img,
+.gmnoscreen img,
+.gmnoprint img {
+	max-width: none !important;
+}
diff --git a/future-proof/css-includes/11-ie.css b/future-proof/css-includes/11-ie.css
new file mode 100644
index 0000000..c5a4edd
--- /dev/null
+++ b/future-proof/css-includes/11-ie.css
@@ -0,0 +1,76 @@
+/* ----------------------------- */
+/* ==IE6, IE7, IE8 support       */
+/* ----------------------------- */
+
+/* Active box-sizing for IE6/IE7 */
+/* @source https://github.com/Schepp/box-sizing-polyfill 
+
+.ie67 * {
+	behavior: url(/js/boxsizing.htc);
+}
+*/
+
+/* @bugfix for IE8 */
+.ie678 img {
+	width: auto; 
+}
+
+.ie678 .gm-style img {
+	height: 100%;
+}
+
+/* hasLayout for IE6/IE7 */
+.clearfix,
+.line,
+.mod,
+.row,
+.col {
+	*zoom: 1;
+}
+
+/*! inline-block and table-cell for IE6/IE7 */
+/*! warning: .col needs width on IE6/IE7 */
+.btn,
+.col,
+.inbl {
+	*display: inline;
+	*zoom: 1;
+}
+
+.visually-hidden { 
+	*clip: rect(1px 1px 1px 1px); 
+}
+
+/* IE8 grid hack */
+.ie8 .grid > *,
+.ie8 [class*="autogrid"] > * {
+	letter-spacing: -0.31em;
+	text-rendering: optimizespeed;
+}
+
+.ie8 .grid > * > *,
+.ie8 [class*="autogrid"] > * > *{
+	letter-spacing: normal;
+	word-spacing: normal;
+	text-rendering: auto;
+}
+
+/* IE7 grid hack */
+.grid > * > *,
+[class*="autogrid"] > * > *{
+	*display: inline;
+	*zoom: 1;
+}
+
+/* forms */
+/* Corrects excess space around these inputs in IE8/9 */
+.ie678 input[type="checkbox"],
+.ie678 input[type="radio"] {
+	padding: 0; 
+}
+
+/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
+.ie678 textarea {
+	overflow: auto; 
+}
+
diff --git a/future-proof/css-includes/12-styling.css b/future-proof/css-includes/12-styling.css
new file mode 100644
index 0000000..8b6cfc0
--- /dev/null
+++ b/future-proof/css-includes/12-styling.css
@@ -0,0 +1,119 @@
+/* ----------------------------- */
+/* ==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: none;
+	background: none;
+	color: inherit;
+	border-radius: 0;
+}
+
+mark {
+	padding:2px 4px;
+	background: #ff0;
+}
+
+sup,
+sub {
+	vertical-align: 0;
+	position: relative;
+}
+
+sup {
+	bottom: 1ex;
+}
+
+sub {
+	top: 0.5ex;
+}
+
+blockquote {
+	margin-left: 0;
+	padding-left: 1em;
+	border-left: 4px solid rgba(0,0,0,0.15);
+	font-style: italic;
+}
+
+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;
+}
+
+/* alternate tables */
+.alternate { border: 0; }
+.alternate tbody { 
+	border: 1px solid #ccc; 
+}
+
+.alternate thead tr > * + * {
+	border-left: 0;
+}
+
+.alternate tbody tr > * + * {
+	border-left: 1px solid #ccc;
+}
+
+/* alternate-vert tables */
+.alternate-vert { 
+	border: 0;
+	border-right: 1px solid #ccc;
+}
+
+.alternate-vert tr > :first-child {
+	border-bottom: 0;
+}
+
+.alternate-vert tr > * + * {
+	border-top: 1px solid #ccc;
+}
+
+/* striped tables */
+.striped tbody tr:nth-child(odd) {
+	background: #eee;
+	background: rgba(0, 0, 0, .05);
+}
+
+/* striped-vert tables */
+.striped-vert tr > :first-child {
+	background: #eee;
+	background: rgba(0, 0, 0, .05);
+}
diff --git a/future-proof/css-includes/knacss.css b/future-proof/css-includes/knacss.css
new file mode 100644
index 0000000..1e5a5e5
--- /dev/null
+++ b/future-proof/css-includes/knacss.css
@@ -0,0 +1,18 @@
+/* Config file */
+@import "00-config.css";
+
+/* Base styles */
+@import "01-base.css";
+
+/* Optional files : chose the ones you need */
+@import "02-grids.css";
+@import "03-tables.css"; 
+@import "04-forms.css";
+@import "05-icons.css";
+@import "06-rwd.css";
+@import "07-flexbox.css"; 
+@import "08-print.css";
+@import "09-booleans.css";
+@import "10-gmaps.css";
+@import "11-ie.css";
+@import "12-styling.css";
diff --git a/future-proof/styles.css b/future-proof/styles.css
new file mode 100644
index 0000000..361d496
--- /dev/null
+++ b/future-proof/styles.css
@@ -0,0 +1,8 @@
+@import url("css-includes/knacss.css");
+
+/* ----------------------------- */
+/* ==own stylesheet              */
+/* ----------------------------- */
+
+/* Here should go your own CSS styles */
+
diff --git a/future-proof/styles.min.css b/future-proof/styles.min.css
new file mode 100644
index 0000000..4256ce7
--- /dev/null
+++ b/future-proof/styles.min.css
@@ -0,0 +1,1880 @@
+/* Config file *//* Config file : variables, mixins, ... */
+
+:root {
+
+	/* font sizes */
+	--base-font-size	: 14; /* if "14" then 1em = 14px */
+	--line-height		: 1.5; /* equiv line-height 1.5 */
+	--h1-size			: 32px;
+	--h1-size			: 3.2rem; /* equiv "32px" */
+	--h2-size			: 28px;
+	--h2-size			: 2.8rem; /* equiv "28px" */
+	--h3-size			: 24px;
+	--h3-size			: 2.4rem; /* equiv "24px" */
+	--h4-size			: 20px;
+	--h4-size			: 2.0rem; /* equiv "20px" */
+	--h5-size			: 18px;
+	--h5-size			: 1.8rem; /* equiv "18px" */
+	--h6-size			: 16px;
+	--h6-size			: 1.6rem; /* equiv "16px" */
+
+	/* font stacks */
+	--font-stack-common		: Helvetica, Arial, sans-serif; 
+	--font-stack-monospace	: Consolas, 'DejaVu Sans Mono', Courier, monospace;
+	--font-stack-universal	: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 
+
+	/* font colors */
+	--base-color			: #000; /* text color on body */
+	--base-color-link		: #333; /* primary links color */
+	--base-color-link-hover	: #000; /* primary hovered/focused links color */
+
+	/* backgrounds */
+	--base-background		: #fff; /* body background color */
+
+	/* spacings */
+	--tiny-value			: 0.5em; /* tiny value for margins / paddings */
+	--small-value			: 1em; /* small value for margins / paddings */
+	--medium-value			: 2em; /* medium value for margins / paddings */
+	--large-value			: 4em; /* large value for margins / paddings */
+	--extra-large-value		: 6em; /* extra large value for margins / paddings */
+	--ultra-large-value		: 10em; /* ultra large value for margins / paddings */
+
+	/* breakpoints */
+	--tiny-screen			: 320px; /* tiny screens media query */
+	--small-screen			: 480px; /* small screens media query */
+	--medium-screen			: 768px; /* small screens media query */
+	--large-screen			: 1024px; /* large screens media query */
+	--extra-large-screen	: 1280px; /* extra large screens media query */
+	--ultra-large-screen	: 1600px; /* ultra large screens media query */
+
+	/* misc */
+	--gutter		: 20px; /* gutter value (%, px, em, rem) for grid layouts */
+}
+
+/* Base styles *//*!
+* www.KNACSS.com V3.0.3 (2014-05-21) @author: Raphael Goetter, Alsacreations
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+/* ----------------------------- */
+/* == soft reset                 */
+/* ----------------------------- */
+
+/* switching box model for all elements */
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* soft reset */
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+ul,
+ol {
+	padding-left: 2em;
+}
+
+ul.unstyled {
+	list-style: none;
+}
+
+img {
+	height: auto;
+	vertical-align: middle;
+	border: 0;
+}
+
+audio,
+canvas,
+video {
+	display: inline-block;
+}
+
+svg:not(:root) {
+	overflow: hidden;
+}
+
+/* ----------------------------- */
+/* == typography                 */
+/* ----------------------------- */
+
+
+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: -webkit-calc(1em * 0.625);
+    font-size: calc(1em * 0.625);
+	
+	/* disallow text zooming on orientation change (non standard property) */
+	-webkit-text-size-adjust: 100%;
+	    -ms-text-size-adjust: 100%;
+}
+
+body {
+	
+	/* set body font-size in em (1.4em equiv "14px") */
+	font-size: -webkit-calc(14 * 0.1em);
+	font-size: calc(14 * 0.1em);
+	
+	background-color: #fff;
+	color: #000;
+	font-family: Helvetica, Arial, sans-serif;	
+	line-height: 1.5;
+}
+
+/* font-sizing for content */
+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: 32px;
+	font-size: 3.2rem;
+}
+
+h2,
+.h2-like {
+	font-size: 28px;
+	font-size: 2.8rem;
+}
+
+h3,
+.h3-like {
+	font-size: 24px;
+	font-size: 2.4rem;
+}
+
+h4,
+.h4-like {
+	font-size: 20px;
+	font-size: 2.0rem;
+}
+
+h5,
+.h5-like {
+	font-size: 18px;
+	font-size: 1.8rem;
+}
+
+h6,
+.h6-like {
+	font-size: 16px;
+	font-size: 1.6rem;
+}
+
+/* alternate font-sizing */
+.smaller {
+	font-size: 0.7em;
+}
+
+.small {
+	font-size: 0.9em;
+}
+
+.big {
+	font-size: 1.1em;
+}
+
+.bigger {
+	font-size: 1.3em;
+}
+
+.biggest {
+	font-size: 1.6em;
+}
+
+code, 
+pre,
+samp,
+kbd {
+	/* IE fix */
+	white-space: pre-line; 
+	white-space: pre-wrap;
+	font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
+	line-height: normal;
+}
+em,
+.em,
+address,
+cite,
+dfn,
+i,
+var {
+	font-style: italic;
+}
+.no-em {
+	font-style: normal;
+}
+strong,
+.strong {
+	font-weight: bold;
+}
+.no-strong {
+	font-weight: normal;
+}
+small,
+sub,
+sup {
+	font-size: smaller;
+}
+
+/* ----------------------------- */
+/* == hiding content             */
+/* ----------------------------- */
+
+/* hidden but not for assistance tools, Yahoo! method */
+.visually-hidden { 
+	position: absolute !important;
+    border: 0 !important;
+    height: 1px !important; 
+    width: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+}
+
+body > script {
+	display: none !important;
+}
+
+/* ----------------------------- */
+/* == browsers consistency       */
+/* ----------------------------- */
+
+/* avoid top margins on first content element */
+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, 
+h2:first-child, 
+h3:first-child, 
+h4:first-child, 
+h5:first-child, 
+h6:first-child {
+	margin-top: 0;
+}
+
+/* avoid margins on nested elements */
+li p,
+li .p-like,
+li ul,
+li ol {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/* max values */
+img, 
+table, 
+td, 
+blockquote, 
+code, 
+pre, 
+textarea, 
+input, 
+video {
+	max-width: 100%;
+}
+
+/* margin-bottom on tables */
+table {
+	margin-bottom: 2em;
+}
+
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/* float layout */
+/* module, gains superpower "BFC" Block Formating Context */
+.mod { 
+	overflow: hidden;
+}
+
+/* blocks that needs to be placed under floats */
+.clear,
+.line,
+.row {
+	clear: both;
+}
+
+/* blocks that must contain floats */
+.clearfix:after,
+.line:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+/* table layout */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/* inline-block */
+.inbl {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* alignments (blocks and inline) */
+/* ------------------------------ */
+
+/* left (or starting) elements */
+.left,
+.start {
+	float: left;
+}
+
+img.left,
+img.start  {
+	margin-right: 1em;
+}
+
+/* right (or ending) elements */
+.right,
+.end {
+	float: right;
+}
+
+img.right,
+img.end {
+	margin-left: 1em;
+}
+
+img.left, 
+img.right,
+img.start, 
+img.end {
+	margin-bottom: 0.5em;
+}
+
+.center    {
+	margin-left: auto; 
+	margin-right: auto;
+}
+
+.txtleft   {
+	text-align: left;
+}
+
+.txtright  {
+	text-align: right;
+}
+
+.txtcenter {
+	text-align: center;
+}
+
+/* blocks widths (percentage and pixels) */
+.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; 
+}
+
+.w400p  { 
+	width: 400px; 
+}
+
+.w500p  { 
+	width: 500px; 
+}
+
+.w600p  { 
+	width: 600px; 
+}
+
+.w700p  { 
+	width: 700px; 
+}
+
+.w800p  { 
+	width: 800px; 
+}
+
+.w960p  { 
+	width: 960px; 
+}
+
+.mw960p { 
+	max-width: 960px; 
+}
+
+.w1140p  { 
+	width: 1140px; 
+}
+
+.mw1140p { 
+	max-width: 1140px; 
+}
+
+.wauto  { 
+	width: auto; 
+}
+
+/* spacing helpers
+p,m = padding,margin
+a,t,r,b,l = all,top,right,bottom,left
+s,m,l,n = small, medium, large, none
+*/
+.man { 
+	margin: 0; 
+}
+
+.pan { 
+	padding: 0; 
+}
+
+.mas { 
+	margin: 1em; 
+}
+
+.mam { 
+	margin: 2em; 
+}
+
+.mal { 
+	margin: 4em; 
+}
+
+.pas { 
+	padding: 1em; 
+}
+
+.pam { 
+	padding: 2em; 
+}
+
+.pal { 
+	padding: 4em; 
+}
+
+.mtn { 
+	margin-top: 0; 
+}
+
+.mts { 
+	margin-top: 1em; 
+}
+
+.mtm { 
+	margin-top: 2em; 
+}
+
+.mtl { 
+	margin-top: 4em; 
+}
+
+.mrn { 
+	margin-right: 0; 
+}
+
+.mrs { 
+	margin-right: 1em; 
+}
+
+.mrm { 
+	margin-right: 2em; 
+}
+
+.mrl { 
+	margin-right: 4em; 
+}
+
+.mbn { 
+	margin-bottom: 0; 
+}
+
+.mbs { 
+	margin-bottom: 1em; 
+}
+
+.mbm { 
+	margin-bottom: 2em; 
+}
+
+.mbl { 
+	margin-bottom: 4em; 
+}
+
+.mln { 
+	margin-left: 0; 
+}
+
+.mls { 
+	margin-left: 1em; 
+}
+
+.mlm { 
+	margin-left: 2em; 
+}
+
+.mll { 
+	margin-left: 4em; 
+}
+
+.ptn { 
+	padding-top: 0; 
+}
+
+.pts { 
+	padding-top: 1em; 
+}
+
+.ptm { 
+	padding-top: 2em; 
+}
+
+.ptl { 
+	padding-top: 4em; 
+}
+
+.prn { 
+	padding-right: 0; 
+}
+
+.prs { 
+	padding-right: 1em; 
+}
+
+.prm { 
+	padding-right: 2em; 
+}
+
+.prl { 
+	padding-right: 4em; 
+}
+
+.pbn { 
+	padding-bottom: 0; 
+}
+
+.pbs { 
+	padding-bottom: 1em; 
+}
+
+.pbm { 
+	padding-bottom: 2em; 
+}
+
+.pbl { 
+	padding-bottom: 4em; 
+}
+
+.pln { 
+	padding-left: 0; 
+}
+
+.pls { 
+	padding-left: 1em; 
+}
+
+.plm { 
+	padding-left: 2em; 
+}
+
+.pll { 
+	padding-left: 4em; 
+}
+
+/* Optional files : chose the ones you need */
+/* ---------------------------------- */
+/* ==classic grids                    */
+/* .. use it when gutter size matters */
+/* ---------------------------------- */
+
+/* grids inspired from SUIT https://github.com/suitcss/suit */
+
+/* overall container of grids */
+.grid { 
+	overflow: hidden;
+}
+
+/* global styles for direct child ex. .grid3 */
+.grid > * { 
+	display: block;
+	padding: 0;
+	/* gutter value */
+	margin-left: -20px;
+	text-align: left;
+}
+
+/* global styles for each "cell" */
+.grid > * > * { 
+	display: inline-block;
+	/* gutter value */
+	padding-left: 20px;
+	margin-left: 0;
+	vertical-align: top;
+}
+
+/* whitespace fixing for modern browsers including IE9+ */
+:root .grid {
+	font-size: 0;
+	/* fallback for IE9+ */
+	text-justify: distribute-all-lines;
+}
+
+:root .grid > * > * {
+	font-size: -webkit-calc(14 / 100px);
+	font-size: calc(14 / 100px);
+	font-size: -webkit-calc(14 / 10rem);
+	font-size: calc(14 / 10rem);
+}
+
+/* Opera hack */
+.opera:-o-prefocus,
+.grid > * {
+	word-spacing: -0.43em;
+}
+
+.grid2 > * {
+	width: 50%;
+}
+
+.grid3 > * {
+	width: 33.333%;
+}
+
+.grid4 > * {
+	width: 25%;
+}
+
+.grid5 > * {
+	width: 20%;
+}
+
+.grid6 > * {
+	width: 16.667%;
+}
+
+.grid8 > * {
+	width: 12.5%;
+}
+
+.grid10 > * {
+	width: 10%;
+}
+
+.grid12 > * {
+	width: 8.333%;
+}
+
+/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
+.grid2-1 > *:first-child,
+.grid1-2 > * + * { 
+	width: 66.666%; 
+}
+
+.grid1-2 > *:first-child,
+.grid2-1 > * + * { 
+	width: 33.333%; 
+}
+
+.grid1-3 > *:first-child,
+.grid3-1 > * + * { 
+	width: 25%; 
+}
+
+.grid3-1 > *:first-child,
+.grid1-3 > * + * { 
+	width: 75%; 
+}
+
+/* Responsiv-o-matic */
+
+/* ---------------------------------- */
+/* ==autogrids                        */
+/* .. to automatically justify blocs  */
+/* ---------------------------------- */
+
+/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
+/* container of autogrids */
+[class*="autogrid"] { 
+	text-align: justify;
+}
+
+[class*="autogrid"]:after {
+	content: "";
+	display: inline-block;
+	width: 100%; 
+}
+
+[class*="autogrid"] > * {
+	display: inline-block;
+	vertical-align: top;
+	text-align: left;
+}
+
+/* whitespace fixing for modern browsers including IE9+ */
+:root [class*="autogrid"] {
+	font-size: 0;
+	/* fallback for IE9+ */
+	text-justify: distribute-all-lines;
+}
+
+:root [class*="autogrid"] > * {
+	font-size: -webkit-calc(14 / 100px);
+	font-size: calc(14 / 100px);
+	font-size: -webkit-calc(14 / 10rem);
+	font-size: calc(14 / 10rem);
+}
+
+/* Opera hack */
+[class*="autogrid"]:-o-prefocus {
+	word-spacing: -0.43em;
+}
+
+.autogrid2 > * {
+	width: 49%;
+}
+
+.autogrid3 > * {
+	width: 32%;
+}
+
+.autogrid4 > * {
+	width: 23.6%;
+}
+
+.autogrid5 > * {
+	width: 19%;
+}
+
+.autogrid6 > * {
+	width: 15%;
+}
+
+.autogrid8 > * {
+	width: 10.8%;
+}
+
+.autogrid10 > * {
+	width: 9%;
+}
+
+.autogrid12 > * {
+	width: 6.4%;
+}
+
+@media (max-width: 1024px) {
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {
+		width: 33.333%;
+	}
+
+
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {
+		width: 32%;
+	}
+}
+/* ----------------------------- */
+/* ==tables                      */
+/* ----------------------------- */
+
+table,
+.table {
+	width: 100%;
+	max-width : 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	vertical-align: top;
+	border: 1px solid #ccc;
+}
+
+.table {
+	display: table;
+}
+
+table#recaptcha_table,
+table.table-auto {
+	table-layout:auto;
+}
+
+caption {
+	padding: 1em;
+	color: #555;
+	font-style: italic;	
+}
+
+td,
+th {
+	padding: 0.3em 0.8em;
+	border: 1px #aaa dotted;
+	vertical-align: top;
+	min-width: 2em;
+	cursor: default;
+	text-align: left;
+}/* ----------------------------- */
+/* ==forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize and www.sitepen.com
+*/
+
+/* buttons */
+.btn {
+	display: inline-block;
+}
+
+/* forms items */
+form,
+fieldset {
+	border: none;
+}
+
+input,
+button,
+select,
+label,
+.btn {
+	vertical-align: middle;
+	font-family: inherit;
+	font-size: inherit;
+}
+
+label { 
+	display: inline-block;
+	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;
+}
+
+/* clickable input types in iOS */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	cursor: pointer;
+	-webkit-appearance: button; 
+}
+
+input[type="search"] {
+	-webkit-appearance: textfield;
+}
+
+/* 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,
+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;
+}
+
+/* Removes inner padding and border in FF3+ */
+button::-moz-focus-inner,
+input[type='button']::-moz-focus-inner,
+input[type='reset']::-moz-focus-inner,
+input[type='submit']::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}/* ----------------------------- */
+/* ==icons and bullets	         */
+/* ----------------------------- */
+
+.icon {display: inline-block;}
+
+.icon:before,
+.icon.after:after {
+	content: "";
+	display: inline-block;
+	vertical-align: middle;
+	position: relative; top: -0.1em;
+	margin: 0 0.3em 0 0;
+	font: 1.4em/1 sans-serif;
+	color: #000;
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
+	speak: none;
+}
+
+@media (min-device-width: 480px) {
+	.icon:before,
+	.icon.after:after {
+		font: 1em/0.6 sans-serif;
+	}
+}
+
+.icon.after:after {
+	margin: 0 0 0 8px;
+}
+
+.icon.after:before {
+	content: "" !important
+}
+
+.icon-rate:before,
+.icon-rate.after:after {
+	content: "\2605";
+}
+
+.icon-unrate:before,
+.icon-unrate.after:after{
+	content: "\2606";
+}
+
+.icon-check:before,
+.icon-check.after:after{
+	content: "\2713";
+}
+
+.icon-uncheck:before,
+.icon-uncheck.after:after{
+	content: "\2717";
+}
+
+.icon-cloud:before,
+.icon-cloud.after:after {
+	content: "\2601";
+}
+
+.icon-dl:before,
+.icon-dl.after:after {
+	content: "\21E3";
+	font-weight: bold;
+}
+
+.icon-cross:before,
+.icon-cross.after:after {
+	content: "\2716";
+	font-weight: bold;
+}
+
+.icon-arrow1:before, 
+.icon-arrow1.after:after {
+	content: "\2192";
+	position: relative; 
+		top: -0.15em;
+}
+
+.icon-arrow2:before,
+.icon-arrow2.after:after {
+	content: "\279E";
+}
+
+.icon-arrow3:before,
+.icon-arrow3.after:after {
+	content: "\279A";
+}
+
+.icon-bracket1:before,
+.icon-bracket1.after:after {
+	content: "\2039";
+	font-weight: bold;
+	font-size: 1.6em;
+	position: relative; 
+		top: -0.15em;
+}
+
+.icon-bracket2:before,
+.icon-bracket2.after:after {
+	content: "\203A";
+	font-weight: bold;
+	font-size: 1.6em;
+	position: relative; 
+		top: -0.15em;
+}
+
+.icon-up:before,
+.icon-up.after:after {
+	content: "\25B2";
+}
+
+.icon-down:before,
+.icon-down.after:after {
+	content: "\25BC";
+}
+
+.icon-bull:before,
+.icon-bull.after:after {
+	content: "\2022";
+	font-size: 1.2em;
+	top: -0.05em;
+}
+
+.icon-bull2:before,
+.icon-bull2.after:after {
+	content: "\25E6";
+	top: -0.05em;
+}
+
+.icon-bull3:before,
+.icon-bull3.after:after{
+	content: "\2023";
+	font-size: 1.6em;
+	top: -0.05em;
+}
+
+.icon-nav:before,
+.icon-nav.after:after {
+	content: "\2261";
+	font-weight: bold;
+}
+
+.icon-losange:before,
+.icon-losange.after:after {
+	content: "\25C6";
+}
+
+.icon-asteri:before,
+.icon-asteri.after:after {
+	content: "\2731";
+	font-weight: bold;
+}
+
+.icon-mail:before,
+.icon-mail.after:after {
+	content: "\2709";
+	font-size: 1.6em;
+	top: -.05em;
+}/* ----------------------------- */
+/* ==desktop and HD devices      */
+/* ----------------------------- */
+
+@media (min-width: 480px) {
+/* rules for big resources and big screens like: background-images, font-faces, etc. */
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
+/* style adjustments for high density devices */
+}
+
+/* ---------------------------------- */
+/* ==Responsive large / small / tiny  */
+/* ---------------------------------- */
+
+@media (min-width: 1024px) {
+	.no-large-screen {
+		display: none;
+	}
+
+
+
+	/* layouts for large screens */
+	.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-row {
+		display: table;
+		table-layout: fixed;
+		width: 100% !important;
+	}
+	.large-col {
+		display: table-cell;
+		vertical-align: top;
+	}
+
+	/* widths for large screens */
+	.large-w25 { 
+		width: 25% !important; 
+	}
+	
+	.large-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.large-w50 { 
+		width: 50% !important; 
+	}
+	
+	.large-w66 { 
+		width: 66.6666% !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;		
+	}
+
+	/* margins for large screens */
+	.large-man { 
+		margin: 0 !important; 
+	}
+}
+
+@media (max-width: 320px) {
+	.grid > * > * {
+		width: 100% !important;
+	}
+
+
+	[class*="autogrid"] > * {
+		width: 100%;
+	}
+
+
+
+	/* quick tiny resolution reset */
+	.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;
+	}
+	
+	.w300p,
+	.w400p,
+	.w500p {
+		width: auto;
+		float: none;
+	}
+	
+	.row { 
+		display: block !important;
+		width: 100% !important;
+	}
+
+	/* layouts for tiny screens */
+	.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-row {
+		display: table !important;
+		table-layout: fixed !important;
+		width: 100% !important;
+	}
+	
+	.tiny-col {
+		display: table-cell !important;
+		vertical-align: top !important;
+	}
+	
+	th,
+	td {
+		display: block !important;
+		width: auto !important;
+		text-align: left !important;
+	}
+	
+	thead { 
+		display: none; 
+	}
+
+	/* widths for tiny screens */
+	.tiny-w25 { 
+		width: 25% !important; 
+	}
+	
+	.tiny-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.tiny-w50 { 
+		width: 50% !important; 
+	}
+	
+	.tiny-w66 { 
+		width: 66.6666% !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;
+	}
+	
+	/* margins for tiny screens */
+	.tiny-man { 
+		margin: 0 !important; 
+	}
+	
+	.tiny-pan { 
+		padding: 0 !important; 
+	}
+}
+/* flexbox layout 
+Tutorial: http://knacss.com/demos/tutoriel.html#flex */
+.flex {
+	display : -webkit-box;
+	display : -webkit-flex;
+	display : -ms-flexbox;
+	display : flex;
+}
+
+.flex-h {
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	-webkit-flex-direction: row;
+	-ms-flex-direction: row;
+	flex-direction: row;
+}
+
+.flex-v {
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+}
+
+.flex-fluid {
+	-webkit-box-flex: 1;
+	-webkit-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+}
+
+.flex-start {
+	-webkit-box-ordinal-group : 0;
+	-webkit-order : -1;
+	-ms-flex-order : -1;
+	order : -1;
+}
+
+.flex-mid {
+	-webkit-box-ordinal-group : 2;
+	-webkit-order : 1;
+	-ms-flex-order : 1;
+	order : 1;
+}
+
+.flex-end {
+	-webkit-box-ordinal-group : 43;
+	-webkit-order : 42;
+	-ms-flex-order : 42;
+	order : 42;
+}
+/* quick print reset */
+@media print {
+	
+	* {
+		background: transparent !important;
+		-webkit-box-shadow: none !important;
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+	
+	body {
+		width: auto !important;
+		margin: auto !important;
+		font-family: serif;
+		font-size: 12pt;
+		background-color: #fff !important;
+		color: #333 !important;
+	}
+	
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	blockquote,
+	ul,
+	ol {
+		color: #000 !important;
+		margin: auto !important;
+	}
+	
+	.print {
+		display: block; 
+	}
+	
+	.no-print {
+		display: none;
+	}
+	
+	img { 
+		-webkit-filter: grayscale(100%); 
+		filter: grayscale(100%);
+	}
+	
+	/* no orphans, no widows */
+	p,
+	blockquote {
+		orphans: 3; 
+		widows: 3;
+	}
+	
+	/* no breaks inside these elements */
+	blockquote,
+	ul,
+	ol {
+		page-break-inside: avoid; 
+	}
+	
+	/* page break before main headers */
+	h1 {
+		page-break-before: always; 
+	}
+	
+	/* no breaks after these elements */
+	h1,
+	h2,
+	h3,
+	caption {
+		page-break-after: avoid; 
+	}
+	
+	a {
+		color: #000 !important;
+		text-decoration: underline !important;
+	}
+	
+	/* displaying URLs */
+	a[href]:after {
+		content: " (" attr(href) ")"; 
+	}
+	
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+}
+/* styling skip links */
+
+.skip-links {
+	position: absolute;
+}
+
+.skip-links	a {
+	position: absolute;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0.5em;
+	background: black;
+	color: white;
+	text-decoration: none;
+}
+
+.skip-links	a:focus {
+	position: static;
+	overflow: visible;
+	clip: auto;
+}
+
+@media (max-width: 480px) {
+	.no-small-screen {
+		display: none;
+	}
+
+
+	.grid3 > *,
+	.grid4 > *,
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {
+		width: 50%;
+	}
+
+
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {
+		width: 49%;
+	}
+
+
+
+	/* quick reset in small resolution and less */
+	.w600p,
+	.w700p,
+	.w800p,
+	.w960p,
+	.mw960p {
+		width: auto;
+		float: none;
+	} 
+
+	/* layouts for small screens */
+	.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-row {
+		display: table !important;
+		table-layout: fixed !important;
+		width: 100% !important;
+	}
+	.small-col {
+		display: table-cell !important;
+		vertical-align: top !important;
+	}
+
+	/* widths for small screens */
+	.small-w25 { 
+		width: 25% !important; 
+	}
+	
+	.small-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.small-w50 { 
+		width: 50% !important; 
+	}
+	
+	.small-w66 { 
+		width: 66.6666% !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;		
+	}
+	
+	/* margins for small screens */
+	.small-man { 
+		margin: 0 !important; 
+	}
+	
+	.small-pan { 
+		padding: 0 !important; 
+	}
+
+
+	/* hyphenations on small screens */
+	/* you shall not pass */
+	div, 
+	textarea, 
+	table, 
+	td, 
+	th, 
+	code, 
+	pre, 
+	samp {
+		word-wrap: break-word;
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+	}
+}
+/* ----------------------------- */
+/* ==gmaps support               */
+/* ----------------------------- */
+/* Google Gmap3 bug fix on images */
+.gm-style img {
+	height: 100%;
+}
+
+:not(.gm-style) img {
+	height: auto;
+}
+
+.gm-style img,
+.gmnoscreen img,
+.gmnoprint img {
+	max-width: none !important;
+}/* ----------------------------- */
+/* ==IE6, IE7, IE8 support       */
+/* ----------------------------- */
+
+/* Active box-sizing for IE6/IE7 */
+/* @source https://github.com/Schepp/box-sizing-polyfill 
+
+.ie67 * {
+	behavior: url(/js/boxsizing.htc);
+}
+*/
+
+/* @bugfix for IE8 */
+.ie678 img {
+	width: auto; 
+}
+
+.ie678 .gm-style img {
+	height: 100%;
+}
+
+/* hasLayout for IE6/IE7 */
+.clearfix,
+.line,
+.mod,
+.row,
+.col {
+	*zoom: 1;
+}
+
+/*! inline-block and table-cell for IE6/IE7 */
+/*! warning: .col needs width on IE6/IE7 */
+.btn,
+.col,
+.inbl {
+	*display: inline;
+	*zoom: 1;
+}
+
+.visually-hidden { 
+	*clip: rect(1px 1px 1px 1px); 
+}
+
+/* IE8 grid hack */
+.ie8 .grid > *,
+.ie8 [class*="autogrid"] > * {
+	letter-spacing: -0.31em;
+	text-rendering: optimizespeed;
+}
+
+.ie8 .grid > * > *,
+.ie8 [class*="autogrid"] > * > *{
+	letter-spacing: normal;
+	word-spacing: normal;
+	text-rendering: auto;
+}
+
+/* IE7 grid hack */
+.grid > * > *,
+[class*="autogrid"] > * > *{
+	*display: inline;
+	*zoom: 1;
+}
+
+/* forms */
+/* Corrects excess space around these inputs in IE8/9 */
+.ie678 input[type="checkbox"],
+.ie678 input[type="radio"] {
+	padding: 0; 
+}
+
+/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
+.ie678 textarea {
+	overflow: auto; 
+}/* ----------------------------- */
+/* ==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: none;
+	background: none;
+	color: inherit;
+	border-radius: 0;
+}
+
+mark {
+	padding:2px 4px;
+	background: #ff0;
+}
+
+sup,
+sub {
+	vertical-align: 0;
+	position: relative;
+}
+
+sup {
+	bottom: 1ex;
+}
+
+sub {
+	top: 0.5ex;
+}
+
+blockquote {
+	margin-left: 0;
+	padding-left: 1em;
+	border-left: 4px solid rgba(0,0,0,0.15);
+	font-style: italic;
+}
+
+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;
+}
+
+/* alternate tables */
+.alternate { border: 0; }
+.alternate tbody { 
+	border: 1px solid #ccc; 
+}
+
+.alternate thead tr > * + * {
+	border-left: 0;
+}
+
+.alternate tbody tr > * + * {
+	border-left: 1px solid #ccc;
+}
+
+/* alternate-vert tables */
+.alternate-vert { 
+	border: 0;
+	border-right: 1px solid #ccc;
+}
+
+.alternate-vert tr > :first-child {
+	border-bottom: 0;
+}
+
+.alternate-vert tr > * + * {
+	border-top: 1px solid #ccc;
+}
+
+/* striped tables */
+.striped tbody tr:nth-child(odd) {
+	background: #eee;
+	background: rgba(0, 0, 0, .05);
+}
+
+/* striped-vert tables */
+.striped-vert tr > :first-child {
+	background: #eee;
+	background: rgba(0, 0, 0, .05);
+}
+
+/* ----------------------------- */
+/* ==own stylesheet              */
+/* ----------------------------- */
+
+/* Here should go your own CSS styles */
+