/*
Design du site www.louchet.com
Réalisé (2011-2025) par Arthur LOUCHET 
<lien url="http://www.louchet.com">http://www.louchet.com</lien>
*/

page
{
	margin: 0px 0px 0px 0px;
}

body
{
	width: 100%;
	margin: 0px auto; 
	border: 0px solid;
	background-color: #ffffff; /*blanc*/
}

fieldset
{
	border-color: #ffffff; /*blanc*/
	/*font-size: 18px; */
}

/* EN TETES */

	#en_tete
	{
	position: fixed;
	top: 0; /* Position the navbar at the top of the page */
	/*display:block;*/
	width: 100%;
	height: 170px; /*height: 220px;*/
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, sans-serif;
	font-size: 24px; 
	font-style: italic;
	color: #4285f4; /*bleu ciel*/
	background-color : #fafafa; /*blanc très légèrement gris*/
	margin-left: auto;
    margin-right: auto;
	z-index: 1000;
	opacity: 0.90;
	}

	/* MENU */
	#menu
	{
	position: fixed;
	top: 170px; /*top: 220px;*/
	width: 100%;
	height: 80px;
	font-family: Verdana, sans-serif;	
	font-size: 18px; 
	color: #eeeeee; /*gris clair "Revell"*/
	font-style: italic;
	letter-spacing : 2px ;
	margin: auto;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
	background-position: center;
	background-color: #fafafa; 	
	margin-left: auto;
    margin-right: auto;
	z-index: 1000;
	opacity: 0.90;
	}
	
	#menu2
	{
	width: 100%;
	height: 80px;
	font-family: Verdana, sans-serif;	
	font-size: 18px;
	color: #eeeeee;
	font-style: italic;
	letter-spacing : 2px ;
	}
	
	
/* PIEDS DE PAGE */

	#pied_de_page
	{
	width: 100%;
	height: 80px;
	clear: both;
	text-align: center;
	font-family: Verdana, sans-serif;
	background-color: #fafafa; 	
	font-size: 13px;
	color: #6a6a6a;   
	border: 0px solid black;
	border-collapse: collapse;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	margin-left: auto;
	margin-right: auto;
	}


/* CORPS */
	#corps, #corps_index, #corps_etudes, #corps_contact, #corps_conception, #corps_lien, #corps_plan, #corps_passe, #corps_404, #corps_documentation, #documentation
	{
	width: 80%;
	/*top: 360px;*/
	/*margin-top: 360px;*/
	margin-left: auto;
    margin-right: auto;
	/*margin-right: 0px;*/
	/*margin-bottom: 0px;*/
	/*margin-left: 0px;*/
	border: 0px;
	padding: 300px 10px 10px 10px; 
	line-height: 140%;
	border: 0px solid grey;
	list-style-type: circle;
	letter-spacing : 0px;
	font-family: Verdana, Helvetica, sans-serif;	
	color: #6a6a6a;
	font-size: 18px;
	}

	#corps_404
	{
	width: 900px;
	height: 1500px;
	padding: 360px 10px 10px 10px;
	background-image: url("images/404.jpg");
	background-repeat: no-repeat;
	background-position: down;
	}


#corps_bureau
	{
	width: 90%;
	margin-left: auto;
    margin-right: auto;
	border: 0px;
	padding: 300px 10px 10px 10px;
	line-height: 140%;
	border: 0px solid grey;
	list-style-type: circle;
	letter-spacing : 0px;
	font-family: Verdana, Helvetica, sans-serif;	
	color: #6a6a6a;
	font-size: 18px;font-size: 18px;
	}



a
{
color: #444444; /*gris foncé moyen "Ford Midnight Grey"*/
text-decoration : none;
}

a:hover
{
color: #888888; /*gris "Ford Black White Brown"*/
}

/* TITRES */

	/*Titre principal dans corps*/
	h1
	{
	text-align: left;
	/*font-size: 1.3em;*/
	font-size: 24px;
	letter-spacing : 3px ; 
	font-style: italic;
	padding-left: 5px;
	font-weight: normal ;
	color: #4285f4; /*cyan-bleu*/
	}
	


	/*Titres secondaires dans corps*/
	h2
	{
	text-align: left;
	font-size: 22px;
	letter-spacing : 1px;
	font-style: normal;	
	padding-left: 5px;
	font-weight: normal ;
	color: #4285f4;
	}

	legend
	{
	text-align: left;
	/*font-size: 22px;*/
	letter-spacing : 1px;
	font-style: normal;	
	padding-left: 5px;
	font-weight: normal ;
	color: #6a6a6a;
	}

