/*------------------------------------*\
  #Audio Player
\*------------------------------------*/
.u-bg {
  position: relative;
  display: block;
  background-image: none !important;
  width: auto;
  height: auto;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*  c-audio is the main box under the scrobler */
.c-audio {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: auto;
  background: transparent;
  border-radius: 1vw;
  padding: 0 4vw 0 0;
}

/*  l-play is the main box under play button */
.c-audio .l-play {
  position: relative;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 12vw;
  min-width: 7.5vw;
  height: 7.5vw;
  border: 0;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 1vw;
  padding: 0;
	
}
.c-audio .l-play:focus {
  outline: none;
}
.c-audio .l-play__play, .c-audio .l-play__pause {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.c-audio .l-play__play {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="playbtn"><g transform="translate(-670.000000, -353.000000)"><path id="play_btn" style="fill:%23FFFFFF;" d="M740.3,403.5l-31.7-20.8v41.6L740.3,403.5z"/></g></g></svg>');
}
.c-audio .l-play__pause {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g id="pause"><g transform="translate(-968.000000, -353.000000)"><path id="pause_btn" style="fill:%23FFFFFF;" d="M1003.6,382.7v41.6h7.9v-41.6H1003.6z M1025.4,382.7v41.6h7.9v-41.6H1025.4z"/></g></g></svg>');
}

/*box under scrobler */
.c-audio__slider {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 88%;
  height: 10vw;
  overflow: hidden;
  cursor: pointer;
}
.c-audio__slider:focus {
  outline: none;
}

/*scrobler length */
.c-audio__length {
  position: relative;
  width: 100%;
  height: 2vw;
  border-radius: 2vw;
  background: rgba(19, 19, 19, 0.3);
  overflow: hidden;
}

/*scrobler progress */
.c-audio__bar {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: none;
  transition: none;
  overflow: hidden;
  fill: white;
  stroke: none;
}
.c-audio__bar:focus {
	  outline: none;
}
.audioPlayer{
	position: absolute;
	bottom:0;
	width: 40vw;
}


	/* start of desktop css */
@media only screen 
	and (min-width: 768px) 

{
	/* start of desktop css */
	
	
	
	.audioPlayer{
	width: 100%
	}
	.c-audio__length {
  width: 100%;
  height: 0.7vw;
}
	.c-audio__length rect{
		height:0.7vw;
		rx: 0.35vw;
	}
	
	.c-audio .l-play {
  position: relative;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 4vw;
  min-width: 3vw;
  height: 3vw;
  
	
}
.c-audio {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: auto;
  background: transparent;
  border-radius: 1vw;
  padding: 0 1vw 0 0;
}
	
.c-audio__slider {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 88%;
  height: 5vw;
  overflow: hidden;
  cursor: pointer;
}

	/* end of desktop css */
}
	/* end of desktop css */

/* breakpoint to limit font-size when sitePipe reaches it's max-width of 1000px */

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

{
	
.c-audio__slider {
  height: 67px;
}

.c-audio {
 
  padding: 0 13.4px 0 0;
}
	
	.c-audio__length {
  height: 9.38px;
}
	.c-audio .l-play {
  width: 53.6px;
  min-width: 40.2px;
  height: 40.2px;
  
	
}
	
	.c-audio__length rect{
		height:9.38px;
		rx: 4.69px;
	}
	
	
	/* end of breakpoint max sitePipe css */
}
	/* end of breakpoint max sitePipe css */