diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee
index 98f370e..4a2e89b 100644
--- a/app/assets/javascripts/application.coffee
+++ b/app/assets/javascripts/application.coffee
@@ -171,75 +171,122 @@ $("document").ready ->
   
   top = 0
   offset= 0
-  
+  height = 0
   resize = ->
     
-    $("#rea-gal img").css "width", ($(window).width() - 6 * 5 )/ 5
-    $(".slider").css({"height": ($(window).height())+"px","width": $(window).width()+"px"  })
-    $("#brainstorming").css({"height": ($(window).height())+"px","width": $(window).width()+"px"  })
+    $("#slider_content").each ->
+      
+    
+      height = ($(window).height())
+      optimal_height = Math.round($(this).find(".bxslider").width()/ $(this).find(".bxslider").data("ratio"))
+
+      if optimal_height < height
+        height = optimal_height
+
+      $(this).find("li").css({"max-height": height+"px","height": height+"px"})
+      img_height = Math.round($(this).find(".bxslider").width() / 1.5)
+      img_margin = Math.round((height - img_height)/ 2)
+      $(this).find("li img").css("margin-top", img_margin+"px")
+      
+      
+      
+      $(".slider").css({"height": (height)+"px","width": $(window).width()+"px"  })
+      $("#main").css("top",(height))
+      $("#menu-container").css("top",(height-50)+"px")
+      $("#logo").one("load", ->
+    
   
-    $("#myCanvas").attr({height: ($(window).height()-160),"width": $(window).width()  })
+        left = ($(window).width() - $("#logo").width()) / 2
+        bottom = (height - $("#logo").height() - $("#baseline").height() - 40)/ 1.10
+        $("#logo").css({"top": bottom+"px","left": left+"px"})
+    
+        $("#baseline").css({"top": (bottom+$("#logo").height())+"px","left": left+"px"})
   
-    $("#menu-container").css("top",($(window).height()-50)+"px")
-    $("#main").css("top",($(window).height()))
-
-    $("#logo").one("load", ->
-    
-      #offset = $("#logo").offset().top-100
-      left = ($(window).width() - $("#logo").width()) / 2
-      bottom = ($(window).height() - $("#logo").height() - $("#baseline").height() - 40)/ 1.10
-      $("#logo").css({"top": bottom+"px","left": left+"px"})
-    
-      $("#baseline").css({"top": (bottom+$("#logo").height())+"px","left": left+"px"})
-    
-      #baseline
-    
-    
-    
-    
-      antiGrav = (ele) -> # anti-gravity floating on an element ;)
-        distance = 5
-        $(ele).animate
-          left: "=" + top + distance + "px"
-        , 2000, "easeInOutBounce", ->
-          $(ele).animate
-            left: "=" + top - distance + "px"
-          , 1800, "easeInOutBounce", ->
-            antiGrav ele
-            return
-
-          return
-
-        return
-      antiGrav2 = (ele) -> # anti-gravity floating on an element ;)
-        distance = 4
-        $(ele).animate
-          top: "-=" + distance + "px"
-        , 2000, "swing", ->
-          $(ele).animate
-            top: "+=" + distance + "px"
-          , 2300, "swing", ->
-            antiGrav2 ele
-            return
-
-          return
-
+      ).each ->
+        $(this).load()  if @complete
         return
       
-
-      antiGrav2(".wide-container")
-
-    
-    
+      
+    $("#rea-gal img").css "width", ($(window).width() - 6 * 5 )/ 5
     
+#    $("#brainstorming").css({"min-height": ($(window).height())+"px","width": $(window).width()+"px"  })
   
-    ).each ->
-      $(this).load()  if @complete
-      return
+    $("#myCanvas").attr({height: ($(window).height()-160),"width": ($(window).width()-2)+"px"  })
+  
+    
+    
+
 
   
     position_img_now();
+
   
