/* CSS Document */
*{        
	padding:0;
	margin:0;
	list-style-type:none;
}

section{
	overflow:hidden;
	margin:0 auto;
}

#floating{
	visibility:visible;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;}
}
	
body{
	overflow:hidden;
}

#s_slider{
	/*background-color:#CCC;*/
	width:1800px;
	height:450px;
	left:50%;
	top:50%;
	
	transform: translate(-50%,-50%);   
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);   
	position:absolute;
	margin:0 auto;
}

#mask{
	left:0;
	right:0;
	width:1800px;
	height:100%;
	position:absolute;
	overflow:hidden;
}

#s_conteneur li{
	display:inline-block;
	min-width:600px;
	text-align:center;
	min-height:450px;
	height:100%;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:none;
}

.fleche{
	/*background-color:#CCC;*/
	position:absolute;
	text-align:center;
	font-size:25px;
	font-weight:bold;
	line-height:50px;
	color:white;
	top:0px;
	cursor:pointer;
	display:none;
	
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}

#flecheGauche{
	position:absolute;
	z-index:1001;
	opacity:1;
	/*
	left:30%;
	top:100%;
	*/
	height:50px;
	width:40px;
	background-color:rgba(0,0,0,1);
	border-radius:5px;
	text-align:center;
	
	/*
	transform: translate(75%,50%); 
    -webkit-transform:  translate(75%,50%);
    -moz-transform:  translate(75%,50%);
    -ms-transform:  translate(75%,50%));
	*/  
	
	/*   
	-webkit-transition-property:all;
  	-webkit-transition-duration:500ms;

  	-moz-transition-property:all;
  	-moz-transition-duration:500ms;

  	transition-property:all;
  	transition-duration:500ms;
	*/
}

#flecheDroite{
	position:absolute;
	z-index:1001;
	opacity:1;
	/*
	right:30%;
	top:100%;
	*/
	height:50px;
	width:40px;
	
	/*
	transform: translate(75%,50%); 
    -webkit-transform:  translate(75%,50%);
    -moz-transform:  translate(75%,50%);
    -ms-transform:  translate(75%,50%));
	*/  
	   
	background-color:rgba(0,0,0,1);
	border-radius:5px;
	text-align:center;
	
	/*
	-webkit-transition-property:all;
  	-webkit-transition-duration:500ms;

  	-moz-transition-property:all;
  	-moz-transition-duration:500ms;

  	transition-property:all;
  	transition-duration:500ms;
	*/
}

#s_conteneur{
	/*background-color:#CCC;*/
	position:absolute;
	width:25000px;
	height:450px;
	left:0;
	text-align:center;
	
	/* La transition sur tout les navigateurs */
	   /* Chrome */ 
	  -webkit-transform-style: preserve-3d;
	  -webkit-transition-property:all;
	  -webkit-transition-duration:1s;

	   /* Firefox */ 
	  -moz-transform-style: preserve-3d;
	  -moz-transition-property:all;
	  -moz-transition-duration:1s;
	  
	   /* Opera */ 
	  transform-style: preserve-3d;
	  transition-property:all;
	  transition-duration:1s;
}

div#d_conteneur{
	overflow:auto;
	/*background-color:rgba(0,0,0,.8);*/
	position:relative;
	width:900px;
	min-height:100%;
	margin:0 auto;
	padding:0 0 10px 10px;
	text-align:left;
}

.ti{
	position:relative; 
	display:block;
	width:auto; 
	height:auto;
	color:#FFF; 
	font-size:25px;
	top:1em;
}


.croix{
	float:right; 
	position:relative; 
	top:0; 
	right:0;
	font-size:25px; 
	color:#FFF; 
	padding:5px; 
	cursor:pointer; 
	z-index:1500;
}

div#desc_conteneur{
	display:inline-block; 
	width:100%; 
	height:100%; 
	text-align:center;
	margin:0 auto;
	margin-top:20px;
	max-height:600px;
	max-width:870px;
	min-height:400px;
	/*background-color:#FFF;*/
}

#desc_conteneur a{
	color:#CCC;
	text-decoration:none;
}

#image_haut{
	position:relative;
	left:0;
	right:0;
	display:block;
	margin:0 auto;
	max-height:800px;
	max-width:850px;
}

img#par{
	display:block;
	margin:0 auto;
	max-height:500px;
	max-width:850px;
}
img#pardeux{
	display:block;
	margin:0 auto;
	max-height:500px;
	max-width:850px;
}

