@media  (max-width: 364px) {

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

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 265px;
  position: relative;
  border-right-width: 8px;
  border-right-style: solid;
  border-right-color: #181818;
  border-left-width: 8px;
  border-left-style: solid;
  border-left-color: #181818;
  border-top-width: px;
  border-top-style: solid;
  border-top-color: #181818;
  border-bottom-width: px;
  border-bottom-style: solid;
  border-bottom-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 11.5px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:15px;
margin-left:15px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 10.5px;
font-family: arial; 
color: white; 
margin-right:10px;
margin-left:10px;
line-height: 1.8;
}

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

             }


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

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

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 325px;
  position: relative;
  border-right-width: 8px;
  border-right-style: solid;
  border-right-color: #181818;
  border-left-width: 8px;
  border-left-style: solid;
  border-left-color: #181818;
  border-top-width: px;
  border-top-style: solid;
  border-top-color: #181818;
  border-bottom-width: px;
  border-bottom-style: solid;
  border-bottom-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 14px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:15px;
margin-left:15px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 11.5px;
font-family: arial; 
color: white; 
margin-right:10px;
margin-left:10px;
line-height: 1.8;
}

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

             }


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

.l{
  position: relative;
  bottom: 25px;
}

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 435px;
  position: relative;
  border-width: 8px;
  border-style: solid;
  border-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 18px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:30px;
margin-left:30px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 14px;
font-family: arial; 
color: white; 
margin-right:10px;
margin-left:10px;
line-height: 1.8;
}

.zzz{
  
}

             }


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

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

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 560px;
  position: relative;
  border-width: 10px;
  border-style: solid;
  border-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 18px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:40px;
margin-left:40px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 15px;
font-family: arial; 
color: white; 
margin-right:15px;
margin-left:15px;
line-height: 1.8;
}

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

             }


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

.l{
  position: relative;

}

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  position: relative;
  border-width: 10px;
  border-style: solid;
  border-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 20px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:50px;
margin-left:50px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 15px;
font-family: arial; 
color: white; 
margin-right:20px;
margin-left:20px;
line-height: 1.8;
}

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

             }


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

.l{
  position: relative;
  top: 10px;
}

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 890px;
  position: relative;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 24px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:65px;
margin-left:65px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 17px;
font-family: arial; 
color: white; 
margin-right:30px;
margin-left:30px;
line-height: 1.8;
}

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

              }


@media (min-width: 1200px) {

.l{
  position: relative;
  top: 10px;
}

.r{
  background-color: #181818;
  margin-left: auto;
  margin-right: auto;
  width: 1050px;
  position: relative;
  border-width: 15px;
  border-style: solid;
  border-color: #181818;
  font-family: arial; 
}

.titre{
text-align: left;
font-size: 24px;
font-family: arial; 
color: #D8D8D8; 
position: relative;
top: 15px;
text-transform: uppercase;
margin-right:65px;
margin-left:65px;
}

.dif{
  text-align: justify;
position: relative;
bottom: 10px;
font-size: 17px;
font-family: arial; 
color: white; 
margin-right:30px;
margin-left:30px;
line-height: 1.8;
}

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

            }