@import "../css/foundation-icons/foundation-icons.css";
@import url(http://fonts.googleapis.com/css?family=Roboto:100&text=0123456789:);
@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300);/*!
 * Gear HTML5 Audio Player
 * http://flashedge.net
 *
 * Version: 0.86.2
 * Updated: 06/05/2014 12.43.03
 *
 * @license Copyright (c) 2014. All rights reserved.
 * @author: Emanuele Manco, hello@flashedge.net
 */
html, body {
	background-color: #111;
	-webkit-font-smoothing: antialiased;
 width:100%;
}
*, *:before, *:after {
	box-sizing: border-box
}
svg, canvas {
	top: 0!important;
	left: 0!important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
img {
	max-width: 100%;
	height: auto
}
body {
	/*color: #eaeaea;*/
	background-color: #111;
	font-family: 'Open Sans', sans-serif;
	
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	line-height: 1; height:100%; width:100%;
}
.stage {
	/*position: absolute;
	float: left;*/
	height: 100%;
	
	width: 100%;
	background-color: #111
}
.stage .wrap {
	height: inherit
}
.gearWrap {
	visibility: hidden;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
	z-index: 999999999999
}
.gearWrap .time {
	opacity: 0;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 2.9em;
	display: block;
	vertical-align: middle;
	text-align: center;
	letter-spacing: -1pt;
	font-family: 'Roboto', sans-serif;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
.gearWrap .play {
	opacity: 0;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 3.6em;
	display: block;
	vertical-align: middle;
	text-align: center;
	letter-spacing: -0.025em;
	cursor: pointer
}
.gearWrap .close {
	color: #fff;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 2em;
	margin: 1em;
	cursor: pointer
}
.gearWrap .close i {
	text-shadow: 0 0 6px #000
}
.gearWrap .shuffle {
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 2em;
	margin: 1em;
	cursor: pointer
}
.gearWrap .shuffle i {
	text-shadow: 0 0 6px #000
}
.gearWrap .playlist {
	color: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 2em;
	margin: 1em;
	cursor: pointer;
	display: none;
	opacity: .6
}
.gearWrap .playlist i {
	text-shadow: 0 0 6px #000
}
.gearWrap .currentGroup {
	bottom: 0;
	color: #fff;
	display: block;
	height: 100px;
	left: 0;
	line-height: 100px;
	margin: 2em;
	position: absolute;
	width: 100px
}
.gearWrap .currentGroup svg {
	float: left;
	position: absolute!important;
	left: 0;
	top: 0
}
.gearWrap .currentGroup .numbers {
	font-family: 'Roboto', sans-serif;
	left: 0;
	line-height: 2.7em;
	position: absolute;
	top: 23px
}
.gearWrap .currentGroup .numbers .current {
	display: block;
	float: left;
	font-size: 3.7em;
	letter-spacing: -3pt;
	line-height: 1.2em;
	margin-right: .1em;
	text-align: right;
	width: 1em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
.gearWrap .currentGroup .numbers .total {
	display: block;
	float: left;
	font-size: 1em;
	opacity: .5;
	text-align: left;
	vertical-align: top;
	width: 1em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
.gear {
	width: auto;
	height: auto;
	display: inline-table;
	float: left;
	position: absolute;
	left: 50%;
	top: 50%;
	vertical-align: middle;
	margin: 0;
	padding: 0
}
#gearEqualizer {
	display: block;
	height: 200px;
	left: 50%;
	overflow: visible;
	position: absolute;
	top: 50%;
	width: 200px
}
#gearBtn {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	background: rgba(255,255,255,0)
}
#_gPlayer {
	display: block;
	width: 100%;
	height: 100%;
	float: left;
	top: 0;
	left: 0;
	position: absolute
}
#_gOverlay {
	display: block;
	float: left;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #121310;
	background: #121310;
	background: -moz-radial-gradient(center, ellipse cover, #121310 0, #000 82%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #121310), color-stop(82%, #000));
	background: -webkit-radial-gradient(center, ellipse cover, #121310 0, #000 82%);
	background: -o-radial-gradient(center, ellipse cover, #121310 0, #000 82%);
	background: -ms-radial-gradient(center, ellipse cover, #121310 0, #000 82%);
	background: radial-gradient(ellipse at center, #121310 0, #000 82%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#121310', endColorstr='#000000', GradientType=1)
}
#_gAlbum {
	position: absolute;
	left: 0;
	top: 0;
	margin: 30px;
	width: 100%
}
#_gAlbum .cover {
	overflow: hidden;
	width: 60px;
	height: 60px;
	float: left
}
#_gAlbum .albumgroup {
	float: left;
	margin-left: 6px;
	text-align: left;
	max-width: 70%;
	width: inherit;
	overflow: hidden;
	text-transform: uppercase;
	color: #eaeaea
}
#_gAlbum .albumgroup .title {
	background-color: #191919;
	color: #fff;
	display: block;
	float: left;
	padding: 2px;
	clear: both;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	font-family: 'Maven Pro', sans-serif;
	font-size: 1.5em;
	letter-spacing: -1pt;
	font-weight: bold;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
#_gAlbum .albumgroup .author {
	float: left;
	display: block;
	background-color: #1b1b1b;
	color: #848484;
	padding: 2px;
	clear: both;
	margin-top: 1px;
	text-align: left;
	text-transform: uppercase;
	overflow: hidden;
	white-space: nowrap;
	font-family: 'Open Sans', sans-serif;
	font-size: .85em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
.gearMini {
	position: fixed;
	bottom: 0;
	float: right;
	display: block;
	margin: 1em;
	font-size: 1em;
	cursor: pointer;
	overflow: hidden;
	z-index: 999999999999;
	background-color: rgba(0,0,0,0.95);
	line-height: 1em;
	width: auto;
	border-radius: 25px;
	border: 1px solid rgba(255,255,255,0.1)
}
.gearMini .gearCircle {
	display: block;
	cursor: pointer;
	float: left
}
.gearMini .gearCircle svg {
	display: block;
	cursor: pointer
}
.gearMini .gearLabel {
	float: left;
	font-family: 'Maven Pro', sans-serif;
	width: 0;
	display: block;
	overflow: hidden
}
.gearMini .gearLabel span {
	clear: both;
	float: left;
	margin: 0;
	line-height: inherit;
	font-size: inherit;
	text-transform: uppercase;
	height: 1em;
	font-size: .85em;
	font-weight: 600;
	margin-left: 3px;
	white-space: nowrap;
	display: inline-block;
	width: 100%
}
.gearMini .gearLabel .gearTitle {
	margin-top: 4px
}
.gearMini .gearLabel .gearAuthor {
	opacity: .5
}
.right {
	left: auto!important;
	right: 0
}
.right .gearCircle {
	float: right
}
.right .gearLabel {
	float: right
}
.right .gearLabel span {
	padding-left: 1em
}
@media all and (max-width:640px) {
.gearWrap .currentGroup {
	display: none
}
.gearWrap .shuffle, .gearWrap .playlist, .gearWrap .close {
	display: block;
	height: 70px;
	line-height: 70px;
	margin: 0;
	vertical-align: middle;
	width: 70px;
	z-index: 2
}
.gearWrap .shuffle i, .gearWrap .playlist i, .gearWrap .close i {
	line-height: 70px;
	font-size: 1.2em
}
#_gAlbum {
	margin: 20px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
#_gAlbum .cover {
	width: 40px;
	height: 40px
}
#_gAlbum .albumgroup {
	width: 65%;
	height: 40px;
	margin-left: 4px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}
#_gAlbum .albumgroup .author {
	font-family: 'Open Sans', sans-serif;
	font-size: .75em
}
#_gAlbum .albumgroup .title {
	font-family: 'Maven Pro', sans-serif;
	font-size: .85em;
	font-weight: bold;
	letter-spacing: 0
}
}