.container{
width: 930px;
margin: 0 auto;
padding-top:0px; }

#slider {
background: #000;
border: 5px solid #CCC;
height: 400px;
width: 550px;
box-shadow: ;
margin: 0px auto 0;
overflow:hidden;
position: relative;
}
#slider ul{
margin: 0px;
padding: 0px;
position: relative;
}
#slider ul li {
height: 400px;
width: 550px;
position: absolute;
list-style: none;
float: left;
}
#slider ul li:first-child{
-webkit-animation: move1 20s linear infinite; 
-moz-animation: move1 20s linear infinite;
-o-animation: move1 20s linear infinite;
animation: move1 20s linear infinite; 
}
#slider ul li:nth-child(2){
-webkit-animation: move2 20s linear infinite; 
-moz-animation: move2 20s linear infinite;
-o-animation: move2 20s linear infinite;
animation: move2 20s linear infinite; 
}
#slider ul li:nth-child(3){
-webkit-animation: move3 20s linear infinite; 
-moz-animation: move3 20s linear infinite;
-o-animation: move3 20s linear infinite;
animation: move3 20s linear infinite; 
}
#slider ul li:last-child{
-webkit-animation: move4 20s linear infinite; 
-moz-animation: move4 20s linear infinite;
-o-animation: move4 20s linear infinite;
animation: move4 20s linear infinite; 
}
#slider:hover ul li{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}

@-webkit-keyframes move1 {
0%  { left: 0px; } 
22% { left: 0px; opacity:1; z-index:0; }
25% { left: 309px; opacity: 0; z-index: 0; } 
26% { left: -309px; opacity: 0; z-index: -1; } 
92% { left: -309px; opacity: 0; z-index: 0; }
99% { left: 0px; opacity: 1; }
100%{ left: 0px; opacity: 1; }
}
@-webkit-keyframes move2 {
0%  { left: -309px; opacity: 0; } 
22% { left: -309px; opacity:0; }
25% { left: 0px; opacity: 1; }
47% { left: 0px; opacity: 1; z-index: 0; }  
50% { left: 309px; opacity: 0; z-index: 0; }
51% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }  
100%{ left: -309px; opacity: 0; }
}
@-webkit-keyframes move3 {
0%  { left: -309px; opacity: 0; }
47% { left: -309px; opacity: 0; }
50% { left: 0px;opacity: 1; z-index: 0 }
72% { left: 0px; opacity: 1; z-index: 0 } 
75% { left: 309px; opacity: 0; }
76% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }
100%{ left: -309px; opacity: 0; z-index: 0; }
}
@-webkit-keyframes move4 {
0%  { left: -309px; opacity: 0; }
72% { left: -309px; opacity: 0; }
75% { left: 0px;opacity: 1; z-index: 0; }
95% { left: 0px; opacity: 1; } 
98% { left: 309px; opacity: 0; z-index: 0; }
100%{ left: -309px; opacity: 0; z-index: -1; }
}

@-moz-keyframes move1 {
0%  { left: 0px; } 
22% { left: 0px; opacity:1; z-index:0; }
25% { left: 309px; opacity: 0; z-index: 0; } 
26% { left: -309px; opacity: 0; z-index: -1; } 
92% { left: -309px; opacity: 0; z-index: 0; }
99% { left: 0px; opacity: 1; }
100%{ left: 0px; opacity: 1; }
}
@-moz-keyframes move2 {
0%  { left: -309px; opacity: 0; } 
22% { left: -309px; opacity:0; }
25% { left: 0px; opacity: 1; }
47% { left: 0px; opacity: 1; z-index: 0; }  
50% { left: 309px; opacity: 0; z-index: 0; }
51% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }  
100%{ left: -309px; opacity: 0; }
}
@-moz-keyframes move3 {
0%  { left: -309px; opacity: 0; }
47% { left: -309px; opacity: 0; }
50% { left: 0px;opacity: 1; z-index: 0 }
72% { left: 0px; opacity: 1; z-index: 0 } 
75% { left: 309px; opacity: 0; }
76% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }
100%{ left: -309px; opacity: 0; z-index: 0; }
}
@-moz-keyframes move4 {
0%  { left: -309px; opacity: 0; }
72% { left: -309px; opacity: 0; }
75% { left: 0px;opacity: 1; z-index: 0; }
95% { left: 0px; opacity: 1; } 
98% { left: 309px; opacity: 0; z-index: 0; }
100%{ left: -309px; opacity: 0; z-index: -1; }
}

@-o-keyframes move1 {
0%  { left: 0px; } 
22% { left: 0px; opacity:1; z-index:0; }
25% { left: 309px; opacity: 0; z-index: 0; } 
26% { left: -309px; opacity: 0; z-index: -1; } 
92% { left: -309px; opacity: 0; z-index: 0; }
99% { left: 0px; opacity: 1; }
100%{ left: 0px; opacity: 1; }
}
@-o-keyframes move2 {
0%  { left: -309px; opacity: 0; } 
22% { left: -309px; opacity:0; }
25% { left: 0px; opacity: 1; }
47% { left: 0px; opacity: 1; z-index: 0; }  
50% { left: 309px; opacity: 0; z-index: 0; }
51% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }  
100%{ left: -309px; opacity: 0; }
}
@-o-keyframes move3 {
0%  { left: -309px; opacity: 0; }
47% { left: -309px; opacity: 0; }
50% { left: 0px;opacity: 1; z-index: 0 }
72% { left: 0px; opacity: 1; z-index: 0 } 
75% { left: 309px; opacity: 0; }
76% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }
100%{ left: -309px; opacity: 0; z-index: 0; }
}
@-o-keyframes move4 {
0%  { left: -309px; opacity: 0; }
72% { left: -309px; opacity: 0; }
75% { left: 0px;opacity: 1; z-index: 0; }
95% { left: 0px; opacity: 1; } 
98% { left: 309px; opacity: 0; z-index: 0; }
100%{ left: -309px; opacity: 0; z-index: -1; }
}

@keyframes move1 {
0%  { left: 0px; } 
22% { left: 0px; opacity:1; z-index:0; }
25% { left: 309px; opacity: 0; z-index: 0; } 
26% { left: -309px; opacity: 0; z-index: -1; } 
92% { left: -309px; opacity: 0; z-index: 0; }
99% { left: 0px; opacity: 1; }
100%{ left: 0px; opacity: 1; }
}
@keyframes move2 {
0%  { left: -309px; opacity: 0; } 
22% { left: -309px; opacity:0; }
25% { left: 0px; opacity: 1; }
47% { left: 0px; opacity: 1; z-index: 0; }  
50% { left: 309px; opacity: 0; z-index: 0; }
51% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }  
100%{ left: -309px; opacity: 0; }
}
@keyframes move3 {
0%  { left: -309px; opacity: 0; }
47% { left: -309px; opacity: 0; }
50% { left: 0px;opacity: 1; z-index: 0 }
72% { left: 0px; opacity: 1; z-index: 0 } 
75% { left: 309px; opacity: 0; }
76% { left: -309px; opacity: 0; z-index: -1; }
99% { left: -309px; opacity: 0; }
100%{ left: -309px; opacity: 0; z-index: 0; }
}
@keyframes move4 {
0%  { left: -309px; opacity: 0; }
72% { left: -309px; opacity: 0; }
75% { left: 0px;opacity: 1; z-index: 0; }
95% { left: 0px; opacity: 1; } 
98% { left: 309px; opacity: 0; z-index: 0; }
100%{ left: -309px; opacity: 0; z-index: -1; }
}
/* CSS Document */