/*
 * ZEN - HTML5-CSS3 Audio Player
 * Author: simurai (simurai.com)
 *
 */


/* player */

#zen .player {
	/* With display: none; it doesn't work on iOS, below an alternative */
	position: absolute;
	width: 0;
	height: 0;
}


#zen:before {
	content: "";
	position: absolute;
	display: inline-block;
	z-index: -1;
	border-radius: 100px;
	width: 150px;
	height: 150px;
	margin: -25px 0 0 -25px;
	
	background: hsla(0,0%,0%,.05); /* fallback */
	background: -webkit-gradient(radial, center top, 150, center top, 0, from(hsla(0,0%,100%,.5)), to(hsla(0,0%,50%,.1)));	
	background: -webkit-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
	background:    -moz-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
	background:     -ms-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
	background:      -o-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
	background: 	    radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
}
#zen {
	display: inline-block;
	position: relative;
	padding: 2px;
	border-radius: 100px;
	width: 100px;
	height: 100px;
	background-color: #000;
	-webkit-box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
			box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
	text-align: left; /*Fix for Chrome/FF*/
}
#zen.play {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor: 	-ms-grab;
	cursor: 	 -o-grab;
	cursor: 		grab;
}
#zen.play:active {
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor: 	-ms-grabbing;
	cursor: 	 -o-grabbing;
	cursor: 		grabbing;
}




/* button */

#zen .button {	
	position: absolute;
	display: inline-block;
	border: none;
	border-radius: 50px;
	width: 100px;
	height: 100px;
	
	cursor: pointer;
	
	background: hsla(0,0%,50%,1); /* fallback */
	background: #000 -webkit-gradient(radial, center top, 200, center top, 20, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,.65)));	
	background: #000 -webkit-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	background: #000    -moz-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	background: #000     -ms-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	background: #000      -o-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	background: #000 	     radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	
	-webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
			box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
	
	-webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);	
	   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);	
	    -ms-transition:     -ms-transform .3s cubic-bezier(0,.5,.5,1),     -ms-border-radius .2s cubic-bezier(0,.5,0,1);	
		 -o-transition: 	 -o-transform .3s cubic-bezier(0,.5,.5,1), 	 	-o-border-radius .2s cubic-bezier(0,.5,0,1);	
			transition: 		transform .3s cubic-bezier(0,.5,.5,1), 		   border-radius .2s cubic-bezier(0,.5,0,1);
}


#zen .button:active, #zen.play .button {
	-webkit-transform:  scale(.5);
	   -moz-transform:  scale(.5);
		-ms-transform:  scale(.5);
		 -o-transform:  scale(.5);
			transform:  scale(.5);
	
	background: hsla(0,0%,40%,1); /* fallback */
	background: #000 -webkit-gradient(radial, center top, 200, center top, 20, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,.48)));	
	background: #000 -webkit-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	background: #000    -moz-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	background: #000     -ms-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	background: #000      -o-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	background: #000 	     radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);

	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px;	
			box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px;	
	
	-webkit-transition: -webkit-transform .2s cubic-bezier(0,.5,0,1), -webkit-border-radius 1s cubic-bezier(0,.5,0,1);
	   -moz-transition:    -moz-transform .2s cubic-bezier(0,.5,0,1),    -moz-border-radius 1s cubic-bezier(0,.5,0,1);
		-ms-transition: 	-ms-transform .2s cubic-bezier(0,.5,0,1), 	  -ms-border-radius 1s cubic-bezier(0,.5,0,1);
		 -o-transition: 	 -o-transform .2s cubic-bezier(0,.5,0,1), 	   -o-border-radius 1s cubic-bezier(0,.5,0,1);
			transition: 		transform .2s cubic-bezier(0,.5,0,1), 		  border-radius 1s cubic-bezier(0,.5,0,1);
}


#zen .button:active, #zen.play .button:active {
	-webkit-transform:  scale(.5);	
	   -moz-transform:  scale(.5);	
		-ms-transform:  scale(.5);	
		 -o-transform:  scale(.5);	
			transform:  scale(.5);	
}
#zen.play .button {
	border-radius: 30px;
	-webkit-transform:  scale(.54);
	   -moz-transform:  scale(.54);
	    -ms-transform:  scale(.54);
		 -o-transform:  scale(.54);
			transform:  scale(.54);	
}








