From 8a1f5cd11669cd6d6ca245c7789620df058cb0c1 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@g-u-i.me>
Date: Wed, 17 Jun 2015 19:21:32 +0200
Subject: [PATCH] improved mobile display

---
 .../gui/materiobasetheme/css/styles.css       | 392 ++++++++++--------
 .../gui/materiobasetheme/scss/styles.scss     |  87 ++--
 2 files changed, 283 insertions(+), 196 deletions(-)

diff --git a/sites/all/themes/gui/materiobasetheme/css/styles.css b/sites/all/themes/gui/materiobasetheme/css/styles.css
index cb8ec562..097976e3 100644
--- a/sites/all/themes/gui/materiobasetheme/css/styles.css
+++ b/sites/all/themes/gui/materiobasetheme/css/styles.css
@@ -10876,7 +10876,6 @@ body.home-v2 #center {
 }
 /* line 2859, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.intro-video .field-name-body {
-  display: none;
   margin-top: 1em;
   text-align: center;
 }
@@ -10898,16 +10897,22 @@ body.home-v2 #center {
     width: 48%;
   }
 }
-/* line 2876, ../scss/styles.scss */
+@media only screen and (max-width: 40em) {
+  /* line 2830, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.intro-video {
+    margin-top: 0.5em;
+  }
+}
+/* line 2879, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 {
   margin: 2em 0;
 }
-/* line 2878, ../scss/styles.scss */
+/* line 2881, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 ul.menu {
   margin: 0px;
   text-align: center;
 }
-/* line 2881, ../scss/styles.scss */
+/* line 2884, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li {
   margin: 0 1em 0 0;
   padding: 0px;
@@ -10919,7 +10924,7 @@ body.home-v2 #center {
   zoom: 1;
   *display: inline;
 }
-/* line 2884, ../scss/styles.scss */
+/* line 2887, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li a {
   background-color: #4d4d4d;
   border-radius: 5px;
@@ -10931,54 +10936,54 @@ body.home-v2 #center {
   -webkit-transition: opacity,background-color 0.2s ease-out;
           transition: opacity,background-color 0.2s ease-out;
 }
-/* line 2896, ../scss/styles.scss */
+/* line 2899, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(1):hover a {
   background-color: #ff7400;
   color: #4d4d4d;
 }
-/* line 2900, ../scss/styles.scss */
+/* line 2903, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(2):hover a {
   background-color: #79e644;
   color: #4d4d4d;
 }
-/* line 2904, ../scss/styles.scss */
+/* line 2907, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(3):hover a {
   background-color: #69cdcf;
   color: #4d4d4d;
 }
-/* line 2908, ../scss/styles.scss */
+/* line 2911, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(4):hover a {
   background-color: #e6de1c;
   color: #4d4d4d;
 }
-/* line 2912, ../scss/styles.scss */
+/* line 2915, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(5):hover a {
   background-color: #d476ae;
   color: #4d4d4d;
 }
-/* line 2916, ../scss/styles.scss */
+/* line 2919, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(6):hover a {
   background-color: #772e88;
   color: #4d4d4d;
 }
-/* line 2920, ../scss/styles.scss */
+/* line 2923, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 li:nth-child(7):hover a {
   background-color: #e62326;
   color: #4d4d4d;
 }
 @media only screen and (max-width: 40em) {
-  /* line 2876, ../scss/styles.scss */
+  /* line 2879, ../scss/styles.scss */
   #home-v2 > .panel-panel > div > .panel-pane.pane-menu-menu-home-v2 {
     display: none;
   }
 }
