diff --git a/forms.css b/css/forms.css
similarity index 100%
rename from forms.css
rename to css/forms.css
diff --git a/grids.css b/css/grids.css
similarity index 100%
rename from grids.css
rename to css/grids.css
diff --git a/icons.css b/css/icons.css
similarity index 100%
rename from icons.css
rename to css/icons.css
diff --git a/knacss.css b/css/knacss.css
similarity index 100%
rename from knacss.css
rename to css/knacss.css
diff --git a/print.css b/css/print.css
similarity index 100%
rename from print.css
rename to css/print.css
diff --git a/rwd.css b/css/rwd.css
similarity index 100%
rename from rwd.css
rename to css/rwd.css
diff --git a/tables.css b/css/tables.css
similarity index 100%
rename from tables.css
rename to css/tables.css
diff --git a/knacss.scss b/knacss.scss
deleted file mode 100644
index 0324e9d..0000000
--- a/knacss.scss
+++ /dev/null
@@ -1,702 +0,0 @@
-/**
- * www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations
- * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
- */
-
-
-/* ----------------------------- */
-/*       Table of content        */
-/* ----------------------------- */
-/*
- *  0 - Mixins and variables
- *  1 - Reset
- *  2 - Layout and modules
- *  3 - Header
- *  4 - Sidebar
- *  5 - Footer
- *  6 - Forms
- *  7 - Main
- *  8 - IEfix
- *  9 - Print
- * 10 - Desktop medias
- * 11 - Mobile
- */
-
-/* Compass imports */
-@import "compass/css3/images";
-@import "compass/css3";
-
-/* ----------------------------- */
-/* ==Mixins & variables          */
-/* ----------------------------- */
-
-/**
- * REM mixin with PX fallback 
- * @include rem('font-size', 1.4) outputs:
- * font-size: 14px;
- * font-size: 1.4rem;
- */
-@mixin rem($property, $val) {
-    #{$property}: ($val * 10) + px;
-    #{$property}: $val + rem;
-}
-
-/**
- * Mixin handling media queries breakpoints 
- * Usage:
- * @include breakpoint(small) { ... }
- * Can be used INSIDE a rule
- */
-@mixin breakpoint($point) {
-    @if $point == small {
-        @media (max-width: 45em) { @content; }
-    }
-    @if $point == medium {
-        @media (max-width: 55em) { @content; }
-    }
-    @if $point == large {
-        @media (min-width: 55em) { @content; } 
-    }
-}
-
-/** 
- * Mixin making easier absolute/fixed positioning 
- * Usage:
- * @include position(0, 0, 0, 0, absolute);
- * Currently unused. Only here for posterity.
- */
-@mixin position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: absolute) {
-	top: $top;
-	right: $right;
-	bottom: $bottom;
-	left: $left;
-	position: $position;
-}
-
-/**
- * Function to parse int a value 
- * parseInt(15px) returns 15
- * Value must be unquoted
- */
-@function parseInt($number) {
-  @return $number / ($number * 0 + 1);
-}
-
-/**
- * Mixin handling width-helpers classes 
- * Usage:
- * @include w(100px) -> .w100p { width: 100px; }
- * @include w(60%)   -> .w60   { width: 60%;   }
- * Also handles media-queries
- * If value >= 60% or 600px, becomes "auto" on tablets
- * If value >= 30% or 300px, becomes "auto" on mobiles
- * Change variables below to suit your needs
- */
-
-$valuePercentTablet: 60;
-$valuePercentMobile: 30; 
-$valuePixelTablet: 600;
-$valuePixelMobile: 300;
-
-@mixin w($val, $modifier: '') {
-	$int: parseInt($val);
-	$unit: unit($val);
-	$className: floor($int);
-	@if $unit == '%' {
-		#{'.w#{$className}'} {
-			#{$modifier}width: $val;	
-			
-			@if $int >= $valuePercentTablet {
-				@include breakpoint(medium) {
-					width: auto;
-				}
-			}
-			
-			@if $int >= $valuePercentMobile {
-				@include breakpoint(small) {
-					width: auto;
-				}
-			}
-		}
-	} @else if $unit == 'px' {
-		#{'.w#{$className}p'} {
-			#{$modifier}width: $val;
-		
-			@if $int >= $valuePixelTablet {
-				@include breakpoint(medium) {
-					width: auto;
-				}
-			}
-
-			@if $int >= $valuePixelMobile {
-				@include breakpoint(small) {
-					width: auto;
-				}
-			}
-		}
-	}  
-}
-
-
-/* ----------------------------- */
-/* ==Reset                       */
-/* ----------------------------- */
-
-/**
- * Base font-size
- * corresponds to 10px 
- * adapted to rem unit 
- */
-html {
-	font-size: 62.5%;
-	/* Orientation iOS font-size fix */
-	@media (orientation: landscape) and (max-device-width: 768px) {
-		-webkit-text-size-adjust: 100%;
-	}
-}
-
-body {
-	background: white;
-	color: black;
-	font-family: "Century Gothic", helvetica, arial, sans-serif;
-	@include rem('font-size', 1.4); /* equiv 14px */
-	line-height: 1.5; /* adapt to your design */
-}
-
-/**
- * Font-sizing for content
- * Preserve vertical rythm
- * Thanks to http://soqr.fr/vertical-rhythm/ 
- */
-p, ul, ol, dl,
-blockquote, pre,
-td, th, 
-label, textarea,
-caption, details, figure, 
-hgroup {
-	@include rem('font-size', 1.4); /* equiv 14px */
-	line-height: 1.5;
-	margin: .75em 0 0;
-}
-
-/**
- * Titles from h1 (.h1-like) to h6 (.h6-like)
- * h1: 26px;
- * h2: 24px;
- * h3: 22px;
- * h4: 20px;
- * h5: 18px;
- * h6: 16px; 
- */
-$j: 2.6; $k: 2.25;
-@for $i from 1 through 6 {
-	#{'h#{$i}'}, #{'.h#{$i}-like'} {
-		@include rem('font-size', $j);
-		@include rem('line-height', $k);
-		font-weight: normal; 
-	}
-	$j: $j - 0.2; $k: $k + 0.2;
-	@if $i == 3 { $k: 1.45; }
-}
-
-/**
- * Alternate font-sizing 
- * .smaller: 10px;
- * .small  : 12px;
- * .medium : 14px;
- * .big    : 16px;
- * .bigger : 18px;
- * .biggest: 20px;
- */
-$l: 1;
-$sizes: smaller, small, medium, big, bigger, biggest;
-@each $size in $sizes {
-	#{'.#{$size}'} { 
-		@include rem('font-size', $l);
-	}
-	$l: $l + 0.2;
-}
-
-/* Soft reset */
-html, body,
-textarea, label
-figure {
-	margin: 0;
-	padding: 0;
-}
-ul, ol {
-	padding-left: 2em;
-}
-code, pre, samp {
-	white-space: pre-wrap;
-	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-}
-code  { line-height: 1em; }
-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;
-	}
-}
-
-/* Max width */
-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 {
-	width: auto;
-	height: auto;
-	vertical-align: middle;
-}
-a img { border: 0; }
-
-/* Scripts */
-body > script { display: none !important; }
-
-/* Skip-links */
-.skip-links {
-	position: absolute;
-	
-	a {
-		position: absolute;
-		left: -9999px;
-		padding: 0.5em;
-		background: black;
-		color: white;
-		text-decoration: none;
-
-		&:focus {
-			position: static;
-		}
-	}
-}
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/**
- * Switching box-model for all elements 
- * Content-box: width = width + padding + border
- * Padding-box: width = width + padding
- * Border-box : width = width (FUCK YEAH!)
- */
-* {
-	@include box-sizing(border-box);
-}
-
-/**
- * 1. Include this rule to trigger hasLayout and contain floats.
- * 2. The space content is one way to avoid an Opera bug when the
- *    contenteditable attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that are clearfixed.
- * 3. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-.clearfix {
-	*zoom: 1;           /* 1 */
-
-	&:after, &:before {
-		content : ' ';  /* 2 */
-		display: table; /* 3 */
-	}
-
-	&:after {
-		clear: both;
-	}
-}
-
-/* Clearfix blocks that must contain floats */
-.line, .mod {
-	@extend .clearfix;
-}
-
-/* Clear blocks that needs to be placed under floats */
-.clear, .line, .row {
-	clear: both;
-}
-
-/**
- * Float layout
- * ------------
- * Tutorial : http://knacss.com/demos/tutoriel.html 
- */
-
-/* Module, contains floats (.item is the same) */
-.mod, .item { 
-	overflow: hidden;
-}
-
-/**
- * Table layout
- * ------------
- */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-
-	@include breakpoint(small) {
-		display: block !important;
-		width: 100% !important;
-	}
-}
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/**
- * 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; }
-
-/* Simply inline-block */
-.inbl {
-	@include inline-block(top); /* All browsers back to IE6 */
-	margin-right: -.25em;
-}
-
-/**
- * Grids
- * -----
- */
-
-/* Equal grids with 2% gutter */
-[class*=grid] > * {float: left; } /* direct childrens are floating */
-[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */
-.grid2 > * { width: 49%; }
-.grid3 > * { width: 32%; }
-.grid4 > * { width: 23.5%; }
-.grid5 > * { width: 18.4%; }
-.grid6 > * { width: 15%; }
-
-/* Unequal grids (1-2, 2-1, 1-3 and 3-1) */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { width: 66%; }
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { width: 32%; }
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 23.5%; }
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 74.5%; }
-
-/**
- * Blocks widths (percentage and pixels) 
- * + media queries automagically handled
- */
-
-/**
- * .w10  to .w100  (step 10) and
- * .w100 to .w1000 (step 100)
- */
-@for $i from 1 through 10 {
-  @include w($i*10%);
-  @include w($i*100px);
-}
-
-/**
- * Additional not-round numbers
- * Add more to the list to suit your needs
- */
-$runClasses: 25%, 33.33%, 50%, 66.66%, 75%, 50px, 150px, 960px;
-@each $class in $runClasses {
-	@include w($class);
-}
-
-/**
- * You can even prefix width with
- * 'max-' or 'min-' to handle min/max-width
- */
-@include w(960px, 'max-');
-
-/**
- * Spacing helpers
- * p = padding
- * m = margin
- * a = all
- * t = top
- * r = right
- * b = bottom
- * l = left
- * s = small  (10px)
- * m = medium (20px)
- * l = large  (30px)
- * n = none   (0)
- * Source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
- */
-.m-reset, .ma0 { margin: 0; }
-.p-reset, .pa0 { padding: 0; }
-.ma1, .mas { margin: 10px; }
-.ma2, .mam { margin: 20px; }
-.ma3, .mal { margin: 30px; }
-.pa1, .pas { padding: 10px; }
-.pa2, .pam { padding: 20px; }
-.pa3, .pal { padding: 30px; }
-
-.mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: 10px; }
-.mt2, .mtm { margin-top: 20px; }
-.mt3, .mtl { margin-top: 30px; }
-.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; }
-.mb1, .mbs { margin-bottom: 10px; }
-.mb2, .mbm { margin-bottom: 20px; }
-.mb3, .mbl { margin-bottom: 30px; }
-.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; }
-
-/* Hidden yet accessible content */
-.visually-hidden { 
-	position: absolute !important; 
-	overflow: hidden; 
-	clip: rect(0 0 0 0); 
-	height :  1px !important; 
-	width  :  1px !important; 
-	margin : -1px !important; 
-	padding:  0   !important; 
-	border: none; 
-}
-
-.desktop-hidden { /* Hidden on desktop */
-	@include breakpoint(large) {
-		display: none;
-	}
-}  
-.mobile-hidden  { /* Hidden on mobile */
-	@include breakpoint(small) {
-		display: none;
-	} 
-}					
-.tablet-hidden  { /* Hidden on tablets */
-	@include breakpoint(medium) {
-		display: none;
-	} 
-} 	
-
-/* ----------------------------- */
-/* ==Header						 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==Sidebar 					 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==Footer						 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==Forms						 */
-/* ----------------------------- */
-form,
-fieldset {
-	border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle; /* @bugfix alignment */
-}
-textarea {
-	resize: vertical;
-	font-family: inherit;
-}
-
-/* ----------------------------- */
-/* ==Main 						 */
-/* ----------------------------- */
-
-/* ----------------------------- */
-/* ==IEfix 						 */
-/* ----------------------------- */
-
-
-.ie67 {
-	/* 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 {
-		display: inline;
-		zoom: 1;
-	}
-
-	/**
-	 * Add a slash at the end of this comment
-	 * to enable box-sizing for IE6/IE7
-	 * @source https://github.com/Schepp/box-sizing-polyfill 
-	 *
-
-	* {
-		behavior: url(/js/boxsizing.htc);
-	}	
-
-	/**/
-}
-
-.ie8 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-
-/* ----------------------------- */
-/* ==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;
-	}
-}
-
-/* ----------------------------- */
-/* ==Desktop medias 			 */
-/* ----------------------------- */
-
-@include breakpoint(large) {
-	/**
-	 * Here go rules for big resources and big screens
-	 * e.g. background-images, font-faces, etc. 
-	 */
-}
-
-/* ----------------------------- */
-/* ==Mobile 					 */
-/* ----------------------------- */
-
-/* quick tablet reset */
-@include breakpoint(medium) {
-	/* responsive widths for medium (m) screens, like tablets */
-	.m25 { width: 25%; }
-	.m33 { width: 33.3333%; }
-	.m50 { width: 50%; }
-	.m66 { width: 66.6666%; }
-	.m75 { width: 75%; }
-	.m100 {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-}
-
-/* quick smartphone reset */
-@include breakpoint(small) {
-	.mod,
-	.item,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	/* responsive widths for tiny (t) screens, like smartphones */
-	.t25 { width: 25%; }
-	.t33 { width: 33.3333%; }
-	.t50 { width: 50%; }
-	.t66 { width: 66.6666%; }
-	.t75 { width: 75%; }
-	.t100 { 
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-	thead { display: none; }
-}
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-/* Style adjustments for retina devices */
-}
\ No newline at end of file
diff --git a/knacss.less b/less/knacss.less
similarity index 100%
rename from knacss.less
rename to less/knacss.less
diff --git a/sass/_desktop-media.scss b/sass/_desktop-media.scss
new file mode 100644
index 0000000..5ba461a
--- /dev/null
+++ b/sass/_desktop-media.scss
@@ -0,0 +1,10 @@
+/* ----------------------------- */
+/* ==Desktop medias 			 */
+/* ----------------------------- */
+
+@include breakpoint(large) {
+	/**
+	 * Here go rules for big resources and big screens
+	 * e.g. background-images, font-faces, etc. 
+	 */
+}
\ No newline at end of file
diff --git a/sass/_footer.scss b/sass/_footer.scss
new file mode 100644
index 0000000..5dced67
--- /dev/null
+++ b/sass/_footer.scss
@@ -0,0 +1,3 @@
+/* ----------------------------- */
+/* ==Footer						 */
+/* ----------------------------- */
\ No newline at end of file
diff --git a/sass/_forms.scss b/sass/_forms.scss
new file mode 100644
index 0000000..3a3c087
--- /dev/null
+++ b/sass/_forms.scss
@@ -0,0 +1,20 @@
+/* ----------------------------- */
+/* ==Forms						 */
+/* ----------------------------- */
+form,
+fieldset {
+	border: none;
+}
+
+input,
+button,
+select,
+label,
+.btn {
+	vertical-align: middle; /* @bugfix alignment */
+}
+
+textarea {
+	resize: vertical;
+	font-family: inherit;
+}
\ No newline at end of file
diff --git a/sass/_header.scss b/sass/_header.scss
new file mode 100644
index 0000000..563581a
--- /dev/null
+++ b/sass/_header.scss
@@ -0,0 +1,3 @@
+/* ----------------------------- */
+/* ==Header						 */
+/* ----------------------------- */
\ No newline at end of file
diff --git a/sass/_helpers.scss b/sass/_helpers.scss
new file mode 100644
index 0000000..b0283f4
--- /dev/null
+++ b/sass/_helpers.scss
@@ -0,0 +1,143 @@
+/* ----------------------------- */
+/* ==Helpers                     */
+/* ----------------------------- */
+
+/* ********* *\
+ * Variables *
+\* ********* */
+/* Define your variables here */
+
+
+
+/* ****** *\
+ * Mixins *
+\* ****** */
+
+/**
+ * REM mixin with PX fallback 
+ * @include rem('font-size', 14px) outputs:
+ * font-size: 14px;
+ * font-size: 1.4rem;
+ *
+ * The mixin relies on a baseline of 10px
+ */
+@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 handling media queries breakpoints 
+ * Usage:
+ * @include breakpoint(small) { ... }
+ * Can be used INSIDE a rule
+ */
+@mixin breakpoint($point) {
+    @if $point == small {
+        @media (max-width: 45em) { @content; }
+    }
+    @if $point == medium {
+        @media (max-width: 55em) { @content; }
+    }
+    @if $point == large {
+        @media (min-width: 55em) { @content; } 
+    }
+}
+
+
+/** 
+ * Mixin making easier absolute/fixed positioning 
+ * Usage:
+ * @include position(0, 0, 0, 0, absolute);
+ * Currently unused. Only here for posterity.
+ */
+@mixin position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: absolute) {
+	top      : $top;
+	right    : $right;
+	bottom   : $bottom;
+	left     : $left;
+	position : $position;
+}
+
+
+/* ******* *\
+ * Helpers *
+\* ******* */
+
+/**
+ * 1. Include this rule to trigger hasLayout and contain floats.
+ * 2. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 3. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.clearfix {
+	*zoom: 1;           /* 1 */
+
+	&:after, &:before {
+		content : ' ';  /* 2 */
+		display: table; /* 3 */
+	}
+
+	&:after {
+		clear: both;
+	}
+}
+
+/* Hidden yet accessible content */
+.visually-hidden { 
+	position: absolute !important; 
+	overflow: hidden; 
+	clip: rect(0 0 0 0); 
+	height :  1px !important; 
+	width  :  1px !important; 
+	margin : -1px !important; 
+	padding:  0   !important; 
+	border: none; 
+}
+
+.desktop-hidden { /* Hidden on desktop */
+	@include breakpoint(large) {
+		display: none;
+	}
+}  
+.mobile-hidden  { /* Hidden on mobile */
+	@include breakpoint(small) {
+		display: none;
+	} 
+}					
+.tablet-hidden  { /* Hidden on tablets */
+	@include breakpoint(medium) {
+		display: none;
+	} 
+} 	
diff --git a/sass/_iefix.scss b/sass/_iefix.scss
new file mode 100644
index 0000000..4ac027f
--- /dev/null
+++ b/sass/_iefix.scss
@@ -0,0 +1,35 @@
+/* ----------------------------- */
+/* ==IEfix 						 */
+/* ----------------------------- */
+
+.ie67 {
+	/* 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 {
+		display: inline;
+		zoom: 1;
+	}
+
+	/**
+	 * Add a slash at the end of this comment
+	 * to enable box-sizing for IE6/IE7
+	 * @source https://github.com/Schepp/box-sizing-polyfill 
+	 *
+
+	* {
+		behavior: url(/js/boxsizing.htc);
+	}	
+
+	/**/
+}
+
+.ie8 img {
+	width: auto; /* @bugfix for IE8 */
+}
\ No newline at end of file
diff --git a/sass/_layout.scss b/sass/_layout.scss
new file mode 100644
index 0000000..8f50569
--- /dev/null
+++ b/sass/_layout.scss
@@ -0,0 +1,255 @@
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/**
+ * Switching box-model for all elements 
+ * Content-box: width = width + padding + border
+ * Padding-box: width = width + padding
+ * Border-box : width = width (FUCK YEAH!)
+ * 1. Enables box-sizing on pseudo-elements as well
+ */
+*, 
+*:before, 
+*:after { /* 1 */
+	@include box-sizing(border-box);
+}
+
+/* Clearfix blocks that must contain floats */
+.line, .mod {
+	@extend .clearfix;
+}
+
+/* Clear blocks that needs to be placed under floats */
+.clear, .line, .row {
+	clear: both;
+}
+
+/**
+ * Float layout
+ * ------------
+ * Tutorial : http://knacss.com/demos/tutoriel.html 
+ */
+
+/* Module, contains floats (.item is the same) */
+.mod, .item { 
+	overflow: hidden;
+}
+
+/**
+ * Table layout
+ * ------------
+ */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+
+	@include breakpoint(small) {
+		display: block !important;
+		width: 100% !important;
+	}
+}
+
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/**
+ * 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; }
+
+/* Simply inline-block */
+.inbl {
+	@include inline-block(top); /* All browsers back to IE6 */
+	margin-right: -.25em;
+}
+
+/**
+ * Grids
+ * -----
+ */
+
+/* Equal grids with 2% gutter */
+[class*=grid] > * {float: left; } /* direct childrens are floating */
+[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */
+.grid2 > * { width: 49%; }
+.grid3 > * { width: 32%; }
+.grid4 > * { width: 23.5%; }
+.grid5 > * { width: 18.4%; }
+.grid6 > * { width: 15%; }
+
+/* Unequal grids (1-2, 2-1, 1-3 and 3-1) */
+.grid2-1 > *:first-child,
+.grid1-2 > * + * { width: 66%; }
+.grid1-2 > *:first-child,
+.grid2-1 > * + * { width: 32%; }
+.grid1-3 > *:first-child,
+.grid3-1 > * + * { width: 23.5%; }
+.grid3-1 > *:first-child,
+.grid1-3 > * + * { width: 74.5%; }
+
+/**
+ * Blocks widths (percentage 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 = padding
+ * m = margin
+ * a = all
+ * t = top
+ * r = right
+ * b = bottom
+ * l = left
+ * s = small  (10px)
+ * m = medium (20px)
+ * l = large  (30px)
+ * n = none   (0)
+ * Source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
+ */
+.m-reset, .ma0 { margin: 0; }
+.p-reset, .pa0 { padding: 0; }
+.ma1, .mas { margin: 10px; }
+.ma2, .mam { margin: 20px; }
+.ma3, .mal { margin: 30px; }
+.pa1, .pas { padding: 10px; }
+.pa2, .pam { padding: 20px; }
+.pa3, .pal { padding: 30px; }
+
+.mt0, .mtn { margin-top: 0; }
+.mt1, .mts { margin-top: 10px; }
+.mt2, .mtm { margin-top: 20px; }
+.mt3, .mtl { margin-top: 30px; }
+.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; }
+.mb1, .mbs { margin-bottom: 10px; }
+.mb2, .mbm { margin-bottom: 20px; }
+.mb3, .mbl { margin-bottom: 30px; }
+.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; }
+
+
+/**
+ * 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;
+}
\ No newline at end of file
diff --git a/sass/_main.scss b/sass/_main.scss
new file mode 100644
index 0000000..0b99cc4
--- /dev/null
+++ b/sass/_main.scss
@@ -0,0 +1,3 @@
+/* ----------------------------- */
+/* ==Main 						 */
+/* ----------------------------- */
\ No newline at end of file
diff --git a/sass/_mobile.scss b/sass/_mobile.scss
new file mode 100644
index 0000000..624b472
--- /dev/null
+++ b/sass/_mobile.scss
@@ -0,0 +1,67 @@
+/* ----------------------------- */
+/* ==Mobile 					 */
+/* ----------------------------- */
+
+/* quick tablet reset */
+@include breakpoint(medium) {
+	
+	/* responsive widths for medium (m) screens, like tablets */
+	.m25 { width: 25%; }
+	.m33 { width: 33.3333%; }
+	.m50 { width: 50%; }
+	.m66 { width: 66.6666%; }
+	.m75 { width: 75%; }
+	.m100 {
+		display: block  !important;
+		float: none     !important;
+		clear: none     !important;
+		width: auto     !important;
+		margin-left: 0  !important;
+		margin-right: 0 !important;
+		border: 0;		
+	}
+}
+
+/* quick smartphone reset */
+@include breakpoint(small) {
+	.mod,
+	.item,
+	.col,
+	fieldset {
+		display: block  !important;
+		float: none     !important;
+		clear: none     !important;
+		width: auto     !important;
+		margin-left: 0  !important;
+		margin-right: 0 !important;
+		border: 0;
+	}
+
+	/* responsive widths for tiny (t) screens, like smartphones */
+	.t25 { width: 25%; }
+	.t33 { width: 33.3333%; }
+	.t50 { width: 50%; }
+	.t66 { width: 66.6666%; }
+	.t75 { width: 75%; }
+	.t100 { 
+		display: block  !important;
+		float: none 	!important;
+		clear: none 	!important;
+		width: auto 	!important;
+		margin-left: 0  !important;
+		margin-right: 0 !important;
+		border: 0;
+	}
+
+	th,
+	td {
+		display: block   !important;
+		width: auto 	 !important;
+		text-align: left !important;
+	}
+	thead { display: none; }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
+/* Style adjustments for retina devices */
+}
\ No newline at end of file
diff --git a/sass/_print.scss b/sass/_print.scss
new file mode 100644
index 0000000..268c6af
--- /dev/null
+++ b/sass/_print.scss
@@ -0,0 +1,17 @@
+/* ----------------------------- */
+/* ==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;
+	}
+}
diff --git a/sass/_reset.scss b/sass/_reset.scss
new file mode 100644
index 0000000..84a9dd5
--- /dev/null
+++ b/sass/_reset.scss
@@ -0,0 +1,168 @@
+/* ----------------------------- */
+/* ==Reset                       */
+/* ----------------------------- */
+
+/**
+ * Base font-size
+ * corresponds to 10px 
+ * adapted to rem unit 
+ */
+html {
+	font-size: 62.5%;
+	/* Orientation iOS font-size fix */
+	@media (orientation: landscape) and (max-device-width: 768px) {
+		-webkit-text-size-adjust: 100%;
+	}
+}
+
+body {
+	background: white;
+	color: black;
+	font-family: "Century Gothic", helvetica, arial, sans-serif;
+	@include rem('font-size', 14px);
+	line-height: 1.5; /* adapt to your design */
+}
+
+/**
+ * Font-sizing for content
+ * Preserve vertical rythm
+ * Thanks to http://soqr.fr/vertical-rhythm/ 
+ */
+p, ul, ol, dl,
+blockquote, pre,
+td, th, 
+label, textarea,
+caption, details, figure, 
+hgroup {
+	@include rem('font-size', 14px);
+	line-height: 1.5;
+	margin: .75em 0 0;
+}
+
+/**
+ * Titles from h1 (.h1-like) to h6 (.h6-like)
+ */
+
+headings() { font-weight: normal; }
+
+h1, .h1-like {
+	@include rem('font-size', 26px);
+	@include rem('line-height', 22.5px);
+}
+
+h2, .h2-like {
+	@include rem('font-size', 24px);
+	@include rem('line-height', 24.5px);
+}
+
+h3, .h3-like {
+	@include rem('font-size', 22px);
+	@include rem('line-height', 26.5px);
+}
+
+h4, .h4-like {
+	@include rem('font-size', 20px);
+	@include rem('line-height', 14.5px);
+}
+
+h5, .h5-like {
+	@include rem('font-size', 18px);
+	@include rem('line-height', 16.5px);
+}
+
+h6, .h6-like {
+	@include rem('font-size', 16px);
+	@include rem('line-height', 18.5px);
+}
+
+
+/**
+ * Alternate font-sizing 
+ * .smaller: 10px;
+ * .small  : 12px;
+ * .medium : 14px;
+ * .big    : 16px;
+ * .bigger : 18px;
+ * .biggest: 20px;
+ */
+.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, label
+figure {
+	margin: 0;
+	padding: 0;
+}
+ul, ol {
+	padding-left: 2em;
+}
+code, pre, samp {
+	white-space: pre-wrap;
+	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
+}
+code  { line-height: 1em; }
+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;
+	}
+}
+
+/* Max width */
+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 {
+	width: auto;
+	height: auto;
+	vertical-align: middle;
+}
+a img { border: 0; }
+
+/* Scripts */
+body > script { display: none !important; }
+
+/* Skip-links */
+.skip-links {
+	position: absolute;
+	
+	a {
+		position: absolute;
+		left: -9999px;
+		padding: 0.5em;
+		background: black;
+		color: white;
+		text-decoration: none;
+
+		&:focus {
+			position: static;
+		}
+	}
+}
\ No newline at end of file
diff --git a/sass/_sidebar.scss b/sass/_sidebar.scss
new file mode 100644
index 0000000..e6efc0c
--- /dev/null
+++ b/sass/_sidebar.scss
@@ -0,0 +1,3 @@
+/* ----------------------------- */
+/* ==Sidebar 					 */
+/* ----------------------------- */
\ No newline at end of file
diff --git a/sass/knacss.scss b/sass/knacss.scss
new file mode 100644
index 0000000..919ca13
--- /dev/null
+++ b/sass/knacss.scss
@@ -0,0 +1,25 @@
+/**
+ * www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations
+ * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
+ */
+
+/* Compass imports */
+@import "compass/css3/images";
+@import "compass/css3";
+
+/* ----------------------------- */
+/*       Table of content        */
+/* ----------------------------- */
+
+@import "helpers";
+@import "reset";
+@import "layout";
+@import "header";
+@import "sidebar";
+@import "footer";
+@import "forms";
+@import "main";
+@import "iefix";
+@import "print";
+@import "dekstop-media";
+@import "mobile";
\ No newline at end of file