/* icon */

#zen .button .icon {
	position: absolute;
	display: inline-block;
	top: 0;
	width: 100px;
	height: 100px;
}
#zen .button .icon.play {
	background: url(../img/play.png) no-repeat;
	
	-webkit-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
	   -moz-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
		-ms-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
		 -o-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
			transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
}
#zen.play .button .play {
	opacity: 0;
	-webkit-transition: none;
	   -moz-transition: none;
		-ms-transition: none;
		 -o-transition: none;
			transition: none;
}

#zen .button .icon.pause {
	opacity: 0;	
	background: url(../img/pause.png) no-repeat;
}
#zen.play .button .pause {
	opacity: 1;
	-webkit-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
	   -moz-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
		-ms-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
		 -o-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
			transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
}



/* drag */

#zen .drag {
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
}



/* buffer */

#zen .buffer {
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: url(../img/buffer.png) no-repeat;
}
#zen .buffer.loaded {
	opacity: 0;
	-webkit-transition: opacity .5s;
	   -moz-transition: opacity .5s;	
		-ms-transition: opacity .5s;	
		 -o-transition: opacity .5s;	
			transition: opacity .5s;
}

/* progress */

#zen .progress {
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: url(../img/progress.png) no-repeat;
	opacity: .85;
}






/* circle */

#zen .circle {
	display: block;
	position: absolute;
	width: 98px;
	height: 98px;
	margin: 1px;
	border-radius: 50px;
	
	background: url(../img/circle-still.png); /* fallback */
	background: url(../img/circle.png) no-repeat, -webkit-gradient(radial, center center, 35, center center, 15, from(hsla(200,100%,0%,0)), to(hsla(200,100%,0%,1)));
	background: url(../img/circle.png) no-repeat, -webkit-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
	background: url(../img/circle.png) no-repeat,    -moz-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
	background: url(../img/circle.png) no-repeat,      -o-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
	background: url(../img/circle.png) no-repeat, 	      radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
		
	background-color: hsl(100,100%,60%);
	
	-webkit-box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
			box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
	
	-webkit-transform:  scale(.7) rotate(-180deg);
	   -moz-transform:  scale(.7) rotate(-180deg);
		-ms-transform:  scale(.7) rotate(-180deg);
		 -o-transform:  scale(.7) rotate(-180deg);
			transform:  scale(.7) rotate(-180deg);
	
	-webkit-transition: all .5s ease-in;	
	   -moz-transition: all .5s ease-in;	
		-ms-transition: all .5s ease-in;	
		 -o-transition: all .5s ease-in;	
			transition: all .5s ease-in;	
}


#zen.play .circle {
	background-color: hsl(200,100%,60%);	
	
	-webkit-transform: scale(1) rotate(0deg);
	   -moz-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		 -o-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
	
	-webkit-transition: -webkit-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
	   -moz-transition:    -moz-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
		-ms-transition: 	-ms-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
		 -o-transition: 	 -o-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
			transition: 		transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
	
	-webkit-animation: rotate 20s linear infinite 1s;
	   -moz-animation: rotate 20s linear infinite 1s;
	    -ms-animation: rotate 20s linear infinite 1s;
	     -o-animation: rotate 20s linear infinite 1s;
	        animation: rotate 20s linear infinite 1s;	
}


#zen.play .circle.rotate {
	-webkit-animation: rotate 20s linear infinite;
	   -moz-animation: rotate 20s linear infinite;
	    -ms-animation: rotate 20s linear infinite;
	     -o-animation: rotate 20s linear infinite;
	        animation: rotate 20s linear infinite;	
}

@-webkit-keyframes rotate {
	0%   { -webkit-transform: rotate(   0deg); } 
	100% { -webkit-transform: rotate(-360deg); }
}

@-moz-keyframes rotate {
	0%   { -moz-transform: rotate(   0deg); } 
	100% { -moz-transform: rotate(-360deg); }
}

@-ms-keyframes rotate {
	0%   { -ms-transform: rotate(   0deg); } 
	100% { -ms-transform: rotate(-360deg); }
}

@-o-keyframes rotate {
	0%   { -o-transform: rotate(   0deg); } 
	100% { -o-transform: rotate(-360deg); }
}

@keyframes rotate {
	0%   { transform: rotate(   0deg); } 
	100% { transform: rotate(-360deg); }
}