-/* line 2929, ../scss/styles.scss */
+/* line 2932, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register {
   padding: 2em 0;
   background: transparent url("../img/register-block.png") no-repeat 100% 90%;
   text-align: center;
 }
-/* line 2933, ../scss/styles.scss */
+/* line 2936, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .pane-content {
   display: moz-inline-stack;
   display: inline-block;
@@ -10987,7 +10992,7 @@ body.home-v2 #center {
   *display: inline;
   text-align: left;
 }
-/* line 2937, ../scss/styles.scss */
+/* line 2940, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register h2, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register h3 {
   font-weight: 900;
   font-style: italic;
@@ -11001,15 +11006,15 @@ body.home-v2 #center {
   *display: inline;
   vertical-align: middle;
 }
-/* line 2938, ../scss/styles.scss */
+/* line 2941, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register h2 {
   font-size: 24px;
 }
-/* line 2938, ../scss/styles.scss */
+/* line 2941, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register h3 {
   font-size: 16px;
 }
-/* line 2940, ../scss/styles.scss */
+/* line 2943, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register form {
   margin: 0 1em;
   padding: 0px;
@@ -11020,7 +11025,7 @@ body.home-v2 #center {
   *display: inline;
   vertical-align: middle;
 }
-/* line 2942, ../scss/styles.scss */
+/* line 2945, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-wrapper {
   margin: 0;
   position: relative;
@@ -11031,30 +11036,30 @@ body.home-v2 #center {
   *display: inline;
   vertical-align: middle;
 }
-/* line 2946, ../scss/styles.scss */
+/* line 2949, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-account {
   margin-right: 5px;
 }
-/* line 2948, ../scss/styles.scss */
+/* line 2951, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register input.form-text {
   font-size: 12px;
   border-radius: 5px;
   background-clip: padding-box;
   margin-bottom: 4px;
 }
-/* line 2948, ../scss/styles.scss */
+/* line 2951, ../scss/styles.scss */
 .ie8 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register input.form-text {
   margin-right: 5px;
 }
-/* line 2949, ../scss/styles.scss */
+/* line 2952, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-mail input.form-text, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-name input.form-text {
   width: 11em;
 }
-/* line 2950, ../scss/styles.scss */
+/* line 2953, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-pass input.form-text {
   width: 7em;
 }
-/* line 2952, ../scss/styles.scss */
+/* line 2955, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-mail-check {
   position: absolute;
   bottom: 100%;
@@ -11071,16 +11076,16 @@ body.home-v2 #center {
   -webkit-transition: bottom 0.1s ease-out;
           transition: bottom 0.1s ease-out;
 }
-/* line 2960, ../scss/styles.scss */
+/* line 2963, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-mail-check.error {
   background-color: #f3968d;
   color: #fff;
 }
-/* line 2966, ../scss/styles.scss */
+/* line 2969, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-mail-check.ok {
   display: none;
 }
-/* line 2969, ../scss/styles.scss */
+/* line 2972, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-submit {
   font-size: 16px;
   padding: 0.1em 0.6em 0.2em;
@@ -11089,13 +11094,13 @@ body.home-v2 #center {
   font-weight: bold;
   margin-bottom: 4px;
 }
-/* line 2976, ../scss/styles.scss */
+/* line 2979, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-termsofservices, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-field-newsletter {
   margin-bottom: 0;
   display: block;
   line-height: 1;
 }
-/* line 2978, ../scss/styles.scss */
+/* line 2981, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-termsofservices > *, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-field-newsletter > * {
   display: moz-inline-stack;
   display: inline-block;
@@ -11105,14 +11110,14 @@ body.home-v2 #center {
   vertical-align: middle;
   margin: 0;
 }
-/* line 2979, ../scss/styles.scss */
+/* line 2982, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-termsofservices label, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-field-newsletter label {
   font-size: 10px;
   background-color: #fff;
   border-radius: 3px;
   background-clip: padding-box;
 }
-/* line 2983, ../scss/styles.scss */
+/* line 2986, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #user-register-form .form-submit {
   border: 2px solid #69CDCF;
   background-color: #69CDCF;
@@ -11132,12 +11137,12 @@ body.home-v2 #center {
           transition: text-shadow 0s ease-out;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
-/* line 2986, ../scss/styles.scss */
+/* line 2989, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #user-register-form .form-submit[disabled] {
   background-color: #ddd;
   border: 2px solid #ddd;
 }
-/* line 2993, ../scss/styles.scss */
+/* line 2996, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #user-login .form-submit {
   border: 2px solid #E6DE1C;
   background-color: #E6DE1C;
@@ -11157,11 +11162,11 @@ body.home-v2 #center {
           transition: text-shadow 0s ease-out;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
-/* line 2999, ../scss/styles.scss */
+/* line 3002, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register #edit-simplenews {
   display: none;
 }
-/* line 3001, ../scss/styles.scss */
+/* line 3004, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register a.join {
   display: moz-inline-stack;
   display: inline-block;
@@ -11196,23 +11201,23 @@ body.home-v2 #center {
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 @media only screen and (max-width: 40em) {
-  /* line 2929, ../scss/styles.scss */
+  /* line 2932, ../scss/styles.scss */
   #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register {
     background-position: 160% 50%;
     min-height: 60px;
     padding: 15px 0;
   }
