@charset "UTF-8";
.audio {
 position:relative;
 width:728px;
 height:64px;
 font-family:'Gotham-Book',sans-serif;
 font-size:16px;
 line-height:64px;
 text-align:left;
 margin:0;
 padding:0;
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 color:#fff
}
.controls {
 position:absolute;
 top:0;
 left:0;
 width:64px;
 height:100%;
 background-color:#00aef6;
 -webkit-transition:all 0.5s ease 0;
 -moz-transition:all 0.5s ease 0;
 -o-transition:all 0.5s ease 0;
 transition:all 0.5s ease 0s;
}
.controls:hover {
 background:#B0B60C;
 -webkit-transition:all 0.5s ease 0;
 -moz-transition:all 0.5s ease 0;
 -o-transition:all 0.5s ease 0;
 transition:all 0.5s ease 0s;
}
.play,.pause {
 text-decoration:none;
 font-size:35px;
 text-align:center;
 cursor:pointer;
 color:#fff
}
.pause {
 display:none
}
.pause:before,.play:before {
 display:inline-block;
 font-family:verdana;
 font-style:normal;
 font-weight:400;
 text-decoration:none;
 font-variant:normal;
 text-transform:none;
 speak:none;
 width:65px;
 line-height:64px;
 text-align:center;
 opacity:1
}
.pause:before {
 content:'||';
 font-size:32px;
 line-height:59px;
 letter-spacing:-1px;
}
.play:before {
 content:'\25b6'
}
.bar {
 position:absolute;
 top:0;
 left:64px;
 width:664px;
 height:100%;
 margin:0;
 padding:0;
 background-color:#666;
}
.seek-bar {
 position:absolute;
 top:0;
 left:0;
 width:0;
 height:100%;
 margin:0;
 padding:0;
 cursor:pointer;
 background-color:#6E6E6E;
}
.play-bar {
 position:absolute;
 top:0;
 left:0;
 width:0;
 height:100%;
 margin:0;
 padding:0;
 background-color:#0082b2
}
.title,.current-time {
 position:absolute;
 top:0;
 left:0;
 width:640px;
 height:100%;
 margin:0;
 padding:0 12px
}
.title {
 width:578px;
 overflow:hidden;
}
.current-time {
 text-align:right;
}
.no-solution {
 position:absolute;
 top:65px;
 left:0px;
 width:370px;
 margin:0;
 padding:8px 0;
 line-height:13px;
 font-size:13px;
 text-align:left;
 display:none;
 color:#ff0000;
}
.media-status {
 position:absolute;
 top:65px;
 left:0px;
 width:370px;
 margin:0;
 padding:8px 0;
 line-height:13px;
 font-size:13px;
 text-align:left;
 display:none;
 color:#CCC;
}
.demo-wrapper {
 margin-left:auto;
 margin-right:auto;
 width:380px
}
.demo-title {
 font:32px 'Gotham-Book',sans-serif;
 text-align:center
}
.VolumeControls {
 position:absolute;
 height:64px;
 width:20px;
 top:0px;
 right:0;
 background:#8A8A8A;
}
.VolumeIcon {
 position:absolute;
 top:3px;
 right:5px;
}
.volume-bar {
 position:relative;
 /*! bottom:0; *//*! right:0; */width:20px;
 overflow:hidden;
 height:100%;
 background:#006E83;
 cursor:pointer;
}
.volume-bar-value {
 height:11px;
 background:#6CF;
 position: absolute;
 bottom: 0;
 left: 0;
 width: 25px;
}
.unmute {
 background:url(https://static.dirrtyremixes.com/fugue/speaker-volume-control-mute.png) no-repeat center center;
 display:block;
 height:16px;
 padding:2px;
 width:16px;
}
.mute {
 background:url(https://static.dirrtyremixes.com/fugue/speaker-volume-none.png) no-repeat center center;
 display:block;
 height:16px;
 padding:2px;
 width:16px;
}
.volume-max {
 background:url(https://static.dirrtyremixes.com/fugue/speaker-volume.png) no-repeat center center;
 display:block;
 height:16px;
 padding:2px;
 width:16px;
}