p
	{
	text-align: left;
	font-size: 18px;
	letter-spacing : 1px;
	font-style: normal;	
	padding-left: 5px;
	font-weight: normal ;
	color: #6a6a6a;
	}


	/*Titres tertiaires dans corps*/
	h3
	{
	vertical-align: middle;
	font-size: 18px;
	letter-spacing : 1px; 
	padding-left: 5px;
	font-weight: normal ;
	color: #777777; /*gris "Gris copenhague"*/
	}


	h4
	{
	text-align: left;
	font-size: 16px;
	letter-spacing : 1px ; 
	padding-left: 5px;
	font-weight: normal ;
	color: #4285f4;
	}

	ul
	{
	padding-left: 20px;
	text-align: left;
	font-size: 20px;
	letter-spacing : 1px;
	font-style: normal;	
	font-weight: normal ;
	color: #6a6a6a;
	}
	
	li
	{
	text-align: left;
	padding-left: 20px;
	text-align: left;
	font-size: 18px;
	letter-spacing : 1px;
	font-style: normal;	
	font-weight: normal ;
	color: #6a6a6a;
	}

#table
{
margin: auto;
}

.centered-cell 
{
  text-align: center;
  vertical-align: middle;
}

#tab, #tab caption
{
margin: auto;
}

iframe
{
margin: auto;
text-align: center;
vertical-align: middle;
border: 4px solid;
border-color: #ea4335; /*rouge assez doux*/
}

.pdf /*Documents à télécharger*/
 {   
text-decoration: underline;
 }

/* IMAGES */

.image /*images du slideshow*/
 {          
 }

 
.image3 /*images de bureau*/
 {        
height: 300px;       
margin: auto;       
 }
 
.image4 /*images de documentation*/
 {  
width: 100px;
height: 141px; 
border: 4px solid;
border-color: #e6e6e6;       
margin: auto;       
 }
 
.image5
 {        
width: 300px;       
margin: auto;  
border: 4px solid;
border-color: #e6e6e6;              
 }
 
.image6
 {        
width: 470px;       
margin: auto;  
border: 4px solid;
border-color: #e6e6e6; 
vertical-align: middle;             
}

.image8
 {        
width: 450px;       
margin: auto;  
border: 0px;
border-color: #e6e6e6;              
 }
 
.image9
 {        
width: 300px;       
margin: auto;  
border: 0px solid;
border-color: #e6e6e6;              
 }
 
.image10
 {        
width: 300px;       
margin: auto;  
border: 0px solid;
border-color: #e6e6e6; 
vertical-align: middle;             
}

.image11
 {        
height: 200px;       
margin: auto;  
border: 0px solid;
border-color: #e6e6e6;           
}

.image12
 {        
width: 300px;       
margin: auto;  
border: 3px solid;
border-color: #e6e6e6;           
}

.image13
 {        
height: 400px;       
margin: auto;  
border: 0px solid;     
}

.image14
 {        
height: 663px;       
margin: auto;  
border: 0px solid;           
 }
 
 /*Images de l'index*/
.image15
 {
border: 3px solid; 
border-color: #e6e6e6;  
 }
 
.image15:hover
{
border: 3px solid; 
border-color: #FFFFFF;     
 }
 
.image16
 {        
height: 70px;       
margin: auto;  
border: 0px solid;
/*vertical-align: middle;  */    
}

.vid1
 {            
margin: auto;  
border: 4px solid;
border-color: #4285f4; 
}

td.vid2  
{       
/*margin: auto;*/  
border: hidden;
/*border: 4px solid;*/
/*border-color: #4285f4; /*bleu clair*/
text-align: left;
}

 
 /*Image du logo d'en tête*/
.image17
 {        
height: 130px;    /*height: 170px;*/   
margin: auto;  
border: 0px solid;           
 }

/* Liste des logiciels utilisés*/
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle; 
}
 
ul.img-list li {
  display: inline-block;
  height: 80px;
  width: 80px;
  /*margin: 0 10px 10px 0;*/
  /*margin: 0 0 0 0;*/
  position: relative;
  text-align: center;
  vertical-align: middle; 
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 80px;
  left: 10px;
  position: absolute;
  bottom: 5px;
  width: 100px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}


