#slideshow { position:relative; overflow:hidden; max-width:64em; padding-bottom:40% } /* (img px height / img px width x 100) = padding-bottom % */
#slideshow div { position:absolute; z-index:2; width:105%; height:105%; top:-5%; left:-5%; background-position:top left; 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:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left }
#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:top left; -ms-transform-origin:top left; transform-origin:top left }
#slideshow div:nth-of-type(4n+1) { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom 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 }
#slideshow div:nth-of-type(1) { background-image:url(../../images/1.png) }
#slideshow div:nth-of-type(3) { background-image:url(../../images/3.png) }
#slideshow div:nth-of-type(2) { background-image:url(../../images/2.png) }
#slideshow div:nth-of-type(4) { background-image:url(../../images/4.png) }

/* 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 { text-shadow: #d3d3d3 1px 0 10px; background:rgba(0,0,0,0.75); color:#fff; -webkit-animation:caption 10s 2s both; animation:caption 10s 2s 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:1em }
	
}