/* CSS Document */
/* 
Ok... so when there are more than 3 slides, add them 
into the slider folder first, then change the % breakdown right here
then scrolldown and update the -webkit-animation-duration: accordingly
and then for IE and Firefox, go and add the div calls in index.php
(note, the styles are set so far to accomodate up to six pictures below

 */
@-webkit-keyframes slider {
  0%      {background-image: url('../img/sports/001.jpg');}
  4.35%   {background-image: url('../img/sports/002.jpg');}
  8.70%   {background-image: url('../img/sports/004.jpg');}
  13.04%  {background-image: url('../img/sports/005.jpg');}
  17.39%  {background-image: url('../img/sports/006.jpg');}
  21.74%  {background-image: url('../img/sports/007.jpg');}
  26.09%  {background-image: url('../img/sports/008.jpg');}
  30.43%  {background-image: url('../img/sports/009.jpg');}
  34.78%  {background-image: url('../img/sports/011.jpg');}
  39.13%  {background-image: url('../img/sports/012.jpg');}
  43.48%  {background-image: url('../img/sports/014.jpg');}
  47.83%  {background-image: url('../img/sports/015.jpg');}
  52.17%  {background-image: url('../img/sports/016.jpg');}
  56.52%  {background-image: url('../img/sports/017.jpg');}
  60.87%  {background-image: url('../img/sports/018.jpg');}
  65.22%  {background-image: url('../img/sports/019.jpg');}
  69.57%  {background-image: url('../img/sports/020.jpg');}
  73.91%  {background-image: url('../img/sports/021.jpg');}
  78.26%  {background-image: url('../img/sports/022.jpg');}
  82.61%  {background-image: url('../img/sports/023.jpg');}
  86.96%  {background-image: url('../img/sports/024.jpg');}
  91.30%  {background-image: url('../img/sports/032.jpg');}
  95.65%  {background-image: url('../img/sports/033.jpg');}
  100%    {background-image: url('../img/sports/034.jpg');}
}
@-webkit-keyframes sliderR{
0% {background-image: url('../img/sports/001.jpg');}
14% {background-image: url('../img/sports/002.jpg');}
28% {background-image: url('../img/sports/003.jpg');}
42% {background-image: url('../img/sports/004.jpg');}
56% {background-image: url('../img/sports/005.jpg');}
70% {background-image: url('../img/sports/006.jpg');}
84% {background-image: url('../img/sports/007.jpg');}
100% {background-image: url('../img/sports/008.jpg');}
}
div#slider, div#sliderR
{
position:relative;
z-index:-1;
width:960px;
height:455px;
margin:auto;
padding:0px;
background:url(../img/sports/001.jpg) no-repeat;
-webkit-animation:emslide linear 20s; /* Safari and Chrome
-webkit-animation-iteration-count: infinite; */
-webkit-transition: margin-top 5s;
-webkit-animation-name: slider;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: steps(24, end);
-webkit-animation-timing-function: linear;
-webkit-animation-delay:2s;
}
div#sliderR {
background:url(../img/sports/034.jpg) no-repeat;
}