/* BOUTONS MENU */

	#bouton_off
	{
	width:225px;
	height:66px;
	background-image: url("images/mecanique.png"); 
	background-repeat: no-repeat;
	background-position: 7px -71px;
	}
	
	#bouton_off:hover
	{
	width:225px;
	height:66px;
	background-image: url("images/mecanique.png"); 
	background-repeat: no-repeat;
	background-position: 7px 0px;
	}
	
	#bouton_on
	{
	width:225px;
	height:66px;
	margin: auto;
	background-image: url("images/mecanique.png");
	background-repeat: no-repeat;
	background-position: 7px 0px;
	}
	
	
html {
	overflow-x:hidden;
}

figure { 
	display: inline-block; 
}

.sread {
	position: absolute;
	left:-9999px;
}
.cursive {
	font-family: 'Mr Dafoe', cursive;
}
.center {
	text-align: center;
}
#slideshow {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
#slideshow:before,
#slideshow:after {
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: "";
	background: rgba(0,0,0,0.1);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	
	z-index: -10;
}
#slideshow:before {
	left:0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
}
#slideshow .commands {
	position: absolute;
	top: 45%;
	padding: 5px 13px;
	border-bottom:0;
	font-family: Verdana, sans-serif;
	font-size: 1.3em;
	color: #4285f4;
	/*color: #aaa;*/
	text-decoration:none;
	background-color: #eee;
	background-image: -webkit-linear-gradient(#fff,#ddd);
	background-image: -moz-linear-gradient(#fff,#ddd);
	background-image: -ms-linear-gradient(#fff,#ddd);
	background-image: -o-linear-gradient(#fff,#ddd);
	background-image: linear-gradient(#fff,#ddd);
	text-shadow: 0 0 1px #aaa;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .commands:after {
	position: absolute;
	bottom: 65px; left:-18px;
	content: attr(title);
	width: 50px;
	padding: 12px;
	background: #fff;
	font-family: Verdana;
	font-size: 14px;
	text-align:center;
	text-shadow: 0 0 0;
	opacity: 0;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	
	-webkit-transition: opacity 0.7s, bottom 0.7s;
	-moz-transition: opacity 0.7s, bottom 0.7s;
	transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:before {
	position: absolute;
	bottom: 55px; left: 13px;
	content: " ";
	width: 1px; height: 1px;
	border-top: 10px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	z-index:100;
	opacity: 0;
	
	-webkit-transition: opacity 0.7s, bottom 0.7s;
	-moz-transition: opacity 0.7s, bottom 0.7s;
	transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:hover:before {
	bottom: 35px;
	opacity: 1;
}
#slideshow .commands:hover:after {
	bottom: 45px;
	opacity: 1;
}
#slideshow .commands:focus { 
	outline: 0;
	-webkit-transform: translate(1px, 2px);
	-moz-transform: translate(1px, 2px);
	-ms-transform: translate(1px, 2px);
	-o-transform: translate(1px, 2px);
	transform: translate(1px, 2px);
}
#slideshow .commands:active {
	-webkit-transform: translate(0, 1px);
	-moz-transform: translate(0, 1px);
	-ms-transform: translate(0, 1px);
	-o-transform: translate(0, 1px);
	transform: translate(0, 1px);
}
#slideshow .prev {
	left: -48px;
}
#slideshow .next {
	right: -48px;
}
#slideshow .prev,
#slideshow .next {
	display:none;
}
#slideshow .prev,
#slideshow .next {
	display:none;
}
#slideshow .commands1 {
	display: block;
}
/* play/pause commands */
.play_commands {
	position: absolute;
	width: 22px; height: 22px;
	top: 25px; right: 25px;
	z-index: 10;
	text-indent: -9999px;
	border:0 none;
	opacity: 0;

	-webkit-transition: opacity 1s, right 1s;
	-moz-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}
.play { right: 55px; cursor: default; }
.pause:hover { border:0 none; }
.play_commands:focus { outline:0; }