-  /* line 3015, ../scss/styles.scss */
+  /* line 3018, ../scss/styles.scss */
   #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-mail input.form-text, #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .form-item-name input.form-text {
     width: 7em;
   }
 }
-/* line 3020, ../scss/styles.scss */
+/* line 3023, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.pane-materio-user-user-register .message-error {
   color: #b94a48;
   font-size: 12px;
 }
-/* line 3025, ../scss/styles.scss */
+/* line 3028, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   -webkit-transition: box-shadow 0.3s ease-out;
@@ -11226,83 +11231,54 @@ body.home-v2 #center {
 #home-v2 > .panel-panel > div > .panel-pane.showroom:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 }
-/* line 3033, ../scss/styles.scss */
+/* line 3036, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content {
   width: 100%;
   height: 100%;
   position: relative;
 }
-/* line 3035, ../scss/styles.scss */
+/* line 3038, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .node {
   position: absolute;
   height: 100%;
   width: 100%;
 }
-/* line 3036, ../scss/styles.scss */
+/* line 3039, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .field-name-field-bandeau {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-/* line 3038, ../scss/styles.scss */
+/* line 3041, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .field-name-field-bandeau img {
   width: 100%;
   margin-top: -10%;
 }
-/* line 3040, ../scss/styles.scss */
+/* line 3043, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper {
   position: relative;
   z-index: 2;
   width: 30%;
   margin: 3em 2em;
 }
-/* line 3046, ../scss/styles.scss */
+/* line 3049, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper .group-content {
   background-color: rgba(255, 255, 255, 0.8);
   padding: 1em;
   border-radius: 5px;
   background-clip: padding-box;
 }
-/* line 3050, ../scss/styles.scss */
+/* line 3053, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper .group-content .field-name-title-field {
   font-size: 2.1em;
   font-weight: 300;
 }
-/* line 3053, ../scss/styles.scss */
+/* line 3056, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper .group-content .field-name-body {
   margin-top: 0.5em;
 }
-@media only screen and (max-width: 40em) {
-  /* line 3025, ../scss/styles.scss */
-  #home-v2 > .panel-panel > div > .panel-pane.showroom {
-    height: 210px;
-    margin-top: 10px;
-  }
-  /* line 3063, ../scss/styles.scss */
-  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .field-name-field-bandeau {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-  /* line 3065, ../scss/styles.scss */
-  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .field-name-field-bandeau img {
-    margin-top: 0;
-  }
-  /* line 3067, ../scss/styles.scss */
-  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper {
-    width: auto;
-    padding: 2%;
-    margin: 2%;
-  }
-  /* line 3071, ../scss/styles.scss */
-  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper .field-name-body {
-    font-size: 0.756em;
-    margin-top: 0.5em;
-  }
-}
-/* line 3080, ../scss/styles.scss */
+/* line 3062, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.showroom:after {
   content: url("../img/bulle.png");
   -webkit-transform: scale(0.8);
@@ -11313,7 +11289,41 @@ body.home-v2 #center {
   right: -20px;
   z-index: 10;
 }
-/* line 3089, ../scss/styles.scss */
+@media only screen and (max-width: 40em) {
+  /* line 3028, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.showroom {
+    height: 210px;
+    margin-top: 10px;
+  }
+  /* line 3074, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .field-name-field-bandeau {
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    overflow: hidden;
+  }
+  /* line 3076, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .field-name-field-bandeau img {
+    margin-top: -100px;
+    margin-left: -200px;
+  }
+  /* line 3078, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper {
+    width: auto;
+    padding: 2%;
+    margin: 2%;
+  }
+  /* line 3082, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.showroom .pane-content .group-content-wrapper .field-name-body {
+    font-size: 0.756em;
+    margin-top: 0.5em;
+  }
+  /* line 3088, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.showroom:after {
+    opacity: 0.4;
+  }
+}
+/* line 3093, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   -webkit-transition: box-shadow 0.3s ease-out;
@@ -11327,11 +11337,11 @@ body.home-v2 #center {
 #home-v2 > .panel-panel > div > .panel-pane.bdd:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 }
-/* line 3095, ../scss/styles.scss */
+/* line 3099, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .links a {
   background-color: #e6e6e6;
 }
-/* line 3097, ../scss/styles.scss */
+/* line 3101, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .field-name-field-bandeau {
   display: moz-inline-stack;
   display: inline-block;
@@ -11342,11 +11352,11 @@ body.home-v2 #center {
   height: 100%;
   overflow: hidden;
 }
-/* line 3099, ../scss/styles.scss */
+/* line 3103, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .field-name-field-bandeau img {
   max-width: 2000px;
 }
-/* line 3102, ../scss/styles.scss */
+/* line 3106, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .group-content-wrapper {
   display: moz-inline-stack;
   display: inline-block;
@@ -11354,25 +11364,24 @@ body.home-v2 #center {
   zoom: 1;
   *display: inline;
   width: 35%;
-  background-color: rgba(255, 255, 255, 0.7);
   padding: 1em;
   border-radius: 5px;
   background-clip: padding-box;
 }
-/* line 3107, ../scss/styles.scss */
+/* line 3111, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .group-content-wrapper .field-name-title-field {
   font-size: 2.1em;
   font-weight: 300;
 }
-/* line 3110, ../scss/styles.scss */
+/* line 3114, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .group-content-wrapper .field-name-body {
   margin-top: 1em;
 }
-/* line 3114, ../scss/styles.scss */
+/* line 3118, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd .group-content-wrapper .field-name-field-liens a {
   background-color: rgba(230, 230, 230, 0.8);
 }
-/* line 3121, ../scss/styles.scss */
+/* line 3125, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.bdd:after {
   content: url("../img/boule.png");
   -webkit-transform: scale(0.8);
@@ -11382,7 +11391,31 @@ body.home-v2 #center {
   bottom: -50px;
   left: -50px;
 }
-/* line 3130, ../scss/styles.scss */
+@media only screen and (max-width: 40em) {
+  /* line 3093, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.bdd {
+    height: auto;
+  }
+  /* line 3135, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.bdd .field-name-field-bandeau {
+    width: 100%;
+    display: block;
+    height: 310px;
+    overflow: hidden;
+  }
+  /* line 3138, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.bdd .group-content-wrapper {
+    display: block;
+    width: 100%;
+    z-index: 1;
+  }
+  /* line 3139, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.bdd:after {
+    opacity: 0.6;
+    z-index: 0;
+  }
+}
+/* line 3143, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   -webkit-transition: box-shadow 0.3s ease-out;
@@ -11397,16 +11430,16 @@ body.home-v2 #center {
 #home-v2 > .panel-panel > div > .panel-pane.formations:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 }
-/* line 3137, ../scss/styles.scss */
+/* line 3150, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations a {
   color: #FFF;
 }
-/* line 3139, ../scss/styles.scss */
+/* line 3152, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations .node {
   padding: 0 0 0 30%;
   width: 70%;
 }
-/* line 3142, ../scss/styles.scss */
+/* line 3155, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations .node:before {
   content: " ";
   background: transparent url("../img/formations.png") no-repeat center center;
@@ -11418,21 +11451,21 @@ body.home-v2 #center {
   width: 30%;
   height: 100%;
 }
-/* line 3155, ../scss/styles.scss */
+/* line 3168, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations .group-content-wrapper {
   padding: 1em;
   position: relative;
 }
-/* line 3157, ../scss/styles.scss */
+/* line 3170, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations .group-content-wrapper .field-name-title-field {
   font-size: 2.1em;
   font-weight: 300;
 }
-/* line 3160, ../scss/styles.scss */
+/* line 3173, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.formations .group-content-wrapper .field-name-body {
   margin-top: 1em;
 }
-/* line 3165, ../scss/styles.scss */
+/* line 3178, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.services {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   -webkit-transition: box-shadow 0.3s ease-out;
@@ -11445,12 +11478,12 @@ body.home-v2 #center {
 #home-v2 > .panel-panel > div > .panel-pane.services:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 }
-/* line 3171, ../scss/styles.scss */
+/* line 3184, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.services .node {
   padding: 0 30% 0 0;
   width: 70%;
 }
-/* line 3174, ../scss/styles.scss */
+/* line 3187, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.services .node:before {
   content: " ";
   background: transparent url("../img/services.png") no-repeat center center;
@@ -11462,21 +11495,21 @@ body.home-v2 #center {
   width: 30%;
   height: 100%;
 }
-/* line 3187, ../scss/styles.scss */
+/* line 3200, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.services .group-content-wrapper {
   padding: 1em;
   position: relative;
 }
-/* line 3189, ../scss/styles.scss */
+/* line 3202, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.services .group-content-wrapper .field-name-title-field {
   font-size: 2.1em;
   font-weight: 300;
 }
-/* line 3192, ../scss/styles.scss */
+/* line 3205, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.services .group-content-wrapper .field-name-body {
   margin-top: 1em;
 }
-/* line 3198, ../scss/styles.scss */
+/* line 3211, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.publication {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   -webkit-transition: box-shadow 0.3s ease-out;
@@ -11492,11 +11525,11 @@ body.home-v2 #center {
 #home-v2 > .panel-panel > div > .panel-pane.publication:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 }
-/* line 3205, ../scss/styles.scss */
+/* line 3218, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.publication, #home-v2 > .panel-panel > div > .panel-pane.publication a, #home-v2 > .panel-panel > div > .panel-pane.publication h1, #home-v2 > .panel-panel > div > .panel-pane.publication h2 {
   color: #fff;
 }
-/* line 3209, ../scss/styles.scss */
+/* line 3222, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.publication .view-publication-home-v2 .views-row {
   display: moz-inline-stack;
   display: inline-block;
@@ -11505,11 +11538,19 @@ body.home-v2 #center {
   *display: inline;
   width: 30%;
 }
-/* line 3212, ../scss/styles.scss */
+/* line 3225, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .panel-pane.publication .view-publication-home-v2 .views-row h1 {
   display: none;
 }
-/* line 3218, ../scss/styles.scss */
+@media only screen and (max-width: 40em) {
+  /* line 3230, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .panel-pane.publication .view-publication-home-v2 .views-row {
+    display: block;
+    width: 90%;
+    margin-bottom: 1em;
+  }
+}
+/* line 3236, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 {
   background-color: #e6e6e6;
   border-radius: 10px;
@@ -11519,56 +11560,58 @@ body.home-v2 #center {
   padding-bottom: 1em;
   position: relative;
 }
-/* line 3225, ../scss/styles.scss */
+/* line 3243, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 h2 {
   font-size: 30px;
 }
-/* line 3227, ../scss/styles.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 0;
-  margin-bottom: 0;
-  max-width: 80rem;
+@media only screen and (min-width: 40.063em) {
+  /* line 3246, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: 80rem;
+  }
+  /* line 172, ../bower_components/foundation/scss/foundation/components/_global.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper:before, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper:after {
+    content: " ";
+    display: table;
+  }
+  /* line 173, ../bower_components/foundation/scss/foundation/components/_global.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper:after {
+    clear: both;
+  }
+  /* line 3248, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel {
+    overflow: hidden;
+    padding-left: 0.9375rem;
+    padding-right: 0.9375rem;
+    width: 33.33333%;
+    float: left;
+    padding: 0em;
+    margin-left: 1em;
+  }
+  /* line 3253, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel.panel-col-first {
+    width: auto;
+  }
+  /* line 3254, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel:not(.panel-col-first) {
+    width: 31%;
+  }
+  /* line 3255, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel .inside {
+    margin: 0;
+  }
+  /* line 3256, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel article.node, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel article.node-breve.vm-cardbig {
+    margin: 0;
+    height: 610px;
+  }
 }
-/* line 172, ../bower_components/foundation/scss/foundation/components/_global.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper:before, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper:after {
-  content: " ";
-  display: table;
-}
-/* line 173, ../bower_components/foundation/scss/foundation/components/_global.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper:after {
-  clear: both;
-}
-/* line 3229, ../scss/styles.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel {
-  overflow: hidden;
-  padding-left: 0.9375rem;
-  padding-right: 0.9375rem;
-  width: 33.33333%;
-  float: left;
-  padding: 0em;
-  margin-left: 1em;
-}
-/* line 3234, ../scss/styles.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel.panel-col-first {
-  width: auto;
-}
-/* line 3235, ../scss/styles.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel:not(.panel-col-first) {
-  width: 31%;
-}
-/* line 3236, ../scss/styles.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel .inside {
-  margin: 0;
-}
-/* line 3237, ../scss/styles.scss */
-#home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel article.node, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel article.node-breve.vm-cardbig {
-  margin: 0;
-  height: 610px;
-}
-/* line 3240, ../scss/styles.scss */
+/* line 3261, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom {
   width: 100%;
   margin-left: auto;
@@ -11588,22 +11631,22 @@ body.home-v2 #center {
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom:after {
   clear: both;
 }
-/* line 3242, ../scss/styles.scss */
+/* line 3263, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom > .inside {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
   width: 100%;
   float: left;
 }
-/* line 3246, ../scss/styles.scss */
+/* line 3267, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom p {
   display: none;
 }
-/* line 3247, ../scss/styles.scss */
+/* line 3268, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-checkboxes {
   margin: 0 0 0.5em 0;
 }
-/* line 3249, ../scss/styles.scss */
+/* line 3270, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-checkboxes .form-item {
   display: moz-inline-stack;
   display: inline-block;
@@ -11612,11 +11655,11 @@ body.home-v2 #center {
   *display: inline;
   margin-right: 1em;
 }
-/* line 3251, ../scss/styles.scss */
+/* line 3272, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-checkboxes .form-item label, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-checkboxes .form-item input {
   vertical-align: middle;
 }
-/* line 3255, ../scss/styles.scss */
+/* line 3276, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-item-mail {
   display: moz-inline-stack;
   display: inline-block;
@@ -11625,7 +11668,7 @@ body.home-v2 #center {
   *display: inline;
   margin: 0;
 }
-/* line 3257, ../scss/styles.scss */
+/* line 3278, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-item-mail label, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom .form-item-mail input {
   display: moz-inline-stack;
   display: inline-block;
@@ -11634,7 +11677,7 @@ body.home-v2 #center {
   *display: inline;
   margin-right: 1em;
 }
-/* line 3260, ../scss/styles.scss */
+/* line 3281, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom #edit-subscribe, #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .panel-col-bottom #edit-unsubscribe {
   display: moz-inline-stack;
   display: inline-block;
@@ -11642,7 +11685,7 @@ body.home-v2 #center {
   zoom: 1;
   *display: inline;
 }
-/* line 3268, ../scss/styles.scss */
+/* line 3287, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 .node-simplenews {
   border-radius: 5px;
   background-clip: padding-box;
@@ -11654,7 +11697,7 @@ body.home-v2 #center {
   position: relative;
   margin: 7px;
 }
-/* line 3275, ../scss/styles.scss */
+/* line 3294, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 .node-simplenews > a {
   position: absolute;
   bottom: 0;
@@ -11662,19 +11705,38 @@ body.home-v2 #center {
   background-color: #FFF;
   text-align: center;
 }
-/* line 3280, ../scss/styles.scss */
+/* line 3299, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2 .node-simplenews > a h1 {
   padding: 10px;
   margin: 0;
   font-size: 1em;
 }
-/* line 3289, ../scss/styles.scss */
+/* line 3308, ../scss/styles.scss */
 #home-v2 > .panel-panel > div > .pane-news-home-v2:after {
   content: url("../img/point.png");
   position: absolute;
   bottom: 20px;
   right: 10px;
 }
+@media only screen and (max-width: 40em) {
+  /* line 3236, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 {
+    background-color: transparent;
+  }
+  /* line 3319, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel.panel-col-first {
+    max-width: 100%;
+  }
+  /* line 3320, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2 #mini-panel-news_home_v2 .center-wrapper .panel-panel:not(.panel-col-first) {
+    display: none;
+  }
+  /* line 3322, ../scss/styles.scss */
+  #home-v2 > .panel-panel > div > .pane-news-home-v2:after {
+    z-index: -1;
+    opacity: 0.4;
+  }
+}
 
 /*
     __  ___
diff --git a/sites/all/themes/gui/materiobasetheme/scss/styles.scss b/sites/all/themes/gui/materiobasetheme/scss/styles.scss
index 285e249c..dbd80c44 100644
--- a/sites/all/themes/gui/materiobasetheme/scss/styles.scss
+++ b/sites/all/themes/gui/materiobasetheme/scss/styles.scss
@@ -2857,7 +2857,7 @@ body.home-v2{
       }
 
       .field-name-body{
-        display:none;
+        // display:none;
         margin-top:1em;
         text-align: center;
         p{
@@ -2872,6 +2872,9 @@ body.home-v2{
           }
         }
       }
+      @media #{$small-only}{
+        margin-top: 0.5em;
+      }
     }
     &.pane-menu-menu-home-v2{
       margin:2em 0;
@@ -3056,13 +3059,21 @@ body.home-v2{
           }
         }
       }
+      &:after{
+        content:url("../img/bulle.png");
+        transform: scale(0.8);
+        position: absolute;
+        bottom:-120px;
+        right: -20px;
+        z-index:10;
+      }
       @media #{$small-only}{
         height:210px;
         margin-top: 10px;
         .pane-content{
           .field-name-field-bandeau{
-            position:absolute; width:100%; height:100%; overflow:hidden;
-            img{margin-top:0;}
+            position:absolute; width:200%; height:100%; overflow:hidden;
+            img{margin-top:-100px; margin-left:-200px;}
           }
           .group-content-wrapper{
             width:auto;
@@ -3074,16 +3085,9 @@ body.home-v2{
             }
           }
         }
-      }
-
-
-      &:after{
-        content:url("../img/bulle.png");
-        transform: scale(0.8);
-        position: absolute;
-        bottom:-120px;
-        right: -20px;
-        z-index:10;
+        &:after{
+          opacity:0.4;
+        }
       }
     }
     &.bdd{
@@ -3101,7 +3105,7 @@ body.home-v2{
 
       .group-content-wrapper{
         @include inlineblock(); width:35%;
-        background-color: rgba(255,255,255, 0.7);
+        // background-color: rgba(255,255,255, 0.7);
         padding:1em;
         @include rounded(5px);
         .field-name-title-field{
@@ -3125,6 +3129,15 @@ body.home-v2{
         bottom:-50px;
         left:   -50px;
       }
+
+      @media #{$small-only}{
+        height:auto;
+        .field-name-field-bandeau{
+          width:100%; display:block; height:310px; overflow:hidden;
+        }
+        .group-content-wrapper{display:block; width:100%; z-index:1;}
+        &:after{opacity:0.6; z-index:0;}
+      }
     }
 
     &.formations{
@@ -3212,6 +3225,11 @@ body.home-v2{
           h1{display:none;}
         }
       }
+      @media #{$small-only}{
+        .view-publication-home-v2{
+          .views-row{display:block; width:90%; margin-bottom: 1em;}
+        }
+      }
     }
   }
   //mini panneau news
@@ -3224,19 +3242,22 @@ body.home-v2{
     // .panel-col-last{width:29.9%;}
     h2{font-size: 30px;}
 
-    #mini-panel-news_home_v2 .center-wrapper{
-      @include grid-row();
-      .panel-panel{
-        overflow:hidden;
-        @include grid-column(4);
-        // width:32.8%;
-        padding:0em; margin-left:1em;
-        &.panel-col-first{width:auto;}
-        &:not(.panel-col-first){width:31%;}
-        .inside{margin:0;}
-        article.node,  article.node-breve.vm-cardbig{margin:0; height:610px;}
+    @media #{$medium-up}{
+      #mini-panel-news_home_v2 .center-wrapper{
+        @include grid-row();
+        .panel-panel{
+          overflow:hidden;
+          @include grid-column(4);
+          // width:32.8%;
+          padding:0em; margin-left:1em;
+          &.panel-col-first{width:auto;}
+          &:not(.panel-col-first){width:31%;}
+          .inside{margin:0;}
+          article.node,  article.node-breve.vm-cardbig{margin:0; height:610px;}
+        }
       }
     }
+
     #mini-panel-news_home_v2 .panel-col-bottom{
       @include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
       >.inside{
@@ -3260,8 +3281,6 @@ body.home-v2{
       #edit-subscribe, #edit-unsubscribe{@include inlineblock();}
     }
 
-
-
     // .view-news-home-v2{
     //   .views-row{@include inlineblock();}
     // }
@@ -3293,11 +3312,17 @@ body.home-v2{
       bottom:20px;
       right: 10px;
     }
+
+    @media #{$small-only}{
+      background-color: transparent;
+      #mini-panel-news_home_v2 .center-wrapper{
+        .panel-panel.panel-col-first{max-width:100%;}
+        .panel-panel:not(.panel-col-first){display:none;}
+      }
+      &:after{z-index: -1; opacity:0.4;}
+    }
   }
-
-
-
-}
+} // homeV2