html, body{
	margin: 0;
	color:red;
	font:16pt/16pt "Helvetica","Arial",sans-serif;
}
ul,li{
	margin:0;
	padding:0;
}
ul{
	max-width:100%;
	display:block;
	width:640px;
	margin:auto;
	position:relative;
}
li{
	list-style:none;
	display:block;
	position:relative;
	max-width:100%;
}
li.file-sound{
	position:absolute;
	width:640px;
	z-index:1;
}
.file-sound:after{
	content:' ';
	display:block;
	position:absolute;
	width:100%;
	padding-top:75%;
	transition:all .2s;
	bottom:0;
}
.file-sound:before{
	content:' ';
	position:absolute;
	width:60px;
	height:60px;
    right: 10px;
    bottom: 5px;
	display:block;
	cursor:pointer;
	background-image:url(../play.svg);
	background-size:cover;
}
.file-sound:hover:after{
	background:rgba(255,0,30,.5);
}
img{
	display:block;
	position:relative;
	max-width:100%;
	margin:auto;
}
.title{
	position:absolute;
	bottom:5%;
	right:0;
	left:0;
	margin:auto;
	height:1em;
	text-align:center;
}
.footer{
	
	position:relative;
	max-width:100%;
	width:640px;
	margin:auto;
	text-align:center;
	font-size:10pt;
	padding:200px 20px 50px 20px;
	color:rgba(255,0,0,.5);
	box-sizing:border-box;
}
.footer a{
	color:red;
}