<style>



#slideshow { 
	display:block; 
	background:#ebebeb; font-size:0.875em; 
	padding:1em 2em; 
	overflow-x:scroll; 
	white-space:nowrap 
}


/* slideshow - adapted from http://cssmojo.com/ken-burns-effect/ */
#slideshow { 
	position:relative; 
	overflow:hidden; 
	padding-bottom:40%; 
	margin-top: 20px;
} 
/* (img px height / img px width x 100) = padding-bottom % */

#slideshow div { 
	position:absolute; 
	z-index:2; 
	width:89%; 
	height:133%; 
	top:0%; 
	left:12%; 
	background-position:center; 
	background-repeat:no-repeat; 
	background-size:cover; 
	opacity:0;
	-webkit-transition:opacity 3s, -webkit-transform 8s; 
	-ms-transition:opacity 3s, -ms-transform 8s; 
	transition:opacity 3s, transform 8s; 
}

#slideshow div { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow div:nth-of-type(n+1) { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom right }
#slideshow div:nth-of-type(2n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow div:nth-of-type(3n+1) { -webkit-transform-origin:center right; -ms-transform-origin:center right; transform-origin:center right }
#slideshow div:nth-of-type(4n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow div:nth-of-type(5n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow .fx:first-child + span + div ~ div, #slideshow .fx1 { z-index:1 }
#slideshow .fx, #slideshow .fx1 { -webkit-transform:scale(1.35) translate(2.5%); -ms-transform:scale(1.35) translate(2.5%); transform:scale(1.35) translate(2.5%); opacity:1 }

/* captions */
#slideshow span { position:absolute; z-index:2; bottom:0; right:0; display:inline-block; padding:2% 3%; margin:5%; font-size:2.5vw; color:transparent }
#slideshow .fx:first-child + span + div ~ div + span, #slideshow .fx1 + span { z-index:1 }
#slideshow .fx + span, #slideshow .fx1 + span { background:rgba(0,0,0,0.75); color:#fff; -webkit-animation:caption 20s 1s both; animation:caption 20s 1s both }
@-webkit-keyframes caption {
  0% { opacity:0; -webkit-transform:translate3d(100%,0,0) }
  20% { opacity:1; -webkit-transform:none }
  70% { opacity:1; -webkit-transform:none }
  100% { opacity:0; -webkit-transform:translate3d(-500%,0,0) }
}
@keyframes caption {
  0% { opacity:0; transform:translate3d(100%,0,0) }
  20% { opacity:1; transform:none }
  70% { opacity:1; transform:none }
  100% { opacity:0; transform:translate3d(-500%,0,0) }
}

@media(min-width:42em) { /* bigger than 672px */

	#slideshow span { padding:1em 1.5em; margin:2em; font-size:1.5em }
	
}

</style>