+    
+  
+  
+
+  $("#brainstorming ul li").css("opacity", 0)
+  $("#realisations #rea-gal img").css("opacity", 0)
+  gal_imgs_show= []
+  
+  $("#realisations #rea-gal img").each ->
+    gal_imgs_show.push $(this)
+  
+  
+  
+  
+  test = []
+  $("#brainstorming ul li").each ->
+    test.push $(this)
+  test = test.sort ->
+    return .5 - Math.random()
+    
+  animate_brain = ->
+    animate_li_i = 0
+    if !$("#brainstorming").hasClass "showing"
+      animate_li = ->
+  
+    
+        test[animate_li_i].animate({left:0,opacity : 1}, 800)
+        $("#brainstorming").addClass "showing"
+        if animate_li_i < (test.length-1)
+          animate_li_i = animate_li_i+1
+          setTimeout(animate_li, 100)
+        
+      animate_li()
+  
+  un_animate_brain = ->
+    animate_li_i = 0
+    if $("#brainstorming").hasClass "showing"
+      animate_li = ->
+  
+    
+        test[animate_li_i].animate({left:0,opacity : 0}, 700)
+        $("#brainstorming").removeClass "showing"
+        if animate_li_i < (test.length-1)
+          animate_li_i = animate_li_i+1
+          setTimeout(animate_li, 100)
+        
+      animate_li()
+      
+  animate_realisation = ->
+    
+    if !$("#realisations #rea-gal").hasClass "showing"
+      $("#realisations #rea-gal").addClass "showing"
+      i_img = 0
+      
+
+      
+      animate_img = ->
+    
+        gal_imgs_show[i_img].animate({left:0,opacity : 1}, 400)
+        
+        if i_img  < (gal_imgs_show.length-1)
+          i_img  = i_img+1
+          setTimeout(animate_img, 50)
+        
+      animate_img()
+    
   $(window).on "scroll", ->
     
     top = $(window).scrollTop()
@@ -247,7 +294,7 @@ $("document").ready ->
     #$(".wide-container").css("top", top-10)
     
     
-    if $(window).scrollTop() > ($(window).height()-50)
+    if $(window).scrollTop() > (height-50)
       $("#menu").css("position", "fixed")
     else
       $("#menu").css("position", "relative")
@@ -264,13 +311,35 @@ $("document").ready ->
         
   
     if top > ($("#realisations").offset().top - $(window).height() / 2)
-      #alert "te"
-      $("#realisations #rea-gal").animate({left:0,opacity : 1}, 800, "swing")
       
+      
+      animate_realisation()
+      #$("#realisations #rea-gal").animate({left:0,opacity : 1}, 800, "swing")
+    
+    
+      
+    
+    
+      
+    if top > ($("#brainstorming").offset().top - $(window).height() / 2)
+      animate_brain()
   
+
+      
+    
+    if top < ($("#brainstorming").offset().top - $(window).height() / 2)
+
+      un_animate_brain()
   
   resize()
   
+  $('.bxslider').bxSlider
+    mode: 'fade'
+    captions: false
+    pager :false
+    auto: true
+  resize()
+  
   $(window).on "resize", ->
     resize()
   
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index d0128be..80bc178 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -27,7 +27,18 @@
  }
  
  }
- 
+ #slider_content{
+   ul{
+     margin:0;
+     padding:0;
+     img{
+       min-width:100%;
+       
+     }
+   }
+   
+   
+ }
  #large{
  display:none;
  position:fixed;
@@ -87,6 +98,10 @@
  line-height:1.62;
  text-align:justify;
  background:#f4f6f6;
+ padding:0px;
+ margin:0px;
+ 
+ overflow: scroll; height: 100%; width: 100%;
  
  }
  #rea-gal{
@@ -126,16 +141,32 @@
  
  #brainstorming{
  background:url("/ardoise.jpg");
