@media only screen and (min-width: 1024px) {
audio { 
	margin: 0 15px 0 14px; 
	width: 364px;}
#mainwrapaudio { 
	    left: 50px;
    font-size: 16px;
    position: fixed;
    bottom: 0;
    z-index: 100;
    display: none;
    width: 364px!important;
    font-family: 'Oswald', sans-serif;
    font-weight: 200;
  }

#audiowrap { 
	background-color: #000; 
	margin: 0 auto;}
#plwrap { 
	margin: 0 auto;}
#tracks { 
	position: relative; 
	text-align: center;}
#nowPlay { 
	bottom: 0;
    background: #000;
    display: inline;
    z-index: 999;
    position: fixed;
    width: 244px;
    height: 60px;
    left: 50px;}
#npTitle { 
	    font-size: 15px;
    margin: 0;
    padding: 0px 26px 0 10px;
    text-align: left; font-family: 'Oswald', sans-serif;
    font-weight: 200;}
#npAction { 
	padding: 10px ; 
	position: absolute;}
#plList {     padding: 0;
	margin: 0;}
#plList li { 
	background-color: #000; 
	cursor: pointer; 
	display: block; 
	margin: 0; 
	padding: 10px  0;}
#plList li:hover { 
	background-color: #444;}
.plItem { 
	position: relative;}
.plTitle { 
	left: 50px; 
	overflow: hidden; 
	position: absolute; 
	text-overflow: ellipsis; 
	top: 0; 
	white-space: nowrap;}
.plNum { 
	padding-left: 21px; 
	width: 25px;}
.plLength { 
	padding-left: 21px; 
	position: absolute; 
	right: 21px; 
	top: 0;}
.plSel,.plSel:hover { 
	background-color: #444!important; 
	cursor: default!important;}
#btnHide{
 	font-size: 30px; line-height: 20px;    padding: 16px 28px 21px 28px;color: #337ab7;
 }
 #btnShow{
 	font-size: 18px;
    line-height: 12px;
    padding: 6px 18px 10px 18px; color: #337ab7;
 }
 a.active[id^="btn"] {background-color:#222!important;
    }
.buttonsplayer a[id^="btn"] {
    font-size: 12px;padding: 10px 18px; 
    }
a[id^="btn"] { 
    font-size: 20px;
	background-color: #000; 
	color: #fff; 
	cursor: pointer; 
	display: inline-block; 
	margin: 0; 
	padding: 21px 28px; 
	text-decoration: none; margin-bottom: 2px;}
a[id^="btn"]:last-child { 
	margin-left: -4px;}
