.audio-view.visible {
	display:flex;
}

.audio-view {
	align-items: center;
	justify-content: center;
	font-weight: 300;
	font-style: normal;
}

.audio-view .playback-wrapper {
	width: 350px;
	display:flex;
	flex-flow: column;
	position: relative;	
	opacity:0;

	-webkit-animation-name: music;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
}

.audio-view .playback-wrapper .fade {	
	width: 100%;
	height: 12%;
	bottom: 0em;
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 100%);
	z-index: 2;
}

.audio-view .content-image-wrapper {
	background-position: center center;
	background-size:cover;
	background-image:url('../img/default-audio-art.webp');
	position:relative;
	width:350px;
	height:350px;
}

.audio-view .content-image {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	background-position: center center;
	background-size:cover;
}

.audio-view .title {
	font-size: 1.5em;
	text-align: center;
	line-height: 1.0em;
	width: 86%;
	position: relative;
	left: 7%;
	margin-top: 1.3em;
}

.audio-view .subtitle {
	font-size:.95em;
	margin-top: .6em;
	font-style: italic;
	text-align: center;
	line-height: 1em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	height: 1.2em;
}

.audio-view .playback-controls {
	width:100%;
	position:relative;
	margin-top: -.2em;
	z-index: 3;
}

.audio-view .progress-bar {
	width:100%;
	background-color: #333;
	height: 0.4em;
}

.audio-view .progress-bar .progress {
	background-color: #ef6c00;
	height: 0.4em;
}

.audio-view .playback-controls .progress-text {
	position:absolute;
	top: 1em;
	left: 0.2em;
	font-size: .9em;
}

.audio-view .playback-controls .duration-text {
	position:absolute;
	top: 1em;
	right: .2em;
	font-size: .9em;
}

.audio-view .pause-overlay{
	opacity: 0;	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
	background-size: cover;
	background-image:url("../img/paused-overlay.webp");	
	z-index: 2;
}

.audio-view .pause-overlay.visible {
	opacity: 1;
}


/* Splash screen animation */
@-webkit-keyframes music {	    
	0%	 	{ opacity: 0; top:0em; right: 0em;}
    1%   	{ opacity: 1; top:0em; right: 0em;}

    24%	 	{ opacity: 1; top:0em; right: 0em;}
    25%   	{ opacity: 0; top:0em; right: 0em;}
    26%	 	{ opacity: 0; top:5em; right: 24em;}
    27%   	{ opacity: 1; top:5em; right: 24em;}
	
	40%   	{ opacity: 1; top:5em; right: 24em;}
	41%   	{ opacity: 0; top:5em; right: 24em;}
	42%	 	{ opacity: 0; top:-5em; right: -24em;}
	43%	 	{ opacity: 1; top:-5em; right: -24em;}

	59%  	{ opacity: 1; top:-5em; right: -24em;}
	60%  	{ opacity: 0; top:-5em; right: -24em;}
	61%  	{ opacity: 0; top:5em; right: -24em;}
	62%  	{ opacity: 1; top:5em; right: -24em;}

	73%  	{ opacity: 1; top:5em; right: -24em;}
	74%  	{ opacity: 0; top:5em; right: -24em;}
	75%  	{ opacity: 0; top:-5em; right: 24em;}
	76%  	{ opacity: 1; top:-5em; right: 24em;}

	99%  	{ opacity: 1; top:-5em; right: 24em;}
	100%  	{ opacity: 0; top:-5em; right: 24em;}
}