- height:800px;
+ min-height:800px;
  box-sizing: border-box;
  color:white;
  padding:1px;
 
  font-family:"felt-tip-roman";
  font-weight:normal;
- #myCanvas{
-
- 
+ text-align:center;
+ ul{
+   list-style:none;
+   font-size:2em;
+   line-height:1.2em;
+   li{
+     display:inline-block;
+     
+     text-align:center;
+     padding:1em 2em;
+     
+     a{
+       color:white;
+       
+       
+     }
+     
+   }
+   
  }
  p{
  font-size:1.6em;
@@ -185,23 +216,49 @@ width:560px;
 
  }
  .slider{
- width:2000px;
+ width:100%;
  height:300px;
  overflow:hidden;
  position:fixed;
- -webkit-transform-style: preserve-3d;
-   -moz-transform-style: preserve-3d;
-   transform-style: preserve-3d;
+ top:0;
+ left:0;
+ right:0;
+
  
  
  }
- .wide-container {
-   width: 110%;
-   height: 110%;
-   margin: 0 auto;
+ #slider_content {
+   width: 100%;
+
+
    position:absolute;
-   top:-10px;
-   left:-5%;
+
+   top:0px;
+   left:0px;
+   right:0px;
+   
+   
+   li{
+     top:0px;
+     left:0px;
+     right:-10px;
+     background-repeat:no-repeat;
+     background-position: center center;
+     background-size: cover;
+     z-index:2;
+     
+     img{
+       
+       margin-top:-300px;
+           vertical-align: middle;
+           display: inline-block;
+           float: none !important;
+           max-width:inherit;
+      
+       
+     }
+     
+   }
  }
  
  #test{
@@ -216,10 +273,11 @@ width:560px;
   position:absolute;
   left:0px;
   width:100%;
+  z-index:11;
  }
  #main{
  position:absolute;
- z-index:2;
+ z-index:10;
  width:100%;
  .center{
  margin:auto;
@@ -281,8 +339,8 @@ width:560px;
  }
  
  #contact{
- 
- padding-bottom:0px;
+
+  padding-bottom:20px;
  }
  #cristal-protect, #my-strat{
  padding-bottom:0px;
@@ -309,10 +367,7 @@ width:560px;
  }
  
  }
- .clear{
- clear:both;
- 
- }
+
  #realisations{
  color:white;
 background:rgba(132,187,64,1);
@@ -324,6 +379,7 @@ background:rgba(132,187,64,1);
  }
  #about{
  padding-top:70px;
+
   text-align:left;
   color:white;
   background:rgba(40,40,40,1);
@@ -346,13 +402,21 @@ background:rgba(132,187,64,1);
  }
  #cristal-protect, #cristal-protect .more{
    color:white;
-  background:rgba(231,22,103,1);
+  background:#ec4585;
+  
+  a{
+   
+    color:white;
+   
+  }
   
  }
  #my-strat, #my-strat .more{
  background:rgba(103,184,186,1);
  color:white;
  
+ 
+ 
  }
  
  
@@ -398,11 +462,34 @@ padding:5px 10px;
  
  #legals{
  background:rgba(85,85,85,1);
- padding:15px 0;
- text-align:center;
+
+ text-align:left;
  color:white;
- font-size:0.9em;
+position:relative;
+ font-size: 13px;
+ padding: 8px;
+ a{
+   
+   color:white;
+ }
+ 
+ img{
+   position: absolute;
+   right: 3px;
+   height: 19px;
+   margin: 0;
+   margin-right: 10px;
+   
+ }
+ }
+ .clear{
+ clear:both;
  
  }
  