a[id^="btn"]:hover,a[id^="btn"]:active { 
	background-color: #444;}
a[id^="btn"]::-moz-focus-inner { 
	border: 0; 
	padding: 0;}

/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio { 
	margin-left: 0; 
	outline: none; 
	width: 364px;}
html[data-useragent*="MSIE 9.0"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { 
	background-color: #000;}
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { 
	background-color: #fff;}
html[data-useragent*="MSIE 9.0"] #plList li { 
	background-color: #000;}
html[data-useragent*="MSIE 9.0"] #plList li:hover { 
	background-color: #fff;}
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { 
	background-color: #fff!important;}

/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio { 
	margin-left: 0; 
	width: 364px;}
html[data-useragent*="MSIE 10.0"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { 
	background-color: #000;}
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { 
	background-color: #fff;}
html[data-useragent*="MSIE 10.0"] #plList li { 
	background-color: #000;}
html[data-useragent*="MSIE 10.0"] #plList li:hover { 
	background-color: #fff;}
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { 
	background-color: #fff!important;}

/* IE 11 */
html[data-useragent*="rv:11.0"] audio { 
	margin-left: 0; 
	width: 364px;}
html[data-useragent*="rv:11.0"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="rv:11.0"] a[id^="btn"] { 
	background-color: #000;}
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { 
	background-color: #fff;}
html[data-useragent*="rv:11.0"] #plList li { 
	background-color: #000;}
html[data-useragent*="rv:11.0"] #plList li:hover { 
	background-color: #fff;}
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { 
	background-color: #fff!important;}

/* All Apple Products */
html[data-useragent*="Apple"] audio { 
	margin: 0; 
	width: 100%;}
html[data-useragent*="Apple"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="Apple"] a[id^="btn"] { 
	background-color: #000;}
html[data-useragent*="Apple"] a[id^="btn"]:hover { 
	background-color: #fff;}
html[data-useragent*="Apple"] #plList li { 
	background-color: #000;}
html[data-useragent*="Apple"] #plList li:hover { 
	background-color: #fff;}
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { 
	background-color: #fff!important;}

/* IOS 7 */
html[data-useragent*="OS 7"] body { 
	color: #373837;}
html[data-useragent*="OS 7"] audio { 
	margin-left: 0; 
	width: 364px;}
html[data-useragent*="OS 7"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="OS 7"] a[id^="btn"] { 
	background-color: #000; 
	color: #373837;}
html[data-useragent*="OS 7"] a[id^="btn"]:hover { 
	background-color: #444;}
html[data-useragent*="OS 7"] #plList li { 
	background-color: #000;}
html[data-useragent*="OS 7"] #plList li:hover { 
	background-color: #444;}
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { 
	background-color: #444!important;}

/* IOS 8 */
html[data-useragent*="OS 8"] body { 
	color: #373837;}
html[data-useragent*="OS 8"] audio { 
	margin-left: 0; 
	width: 364px;}
html[data-useragent*="OS 8"] #audiowrap { 
	background-color: #e4e4e4;}
html[data-useragent*="OS 8"] a[id^="btn"] { 
	background-color: #e4e4e4; 
	color: #373837;}
html[data-useragent*="OS 8"] a[id^="btn"]:hover { 
	background-color: #444;}
html[data-useragent*="OS 8"] #plList li { 
	background-color: #e4e4e4;}
html[data-useragent*="OS 8"] #plList li:hover { 
	background-color: #444;}
html[data-useragent*="OS 8"] .plSel,
html[data-useragent*="OS 8"] .plSel:hover { 
	background-color: #444!important;}

/* IOS 9 */
html[data-useragent*="OS 9"] body { 
	color: #373837;}
html[data-useragent*="OS 9"] audio { 
	margin-left: 0; 
	width: 364px;}
html[data-useragent*="OS 9"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="OS 9"] a[id^="btn"] { 
	background-color: #000; 
	color: #373837;}
html[data-useragent*="OS 9"] a[id^="btn"]:hover { 
	background-color: #444;}
html[data-useragent*="OS 9"] #plList li { 
	background-color: #000;}
html[data-useragent*="OS 9"] #plList li:hover { 
	background-color: #444;}
html[data-useragent*="OS 9"] .plSel,
html[data-useragent*="OS 9"] .plSel:hover { 
	background-color: #444!important;}

/* Chrome */
html[data-useragent*="Chrome"] body { 
	color: #fff;}
html[data-useragent*="Chrome"] audio { 
	    margin-left: 0;
    width: 364px;}
html[data-useragent*="Chrome"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="Chrome"] a[id^="btn"] { 
	background-color: #000; 
	color: #fff;}
html[data-useragent*="Chrome"] a[id^="btn"]:hover { 
	background-color: #444;}
html[data-useragent*="Chrome"] #plList li { 
	background-color: #000;}
html[data-useragent*="Chrome"] #plList li:hover { 
	background-color: #444;}
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { 
	background-color: #444!important;}

/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] body { 
	color: #373837;}
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { 
	margin-left: 0; 
	width: 364px;}
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { 
	background-color: #000;}
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { 
	background-color: #000; 
	color: #373837;}
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { 
	background-color: #444;}
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { 
	background-color: #000;}
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { 
	background-color: #444;}
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { 
	background-color: #444!important;}

}

@media only screen and (max-width: 1024px) {
	#nowPlay { display: none}
	#mainwrapaudio{ display: none}
	}