diff --git a/0.1' b/0.1'
new file mode 100644
index 0000000..e69de29
diff --git a/css/knacss - Copie.css b/css/knacss - Copie.css
deleted file mode 100644
index d11f1f0..0000000
--- a/css/knacss - Copie.css	
+++ /dev/null
@@ -1,562 +0,0 @@
-/*
-* www.KNACSS.com V3 @author: Raphael Goetter, Alsacreations
-* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ 
-*/
-
-/* ----------------------------- */
-/* ==reset */
-/* ----------------------------- */
-
-/* base font-size corresponds to 10px and is adapted to rem unit */
-html {
-	font-size: 62.5%;
-}
-body {
-	background-color: #fff;
-	color: #000;
-	font-family: "Century Gothic", helvetica, arial, sans-serif;
-	font-size: 1.0em; /* equiv 10px */
-	line-height: 1.5; /* adapt to your design */
-}
-
-/* font-sizing for content */
-/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
-p,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-td,
-th,
-label,
-textarea,
-caption,
-details, 
-figure {
-	line-height: 1.5;
-	margin: .75em 0 0;
-}
-p,
-li,
-dd,
-pre,
-td,
-th,
-input,
-label,
-textarea,
-caption,
-figcaption,
-details {
-	font-size: 1.4em; /* equiv 14px */
-}
-li li,
-li p,
-td p,
-td li,
-th p,
-th li,
-dd p,
-blockquote p,
-p label,
-p input {
-	font-size: 1em; /* equiv 14px for nested elements */
-}
-h1, .h1-like {
-	font-size: 2.6em; /* equiv 26px */
-	font-weight: normal;
-	line-height: 1.6154;
-	margin: .8077em 0 0 0;
-}
-h2, .h2-like {
-	font-size: 2.4em; /* equiv 24px */
-	font-weight: normal;
-	line-height: 1.75;
-	margin: .875em 0 0 0;
-}
-h3, .h3-like {
-	font-size: 2.2em; /* equiv 22px */
-	font-weight: normal;
-	line-height: 1.909;
-	margin: .9545em 0 0 0;
-}
-h4, .h4-like {
-	font-size: 2.0em; /* equiv 20px */
-	font-weight: normal;
-	line-height: 1.05;
-	margin:  1.05em 0 0 0;
-}
-h5, .h5-like {
-	font-size: 1.8em; /* equiv 18px */
-	font-weight: normal;
-	line-height: 1.1667;
-	margin:  1.1667em 0 0 0;
-}
-h6, .h6-like {
-	font-size: 1.6em; /* equiv 16px */
-	font-weight: normal;
-	line-height: 1.3125;
-	margin:  1.3125em 0 0 0;
-}
-
-/* alternate font-sizing */
-.smaller {
-	font-size: .7143em; /* equiv 10px */
-}
-.small {
-	font-size: .8571em; /* equiv 12px */
-}
-.big {
-	font-size: 1.1429em; /* equiv 16px */
-}
-.bigger {
-	font-size: 1.2857em; /* equiv 18px */
-}
-.biggest {
-	font-size: 1.4286em; /* equiv 20px */
-}
-
-/* soft reset */
-html,
-body,
-textarea,
-figure,
-label {
-	margin: 0;
-	padding: 0;
-}
-ul,
-ol {
-	padding-left: 2em;
-}
-ul.unstyled {
-	list-style: none;
-}
-code, 
-pre,
-samp,
-kbd {
-	white-space: pre-wrap;
-	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-	line-height: 1em;
-}
-code, kbd, mark {
-	border-radius: 2px;
-}
-em {
-	font-style: italic;
-}
-strong {
-	font-weight: bold;
-}
-kbd {
-	padding: 0 2px;
-	border: 1px solid #999;
-}
-code {
-	padding: 2px 4px;
-	background: rgba(0,0,0,.04);
-	color: #b11; 
-}
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-
-table { margin-bottom: 1.5em; }
-
-/* avoid top margins on first content element */
-p: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 ul,
-li ol {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-/* max values */
-img, table, td, blockquote, code, pre, textarea, input, video {
-	max-width: 100%;
-}
-
-/* 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;
-	     -o-hyphens: auto;
-	        hyphens: auto;
-}
-
-/* pictures */
-img {
-	height: auto;
-	vertical-align: middle;
-}
-/* Gmap3 max-width bug fix on images */
-#map_canvas img,
-.gmnoprint img {max-width: none;}
-
-a img { border: 0; }
-
-/* scripts */
-body > script {display: none !important;}
-
-/* skip-links */
-.skip-links {
-	position: absolute;
-}
-.skip-links a {
-	position: absolute;
-	left: -7000px;
-	padding: 0.5em;
-	background: #000;
-	color:#fff;
-	text-decoration: none;
-}
-.skip-links a:focus {
-	position: static;
-}
-
-/* ----------------------------- */
-/* ==layout and modules */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-	-webkit-box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
-}
-
-/* float layout */
-/* module, contains floats (.item is the same) */
-.mod, .item { 
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix:after,
-.line:after,
-.mod: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;
-	margin-right: -.25em;
-}
-
-/* flexbox layout */
-.flex {
-	display: -webkit-box;
-	display: -moz-box;
-	display: -ms-flexbox;
-	display: -webkit-flex;
-	display: flex;
-}
-.flex-h {
-	-webkit-box-orient: horizontal;
-	   -moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
-	    -ms-flex-direction: row;
-	        flex-direction: row;
-}
-.flex-v {
-	-webkit-box-orient: vertical;
-	   -moz-box-orient: vertical;
-	-webkit-flex-direction: column;
-	    -ms-flex-direction: column;
-	        flex-direction: column;
-}
-.flex-fluid {
-	-moz-box-flex: 1;
-	-webkit-flex: 1;
-	   -moz-flex: 1;
-	    -ms-flex: 1;
-	        flex: 1;
-}
-.flex-start {
-	-webkit-box-ordinal-group: -1;
-	-moz-box-ordinal-group: 0;
-	-ms-flex-order: -1;
-	-webkit-order: -1;
-	   -moz-order: -1;
-	        order: -1;
-}
-.flex-mid {
-	-webkit-box-ordinal-group: 1;
-	-moz-box-ordinal-group: 1;
-	-ms-flex-order: 1;
-	-webkit-order: 1;
-	   -moz-order: 1;
-	        order: 1;
-}
-.flex-end {
-	-webkit-box-ordinal-group: 42;
-	-moz-box-ordinal-group: 42;
-	-ms-flex-order: 42;
-	-webkit-order: 42;
-	   -moz-order: 42;
-	        order: 42;
-}
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left elements */
-.left {
-	float: left;
-}
-img.left {
-	margin-right: 1em;
-}
-
-/* right elements */
-.right {
-	float: right;
-}
-img.right {
-	margin-left: 1em;
-}
-
-img.left, img.right {
-	margin-bottom: 5px;
-}
-
-.center    { margin-left: auto; margin-right: auto; }
-.txtleft   { text-align: left; }
-.txtright  { text-align: right; }
-.txtcenter { text-align: center; }
-
-/* blocks widths (percentages and pixels) */
-.w10    { width: 10%; }
-.w20    { width: 20%; }
-.w25    { width: 25%; }
-.w30    { width: 30%; }
-.w33    { width: 33.333%; }
-.w40    { width: 40%; }
-.w50    { width: 50%; }
-.w60    { width: 60%; }
-.w66    { width: 66.666%; }
-.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; }
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0)
-source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
-*/
-.m-reset, .ma0 { margin: 0 !important; }
-.p-reset, .pa0 { padding: 0 !important; }
-.ma1, .mas { margin: 10px !important; }
-.ma2, .mam { margin: 20px !important; }
-.ma3, .mal { margin: 30px !important; }
-.pa1, .pas { padding: 10px; }
-.pa2, .pam { padding: 20px; }
-.pa3, .pal { padding: 30px; }
-
-.mt0, .mtn { margin-top: 0 !important; }
-.mt1, .mts { margin-top: 10px !important; }
-.mt2, .mtm { margin-top: 20px !important; }
-.mt3, .mtl { margin-top: 30px !important; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: 10px; }
-.mr2, .mrm { margin-right: 20px; }
-.mr3, .mrl { margin-right: 30px; }
-.mb0, .mbn { margin-bottom: 0 !important; }
-.mb1, .mbs { margin-bottom: 10px !important; }
-.mb2, .mbm { margin-bottom: 20px !important; }
-.mb3, .mbl { margin-bottom: 30px !important; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: 10px; }
-.ml2, .mlm { margin-left: 20px; }
-.ml3, .mll { margin-left: 30px; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: 10px; }
-.pt2, .ptm { padding-top: 20px; }
-.pt3, .ptl { padding-top: 30px; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: 10px; }
-.pr2, .prm { padding-right: 20px; }
-.pr3, .prl { padding-right: 30px; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: 10px; }
-.pb2, .pbm { padding-bottom: 20px; }
-.pb3, .pbl { padding-bottom: 30px; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: 10px; }
-.pl2, .plm { padding-left: 20px; }
-.pl3, .pll { padding-left: 30px; }
-
-/* hiding content */
-.visually-hidden {
-	position: absolute;
-	left: -7000px;
-	overflow: hidden;
-}
-[dir=rtl] .visually-hidden {
-	left: auto;
-	right: -7000px;
-}
-
-.desktop-hidden { display: none; } /* hidden on desktop */
-
-/* ----------------------------- */
-/* ==header */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==sidebar */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==footer */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==forms */
-/* ----------------------------- */
-form,
-fieldset {
-	border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle; /* @bugfix alignment */
-	font-family: inherit;
-}
-textarea {
-	resize: vertical;
-	font-family: inherit;
-}
-
-/* ----------------------------- */
-/* ==main */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==iefix */
-/* ----------------------------- */
-
-/* hasLayout for IE6/IE7 */
-.ie67 .clearfix,
-.ie67 .line,
-.ie67 .mod,
-.ie67 .row,
-.ie67 .col {
-	zoom: 1;
-}
-
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs a width on IE6/IE7 */
-.ie67 .btn,
-.ie67 .col,
-.ie67 .inbl {
-	display: inline;
-	zoom: 1;
-}
-.ie8 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-.ie67 * {
-	behavior: url(/js/boxsizing.htc);
-}
-*/
-
-/* ----------------------------- */
-/* ==print */
-/* ----------------------------- */
-
-/* quick print reset */
-@media print {
-	p,
-	blockquote {
-		orphans: 2;
-		widows: 2;
-	}
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid;
-	}
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid;
-	}
-}
-
-/* orientation iOS font-size fix */
-@media (orientation: landscape) and (max-device-width: 768px) {
-	html,
-	body {
-		-webkit-text-size-adjust: 100%;
-	}
-}
\ No newline at end of file
diff --git a/sass/forms.scss b/sass/_forms.scss
similarity index 88%
rename from sass/forms.scss
rename to sass/_forms.scss
index e34fc36..b95fba6 100644
--- a/sass/forms.scss
+++ b/sass/_forms.scss
@@ -7,6 +7,29 @@
  * Source: github.com/nathansmith/formalize and www.sitepen.com 
  */
 