img#image_bas{
	display:inline-block;
	max-width:400px;
	max-height:500px;
	float:left;
	vertical-align:middle;
}

p#description{
	position:relative;
	top:auto;
	display:inline-block; 
	text-align:left;
	max-width:400px;
	min-height:200px;
	padding-bottom:2em;
	color:#FFF;
	/*background-color:#FFF;*/
}

h3#titre{
	position:relative;
	display:block;
	max-width:400px;
	text-align:left;
	font-weight:bold;
	top:0;
	color:#FFF;
}

#titre{
	position:relative;
	top:4em;
	max-width:600px;
	margin:0 auto;
	text-align:right;
	padding:5px;
}

#bandeau{
	visibility:hidden;
	z-index:1200;
	position:absolute;
	width:100%;
	overflow:auto;
	height:100%;
	margin:0;
	padding:0;
	background-color:rgba(0,0,0,.9);
	left:0;
	top:0;
	bottom:0;
	right:0;
	text-align:center;
	display:block;
	
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property:all;
	-webkit-transition-duration:1s;

	   /* Firefox */ 
	-moz-transform-style: preserve-3d;
	-moz-transition-property:all;
	-moz-transition-duration:1s;
	  
	   /* Opera */ 
	transform-style: preserve-3d;
	transition-property:all;
	transition-duration:1s;
}

.conteneur_desc #bandeau{
	width:700px;
	height:auto;
	top:4em;
	margin:0 auto;
	
}

.fermer #bandeau{
	opacity:0;
	
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property:all;
	-webkit-transition-duration:1s;

	   /* Firefox */ 
	-moz-transform-style: preserve-3d;
	-moz-transition-property:all;
	-moz-transition-duration:1s;
	  
	   /* Opera */ 
	transform-style: preserve-3d;
	transition-property:all;
	transition-duration:1s;
}

.ouvert #bandeau{
	opacity:1;
}

img#horizontale{
	top:0;
	bottom:0;
	max-width:600px;
	min-width:600px;
	height:auto;
}



#description{
	position:relative;
	top:7em;
	text-align:left;
	padding:5px;
	max-width:700px;
	margin:0 auto;
}

/* Les différentes positions du slider 

.image1 #s_conteneur{
	left:0;
}

.image2 #s_conteneur{
	left:-100%;
}

.image3 #s_conteneur{
	left:-200%;
}

.image4 #s_conteneur{
	left:-300%;
}

.image5 #s_conteneur{
	left:-400%;
}
*/

/* Les images */
#s_conteneur li{
	float:left;
}

#bouton{
	position:relative;
	width:244px;
	height:55px;
	margin: 300px 0px 0px 40px;
	cursor:pointer;
}

@media only screen and (min-width: 310px) and (max-width: 600px){
	
	#flecheGauche{
		/*
		top:95%;
		left:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
		*/
	}
	
	#flecheDroite{
		/*
		top:95%;
		right:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
		*/
	}
	
	#mask{
		left:0;
		width:100%;
		height:250px;
	}
	
	#s_slider{
		max-width:360px;
		width:360px;
		left:0;
		right:0;
		top:50%;
		bottom:4em;
		height:250px;
		
		transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
	}
	
	#s_conteneur img{
		left:0;
		width:360px;
		min-width:360px;
		max-width:360px;
		max-height:250px;
		height:auto;
	}
	
	#s_conteneur{
		max-height:250px;
	}
	
	#s_conteneur li{
		max-width:360px;
		max-height:250px;
		min-height:250px;
		min-width:360px;
	}
	
	#description{
		top:1em;
		height:auto;
		max-width:360px;
	}
	
	.conteneur_desc #bandeau{
		width:360px;
		height:auto;
		top:1em;
	}
	
	div#d_conteneur{
		/*background-color:rgba(0,0,0,.8);*/
		max-width:360px;
		height:auto;
		width:auto;
	}
	
	div#desc_conteneur{
		max-width:360px; 
		height:auto; 
		margin-top:10px;
		max-height:500px;
		min-height:400px;
	}
	
	h3#titre{
		
	}
	
	p#desc_conteneur{
	}
	
	#image_haut{
		max-height:400px;
		max-width:360px;
	}
	
	img#par{
		max-height:400px;
		max-width:360px;
	}
	
	img#pardeux{
		max-height:400px;
		max-width:360px;
	}
	
	img#image_bas{
		max-width:100%;
		max-height:100%;
		top:0;
	}
	
	p#description{
		max-width:100%;
		min-height:400px;
	}
}