- 
\ No newline at end of file
+ strong{
+   
+   font-weight:400;
+   
+ }
+ 
diff --git a/app/assets/stylesheets/jquery.bxslider.css b/app/assets/stylesheets/jquery.bxslider.css
index 7e5a9c1..4019c69 100644
--- a/app/assets/stylesheets/jquery.bxslider.css
+++ b/app/assets/stylesheets/jquery.bxslider.css
@@ -31,8 +31,8 @@
 
 .bx-wrapper .bx-viewport {
 
-	left: -5px;
-	/*background: #fff;
+	/*left: -5px;
+	background: #fff;
 	
 	/*fix other elements on the page moving (on Chrome)*/
 	-webkit-transform: translatez(0);
diff --git a/app/views/welcome/index.html.haml b/app/views/welcome/index.html.haml
index 17a8e48..4ab77c1 100644
--- a/app/views/welcome/index.html.haml
+++ b/app/views/welcome/index.html.haml
@@ -2,7 +2,7 @@
 %html
   %head
     %meta{charset: "utf-8"}/
-    %title Art des sens - Agencement, décoration et signalétique
+    %title Art des Sens - Agencement, décoration, signalétique, stratifié numérique
     %meta{:name => "description", :content => "Solutions stratifié Mystrat et impression numérique directe durable avec vernis UV extrément résistant sur aluminium, dibond, bois etc."}
     %meta{:name => "keywords", :content => "Impression directe, impression alu, impression aluminium, impression dibond, signalétique aluminium, signalétique dibond, impression bois, stratifié, formica, dibond"}
     = javascript_include_tag "application"
@@ -47,20 +47,17 @@
     #home
     =image_tag "/logo.png", :id => "logo", :alt => "Art des Sens, impression directe sur aluminium, dibond, vernis extrémement résistant"
     #baseline=image_tag "/baseline.png", :id => "", :alt => "Art des sens, agencement, décoration, signalétique, revendeur MyStrat Formica"
+    
+ 
     .slider
-      
-        
-      .wide-container
-        #slides
-          %ul.slides-container
-            %li
-              %img{src: "images/01.jpg", :alt => "Art des Sens, impression directe sur aluminium, décoration intérieure."}/
-            %li
-              %img{src: "images/02.jpg", :alt => "Art des Sens, signalétique extérieur sur aluminium durable"}/
-            %li
-              %img{alt: "Signalétique stratifié MyStrat en relief", src: "images/03.jpg"}/
-            %li
-              %img{alt: "Impression papier peint, covering", src: "images/04.jpg"}/
+      #slider_content
+        =#{:style => "display:none"}
+        %ul.bxslider{:data => {:ratio => 1.62}}
+          %li{:style => "background-image:url('/images/01.jpg');"}
+          %li{:style => "background-image:url('/images/02.jpg');"}
+          %li{:style => "background-image:url('/images/03.jpg');"}
+          %li{:style => "background-image:url('/images/04.jpg');"}
+         
 
     
     #menu-container
@@ -76,18 +73,28 @@
   
     #main
       #about
+        
+          
+      
         .center
           %h2
-            Solutions décoratives personnalisées
+            Art des Sens, Solutions décoratives personnalisées
             %br
             pour l’agencement, la décoration et la signalétique
           %p
     
-            Fort d’une expérience de plus de onze années dans l’impression numérique, la société 
-            Art des Sens
-            est spécialisée dans la commercialisation de supports imprimés, résistants aux agressions extérieures (UV, rayures, graffitis…)
+            Fort d’une expérience de plus de onze années dans 
+            %strong l’impression numérique, 
+            la société 
+            %strong Art des Sens
+            est spécialisée dans la commercialisation de supports imprimés, 
+            %strong résistants aux agressions extérieures
+            (UV, rayures, graffitis…)
           %p
-            Au-delà de la fourniture de panneaux imprimés et selon vos besoins, Art des Sens vous 
+            Au-delà de la fourniture de panneaux imprimés et selon vos besoins, 
+            %strong
+              Art des Sens
+            vous
       
             accompagnera dans l’étude, la conception, la fabrication et la pose de vos projets.
           %p Ensemble, concrétisons vos idées...
@@ -102,10 +109,21 @@
           
           =image_tag "/cristal-protect.png", :class => "icons", :alt => "Cristal Protect impression numérique direct"
           
-          %p Associé à la société Cris-graphic, nous avons mis au point un procédé permettant de réaliser des impressions numériques en haute définition et pérenne.
+          %p 
+            Associé à la société 
+            =link_to "Cris Graphic", "http://cris-graphic.com", :target => "_blank", :title => "Cris Graphic - Impression supports de communication : signalétique, évènementiel, Agencement et décoration - Marque Cristal Protect®"
+            ,
+            %strong Art des Sens
+            a mis au point un procédé permettant de réaliser des 
+            %strong impressions numériques en haute définition et pérenne.
           %p
-            La technologie consiste à encapsuler n’importe quelle image numérique au cœur d’un vernis UV extrêmement résistant. Ce traitement apporte à l’ensemble une résistance et une durabilité d’exposition en extérieur exceptionnelles.
-          %p Il est ainsi possible d'imprimer directement sur une grande variété de supports comme l'aluminium, des matériaux composites  (Dibond<sup>®</sup>, Reynobond<sup>®</sup>, Alucore<sup>®</sup>, Forex<sup>®</sup>...), du verre et du bois.
+            La technologie consiste à encapsuler n’importe quelle image numérique au cœur d’un 
+            %strong vernis UV extrêmement résistant.
+            Ce traitement apporte à l’ensemble une résistance et une durabilité d’exposition en extérieur exceptionnelles.
+          %p Il est ainsi possible d'imprimer directement sur une grande variété de supports comme %strong
+          l'aluminium, des matériaux composites  (
+          <strong> Dibond<sup>®</sup></strong>,
+          Reynobond<sup>®</sup>, Alucore<sup>®</sup>, Forex<sup>®</sup>...), du verre et du bois.
  
       
 
