@media screen and (max-width: 600px) {

 	.player-wrap .button {

	float: left;

	display: block;

	width: 100%

	height: 10.26em;

	background-color: #333;

	line-height: 5em;

	text-align: center;

}
/*Player Size Butt*/
.player-wrap .prev{
	left: 25%;
}
.player-wrap .playpause {
	left: 47%;
	color: #23bd1e;
}

.player-wrap .next {
	left: 65%;
}
/**/

.butt {

	line-height: 2em;

	text-align: center;

}

}

@media screen and (min-width: 600px) {

	.player-wrap .button {

	float: left;

	display: block;

	margin: 0.5em;

	width: 242px;

	height: 10em;

	background-color: #333;

	line-height: 5em;

	text-align: center;

}
.player-wrap .prev{
	left: 30%;
}
.player-wrap .playpause {
	left: 50%;
	color: #23bd1e;
}

.player-wrap .next {
	left: 65%;
}
.butt {

	line-height: 2em;

	text-align: center;
}

}



/* >> reset */

ol {

	list-style: none;

	margin: 0;

	padding: 0;

}

ol li {

	margin: 0;

	list-style: decimal outside;

	height: 88px;

}

* {

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	-webkit-tap-highlight-color: transparent;

}

a, a:focus, a:active, a:hover, a:visited {

	text-decoration: none;

}

a[href], a[href]:active, a[href]:visited {

	color: #ddd;

	outline: 0 none;

	color: white;

}

a[href]:hover, a[href]:focus {

	color: #bbb;

}

/* << reset */



/* page style */

.page {

	position: relative;

	margin: 0 auto;

	width: 100%;

	min-width: 300px;

}

.ellipsis {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* Audio Player */

.player-wrap {

	/*position: relative;*/
	padding: 0;

	background-color: #222;
	overflow: hidden;

}

.player-wrap.enabled {

	padding-bottom: 3em;

}



.active{

	background-color: #9b2525;

	color: white;

}

.player-wrap .button:hover {

  background-color: #444;

	cursor: pointer;

}

.player-wrap.enabled .button {

	display: block;

}

.player-wrap .info {

	position: relative;

}

.player-wrap h1 {

	padding: 0.5em 0;

}

.player-wrap .action {

	font-style: italic;

}

.player-wrap .player {

	position: absolute;

  display: none;

	left: 0;

	bottom: 0;

	padding: 0 1em 0 6em;

	width: 100%;

	height: 1em;

	font-size: 3em;

	box-sizing: border-box;

}

.player-wrap.enabled .player {

	display: block;

}

.player-wrap .player svg {

	margin: .25em;

	width: .5em;

	height: .5em;

	fill: currentColor;

}

.player-wrap .player div {

	display: block;

	height: 1em;

}

.player-wrap audio,

.player-wrap .player .pause {

	display: none;

}

.player-wrap .playpause, .player-wrap .timer,

.player-wrap .prev, .player-wrap .next {

	position: absolute;

	/*left: 0;*/

	bottom: 0;

	display: block;

	height: 1em;

	line-height: 1em;

	vertical-align: top;

	text-align: center;

}

.player-wrap .playpause,

.player-wrap .prev, .player-wrap .next {

	/*left: 1.0em;*/

	width: 1em;

	cursor: pointer;

}


.player-wrap .playpause:hover,

.player-wrap .prev:hover, .player-wrap .next:hover {

}

.player-wrap .playpause, .player-wrap .play, .player-wrap .pause,

.player-wrap .prev::-moz-focus-inner,

.player-wrap .next::-moz-focus-inner {

	border: 0;

	padding: 0;

}

.player-wrap .timer {

	display: contents;

	font-size: 3em;

}

.player-wrap .timer div {

	display: inline-block;

	height: 100%;

	vertical-align: top;

	font-size: .45em;

}

.player-wrap .seek {

	box-sizing: border-box;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 100%;

}

.playlist-wrap {

	background-color: #222;
	/*height: 500px;
	overflow-y: scroll;*/

}

.playlist-wrap li {

	/*margin: 0 0 0 3em;

	padding: .25em 0 .25em .5em;*/

	list-style: decimal outside;

}

.playlist-wrap li.sel {

	background-color: #530703;

}

.playlist-wrap li:hover {

	background-color: #444;

}



/* >> input[type=range] class: seek */

input.seek[type=range] {

	box-sizing: border-box;

	background-color: transparent;

	vertical-align: top;

	font-size: 3em;

	-webkit-appearance: none;

}

input.seek[type=range]:focus {

	outline: none;

}

input.seek[type=range]::-webkit-slider-runnable-track {

	box-sizing: border-box;

	width: 98%;

	height: .17em;

	background-color: #eee;

	cursor: pointer;

	border-radius: .1em;

	transition: all .2s ease;

}

input.seek[type=range]::-webkit-slider-thumb {

	box-sizing: border-box;

	width: .17em;

	height: .7em;

	margin-top: -.27em;

	border-radius: .1em;

	background-color: #eee;

	cursor: pointer;

	-webkit-appearance: none;

}

input.seek[type=range]:focus::-webkit-slider-runnable-track {

	background-color: #eee;

}

input.seek[type=range]::-moz-range-track {

	box-sizing: border-box;

	border: 0 solid #eee;

	width: 98%;

	height: .17em;

	background-color: #eee;

	cursor: pointer;

	border-radius: .1em;

	transition: all .2s ease;

}

input.seek[type=range]::-moz-range-thumb {

	box-sizing: border-box;

	border: 0 solid #eee;

	width: .17em;

	height: .7em;

	background-color: #eee;

	cursor: pointer;

	border-radius: .1em;

}

input.seek[type=range]::-ms-track {

	box-sizing: border-box;

	border: 0 none;

	width: 98%;

	height: .17em;

	background-color: transparent;

	color: transparent;

	cursor: pointer;

	transition: all .2s ease;

}

input.seek[type=range]::-ms-fill-lower {

	background-color: #eee;

	border-radius: .1em;

}

input.seek[type=range]::-ms-fill-upper {

	background-color: #eee;

	border-radius: .1em;

}

input.seek[type=range]::-ms-thumb {

	margin-top: -.01em;

	box-sizing: border-box;

	width: .17em;

	height: .7em;

	background-color: #eee;

	cursor: pointer;

	border-radius: .1em;

}

input.seek[type=range]:focus::-ms-fill-lower {

	background-color: #eee;

}

input.seek[type=range]:focus::-ms-fill-upper {

	background-color: #eee;

}

/* << input[type=range] class: seek */

.download{

	background-color: green;

	padding: 10px;margin-left: 10px;

}