#slideshow:hover .pause,
#sl_play:target ~ #slideshow:hover .pause,
.play_commands:focus {
	opacity: 1;
}
.sl_command:target ~ #slideshow:hover .pause,
#sl_pause:target ~ #slideshow:hover .pause {
	opacity: 0;
}
.pause:after,
.pause:before {
	position: absolute;
	display: block;
	content: " ";
	top:0;
	width:38%;
	height: 22px;
	background: #fff;
	background: rgba(255,255,255,0.5);
}
.pause:after {
	right:0;
}
.pause:before {
	left:0;
}
.play {
	width: 1px; 
	height: 1px; 
	border-top: 10px solid transparent; 
	border-left: 20px solid #fff; 
	border-left: 20px solid rgba(255,255,255,0.5); 
	border-bottom: 10px solid transparent;
	opacity: 0;
}
.play:hover,
.play:focus {
	border-bottom: 10px solid transparent;
}
#slideshow .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
/* timeline base */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 640px;
	height: 5px;
}
@-webkit-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@-moz-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 2600px;
	height: 310px;
	-webkit-animation: slider 15s infinite;
	-moz-animation: slider 15s infinite;
	animation: slider 15s infinite;
}
.sl_i:target ~ #slideshow .slider {
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	transition: left 1s;
}
.sl_command:target ~ #slideshow .slider {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}
#slideshow .c_slider {
	position: absolute;
	left:0; top:0;
	/*width: 2560px;*/
	width: 2600px;
	height: 310px;
	/*background: url(img/1.png) 0 0 no-repeat, url(img/2.png) 650px 0 no-repeat, url(img/3.png) 1280px 0 no-repeat, url(img/4.png) 1920px 0 no-repeat;*/
}
.sl_i:target ~ #slideshow .c_slider {
	-webkit-transition: background 1s;
	-moz-transition: background 1s;
	transition: background 1s;
}
#slideshow figure {
	position:relative;
	padding:0; margin:0;
}
@-webkit-keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@-moz-keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	
	-webkit-animation: figurer 15s infinite;
	-moz-animation: figurer 15s infinite;
	animation: figurer 15s infinite;
}

@-webkit-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@-moz-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}

#slideshow figcaption {
	position:absolute;
	padding: 20px 20px; margin:0;
	left:0; right:0; bottom: 5px;
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Verdana;
	background: #000;
	background: rgba(255,255,255,0.7);
	border-top: 1px solid rgb(225,225,225);
	color: #4285f4;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	-webkit-animation: figcaptionner 15s infinite;
	-moz-animation: figcaptionner 15s infinite;
	animation: figcaptionner 15s infinite;
}

@-webkit-keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}
@-moz-keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 5px;
	background: #0275ea;
	width: 0;
	-webkit-animation: timeliner 15s infinite;
	-moz-animation: timeliner 15s infinite;
	animation: timeliner 15s infinite;
}

/* dots styles */
.dots_commands  {
	position: relative;
	top: 32px;
	padding:0; margin:0;
	text-align:center;
}
.dots_commands li {
	display:inline;
	padding:0; margin:0;
	list-style:none;
}
.dots_commands a {
	position: relative;
	display:inline-block;
	height:10px; width: 10px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
	border-bottom:0;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	
	z-index:25;
}
.dots_commands li + li a {
	z-index:10;
}
@-moz-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
	
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
	
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
	
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
	
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@-webkit-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
	
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
	
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
	
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
	
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
	
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
	
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
	
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
	
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
	position: absolute;
	top: 0; left: 0;
	content: " ";
	width: 10px; height: 10px;
	/*background: #bd9b83;*/
	background: #0275ea;
	text-indent: -9999px;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	
	z-index:20;

.dots_commands li:first-child a:after {
	-webkit-animation: dotser 15s infinite; /* webkit can't animate pseudo-element =_= :L: */
	-moz-animation: dotser 15s infinite; /* thanks moz ! :D */
	animation: dotser 15s infinite;
}
.dots_commands li:first-child a:before {
	display:none;
}

/* actions when target ! */
.sl_command { display: none; }

.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figure:after,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}

#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figure:after,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running;
}

.sl_command:target ~ #slideshow .pause 	{ opacity:0; }
.sl_command:target ~ #slideshow .play 	{ opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .pause 	{ opacity:0; }
#sl_play:target ~ #slideshow .play 		{ opacity:0; right: 55px; cursor: default;}

.sl_i:target ~ #slideshow .slider									{ visibility: hidden }
.sl_i:target ~ #slideshow .slider figcaption						{ visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after		{ display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before	{ display:block; }}