@@ -165,7 +183,13 @@
 
           %p
     
-            Grâce à son exceptionnelle tenue en extérieur, sa résistance aux agressions UV garantie 10 ans, sa résistance aux rayures et graffitits, notre stratifié décoratif fabriqué par notre partenaire le Groupe Formica<sup>®</sup> est un matériau incontournable pour une application intérieure ou extérieure dans les domaines de l'agencement, de la signalétique et de la décoration.
+            Grâce à son exceptionnelle tenue en extérieur, sa résistance aux agressions UV 
+            %strong garantie 10 ans,
+            sa résistance aux rayures et graffitits, notre 
+            %strong stratifié décoratif
+            fabriqué par notre partenaire le Groupe Formica<sup>®</sup> est un matériau incontournable pour une application intérieure ou extérieure dans les domaines de 
+            %strong
+            l'agencement, de la signalétique et de la décoration.
 
           
 
@@ -217,20 +241,14 @@
         .center
           %h2.brain-title
             Concrétisons vos idées
-        <div id="myCanvasContainer">
-        <canvas width="1000" height="1000" id="myCanvas">
-        <p>Anything in here will be replaced on browsers that support the canvas element</p>
+
         %ul
           %li
             %a{:href => "", :onclick => "return false;"}
               Est-il possible d'intégrer mon logo dans les 
               %br
               tables et les chaises de mon restaurant ?
-          %li
-            %a{:href => "", :onclick => "return false;"}
-              Tu imagines, si nous pouvions personnaliser cette pièce   
-              %br
-              en imprimant le sol, les murs et le plafond !
+          
           %li
             %a{:href => "", :onclick => "return false;"}
               Intégrez-vous du braille directement 
@@ -241,6 +259,12 @@
               Imprimez-vous les portes ? 
               %br 
               J'aimerais les décorer dans mon hôtel.
+          %li
+            %a{:href => "", :onclick => "return false;"}
+              Tu imagines, si nous pouvions personnaliser cette pièce   
+              %br
+              en imprimant le sol, les murs et le plafond !
+          
           %li
             %a{:href => "", :onclick => "return false;"}
               Proposez-vous des solutions adaptées 
