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

#all {
-moz-animation:slide10 40s ease-in-out infinite;
-ms-animation:slide10 40s ease-in-out infinite;
-o-animation:slide10 40s ease-in-out infinite;
-webkit-animation:slide10 40s ease-in-out infinite;
animation:slide10 40s ease-in-out infinite;
background:#444;
height:450px;
width:6000px;
}

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

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

#all span {
display:block;
float:left;
width:600px;
}

#all span.ls img {
display:block;
width:600px;
}

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

96% {
margin-left:-3600px;
}

20%,66%,52%,9%,27% {
margin-left:-600px;
}

33%,53%,10%,17% {
margin-left:-300px;
}

86%,100%,72% {
margin-left:-3000px;
}

12%,7% {
margin-left:0;
}

32%,40%,92%,24%,47% {
margin-left:-1200px;
}

60%,67% {
margin-left:-1600px;
}

80%,51%,68%,87% {
margin-left:-2400px;
}

36%,48% {
margin-left:-1800px;
}

30%,37% {
margin-left:-900px;
}

50%,57% {
margin-left:-1500px;
}

70%,77% {
margin-left:-2100px;
}

90%,97% {
margin-left:-2700px;
}

@media only screen and max-width 34em{
#window {
box-shadow:0 0 15px 0 rgba(0,0,0,1);
height:255px;
margin:50px auto;
overflow:hidden;
position:relative;
width:300px;
}

#all {
-moz-animation:slide10 40s ease-in-out infinite;
-ms-animation:slide10 40s ease-in-out infinite;
-o-animation:slide10 40s ease-in-out infinite;
-webkit-animation:slide10 40s ease-in-out infinite;
animation:slide10 40s ease-in-out infinite;
background:#444;
height:225px;
width:3300px;
}

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

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

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

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

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

20% {
margin-left:0;
}

100% {
margin-left:-1200px;
}

33%,53% {
margin-left:-300px;
}

66%,86% {
margin-left:-600px;
}
}