/* 
						* Module				: kerchope.css
						* Object				: page introduction site La Chopinais. Utilisée comme page index
						* Version			: 2.0.0
						* Project			:	Gite la Chopinais	version 2.1													
						* Production Date	:  10 Juillet 2014
						* Improvements	:
												- No update 
* Author		: JP
*/

nav ul ul 							{							height: 0;
																	transform: scaleY(0); 
																	transform-origin: 50% 0;
																	-webkit-transform: scaleY(0); 
																	-moz-transform: scaleY(0); 
																	-webkit-transform-origin: 50% 0;
																	-moz-transform-origin: 50% 0;
																	-webkit-transition: transform 2s ease;
																	-moz-transition: transform 2s ease;
																	transition: transform 2s ease;
										}
nav ul li:hover > ul 			{							height: auto;
																	transform: scaleY(1);
																	-webkit-transform: scaleY(1);
																	-moz-transform: scaleY(1);
										}
																		
																	/* Color */
.ctransp															{color: transparent;								}
.cblanc															{color: white;										}
.cbeigeBKP														{color: beige;										}
.cbeige															{color: #E0FFD1; /*#CCFF99; */									}
.colive															{color: olive;										}
.crouge															{color: red;										}
.corange															{color: orange;									}
.cbrun															{color: #36312A;									}
.cnoir															{color: black;										}
.cgris															{color: grey;										}
.cgrisfonce														{color: #333333;									}
.cbleuclair 													{color: #508CE6;									}

																	/* backgroundColor */																	
.btransp								{							background-color: transparent;																		}
.bblanc								{							background-color: white;																				}
.bbeige								{							background-color: #D8D7D5;																				}
.bbeigeclair						{							background-color: #F2F2F1;																				}
.bvertbeigeBKP						{							background-color: #E0FFD1;																				}
.bvertbeige							{							background: -moz-linear-gradient( #002900 , #E0FFD1 , beige );
																	background: -webkit-linear-gradient( #002900 , #E0FFD1 , beige ); /* For Safari */
																	background: -o-linear-gradient( #002900 , #E0FFD1 , beige ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #002900 , #E0FFD1 , beige ); /* Standard syntax */					}
.bjaune								{							background-color: yellow;																				}
.brouge								{							background-color: red;																					}
.bgrisclair							{							background-color: lightgrey;																			}
.btaupeclair						{							background-color: #CBC2B0;																				} /*  #ADA091 */
.btaupe								{							background-color: #9C9382; 																			} /* 6B6153 */
.btaupefonce						{							background-color: #756E62; 																			} /* 6B6153 */
.bbrun								{							background-color: #3D1400																				}
.bnoir								{							background-color: black;																				}
.bgrisfonce							{							background-color: #333333;																				}
.bviolet								{							background-color: #660066;																				}
.bvertBKP							{							background-color: #002900;																				}
.bvert								{							background-color: #002900;																				}
.bvertclair							{							background-color: springgreen;																		}
.bolive								{							background-color: olive;																				}
.bbleuclair 						{							background-color: #508CE6;																				}
.bbleufonce 						{							background-color: #000029;																				}

.bdbleu								{							background: -moz-linear-gradient( white , #508CE6 );
																	background: -webkit-linear-gradient( white , #508CE6 ); /* For Safari */
																	background: -o-linear-gradient( white , #508CE6 ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( white , #508CE6 ); /* Standard syntax */									}
																	
.bdbleu2transp						{							background: -moz-linear-gradient( #001400 , transparent );
																	background: -webkit-linear-gradient( #001400 , transparent ); /* For Safari */
																	background: -o-linear-gradient( #001400 , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #001400 , transparent ); /* Standard syntax */									}
																	
.bdvert								{							background: -moz-linear-gradient( transparent , darkgreen );
																	background: -webkit-linear-gradient( transparent , darkgreen ); /* For Safari */
																	background: -o-linear-gradient( transparent , darkgreen ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( transparent , darkgreen ); /* Standard syntax */									}
																	
.bdvert2transpBKP					{							background: -moz-linear-gradient( darkgreen, green , transparent );
																	background: -webkit-linear-gradient( darkgreen, green, transparent ); /* For Safari */
																	background: -o-linear-gradient( darkgreen, green , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( darkgreen, green , transparent ); /* Standard syntax */	
										}
																	
.bdvert2transp						{							background: -moz-linear-gradient( #002900 , transparent );
																	background: -webkit-linear-gradient( #002900 , transparent ); /* For Safari */
																	background: -o-linear-gradient( #002900 , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #002900 , transparent ); /* Standard syntax */	
										}
																	
.bd2vert2transp					{							background: -moz-linear-gradient( #002900 , #002900 , transparent );
																	background: -webkit-linear-gradient( #002900 , #002900 , transparent ); /* For Safari */
																	background: -o-linear-gradient( #002900 , #002900 , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #002900 , #002900 , transparent ); /* Standard syntax */	
										}
																	
.bdbrun2transp						{							background: -moz-linear-gradient( #3D1400 , transparent );
																	background: -webkit-linear-gradient( #3D1400 , transparent ); /* For Safari */
																	background: -o-linear-gradient( #3D1400 , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #3D1400 , transparent ); /* Standard syntax */	
										}
.bd2brun2transp					{							background: -moz-linear-gradient( #3D1400 , #3D1400 , transparent );
																	background: -webkit-linear-gradient( #333333 , #3D1400 , transparent ); /* For Safari */
																	background: -o-linear-gradient( #3D1400 , #3D1400 , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #3D1400 , #3D1400 , transparent ); /* Standard syntax */	
										}
/* 00003D #3399FF #3D1400 */																	
.bdvert2transpESSAI						{							background: -moz-linear-gradient( #FF3399 , transparent );
																	background: -webkit-linear-gradient( #FF3399 , transparent ); /* For Safari */
																	background: -o-linear-gradient( #FF3399 , transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( #FF3399 , transparent ); /* Standard syntax */	
										}
																	
.bdtransp2vertBKP						{							background: -moz-linear-gradient( transparent , darkgreen );
																	background: -webkit-linear-gradient( transparent , darkgreen ); /* For Safari */
																	background: -o-linear-gradient( transparent , darkgreen ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( transparent , darkgreen ); /* Standard syntax */	
										}
																	
.bdtransp2vert						{							background: -moz-linear-gradient( transparent , #002900 );
																	background: -webkit-linear-gradient( transparent , #002900 ); /* For Safari */
																	background: -o-linear-gradient( transparent , #002900 ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( transparent , #002900 ); /* Standard syntax */	
										}
																	
.bdtransp2gris						{							background: -moz-linear-gradient( transparent , grey );
																	background: -webkit-linear-gradient( transparent , grey ); /* For Safari */
																	background: -o-linear-gradient( transparent , grey ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( transparent , grey ); /* Standard syntax */	
										}
																	
.bdgris2transp						{							background: -moz-linear-gradient( black, transparent );
																	background: -webkit-linear-gradient( black, transparent ); /* For Safari */
																	background: -o-linear-gradient( black, transparent ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( black, transparent ); /* Standard syntax */	
										}

.bdblancblanc2transp				{							background: -moz-linear-gradient( white, transparent , lightgrey );
																	background: -webkit-linear-gradient( white, transparent, lightgrey ); /* For Safari */
																	background: -o-linear-gradient( white, transparent , lightgrey ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( white, transparent , lightgrey ); /* Standard syntax */	
										}
																	
.bdorange 							{
																	background: -moz-linear-gradient( transparent , orange );
																	background: -webkit-linear-gradient( transparent , orange ); /* For Safari */
																	background: -o-linear-gradient( transparent , orange ); /* For Opera 11.1 to 12.0 */
																	background: linear-gradient( transparent , orange ); /* Standard syntax */																	
										}

.bgimg0								{							background-image	:	url(/img/lachope1.jpg); 
																	background-repeat	:	no-repeat; 
																	background-size: cover;
																/*	background-color	:	#800000; */
																	background-color	:	#002900; 
																/*	background-color	:	#00003D; */
																/*	background-color	:	#FF3399; */
								 		}
.bgimg1								{							background-image	:	url(/img/lachope2.jpg); /*url(/img/paysage2.jpg);*/ 
																	background-repeat	:	no-repeat; 
																	background-size	:	cover; //54em;
																/*	background-color	:	#800000; */
																	background-color	:	#002900; 
																/*	background-color	:	#00003D; */
																/*	background-color	:	#FF3399; */
								 		}
.bgimg2								{							background-image	:	url(/img/fondDiap.jpg); 
																	background-repeat	:	no-repeat; 
																	background-size	:	100% 54em;
																	background-color	:	black;
								 		}
.bgimg3								{							
											background-image: url(/img/paysage1.jpg); 
											background-repeat:no-repeat;
											background-position:center;
											background-size: cover;
											cursor: pointer;
										}
.bgimg4								{							
											background-image: url(/img/lachope1_dessin.jpg); /* url(/img/Mairie.jpg); */ 
											background-repeat:no-repeat;
											background-position:center;
											background-size: contain;
											cursor: pointer;
										}
																	
.bgimg5								{							
											background-image: url(/img/Lachop09_138.jpg); 
											background-repeat:no-repeat;
											background-position:center;
											background-size: cover;
											cursor: pointer;
										}
																	
.bgimg6								{							
											background-image: url(/img/cuis1.jpg); 
											background-repeat:no-repeat;
											background-position:center;
											background-size: cover;
											cursor: pointer;
										}
																	
																	/* Position */
.PFixe								{		position: fixed;									}
.PAbsolu								{		position: absolute;								}
.PRelatif							{		position: relative;								}
.HautGauche							{		top: 0px; 											}

																	/* Cadre */
.Cadre1								{							border: grey solid 1px;							}
.CadreN								{							border-style: none;								}
.NoBord								{							border-collapse: collapse; border-spacing: 0px;	}
.OmbreBlanc							{							box-shadow:  8px 8px 12px #fff;				}
.Ombre1								{							box-shadow:  8px 8px 12px #000;				}
.Ombre2 								{							box-shadow: 0px 30px 40px rgba(0,0,0,.1);	}
.Rond10								{							border-radius: 10px;								}
.Rond20								{							border-radius: 20px;								}
.Binset								{							border-style: inset;								}
.Boutset								{							border-style: outset;							}
.BDouble								{							border-style: double;							}
.Bnoir								{							border-color: black;								}

																	/* Largeur */
.W100pct								{							width: 100%;										}					
.W90pct								{							width: 90%;											}					
.W80pct								{							width: 80%;											}					
.W70pct								{							width: 70%;											}					
.W60pct								{							width: 60%;											}					
.W45pct								{							width: 45%;											}					
.W35pct								{							width: 35%;											}					
.W30pct								{							width: 30%;											}					
.W20pct								{							width: 20%;											}					
.W15pct								{							width: 15%;											}	
.W10pct								{							width: 10%;											}	
.W530px								{    						width: 530px;          							}
.W400px								{    						width: 400px;          							}
.W320px								{    						width: 320px;          							}
.W260px								{    						width: 260px;          							}
.W45em								{    						width: 45em;          							}
.W40em								{    						width: 38em;          							}
.W35em								{    						width: 33.5em;          						}
.W20em								{    						width: 20em; 	         						}
.W2em									{    						width: 2em;   		       						}
.W1em									{    						width: 1em;   		       						}
    				
																	/* Hauteur */
.H3em									{							height: 5em											}
.H5em									{							height: 5em											}
.H8em									{							height: 8em											}
.H16em								{							height: 16em										}
.H24em								{							height: 24em										}
.H26em								{							height: 26em										}
.H28em								{							height: 28em										}
.H30em								{							height: 30em										}
.H32em								{							height: 32em										}
.H35em								{							height: 35em										}
.H40em								{							height: 40em										}
.H43em								{							height: 43em										}
.H48em								{							height: 48em										}
.H100em								{							height: 100em										}
.H500px								{							height: 500px										}	

																	/* Display */
.DTable								{							display: table; } /* -webkit-box-sizing: border-box ;					} */
.DITable								{							display: inline-table;														}
.DCell								{							display: table-cell; } /*-webkit-box-sizing: border-box ;				} */
.DRow									{							display: table-row; } /*	-webkit-box-sizing: border-box;				} */
.DIBlk								{							display: inline-block;														}
.DBlk									{							display: block;																}
.DNon									{							display: none;																	}

					/* Indice Order */
.ZI1000		{z-index: 999;				}
.ZI950		{z-index: 950;				}
.ZI900		{z-index: 900;				}
.ZI800		{z-index: 800;				}
.ZI500		{z-index: 500;				}
.ZI100		{z-index: 100;				}
.ZI10			{z-index: 10;				}
.ZI5			{z-index: 5;				}
.ZIdx100								{		z-index: 100										}
.ZIdx10								{		z-index: 10											}
.ZIdx5								{		z-index: 5											}
.ZIdx0								{		z-index: 0											}

					/* Margins */	
.Mauto		{margin: auto;				}
.M2em			{margin: 2em;				}				
.ML5px		{margin-left: 5px;		}
.ML5em		{margin-left: 5em;		}
.ML1em		{margin-left: 1em;		}
.ML0			{margin-left: 0;			}
.ML1em		{margin-left: 1em;		}
.ML2em		{margin-left: 2em;		}
.ML10em		{margin-left: 10em;		}
.ML10pct		{margin-left: 10%;		}
.ML15pct		{margin-left: 15%;		}
.ML20pct		{margin-left: 20%;		}
.ML30pct		{margin-left: 25%			}
.ML40pct		{margin-left: 47%			}
.ML50pct		{margin-left: 53%			}
.ML60pct		{margin-left: 60%			}

.G5em			{left: 5em;					}
.G8em			{left: 8em;					}
.G10em		{left: 30em;				}
.G80px		{left: 80px;				}
.G0			{left: 0;					}
.Gm100		{left: -100px;				}
.G10pct		{left: 10%;					}
.G27pct		{left: 28%;					}
.G40pct		{left: 40%;					}
.G80pct		{left: 80%;					}

.D2em			{right: 2em;				}

.MR2em		{margin-right: 2em;		}

.MT1em		{margin-top: 1em;			}
.MT2em		{margin-top: 2em;			}
.MT5em		{margin-top: 5em;			}
.MT12em		{margin-top: 12em;		}
.MT10pct		{margin-top: 10%;			}
.T2em			{top: 2em;					}
.T5em			{top: 5em;					}
.T15em		{top: 15em;					}
.T10em		{top: 30em;					}
.T80px		{top: 80px;					}    
.T0			{top: 0;						}

.MB1em		{margin-bottom: 1em;		}
.Bas			{bottom: 2%;				}
.B0			{bottom: 0px;}
					/* Text Justify */
.TLeft 		{text-align: left;		}
.TRight 		{text-align: right;		}
.TCentre 	{text-align: center;		}

					/* Text Position */
.P2em			{padding: 2em;				}
.P1em			{padding: 1em;				}
.Pdemi		{padding: 0.5em;			}
.PT15em 		{padding-top: 15em;		}
.PT12em 		{padding-top: 12em;		}
.PT8em		{padding-top: 8em;		}
.PT5em		{padding-top: 5em;		}
.PT2em 		{padding-top: 2em; 		}

.PL2em 		{padding-left: 2em; 		}
.PL6em 		{padding-left: 6em; 		}
.PL8em 		{padding-left: 8em; 		}

.PB1em		{padding-bottom: 1em;	}

					/* Indentation */
.LIndent			{text-indent: 2em			}
					/* Text Font */
.fTitre 			{ text-shadow: 5px 8px 5px black; letter-spacing: 4px}
.fInput 			{ text-shadow: 5px 5px 5px #000; letter-spacing: 2px;
					  -webkit-text-shadow: 5px 5px 8px #000;
					}
.fSouligne		{text-decoration: underline;}
.ffTimes			{font-family: "Times New Roman", Times, serif;	}
.ffArial			{font-family: Arial, sans-serif;	}
.ffPFS			{font-family: 'Petit Formal Script', cursive;}
.ffAllura		{font-family: 'Allura', cursive;}
.fItalic			{font-style: italic;	}
.fGras	 		{font-weight:900;		}
.fSLarge	 		{font-size: 4em		}
.fSGeant	 		{font-size: 6em		}
.fSXXL	 		{font-size: 8em		}
.fSXXXL	 		{font-size: 10em		}
.fS10	 			{font-size: 3em		}
.fSsmall	 		{font-size: 0.8em;	}
.fS1	 			{font-size: 1em		}
.fS2	 			{font-size: 1.2em		}
.fS5	 			{font-size: 1.5em		}
.fSmed			{font-size: large;	}
.fS100pct		{font-size: 100%		}
.fCalendar		{font-family: "Times New Roman", Times, serif;letter-spacing: 1px;}

					/* Text Area */
.Asccache		{overflow-y: hidden;}
.Noresize		{resize: none;}

					/* Vertical Align */
.VATop		{vertical-align: top;		}
.VAMid		{vertical-align: middle;	}

					/* Visibiité */
.Cache 		{visibility: hidden;		}
.Voir 		{visibility: visible;	}
.Nette		{opacity: 1					}
.Opaque		{opacity: 0.2				}
.Transp		{opacity: 0.8				}
.Transp2		{opacity: 0.9				}
.Invisible	{opacity: 0					}
.Estompe		{	/*CSS3 transition*/
    				-webkit-transition: all 3s ease 0s;
    				-moz-transition: all 3s ease 0s;
    				-o-transition: all 3s ease 0s;
    				transition: all 3s ease 0s;
				}

					/* Cursor */
.CursP 		{cursor: pointer;			}


.bgd {
	background-image: url(/img/MCfond.jpg); 
	background-repeat:no-repeat;
  	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}
.bgd1 {
	background-image: url(/img/lachopinais.jpg); 
	background-repeat:no-repeat;
  	background-size: cover;
	background-position: right bottom;
}
input:hover
{
	background-color: lightgrey;
	opacity: .6 ;
}

					/* ********** */
					/* References */
					/* ********** */
					
a					{	color: red; 
						font-size: 2em;
						/*CSS3 transition*/
    					-webkit-transition: all 3s ease 0s;
    					-moz-transition: all 3s ease 0s;
    					-o-transition: all 3s ease 0s;
    					transition: all 3s ease 0s;
					}
a:hover 			{color: #756E62; }
a:visited		{color: #756E62;}

article > p > span >	a { 	color: black; font-size: 1em; }

article > p > span >	a:hover ~ #idivImg1	{ 	visibility: visible; }

article > p > span >	a:hover ~ #idivImg2	{ 	visibility: visible; }

article > p > span >	a:hover ~ #idivImg3	{ 	visibility: visible; }

article > p > a > span { 	color: black; font-size: 0.5em; }

#i2:hover ~ #iImg1 {visibility: visible; }
#i4:hover ~ #iImg2 {visibility: visible; }
#i6:hover ~ #iImg3 {visibility: visible; }
#i8:hover ~ #iImg4 {visibility: visible; }
#i10:hover ~ #iImg5 {visibility: visible; }
#i12:hover ~ #iImg6 {visibility: visible; }
#i15:hover ~ #iImg7 {visibility: visible; }
#i17:hover ~ #iImg8 {visibility: visible; } 
#i20:hover ~ #iImg9 {visibility: visible; }
#i22:hover ~ #iImg10 {visibility: visible; }
#i24:hover ~ #iImg11 {visibility: visible; }
#i26:hover ~ #iImg12 {visibility: visible; }
#i29:hover ~ #iImg13 {visibility: visible; }
#i31:hover ~ #iImg14 {visibility: visible; }
#i34:hover ~ #iImg141 {visibility: visible; }
#i36:hover ~ #iImg15 {visibility: visible; }
#i38:hover ~ #iImg16 {visibility: visible; }
#i40:hover ~ #iImg17 {visibility: visible; }
#i42:hover ~ #iImg18 {visibility: visible; }
#i44:hover ~ #iImg19 {visibility: visible; }
#i46:hover ~ #iImg20 {visibility: visible; }
#i55:hover ~ #iImg22 {visibility: visible; }
#i57:hover ~ #iImg23 {visibility: visible; }
#i59:hover ~ #iImg24 {visibility: visible; }
#i64:hover ~ #iImg26 {visibility: visible; }
#i67:hover ~ #iImg27 {visibility: visible; }
#i69:hover ~ #iImg28 {visibility: visible; }
#i71:hover ~ #iImg29 {visibility: visible; }

figcaption		{	
						background-color: lightgrey;
						/* box-shadow:  5px 5px 5px #666; */
						color: black;
	 					opacity: 1;
	 					padding-top: 1em;
	 					padding-bottom: 1em;
	 					padding-left: 2em;
	 					padding-right: 2em;
    					/*CSS3 transition*/
    					-webkit-transition: all 3s ease 0s;
    					-moz-transition: all 3s ease 0s;
    					-o-transition: all 3s ease 0s;
    					transition: all 3s ease 0s;
					}

/*img	{margin: auto; border-style: inset; border-width: 1px; box-shadow:  5px 5px 5px #666; } */
/* First image before starting slide show */
article figure { 
						background-image: url(/img/chambre1-6.jpg); // bal2.jpg
						background-repeat:no-repeat;
						background-position:center center; 
					}
#isdb	{ 
						background-image: url(/img/sdb7.jpg); // sdb0.png
						background-repeat:no-repeat;
						background-position:center center; 
					}			
#is2v	{ 
						background-image: url(/img/s2v1-1.jpg); //url(/img/WPs2v1.png);
						background-repeat:no-repeat;
						background-position:center center; 
					}			
article figure img 
					{cursor: pointer; opacity:0 ;
						-webkit-transition: opacity 2s ease-in-out;
						-moz-transition: opacity 2s ease-in-out;
						-o-transition: opacity 2s ease-in-out;
						transition: opacity 2s ease-in-out;
					}
article figure img:hover { opacity:1;}

label				{width: 100%}
label:hover		{color: #756E62;} 
label:visited		{color: #756E62;} 

/*
						Menu Activities
*/
#icell1	ul		{list-style: none; padding-left: 0; padding-top: 0;}
#icell1	ul	ul {display:  none;} 

#icell1	ul  li:hover > ul { 
	margin-left: 8em; 
	display: block; 
} 
/*
						SLIDESHOW
*/
.CacheSS	{overflow: hidden;}	
#sContent {
    /* position: absolute;   */
    width: 5000px;         /*ou 300% car 3 éléments*/
    /* margin-bottom: 20px; */
    padding: 0;
    /*CSS3 transition*/
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

#sContent figure { display: table-cell; }

#sContent figure img 
					{cursor: pointer; 
						-webkit-transition: opacity 4s ease-in-out;
						-moz-transition: opacity 4s ease-in-out;
						-o-transition: opacity 4s ease-in-out;
						transition: opacity 4s ease-in-out;
					}

#slideshow .next, #slideshow .prev {
    position: absolute;
    top: 13.5em;
    z-index: 20;} 
#slideshow .prev { left: 0; }
#slideshow .next { right: 0; }

/* initialisation */
#slideshow .next, #slideshow .prev { display: none; }
#slideshow .next1 { display: inline-block; }

/* Vers 1ère étape */
#s1:target #sContent { left: 0px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: inline-block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -37.5em; } /*ou -100%*/
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: inline-block; }

/* Vers 3ème étape */
#s3:target #sContent { left: -75em; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .next3, #s3:target .prev3 { display: inline-block; }

/* Vers 4ème étape */
#s4:target #sContent { left: -112.5em; } /*ou -300%*/
#s4:target .next, #s4:target .prev { display: none; }
#s4:target .next4, #s4:target .prev4 { display: inline-block; }

/* Vers 5ème étape */
#s5:target #sContent { left: -150em; } /*ou -300%*/
#s5:target .next, #s5:target .prev { display: none; }
#s5:target .prev5 { display: inline-block; }

/* Vers 6ème étape 
#s6:target #sContent { left: -3010px; } 
#s6:target .next, #s6:target .prev { display: none; }
#s6:target .prev6 { display: block; }
*/

/* Not the same size of pictures*/
/* Vers 1ère étape */
#d1:target #sContent { left: 0px; }
#d1:target .next, #d1:target .prev { display: none; }
#d1:target .next1 { display: block; }

/* Vers 2ème étape */
#d2:target #sContent { left: -320px; } /*ou -100%*/
#d2:target .next, #d2:target .prev { display: none; }
#d2:target .next2, #d2:target .prev2 { display: block; }

/* Vers 3ème étape */
#d3:target #sContent { left: -643px; } /*ou -200%*/
#d3:target .next, #d3:target .prev { display: none; }
#d3:target .next3, #d3:target .prev3 { display: block; }

/* Vers 4ème étape */
#d4:target #sContent { left: -965px; } /*ou -300%*/
#d4:target .next, #d4:target .prev { display: none; }
#d4:target .next4, #d4:target .prev4 { display: block; }

/* Vers 5ème étape */
#d5:target #sContent { left: -1286px; } /*ou -300%*/
#d5:target .next, #d5:target .prev { display: none; }
#d5:target .prev5 { display: block; }

/*
	Slide Show Automatic
*/
@keyframes AutoSlide {
    0% , 3%, 100% {
        left: 0px; 		/*1ère image*/
    }
    7%, 11% {
        left: -1000px; /*2ème image*/
    }
    15%, 19% {
        left: -2000px; /*3ème image*/
    }
    23%, 27% {
        left: -3000px; /*4ème image*/
    }
    31%, 35% {
        left: -4000px; /*5ème image*/
    }
    39%, 42% {
        left: -5000px; /*6ème image*/
    }
    45%, 49% {
        left: -6000px; /*7ème image*/
    }
    53%, 57% {
        left: -7000px; /*9ème image*/
    }
    61%, 65% {
        left: -6000px; /*8ème image*/
    }
    69%, 73% {
        left: -5000px; /*7ème image*/
    }
    77%, 81% {
        left: -4000px; /*6ème image*/
    }
    85%, 88% {
        left: -3000px; /*8ème image*/
    }
    91%, 94% {
        left: -2000px; /*8ème image*/
    }
    96% {
        left: -1000px; /*8ème image*/
    }
}

@-moz-keyframes AutoSlide {
    0% , 3%, 100% {
        left: 0px; 		/*1ère image*/
    }
    7%, 11% {
        left: -1000px; /*2ème image*/
    }
    15%, 19% {
        left: -2000px; /*3ème image*/
    }
    23%, 27% {
        left: -3000px; /*4ème image*/
    }
    31%, 35% {
        left: -4000px; /*5ème image*/
    }
    39%, 42% {
        left: -5000px; /*6ème image*/
    }
    45%, 49% {
        left: -6000px; /*7ème image*/
    }
    53%, 57% {
        left: -7000px; /*9ème image*/
    }
    61%, 65% {
        left: -6000px; /*8ème image*/
    }
    69%, 73% {
        left: -5000px; /*7ème image*/
    }
    77%, 81% {
        left: -4000px; /*6ème image*/
    }
    85%, 88% {
        left: -3000px; /*8ème image*/
    }
    91%, 94% {
        left: -2000px; /*8ème image*/
    }
    96% {
        left: -1000px; /*8ème image*/
    }
}

@-webkit-keyframes AutoSlide {
    0% , 3%, 100% {
        left: 0px; 		/*1ère image*/
    }
    7%, 11% {
        left: -1000px; /*2ème image*/
    }
    15%, 19% {
        left: -2000px; /*3ème image*/
    }
    23%, 27% {
        left: -3000px; /*4ème image*/
    }
    31%, 35% {
        left: -4000px; /*5ème image*/
    }
    39%, 42% {
        left: -5000px; /*6ème image*/
    }
    45%, 49% {
        left: -6000px; /*7ème image*/
    }
    53%, 57% {
        left: -7000px; /*9ème image*/
    }
    61%, 65% {
        left: -6000px; /*8ème image*/
    }
    69%, 73% {
        left: -5000px; /*7ème image*/
    }
    77%, 81% {
        left: -4000px; /*6ème image*/
    }
    85%, 88% {
        left: -3000px; /*8ème image*/
    }
    91%, 94% {
        left: -2000px; /*8ème image*/
    }
    96% {
        left: -1000px; /*8ème image*/
    }
}

@-o-keyframes AutoSlide {
    0% , 3%, 100% {
        left: 0px; 		/*1ère image*/
    }
    7%, 11% {
        left: -1000px; /*2ème image*/
    }
    15%, 19% {
        left: -2000px; /*3ème image*/
    }
    23%, 27% {
        left: -3000px; /*4ème image*/
    }
    31%, 35% {
        left: -4000px; /*5ème image*/
    }
    39%, 42% {
        left: -5000px; /*6ème image*/
    }
    45%, 49% {
        left: -6000px; /*7ème image*/
    }
    53%, 57% {
        left: -7000px; /*9ème image*/
    }
    61%, 65% {
        left: -6000px; /*8ème image*/
    }
    69%, 73% {
        left: -5000px; /*7ème image*/
    }
    77%, 81% {
        left: -4000px; /*6ème image*/
    }
    85%, 88% {
        left: -3000px; /*8ème image*/
    }
    91%, 94% {
        left: -2000px; /*8ème image*/
    }
    96% {
        left: -1000px; /*8ème image*/
    }
}

#sshow {
    position: relative;
    width: 1000px;;
    height: 500px;
    margin:  20px auto;
    overflow: hidden;
}
#iContenu li {
    display: inline;
}

#iContenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 10000px;
    margin: 0;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
    -webkit-animation-name: AutoSlide;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;

    -moz-animation-name: AutoSlide;
    -moz-animation-duration: 60s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;

    -o-animation-name: AutoSlide;
    -o-animation-duration: 60s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;

}