+form,
+fieldset {
+	border: none;
+}
+
+/**
+ * 1. Bugfix alignment
+ */
+input,
+button, select,
+label, .btn {
+	vertical-align: middle; /* 1 */
+	font-family: inherit;
+}
+
+/**
+ * 1. Prevents horizontal resizing
+ */
+textarea {
+	resize: vertical; /* 1 */
+	font-family: inherit;
+}
+
 
 /**
  * Buttons 
diff --git a/sass/grids.scss b/sass/_grids.scss
similarity index 73%
rename from sass/grids.scss
rename to sass/_grids.scss
index 8cc70b6..f6e38a6 100644
--- a/sass/grids.scss
+++ b/sass/_grids.scss
@@ -33,3 +33,12 @@
 .grid3-1 > *:first-child,
 .grid1-3 > * + * { width: 74.5%; }
 
+/**
+ * Responsive grids
+ */
+@include mq(small) {
+	.grid4 > * { width: 49% !important; } 
+	.grid4 > :first-child + * + * { margin-left: 0 !important; }
+	.grid6 > * { width: 32% !important; }  
+	.grid6 > :first-child + * + * + * { margin-left: 0 !important; }
+}
diff --git a/sass/_helpers.scss b/sass/_helpers.scss
new file mode 100644
index 0000000..6665079
--- /dev/null
+++ b/sass/_helpers.scss
@@ -0,0 +1,67 @@
+/* ----------------------------- */
+/* ==helpers                       */
+/* ----------------------------- */
+
+/**
+ * .{SIZE}-hidden and .{SIZE}-visible helpers
+ */
+$breakpoints: large, small, tiny;
+
+@each $size in $breakpoints {
+    .#{$size}-hidden {
+        @include mq($size) {
+            display: none;
+        }
+    }
+
+    .#{$size}-visible {
+        display: block;
+
+        @include mq($size) {
+            display: block;
+        }
+    }
+}
+
+
+/**
+ * Clearfix
+ */
+.clearfix {
+    &:after {
+	   content: '';
+	   clear: both;
+	   display: table;
+    }
+
+    @if $legacy-support-for-ie {
+        *zoom: 1;
+    }
+}
+
+/**
+ * Hidden yet accessible content
+ */
+.visuallyhidden {
+    clip: rect(0 0 0 0);
+    width:   1px;
+    height:  1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    border:  0;
+    position: absolute;
+}
+
+/** 
+ * Prevent long strings to break out of their container
+ */
+.wrap {
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    hyphens: auto;
+}
+
diff --git a/sass/_icons.scss b/sass/_icons.scss
new file mode 100644
index 0000000..9daea39
--- /dev/null
+++ b/sass/_icons.scss
@@ -0,0 +1,188 @@
+/* ----------------------------- */
+/* ==icons                       */
+/* ----------------------------- */
+
+.icon {
+  @include inline-block();
+}
+
+/**
+ * 1. Future proof; prevent screen-reader from reading it
+ * 2. Triggers hardware acceleration
+ */
+.icon:before,
+.icon > li:before,
+.icon.after:after,
+.icon.after > li:after {
+    content: "";
+    @include inline-block(middle);
+    position: relative; 
+    top: -.1em;
+    margin: 0 .3em 0 0;
+    font: 1.4em/1 sans-serif;
+    color: #000;
+    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
+    speak: none; /* 1 */
+
+    @include mq(medium) {
+        font: 1em/0.6 sans-serif;
+        -webkit-transform: rotateZ(0.05deg); /* 2 */
+    }
+}
+
+.icon.after,
+.icon.after > li {
+    &:after {
+        margin: 0 0 0 8px;
+    }
+}
+
+ul.icon {
+    display: block;
+}
+
+ul.icon > li {
+    list-style: none;
+}
+
+ul.icon:before,
+ul.icon.after:after {
+    content: "";
+}
+
+.icon.after,
+.icon.after > li {
+    &:before {
+        content: "" !important;
+    }
+}
+
+/**
+ * Unicode icons
+ * (name, unicode code, is-bold?)
+ */
+$icons: ( (rate,     2605, false),
+          (unrate,   2606, false),
+          (check,    2713, false),
+          (uncheck,  2717, false),
+          (cloud,    2601, false),
+          (dl,       21E3,  true),
+          (cross,    2716,  true),
+          (arrow1,   2192, false),
+          (arrow2,   279E, false),
+          (arrow3,   279A, false),
+          (bracket1, 2039,  true),
+          (bracket2, 203A,  true),
+          (up,       25B2, false),
+          (down,     25BC, false),
+          (bull,     2022, false),
+          (bull2,    25E6, false),
+          (bull3,    2023, false),
+          (nav,      2630,  true),
+          (losange,  25C6, false),
+          (asteri,   2731,  true),
+          (mail,     2709, false) );
+
+/**
+ * Looping through icons
+ */
+@each $item in $icons {
+    .icon-#{nth($item, 1)}:before,
+    .icon-#{nth($item, 1)} > li:before,
+    .icon-#{nth($item, 1)}.after:after,
+    .icon-#{nth($item, 1)}.after > li:after {
+        content: "\#{nth($item, 2)}";
+        @if nth($item, 3) == true {
+            font-weight: bold;
+        }
+    }
+
+}
+
+/**
+ * Icons specific
+ */
+.icon-arrow1:before, 
+.icon-arrow1 > li:before,
+.icon-arrow1.after:after, 
+.icon-arrow1.after > li:after {
+    position: relative; 
+    top: -.15em;
+}
+
+.icon-bracket1:before, 
+.icon-bracket1 > li:before,
+.icon-bracket1.after:after, 
+.icon-bracket1.after > li:after,
+.icon-bracket2:before, 
+.icon-bracket2 > li:before,
+.icon-bracket2.after:after, 
+.icon-bracket2.after > li:after {
+    font-size: 1.6em;
+    position: relative; 
+    top: -.15em;
+}
+
+.icon-bull:before, 
+.icon-bull > li:before,
+.icon-bull.after:after, 
+.icon-bull.after > li:after {
+    font-size: 1.2em;
+    top: -.05em;
+}
+
+.icon-bull2:before, 
+.icon-bull2 > li:before,
+.icon-bull2.after:after, 
+.icon-bull2.after > li:after {
+    top: -.05em;
+}
+
+.icon-bull3:before, 
+.icon-bull3 > li:before,
+.icon-bull3.after:after, 
+.icon-bull3.after > li:after {
+    font-size: 1.6em;
+    top: -.05em;
+}
+
+.icon-nav:before, 
+.icon-nav > li:before,
+.icon-nav.after:after, 
+.icon-nav.after > li:after {
+    font-size: 1.6em;
+}
+
+.icon-mail:before, 
+.icon-mail > li:before,
+.icon-mail.after:after, 
+.icon-mail.after > li:after {
+    font-size: 1.6em;
+    top: -.05em;
+}
+
+ol.styled {
+  counter-reset: styled;
+} 
+
+ol.styled > li {
+    list-style-type: none;
+    counter-increment: styled;
+    margin-bottom: .3em;
+}
+
+ol.styled > li:before {
+    content: counter(styled); 
+    @include inline-block(middle);
+    width: 1em; 
+    height: 1em;
+    line-height: 1;
+    padding: 2px;
+    margin-right: .4em;
+    background: rgba(0,0,0,.5);
+    border-radius: 50%;
+    font-size: .9em;
+    text-align: center;
+    text-indent: -.1em;
+    color: white;		
+}
\ No newline at end of file
diff --git a/sass/_iefix.scss b/sass/_iefix.scss
new file mode 100644
index 0000000..daacddf
--- /dev/null
+++ b/sass/_iefix.scss
@@ -0,0 +1,22 @@
+/* HasLayout for IE6/IE7 */
+@if $legacy-support-for-ie {
+	.row, .col {
+		*zoom: 1;
+	}
+
+	/* Warning: .col needs a width on IE6/IE7 */
+	.col {
+		*display: inline;
+		*zoom: 1;
+	}
+
+	/**
+	 * Add a slash at the end of this comment
+	 * If you want to enable box-sizing for IE6/IE7
+	 * with a polyfill 
+	 * Source: https://github.com/Schepp/box-sizing-polyfill *	
+	* {
+		behavior: url(/js/boxsizing.htc);
+	}
+	/**/
+}
\ No newline at end of file
diff --git a/sass/_layout.scss b/sass/_layout.scss
new file mode 100644
index 0000000..42d84e4
--- /dev/null
+++ b/sass/_layout.scss
@@ -0,0 +1,233 @@
+/* ----------------------------- */
+/* ==layouts                     */
+/* ----------------------------- */
+
+/**
+ * Switching box-model for all elements
+ * 1. ...and pseudo-elements 
+ */
+*, 
+*:after, /* 1 */
+*:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/**
+ * Float layout
+ * module, contains floats (.item is the same) 
+ */
+.mod, 
+.item { 
+    overflow: hidden;
+}
+
+/** 
+ * Blocks that needs to be placed under floats 
+ */
+.clear, 
+.line, 
+.row {
+    clear: both;
+}
+
+/**
+ * Blocks that must contain floats 
+ */
+.clearfix, 
+.line, 
+.mod {
+    @extend .clearfix;
+}
+
+/**
+ * Table layout 
+ */
+.row {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+}
+
+.row > *,
+.col {
+    display: table-cell;
+    vertical-align: top;
+}
+
+/**
+ * Inline-blocks
+ */
+.inbl {
+    @include inline-block(top);
+    margin-right: -.25em;
+}
+
+/**
+ * Flexbox layout 
+ */
+.flex {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.flex-h {
+    -webkit-box-orient: horizontal;
+       -moz-box-orient: horizontal;
+    -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+            flex-direction: row;
+}
+
+.flex-v {
+    -webkit-box-orient: vertical;
+       -moz-box-orient: vertical;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+}
+
+.flex-fluid {
+    -webkit-box-flox: 1;
+       -moz-box-flex: 1;
+        -webkit-flex: 1;
+           -moz-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+}
+
+.flex-start {
+    -webkit-box-ordinal-group: -1;
+       -moz-box-ordinal-group:  0;
+               -ms-flex-order: -1;
+                -webkit-order: -1;
+                   -moz-order: -1;
+                        order: -1;
+}
+
+.flex-mid {
+    -webkit-box-ordinal-group:  1;
+       -moz-box-ordinal-group:  1;
+               -ms-flex-order:  1;
+                -webkit-order:  1;
+                   -moz-order:  1;
+                        order:  1;
+}
+
+.flex-end {
+    -webkit-box-ordinal-group: 42;
+       -moz-box-ordinal-group: 42;
+               -ms-flex-order: 42;
+                -webkit-order: 42;
+                   -moz-order: 42;
+                        order: 42;
+}
+
+/* Alignments (blocks and inline) */
+/* ------------------------------ */
+
+.left  { float: left;  }
+.right { float: right; }
+
+img.left { margin-right: 1em; }
+img.right { margin-left: 1em; }
+
+img.left, 
+img.right { margin-bottom: 5px; }
+
+.center    { margin-left: auto; margin-right: auto; }
+.txtleft   { text-align: left; }
+.txtright  { text-align: right; }
+.txtcenter { text-align: center; }
+
+/**
+ * Blocks widths 
+ * (percentages and pixels) 
+ */
+%width-helper {
+    @include mq(small) {
+        width: auto;
+    }
+}
+
+.w10    { width: 10%; }
+.w20    { width: 20%; }
+.w25    { width: 25%; }
+.w30    { width: 30%; }
+.w33    { width: 33.333%; }
+.w40    { width: 40%; }
+.w50    { width: 50%; }
+.w60    { width: 60%;     @extend %width-helper; }
+.w66    { width: 66.666%; @extend %width-helper; }
+.w70    { width: 70%;     @extend %width-helper; }
+.w75    { width: 75%;     @extend %width-helper; }
+.w80    { width: 80%;     @extend %width-helper; }
+.w90    { width: 90%;     @extend %width-helper; }
+.w100   { width: 100%;    @extend %width-helper; }
+
+.w50p   { width:  50px; }
+.w100p  { width: 100px; }
+.w150p  { width: 150px; }
+.w200p  { width: 200px; }
+.w300p  { width: 300px; }
+.w400p  { width: 400px; }
+.w500p  { width: 500px; }
+.w600p  { width: 600px; @extend %width-helper; }
+.w700p  { width: 700px; @extend %width-helper; }
+.w800p  { width: 800px; @extend %width-helper; }
+.w960p  { width: 960px; @extend %width-helper; }
+.mw960p { max-width: 960px; }
+
+/**
+ * Spacing helpers
+ * p, m = padding,margin
+ * a, t, r, b, l = all, top, right, bottom, left
+ * s, m, l, n, 0 = small(10px), medium(20px), large(30px), zero or none(0)
+ * Source: https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
+ */
+.m-reset, .ma0 { margin: 0 !important; }
+.p-reset, .pa0 { padding: 0 !important; }
+.ma1, .mas { margin: 10px !important; }
+.ma2, .mam { margin: 20px !important; }
+.ma3, .mal { margin: 30px !important; }
+.pa1, .pas { padding: 10px; }
+.pa2, .pam { padding: 20px; }
+.pa3, .pal { padding: 30px; }
+
+.mt0, .mtn { margin-top: 0 !important; }
+.mt1, .mts { margin-top: 10px !important; }
+.mt2, .mtm { margin-top: 20px !important; }
+.mt3, .mtl { margin-top: 30px !important; }
+.mr0, .mrn { margin-right: 0; }
+.mr1, .mrs { margin-right: 10px; }
+.mr2, .mrm { margin-right: 20px; }
+.mr3, .mrl { margin-right: 30px; }
+.mb0, .mbn { margin-bottom: 0 !important; }
+.mb1, .mbs { margin-bottom: 10px !important; }
+.mb2, .mbm { margin-bottom: 20px !important; }
+.mb3, .mbl { margin-bottom: 30px !important; }
+.ml0, .mln { margin-left: 0; }
+.ml1, .mls { margin-left: 10px; }
+.ml2, .mlm { margin-left: 20px; }
+.ml3, .mll { margin-left: 30px; }
+
+.pt0, .ptn { padding-top: 0; }
+.pt1, .pts { padding-top: 10px; }
+.pt2, .ptm { padding-top: 20px; }
+.pt3, .ptl { padding-top: 30px; }
+.pr0, .prn { padding-right: 0; }
+.pr1, .prs { padding-right: 10px; }
+.pr2, .prm { padding-right: 20px; }
+.pr3, .prl { padding-right: 30px; }
+.pb0, .pbn { padding-bottom: 0; }
+.pb1, .pbs { padding-bottom: 10px; }
+.pb2, .pbm { padding-bottom: 20px; }
+.pb3, .pbl { padding-bottom: 30px; }
+.pl0, .pln { padding-left: 0; }
+.pl1, .pls { padding-left: 10px; }
+.pl2, .plm { padding-left: 20px; }
+.pl3, .pll { padding-left: 30px; }
\ No newline at end of file
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
new file mode 100644
index 0000000..54db313
--- /dev/null
+++ b/sass/_mixins.scss
@@ -0,0 +1,60 @@
+/* ----------------------------- */
+/* ==mixins                      */
+/* ----------------------------- */
+
+/**
+ * Mixin to handle media queries breakpoints
+ */
+@mixin mq($keyword) {
+	@if $keyword == large  {
+		@media (min-width: 1280px) { @content; }
+	}
+	@if $keyword == medium {
+		@media (min-width: 769px) { @content; }
+	}
+	@if $keyword == small {
+		@media (max-width: 768px)  { @content; }
+	}
+	@if $keyword == tiny  {
+		@media (max-width: 640px)  { @content; }
+	}
+	@if $keyword == retina {
+        @media 
+            only screen and (-webkit-min-device-pixel-ratio: 2),
+            only screen and (min-resolution: 192dpi),
+            only screen and (min-resolution: 2dppx) {
+                @content;
+        }
+    }
+}
+
+/**
+ * Mixin to handle REM font sizing with PX fallback
+ */
+@mixin rem($value, $base: 10) {
+    @if $legacy-support-for-ie {
+        font-size: $value + px;
+    }
+    font-size: $value / $base + rem;
+}
+
+/**
+ * Compass-like inline-block mixin
+ */ 
+@mixin inline-block($alignment: none) {
+	@if $legacy-support-for-mozilla {
+		display: -moz-inline-stack; 
+	}
+	
+	display: inline-block;
+	
+	@if $alignment and $alignment != none {
+		vertical-align: $alignment; 
+	}
+
+	@if $legacy-support-for-ie {
+		*vertical-align: auto;
+		zoom: 1;
+		*display: inline; 
+	}
+}
\ No newline at end of file
diff --git a/sass/print.scss b/sass/_print.scss
similarity index 81%
rename from sass/print.scss
rename to sass/_print.scss
index cf698a1..20afdf1 100644
--- a/sass/print.scss
+++ b/sass/_print.scss
@@ -15,7 +15,7 @@
 		font-family: serif;
 		font-size: 12pt;
 		background-color: #fff   !important;
-		color: #333 			 !important;
+		color: #000 			 !important;
 	}
 
 	h1,	h2,	h3, h4,	h5, h6,
