#slideshow figure#imagestrip {width: 500px; height: 400px; 
background: #fff; box-sizing: border-box;

  background-image: url(../imgs/slide-1.jpg), url(../imgs/slide-2.jpg), url(../imgs/slide-3.jpg), url(../imgs/slide-4.jpg), url(../imgs/slide-1.jpg); 
  background-repeat: no-repeat; 
background-position-x: 0, 500px, 1000px, 1500px, 2000px; 
-webkit-animation: slider 20s infinite; 
animation: slider 20s infinite;

} 
div#slideshow:hover figure#imagestrip { animation-play-state:paused; opacity: 1; } div#slideshow {
	position:relative; 
}
div#slideshow #imagestrip img {
	max-width: 100%; 
}
div#slideshow figure {
	margin:0;
}
div#slideshow:hover:before { 
content: "||"; font-size: 200px; font-weight:bold;
color: rgba(255,255,255, .4); 
position: absolute;
z-index:10; 
left: 200px; top: 0px; 
} 
@-o-keyframes slider { 
   0%  { background-position-x: 0, 500px, 1000px, 1500px, 2000px; } 
20% { background-position-x: 0, 500px, 1000px, 1500px, 2000px; } 
25% { background-position-x: -500px, 0px, 500px, 1000px, 1500px, 2000px; } 
45% { background-position-x: -500px, 0px, 500px, 1000px, 1500px, 2000px; } 
50% { background-position-x: -1000px, -500px, 0px, 500px, 1000px, 1500px; } 
70% { background-position-x: -1000px, -500px, 0px, 500px, 1000px, 1500px; } 
75% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; }    
95% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; } 
100% { background-position-x: -2000px, -1500px, -1000px, -500px, 0px, 500px; } 
} 
@-webkit-keyframes slider { 
   0%  { background-position-x: 0, 500px, 1000px, 1500px, 2000px; } 
20% { background-position-x: 0, 500px, 1000px, 1500px, 2000px; } 
25% { background-position-x: -500px, 0px, 500px, 1000px, 1500px, 2000px; } 
45% { background-position-x: -500px, 0px, 500px, 1000px, 1500px, 2000px; } 
50% { background-position-x: -1000px, -500px, 0px, 500px, 1000px, 1500px; } 
70% { background-position-x: -1000px, -500px, 0px, 500px, 1000px, 1500px; } 
75% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; }    
95% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; } 
100% { background-position-x: -2000px, -1500px, -1000px, -500px, 0px, 500px; } 
} 
@keyframes slider { 
   0%  { background-position-x: 0, 500px, 1000px, 1500px, 2000px; } 
20% { background-position-x: 0, 500px, 1000px, 1500px, 2000px; } 
25% { background-position-x: -500px, 0px, 500px, 1000px, 1500px, 2000px; } 
45% { background-position-x: -500px, 0px, 500px, 1000px, 1500px, 2000px; } 
50% { background-position-x: -1000px, -500px, 0px, 500px, 1000px, 1500px; } 
70% { background-position-x: -1000px, -500px, 0px, 500px, 1000px, 1500px; } 
75% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; }    
95% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; } 
100% { background-position-x: -2000px, -1500px, -1000px, -500px, 0px, 500px; } 
}