#appPlayer {
	min-width:240px;
	min-height:277px;
	width:100%;
	height:277px;
	margin:0 auto;
	background:transparent;
	border-top:0px solid #000;
	margin-top:20px;
}
#mcpAudioPlayer  {
	position: relative;
	min-width:240px;
	min-width:240px;
	min-height:300px;
	width:100%;
	height:307px;
	border-radius: 15px 15px 0 0;
	color: #2c3e50;
	opacity:1;
	background:transparent;
}
#mcpAudioPlayer.dark {
	background: rgb(12,13,13);
	background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(57,57,57,0.4) 100%);
	background: none;
}
#mcpAudioPlayer.blue {
	background: rgb(33,150,243);
	background: linear-gradient(22deg, rgba(33,150,243,1) 0%, rgba(86,185,208,1) 100%);
}
#mcpAudioPlayer.green {
	background: linear-gradient(22deg, #66bb6a 0%, #43a047 100%);
}
#mcpAudioPlayer.purple {
	background: linear-gradient(22deg, #ab47bc 0%, #8e24aa 100%);
}
#mcpAudioPlayer.orange {
	background: linear-gradient(22deg, #ffa726, #fb8c00);
}
#mcpAudioPlayer.red {
	background: linear-gradient(22deg, #ef5350, #e53935);
}
section#mainPlayer {
	position:absolute;
	min-width: 240px;
	min-height:250px;
	width:100%;
	height:auto;
	top:0;
	left:0;
}
#mainPlayer .controls {
	position: absolute;
	bottom:-47px;
	left:50%;
	margin-left:-125px;
	width:250px;
	min-height:90px;
	height:90px;
	padding-top:18px;
	text-align:center;
    background: url('/wp-content/uploads/NewRadio/playbutton_backg.svg') no-repeat;	
    background-position-x: center;	
    background-position-y: bottom;	
    background-size: 110%;	
	border-radius:0 0 0px 0px;
}
.cover-background {
	min-width: 240px;
	min-height:280px;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 45%;
	transition: opacity 1s;
	opacity: 0.6!important;
	filter: alpha(opacity=60); /* IE 5-7 */
	-webkit-opacity: 0.6;
	-moz-opacity: 0.6;
	filter: blur(25px);

}
.cover-mask  {
	min-width: 100%;
	min-height: 100%;
	_position: absolute;
	background: radial-gradient(rgba(0, 0, 0, .1) 10%, #000 150%);
	z-index: 2;
	border-radius: 5px;
}
.mid-section  {
	display: none;
	min-width: 240px;
	min-height: 250px;
	width:100%;
	height: 250px;
	display:none;
}
.mid {
	display: block;
	_position: absolute;
	width: 100%;
	height:200px;
	margin-top:10px;
	_top: 40%;
	_transform: translate(0, -40%);
	_vertical-align: middle;
}
.coverart {
	display: none;
	text-align: center;
	width:100%;
	height: 100px;
	margin-top:0px;
}
.coverart img {
	border: solid 1px #FFFFFF25;
	width: auto;
	height: 90px;
	border-radius: 4px;
	transition: opacity 1s;
	opacity: 0;
	display:none;
}
.playback {
	flex-grow: 0;
	flex-basis: 64px;
	background: none;
	border: none;
}
.playback svg {
	transition: color 0.25s ease;
	color: #FFFFFF;
}
.playback svg :hover{
	color: #ececec;
	cursor: pointer;
}

@keyframes loading {
    0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}
.playback svg[data-icon=stop-circle]{
	animation: loading 3s linear infinite;
	border:7px solid #2aff00;
	border-radius:50%;
}


.volume-icon {
	display:none;
	flex-grow: 0;
	flex-basis: 50px;
	padding: 14px 0 0 5px;
	color: #FFFFFF;
}
.volume-icon svg :hover{
	color: #ececec;
	cursor: pointer;
}
.now-playing {
	color: #FFFFFF;
	text-shadow: 0 0 10px #000
}
.now-playing.small-player {
	font-size: 16px;
	padding: 20px 15px 0 10px;
	max-height: 16px;
	overflow: hidden;
}
.now-playing.large-player {
	font-size: 18px;
	line-height:1.2;
	text-align: center;
	max-height: 50px;
	overflow: hidden;
	display:none;
}
.listen-links {
	display: none;
}
#mainPlayer.showListenLinks .listen-links {
	text-align: right;
}
.listen-links > div {
	display: inline-block;
	display: none;
	padding: 15px;
	background: rgba(38, 50, 56, 0.5);
	border-radius: 15px;
}
.listen-links a {
	display: inline-block;
	display: none;
}
.listen-links a img {
	width: 24px;
	margin: 5px 5px 0 0;
	border-bottom: solid 2px transparent
}
.listen-links a:hover img {
	border-bottom: solid 2px #FFF;
}
.status-bar {
	display: none;
	background: rgba(38, 50, 56, 0.5);
	color: #FFF;
	padding: 10px 15px;
	border-radius: 5px;
}
.status-bar .left {
	flex-grow: 10;
	text-align: left;
}
.status-bar .station-name {
	line-height: 1.5;
}
.status-bar .listeners {
	font-size: 75%;
}
.status-bar .mount {
	display: flex;
	flex-shrink: 1;
	/*flex-basis: 30px;*/
	text-align: right;
}
.status-bar .mount.showMountpoint {
	flex-basis: 125px;
}
.status-bar .mount select {
	flex-grow: 1;
	min-width: 125px;
	padding: 5px;
	background: transparent;
	color: #FFF;
	height: 100%;
	border: solid 1px #FFF;
}
.status-bar .mount select :hover{
	cursor: pointer;
	background: #00000038;
}
.status-bar .mount select option {
	color: #000;
}
.track-history {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	background:#26323894;
	color: #FFF;
	padding: 10px 15px;
}
.settings {
	display: flex;
	flex-basis: 30px;
	flex-grow:0;
	flex-shrink:0;
	margin: 5px 0 0 10px;
}
.settings a {
	color: #FFF;
}
.settings a :hover{
	color: #c3ccce;
}

