/*****carrousel 3d avec navigation*****/


	
.caroussel_diapo input{position:absolute;left:-9999px}


    

.caroussel_diapo{	
position:relative;
text-align:center;
margin:0 auto}



.contenu_carou {
width:200px;
height:140px;
perspective:4000px}



.caroussel{
transform-style:preserve-3d;
position:relative;
left:73px;
width:200px;
height:140px;
transition:1s
}



.caroussel img {	
position:absolute;
top:0;left:0;
outline:1px solid transparent;
backface-visibility:hidden;
transition:1s
}



.caroussel img{filter:blur(0px);opacity:.8}	
.caroussel img:nth-child(1){transform:translate3d(0,0,200px) scale(.8)}
.caroussel img:nth-child(2){transform:rotateY(45deg) translateZ(200px) scale(.8)}
.caroussel img:nth-child(3){transform:rotateY(90deg) translateZ(200px) scale(.8)}
.caroussel img:nth-child(4){transform:rotateY(135deg) translateZ(200px) scale(.8)}
.caroussel img:nth-child(5){transform:rotateY(180deg) translateZ(200px) scale(.8)}
.caroussel img:nth-child(6){transform:rotateY(225deg) translateZ(200px) scale(.8)}
.caroussel img:nth-child(7){transform:rotateY(270deg) translateZ(200px) scale(.8)}
.caroussel img:nth-child(8){transform:rotateY(315deg) translateZ(200px) scale(.8)}


.caroussel_diapo input[type=radio] + label {
cursor:pointer;
background:hsl(203,77%,81%);
display:inline-block;
width:18px;
height:18px;
border-radius:50%;
margin-top:3px;
margin-bottom:8px;	
	}
	
.caroussel_diapo input[type=radio]:checked + label{background:hsl(203,77%,61%)}



.caroussel_diapo label{background:hsl(203,77%,61%)}



.caroussel_diapo input[name="rotation"]:checked ~ .contenu_carou .caroussel img:nth-child(n){
	filter:drop-shadow(12px 12px 7px hsla(0,0%,0%,.0))
	
	}	



/*gauche*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px)}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-45deg)}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-90deg)}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-135deg)}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-180deg)}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-225deg)}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-270deg)}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel{transform:translateZ(-200px) rotateY(-315deg)}


/*droite*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel img:nth-child(1){transform:translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel img:nth-child(2){transform:rotateY(45deg) translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel img:nth-child(3){transform:rotateY(90deg) translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel img:nth-child(4){transform:rotateY(135deg) translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel img:nth-child(5){transform:rotateY(180deg) translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel img:nth-child(6){transform:rotateY(225deg) translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel img:nth-child(7){transform:rotateY(270deg) translateZ(200px) scale(1);opacity:1}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel img:nth-child(8){transform:rotateY(315deg) translateZ(200px) scale(1);opacity:1}