.sc-player{
	position:relative;
	width:100%;
	margin:0 auto;
}


.sc-player .sc-pause-btn svg path, .sc-player .sc-play-btn svg path{
	-webkit-fill:rgba(255,255,255,0) !important;
	-webkit-stroke-width:10px;
	-webkit-stroke:#fff;
	fill:rgba(255,255,255,0) !important;
	stroke-width:10px;
	stroke:#fff;
	transition: all 1s
}

.sc-player  .sc-volume-btn svg path, .sc-player .sc-list-btn svg path, .sc-player .sc-loop-btn svg path{
	fill:#fff !important;
	transition: all 1s
}


.sc-player .sc-player-artwrap{
	position:relative;
	width:100%;
	overflow:hidden;
}
	.sc-player .sc-player-artwrap:after{
		content:'';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display:block;
		background:rgba(0,0,0,.8);
		transition:all .5s;
		z-index:2
	}
	.sc-player.playing .sc-player-artwrap:after{
		background:rgba(0,0,0,.3);
	}

	.sc-artwork-ul{
		position:relative;
		width:100%;
	}
		.sc-artwork-ul svg{
			width:100%;
		}
	.sc-player .sc-player_cov{
		position:absolute;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%, -50%);
		-moz-transform:translate(-50%, -50%);
		-o-transform:translate(-50%, -50%);
		transform:translate(-50%, -50%);
		width:100%;
		height:100%;
		-webkit-filter: invert(100%);
		filter: invert(100%);
		transition:all .5s;
		background:#f1f1f1;
		overflow:hidden;
		z-index:1;
	}

	#visualize_effe{
		position:absolute;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%, -50%);
		-moz-transform:translate(-50%, -50%);
		-o-transform:translate(-50%, -50%);
		transform:translate(-50%, -50%);
		width:100% !important;
		height:100% !important;
		opacity:1;
		transition:all .5s;
	}
	.sc-player.loading #visualize_effe{
		opacity:0;
	}
	.sc-player-artwrap .sc-controls{
		position:absolute;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%, -50%);
		-moz-transform:translate(-50%, -50%);
		-o-transform:translate(-50%, -50%);
		transform:translate(-50%, -50%);
		width:10%;
		z-index:3;
	}

		.sc-player .sc-player-artwrap .sc-controls .sc-play-btn{
			display:block
		}
		.sc-player .sc-player-artwrap .sc-controls .sc-pause-btn{
			display:none
		}

		.sc-player.playing .sc-player-artwrap .sc-controls .sc-play-btn{
			display:none
		}
		.sc-player.playing .sc-player-artwrap .sc-controls .sc-pause-btn{
			display:block
		}

	.sc-btn-wrap{
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 4;
		width: 22.5%;
	}
	.sc-loop-btn{
		position: relative;
		width: 32.66666666666667%;
		float:left;
		opacity:0.3;
		margin-left:1%;
	}
		.sc-loop-btn.active{
			opacity:1;
		}
	.sc-list-btn{
		position: relative;
		width: 32.66666666666667%;
		float:left;
		margin-left:1%;
	}
	.sc-volume-btn{
		position: relative;
		width: 32.66666666666667%;
		float:left;
		opacity:0.3;
	}
		.sc-volume-btn.active{
			opacity:1;
		}
	.sc-player .sc-player-artwrap .sc-info{
		position:relative;
		width:100%;
	}

		.sc-info .sc-info-tit{
			position:relative;
			transition: all .5s;
			margin-top:20px;
			color:#000;
			width:100%;
			padding:0 20px;
			box-sizing:border-box;
		}
		.sc-info.active .sc-info-tit{
			opacity:1;
		}
		.sc-info .sc-info-tit .sc-info-title{
			font-family: 'Canela-Light', serif; 
			font-size:20px;
			margin-bottom:10px;
		}
		.sc-info .sc-info-tit .sc-info-artist{
			font-family: 'Canela-Light', serif; 
			font-size:12px;
		}
		.sc-info .sc-info-tit .sc-info-time{
			font-family: 'Canela-Light', serif; 
			margin-top:20px;
			font-size:10px;
			text-align:right
		}
		.sc-info .sc-info-tit .sc-info-time span{
			margin-left:10px;
		}
		.sc-info .sc-info-tit .sc-info-title a, .sc-info-artist a{
			text-decoration:none;
			color:#000;
		}
		.sc-info .sc-arrdw-btn{
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 4;
			width: 7%;
			opacity:0;
			transition: all .5s;
		}
		.sc-info.active .sc-arrdw-btn{
			opacity:1;
		}

	.sc-player .sc-player-artwrap .sc-tracklist{
		position:absolute;
		top:0%;
		left:0;
		width:100%;
		height:100%;
		background:rgba(0,0,0,.7);
		transition: all .5s;
		overflow:hidden;
		visibility:hidden;
		opacity:0;
		color:#fff;
		z-index:5;
	}
		.sc-player .sc-player-artwrap .sc-tracklist.active{
			opacity:1;
			visibility:visible;
		}

		.sc-tracklist .sc-tracklist_ul{
			position: absolute;
			width: 100%;
			top:50%;
			left:0;
			-webkit-transform:translateY(-50%);
			-moz-transform:translateY(-50%);
			-o-transform:translateY(-50%);
			transform:translateY(-50%);
		}

			.sc-tracklist .sc-tracklist_ul .sc-tracklist-wrap{
				width:100%;
			}
			.sc-trackslist, .sc-trackslist li{
				list-style:none;
				margin:0;
				padding:0;
			}
			.sc-trackslist li{
				width:40%;
				opacity:0.3;
				transition:all .5s;
			}
			.sc-trackslist li:first-child{
				margin-left:20px;
			}
			.sc-trackslist li.active{
				opacity:1;
			}
			.trk-list-wrap{
				position:relative;
				width:100%;
				padding-right:10px;
				box-sizing:border-box;
				font-family: 'Canela-Light', serif; 
				overflow:hidden;
			}
			.trk-list-wrap .trk-list-art{
				position:relative;
				width:100%;
			}
				.trk-list-wrap .trk-list-art img, .trk-list-wrap .trk-list-art svg{
					width:100%;
				}
			.trk-list-wrap .trt-list-txt{
				position: relative;
				width: 100%;
				margin-top: 20px;
			}

			.trk-list-tit{
				width:100%;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				font-size:12px;
				margin-bottom:10px;
			}
			.sc-track-duration{
				font-size:10px;
			}
			.sc-tracklist .sc-tarrdw-btn{
				position: absolute;
				top: 10px;
				right: 10px;
				z-index: 4;
				width: 7%;
				opacity:0;
				transition: all .5s;
			}
			.sc-tracklist .sc-tarrdw-btn{
				opacity:1;
			}

	.sc-playindi{
		position:absolute;
		bottom:20px;
		left:5%;
		z-index:5;
		background:rgba(255,255,255,0.1);
		width:90%;
		height:3px;
		border-radius:20px;
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
		-o-transform:translateY(20px);
		transform:translateY(20px);
		-webkit-transform-origin:bottom;
		-moz-transform-origin:bottom;
		-o-transform-origin:bottom;
		transform-origin:bottom;
		opacity:0;
		transition: all .5s;
	}
	.sc-playindi.active{
		-webkit-transform:translateY(0px);
		-moz-transform:translateY(0px);
		-o-transform:translateY(0px);
		transform:translateY(0px);
		opacity:1;
	}
	.sc-playindi .sc-played:after{
		content:'';
		position:absolute;
		display:block;
		width:0px;
		height:0px;
		background:#fff;
		top:50%;
		right:0px;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-o-transform:translateY(-50%);
		transform:translateY(-50%);
		border-radius:100%;
		opacity:0;
		transition:all .5s;
		transition-delay:.5s;
	}

	.sc-playindi.active .sc-played:after{
		width:15px;
		height:15px;
		right:-15px;
		opacity:1;
	}

	.sc-time-span{
		position:relative;
		width:100%;
		height:100%;
	}
	.sc-waveform-container{
		position:relative;
		width:100%;
		height:100%;
	}
		.sc-waveform-container img{
			width:100%;
			opacity:0;
		}
	.sc-played{
		position:absolute;
		top:0;
		left:0;
		background:rgba(255,255,255,1);
		height:100%;
	}
	.sc-buffer{
		position:absolute;
		top:0;
		left:0;
		background:rgba(200,200,200,0.8);
		height:100%;
		overflow:hidden;
	}
