/* PLAYLISTS */

.playlist-item {
	width: 300px;
	height: 300px;
	padding: 10px;
	position: relative;
	overflow: hidden;
}

.playlist-item .playlist-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.playlist-item .playlist-content p {
	font-size: .8rem;
	line-height: 1.2em;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.playlist-item .playlist-box {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.playlist-item .playlist-content-container {
	position: absolute;
}

.playlist-item .playlist-content {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* radio */

.playlist-item.frame-radio .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-radio.svg");
}

.playlist-item.frame-radio .playlist-content-container {
	top: 48%;
	bottom: 6%;
	left: 10%;
	right: 10%;
	width: 80%;
	height: 46%;
}

/* 8 track */

.playlist-item.frame-8track .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-8track.svg");
}

.playlist-item.frame-8track .playlist-content-container {
	top: 23%;
	bottom: 17%;
	left: 26%;
	right: 26%;
	width: 48%;
	height: 60%;
}

/* record */

.playlist-item.frame-vinyl .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-vinyl.svg");
}

.playlist-item.frame-vinyl .playlist-content-container {
	top: 21%;
	bottom: 19%;
	left: 15%;
	right: 35%;
	width: 50%;
	height: 60%;
}

/* cassette */

.playlist-item.frame-cassette .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-cassette.svg");
}

.playlist-item.frame-cassette .playlist-content-container {
	top: 23%;
	bottom: 34%;
	left: 10%;
	right: 10%;
	width: 80%;
	height: 43%;
}

/* cd */

.playlist-item.frame-cd .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-cd.svg");
}

.playlist-item.frame-cd .playlist-content-container {
	top: 23%;
	bottom: 23%;
	left: 29%;
	right: 16%;
	width: 55%;
	height: 54%;
}

/* ipod */

.playlist-item.frame-ipod .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-ipod.svg");
}

.playlist-item.frame-ipod .playlist-content-container {
	top: 6%;
	bottom: 42%;
	left: 22%;
	right: 22%;
	width: 56%;
	height: 52%;
}

/* playlist */

.playlist-item.frame-playlist .playlist-box {
	background-image: url("/singthypraises/assets/svg/era-frames/frame-playlist.svg");
}

.playlist-item.frame-playlist .playlist-content-container {
	top: 10%;
	bottom: 34%;
	left: 22%;
	right: 23%;
	width: 55%;
	height: 56%;
}