/*
	PLAYER
*/

.audioplayer {
	color: #fff;
	position: relative;
	z-index: 1;
	background: #E7E9ED;
	padding: 6px;
	border-radius: 105px;
	height: 84px;
	box-sizing: border-box;
}

/* mini mode (fallback) */

.audioplayer-mini {
	width: 2.5em; /* 40 */
	margin: 0 auto;
}

/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

.audioplayer > div {
	position: absolute;
}


/* play/pause button */

.audioplayer-playpause {
	width: 72px; /* 40 */
	height: 72px;
	text-align: left;
	/*text-indent: -9999px;*/
	cursor: pointer;
	z-index: 2;
	top: 0;
	left: 0;
	background: #ff9b42;
	margin: 6px;
	border-radius: 100%;
}
.audioplayer-mini .audioplayer-playpause 	{
	width: 100%;
}
.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
	background-color: #222;
}
.audioplayer-playpause a {
	display: block;
}
.audioplayer-stopped .audioplayer-playpause a {
	position: relative;
	width: 100%;
	height: 100%;
}
.audioplayer-stopped .audioplayer-playpause a::after {
	content: url(/templates/wtw_u3default/images/svg/fsvg/play.svg);
	position: absolute;
	left: 6px;
	right: 0;
	top: 0;
	bottom: 0;
	height: 27.5px;
	width: 22.5px;
	margin: auto;
}
.audioplayer-playing .audioplayer-playpause a	{
	width: 100%;
	height: 100%;
	position: relative;
}
.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after {
	height: 22.5px;
	background-color: #fff;
	content: '';
	position: absolute;
	top: 0;
}
.audioplayer-playing .audioplayer-playpause a:before {
	width: 7.5px;
	left: 26px;
	top: 50%;
	transform: translateY(-50%);
}
.audioplayer-playing .audioplayer-playpause a:after {
	width: 8px;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
}


/* timers */

.audioplayer-time{
	display: none;
}
.audioplayer-time-current	{
	left: 2.5em; /* 40 */
}
.audioplayer-time-duration {
	border-right: 1px solid #555;
	border-right-color: rgba( 255, 255, 255, .1 );
	right: 2.5em; /* 40 */
}
.audioplayer-novolume .audioplayer-time-duration {
	border-right: 0;
	right: 0;
}


/* progress bar of loaded/played */

.audioplayer-bar {
	height: 6px;
	background-color: #717786;
	cursor: pointer;
	z-index: 1;
	top: 50%;
	right: 111px;
	left: 101px;
	transform: translateY(-50%);
}
.audioplayer-novolume .audioplayer-bar {
	right: 4.375em; /* 70 */
}
.audioplayer-bar div {
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/* volume button */

.audioplayer-volume {
	width: 36px; /* 40 */
	height: 36px;
	text-align: left;
	/*text-indent: -9999px;*/
	cursor: pointer;
	z-index: 2;
	top: 50%;
	right: 51px;
	transform: translateY(-50%);
}
.audioplayer-volume:hover,
.audioplayer-volume:focus{background-color: #c2c6cefc;border-radius: 0 0 10px 10px;}
.audioplayer-volume-button {
	width: 100%;
	height: 100%;
	position: relative;
}
	.audioplayer-volume-button a {
		width: 28px; /* 5 */
		height: 28px; /* 6 */
		/*background-color: #fff;*/
		display: block;
		position: relative;
		z-index: 1;
		top: 50%;
		transform: translateY(-50%);
		margin: auto;
	}
	.audioplayer-volume-button a::after {content: url(/templates/wtw_u3default/images/svg/fsvg/volume.svg);position: absolute;left: 0;}
	.audioplayer-muted .audioplayer-volume-button a::after {content: url(/templates/wtw_u3default/images/svg/fsvg/volumemuted.svg);}
/* volume dropdown */

.audioplayer-volume-adjust {
	height: 100px; /* 100 */
	cursor: default;
	position: absolute;
	left: 0;
	right: -1px;
	top: -9999px;
	background: #c3c7cf;
	border-radius: 18px 18px 0 0;
}
	.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
		opacity: 0;
	}
	.audioplayer-volume:hover .audioplayer-volume-adjust {
		top: auto;
		bottom: 100%;
	}
	.audioplayer-volume-adjust > div {
		width: 10px;
		height: 80%;
		background-color: #717786;
		cursor: pointer;
		position: relative;
		z-index: 1;
		margin: 30% auto 0;
	}
		.audioplayer-volume-adjust div div {
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: #007fd1;
		}
.audioplayer-novolume .audioplayer-volume	{
	display: none;
}


/* CSS3 decorations */


.audioplayer-bar-played {
	background: #F38F35;
	z-index: 2;
}
.audioplayer-volume-adjust div div {
	background: #F38F35;
}
.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div {
	border-radius: 34px;
}

@media (max-width: 580px) {
	.audioplayer {
    height: 70px;
	}
	.audioplayer-playpause {
		height: 58px;
		width: 58px;
	}
	.audioplayer-playing .audioplayer-playpause a:before {
		width: 6.5px;
		left: 20px;	
	}
	.audioplayer-playing .audioplayer-playpause a:after {
		width: 6.5px;
		right: 20px;
	}
}