.sc-player .sc-artwork-ul{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	border-radius:0%;
	overflow:hidden;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	transform-origin:left top;
	z-index:2;
	transition: border-radius 1s, transform 0.7s cubic-bezier(1,.01,.41,1);
}

@-webkit-keyframes sc-playingroll {
  from {
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
  }

  to {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);
  }
}

.sc-player.playing .sc-artwork-ul{
	top:10px;
	left:10px;
	-webkit-transform:scale(.1);
	-moz-transform:scale(.1);
	-o-transform:scale(.1);
	transform:scale(.1);
	border-radius:100%;
}


@keyframes sc-playingroll {
  from {
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
  }

  to {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);
  }
}

	.sc-player .sc-artwork-ul .sc-artwork-list{
		width:100%;
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	.sc-player.playing .sc-artwork-ul .sc-artwork-list{
	  -webkit-animation-name:sc-playingroll;
	  animation-name:sc-playingroll;
	  -webkit-animation-duration: 10s;
	  animation-duration: 10s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	  -webkit-animation-timing-function: linear;
	  animation-timing-function: linear;
	}

	.sc-artwork-list .swiper-slide img{
		width:100%;
	}




.sc-info-dscr, .sc-info-close, .sc-info-toggle{
	display:none;
	
}




.sc-controls .hidden{
	display:none;
}