--- a/web/index.html	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/index.html	Wed Dec 12 03:10:24 2012 +0100
@@ -23,7 +23,7 @@
 			<div id="content_top">
 				
 				<!--  change with js: height and line-height (the same size) of "container_vcentering"  -->
-				<header id="top" class="container_vcentering">
+				<header id="top" class="container_vcentering box_transparance">
 					<div id="title_hp" class="box_vcentering">
 						<h2>UNE EXPÉRIENCE DE CINÉMA</h2>
 						<h1>THE END, ETC.</h1>
@@ -36,15 +36,15 @@
 				</section>
 				
 				<!--  change with js: height and line-height (the same size) of "container_vcentering"  -->
-				<section id="bottom" class="container_vcentering">
+				<section id="bottom" class="container_vcentering box_transparance">
 					<div class="box_vcentering">
-						<p class="big_link"><a href ="prologue.html">COMPOSEZ VOTRE FILM</a></p>
+						<p class="big_link"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p>
 					</div>
 				</section>
 			</div>
 			<!-- /div content_top -->				
 
-			<footer id="footer">
+			<footer id="footer" class="box_transparance">
 				<ul id="logo_partners" class="floatL">
 					<li>UNE CO-PRODUCTION
 						<ul>
@@ -112,6 +112,23 @@
                 // Start mosaic effect
     			incMosaic.start("mosaic", 1, 9, 5, true, false, null);
             });
+
+            var cliked = false;
+            var fadeAndNext = function() {
+            	if (cliked) {
+            		return;
+            	}
+            	
+            	cliked = true;
+            	var time = 4000;
+
+            	// Fade on elements
+            	$('.box_transparance').animate({opacity: 0}, time - 100);
+
+            	setTimeout(function() { 
+            		location.href = "prologue.html";
+				}, time);
+            }
         </script>		
 	</body>
 </html>
\ No newline at end of file