/* The below is for IE and Firefox */
@-moz-keyframes fadeIn { 		from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { 			from { opacity:0; } to { opacity:1; } }

.emslide {
    opacity:0;
    -moz-animation:fadeIn linear 1;
    animation:fadeIn linear 1;

    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -moz-animation-duration:3s;
    animation-duration:3s;
}
 
.emslide.one {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
background-image:url(../img/sports/001.jpg);
z-index:1;
}
 
.emslide.two {
-moz-animation-delay:5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
background-image:url(../img/sports/002.jpg);
z-index:2;
}
 
.emslide.three {
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
background-image:url(../img/sports/003.jpg);
z-index:3;
}

.emslide.four {
-moz-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
background-image:url(../img/sports/004.jpg);
z-index:4;
}

.emslide.five{
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
background-image:url(../img/sports/005.jpg);
z-index:5;
}

.emslide.six{
-moz-animation-delay: 25s;
-webkit-animation-delay: 25s;
animation-delay: 25s;
background-image:url(../img/sports/006.jpg);
z-index:6;
}

.emslide.seven{
-moz-animation-delay: 30s;
-webkit-animation-delay: 30s;
animation-delay: 30s;
background-image:url(../img/sports/007.jpg);
z-index:7;
}

.emslide.eight{
-moz-animation-delay: 35s;
-webkit-animation-delay: 35s;
animation-delay: 35s;
background-image:url(../img/sports/008.jpg);
z-index:8;
}

.emslide.nine{
-moz-animation-delay: 40s;
-webkit-animation-delay: 40s;
animation-delay: 40s;
background-image:url(../img/sports/009.jpg);
z-index:9;
}

.emslide.ten{
-moz-animation-delay: 45s;
-webkit-animation-delay: 45s;
animation-delay: 45s;
background-image:url(../img/sports/010.jpg);
z-index:10;
}

.emslide.eleven{
-moz-animation-delay: 50s;
-webkit-animation-delay: 50s;
animation-delay: 50s;
background-image:url(../img/sports/011.jpg);
z-index:11;
}

.emslide.twelve{
-moz-animation-delay: 55s;
-webkit-animation-delay: 55s;
animation-delay: 55s;
background-image:url(../img/sports/012.jpg);
z-index:12;
}

.emslide.thirteen{
-moz-animation-delay: 60s;
-webkit-animation-delay: 60s;
animation-delay: 60s;
background-image:url(../img/sports/013.jpg);
z-index:13;
}

.emslide.fourteen{
-moz-animation-delay: 65s;
-webkit-animation-delay: 65s;
animation-delay: 65s;
background-image:url(../img/sports/014.jpg);
z-index:14;
}

.emslide.fifteen{
-moz-animation-delay: 70s;
-webkit-animation-delay: 70s;
animation-delay: 70s;
background-image:url(../img/sports/015.jpg);
z-index:15;
}

.emslide.sixteen{
-moz-animation-delay: 75s;
-webkit-animation-delay: 75s;
animation-delay: 75s;
background-image:url(../img/sports/016.jpg);
z-index:16;
}

.emslide.seventeen{
-moz-animation-delay: 80s;
-webkit-animation-delay: 80s;
animation-delay: 80s;
background-image:url(../img/sports/017.jpg);
z-index:17;
}

.emslide.eighteen{
-moz-animation-delay: 85s;
-webkit-animation-delay: 85s;
animation-delay: 85s;
background-image:url(../img/sports/018.jpg);
z-index:18;
}

.emslide.nineteen{
-moz-animation-delay: 90s;
-webkit-animation-delay: 90s;
animation-delay: 85s;
background-image:url(../img/sports/019.jpg);
z-index:19;
}

.emslide.twenty{
-moz-animation-delay: 95s;
-webkit-animation-delay: 95s;
animation-delay: 95s;
background-image:url(../img/sports/020.jpg);
z-index:20;
}

.emslide.twentyone{
-moz-animation-delay: 100s;
-webkit-animation-delay: 100s;
animation-delay: 100s;
background-image:url(../img/sports/021.jpg);
z-index:21;
}

.emslide.twentytwo{
-moz-animation-delay: 105s;
-webkit-animation-delay: 105s;
animation-delay: 105s;
background-image:url(../img/sports/022.jpg);
z-index:22;
}

.emslide.twentythree{
-moz-animation-delay: 110s;
-webkit-animation-delay: 110s;
animation-delay: 110s;
background-image:url(../img/sports/023.jpg);
z-index:23;
}

.emslide.twentyfour{
-moz-animation-delay: 115s;
-webkit-animation-delay: 115s;
animation-delay: 115s;
background-image:url(../img/sports/024.jpg);
z-index:24;
}

.emslide.twentyfive{
-moz-animation-delay: 120s;
-webkit-animation-delay: 120s;
animation-delay: 120s;
background-image:url(../img/sports/025.jpg);
z-index:25;
}

.emslide.twentysix{
-moz-animation-delay: 125s;
-webkit-animation-delay: 125s;
animation-delay: 125s;
background-image:url(../img/sports/026.jpg);
z-index:26;
}

.emslide.twentyseven{
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
background-image:url(../img/sports/001.jpg);
z-index:27;
}

.emslide.twentyeight{
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
background-image:url(../img/sports/002.jpg);
z-index:28;
}

.emslide.twentynine{
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
background-image:url(../img/sports/003.jpg);
z-index:29;
}

.emslide.thirty{
-moz-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
background-image:url(../img/sports/004.jpg);
z-index:30;
}

.emslide.thirtyone{
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
background-image:url(../img/sports/005.jpg);
z-index:31;
}
.emslide.thirtytwo{
-moz-animation-delay: 25s;
-webkit-animation-delay: 25s;
animation-delay: 25s;
background-image:url(../img/sports/006.jpg);
z-index:32;
}
.emslide.thirtythree{
-moz-animation-delay: 30s;
-webkit-animation-delay: 30s;
animation-delay: 30s;
background-image:url(../img/sports/007.jpg);
z-index:33;
}
.emslide.thirtyfour{
-moz-animation-delay: 35s;
-webkit-animation-delay: 35s;
animation-delay: 35s;
background-image:url(../img/sports/008.jpg);
z-index:34;
}

.slider, .sliderR{
width: 960px;
height: 455px;
position: absolute;
float: left; 
}