@@ -256,19 +280,13 @@
               Comment mettre en valeur
               %br
               l'histoire de ce parcours découverte ?
-        </canvas>
-        </div>
-        
-        
-        <script type="text/javascript">
-        
-        </script>
+        .clear
         
       #realisations{:style => "overflow:auto;"}
       
         %h2 Exemples de réalisations
         
-        #rea-gal{:style => "position:relative;opacity:0"}
+        #rea-gal{:style => "position:relative;"}
           =link_to image_tag("/realisation/1-p.jpg", :alt => "MyStrat®, Stratifié personnalisé"), "/realisation/1.jpg", :title => "MyStrat®, Stratifié personnalisé"
           =link_to image_tag("/realisation/2-p.jpg", :alt => "CristalProtect®, impression + vernis sur aluminium pour l’EHPAD de Rungis"), "/realisation/2.jpg", :title => "CristalProtect®, impression + vernis sur aluminium pour l’EHPAD de Rungis" 
           =link_to image_tag("/realisation/3-p.jpg", :alt => "CristalProtect®, impression numérique sur aluminium" ), "/realisation/3.jpg", :title => "CristalProtect®, impression numérique sur aluminium" 
@@ -292,7 +310,8 @@
           .clear
       #contact
         .center
-        
+          =#<iframe width="1000" height="563" src="//www.youtube.com/embed/ED4b38n4d-U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+          
           %p 
             N'hésitez pas à nous contacter pour nous parler de votre projet !
           %p
@@ -308,10 +327,16 @@
           %p
             =link_to "contact@artdessens.fr", "mailto:contact@artdessens.fr"
             
-        =link_to image_tag( "/nb.png", :alt => "Création site, communication, ruby on rails", :style => "float:right;margin-right:20px;margin-bottom:20px;margin-top:2em; width:20px;"), "http://nicolasbally.com", :target => "_blank", :title => "Nicolas Bally, Quartz Agence, création de site internet Ruby on Rails"
+        
         .clear
+          
       #legals
-        Siret 802 801 738 00013 - APE : 4690Z - RCS : 802801738 RCS Grenoble - N° TVA intracom : FR83802801738 - Capital : 15 000,00 €
+        Siret 802 801 738 00013 - APE : 4690Z - RCS : 802801738 RCS Grenoble - N° TVA intracom : FR83802801738 - Capital : 15 000,00 € -
+        =link_to "Partenaire Cris Graphic", "http://cris-graphic.com", :target => "_blank", :title => "Cris Graphic - Impression supports de communication : signalétique, évènementiel, Agencement et décoration - Marque Cristal Protect®"
+        
+        =link_to image_tag( "/nb.png", :alt => "Création site, communication, ruby on rails"), "http://nicolasbally.com", :target => "_blank", :title => "Nicolas Bally, Quartz Agence, création de site internet Ruby on Rails"
+        
+        
     :javascript
       $(function() {
         $('#slides').superslides({
diff --git a/public/images/01.jpg b/public/images/01.jpg
index 93ffe5a..3a8519d 100644
Binary files a/public/images/01.jpg and b/public/images/01.jpg differ
diff --git a/public/images/02.jpg b/public/images/02.jpg
index e89e3a5..3ce4359 100644
Binary files a/public/images/02.jpg and b/public/images/02.jpg differ
diff --git a/public/images/03.jpg b/public/images/03.jpg
index c927e31..99cf1b5 100644
Binary files a/public/images/03.jpg and b/public/images/03.jpg differ
diff --git a/public/images/04.jpg b/public/images/04.jpg
index 1ffc681..34492eb 100644
Binary files a/public/images/04.jpg and b/public/images/04.jpg differ
diff --git a/public/nb.png b/public/nb.png
index 327b1a2..a6fd30a 100644
Binary files a/public/nb.png and b/public/nb.png differ