.CadreEntierSlider {
	max-width: 600px;
	max-height: 616px;
	margin: auto;
	padding: 0px;
}

.CadreBoutonG {
	width: auto;
	height: auto;
	padding: 0px;
	margin: 10px 0px 20px 0px;
	text-align: center;
}

.ZoneBoutonS {
	max-width: 596px;
	height: auto;
	margin: auto;
	padding: auto;
}

.BoutonSlider {
	min-width: 85px;
	min-height: 30px;
	margin: auto auto 10px auto;
	border: 1px solid rgb(184,198,223);
	border-radius: 6px;
	box-shadow: 0px 4px 1px #41516D;
	color: #F2F2F2;
	background: rgb(184,198,223);
	background-image: -webkit-linear-gradient(top, rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%);
	background-image: -moz-linear-gradient(top, rgba(184,198,223,1) 0%, rgba(109,136,183,1) 100%);
	background-image: -ms-linear-gradient(top, rgba(184,198,223,1) 0%, rgba(109,136,183,1) 100%);
	background-image: -o-linear-gradient(top, rgba(184,198,223,1) 0%, rgba(109,136,183,1) 100%);
	background-image: linear-gradient(top, rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%);

}

.BoutonSlider:hover {
	cursor: pointer;
	background-image: -webkit-linear-gradient(top, #A5B1C6 0%, #586E93 100%);
	background-image: -moz-linear-gradient(top, #A5B1C6 0%, #586E93 100%);
	background-image: -ms-linear-gradient(top, #A5B1C6 0%, #586E93 100%);
	background-image: -o-linear-gradient(top, #A5B1C6 0%, #586E93 100%);
	background-image: linear-gradient(top, #ABB7CC 0%, #586E93 100%);
}

.BoutonSlider:active {
	position: relative;
	top: 2px;
	box-shadow: 0px 2px 1px #41516D;
}

.TextLegend {
	width: 100%;
	height: auto;
	margin: auto;
	padding: 0px;
	text-align: center;
	font-family: 'opensans_regular', arial, sans-serif;
	font-size: 0.8em;
	color: #555;
}

/* défini le cadre général */
#SliderChoixFilm {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 1px;
}

/* Défini le conteneur contenant silder, bouton, pagination */
.container {
	position: relative;
	max-width: 564px;		/* <---------- Correspond à la largeur de l'image */
	height: 440px;			/* <---------- Correspond à la hauteur de l'image */
	padding: 15px;
	margin: 0px auto 2em auto;
	border: 1px solid #ddd;
	background: #FFF;
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0px 0px 3px rgba(0,0,0, 0.2);
	background-image: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background-image: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background-image: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background-image: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background-image: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
}

#container_auto, #container_batiment {
	max-width: 564px;
	height: 289px;
	margin: 50px auto 50px auto;
}

@media only screen and (max-width: 568px) {
	.container { height: 405px; }
	#container_auto, #container_batiment { height: 254px; }
}

@media only screen and (max-width: 499px) {
	.container { height: 351px; }
	#container_auto, #container_batiment { height: 225px; }
}

@media only screen and (max-width: 480px) {
	.container { height: 336px; }
	#container_auto, #container_batiment { height: 217px; }
}

@media only screen and (max-width: 360px) {
	.container { height: 242px; }
	#container_auto, #container_batiment { height: 185px; }
}

@media only screen and (max-width: 320px) {
	.container { height: 212px; }
	#container_auto, #container_batiment { height: 168px; }
}

/* Mise en place de l'ombre du dessous pour mise en relief */
.container:before,
.container:after {
	content: " ";
	position: absolute;
	width: 50%;
	height: 15%;
	bottom: 15px;
	z-index: -10;
	box-shadow: 0px 20px 10px rgba(0,0,0, 0.4);
	border-radius: 10%;
}
.container:before {
	left: 10px;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.container:after {
	right: 10px;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}

/* Bloc contenant le triplet boutons et slider */
.Triplet {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

/* Bouton de navigation */
.BoutonDefile {
	width: 10%;
	text-align: center;
	position: absolute;
	top: 15px;
	bottom: 15px;
	z-index: 99;
}

.BoutonGauche {
	left: 15px;
}

.BoutonDroit {
	right: 15px;
}

.sliderbutton {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.BoutonDefile p {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;
	color: #DDDDDD;
	font-size: 2.5em;
	font-weight: bold;
	position: relative;
	top: 43%;
	text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.6);
}
.sliderbutton:hover {
	background: rgba(255, 255, 255, 0.4);
}

.sliderbutton:hover > p {
	color: #727272;
}

.sliderbutton:active > p {
	position: relative;
	top: 44%;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
}

/* Evite la selection du bouton */
.BoutonDefile p::-webkit-selection, .BoutonDefile p:focus { color: #DDDDDD; background: none; }

.BoutonDefile p::-moz-selection, .BoutonDefile p:focus { color: #DDDDDD; background: none; }

.BoutonDefile p::-o-selection, .BoutonDefile p:focus { color: #DDDDDD; background: none; }

.BoutonDefile p::-ms-selection, .BoutonDefile p:focus { color: #DDDDDD; background: none; }

.BoutonDefile p::selection, .BoutonDefile p:focus { color: #DDDDDD; background: none; }

/* Bloc slider */
.BlocSlider {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/* Le conteneur des slides */
.slider {
	position: absolute;
	left: 0px;
	top: 0px;
	/*width: 2600%;*/
	height: 100%;
	/* rajout */
	padding: 0px;
	margin: 0px;
}

/* <---------- 100% x par le nombre d'images ----------> */
#slider_solaire { width: 1600%; } /* 16 films */
#slider_emissivite { width: 400%; } /* 3 films + 1 comble */
#slider_deco { width: 3300%; } /* 33 films */
#slider_secu { width: 1000%; } /* 9 films + 1 comble */
#slider_antiUV { width: 200%; } /* 2 films */
#slider_miroirST { width: 500%; } /* 5 films */
#slider_auto { width: 1600%; } /* 16 films */
#slider_batiment { width: 1600%; } /* 16 films */

/* Annulation des marges sur figure */
.BlocImg {
	position: relative;
	display: inline-block;
	/*width: 3.8461538%;*/
}

/* <---------- 100% / par le nombre d'images ----------> */
.BlocImg_solaire { width: 6.25%; } /* 16 films */
.BlocImg_emissivite { width: 25%; } /* 3 films + 1 comble */
.BlocImg_deco { width: 3.030303%; } /* 33 films */
.BlocImg_secu { width: 10%; } /* 9 films + 1 comble */
.BlocImg_antiUV { width: 50%; } /* 2 films */
.BlocImg_miroirST { width: 20%; } /* 5 films */
.BlocImg_auto { width: 6.25%; } /* 16 films */
.BlocImg_batiment { width: 6.25%; } /* 16 films */

.BlocImg, .slider figure {
	height: 100%;
	padding: 0px;
	margin: 0px;
}

.BlocImg img {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
}

/* Petit effet de vignette sur les images */
.slider figure:after {
	position: absolute;
	display: block;
	content: " ";
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	box-shadow: 0px 0px 65px rgba(0,0,0, 0.5) inset;
}

/* Styles des légendes */
.slider figcaption {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: -55px;
	padding: 15px;
	margin: 0px;
	border-top: 1px solid rgb(225,225,225);
	text-align: center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: 'opensans_regular', arial, sans-serif; /* Georgia, Times, serif */
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	font-size: 0.9em;
	-webkit-transition: bottom 2s;
	-moz-transition: bottom 2s;
	-ms-transition: bottom 2s;
	-o-transition: bottom 2s;
	transition: bottom 2s;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease;
}

.Triplet:hover figcaption {
	bottom: 0px;
}

.CaptionTitle {
	font-family: 'opensans_semibold', arial, sans serif;
	color: #DC143C;
}

.CaptionSmall {
	font-size: 0.8em;
}

/* Bloc de pagination */
.Nav_Slider {
	margin: 25px 0px 0px 0px;
	padding: 0px;
}

.pagination  {
	padding: 0px;
	margin: 0px;
	text-align: center;
}

.pagination div {
	display: inline-block;
	padding: 0px;
	margin: 0px 5px 0px 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(117,117,117,0.9) inset;
}

.pagination div:hover {
	cursor: pointer;
	background: orange;
}

.pagination div:active, .SlideActive {
	background: #bd9b83;
}

/* Effet de translation */
.BlocSlider .slider {
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

.SliderTranslate {
	-webkit-transform: translateX(-10%);
	-moz-transform: translateX(-10%);
	-ms-transform: translateX(-10%);
	-o-transform: translateX(-10%);
	transform: translateX(-10%);
}