/*****carrousel 3d automatique*****/
.caroussel_diapo{padding:2.5rem;position:relative}
.caroussel_diapo input{opacity:0}
.caroussel_diapo input[type="checkbox"] + label{
    cursor:pointer;
    width:180px;
    background:hsl(203,77%,61%);
    position:absolute;
    left:50%;
    bottom:0;
    text-align:center;
    -webkit-transform:translatex(-50%);
    transform:translatex(-50%);
    display:inline-block;
    line-height:35px;
    color:white}

.caroussel_diapo input[type="checkbox"]:checked  + label:after{
    background:hsl(203,77%,61%);
    width:180px;
    display:inline-block;
    position:absolute;
    left:50%;
    -webkit-transform:translatex(-50%);
    transform:translatex(-50%);
    content:'Stopper diaporama'}

.caroussel_diapo input[type="checkbox"]:checked ~ .contenu_carou .caroussel{
    animation:rotation 24s infinite alternate linear;
    -webkit-animation:rotation 24s infinite alternate linear}

.contenu_carou{
    width:420px;
    height:279px;
    position:relative;
    margin:40px auto 40px auto;
    -webkit-perspective:8000px;
    perspective:8000px
}


.caroussel{

    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    width:100%;
    transition:1s;
    position:absolute;
    height:100%;

    animation:rotation 24s infinite alternate linear;
    -webkit-animation:rotation 24s infinite alternate linear;

}

.caroussel img{
    filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
    position:absolute;
    width:400px;
    height:266px;
    top:0;
    left:0px;
    display:block;
    outline:1px solid transparent;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden}


.caroussel img:nth-child(1){-webkit-transform:translate3d(0,0,350px);transform:translate3d(0,0,350px)}
.caroussel img:nth-child(2){-webkit-transform:rotateY(60deg) translateZ(350px);transform:rotateY(60deg) translateZ(350px)}
.caroussel img:nth-child(3){-webkit-transform:rotateY(120deg) translateZ(350px);transform:rotateY(120deg) translateZ(350px)}
.caroussel img:nth-child(4){-webkit-transform:rotateY(180deg) translateZ(350px);transform:rotateY(180deg) translateZ(350px)}
.caroussel img:nth-child(5){-webkit-transform:rotateY(240deg) translateZ(350px);transform:rotateY(240deg) translateZ(350px)}
.caroussel img:nth-child(6){-webkit-transform:rotateY(300deg) translateZ(350px);transform:rotateY(300deg) translateZ(350px)}

@keyframes rotation{
    from{transform:rotatey(0)}
    to{transform:rotatey(1turn)}}

@-webkit-keyframes rotation{
    from{-webkit-transform:rotatey(0)}
    to{-webkit-transform:rotatey(1turn)}}
/*****fin carrousel 3d automatique*****/