<style>

* {
	box-sizing: border-box;
}
body, figure { 
	margin: 0;
	background-color: #000;
	font-weight: 100;
}
.container {
	text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 900px;
}
#slidy-container {
	overflow: hidden;
}
#slidy {
	text-align: center;
	margin: 0;
	font-size: 0;
	position: relative;
	width: 1300%;
}
#slidy figure {
	float: left;
	margin: 0;
	position: relative;
	display: inline-block;
	width: 7.6923076923076925%;
	height: auto;
}
#slidy figure img {
	width: 95%;
	border: 3px solid #cc0202;
}
#slidy figure figcaption {
	position: absolute;
	width: 100%;
	text-align: left;
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	bottom: -54px;
	font-size: 24px;
	padding: 3px 20px 7px 40px;
	transition: .5s;
}
#slidy:hover figure figcaption {
	opacity: 1;
	bottom: 0px;
}

@keyframes slidy {
6.25% { left: -0%; }
8.333333333333332% { left: -100%; }
14.583333333333332% { left: -100%; }
16.666666666666664% { left: -200%; }
22.916666666666664% { left: -200%; }
24.999999999999996% { left: -300%; }
31.249999999999996% { left: -300%; }
33.33333333333333% { left: -400%; }
39.58333333333333% { left: -400%; }
41.666666666666664% { left: -500%; }
47.916666666666664% { left: -500%; }
50% { left: -600%; }
56.25% { left: -600%; }
58.333333333333336% { left: -700%; }
64.58333333333334% { left: -700%; }
66.66666666666667% { left: -800%; }
72.91666666666667% { left: -800%; }
75% { left: -900%; }
81.25% { left: -900%; }
83.33333333333333% { left: -1000%; }
89.58333333333333% { left: -1000%; }
91.66666666666666% { left: -1100%; }
97.91666666666666% { left: -1100%; }
99.99999999999999% { left: -1200%; }
}
#slidy { left: 0%; transform: translate3d(0,0,0); animation: 48s slidy infinite; }

@media screen and (max-width: 600px) {
	#slidy figure figcaption {
		font-size: 14px;
		padding: 3px 15px 3px 15px; 
	}
}
</style>
