body{
  background-color: #fffae4;
  background: #fffae4;
  font-family: Georgia, 'Times New Roman', Times, serif;
  }
  *{
      background-color: #fffae4;
      background: #fffae4;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }

.centre{
    margin-right: 250px;
       margin-left: 250px;
       font-family: Georgia, 'Times New Roman', Times, serif;
  }
  .diaporama{
      margin: 0 auto;
      width: 800px;
      height: 450px;
      text-align: center;
      
      background-image: url("./image/02traiteur.jpg");
      -webkit-animation-name: diapo1;
      -webkit-animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: normal;
  
       -moz-animation-name: diapo1;
       -moz-animation-name: diapo1;
       -moz-animation-duration: 10s;
       -moz-animation-timing-function: linear;
       -moz-animation-iteration-count: infinite;
       -moz-animation-direction: normal;
  
       
       animation-name: diapo1;
       animation-name: diapo1;
       animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction:alternate;
  
  
  
  }
  @-webkit-keyframes diapo1{
      16%{background-image: url("./image/02traiteur2.jpg");}
     20%{background-image: url("./image/02traiteur1.jpg");}
    
     25%{background-image: url("./image/02traiteur3.jpg");}
      33%{background-image: url("./image/02traiteur4.jpg");}
      
  
  }
  
  @-moz-keyframes diapo1{
    16%{background-image: url("./image/02traiteur2.jpg");}
   20%{background-image: url("./image/02traiteur1.jpg");}
  
   25%{background-image: url("./image/02traiteur3.jpg");}
    33%{background-image: url("./image/02traiteur4.jpg");}
  }
  @keyframes diapo1{
    16%{background-image: url("./image/02traiteur2.jpg");}
    20%{background-image: url("./image/02traiteur1.jpg");}
  
   25%{background-image: url("./image/02traiteur3.jpg");}
    33%{background-image: url("./image/02traiteur4.jpg");}
  }
  
  @media screen and (max-width:800px){
    body{
      background-color: #fffae4;
      background: #fffae4;
      }
      *{
          background-color: #fffae4;
          background: #fffae4;
        }

    .centre{
      margin-left: 0px;
         text-align: center;
         font-family:'Times New Roman', Times, serif, Times, serif ;

         width: 340px ;
    }
    
    .diaporama{
      width: 300px;
      height: 200px;
      text-align: center;
    
    background-image: url("traiteur_m.jpg");
    -webkit-animation-name: diapo1;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;

     -moz-animation-name: diapo1;
     -moz-animation-name: diapo1;
     -moz-animation-duration: 10s;
     -moz-animation-timing-function: linear;
     -moz-animation-iteration-count: infinite;
     -moz-animation-direction: normal;

     
     animation-name: diapo1;
     animation-name: diapo1;
     animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction:alternate;



}
@-webkit-keyframes diapo1{
    16%{background-image: url("traiteur_m.jpg");}
   20%{background-image: url("traiteur_m1.jpg");}
  
   25%{background-image: url("traiteur_m2.jpg");}
    33%{background-image: url("traiteur_m4.jpg");}
    

}

@-moz-keyframes diapo1{
  16%{background-image: url("traiteur_m.jpg");}
  20%{background-image: url("traiteur_m1.jpg");}
 
  25%{background-image: url("traiteur_m2.jpg");}
   33%{background-image: url("traiteur_m4.jpg");}
}
@keyframes diapo1{
  16%{background-image: url("traiteur_m.jpg");}
  20%{background-image: url("traiteur_m1.jpg");}
 
  25%{background-image: url("traiteur_m2.jpg");}
   33%{background-image: url("traiteur_m4.jpg");}
}

  }