@keyframes fa-blink-4ea60077 {
0% { opacity: 1;
}
25% { opacity: 0.25;
}
50% { opacity: 0.5;
}
75% { opacity: 0.75;
}
100% { opacity: 0;
}
}
.fa-blink  {
	-webkit-animation: fa-blink-4ea60077 .75s linear infinite;
	-moz-animation: fa-blink-4ea60077 .75s linear infinite;
	-ms-animation: fa-blink-4ea60077 .75s linear infinite;
	-o-animation: fa-blink-4ea60077 .75s linear infinite;
	animation: fa-blink-4ea60077 .75s linear infinite;
}

/*
 * Small Player
 */
@media only screen and (min-height: 145px) {
	.status-bar {
			display: flex;
			display: none;
	}
	.now-playing-small-abc {
			display: flex;
			padding: 20px 0 0 0;
	}
	#mainPlayer .controls {
			/*
			position: absolute;
			bottom:0px;
			transform: none;
			*/
	}
}

/*
 * Medium Size
 */
@media only screen and (min-height: 180px) {
	/*
	 * Enable Mid Section now-playing if displayListen links are on
	 */
	.mid-section {
			display: block;
	}
	.now-playing.small-player {
			display: none;
	}
	.listen-links  {
			display: block;
			display: none;
			flex-grow: 2;
	}
}

/*
 * Large Size
 */
@media only screen and (min-height: 300px) {
	.mid-section {
			min-width: 240px;
			min-height: 250px;
	}
	.coverart  {
			display: block;
			display: none;
			margin-bottom: 8px;
	}
	.status-bar .mount.showMountpoint  {
			flex-shrink: 2;
			flex-basis: 200px;
	}
}
/*
 * Larger Size
 */
@media only screen and (min-height: 350px) {
	.coverart {
			height: 145px;
	}
	.coverart img  {
			height: 145px;
			margin-bottom: 15px;
	}
}