/*--------------------------- SLIDESHOW ----------------------------*/

#wrapper {
    margin: auto;
    width: 60%;
}

.slider {
    position: relative;
    height: 420px;
    outline: 0 solid black;
    width: 600px;
    overflow: hidden;
}

.slides {
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 1000%;
}

.slide {
    position: relative;
    float: left;
    width: 10%;
}

input[type="radio"] {
    display: none;
}

/*--- Côté G&D du cadre pour slider à G ou D ---*/
/*--- Left & Right side of the frame to go to Left or Right ---*/

.prev {
    position: absolute;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
    height: 400px;
    width: 50px;
    background-color: white;
    opacity: 0.1;
    transition: all 800ms ease;
}

.prev:hover {
    opacity: 0.5;
    transition: all 800ms ease;
    margin-right: 2px;
}

.next {
    position: absolute;
    cursor: pointer;
    z-index: 2;
    top: 0;
    right: 0;
    height: 400px;
    width: 50px;
    background-color: white;
    opacity: 0.1;
    transition: all 800ms ease;
    margin-right: 5px;
}

.next:hover {
    opacity: 0.5;
    transition: all 800ms ease;
}

/*--- Côté G&D du cadre pour slider à G ou D ---*/
/*--- Left & Right side of the frame to go to Left or Right ---*/

.slider .nav {
    position: absolute;
    text-align: center;
    z-index: 3;
    top: 89%;
    width: 600px;
}

/*--- Les traits/boutons en bas pour aller à la slide qu'on veut (G ou D) ---*/
/*--- The lines / buttons at the bottom to go to the slide you want (R or L) ---*/

#slidde0:checked~.nav>label[for="slidde0"] {
    background: #333333;
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

/*--- Label 1 = slide0, label 2 = slide1 ---*/

#slidde0:checked~.nav>label[for="slidde0"], #slide1:checked~.nav>label[for="slidde1"] {
    background: #333333;
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#slidde0:checked~.nav>label[for="slidde1"], #slide1:checked~.nav>label[for="slidde2"] {
    background: #333333;
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#slidde0:checked~.nav>label[for="slidde1"], #slide1:checked~.nav>label[for="slidde2"] {
    background: #333333;
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#slidde0:checked~.slides {margin-left: 0;}
#slidde1:checked~.slides {margin-left: -100%;}
#slidde2:checked~.slides {margin-left: -200%;}
#slidde3:checked~.slides {margin-left: -300%;}