.slider {
    max-width: 800px;
    width: 100%;
    height: 100%;
    position: relative;
    margin-left: 50%;
    transform: translateX(-50%);
    display: table;
  }
  .slide1,.slide2,.slide3,.slide4{
    position: absolute;
    width: 100vw;
    max-width: 100%;
    height: 100vw;
    max-height: 500px;
    display: table-row;
    object-fit: cover;
  }
  .slide1 {
      animation:fade1 12s linear infinite;
  -webkit-animation:fade1 12s linear infinite;
  } 
  .slide2 {
      animation:fade2 12s linear infinite;
  -webkit-animation:fade2 12s linear infinite;
  }
  .slide3 {
      animation:fade3 12s linear infinite;
  -webkit-animation:fade3 12s linear infinite;
  }
  .slide4 {
    animation:fade4 12s linear infinite;
-webkit-animation:fade4 12s linear infinite;
}
  @keyframes fade1
  {
    0%   {opacity:1}
    100% {opacity:1}
  }
  @keyframes fade2
  {
    0%   {opacity:0}
    15%  {opacity:0}
    25%  {opacity:1}
    50%  {opacity:1}
    55%  {opacity:0}
    100% {opacity:0}
  }
  @keyframes fade3
  {
    0%   {opacity:0}
    40%  {opacity:0}
    50%  {opacity:1}
    75%  {opacity:1}
    85%  {opacity:0}
    100% {opacity:0}
  }
  @keyframes fade4
  {
    0%   {opacity:0}
    65%  {opacity:0}
    75%  {opacity:1}
    90%  {opacity:1}
    100% {opacity:0}
  }