

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.6;

}
.slider{
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100vw;

}
.slide{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition:  opacity 0.2s ease-in-out;
}
.slide.current{
    opacity: 1;
}
.slide .content{
    position: absolute;
    bottom: 30px;
    left: -350px;
    opacity: 0;
    width: 350px;/* attention si modif modifié partout*/
    background-color: rgba(255,255,255, 0.3);
    color: #333;
    padding : 36px;
}

.slide .content h1 {
    margin-bottom : 10px;
}
.slide.current .content{
    opacity: 1;
    transform: translateX(350px);
    transition: all 1s ease-in-out 0.3s;
}
.buttons button#next {
    position : absolute;
    top : 45%;
    right: 25px;
}
.buttons button#prev {
    position : absolute;
    top : 45%;
    left : 25px;
}
.buttons button {
    border: 4px solid #fff;
    background-color: rgba(255,255,255, 0.6);
    color: #fff;
    cursor: pointer;
    padding: 17px 17px;
    border-radius: 50%;
    outline: none;
}
.buttons button:hover{
    background-color: #fff;
    color: #333;
}

/*import des image en css*/

.slide:first-child {
    background: url("../../image_braderie/1.png") no-repeat center top/cover;
}

.slide:nth-child(2) {
    background: url("../../image_braderie/2.png") no-repeat center top/cover;
}

.slide:nth-child(3) {
    background: url("../../image_braderie/3.png") no-repeat center top/cover;
}

.slide:nth-child(4) {
    background: url("../../image_braderie/4.png") no-repeat center top/cover;
}

.slide:nth-child(5) {
    background: url("../../image_braderie/5.png") no-repeat center top/cover;
}

.slide:nth-child(6) {
    background: url("../../image_braderie/6.png") no-repeat center top/cover;
}

.slide:nth-child(7) {
    background: url("../../image_braderie/7.png") no-repeat center top/cover;
}

.slide:nth-child(8) {
    background: url("../../image_braderie/8.png") no-repeat center top/cover;
}

.slide:nth-child(9) {
    background: url("../../image_braderie/9.png") no-repeat center top/cover;
}

.slide:nth-child(10) {
    background: url("../../image_braderie/10.png") no-repeat center top/cover;
}

.slide:nth-child(11) {
    background: url("../../image_braderie/11.png") no-repeat center top/cover;
}

.slide:nth-child(12) {
    background: url("../../image_braderie/12.png") no-repeat center top/cover;
}

.slide:nth-child(13) {
    background: url("../../image_braderie/13.png") no-repeat center top/cover;
}

.slide:nth-child(14) {
    background: url("../../image_braderie/14.png") no-repeat center top/cover;
}

.slide:nth-child(15) {
    background: url("../../image_braderie/15.png") no-repeat center top/cover;
}

.slide:nth-child(16) {
    background: url("../../image_braderie/16.png") no-repeat center top/cover;
}
.slide:nth-child(17) {
    background: url("../../image_braderie/17.png") no-repeat center center/cover;
}

