:root {
  --menu-bg-diapo: #487bb5;
  --menu-bg-diapo2: #155196;

  
}

@keyframes AutoSlide {
    0%, 15%, 100% {
        left: 0px; /*1ère image*/
    }
    35%, 50% {
        left: -640px; /*2ème image*/
    }
    70%, 85% {
        left: -1280px; /*3ème image*/
    }
}
@keyframes AutoSlide3 {
    0%, 15%, 100% {
        left: 0px; /*1ère image*/
    }
    35%, 50% {
        left: -640px; /*2ème image*/
    }
    70%, 85% {
        left: -1280px; /*3ème image*/
    }
}
@keyframes AutoSlide2 {
    0%, 10%, 100% {
        left: 0px; /*1ère image*/
    }
    20%, 30%{
        left: -640px; /*2ème image*/
    }
    40%, 50% {
        left: -1280px; /*3ème image*/
    }
	60% , 70%{
        left: -1920px; /*4ème image*/
    }
	80%, 90% {
        left: -2560px; /5ème image*/
    }
}
#cadrediapo{
	position: relative;
	width: 645px;
	height: 340px;
	padding: 15px ;
	border: 2px solid #777;
	margin: 0 auto 2em;
	background: #111;
	/*background: url("../fondnoir.jpg");*/
	/*
	background: -webkit-linear-gradient(var(--menu-bg-diapo), var(--menu-bg-diapo) 20%, var(--menu-bg-diapo2) 80%, var(--menu-bg-diapo2));
	background: -moz-linear-gradient(var(--menu-bg-diapo), var(--menu-bg-diapo) 20%, var(--menu-bg-diapo2) 80%, var(--menu-bg-diapo2));
	background: -o-linear-gradient(var(--menu-bg-diapo), var(--menu-bg-diapo) 20%, var(--menu-bg-diapo2) 80%, var(--menu-bg-diapo2));
	background: linear-gradient(var(--menu-bg-diapo), var(--menu-bg-diapo) 20%, var(--menu-bg-diapo2) 80%, var(--menu-bg-diapo2));*/
	/*background: url("../dpattern3.jpg");*/
	
	
	
	-webkit-box-shadow: 0 0 10px #ggg;
	-moz-box-shadow: 0 0 10px #ggg;
	box-shadow: 0 0 10px #ggg;
	
	
}
#cadrediapo:before, #cadrediapo:after{
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: " ";
	background: #fff;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 0 3px #fff 0 20px 10px #aaa ;
	-moz-box-shadow: 0 0 3px #fff , 0 20px 10px #aaa ;
	box-shadow: 0 0 3px #fff , 0 20px 10px #aaa ;
	
	z-index: -1;
	
}
#cadrediapo:before{
	 left:0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
}
#cadrediapo:after{
	right:0;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
}
#slideshow {
    position: relative;
    width: 640px;
    height: 310px;
    margin:  auto auto;
    overflow: hidden;
}
#slideshow2 {
    position: relative;
    width: 640px;
    height: 350px;
    margin:  -300px 0;
    overflow: hidden;
}
#sContent li {
    display: inline;
}

#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 3200px;
    margin: 0;            
    padding: 0;
	
	transition:left 1s;
    
    /**CSS3 keyframes animation**/
    animation-name: AutoSlide2;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	
}
#sContent2 {
    position: absolute;
    top: 0;
    left: 0px;
    width: 3280px;
    margin: 0;            
    padding: 0;

	transition:left 1s;
    
    /**CSS3 keyframes animation**/
    animation-name: AutoSlide2;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	
}
#slideshow:target #sContent {
        /* en ciblant #slideshow on décale #sContent */
    left: -100%;         /* ou - 100% */
	
}

.messagediapo{
	list-style-type: none;
	display: block;
	float:left;
	width:380px;
	margin-left:130px;
	margin-right:130px;
	margin-top: 310px;
	text-align:center;
	background-color:black;
	background-color :#666;
	color: #00ffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	border-radius:10px;
	border: 1px solid #333;
	opacity: 0.6;
	filter: alpha(opacity=60);
	font-size: 20px;
}