title: How to make this css3 slider responsive
body: <p>I found this smooth and simple code for a pure css3 slideshow... problem is, it isn't responsive because the parent div "slider" stays at 470px when the images get smaller with a smaller screensize. Images are already responsive like a charm when adding width: 100%. Someone an idea? Is it even possible?</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class='slider'&gt;
  &lt;div class='slide1'&gt;&lt;img src="../lp-pic-first.png"&gt;&lt;/div&gt;
  &lt;div class='slide2'&gt;&lt;img src="../lp-pic-second.png"&gt;&lt;/div&gt;
  &lt;div class='slide3'&gt;&lt;img src="../lp-pic-four.png"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider {
  max-width: 1175px;
  height: 470px;
  position: relative;
  width: 94%;
  margin: 0 auto;
  }
  .slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
  }
  .slide1 {
  
  animation:fade 16s infinite;
  -webkit-animation:fade 16s infinite;
  
  }
  .slide2 {
  
  animation:fade2 16s infinite;
  -webkit-animation:fade2 16s infinite;
  }
  
  .slide3 {
  
  animation:fade3 16s infinite;
  -webkit-animation:fade3 16s infinite;
  }
  
  
  
  @keyframes fade
  {
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
  }
  @keyframes fade2
  {
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
  }
  @keyframes fade3
  {
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
  }
  </code></pre>