body{
   font-family: Arial;
   margin: 0;
   padding: 0;
}
header{
   position: fixed;
   width: 100%;
   top: 0;
}
section{
    margin-top: 151px;
    width: 99.5%;
   margin-left: 3px;
   padding-bottom: 20px;
   height: auto;
   border: 1px solid rgb(200, 200, 200);
}
.diaporama1{
   position: relative;
   z-index: -1;
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin-top: 0px;
   margin-bottom: 0px;
   border-radius: 0px;
   box-shadow: 0px 5px 4px rgb(0, 39, 49);
}
.diapos{
   width: calc(100% * 6);
   animation: defiler 100s infinite;
}
.diapo{
   width: 16.65%;
   height: 400px;
   float: left; 
}
#diapo_img{
   width: 100%; 
   height: 400px;
}



@keyframes defiler{
   0%{
      transform: translateX(0);
   }
   7.5%{
      transform: translateX(0);
   }
   15%{
      transform: translateX(-16.65%);
   }
   22.5%{
      transform: translateX(-33.3%);
   }
   30%{
      transform: translateX(-49.95%);
   }
   40%{
      transform: translateX(-66.6%);
   }
   50%{
      transform: translateX(-83.25%);
   }
   60%{
      transform: translateX(-83.25%);
   }
   67.5%{
      transform: translateX(-66.6%);
   }
   75%{
      transform: translateX(-49.95%);
   }
   82.5%{
      transform: translateX(-33.3%);
   }
   90%{
      transform: translateX(-16.65%);
   }
   100%{
      transform: translateX(0);
   }
   

}


.diaporama2{
   position: relative;
   z-index: -1;
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin-top: -400px;
   align-items: center;
   margin-bottom: 0px;
   border-radius: 0px;
   box-shadow: 0px 4px 4px black;
}
.diapos2{
   width: calc(100% * 6);
   animation: reculer 100s infinite;
   font-size: 50px;
   font-weight: bold;
   text-align: center;
   color: rgb(0, 39, 49);
   text-shadow: 
   -1px -1px 0 white,
    1px -1px 0 white,
   -1px  1px 0 white,
    1px  1px 0 white;
}



@keyframes reculer {
   0%{
      transform: translateX(0);
   }
   8%{
      transform: translateX(-16.65%);
   }
   16%{
      transform: translateX(-33.3%);
   }
   22.5%{
      transform: translateX(-49.95%);
   }
   30%{
      transform: translateX(-66.6%);
   }
   40%{
      transform: translateX(-83.25%);
   }
   50%{
      transform: translateX(-83.25%);
   }
   60%{
      transform: translateX(-66.6%);
   }
   67.5%{
      transform: translateX(-49.95%);
   }
   75%{
      transform: translateX(-33.3%);
   }
   82.5%{
      transform: translateX(-16.65%);
   }
   90%{
      transform: translateX(0);
   }
   100%{
      transform: translateX(0);
   }
   

}


.hello {
   width: 100%;
   margin-top: 8px;
}

.hello1{
   width: 70%;
   height: auto;
   border: 1px solid rgb(0, 39, 49);
   border-radius: 10px;
   background-color: rgba(0, 39, 49, 0.3);
   color: rgb(0, 39, 49);
   float: left;
   padding: 10px;
}
.hello1 > h1{
   margin: 0;
   padding: 0;
   font-size: 50px;
}
.hello1 > h2{
   margin: 0;
   padding: 0;
   font-size: 40px;
   font-weight: lighter;
}
.hello1 > p{
   font-size: 20px;
   font-weight: lighter;
   text-align: justify;
   /*text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white; */ 
}
.hello2{
   width: 25.4%;
   height: 350px;
   margin-left: 3%;  
   border-radius: 10px;
   float: left;
}
   .hello2 > ul{
      margin: 100px 0px 0px 0px; 
      padding: 0;
   }
   .hello2 > ul > li{
      list-style-type: none;
      float: left;
      width: 48%;
      height: 40px;
      border-radius: 5px;
      margin-left: 5px;
      padding: 20px 0px 0px 0px;
      text-align: center;
   }
   .hello2 > ul > li > a{
      text-decoration: none;
   }

   .growing{
      text-align: center;
      margin-top: 250px;
      font-size: 13px;
   }
   .growing > h1{
      color: rgb(0, 39, 49);
   }



   .paragraphes_central{
      width: 71.15%;
      height: 380px;
      margin-top: 300px;
      margin-left: 0.1%;
   }

   .background, .mission{
      width: 45%;
   }
   .background > h1, .mission > h1{
      background-color: rgb(255, 174, 0);
      width: 200px;
      padding: 5px;
      border-radius: 5px;
      color: rgb(0, 39, 49);
   }
   .background > p, .mission > p{
      text-align: justify;
      color: rgb(0, 39, 49);
   }
   .mission{
      float: right;
      margin-top: -300px;
   }



