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:'Times New Roman', Times, serif ;
}
.diaporama{
     margin: 0 auto;
     width: 700px;
     height: 500px;
     text-align: center;
     background-image: url("./image/01catering.png");
     -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/01catering1.jpg");}
    18%{background-image: url("./image/01catering2.png");}
    25%{background-image: url("./image/01catering4.jpg");}
    33%{background-image: url("./image/01catering5.jpg");}
}

@-moz-keyframes diapo1{
    16%{background-image: url("./image/01catering1.jpg");}
    18%{background-image: url("./image/01catering2.png");}
    25%{background-image: url("./image/01catering4.jpg");}
    33%{background-image: url("./image/01catering5.jpg");}
}
@keyframes diapo1{
    16%{background-image: url("./image/01catering1.jpg");}
    18%{background-image: url("./image/01catering2.png");}
    25%{background-image: url("./image/01catering5.jpg");}
    33%{background-image: url("./image/01catering4.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 ;
           width:340px;
      }
      .diaporama{
          width: 300px;
          height: 200px;
          text-align: center;
          background-image: url("catering_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("catering_m.jpg");}
          18%{background-image: url("catering_m1.jpg");}
          25%{background-image: url("catering_m2.jpg");}
          33%{background-image: url("catering_m4.jpg");}
      }
      @-moz-keyframes diapo1{
          16%{background-image: url("catering_m.jpg");}
          18%{background-image: url("catering_m1.jpg");}
          25%{background-image: url("catering_m2.jpg");}
          33%{background-image: url("catering_m4.jpg");}
      }
      @keyframes diapo1{
        16%{background-image: url("catering_m.jpg");}
        18%{background-image: url("catering_m1.jpg");}
        25%{background-image: url("catering_m2.jpg");}
        33%{background-image: url("catering_m4.jpg");}
      }
}