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


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


    

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



.contenu_carou {
width:340px;
height:232px;
perspective:4000px}



.caroussel{
transform-style:preserve-3d;
position:relative;
left:177px;
width:340px;
height:232px;
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,340px) scale(.8)}
.caroussel img:nth-child(2){transform:rotateY(45deg) translateZ(340px) scale(.8)}
.caroussel img:nth-child(3){transform:rotateY(90deg) translateZ(340px) scale(.8)}
.caroussel img:nth-child(4){transform:rotateY(135deg) translateZ(340px) scale(.8)}
.caroussel img:nth-child(5){transform:rotateY(180deg) translateZ(340px) scale(.8)}
.caroussel img:nth-child(6){transform:rotateY(225deg) translateZ(340px) scale(.8)}
.caroussel img:nth-child(7){transform:rotateY(270deg) translateZ(340px) scale(.8)}
.caroussel img:nth-child(8){transform:rotateY(315deg) translateZ(340px) scale(.8)}


.caroussel_diapo input[type=radio] + label {
cursor:pointer;
background:hsl(203,77%,81%);
display:inline-block;
width:20px;
border-radius:50%;
height:20px;
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(-340px)}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-45deg)}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-90deg)}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-135deg)}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-180deg)}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-225deg)}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-270deg)}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel{transform:translateZ(-340px) rotateY(-315deg)}


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