diff --git a/sites/all/themes/gui/materiobasetheme/less/fonts.scss b/sites/all/themes/gui/materiobasetheme/less/fonts.scss
index a4515c46..f708de94 100644
--- a/sites/all/themes/gui/materiobasetheme/less/fonts.scss
+++ b/sites/all/themes/gui/materiobasetheme/less/fonts.scss
@@ -1,7 +1,6 @@
+@mixin ubuntu(){font-family: "Ubuntu", Arial, "MS Trebuchet", sans-serif; @include fs500(); @include normal;}
 
-.ubuntu(){font-family: "Ubuntu", Arial, "MS Trebuchet", sans-serif; .500; .normal;}
-
-body{font-size:16px; .ubuntu; line-height:1.3;}
+body{font-size:16px; @include ubuntu; line-height:1.3;}
 
 a{color: #007BC2; text-decoration: none;}
 
@@ -12,14 +11,14 @@ h4{font-size:1.3em;}
 h5{font-size:1.2em;}
 h6{font-size:1.1em;}
 
-input, button, select, textarea{.ubuntu();}
+input, button, select, textarea{@include ubuntu();}
 
-.22(){
+@mixin fs22(){
 	font-size:22px;
 }
 
 #footer{
   #footer-bottom{ text-align: center;}
-  #footer-bottom .block{ .8;}
+  #footer-bottom .block{ @include fs8;}
   
 }
diff --git a/sites/all/themes/gui/materiobasetheme/less/misc.scss b/sites/all/themes/gui/materiobasetheme/less/misc.scss
index 3b102f3e..6ff47ee8 100644
--- a/sites/all/themes/gui/materiobasetheme/less/misc.scss
+++ b/sites/all/themes/gui/materiobasetheme/less/misc.scss
@@ -1,6 +1,6 @@
 
 //** Messages. */
-.messages(){
+@mixin messages(){
   padding: 9px;
   margin: 0.5em 0 0;
   color: #3a87ad;//#360;
@@ -9,7 +9,7 @@
   -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
-    .12;
+    @include fs12();
 
   &.warning {
     color: #c09853;//#840;
@@ -28,27 +28,27 @@
     color: #468847;//#036;
     background-color: #dff0d8;//#bdf;
     border-color:#d6e9c6;//#ace;
-    .14;
+    @include fs14();
   }
 
 }
 
-div.messages { .messages();}
+div.messages { @include messages();}
 
 .messages-label{display:none;}
 
 #better-messages-wrapper{
-  background-color: rgba(255,255,255,0.7); .p(10px); .rounded(5px); .drop-shadow(0, 0, 6px, 0.4);
+  background-color: rgba(255,255,255,0.7); @include p(10px); @include rounded(5px); @include drop-shadow(0, 0, 6px, 0.4);
   #better-messages-default{
 
     div.messages{
-      .messages(); margin:0 0 10px 0;
+      @include messages(); margin:0 0 10px 0;
     }
     .footer{
       border:none; padding:0; margin:0;
       a.message-close{
         background: #fff url('../img/close.png') no-repeat center center;
-        width:15px; height:15px; .rounded(3px); display:block;
+        width:15px; height:15px; @include rounded(3px); display:block;
 
       }
     }
@@ -128,43 +128,43 @@ div.messages { .messages();}
 /**
 * icons
 */
-.icon(@w, @x, @y, @color : #fff){
+@mixin icon($w, $x, $y, $color : #fff){
   background-image: url('../img/sprite.png');
-  width:@w; height:@w; line-height:@w;
-  background-position: @x @y ;
-  background-color: @color;
+  width:$w; height:$w; line-height:$w;
+  background-position: $x $y ;
+  background-color: $color;
 }
 // [class^="icon-materio-viewmode-"], [class*=" icon-materio-viewmode-"]{
 //   .icon(20px);
 // }
 
 i.icon-materio-viewmode-cardsmall{
-  .icon(20px, -42px, 0);
-  &.active{.icon(21px, 0, 0); }
-  &:hover:not(.active){.icon(21px, -21px, 0); }
+  @include icon(20px, -42px, 0);
+  &.active{@include icon(21px, 0, 0); }
+  &:hover:not(.active){@include icon(21px, -21px, 0); }
 }
 i.icon-materio-viewmode-cardmedium{
-  .icon(21px, -42px, -21px);
-  &.active{.icon(21px, 0, -21px); }
-  &:hover:not(.active){.icon(21px, -21px, -21px); }
+  @include icon(21px, -42px, -21px);
+  &.active{@include icon(21px, 0, -21px); }
+  &:hover:not(.active){@include icon(21px, -21px, -21px); }
 }
 i.icon-materio-viewmode-cardbig{
-  .icon(21px, -42px, -42px);
-  &.active{.icon(21px, 0, -42px); }
-  &:hover:not(.active){.icon(21px, -21px, -42px); }
+  @include icon(21px, -42px, -42px);
+  &.active{@include icon(21px, 0, -42px); }
+  &:hover:not(.active){@include icon(21px, -21px, -42px); }
 }
 i.icon-materio-viewmode-cardfull{
-  .icon(21px, -42px, -63px);
-  &.active{.icon(21px, 0, -63px); }
-  &:hover:not(.active){.icon(21px, -21px, -63px); }
+  @include icon(21px, -42px, -63px);
+  &.active{@include icon(21px, 0, -63px); }
+  &:hover:not(.active){@include icon(21px, -21px, -63px); }
 }
 
 i.icon-materio-search{
-  .icon(21px, -63px, -63px);
+  @include icon(21px, -63px, -63px);
 }
 
 i.icon-materio-folder{
-  .icon(21px, -84px, -63px);
+  @include icon(21px, -84px, -63px);
 }
 
 
@@ -219,7 +219,7 @@ a:hover {
 
 /** COLORBOX */
 #colorbox{
-  .rounded; .drop-shadow(0, 0, 5px, 0.4);
+  @include rounded; @include drop-shadow(0, 0, 5px, 0.4);
   #cboxLoadedContent{ background-color: #fff; }
 }
 
@@ -227,10 +227,10 @@ a:hover {
 /** embed player */
 .embedded-video{
   .player iframe{
-    @media @max-768{
-      max-width:100%;
-      height:auto;
-    }
+    // @media @max-768{
+    //   max-width:100%;
+    //   height:auto;
+    // } change this
   }
 }
 
diff --git a/sites/all/themes/gui/materiobasetheme/less/styles.css b/sites/all/themes/gui/materiobasetheme/less/styles.css
deleted file mode 100644
index 13c59872..00000000
--- a/sites/all/themes/gui/materiobasetheme/less/styles.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-Error: Invalid CSS after "...        @media ": expected media query (e.g. print, screen, print and screen), was "$max-480 { $w:2..."
-        on line 572 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/less/styles.scss
-
-567:         .group-column-wrapper{
-568:           height:240px;
-569:           .side{ height:100%; }
-570:           .field-name-field-emvideo{
-571:             $r:0.5625;
-572:             @media $max-480 { $w:290px; width:$w; height:$w*$r; }
-573:             @media @480-768 { $w:216px; width:$w; height:$w*$r; }
-574:             @media @768-980 { $w:216px; width:$w; height:$w*$r; }
-575:             @media @980-1200 { $w:280px; width:$w; height:$w*$r; }
-576:             @media $min-1200 { $w:340px; width:$w; height:$w*$r; }
-577:             *{height:100%; width:100%;}
-
-Backtrace:
-/home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/less/styles.scss:572
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:1165:in `expected'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:1101:in `expected'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:1081:in `expr!'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:401:in `media_directive'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:219:in `special_directive'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:194:in `directive'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:661:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:642:in `block'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:711:in `declaration_or_ruleset'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:661:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:642:in `block'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:711:in `declaration_or_ruleset'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:661:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:642:in `block'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:711:in `declaration_or_ruleset'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:661:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:642:in `block'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:711:in `declaration_or_ruleset'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:661:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:642:in `block'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:711:in `declaration_or_ruleset'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:661:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:642:in `block'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:635:in `ruleset'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:660:in `block_child'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:653:in `block_contents'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:117:in `stylesheet'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/scss/parser.rb:42:in `parse'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/engine.rb:393:in `_to_tree'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/engine.rb:368:in `_render_with_sourcemap'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/engine.rb:285:in `render_with_sourcemap'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/exec/sass_scss.rb:396:in `run'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/exec/sass_scss.rb:62:in `process_result'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/exec/base.rb:52:in `parse'
-/opt/koala/rubygems/gems/sass-3.4.9/lib/sass/exec/base.rb:19:in `parse!'
-/opt/koala/rubygems/gems/sass-3.4.9/bin/sass:13:in `<top (required)>'
-/opt/koala/bin/sass:18:in `load'
-/opt/koala/bin/sass:18:in `<main>'
-*/
-body:before {
-  white-space: pre;
-  font-family: monospace;
-  content: "Error: Invalid CSS after \"...        @media \": expected media query (e.g. print, screen, print and screen), was \"$max-480 { $w:2...\"\A         on line 572 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/less/styles.scss\A \A 567:         .group-column-wrapper{\A 568:           height:240px;\A 569:           .side{ height:100%; }\A 570:           .field-name-field-emvideo{\A 571:             $r:0.5625;\A 572:             @media $max-480 { $w:290px; width:$w; height:$w*$r; }\A 573:             @media @480-768 { $w:216px; width:$w; height:$w*$r; }\A 574:             @media @768-980 { $w:216px; width:$w; height:$w*$r; }\A 575:             @media @980-1200 { $w:280px; width:$w; height:$w*$r; }\A 576:             @media $min-1200 { $w:340px; width:$w; height:$w*$r; }\A 577:             *{height:100%; width:100%;}"; }
diff --git a/sites/all/themes/gui/materiobasetheme/less/styles.scss b/sites/all/themes/gui/materiobasetheme/less/styles.scss
index be10a022..f034e191 100644
--- a/sites/all/themes/gui/materiobasetheme/less/styles.scss
+++ b/sites/all/themes/gui/materiobasetheme/less/styles.scss
@@ -89,7 +89,7 @@
 }
 
 @mixin bouton(){
-  // .16; change this
+  @include fs16();
   font-weight:bold;
   @include p(0.1em 0.3em 0.2em); @include rounded(0.3em);
   border: 2px solid #ccc; @include bgc(#ccc); color:#4D4D4D; // blanc/bleu
@@ -119,9 +119,9 @@
     @include transition-simply-prefix(margin-left 0.3s ease-out);
     .column-switcher{
       display:inline-block; @include rounded(3px); color:#fff; background-color: #3e3e3e; vertical-align:middle;
-      // .700; .22; change this
+      @include fs700(); @include fs22;
       @include p(0.05em 0.15em 0.2em 0.2em); line-height:0.5; 
-      // .regular;change this
+      @include regular;
       &.prev-column{cursor: w-resize;}
       &.next-column{cursor: e-resize;}
     }
@@ -165,7 +165,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
 
   .logo{
     //width:210px; //padding-left:5px; //margin-left:50px;
-    // .inlineblock; change this
+    @include inlineblock;
     h1{
       margin:0; 
       //.36; change this