/* slideshow frame */

/* 20170414 ajouté float: right; pour tester dans IE */
/* 20170414 ajouté font-size: 0.0vmin; pour tester dans IE */
/* 20170414 ajouté display: inline; et float: right; au lieu de display: inline-block; pour tester dans IE */
/* 20170414 ajouté margin-left: 0 auto;margin-right: 0 auto; pour tester dans IE */


#show {margin-top: 4vh; display: inline-block; width: 60vw; position: relative; height: 89vh;

font-size: 0.0vmin;margin-left: 0 auto;margin-right: 0 auto; }

#show .slide { position: absolute; top: 0; left: 0; width: 60vw; height: 89vh; overflow: hidden; text-align: center;}

@media only screen and (orientation: portrait)  {

#show {margin-top: 9vh;display: inline-block; width: 82vw;position: relative; height: 80vh;}
#show .slide {position: absolute;top: 0;left: 0;width: 82vw;height: 80vh;overflow: hidden;text-align: center;}

}

/* single image - copy from here */

	.img1 {
		animation: img1 40s infinite;
		-o-animation: img1 40s infinite;
		-moz-animation: img1 40s infinite;
		-webkit-animation: img1 40s infinite;
	}

@-webkit-keyframes img1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

/* 
to that moment 
then change the number on img{}
also you have to make it right with % (remember!)
*/

	.img2 {
		animation: img2 40s infinite;
		-o-animation: img2 40s infinite;
		-moz-animation: img2 40s infinite;
		-webkit-animation: img2 40s infinite;
	}

	.img3 {
		animation: img3 40s infinite;
		-o-animation: img3 40s infinite;
		-moz-animation: img3 40s infinite;
		-webkit-animation: img3 40s infinite;
	}

	.img4 {
		animation: img4 40s infinite;
		-o-animation: img4 40s infinite;
		-moz-animation: img4 40s infinite;
		-webkit-animation: img4 40s infinite;
	}

	.img5 {
		animation: img5 40s infinite;
		-o-animation: img5 40s infinite;
		-moz-animation: img5 40s infinite;
		-webkit-animation: img5 40s infinite;
	}

/* keyframing */

@-webkit-keyframes img2 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img2 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img2 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img3 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img3 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img3 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img4 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img4 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img4 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img5 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 1;}
}

@keyframes img5 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 1;}
}

@-moz-keyframes img5 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 1;}
}