<h2>AutoPlay Responsive CSS Slider</h2>
<p>Includes: Cool hover animations and cats! </p>

<div class="container">
  <div class="rotator-wrap">
    <ul class="rotator">
      <li> <div><img src="http://lorempixel.com/200/200/cats/1" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/2" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/3" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/4" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/5" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/6" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/7" alt="" /></div> </li>
        <li> <div><img src="http://lorempixel.com/200/200/cats/8" alt="" /></div> </li>
    </ul>
  </div>
</div>

/*Animations are sped up so you're not sitting here all day*/

/*Desktop and Tablet*/
@-webkit-keyframes slide {
  0% { margin:0; }
  5%,50% { margin:0 0 0 -100%; }
  55%, 100% { margin:0; }
}
@-moz-keyframes slide {
  0% { margin:0; }
  5%,50% { margin:0 0 0 -100%; }
  55%,100% { margin:0; }
}
@-ms-keyframes slide {
  0% { margin:0; }
  5%,50% { margin:0 0 0 -100%; }
  55%,100% { margin:0; }
}
@-o-keyframes slide {
  0% { margin:0; }
  5%,50% { margin:0 0 0 -100%; }
  55%,100% { margin:0; }
}
@keyframes slide {
  0% { margin:0; }
  5%,50% { margin:0 0 0 -100%; }
  55%,100% { margin:0; }
}

/*Mobile*/
@-webkit-keyframes slide_mobile {
  0%, 22% { margin:0; }
  25%, 47% { margin:0 0 0 -100%; }  
  50%, 72% { margin:0 0 0 -200%; }
  75%, 97% { margin:0 0 0 -300%; }
  100% { margin:0; }
}

@-moz-keyframes slide_mobile {
  0%, 22% { margin:0; }
  25%, 47% { margin:0 0 0 -100%; }  
  50%, 72% { margin:0 0 0 -200%; }
  75%, 97% { margin:0 0 0 -300%; }
  100% { margin:0; }
}

@-ms-keyframes slide_mobile {
  0%, 22% { margin:0; }
  25%, 47% { margin:0 0 0 -100%; }  
  50%, 72% { margin:0 0 0 -200%; }
  75%, 97% { margin:0 0 0 -300%; }
  100% { margin:0; }
}

@-o-keyframes slide_mobile {
  0%, 22% { margin:0; }
  25%, 47% { margin:0 0 0 -100%; }  
  50%, 72% { margin:0 0 0 -200%; }
  75%, 97% { margin:0 0 0 -300%; }
  100% { margin:0; }
}

@keyframes slide_mobile {
  0%, 22% { margin:0; }
  25%, 47% { margin:0 0 0 -100%; }  
  50%, 72% { margin:0 0 0 -200%; }
  75%, 97% { margin:0 0 0 -300%; }
  100% { margin:0; }
}

    body {
      background:#b7d3f2;
      color:#5276a0;
    }

    .container {
      width:100%;
    }

    .rotator-wrap {
        overflow:hidden;
        position:relative;
        min-height:100px;
        width:100%;
        border-radius:5px;
    }

    .rotator {
        width:200%;
        overflow:hidden;
        margin:0;
        list-style:none;
        padding:0;
  background: #7ea1c8; /* Old browsers */
background: -moz-linear-gradient(left,  #7ea1c8 0%, #3d6ea5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7d3f2), color-stop(100%,#3d6ea5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #b7d3f2 0%,#3d6ea5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #b7d3f2 0%,#3d6ea5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #b7d3f2 0%,#3d6ea5 100%); /* IE10+ */
background: linear-gradient(to right,  #b7d3f2 0%,#3d6ea5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ea1c8', endColorstr='#3d6ea5',GradientType=1 ); /* IE6-9 */

/*Change the length of the animation here*/
        -webkit-animation: slide 10s infinite ease-out 5s;
        -moz-animation:    slide 15s infinite ease-out 5s;
        -ms-animation:     slide 15s infinite ease-out 5s;
        -o-animation:      slide 15s infinite ease-out 5s;
        animation:         slide 15s infinite ease-out 5s;
    }

    .rotator > li {
        padding:15px;
        width:12.5%;
        float:left;
        margin:0;
        box-sizing:border-box;
        
        
        -webkit-transition:margin .2s ease-out;
        -moz-transition:margin .2s ease-out;
        -ms-transition:margin .2s ease-out;
        -o-transition:margin .2s ease-out;
        transition:margin .2s ease-out;
    }
    .rotator > li:hover {
      margin:-7px 0 0 0;
      cursor:pointer;
    }

    .rotator > li > div {
        background:#999;
        width:100%;
        height:100%;
        line-height: 0;
        border-radius:50%;
        overflow:hidden;
        box-shadow:0 5px 5px 0px rgba(0,0,0,.7);
        
    
        -webkit-transition: box-shadow .2s ease-out;
        -moz-transition:box-shadow .2s ease-out;
        -ms-transition:box-shadow .2s ease-out;
        -o-transition:box-shadow .2s ease-out;
        transition:box-shadow .2s ease-out;
    }

    .rotator > li:hover > div {
      box-shadow:0 20px 15px -10px rgba(0,0,0,.3);
    }

    img {
      width:100%;
    }

    @media only screen and (max-width: 767px) {
        .rotator {
            width:266%;
        }
    }

    @media only screen and (max-width: 520px) {
        .rotator {
            width:400%;
            -webkit-animation: slide_mobile 25s infinite ease-out;
            -moz-animation:    slide_mobile 25s infinite ease-out;
            -ms-animation:     slide_mobile 25s infinite ease-out;
            -o-animation:      slide_mobile 25s infinite ease-out;
            animation:         slide_mobile 25s infinite ease-out;
        }
    }

//This is a CSS ONLY responsive autoplaying slider.

/*
it has a total of 8 images, 4 displayed at a time on desktop, 3 at tablet (doesn't show the last 2 images: need to make a new animation), 2 at mobile.

in mobile the animation changes to shows 2 at a time until it reaches the end, then returns to the beginning
*/