@media  (max-width: 359px) {

div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}

div#content1{
	width: 300px;
}

div#content2{
	width: 300px;
}

div#content3{
	width: 300px;
}

div.left1{
	position: relative;
	bottom: 15px;
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 265px;
	height: 480px;
}

div.right1{
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 265px;
	height: 510px;
	position: relative;
	top: 20px;
}

div.left2{
	position: relative;
	top: 60px;
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 265px;
	height: 750px;
}

div.right2{
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 265px;
	height: 655px;
	position: relative;
	top: 100px;
}

div.left3{
	position: relative;
	top: 140px;
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 265px;
	height: 470px;
}

div.right3{
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 265px;
	height: 470px;
	position: relative;
	top: 180px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;


}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
}

.zzz{
  position: relative;
  top: 195px;
}

				}

@media  (min-width:360px) and (max-width: 480px) {
    /* votre code ici, pour les écrans de taille maximale 699px */


div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}

div#content1{
	width: 335px;
}

div#content2{
	width: 335px;
}

div#content3{
	width: 335px;
}

div.left1{
	position: relative;
	bottom: 15px;
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 300px;
	height: 480px;
}

div.right1{
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 300px;
	height: 510px;
	position: relative;
	top: 20px;
}

div.left2{
	position: relative;
	top: 60px;
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 300px;
	height: 750px;
}

div.right2{
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 300px;
	height: 655px;
	position: relative;
	top: 100px;
}

div.left3{
	position: relative;
	top: 140px;
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 300px;
	height: 470px;
}

div.right3{
	background-color: #181818;
	border-left-color: #181818;
	border-left-width:10px;
	border-left-style:solid;
	border-right-color: #181818;
	border-right-width:10px;
	border-right-style:solid;
	width: 300px;
	height: 470px;
	position: relative;
	top: 180px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;


}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
}

.zzz{
  position: relative;
  top: 205px;
}

      }

@media (min-width: 481px) and (max-width: 620px) {

div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}

div#content1{
	width: 450px;
}

div#content2{
	width: 450px;
}

div#content3{
	width: 450px;
}

div.left1{
	position: relative;
	bottom: 23px;
	background-color: #181818;
	width: 400px;
	height: 450px;
}

div.right1{
	background-color: #181818;
	position: relative;
	top: 10px;
	width: 400px;
	height: 460px;
	position: relative;
}

div.left2{
	position: relative;
	background-color: #181818;
	position: relative;
	top: 45px;
	width: 400px;
	height: 653px;
}

div.right2{
	position: relative;
	bottom: 32px;
	background-color: #181818;
	width: 400px;
	height: 620px;
	position: relative;
	top: 80px;
}

div.left3{
	position: relative;
	background-color: #181818;
	width: 400px;
	height: 440px;
	position: relative;
	top: 115px;
}

div.right3{
	position: relative;
	bottom: 16px;
	background-color: #181818;
	width: 400px;
	height: 410px;
	position: relative;
	top: 150px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;


}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
}

.zzz{
  position: relative;
  top: 175px;
}

     	}


@media (min-width: 621px) and (max-width: 767px) {

div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}

div#content1{
	width: 450px;
}

div#content2{
	width: 450px;
}

div#content3{
	width: 450px;
}

div.left1{
	position: relative;
	bottom: 23px;
	background-color: #181818;
	width: 400px;
	height: 450px;
}

div.right1{
	background-color: #181818;
	position: relative;
	top: 10px;
	width: 400px;
	height: 460px;
	position: relative;
}

div.left2{
	position: relative;
	background-color: #181818;
	position: relative;
	top: 45px;
	width: 400px;
	height: 653px;
}

div.right2{
	position: relative;
	bottom: 32px;
	background-color: #181818;
	width: 400px;
	height: 620px;
	position: relative;
	top: 80px;
}

div.left3{
	position: relative;
	background-color: #181818;
	width: 400px;
	height: 440px;
	position: relative;
	top: 115px;
}

div.right3{
	position: relative;
	bottom: 16px;
	background-color: #181818;
	width: 400px;
	height: 410px;
	position: relative;
	top: 150px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;


}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
}

.zzz{
  position: relative;
  top: 175px;
}

 		}



@media (min-width: 768px) and (max-width: 979px) {
    /* votre code ici, pour les écrans de taille comprise entre 700 et 899 px */

div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}


div#content1{
	width: 750px;
	position: relative;
	top: 25px;
}

