#genrefilter {
height: 25px;
	font-size: 16px;
	color: #FFFFFF;
	background-color: #333333;
	border: none;
	max-width: 170px;
	float: left;}
div.recordings {width: 100%; margin: 0 auto; padding: 0; clear: both;}

div.album {
	position: relative;
	height: 0px; padding-bottom: 33%; width: 33%;
	min-width: 100px;
	min-height: 100px;
	color: #ffffff;
	margin: 0px;
	background-color: #000000;
	display: inline-block;
	text-align: center;
	border: solid 2px #000000;
	box-sizing: border-box;
	float: left;
	}

img.cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 110;
	width: 100%;
	height: 100%;
	opacity: 1;
	animation: fadeCoverIn .3s 1;
	border:0px;
	}

.album div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 100;
	text-align: center;
	cursor: pointer;
	background-size: 25% 25%;
	background-repeat: no-repeat;
	background-position: center;
	/* background-image:url('/deepend/images/play.png'); */
	background-image:url('/images/play.png');
	opacity: 0;
	animation: fadeTextOut 1s 1;
}

.album:hover div {
	z-index: 120;
	opacity: 1;
	animation: fadeTextIn 1s 1;
}

.album:hover img.cover {
	opacity: .25;
	animation: fadeCoverOut .3s 1;
}

@-webkit-keyframes fadeCoverOut {
  0%   { opacity: 1; }
  100% { opacity: .25; }
}
@-moz-keyframes fadeCoverOut {
  0%   { opacity: 1; }
  100% { opacity: .25; }
}
@-o-keyframes fadeCoverOut {
  0%   { opacity: 1; }
  100% { opacity: .25; }
}
@keyframes fadeCoverOut {
  0%   { opacity: 1; }
  100% { opacity: .25; }
}

@-webkit-keyframes fadeCoverIn {
  0%   { opacity: .25; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeCoverIn {
  0%   { opacity: .25; }
  100% { opacity: 1; }
}
@-o-keyframes fadeCoverIn {
  0%   { opacity: .25; }
  100% { opacity: 1; }
}
@keyframes fadeCoverIn {
  0%   { opacity: .25; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeTextIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeTextIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeTextIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeTextIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeTextOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fadeTextOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fadeTextOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeTextOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.album h1 {font-size: 11px; line-height: 100%; margin: 6px 0 0 0; padding: 0; letter-spacing: 0;}
.album h2 {font-size: 11px; line-height: 100%; margin: 0; padding: 0; letter-spacing: 0;}
.album p {font-size: 9px; line-height: 100%; position: absolute; top: 80%; width: 90%;}

.album a:link {color: #ffffff; text-decoration: none; width: 100%; height: 100%; display: block;}
.album a:visited  {color: #ffffff;}
.album a:hover  {color: #ffffff;}
.album a:active  {color: #33ccff;}



@media (min-width: 420px) {
}

@media (min-width: 600px) {
div.album {height: 0px; padding-bottom: 25%; width: 25%;}
.album h1 {font-size: 11px; margin-top: 5px;}
.album h2 {font-size: 11px;}
.album p {font-size: 9px; line-height: 100%; position: absolute; top: 70%;}
.album div {background-size: 30% 30%;}
}

@media (min-width: 745px) {
div.album {height: 0px; padding-bottom: 20%; width: 20%;}
.album h1 {font-size: 15px; margin-top: 10px;}
.album h2 {font-size: 15px;}
.album p {font-size: 12px; line-height: 100%; position: absolute; top: 70%;}
.album div {background-size: 35% 35%;}
}
@media (min-width: 1000px) {
div.album {height: 0px; padding-bottom: 20%; width: 20%;}
.album h1 {font-size: 17px; margin-top: 20px;}
.album h2 {font-size: 17px;}
.album p {font-size: 12px; line-height: 100%; position: absolute; top: 70%;}
.album div {background-size: 35% 35%;}
}