/*  --- (C) Jo Klimek 2012 CssApps.de ---  */

#window{
  position:relative;
  width:400px;
  height:300px;
  margin:50px auto;
  overflow:hidden;
  box-shadow:0 0 15px 0px rgba(0,0,0,1);
}

#all{
  -webkit-animation:slide60 40s ease-in-out infinite;
  -moz-animation:slide20 60s ease-in-out infinite;
  -ms-animation:slide20 60s ease-in-out infinite;
  -o-animation:slide20 60s ease-in-out infinite;
  animation:slide20 60s ease-in-out infinite;  /* 20 pictures 2,5 Sek pro Bild */
  width:8800px;     /* max 20 pictures +1 */
  height:300px;
  /* background:#444; */
  background:0,0,0,0;
}

#window:hover #all{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}

#window:hover:after{
content:"▌▌";
text-shadow:-1px -2px 3px #fff,1px 2px 3px #000;
position:absolute;
right:5px;
top:5px;
opacity:.4;
color:#bbb;
}

#all span{
  display:block;
  float:left;
  width:400px;
  height:300px;
}

#all span.ls img{
  display:block;
  width:400px;
  height:300px;
}

#all span.pt img{
  display:block;
  margin:0 auto;
  height:300px;
}

/* -moz-    */
@-moz-keyframes slide20{
0%   {margin-left:0px;}
3,5%   {margin-left:0px;}
5%  {margin-left:-400px;}
8,5%  {margin-left:-400px;}
10%  {margin-left:-800px;}
13,5%  {margin-left:-800px;}
15%  {margin-left:-1200px;}
18,5%  {margin-left:-1200px;}
20%  {margin-left:-1600px;}
23,5%  {margin-left:-1600px;}
25%  {margin-left:-2000px;}
28,5%  {margin-left:-2000px;}
30%  {margin-left:-2400px;}
33,5%  {margin-left:-2400px;}
35%  {margin-left:-2800px;}
38,5%  {margin-left:-2800px;}
40%  {margin-left:-3200px;}
43,5%  {margin-left:-3200px;}
45%  {margin-left:-3600px;}
48,5%  {margin-left:-3600px;}
50%  {margin-left:-4000px;}
53,5%  {margin-left:-4000px;}
55%  {margin-left:-4400px;}
58,5%  {margin-left:-4400px;}
60%  {margin-left:-4800px;}
63,5%  {margin-left:-4800px;}
65%  {margin-left:-5200px;}
68,5%  {margin-left:-5200px;}
70%  {margin-left:-5600px;}
73,5%  {margin-left:-5600px;}
75%  {margin-left:-6000px;}
78,5%  {margin-left:-6000px;}
80%  {margin-left:-6400px;}
83,5%  {margin-left:-6400px;}
85%  {margin-left:-6800px;}
88,5%  {margin-left:-6800px;}
90%  {margin-left:-7200px;}
93,5%  {margin-left:-7200px;}
95%  {margin-left:-7600px;}
98,5%  {margin-left:-7600px;}
100%  {margin-left:-8000px;}
}

/* -webkit-    */
@-webkit-keyframes slide20{
0%   {margin-left:0px;}
3,5%   {margin-left:0px;}
5%  {margin-left:-400px;}
8,5%  {margin-left:-400px;}
10%  {margin-left:-800px;}
13,5%  {margin-left:-800px;}
15%  {margin-left:-1200px;}
18,5%  {margin-left:-1200px;}
20%  {margin-left:-1600px;}
23,5%  {margin-left:-1600px;}
25%  {margin-left:-2000px;}
28,5%  {margin-left:-2000px;}
30%  {margin-left:-2400px;}
33,5%  {margin-left:-2400px;}
35%  {margin-left:-2800px;}
38,5%  {margin-left:-2800px;}
40%  {margin-left:-3200px;}
43,5%  {margin-left:-3200px;}
45%  {margin-left:-3600px;}
48,5%  {margin-left:-3600px;}
50%  {margin-left:-4000px;}
53,5%  {margin-left:-4000px;}
55%  {margin-left:-4400px;}
58,5%  {margin-left:-4400px;}
60%  {margin-left:-4800px;}
63,5%  {margin-left:-4800px;}
65%  {margin-left:-5200px;}
68,5%  {margin-left:-5200px;}
70%  {margin-left:-5600px;}
73,5%  {margin-left:-5600px;}
75%  {margin-left:-6000px;}
78,5%  {margin-left:-6000px;}
80%  {margin-left:-6400px;}
83,5%  {margin-left:-6400px;}
85%  {margin-left:-6800px;}
88,5%  {margin-left:-6800px;}
90%  {margin-left:-7200px;}
93,5%  {margin-left:-7200px;}
95%  {margin-left:-7600px;}
98,5%  {margin-left:-7600px;}
100%  {margin-left:-8000px;}
}

