@media  (max-width: 364px) {

.al{
  position: relative;
  bottom: 32px;
}

.ct{
  background-color: #181818;
  border-width: 13px;
  border-style: solid;
  border-color: #181818;
  width: 256px;
  position: relative;
}

.tt{

  position: relative;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 14px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 240px;
  font-size: 14px;
}
 
.mail{
  background-color: #CCC;
  width: 240px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  font-size: 14px;
}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:17px;
  width: 240px;
  padding: 5px 9px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 240px;
  font-size: 14px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 240px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  position: relative;
  font-size: 17px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  position: relative;
  font-size: 17px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

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

              }


@media (min-width:365px) and (max-width: 480px) {

.al{
  position: relative;
  bottom: 20px;
}

.ct{
  background-color: #181818;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  width: 315px;
  position: relative;
}

.tt{
  margin-left: 5px;
  margin-right: 5px;
  position: relative;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 16px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 150px;
  font-size: 15px;
}
 
.mail{
  background-color: #CCC;
  width: 305px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  font-size: 15px;
}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:18px;
  width: 305px;
  padding: 6px 11px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 305px;
  font-size: 15px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 305px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  position: relative;
  font-size: 20px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  position: relative;
  font-size: 20px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

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

              }

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

.al{
  position: relative;
  bottom:35px;
}

.ct{
  background-color: #181818;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  width: 420px;
  position: relative;
  top: 5px;
}

.tt{
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 20px;
}

.envoi{ 
  background-color: #CCC;
  position:relative;
  left: 50px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 200px;
}
 
.mail{
  background-color: #CCC;
  width: 405px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;

}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:20px;
  width: 405px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 405px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 410px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  position: relative;
  font-size: 21px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  position: relative;
  font-size: 21px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

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

              }


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

.al{
  position: relative;
  bottom: 30px;
}

.ct{
  background-color: #181818;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  width: 550px;
  position: relative;
  top: 5px;
}

.tt{
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 20px;
}

.envoi{ 
  background-color: #CCC;
  position:relative;
  left: 50px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 265px;
}
 
.mail{
  background-color: #CCC;
  width: 535px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;

}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:20px;
  width: 535px;
  padding: 10px 11px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  width: 645px;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 535px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 540px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  position: relative;
  font-size: 23px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  position: relative;
  font-size: 23px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

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

              }


@media (min-width: 768px) and (max-width: 979px) {

.al{
  position: relative;
  bottom: 10px;
}

.ct{
  background-color: #181818;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  width: 680px;
  position: relative;
  top: 5px;
}

.tt{
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 20px;
}

.envoi{ 
  background-color: #CCC;
  position:relative;
  left: 50px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 320px;
}
 
.mail{
  background-color: #CCC;
  width: 645px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;

}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:20px;
  width: 645px;
  padding: 12px 11px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  width: 645px;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 645px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 650px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  position: relative;
  font-size: 25px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  position: relative;
  font-size: 25px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

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

                          }


@media (min-width: 980px) and (max-width: 1199px) {

.ct{
  background-color: #181818;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  width: 880px;
  position: relative;
  top: 5px;
}

.tt{
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 20px;
}

.envoi{ 
  background-color: #CCC;
  position:relative;
  left: 50px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 320px;
}
 
.mail{
  background-color: #CCC;
  width: 645px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;

}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:20px;
  width: 645px;
  padding: 12px 11px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  width: 645px;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 645px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 650px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  text-align: left;
  position: relative;
  font-size: 25px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  text-align: left;
  position: relative;
  font-size: 25px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}


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

          }  


@media (min-width: 1200px) {

.ct{
  background-color: #181818;
  border-width: 12px;
  border-style: solid;
  border-color: #181818;
  height: 250px;
  width: 1000px;
  position: relative;
  top: 5px;
}

.tt{
  position: relative;
  top: 15px;
  text-align: center;
  line-height: 1.5;
  font-family: Arial;
  color: white;
  font-size: 20px;
}

.envoi{ 
  background-color: #CCC;
  position:relative;
  left: 50px;
}

.name{ 
  background-color: #CCC; 
  display: inline-block;
   padding: 7px 11px;
  border: 6px solid #181818; 
  width: 320px;
}
 
.mail{
  background-color: #CCC;
  width: 645px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;

}

.sub{ 
  background-color: #CCC;
  font-weight: bold;
  font-size:20px;
  width: 645px;
  padding: 12px 11px;
  border: 6px solid #181818; 
  color: #181818;
}

.mes{
  background-color: #CCC;
  width: 645px;
  height: 100px;
  padding: 7px 11px;
  border: 6px solid #181818; 
  color: #181818;
  width: 645px;
}

form{
  background-color: #181818;
  position: relative;
  top: 30px;
  width: 650px;
  padding: 1em;
  border: 5px solid #181818;
  
}

input{
  display:block;
  width: 120px;
  text-align: left;
  margin-top: 15px;
}

input, textarea{
  font: 1em Arial;
  width: 300px;
  box-sizing: border-box;
}

.mon{
  text-align: left;
  position: relative;
  font-size: 25px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

.mons{
  text-align: left;
  position: relative;
  font-size: 25px;
  font-family: arial;
  color: #181818;
  font-weight: bold;
  position: relative;
  top: 15px;
}

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

          }