div.player {
  background-color: transparent;
  margin: 0;
  width:100%;
  height:0;
  padding:0;
  margin-top:24px;
}
  
div.player:after {
    content: "";
    display: table;
    clear: both;}
    
div.meta-container {
width:100%;
float: left;
padding: 0px;}
    
/* WHOLE PLAYER POSITION */
div.meta-container div.time-container {
width:100%;
height:30px;
margin-top:-105px;}

div.meta-container div.time-container:after {
content: "";
display: table;
clear: both; }

    
/* AUDIO TITLE */  
.info {
font-size:1em;
position:relative;left:12px;top:-94px;
display:inline-block;
white-space:nowrap;}

progress.amplitude-song-played-progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
cursor: pointer;
width:85%;
height:30px;
margin-left:58px;
background:transparent;
border:none;}

@supports(-moz-appearance:none) {
progress.amplitude-song-played-progress {
appearance: none;
display: block;
position:relative;top:-25px;
cursor: pointer;
width:85%;
height:30px;
margin-left:58px;
background:rgba(0, 0, 0, .08);
border:none;}

}
    
    
/* DOWNLOAD BUTTON HIDDEN */
div.song-artist a {display:none;}


div.control-container {
text-align: left;
margin-top: 112px;
background:rgba(0, 0, 0, 0);}  


/* PLAY BUTTON */
div.time-container div.amplitude-play-pause {
width: 40px;
height: 40px;
cursor: pointer;
display: block;
position:relative;top:-35px;left:10px;
border-radius:10px;}

@supports(-moz-appearance:none) {
div.time-container div.amplitude-play-pause {
width: 40px;
height: 40px;
cursor: pointer;
display: block;
position:relative;top:-60px;left:10px;
border-radius:10px;}
}



/* TIMERS */
div.meta-container div.time-container div.current-time {
float: right;
font-weight:900;
position:relative;top:4px;right:-1px;
color: #000;}
    
div.meta-container div.time-container div.duration {
float: right;
margin-left:0px;
margin-right:25px;
font-weight:900;
position:relative;top:4px; right:-1px;
color: #000;}

.current-time {z-index:-10000;}
.duration {z-index:-10000;}
   
.amplitude-duration-minutes {color:#000}
.amplitude-duration-seconds {color:#000}
.amplitude-current-minutes {color:#fff}
.amplitude-current-seconds {color:#fff}
.colon {color:#000;}
.colon-current {color:#fff;}
.separator {color:#fff;}
   


/* BUTTON ICONS */
div.time-container div.amplitude-play-pause.amplitude-paused {
border-top: 1px solid rgba(0, 0, 0, .08);
border-right: 1px solid rgba(0, 0, 0, .08);
border-bottom: 1px solid rgba(0, 0, 0, .08);
border-left: 1px solid rgba(0, 0, 0, .08);
background:#fff;
background: url("images/play.png");
background-size: cover;
background-position: bottom center;}
   
   
div.time-container div.amplitude-play-pause.amplitude-playing {
border-top: 1px solid rgba(0, 0, 0, .08);
border-right: 1px solid rgba(0, 0, 0, .08);
border-bottom: 1px solid rgba(0, 0, 0, .08);
border-left: 1px solid rgba(0, 0, 0, .08);
background: url("images/pause.png");
background-size: cover;
background-position: bottom center;}
      

progress.amplitude-song-played-progress:not([value]) {
background-color: #fff;}

/* PLAY BAR  */
progress[value]::-webkit-progress-bar {
  background:rgba(0, 0, 0, .08);
  border-radius: 0; z-index:-1000;}

progress[value]::-moz-progress-bar {
  background:rgba(0, 0, 0, .08);
  border-radius: 0; z-index:-1000;}
     
      
/* PLAY BAR PLAYING  */
progress[value]::-webkit-progress-value {
background-color: transparent;
z-index:-1;
border-right:solid #fff 10px;
border-radius: 0;
margin-top:0;
z-index:10000;}

progress[value]::-moz-progress-value {
background-color: transparent;
z-index:-1;
border-right:solid #fff 10px;
border-radius: 0;
margin-top:0;
z-index:10000;}


.vol-range {display:none; z-index:-10000;}






  

/* Medium devices (landscape tablets, 768px and up) */

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

/* TIMERS */
div.meta-container div.time-container div.current-time {
float: right;
font-weight:900;
position:relative;top:4px;right:-10px;
color: #000;}
.current-time {z-index:-10000;}
.duration {z-index:-10000;}

div.meta-container div.time-container div.duration {
float: right;
margin-left:0px;
margin-right:25px;
font-weight:900;
position:relative;top:4px; right:-10px;
color: #000;}

.vol-range {display:block;position:relative;top:-90px;z-index:-10000;}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  width: 15%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 18.4px;
  cursor: pointer;
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  border: none;
}
input[type=range]::-webkit-slider-thumb {

  border: 6px solid #000000;
  height: 18.4px;
  width: 6px;
  border-radius: 8px;
  background: #000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 0px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(0,0,0,0.08);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 18.4px;
  cursor: pointer;
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  border: none;
}
input[type=range]::-moz-range-thumb {
  border: 6px solid #000000;
  height: 18.4px;
  width: 6px;
  border-radius: 8px;
  background: #000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 0px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}



}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

/* TIMERS */
div.meta-container div.time-container div.current-time {
float: right;
font-weight:900;
position:relative;top:4px;right:10px;
color: #000;}
    
div.meta-container div.time-container div.duration {
float: right;
margin-left:0px;
margin-right:25px;
font-weight:900;
position:relative;top:4px; right:10px;
color: #000;}

    
    }

body div#preload {
    display: none; }