/* -o-    */
@-o-keyframes slide20{
0%   {margin-left:0px;}
3,5%   {margin-left:0px;}
5%  {margin-left:-400px;}
8,5%  {margin-left:-400px;}
10%  {margin-left:-800px;}
13,5%  {margin-left:-800px;}
15%  {margin-left:-1200px;}
18,5%  {margin-left:-1200px;}
20%  {margin-left:-1600px;}
23,5%  {margin-left:-1600px;}
25%  {margin-left:-2000px;}
28,5%  {margin-left:-2000px;}
30%  {margin-left:-2400px;}
33,5%  {margin-left:-2400px;}
35%  {margin-left:-2800px;}
38,5%  {margin-left:-2800px;}
40%  {margin-left:-3200px;}
43,5%  {margin-left:-3200px;}
45%  {margin-left:-3600px;}
48,5%  {margin-left:-3600px;}
50%  {margin-left:-4000px;}
53,5%  {margin-left:-4000px;}
55%  {margin-left:-4400px;}
58,5%  {margin-left:-4400px;}
60%  {margin-left:-4800px;}
63,5%  {margin-left:-4800px;}
65%  {margin-left:-5200px;}
68,5%  {margin-left:-5200px;}
70%  {margin-left:-5600px;}
73,5%  {margin-left:-5600px;}
75%  {margin-left:-6000px;}
78,5%  {margin-left:-6000px;}
80%  {margin-left:-6400px;}
83,5%  {margin-left:-6400px;}
85%  {margin-left:-6800px;}
88,5%  {margin-left:-6800px;}
90%  {margin-left:-7200px;}
93,5%  {margin-left:-7200px;}
95%  {margin-left:-7600px;}
98,5%  {margin-left:-7600px;}
100%  {margin-left:-8000px;}
}

@keyframes slide20{
0%   {margin-left:0px;}
3,5%   {margin-left:0px;}
5%  {margin-left:-400px;}
8,5%  {margin-left:-400px;}
10%  {margin-left:-800px;}
13,5%  {margin-left:-800px;}
15%  {margin-left:-1200px;}
18,5%  {margin-left:-1200px;}
20%  {margin-left:-1600px;}
23,5%  {margin-left:-1600px;}
25%  {margin-left:-2000px;}
28,5%  {margin-left:-2000px;}
30%  {margin-left:-2400px;}
33,5%  {margin-left:-2400px;}
35%  {margin-left:-2800px;}
38,5%  {margin-left:-2800px;}
40%  {margin-left:-3200px;}
43,5%  {margin-left:-3200px;}
45%  {margin-left:-3600px;}
48,5%  {margin-left:-3600px;}
50%  {margin-left:-4000px;}
53,5%  {margin-left:-4000px;}
55%  {margin-left:-4400px;}
58,5%  {margin-left:-4400px;}
60%  {margin-left:-4800px;}
63,5%  {margin-left:-4800px;}
65%  {margin-left:-5200px;}
68,5%  {margin-left:-5200px;}
70%  {margin-left:-5600px;}
73,5%  {margin-left:-5600px;}
75%  {margin-left:-6000px;}
78,5%  {margin-left:-6000px;}
80%  {margin-left:-6400px;}
83,5%  {margin-left:-6400px;}
85%  {margin-left:-6800px;}
88,5%  {margin-left:-6800px;}
90%  {margin-left:-7200px;}
93,5%  {margin-left:-7200px;}
95%  {margin-left:-7600px;}
98,5%  {margin-left:-7600px;}
100%  {margin-left:-8000px;}
}