@media only screen and (min-width: 600px) and (max-width: 1024px){
	#flecheGauche{
		top:50%;
		left:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
	}
	
	#flecheDroite{
		top:50%;
		right:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
	}
	
	#mask{
		left:0;
		width:100%;
		height:100%;
	}
	
	#s_slider{
		max-width:600px;
		width:600px;
		left:0;
		right:0;
		top:50%;
		bottom:4em;
		height:450px;
		
		transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
	}
	
	#s_conteneur img{
		left:0;
		width:600px;
		max-width:600px;
		max-height:450px;
		height:auto;
	}
	
	#s_conteneur{
		max-height:450px;
		min-height:450px;
	}
	
	#s_conteneur li{
		max-width:600px;
		max-height:450px;
		min-width:600px;
		min-height:450px;
	}
	
	img#horizontale{
		top:0;
		bottom:0;
		width:600px;
		max-width:600px;
		min-width:600px;
		height:auto;
		max-height:450px;
		min-height:450px;
	}
	
	#description{
		top:1em;
		max-width:600px;
		/*background-color:#FFF;*/
	}
	
	.conteneur_desc #bandeau{
		/*background-color:#FFF;*/
		width:600px;
		height:auto;
		top:1em;
	}
	
	div#d_conteneur{
		max-width:600px;
		height:auto;
		min-height:400px;
	}
	
	div#desc_conteneur{
		max-width:600px; 
		height:auto; 
		margin-top:10px;
		max-height:364px;
		min-height:400px;
	}
	
	#image_haut{
		max-height:600px;
		max-width:600px;
	}
	
	img#par{
		max-height:600px;
		max-width:600px;
	}
	
	img#pardeux{
		max-height:600px;
		max-width:600px;
	}
	
	img#image_bas{
		max-width:364px;
		max-height:300px;
		top:0;
	}
	
	p#description{
		max-width:364px;
		min-height:300px;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1600px){
	#flecheGauche{
		top:50%;
		left:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
	}
	
	#flecheDroite{
		top:50%;
		right:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
	}
	
	#mask{
		left:0;
		width:100%;
		height:100%;
	}
	
	#s_slider{
		max-width:600px;
		width:100%;
		left:0;
		right:0;
		height:250px;
		max-height:250px;
		top:50%;
		bottom:4em;
		
		transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
	}
	
	#s_conteneur img{
		left:0;
		width:300px;
		max-width:300px;
		max-height:220px;
		height:auto;
	}
	
	#s_conteneur{
		max-height:250px;
		min-height:250px;
	}
	
	#s_conteneur li{
		max-width:300px;		
		min-width:300px;
		max-height:250px;
		min-height:250px;
		height:auto;
	}
	
	img#horizontale{
		width:300px;
		max-width:300px;
		min-width:300px;
		max-height:250px;
		min-height:250px;
		height:auto;
	}
	
	#description{
		top:1em;
		max-width:100%;
		min-width:0;
		/*background-color:#FFF;*/
	}
	div#d_conteneur{
		max-width:800px;
		min-width:300px;
		height:auto;
		min-height:768px;
	}
	
	.conteneur_desc #bandeau{
		/*background-color:#FFF;*/
		max-width:800px;
		min-width:300px;
		height:auto;
		top:1em;
	}
	div#desc_conteneur{
		max-width:800px;
		min-width:300px;
		height:auto; 
		margin-top:10px;
		max-height:600px;
		min-height:400px;
	}
	
	#image_haut{
		max-height:600px;
		max-width:1600px;
		min-width:600px;
	}
	
	img#par{
		max-height:600px;
		max-width:1600px;
		min-width:600px;
	}
	
	img#pardeux{
		max-height:800px;
		max-width:1024px;
	}
	
	img#image_bas{
		max-width:400px;
		min-width:200px;
		max-height:400px;
		top:0;
	}
	
	p#description{
		max-width:350px;
		min-width:200px;
		min-height:400px;
	}
}

@media only screen and (min-width: 1600px){
	#flecheGauche{
		top:50%;
		left:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
	}
	
	#flecheDroite{
		top:50%;
		right:50px;
		transform:translateX(-20%);
		-webkit-transform:translateX(-20%);
		-moz-transform:translateX(-20%);
	}

}