#sl_i1:target ~ #slideshow .commands								{ display: none; }
#sl_i1:target ~ #slideshow .commands1								{ display: block; }
#sl_i1:target ~ #slideshow .c_slider								{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before	{ left:0; }

#sl_i2:target ~ #slideshow .commands								{ display: none; }
#sl_i2:target ~ #slideshow .commands2								{ display: block; }
#sl_i2:target ~ #slideshow .c_slider								{ background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before	{ left:18px; }

#sl_i3:target ~ #slideshow .commands								{ display: none; }
#sl_i3:target ~ #slideshow .commands3								{ display: block; }
#sl_i3:target ~ #slideshow .c_slider								{ background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before	{ left:36px; }

#sl_i4:target ~ #slideshow .commands								{ display: none; }
#sl_i4:target ~ #slideshow .commands4								{ display: block; }
#sl_i4:target ~ #slideshow .c_slider								{ background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before	{ left:54px; }

/* EXPLANATIONS */

#main .download {
	text-align: center;
	margin: 3em 0 1em;
	line-height: 1.35em;
}
#main .download a {
	position: relative;
	display:inline-block;
	padding: 8px 22px 14px;
	border: 0;
	color: #fff;
	background:#8a796d;
	text-shadow: -1px -1px 0 #60544c;
	font-weight:bold;
	overflow: hidden;
	
	-moz-box-shadow: 0 6px 0 #403c3a;
	box-shadow: 0 6px 0 rgba(0,0,0,0.7), 0 7px 6px -5px rgba(255,255,255,0.40) inset;
	border-radius: 12px;
	
	-webkit-transition: color .5s;
	-moz-transition: color .5s;
	transition: color .5s;
}
#main .download .arrow {
	position: relative;
	top: 5px;
	display: inline-block;
	padding: 1px 6px;
	margin-right: 10px;
	color: #cabfb6;
	font-size: 22px;
	background: rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
@-webkit-keyframes downloader {
	0% { top:5px; }
	45% { top:60px; }
	49% { opacity: 0; }
	50% { top: -60px; }
	51% { opacity: 1; }
	100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
	
}
@-moz-keyframes downloader {
	0% { top:5px; }
	45% { top:60px; }
	49% { opacity: 0; }
	50% { top: -60px; }
	51% { opacity: 1; }
	100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
	
}
@keyframes downloader {
	0% { top:5px; }
	45% { top:60px; }
	49% { opacity: 0; }
	50% { top: -60px; }
	51% { opacity: 1; }
	100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
	
}
#main .download a:hover,
#main .download a:focus {
	color: #cbbfb5;
}
#main .download a:hover .arrow,
#main .download a:focus .arrow {
	-webkit-animation: downloader .4s forwards;
	-moz-animation: downloader .4s forwards;
	animation: downloader .4s forwards;
}
#main .download .file {
	display: block;
	font-weight:normal;
	font-size: 0.6em;
	margin-left: 40px;
	line-height: 0.55em;
}
#main .download .already {
	font-size: 0.7em;
	line-height: 2.4em;
}
#main .download .nb {
	font-weight:bold;
}
#main {
	padding: 10px;
	color: #8a796d;
	font-family: Helvetica, Arial, sans-serif;
	text-align:left;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
}
#main h2 {
	margin-top: 45px;
	font-size: 2em;
	font-family: "Amaranth", cursive;
	text-align:left;
}
#main h3 { 
	margin-top: 25px;
	font-size: 1.4em;
}
#main p {
	line-height: 1.85em;
	margin-top: 2em;
}
#main .col2,
#main .col2 {
	position: relative;
	margin-top: 1em;
	-webkit-column-count: 2;
	-webkit-column-gap: 3em;
	-moz-column-count: 2;
	-moz-column-gap: 3em;
	column-count: 2;
	column-gap: 3em;
}
#main .col2 + .col2 {
	margin-top: 3em;
}
#main p + p:before {
	position: absolute;
	content: "*";
	width: 100%;
	text-align: center;
	top: -1.2em;
	font-size: 2em;
	color: #e1d7cf;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
footer {
	padding: 25px;
	margin-bottom: 38px;
	border: 1px solid rgba(0,0,0,0.1);
	background: rgba(0,0,0,0.1);
	color: #777;
	text-align: center;
}
footer p {
	margin:0.5em 0;
}
footer .sep {
	display: inline-block;
	margin: 0 1em;
}

 <audio id="click">
	<source src="audio/click.mp3">
</audio>