* {
	box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);

@import url(http://weloveiconfonts.com/api/?family=zocial);

[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

.player audio#audio_source {
    display: none;
}

.player {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: 2rem 2rem 2rem;
    background: #f4f4f4;	
}

.player:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	top: 0;
	left: 0;
}

.no-cssfilters .player:before {
	background: rgba(0,0,0,.75);
}

.no-cssfilters .player:after {
	content: "";
	position: absolute;
  width: 105%;
	height: 105%;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	top: -10px;
	left: -10px;
	background: url(http://ecx.images-amazon.com/images/I/91HyHkWzyeL._SL1500_.jpg) center center;
	background-size: cover;
	z-index: -2;
}

.cssfilters .player:after {
	content: "";
	position: absolute;
  width: 105%;
	height: 105%;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	top: -10px;
	left: -10px;
	-webkit-filter: blur(10px);
	filter: blur(10px);
	background: url(http://ecx.images-amazon.com/images/I/91HyHkWzyeL._SL1500_.jpg) center center;
	background-size: cover;
	z-index: -2;
}

.station-name {
	background: rgba(0,0,0,.6);
	padding: 1rem 2rem;
	margin: -2rem -2rem 2rem;
}

.album-art {
	float: left;
	margin-top: -20px;
	margin: -20px 20px 0 0;
}

.album-art img {
	width: 80px;
	height: 80px;
	border-radius: 10px;
}

.stream-control {
	width: 40px;
	height: 40px;
	border: 2px solid #000;
	border-radius: 50%;
	line-height: 36px;
	text-align: center;
	left: 0;
	margin-right: 1.5rem;
	float: left;
	position: relative;
	cursor: pointer;
	color: #000;
}

.fa-play {
	position: relative;
	left: 2px;
}

.stream-control:hover {
	background: #fff;
}

.stream-control:hover .control-icon {
	color: rgba(0,0,0,.8);
}

.song {
	font-size: 14px;
	margin-top: -5px;
	font-weight: 700;
	color: #444;
}

.artist {
	font-size: .875rem;
	margin-top: -5px;
	font-weight: 300;
	color: #444;	
}

.song-info {
	float: left;
	margin-top: 0.125rem;
}

.controls {
	clear: both;
	background: rgba(0,0,0,.6);
	border-radius: 10px;
	padding: 10px;
	position: relative;
	top: 3px;
}

.icon {
	padding: 10px;
	font-weight: 300;
	cursor: pointer;
	color: rgba(255,255,255,.7);
	position: relative;
}

.tooltip {
	display: none;
	position: absolute;
	background: #000;
	padding: 8px 5px;
	border-radius: 5px;
	bottom: -38px;
	left: 50%;
	margin-left: -40px;
	width: 80px;
	text-align: center;
	font-family: "Open Sans", Arial, sans-seirf;
	font-size: .75rem;
	font-weight: 700;
	color: rgba(255,255,255,.7);
}

.tooltip:before {
	content: "";
	position: absolute;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #000;
	top: -5px;
	left: 50%;
	margin-left: -5px;
}

.icon:hover {
	background: rgba(255,255,255,.1);
	border-radius: 50%;
	color: #fff;
}

.icon:hover .tooltip {
	display: block;
}

.song-controls {
	float: left;
}

.player-controls {
	float: right;
}

.stream-time {
	float: left;
	padding: 10px;
	line-height: 1;
}

.volume {
	float: left;
}

.volume:hover {
	background: none;
	color: rgba(255,255,255,.7);
	cursor: default;
}

.volume-control {
	height: 6px;
	width: 90px;
	background: rgba(255,255,255,.3);
	border-radius: 10px;
	position: relative;
	float: left;
	margin: 14px 10px 10px 0;
}

.volume-control:after {
	content: "";
	height: 6px;
	width: 60px;
	background: #75A310;
	position: absolute;
	border-radius: 10px;
}

.last-played-open {
	float: left;
}

.last-played {
	display: none;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #333;
	padding: 1rem;
	border-radius: 3px;
}

.previous-song:last-child {
	margin-bottom: 0;
}

.last-played .close {
	position: fixed;
	margin: -1rem 0 0 640px;
}

.overlay .close {
	position: absolute;
	top: 0;
	right: 10px;
}

.close {
	padding: 10px 12px;
	background: #733426;
	background: rgba(227,79,45,.7);
	cursor: pointer;
}

.close:hover {
	background: #662e22;
}

.last-played .album-art {
	float: left;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	margin-top: 0px;
}

.previous-song {
	clear: both;
	background: rgba(0,0,0,.7);
	overflow: hidden;
	padding: 1rem;
	margin: 0 0 .5rem;
	border-radius: 3px;
}

.last-played .song-info {
	margin: 2px 0 0 .5rem;
}

.last-played .song {
	font-size: 1.25rem;
}

.last-played .artist {
	margin-top: -2px;
	display: block;
	color: rgba(255,255,255,.4);
	font-size: .75rem;
}

.banner {
	text-align: center;
	margin-top: 2rem;
}

.banner img {
	max-width: 100%;
}

.player-content {
	float: left;
	position: relative;
	width: 100%;
}

.banner-right {
	float: left;
	margin-bottom: .875rem;
}

.banner-right img {
	max-width: 100%;
}

.overlay {
	display: none;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,.8);
	padding: 1rem;
	text-align: center;
	z-index: 1000;
}

.overlay-content {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: column;
	flex-direction: column;
	height: 100%;
}

.no-flexbox .overlay-content {
	margin-top: 191px;
}

.twitter, .facebook {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	margin: .5rem;
}

.twitter {
	background: #55acee;
}

.facebook {
	background: #3b579d;
}

.twitter:hover {
	background: #478fc5;
}

.facebook:hover {
	background: #2c4074;
}

.share-overlay h2 {
	margin-bottom: .5rem;
	overflow: hidden;
}

.side-content {
	width: 31.48%;
	padding-left: 2rem;
	float: left;
}

.station-socials {
	text-align: center;
	margin-bottom: .875rem;
}

.powered-by {
	font-size: .875rem;
	color: rgba(255,255,255,.6);
	display: block;
	text-align: center;
}

.powered-by a {
	color: rgba(255,255,255,.6);
	text-decoration: none;
}

.powered-by a:hover {
  color: #fff;
}

.amazon, .itunes {
	width: 40px;
	height: 40px;
	line-height: 36px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	margin: .5rem;
	border: 2px solid #fff;
	text-decoration: none;
}

.amazon i, .itunes i {
	font-style: normal;
}

.amazon:hover, .itunes:hover {
	background: #fff;
	color: rgba(0,0,0,.8);
}

.stream-time {
	color: rgba(255,255,255,.7);
	font-size: .875rem;
	padding-right: 5px;
}

.cf:before,
.cf:after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}