@@ -32,8 +32,15 @@
 		display: block;
 	}
 
+	/**
+	 * Try turning images to black and white if supported filters
+	 */
 	img { 
-	  @include filter(grayscale(100%));
+		-webkit-filter: grayscale(100%);
+		-moz-filter: grayscale(100%);
+		-ms-filter: grayscale(100%);
+		-o-filter: grayscale(100%);
+		filter: grayscale(100%);
 	}
 
 	/**
@@ -82,7 +89,8 @@
 		}
 
 		&[href^="javascript:"]:after,
-		&[href^="#"]:after {
+		&[href^="#"]:after,
+		&[href=""] {
 			content: ''; /* 2 */
 		}
 	}
diff --git a/sass/_reset.scss b/sass/_reset.scss
new file mode 100644
index 0000000..dd6f891
--- /dev/null
+++ b/sass/_reset.scss
@@ -0,0 +1,183 @@
+/* ----------------------------- */
+/* ==reset                       */
+/* ----------------------------- */
+
+/**
+ * Soft reset 
+ */
+html, body,
+textarea,
+figure, label {
+	margin: 0;
+	padding: 0;
+}
+
+ul, ol {
+	padding-left: 2em;
+
+	&.unstyled {
+		list-style: none;
+	}
+}
+
+code, pre,
+samp, kbd {
+	white-space: pre-wrap;
+	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
+	line-height: 1em;
+}
+
+code, kbd, mark { 
+	border-radius: 2px; 
+}
+
+em { 
+	font-style: italic; 
+}
+
+strong { 
+	font-weight: bold; 
+}
+
+kbd {
+	padding: 0 2px;
+	border: 1px solid #999;
+}
+
+code {
+	padding: 2px 4px;
+	background: rgba(0,0,0,.04);
+	color: #b11; 
+}
+
+mark {
+	padding:2px 4px;
+	background: #ff0;
+}
+
+sup,
+sub {
+	vertical-align: 0;
+	position: relative;
+}
+
+sup {
+	bottom: 1ex;
+}
+
+sub {
+	top: .5ex;
+}
+
+table { 
+	margin-bottom: 1.5em; 
+}
+
+/**
+ * Avoid top margins on first content element 
+ */
+p, ul, ol dl,
+blockquote, pre,
+h1, h2, h3, h4, h5, h6 {
+	&:first-child {
+		margin-top: 0;
+	}
+}
+
+/**
+ * Avoid margins on nested elements 
+ */
+li {
+	p, ul, ol {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
+/**
+ * Prevents those to break out of their container
+ */
+img, table, td, 
+blockquote, code, pre, 
+textarea, input, video {
+	max-width: 100%;
+}
+
+/**
+ * Pictures
+ * 1. Bugfix for IE8
+ * 2. Bigfix for Gmap3 
+ * 3. Remove blue border on IE
+ */
+img {
+	height: auto;
+	vertical-align: middle;
+	width: auto; /* 1 */
+
+	#map_canvas &, 
+	.gmnoprint & {
+		max-width: none; /* 2 */
+	}
+
+	a & {
+		border: 0; /* 3 */
+	}
+}
+
+@include mq(small) {
+	div, textarea, 
+	table, td, th, 
+	code, pre, samp {
+	    -ms-word-break: break-all;
+	    word-break: break-all;
+	    word-break: break-word;
+	    -webkit-hyphens: auto;
+	    -moz-hyphens: auto;
+	    hyphens: auto;
+    }
+}
+
+/**
+ * Hide script and style tags in case of table mode
+ */
+body > script,
+body > style { 
+	display: none !important;
+}
+
+
+/* skip-links */
+.skip-links {
+	position: absolute;
+
+	a {
+		position: absolute;
+		left: -7000px;
+		padding: 0.5em;
+		background: #000;
+		color:#fff;
+		text-decoration: none;
+
+		&:focus {
+			position: static;
+		}
+	}
+}
+
+/* Quick print reset */
+@media print {
+	p, blockquote {
+		orphans: 2;
+		widows: 2;
+	}
+
+	blockquote,
+	ul, ol {
+		page-break-inside: avoid;
+	}
+
+	h1, h2, h3,
+	caption {
+		page-break-after: avoid;
+	}
+}
\ No newline at end of file
diff --git a/sass/rwd.scss b/sass/_rwd.scss
similarity index 56%
rename from sass/rwd.scss
rename to sass/_rwd.scss
index 5ac40bb..105e956 100644
--- a/sass/rwd.scss
+++ b/sass/_rwd.scss
@@ -2,34 +2,44 @@
 /* ==desktop and retina medias   */
 /* ----------------------------- */
 
-@include r(medium) {
-	/* Here go rules for big resources and big screens 
-	 * like: background-images, font-faces, etc. 
-	 */
+/* ----------------------------- */
+/* ==viewport fixing for RWD     */
+/* ----------------------------- */
+@-webkit-viewport {
+	width: device-width;
+	zoom: 1.0;
+}
+@-moz-viewport {
+	width: device-width;
+	zoom: 1.0;
+}
+@-ms-viewport {
+	width: device-width;
+	zoom: 1.0;
+}
+@-o-viewport {
+	width: device-width;
+	zoom: 1.0;
+}
+@viewport {
+	width: device-width;
+	zoom: 1.0;
 }
 
-@media
-only screen and (-webkit-min-device-pixel-ratio: 2),
-only screen and (   min--moz-device-pixel-ratio: 2),
-only screen and (     -o-min-device-pixel-ratio: 2/1),
-only screen and (        min-device-pixel-ratio: 2),
-only screen and (                min-resolution: 192dpi),
-only screen and (                min-resolution: 2dppx) { 
-  /* Retina-specific stuff here */
+@include mq(medium) {
+	/* Big resources like background-images, font-faces, etc. */
 }
 
+@include mq(retina) {
+	/* Retina-specific stuff here */
+}
 
 /* ---------------------------------- */
-/* ==Responsive large / medium / tiny */
+/* ==Responsive large / small / tiny */
 /* ---------------------------------- */
 
-@include r(large) {
+@include mq(large) {
 
-	/* Layouts for large (l) screens */
-	.large-hidden,
-	.tablet-hidden { display: none  !important; }
-	.large-visible { display: block !important; }
-	
 	.large-no-float { float: none; }
 	
 	.large-inbl {
@@ -69,54 +79,33 @@ only screen and (                min-resolution: 2dppx) {
 	.large-man { margin: 0 !important; }
 }
 
-@include r(medium) {
+@include mq(small) {
+	.small-no-float { float: none; }
 
-	/* quick tablet reset */
-	.w60,
-	.w66,
-	.w70,
-	.w75,
-	.w80,
-	.w90,
-	.w100,
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p,
-	.medium-wauto { width: auto; } 
-
-	/* layouts for medium (m) screens */
-	.medium-hidden,
-	.tablet-hidden  { display: none  !important; }
-	.medium-visible { display: block !important; }
-
-	.medium-no-float {float: none; }
-
-	.medium-inbl {
+	.small-inbl {
 		@include inline-block(top);
 		float: none;
 	}
 
-	.medium-row {
+	.small-row {
 		display: table !important;
 		table-layout: fixed !important;
 		width: 100% !important;
 	}
 
-	.medium-col {
+	.small-col {
 		display: table-cell !important;
 		vertical-align: top !important;
 	}
 
-	/* widths for medium (m) screens */
-	.medium-w25 { width: 25% !important; }
-	.medium-w33 { width: 33.3333% !important; }
-	.medium-w50 { width: 50% !important; }
-	.medium-w66 { width: 66.6666% !important; }
-	.medium-w75 { width: 75% !important; }
+	/* widths for small (s) 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; }
 
-	.medium-w100 {
+	.small-w100 {
 		display: block  !important;
 		float: none 	!important;
 		clear: none 	!important;
@@ -125,18 +114,13 @@ only screen and (                min-resolution: 2dppx) {
 		margin-right: 0 !important;
 		border: 0;		
 	}
-	/* margins for medium (m) screens */
-	.medium-ma0,
-	.medium-man { margin: 0 !important; }
 
-	/* Responsive grids */
-	.grid4 > * {width: 49% !important; } 
-	.grid4 > :first-child + * + * {margin-left: 0 !important;}
-	.grid6 > * {width: 32% !important; }  
-	.grid6 > :first-child + * + * + * {margin-left: 0 !important;}
+	/* margins for small (s) screens */
+	.small-ma0,
+	.small-man { margin: 0 !important; }
 }
 
-@include r(small) {
+@include mq(tiny) {
 
 	/* Quick smartphone reset */
 	.mod,
@@ -167,10 +151,6 @@ only screen and (                min-resolution: 2dppx) {
 		width: 100% !important;
 	}
 
-	/* Layouts for tiny (t) screens */
-	.tiny-hidden,
-	.phone-hidden { display: none  !important; }
-	.tiny-visible { display: block !important; }
 
 	.tiny-no-float { float: none; }
 
@@ -190,15 +170,6 @@ only screen and (                min-resolution: 2dppx) {
 		vertical-align: top !important;
 	}
 
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-
-	thead { display: none; }
-
 	/* widths for tiny (t) screens */
 	.tiny-w25 { width: 25% !important; }
 	.tiny-w33 { width: 33.3333% !important; }
diff --git a/sass/tables.scss b/sass/_tables.scss
similarity index 79%
rename from sass/tables.scss
rename to sass/_tables.scss
index c7b0fbf..ba27d81 100644
--- a/sass/tables.scss
+++ b/sass/_tables.scss
@@ -1,6 +1,7 @@
 /* ----------------------------- */
 /* ==tables                      */
 /* ----------------------------- */
+
 $border: 1px solid #ccc;
 
 table,
@@ -29,6 +30,12 @@ table {
 	border: $border;
 }
 
+thead {
+	@include mq(tiny) {
+		display: none;
+	}
+}
+
 tr > * + * {
 	border-left: $border;
 }
@@ -38,6 +45,12 @@ td {
 	padding: .3em .8em;
 	text-align: left;
 	border-bottom: $border;
+
+	@include mq(tiny) {
+		display: block !important;
+		width: auto !important;
+		text-align: left !important;
+	}
 }
 
 td {
@@ -50,10 +63,13 @@ td {
 .alternate { 
 	border: 0;
 
-	tbody { border: $border; }
+	thead tr > * + * { 
+		border-left: 0;
+	}
 
-	thead tr > * + * { border-left: 0; }
-	tbody tr > * + * { border-left: $border; }
+	tbody tr > * + * {
+		border-left: $border;
+	}
 }
 
 /** 
diff --git a/sass/_typography.scss b/sass/_typography.scss
new file mode 100644
index 0000000..a6694bb
--- /dev/null
+++ b/sass/_typography.scss
@@ -0,0 +1,73 @@
+/* ----------------------------- */
+/* ==typography                  */
+/* ----------------------------- */
+
+/**
+ * 1. Base font-size (corresponds to 10px) adapted to REM unit 
+ * 2. Orientation iOS font-size fix
+ */
+html {
+	font-size: 62.5%; /* 1 */
+	@media (orientation: landscape) and (max-device-width: 768px) {
+		-webkit-text-size-adjust: 100%; /* 2 */
+	}
+}
+
+body {
+	color: #000;
+	font-family: "Century Gothic", helvetica, arial, sans-serif;
+	@include rem(14);
+	line-height: 1.5;
+}
+
+/**
+ * Font-sizing for content
+ * Preserves vertical-rythm
+ * Source: http://soqr.fr/vertical-rhythm/ 
+ */
+p, ul, ol, dl,
+blockquote, pre,
+td, th,
+label, textarea,
+caption, details, figure {
+	@include rem(14);
+	line-height: 1.5;
+	margin: .75em 0 0;
+}
+
+h1, .h1-like,
+h2, .h2-like,
+h3, .h3-like,
+h4, .h4-like,
+h5, .h5-like,
+h6, .h6-like {
+	font-weight: normal;
+	margin: 21px 0 0 0;
+}
+
+h1, .h1-like, 
+h2, .h2-like,
+h3, .h3-like {
+	line-height: 42px;
+}
+
+h4, .h4-like,
+h5, .h5-like,
+h6, .h6-like {
+	line-height: 21px;
+}
+
+h1, .h1-like { @include rem(26); }
+h2, .h2-like { @include rem(24); }
+h3, .h3-like { @include rem(22); }
+h4, .h4-like { @include rem(20); }
+h5, .h5-like { @include rem(18); }
+h6, .h6-like { @include rem(16); }
+
+/* alternate font-sizing */
+.smaller	 { @include rem(10); }
+.small   	 { @include rem(12); }
+.medium 	 { @include rem(14); }
+.big     	 { @include rem(16); }
+.bigger  	 { @include rem(18); }
+.biggest 	 { @include rem(20); }
\ No newline at end of file
diff --git a/sass/icons.scss b/sass/icons.scss
deleted file mode 100644
index b04757c..0000000
--- a/sass/icons.scss
+++ /dev/null
@@ -1,255 +0,0 @@
-/* ----------------------------- */
-/* ==icons and bullets           */
-/* ----------------------------- */
-
-.icon {
-  @include inline-block();
-}
-
-/**
- * 1. Future proof; prevent screen-reader from reading it
- */
-.icon:before,
-.icon > li:before,
-.icon.after:after,
-.icon.after > li:after {
-  content: "";
-  @include inline-block(middle);
-  position: relative; 
-  top: -.1em;
-  margin: 0 .3em 0 0;
-  font: 1.4em/1 sans-serif;
-  color: #000;
-  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
-  speak: none; /* 1 */
-}
-
-@media (min-device-width: 768px) {
-  .icon:before,
-  .icon > li:before,
-  .icon.after:after,
-  .icon.after > li:after {
-    font: 1em/0.6 sans-serif;
-    -webkit-transform: rotateZ(0.05deg);
-  }
-}
-
-.icon.after,
-.icon.after > li {
-  &:after {
-    margin: 0 0 0 8px;
-  }
-}
-
-ul.icon {
-  display: block;
-}
-
-ul.icon > li {
-  list-style: none;
-}
-
-ul.icon:before,
-ul.icon.after:after {
-  content:""
-}
-
-.icon.after,
-.icon.after > li {
-  &:before {
-    content: "" !important
-  }
-}
-
-.icon-rate:before, 
-.icon-rate > li:before,
-.icon-rate.after:after, 
-.icon-rate.after > li:after {
-  content: "\2605";
-}
-
-.icon-unrate:before, 
-.icon-unrate > li:before,
-.icon-unrate.after:after, 
-.icon-unrate.after > li:after {
-  content: "\2606";
-}
-
-.icon-check:before, 
-.icon-check > li:before,
-.icon-check.after:after, 
-.icon-check.after > li:after {
-  content: "\2713";
-}
-
-.icon-uncheck:before, 
-.icon-uncheck > li:before,
-.icon-uncheck.after:after, 
-.icon-uncheck.after > li:after {
-  content: "\2717";
-}
-
-.icon-cloud:before, 
-.icon-cloud > li:before,
-.icon-cloud.after:after, 
-.icon-cloud.after > li:after {
-  content: "\2601";
-}
-
-.icon-dl:before, 
-.icon-dl > li:before,
-.icon-dl.after:after, 
-.icon-dl.after > li:after {
-  content: "\21E3";
-  font-weight: bold;
-}
-
-.icon-cross:before, 
-.icon-cross > li:before,
-.icon-cross.after:after, 
-.icon-cross.after > li:after {
-  content: "\2716";
-  font-weight: bold;
-}
-
-.icon-arrow1:before, 
-.icon-arrow1 > li:before,
-.icon-arrow1.after:after, 
-.icon-arrow1.after > li:after {
-  content: "\2192";
-  position: relative; top: -0.15em;
-}
-
-.icon-arrow2:before, 
-.icon-arrow2 > li:before,
-.icon-arrow2.after:after, 
-.icon-arrow2.after > li:after {
-  content: "\279E";
-}
-
-.icon-arrow3:before, 
-.icon-arrow3 > li:before,
-.icon-arrow3.after:after, 
-.icon-arrow3.after > li:after {
-  content: "\279A";
-}
-
-.icon-bracket1:before, 
-.icon-bracket1 > li:before,
-.icon-bracket1.after:after, 
-.icon-bracket1.after > li:after {
-  content: "\2039";
-  font-weight: bold;
-  font-size: 1.6em;
-  position: relative; 
-  top: -.15em;
-}
-
-.icon-bracket2:before, 
-.icon-bracket2 > li:before,
-.icon-bracket2.after:after, 
-.icon-bracket2.after > li:after {
-  content: "\203A";
-  font-weight: bold;
-  font-size: 1.6em;
-  position: relative; top: -0.15em;
-}
-
-.icon-up:before, 
-.icon-up > li:before,
-.icon-up.after:after, 
-.icon-up.after > li:after {
-  content: "\25B2";
-}
-
-.icon-down:before, 
-.icon-down > li:before,
-.icon-down.after:after, 
-.icon-down.after > li:after {
-  content: "\25BC";
-}
-
-.icon-bull:before, 
-.icon-bull > li:before,
-.icon-bull.after:after, 
-.icon-bull.after > li:after {
-  content: "\2022";
-  font-size: 1.2em;
-  top: -0.05em;
-}
-
-.icon-bull2:before, 
-.icon-bull2 > li:before,
-.icon-bull2.after:after, 
-.icon-bull2.after > li:after {
-  content: "\25E6";
-  top: -0.05em;
-}
-
-.icon-bull3:before, 
-.icon-bull3 > li:before,
-.icon-bull3.after:after, 
-.icon-bull3.after > li:after {
-  content: "\2023";
-  font-size: 1.6em;
-  top: -0.05em;
-}
-
-.icon-nav:before, 
-.icon-nav > li:before,
-.icon-nav.after:after, 
-.icon-nav.after > li:after {
-  content: "\2630";
-  font-weight: bold;
-  font-size: 1.6em;
-}
-
-.icon-losange:before, 
-.icon-losange > li:before,
-.icon-losange.after:after, 
-.icon-losange.after > li:after {
-  content: "\25C6";
-}
-
-.icon-asteri:before, 
-.icon-asteri > li:before,
-.icon-asteri.after:after, 
-.icon-asteri.after > li:after {
-  content: "\2731";
-  font-weight: bold;
-}
-
-.icon-mail:before, 
-.icon-mail > li:before,
-.icon-mail.after:after, 
-.icon-mail.after > li:after {
-  content: "\2709";
-  font-size: 1.6em;
-  top: -.05em;
-}
-
-ol.styled {
-  counter-reset: styled;
-} 
-
-ol.styled > li {
-    list-style-type: none;
-    counter-increment: styled;
-    margin-bottom: .3em;
-}
-
-ol.styled > li:before {
-    content: counter(styled); 
-    display: inline-block;
-    width: 1em; height: 1em;
-    line-height: 1;
-    padding: 2px;
-    margin-right: .4em;
-    vertical-align: middle;
-    background: rgba(0,0,0,.5);
-    border-radius: 50%;
-    font-size: .9em;
-    text-align: center;
-    text-indent: -0.1em;
-    color: white;		
-}
\ No newline at end of file
diff --git a/sass/knacss.scss b/sass/knacss.scss
index 9876839..283c5cc 100644
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@@ -3,614 +3,25 @@
 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
 */
 
-/* Compass imports */
-@import "compass/css3";
-
-/* ----------------------------- */
-/* ==helpers */
-/* ----------------------------- */
-
-/**
- * Mixin handling REM with PX fallback
- * Takes either PX or REM as input
- * Outputs both in appropriate order
- */
-@mixin rem($property, $values) {
-  $px : (); 
-  $rem: ();
-  
-  @each $value in $values { 
-   
-    @if $value == 0 or $value == auto { 
-      $px : append($px , $value);
-      $rem: append($rem, $value);
-    }
-    
-    @else { 
-      $unit: unit($value);
-      $val: $value / ($value * 0 + 1);
-      
-      @if $unit == "px" { 
-        $px : append($px,  $value);
-        $rem: append($rem, ($val / 10 + rem));
-      }
-      
-      @if $unit == "rem" {
-        $px : append($px,  ($val * 10 + px));
-        $rem: append($rem, $value);
-      }
-    }
-  }
-  
-  #{$property}: $px;
-  #{$property}: $rem; 
-}
-
-@mixin r($breakpoint) {
-	@if $breakpoint == "large"  {
-		@media (min-width: 1280px) { @content; }
-	}
-	@if $breakpoint == "medium" {
-		@media (max-width: 768px)  { @content; }
-	}
-	@if $breakpoint == "small"  {
-		@media (max-width: 640px)  { @content; }
-	}
-}
-
-/**
- * Clearfix
- */
-.clearfix:after {
-	content: '';
-	clear: both;
-	display: table;
-}
-
-/**
- * Hidden yet accessible content
- */
-.visuallyhidden {
-    clip: rect(0 0 0 0);
-    width:   1px;
-    height:  1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    border:  0;
-    position: absolute;
-}
-
-/* ----------------------------- */
-/* ==reset */
-/* ----------------------------- */
-
-/**
- * 1. Base font-size (corresponds to 10px) adapted to REM unit 
- * 2. Orientation iOS font-size fix
- */
-html {
-	font-size: 62.5%; /* 1 */
-	@media (orientation: landscape) and (max-device-width: 768px) {
-		-webkit-text-size-adjust: 100%; /* 2 */
-	}
-}
-
-body {
-	background-color: #fff;
-	color: #000;
-	font-family: "Century Gothic", helvetica, arial, sans-serif;
-	@include rem('font-size', 14px);
-	line-height: 1.5;
-}
-
-/**
- * Font-sizing for content
- * Preserves vertical-rythm
- * Source: http://soqr.fr/vertical-rhythm/ 
- */
-p, ul, ol, dl,
-blockquote, pre,
-td, th,
-label, textarea,
-caption, details, figure {
-	@include rem('font-size', 14px);
-	line-height: 1.5;
-	margin: .75em 0 0;
-}
-
-h1, .h1-like,
-h2, .h2-like,
-h3, .h3-like,
-h4, .h4-like,
-h5, .h5-like,
-h6, .h6-like {
-	font-weight: normal;
-	@include rem('margin', 21px 0 0 0);
-}
-
-h1, .h1-like, 
-h2, .h2-like,
-h3, .h3-like {
-	@include rem('line-height', 42px 0 0 0);
-}
-
-h4, .h4-like,
-h5, .h5-like,
-h6, .h6-like {
-	@include rem('line-height', 21px 0 0 0);
-}
-
-h1, .h1-like { @include rem('font-size', 26px); }
-h2, .h2-like { @include rem('font-size', 24px); }
-h3, .h3-like { @include rem('font-size', 22px); }
-h4, .h4-like { @include rem('font-size', 20px); }
-h5, .h5-like { @include rem('font-size', 18px); }
-h6, .h6-like { @include rem('font-size', 16px); }
-
-/* alternate font-sizing */
-.smaller	 { @include rem('font-size', 10px); }
-.small   	 { @include rem('font-size', 12px); }
-.medium 	 { @include rem('font-size', 14px); }
-.big     	 { @include rem('font-size', 16px); }
-.bigger  	 { @include rem('font-size', 18px); }
-.biggest 	 { @include rem('font-size', 20px); }
-
-/**
- * Soft reset 
- */
-html, body,
-textarea,
-figure, label {
-	margin: 0;
-	padding: 0;
-}
-
-ul, ol {
-	padding-left: 2em;
-
-	&.unstyled {
-		list-style: none;
-	}
-}
-
-code, pre,
-samp, kbd {
-	white-space: pre-wrap;
-	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-	line-height: 1em;
-}
-
-code, kbd, mark { 
-	border-radius: 2px; 
-}
-
-em { 
-	font-style: italic; 
-}
-
-strong { 
-	font-weight: bold; 
-}
-
-kbd {
-	padding: 0 2px;
-	border: 1px solid #999;
-}
-
-code {
-	padding: 2px 4px;
-	background: rgba(0,0,0,.04);
-	color: #b11; 
-}
-
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-
-table { 
-	margin-bottom: 1.5em; 
-}
-
-/**
- * Avoid top margins on first content element 
- */
-p, ul, ol dl,
-blockquote, pre,
-h1, h2, h3, h4, h5, h6 {
-	&:first-child {
-		margin-top: 0;
-	}
-}
-
-/**
- * Avoid margins on nested elements 
- */
-li {
-	p, ul, ol {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-}
-
-/**
- * Prevents those to break out of their container
- */
-img, table, td, 
-blockquote, code, pre, 
-textarea, input, video {
-	max-width: 100%;
-}
-
-/**
- * You shall not pass 
- */
-div, textarea, 
-table, td, th, 
-code, pre, samp {
-	word-wrap: break-word;
-	@include hyphens(auto);
-}
-
-/**
- * Pictures 
- */
-img {
-	height: auto;
-	vertical-align: middle;
-
-	/* Gmap3 max-width bug fix on images */
-	#map_canvas &,
-	.gmnoprint & {
-		max-width: none;
-	}
-
-	a & {
-		border: 0;
-	}
-}
-
-/* scripts */
-body > script { display: none !important; }
-
-/* skip-links */
-.skip-links {
-	position: absolute;
-
-	a {
-		position: absolute;
-		left: -7000px;
-		padding: 0.5em;
-		background: #000;
-		color:#fff;
-		text-decoration: none;
-
-		&:focus {
-			position: static;
-		}
-	}
-}
-
-/* ----------------------------- */
-/* ==layout and modules */
-/* ----------------------------- */
-
-/**
- * Switching box-model for all elements
- * 1. ...and pseudo-elements 
- */
-*, 
-*:after, /* 1 */
-*:before {
-	@include box-sizing(border-box);
-}
-
-/**
- * Float layout
- * module, contains floats (.item is the same) 
- */
-.mod, .item { 
-	overflow: hidden;
-}
-
 /** 
- * Blocks that needs to be placed under floats 
+ * Enable support for old browsers
+ * 1. IE8-
+ * 2. Firefox 3.6
  */
-.clear, .line, .row {
-	clear: both;
-}
+$legacy-support-for-ie: true; /* 1 */
+$legacy-support-for-mozilla: true; /* 2 */
 
 /**
- * Blocks that must contain floats 
+ * Import modules of your choice
  */
-.clearfix, .line, .mod {
-	@extend .clearfix;
-}
-
-/**
- * Table layout 
- */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/**
- * Inline-blocks
- */
-.inbl {
-	@include inline-block(top);
-	margin-right: -.25em;
-}
-
-/**
- * Flexbox layout 
- */
-.flex {
-	display: -webkit-box;
-	display: -moz-box;
-	display: -ms-flexbox;
-	display: -webkit-flex;
-	display: flex;
-}
-
-.flex-h {
-	-webkit-box-orient: horizontal;
-	   -moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
-	    -ms-flex-direction: row;
-	        flex-direction: row;
-}
-
-.flex-v {
-	-webkit-box-orient: vertical;
-	   -moz-box-orient: vertical;
-	-webkit-flex-direction: column;
-	    -ms-flex-direction: column;
-	        flex-direction: column;
-}
-
-.flex-fluid {
-	-webkit-box-flox: 1;
-       -moz-box-flex: 1;
-	    -webkit-flex: 1;
-	       -moz-flex: 1;
-	        -ms-flex: 1;
-	            flex: 1;
-}
-
-.flex-start {
-	-webkit-box-ordinal-group: -1;
-       -moz-box-ordinal-group:  0;
-    		   -ms-flex-order: -1;
-	 			-webkit-order: -1;
-	    		   -moz-order: -1;
-	         			order: -1;
-}
-
-.flex-mid {
-	-webkit-box-ordinal-group:  1;
-	   -moz-box-ordinal-group:  1;
-			   -ms-flex-order:  1;
-	 		    -webkit-order:  1;
-	    		   -moz-order:  1;
-	         			order:  1;
-}
-
-.flex-end {
-	-webkit-box-ordinal-group: 42;
-	   -moz-box-ordinal-group: 42;
-			   -ms-flex-order: 42;
-	 			-webkit-order: 42;
-	    		   -moz-order: 42;
-	         			order: 42;
-}
-
-/* Alignments (blocks and inline) */
-/* ------------------------------ */
-
-.left  { float: left;  }
-.right { float: right; }
-
-img.left { margin-right: 1em; }
-img.right {	margin-left: 1em; }
-
-img.left, 
-img.right { margin-bottom: 5px; }
-
-.center    { margin-left: auto; margin-right: auto; }
-.txtleft   { text-align: left; }
-.txtright  { text-align: right; }
-.txtcenter { text-align: center; }
-
-/**
- * Blocks widths 
- * (percentages and pixels) 
- */
-.w10    { width: 10%; }
-.w20    { width: 20%; }
-.w25    { width: 25%; }
-.w30    { width: 30%; }
-.w33    { width: 33.333%; }
-.w40    { width: 40%; }
-.w50    { width: 50%; }
-.w60    { width: 60%; }
-.w66    { width: 66.666%; }
-.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; }
-
-/**
- * Spacing helpers
- * p, m = padding,margin
- * a, t, r, b, l = all, top, right, bottom, left
- * s, m, l, n, 0 = small(10px), medium(20px), large(30px), zero or none(0)
- * Source: https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
- */
-.m-reset, .ma0 { margin: 0 !important; }
-.p-reset, .pa0 { padding: 0 !important; }
-.ma1, .mas { margin: 10px !important; }
-.ma2, .mam { margin: 20px !important; }
-.ma3, .mal { margin: 30px !important; }
-.pa1, .pas { padding: 10px; }
-.pa2, .pam { padding: 20px; }
-.pa3, .pal { padding: 30px; }
-
-.mt0, .mtn { margin-top: 0 !important; }
-.mt1, .mts { margin-top: 10px !important; }
-.mt2, .mtm { margin-top: 20px !important; }
-.mt3, .mtl { margin-top: 30px !important; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: 10px; }
-.mr2, .mrm { margin-right: 20px; }
-.mr3, .mrl { margin-right: 30px; }
-.mb0, .mbn { margin-bottom: 0 !important; }
-.mb1, .mbs { margin-bottom: 10px !important; }
-.mb2, .mbm { margin-bottom: 20px !important; }
-.mb3, .mbl { margin-bottom: 30px !important; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: 10px; }
-.ml2, .mlm { margin-left: 20px; }
-.ml3, .mll { margin-left: 30px; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: 10px; }
-.pt2, .ptm { padding-top: 20px; }
-.pt3, .ptl { padding-top: 30px; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: 10px; }
-.pr2, .prm { padding-right: 20px; }
-.pr3, .prl { padding-right: 30px; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: 10px; }
-.pb2, .pbm { padding-bottom: 20px; }
-.pb3, .pbl { padding-bottom: 30px; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: 10px; }
-.pl2, .plm { padding-left: 20px; }
-.pl3, .pll { padding-left: 30px; }
-
-
-
-.desktop-hidden { display: none; } /* hidden on desktop */
-
-/* ----------------------------- */
-/* ==header */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==sidebar */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==footer */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==forms */
-/* ----------------------------- */
-form,
-fieldset {
-	border: none;
-}
-
-/**
- * 1. Bugfix alignment
- */
-input,
-button, select,
-label, .btn {
-	vertical-align: middle; /* 1 */
-	font-family: inherit;
-}
-
-/**
- * 1. Prevents horizontal resizing
- */
-textarea {
-	resize: vertical; /* 1 */
-	font-family: inherit;
-}
-
-/* ----------------------------- */
-/* ==main */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==iefix */
-/* ----------------------------- */
-
-/* HasLayout for IE6/IE7 */
-.ie67 {
-	.clearfix, .line, .mod, .row, .col {
-		zoom: 1;
-	}
-
-	/* Warning: .col needs a width on IE6/IE7 */
-	.col {
-		display: inline;
-		zoom: 1;
-	}
-
-	/**
-	 * Add a slash at the end of this comment
-	 * If you want to enable box-sizing for IE6/IE7
-	 * with a polyfill 
-	 * Source: https://github.com/Schepp/box-sizing-polyfill *	
-	* {
-		behavior: url(/js/boxsizing.htc);
-	}
-	/**/
-}
-
-/**
- * 1. Bugfixes for IE8
- */
-.ie8 img {
-	width: auto; /* 1 */
-}
-
-/* ----------------------------- */
-/* ==print */
-/* ----------------------------- */
-
-/* Quick print reset */
-@media print {
-	p, blockquote {
-		orphans: 2;
-		widows: 2;
-	}
-
-	blockquote,
-	ul, ol {
-		page-break-inside: avoid;
-	}
-
-	h1, h2, h3,
-	caption {
-		page-break-after: avoid;
-	}
-}
\ No newline at end of file
+@import "mixins";
+@import "helpers";
+@import "forms";
+@import "icons";
+@import "print";
+@import "tables";
+@import "grids";
+@import "layout";
+@import "typography";
+@import "iefix";
+@import "reset";
\ No newline at end of file