/*
	style-glissiere.css
	Création: 22/02/2019
	Modification: 26/02/2019
	Camille FRONTON
*/



/*---------------------------------------------------------------*/
.cadreDiapo{
	width:100%;
	position:relative;
	overflow:hidden;
	height:522px;
	box-shadow:1px 1px 20px #888;
}
.zoneDiaporama {
	width:400px;
	height:520px;
	margin:0 auto;
	padding:0.5em;
}

.zoneDiaporama ul#diaporama{
	list-style:none;
	padding:0;
	margin:0 auto;
	max-height:380px;
}
.zoneDiaporama ul#diaporama li div.messageDiapo{
	width:350px;
	height:400px;
	margin:46px auto 47px auto;
	background-color:#8990ff;
	color:white;
}
.zoneDiaporama ul#diaporama li div.messageDiapo h2{
	font-size:120%;
	text-align:center;
}
.zoneDiaporama ul#diaporama li.lesImages{
	padding:0;
	margin:0;
}
.zoneDiaporama ul#diaporama li.lesImages .legende {
	position:absolute;
	left:0; 
	right:0; 
	bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.62);
	color: #322e2e;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.5);
}
.zoneDiaporama ul#diaporama li.lesImages .legende {
	/* ... la propriété animation */
	animation: figcaptionner 10s infinite;
}
/* animation du bandeau */
@keyframes figcaptionner {
	0%, 56%, 72%, 100% { bottom: -55px; }
	8%, 48%, 88%, 95%	{ bottom: 5px;	}
}
@-webkit-keyframes figcaptionner {
	0%, 56%, 72%, 100% { bottom: -55px; }
	8%, 48%, 88%, 95%	{ bottom: 5px;	}
}
@-moz-keyframes figcaptionner {
	0%, 56%, 72%, 100% { bottom: -55px; }
	8%, 48%, 88%, 95%	{ bottom: 5px;	}
}

/*---------------------------------------------------------------*/
.glissiere{
	width: 400px;
	overflow:hidden;
	margin: 30px auto;
}
.glissade{
	width: calc(400px * 7);
	animation: laGlissiere 15s infinite;
}
.glisseImages{
	float:left;
}

@keyframes laGlissiere {
	0%{
		transform: translateX(0);
	}
	10%{
		transform: translateX(0);
	}
	14%{
		transform: translateX(-400px);
	}
	24%{
		transform: translateX(-400px);
	}
	28%{
		transform: translateX(-800px);
	}
	38%{
		transform: translateX(-800px);
	}
	42%{
		transform: translateX(-1200px);
	}
	52%{
		transform: translateX(-1200px);
	}
	56%{
		transform: translateX(-1600px);
	}
	66%{
		transform: translateX(-1600px);
	}
	70%{
		transform: translateX(-2000px);
	}
	80%{
		transform: translateX(-2000px);
	}
	84%{
		transform: translateX(-2400px);
	}
	94%{
		transform: translateX(-2400px);
	}
	100%{
		transform: translateX(0);
	}
}

@-webkit-keyframes laGlissiere {
	0%{
		transform: translateX(0);
	}
	10%{
		transform: translateX(0);
	}
	14%{
		transform: translateX(-400px);
	}
	24%{
		transform: translateX(-400px);
	}
	28%{
		transform: translateX(-800px);
	}
	38%{
		transform: translateX(-800px);
	}
	42%{
		transform: translateX(-1200px);
	}
	52%{
		transform: translateX(-1200px);
	}
	56%{
		transform: translateX(-1600px);
	}
	66%{
		transform: translateX(-1600px);
	}
	70%{
		transform: translateX(-2000px);
	}
	80%{
		transform: translateX(-2000px);
	}
	84%{
		transform: translateX(-2400px);
	}
	94%{
		transform: translateX(-2400px);
	}
	100%{
		transform: translateX(0);
	}
}

@-moz-keyframes laGlissiere {
	0%{
		transform: translateX(0);
	}
	10%{
		transform: translateX(0);
	}
	14%{
		transform: translateX(-400px);
	}
	24%{
		transform: translateX(-400px);
	}
	28%{
		transform: translateX(-800px);
	}
	38%{
		transform: translateX(-800px);
	}
	42%{
		transform: translateX(-1200px);
	}
	52%{
		transform: translateX(-1200px);
	}
	56%{
		transform: translateX(-1600px);
	}
	66%{
		transform: translateX(-1600px);
	}
	70%{
		transform: translateX(-2000px);
	}
	80%{
		transform: translateX(-2000px);
	}
	84%{
		transform: translateX(-2400px);
	}
	94%{
		transform: translateX(-2400px);
	}
	100%{
		transform: translateX(0);
	}
}