div#content2{
	width: 750px;
	position: relative;
	top: 40px;
}

div#content3{
	width: 750px;
	position: relative;
	top: 47px;
}

div.left1{
	position: relative;
	bottom: 39px;
	right: 20px;
	background-color: #181818;
	width: 325px;
	height: 473px;
}

div.right1{
	background-color: #181818;
	width: 325px;
	height: 473px;
	position: relative;
	left: 20px;
}

div.left2{
	position: relative;
	right: 20px;
	bottom: 10px;
	background-color: #181818;
	width: 325px;
	height: 653px;
}

div.right2{
	position: relative;
	left: 20px;
	bottom: 77px;
	background-color: #181818;
	width: 325px;
	height: 651px;
}

div.left3{
	position: relative;
	bottom: 57px;
	right: 20px;
	background-color: #181818;
	width: 325px;
	height: 432px;
}

div.right3{
	position: relative;
	left: 20px;
	bottom: 40px;
	background-color: #181818;
	width: 325px;
	height: 430px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;
margin-left: 10px;
margin-right: 10px;
}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
margin-left: 10px;
margin-right: 10px;
}


.zzz{
  position: relative;
  top: 15px;
}


      }



@media (min-width: 980px) and (max-width: 1199px) {
    /* votre code ici, pour les écrans de taille comprise entre 900 et 1199 px */


div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}


div#content1{
	width: 850px;
	position: relative;
	top: 25px;
}

div#content2{
	width: 850px;
	position: relative;
	top: 40px;
}

div#content3{
	width: 850px;
	position: relative;
	top: 47px;
}

div.left1{
	position: relative;
	bottom: 23px;
	right: 20px;
	background-color: #181818;
	width: 400px;
	height: 473px;
}

div.right1{
	background-color: #181818;
	width: 400px;
	height: 473px;
	position: relative;
	left: 20px;
}

div.left2{
	position: relative;
	right: 20px;
	background-color: #181818;
	width: 400px;
	height: 653px;
}

div.right2{
	position: relative;
	left: 20px;
	bottom: 32px;
	background-color: #181818;
	width: 400px;
	height: 651px;
}

div.left3{
	position: relative;
	right: 20px;
	background-color: #181818;
	width: 400px;
	height: 432px;
}

div.right3{
	position: relative;
	left: 20px;
	bottom: 16px;
	background-color: #181818;
	width: 400px;
	height: 430px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;


}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
}


.zzz{
  position: relative;
  top: 60px;
}

       }



@media (min-width: 1200px) {
    /* votre code ici, pour les écrans de taille minimale 1200px */

div#content1 div{
display: inline-block;
}

div#content2 div{
display: inline-block;
}

div#content3 div{
display: inline-block;
}


div#content1{
	width: 1150px;
	position: relative;
	top: 25px;
}

div#content2{
	width: 1150px;
	position: relative;
	top: 70px;
}

div#content3{
	width: 1150px;
	position: relative;
	top: 87px;
}

div.left1{
	background-color: #181818;
	width: 510px;
	height: 450px;
	border-right-color: #f2eeed;
	border-right-style: solid;
	border-right-width: 25px;
}

div.right1{
	background-color: #181818;
	width: 510px;
	height: 450px;
	border-left-color: #f2eeed;
	border-left-style: solid;
	border-left-width: 25px;
}

div.left2{
	background-color: #181818;
	width: 510px;
	height: 652px;
	border-right-color: #f2eeed;
	border-right-style: solid;
	border-right-width: 25px;
}

div.right2{
	position: relative;
	bottom: 32px;
	background-color: #181818;
	width: 510px;
	height: 650px;
	border-left-color: #f2eeed;
	border-left-style: solid;
	border-left-width: 25px;
}

div.left3{
	background-color: #181818;
	width: 510px;
	height: 430px;
	border-right-color: #f2eeed;
	border-right-style: solid;
	border-right-width: 25px;
}

div.right3{
	position: relative;
	bottom: 16px;
	background-color: #181818;
	width: 510px;
	height: 428px;
	border-left-color: #f2eeed;
	border-left-style: solid;
	border-left-width: 25px;
}

p.titre, .dif{
  text-align: center;
}

.titre{
font-size: 20px;
font-family: Arial; 
color: #fafafa; 
position: relative;


}

.dif{
position: relative;
bottom: 20px;
font-size: 15px;
font-family: Arial; 
color: #fafafa; 
}


.zzz{
  position: relative;
  top: 100px;
}
       
       }