.services{
   width: 99%;
   height: 350px;
   border: 1px solid rgb(200, 200, 200);
   border-radius: 10px;
   margin-top: 50px;
   margin-left: 0.45%;
   padding: 20px 0px 0px 0px;
}
   .services > ul{
      margin: 0;
      padding: 0;
   }
   .services > ul > li{
      list-style-type: none;
      float: left;
      width: 13%;
      margin-left: 3.2%;
   }
   .srvc_icons{
      width: 20%;
      height: 50px;
      color: rgb(255, 174, 0);

      }
      .services > ul > li > p{
         width: 55%;
         height: 50px;
         padding: 0;
         text-align: center;
         margin-top: -50px;
         margin-left: 25%;
         font-weight: bold;
         font-family: Arial;
         color: rgb(0, 39, 49);
      }
   #srvc_img{
      width: 100%;
      height: 250px;
      border-radius: 5px;
   }

   .core{
      width: 100%;
      height: 200px;
      margin-top: 30px;
      text-align: center;
      font-size: 13px;
   }
   .core > h1{
      text-align: center;
      width: 40%;
      margin-left: 42%;
      padding: 0px;
      border-radius: 5px;
      color: rgb(0, 39, 49);
      float: right;
   }
   .core > p{
      width: 40%;
      margin-left: 30%;
      text-align: center;
      float: right;
      padding: 0;
   }
   .pipes{
      width: 99.5%;
      margin-left: 5px;
   }
   .pipes > h1{
      font-size: 30px;
      color: rgb(0, 39, 49);
   }
   .pipes > p{
      width: 60%;
      text-align: justify;
   }
   .pipes_img > img{
      float: right;
      width: 480px;
      height: 250px;
      margin-top: -250px;
      border-radius: 5px;
   }
   .phylosophy{
      margin-top: 10px;
      width: 99.5%;
      margin-left: 3px;
      height: 300px;
      border: 1px solid rgb(200, 200, 200);
      background-color: rgb(255, 174, 0, 0.3);
   }
   .phylosophy > ul{
      margin-left: 5px;
      padding: 0;
   }
   .phylosophy > ul > li{
      list-style-type: none;
      float: left;
      width: 32%;
      margin-right: 20px;
   }
   .phylosophy > ul > li > h1{
      font-size: 20px;
      background-color: rgb(255, 174, 0);
      padding: 5px;
      border-radius: 5px;
      color: rgb(0, 39, 49);
   }
   .phylosophy > ul > li > P{
      font-size: 14px;
   }
footer{
    margin-top: 10px;
    width: 98.3%;
    margin-left: 3px;
   height: 300px;
   border: 1px solid rgb(200, 200, 200);
}












@media screen and (max-width: 700px){
   section{
      margin-top: 120px;
   } 
	.diaporama1{
     display: none;
   }
   .diaporama2{
     display: none;
   }
   .hello {
      width: 100%;
      margin-top: 5px;
   }
   .hello1{
      width: 92%;
      margin-left: 2.5px;
      height: auto;
      border-radius: 5px;
      float: none;
      background-color: rgba(0, 39, 49, 0.2);
   }
   .hello1 > h1{
      font-size: 22px;
   }
   .hello1 > h2{
      font-size: 18px;
   }
   .hello1 > p{
      font-size: 13px;
   }
   .hello2{
      width: 98.5%;
      height: auto;
      margin-left: 2px;  
      float: none;
   }
   .hello2 > ul{
      margin: 10px 0px 0px 0px; 
   }
   .hello2 > ul > li{
      float: left;
      width: 40%;
      height: 20px;
      margin-left: 22px;
      padding: 8px 0px 0px 0px;
      font-size: 13px;
   }
   .growing{
      margin-top: 50px;
   }
   .growing > h1{
      font-size: 22px;
   }

   .paragraphes_central{
      width: 98%;
      height: auto;
      margin-top: 0px;
      margin-left: 2px;
   }
   .background, .mission{
      width: 100%;
   }
   .background > h1, .mission > h1{
      font-size: 15px;
      text-align: center;
      width: 50%;
      margin-left: 25%;
   }
   .background > p, .mission > p{
      font-size: 13px;
   }
   .mission{
      float: none;
      margin-top: 0px;
   }
   .services{
      width: 98%;
      height: auto;
      margin-left: 0.7%;
      padding: 10px 0px 0px 0px;
   }
      .services > ul > li{
         float: none;
         width: 99%;
         margin-left: 2.5px;
      }
      .srvc_icons{
         width: 18px;
         height: 18px;
         margin-left:   45px;
   
         }
         .services > ul > li > p{
            width: 99%;
            height: auto;
            padding: 0;
            text-align: center;
            margin-top: -22px;
            margin-left: 0px;
            font-size: 15px;
         }
      #srvc_img{
         width: 100%;
         height: 200px;
         margin-bottom: 20px;
      }
      .core{
         height: auto;
         margin-top: 30px;
      }
      .core > h1{
         width: 50%;
         margin-left: 0%;
         float: left;
         font-size: 15px;
      }
      .core > p{
         width: 70%;
         margin-left: 0%;
         float: none;
         text-align: justify;
         padding: 5px;
         color: rgb(100, 100, 100);
         font-size: 12px;
      }
      .pipes{
         width: 97%;
         margin-left: 4px;
      }
      .pipes > h1{
         font-size: 18px;
         text-align: center;
      }
      .pipes > p{
         width: 100%;
         font-size: 13px;
      }
      .pipes_img > img{
         float: none;
         width: 100%;
         height: auto;
         margin-top: 0px;
      }
      .phylosophy{
         width: 95%;
         height: auto;
         padding: 5px;
         border-radius: 5px;
         margin-left: 4px;
      }
      .phylosophy > ul{
         margin-left: 0px;
      }
      .phylosophy > ul > li{
         float: none;
         width: 100%;
         margin-right: 0px;
      }
      .phylosophy > ul > li > h1{
         font-size: 15px;
         border-radius: 5px;
      }
      .phylosophy > ul > li > P{
         font-size: 13px;
         text-align: justify;
      }

   
}