.carousel-general {
width : 960px;
height : 230px;
overflow : hidden;
margin : 20px auto 30px auto;
/*align-items : center;*/
box-shadow : 5px 5px 25px 0 rgb(46, 61, 73, 0.2);
border-radius : 20px;
}
.carousel {
display : flex;
width : 4000px;
animation : translation 20s infinite;
}
.image-une, .image-deux, .image-trois, .image-quatre {
width : 1000px;
height : 250px;
background-color : whitesmoke;
box-shadow : 5px 5px 25px 0 rgb(46, 61, 73, 0.2);
}



.image-une img, .image-deux img, .image-trois img, .image-quatre img {
width : 50%;
height : 100%;
float: left;
border-radius : 20px;
box-shadow : 5px 5px 25px 5px rgb(46, 61, 73, 0.2);
}


.image-une h3, .image-deux h3, .image-trois h3, .image-quatre h3 {
width : 480px;
float: right;
color: black;
font-size: 22px;
position: absolute;
margin-left: 520px;
clear: left;
margin-top: 40px;
}


.image-une label, .image-deux label, .image-trois label, .image-quatre label {
width : 380px;
height : 70%;
float: left;
color: black;
position: absolute;
margin-left: 50px;
margin-top: 130px;
font-size: 16px;
}


@keyframes translation {


0% {
transform : translateX(-3000px);
opacity: 0.5;
}
5% {
transform : translateX(-3000px);
opacity: 0.8;
}

25% {
transform : translateX(-3000px);
opacity: 0.8;
}
50% {
transform : translateX(-2000px);
opacity: 0.8;
}
75% {
transform : translateX(-1000px);
opacity: 0.8;
}
95% {
transform : translateX(0px);
opacity: 0.8;
}
100% {
transform : translateX(0px);
opacity: 0.3;
}


} 

@media screen and (max-width: 1100px) and (min-width: 811px) {


div.carousel-general {
width : 720px;
height : 180px;
margin : 10px auto 20px auto;
align-items : center;
box-shadow : 5px 5px 15px 0 rgb(46, 61, 73, 0.2);
border-radius : 15px;
}

div.carousel {
width : 3000px;
animation : translation750 20s infinite;
}

div.image-une, div.image-deux, div.image-trois, div.image-quatre {
width : 750px;
height : 180px;
box-shadow : 5px 5px 15px 0 rgb(46, 61, 73, 0.2);
}

div.image-une img, div.image-deux img, div.image-trois img, div.image-quatre img {
width : 50%;
height : 100%;
float: left;
border-radius : 10px;
box-shadow : 5px 5px 15px 5px rgb(46, 61, 73, 0.2);
}

div.image-une h3, div.image-deux h3, div.image-trois h3, div.image-quatre h3 {
width : 290px;
font-size: 20px;
margin-left: 390px;
margin-top: 40px;
}

div.image-une label, div.image-deux label, div.image-trois label, div.image-quatre label {
width : 290px;
height : 70%;
margin-left: 30px;
margin-top: 100px;
font-size: 15px;
}

@keyframes translation750 {
	


0% {
transform : translateX(-2250px);
opacity: 0.5;
}


5% {
transform : translateX(-2250px);
opacity: 0.8;
}

25% {
transform : translateX(-2250px);
opacity: 0.8;
}

50% {
transform : translateX(-1500px);
opacity: 0.8;

}
75% {
transform : translateX(-750px);
opacity: 0.8;
}

95% {
transform : translateX(0px);
opacity: 0.8;
}

100% {
transform : translateX(0px);
opacity: 0.3;
}

} 

}



@media screen and (max-width: 810px) and (min-width: 631px) {


div.carousel-general {
width : 470px;
height : 150px;
margin : 10px auto 20px auto;
align-items : center;
box-shadow : 5px 5px 15px 0 rgb(46, 61, 73, 0.2);
border-radius : 15px;
}

div.carousel {
width : 2000px;
animation : translation500 18s infinite;
}

div.image-une, div.image-deux, div.image-trois, div.image-quatre {
width : 500px;
height : 150px;
box-shadow : 5px 5px 15px 0 rgb(46, 61, 73, 0.2);
}

div.image-une img, div.image-deux img, div.image-trois img, div.image-quatre img {
width : 50%;
height : 100%;
float: left;
border-radius : 10px;
box-shadow : 5px 5px 15px 5px rgb(46, 61, 73, 0.2);
}

div.image-une h3, div.image-deux h3, div.image-trois h3, div.image-quatre h3 {
width : 190px;
font-size: 18px;
margin-left: 270px;
margin-top: 20px;
}

div.image-une label, div.image-deux label, div.image-trois label, div.image-quatre label {
width : 190px;
height : 70%;
margin-left: 30px;
margin-top: 60px;
font-size: 13px;
}

@keyframes translation500 {
	

	
0% {
transform : translateX(-1500px);
opacity: 0.5;
}
5% {
transform : translateX(-1500px);
opacity: 0.8;
}

25% {
transform : translateX(-1500px);
opacity: 0.8;
}
50% {
transform : translateX(-1000px);
opacity: 0.8;
}
75% {
transform : translateX(-500px);
opacity: 0.8;
}
95% {
transform : translateX(0px);
opacity: 0.8;
}
100% {
transform : translateX(0px);
opacity: 0.3;
}

} 

}

@media screen and (max-width: 630px){


div.carousel-general {
width : 250px;
height : 250px;
margin : 5px auto 10px auto;
align-items : center;
box-shadow : 5px 5px 15px 0 rgb(46, 61, 73, 0.2);
border-radius : 15px;
background-color: white;
}

div.carousel {
width : 1000px;
animation : translation250 18s infinite;
}

div.image-une, div.image-deux, div.image-trois, div.image-quatre {
width : 250px;
height : 150px;
box-shadow : 5px 5px 15px 0 rgb(46, 61, 73, 0.2);
}

div.image-une img, div.image-deux img, div.image-trois img, div.image-quatre img {
width : 100%;
height : 100%;
float: left;
border-radius : 10px;
box-shadow : 5px 5px 15px 5px rgb(46, 61, 73, 0.2);
}

div.image-une h3, div.image-deux h3, div.image-trois h3, div.image-quatre h3 {
width : 190px;
font-size: 18px;
margin-left: 30px;
margin-top: 155px;
}

div.image-une label, div.image-deux label, div.image-trois label, div.image-quatre label {
width : 190px;
height : 70%;
margin-left: -230px;
margin-top: 200px;
font-size: 11px;

}

@keyframes translation250 {
	
	
0% {
transform : translateX(-750px);
opacity: 0.5;
}
5% {
transform : translateX(-750px);
opacity: 0.8;
}

25% {
transform : translateX(-750px);
opacity: 0.8;
}
50% {
transform : translateX(-500px);
opacity: 0.8;
}
75% {
transform : translateX(-250px);
opacity: 0.8;
}
95% {
transform : translateX(0px);
opacity: 0.8;
}
100% {
transform : translateX(0px);
opacity: 0.3;
}

} 

}