.waveform-player.container {
	min-height: 400px;
	background-size: cover;
	border-top: 1px solid #ee4077;
	border-bottom: 1px solid #ee4077;
	margin-bottom: 20px;
}

.waveform-player.container a {
	color: inherit;
	text-decoration: none;
}

.waveform-player.container .hit {
  display: block;
  position: absolute;
  width: 225px;
  height: 50px;
}

.waveform-player.header.container {
	background-size: auto;
	background-repeat: no-repeat;
	background-position: 0 0;
        border-top: none;
        border-bottom: none;
}

.waveform-player.container.small {
	min-height: 225px;
	width: 300px;
	float: right;
}

.waveform-player.container.smaller {
        min-height: 225px;
        width: 250px;
	margin-bottom: 0;
}

.waveform-player .letterings {
	margin: 5% 0 0 18%;
	padding: 2%;
}

.waveform-player .media-title, .waveform-player .media-author, .waveform-player .time-display {
	font-family: Verdana, Arial, Helvetica;
	color: white;
	margin: 0;
	margin-bottom: 0;
	padding: 0;
}


.waveform-player.header .media-title, .waveform-player.header .media-author, .waveform-player.header .time-display {
	font-family: inherit;
	color: #000;
	text-shadow: none;
}

.waveform-player .media-title {
	text-shadow: 1px 1px #000;
	font-size: 16px;
}

.waveform-player.container.smaller .media-title {
        font-size: 14px;
}

.waveform-player .media-author {
	text-shadow: 1px 1px #000;
	font-size: 12px;
}

.waveform-player .media-title span, .waveform-player .media-author span {
	background: rgba(0, 0, 0, 0.24);
}

.waveform-player.header .media-title span, .waveform-player.header .media-author span {
	background: transparent;
}

.waveform-player .play-pause {
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 4%;
	cursor: pointer;
	background: transparent url(play-pause.png) no-repeat;
}

.waveform-player .play-pause.playing {
	background-position: 100%;
}

.waveform-player .progress-bar {
	position: absolute;
	margin: 150px auto 0 auto;
	opacity: 0.5;
}

.waveform-player .progress-bar.overlay {
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0.66;
}

.waveform-player .time-display {
	position: absolute;
	font-weight: normal;
	opacity: 0.8;
	text-align: right;
	text-shadow: 1px 1px #000;
	font-size: 13px;
}

.waveform-player .shade {
	position: absolute;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
}

.waveform-player.header .shade {
	display: none;
}

.waveform-player.container.small .letterings {
        margin: 30px 0 0 100px;
}

.waveform-player.container.small .progress-bar {
        margin: 40px auto 0 auto;
}

.waveform-player.container.small .play-pause {
        margin: 40px 20px;
}

.waveform-player.container.header .letterings {
        margin: 80px 0 0 100px;
	min-height: 70px;
}

.waveform-player.container.header .play-pause {
       margin: 90px 20px;
}

.waveform-player.container.header .progress-bar {
        margin: 5px auto 0 auto;
}

.waveform-player.container .volume-control {
	position: absolute;
	background: transparent url(./volume.svg) no-repeat;
	height: 16px;
	width: 80px;
	padding-left: 20px;
}

.waveform-player.container .volume-control .volume-bar {
	background: linear-gradient(to right, transparent, #e0e0e0) no-repeat;
	height: 12px;
	margin: 2px 0;
	width: 80px;
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	opacity: 0;
	transition: opacity linear 1s;
}

.waveform-player.container .volume-control:hover .volume-bar {
	opacity: 1;
}

body.mobile .waveform-player.container .volume-control {
	display: none;
}