body {
       font-family: Arial, roboto, sans-serif;
       margin-right: 11%;
       margin-left: 12%;
   }


   .grid_6 {
       margin-top: 30px;

   }


   .grid_3 h5 {

       margin: 13px 0;
       color: lightpink;
       font-size: 20px;

   }

   .grid_3 p {
       font-family: Arial, roboto, sans-serif;
       font-size: 12px;
       letter-spacing: 1px;
       line-height: 18px;
       color: gray;
       text-align: left;
       margin: 0;
       padding: 12px 0;
   }

   .grid_3 img {

       margin-left: 120px;
       margin-top: 10px;


   }

   .grid_4 {

       margin-top: 45px;

   }

   .grid_4 img {
       margin-top: -15px;
   }

   .grid_4 h4 {

       margin-left: 3px;
       color: red;
       font-size: 22px;


   }


   .grid_4 h5 {

       color: black;
       font-size: 16px;
       font-family: Roboto, times, sans-serif;
       margin-top: -30px;
       margin-left: 3px;


   }


   .grid_4 h5 :hover {
       border: 2px red solid;

   }

   .grid_4 h3 {

       text-align: left;
       color: lightpink;
       margin-top: 10px;
       padding: 0;
       letter-spacing: 1px;
       font-size: 30px;
       text-decoration-line: overline;
       margin-left: 40px;
       margin-bottom: 0
   }


   .grid_6 {

       margin-left: 11%;
       margin-right: 25%;



   }

   .grid_6 h3 {
       margin: 10px 0;
       padding: 0;
   }

   .grid_6 h4 {
       position: absolute;
       text-align: center;
       margin-left: 250px;
       color: red;
       font-size: 40px;
       margin-top: 70px;

   }

   .container:hover .overlay {
       opacity: 1;
   }

   .text {
       color: deeppink;
       font-size: 20px;
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;


   }

   .grid_6 p {
       line-height: 20px;
       font-size: 19px;
       color: black;
       text-align: left;
       margin: 15px 0;
       padding: 0;
       margin-top: 50px;
       line-height: 1.5;

   }


   .grid_6 img {


       margin-left: 135px;
       margin-right: 135px;

       padding: 0;

}


.grid_7 {
    
    
    padding-left: 110px;
    line-height: 1.7;
    font-size: 20px;
    
}

a{
    
text-decoration: none; 
color: black;
}

    
 a:hover{   
 
 text-decoration: underline;
color: red;

     

}


.grid_7 h6 {
    
    
    font-size: 18px;
    color:red;
    margin-left: -0px;
    
    
 } 
.grid_8 {
    
  margin-top: 10px; 
  line-height: 1.8;
    font-size : 18px;
    
    
 }  


.grid_9 h1 {
    
 font-size: 50px;
       font-family: arial, roboto, sans-serif;
       border-bottom: 4px solid red;
       margin-top: 45px;
       letter-spacing: -1.3px;
       margin-left: 115px;
         
    
    
} 

   .grid_9 h2 {

    
       font-size: 50px;
       font-family: arial, roboto, sans-serif;
       border-bottom: 4px solid red;
       margin-top: 45px;
       letter-spacing: -1.3px;
       
      


   }

   .grid_9 h5 {

       font-family: arial, bebas neue, sans-serif;
       font-size: 24px;
       margin-left: 135px;
       border-bottom: 1px solid black;
       margin-right: -1100px;
       margin-bottom: 6px;

   }

   .grid_9 p {

       line-height: 1.6;
       margin-top: 30px;
       font-size: 18px;
       margin-right: 15%;
       margin-left: 15%;
       text-indent: 5%;


   }



.grid_9 h6 {
    
    margin-left: 15%;
    font-size: 18px;
    color:red;
    margin-top: -10px;
    
    
 }   

.grid_9 a {
    
 text-decoration: none; 
 color: red;
 font-size: 30px;
 margin-left: -5%;
  
    
}
   @font-face {
       font-family: Din Alternate;
       src: url(DINRegularAlternate.ttf);


   }

   text {
       padding-top: 20px;
       margin-top: 0px;
       font-size: 20px;
       font-family: times, roboto, sans-serif;
       margin-left: 40px;

   }

   /* je postionne une grid 12 (toute la largeur) pour introduire une ligne de couleur et faire respirer grace au margin*/
   .container_12 .grid_12 {

       margin: 10px;
   }

   img {
       max-width: 100%;
   }

   /*traitement de la barre de navigation*/


   /*traitement de la div special*/
   #special {
       margin-top: 40px;
       /*width: 300px;*/
       background-color: cornsilk;


       /*incliner la div avec la propriété transform: rotate*/
       -webkit-transform: rotate(1deg);
       -moz-transform: rotate(1deg);
       -ms-transform: rotate(1deg);
       -o-transform: rotate(1deg);
       transform: rotate(1deg);

       /*creer des bords arrondis avec la propriété border-radius*/
       -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
       border-radius: 10px;

       /*creer des ombrages avec la propriété box-shadow*/
       -webkit-box-shadow: 5px 3px 10px #808080;
       /* anciennes versions de Chrome et Safari */
       -moz-box-shadow: 5px 3px 10px #808080;
       /* anciennes versions de Firefox */
       box-shadow: 5px 3px 10px #808080;
   }


   #footer {
       margin-top: 30px;
       background-color: black;
       margin-left: 10%;
       margin-right: 13%;
           
   }