h1 {
color:#000;
font-family:sans-serif;
font-size:26pt;
text-shadow:none;
}

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

#all {
-moz-animation:slide4 12s ease-in-out infinite;
-ms-animation:slide4 12s ease-in-out infinite;
-o-animation:slide4 12s ease-in-out infinite;
-webkit-animation:slide4 12s ease-in-out infinite;
animation:slide4 12s ease-in-out infinite;
background:#444;
height:320px;
width:2000px;
}

#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:15px;
top:15px;
opacity:.6;
color:#bbb;
}

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

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

}

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

72%{
margin-left:-400px;
}

47% {
margin-left:-800px;
}

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

97% {
margin-left:-1600px;
}




@media only screen and max-width 34em{
h1 {
font-family:sans-serif;
font-size:30pt;
text-shadow:10px 11px 12px red;
}

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

#all {
-moz-animation:slide4 12s ease-in-out infinite;
-ms-animation:slide4 12s ease-in-out infinite;
-o-animation:slide4 12s ease-in-out infinite;
-webkit-animation:slide4 12s ease-in-out infinite;
animation:slide4 12s ease-in-out infinite;
background:#444;
height:400px;
width:2818px;
}

#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:400px;
width:234px;
}

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

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

20% {
margin-left:0;
}

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

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

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