*:focus {
  outline: none;
} 

.sound-media{background:#f7f7f7; border-radius:30px; padding:20px 30px; width:100%; max-width:587px; margin:-30px auto 30px; position:relative; z-index:2}
.sound-media .caption{display:flex;  align-items: start;  flex-wrap: wrap;}
.sound-media .ic-brand{width:40px; height:40px;  background-size:cover; background-repeat:no-repeat; background-position:center center; background-color:#fff;  border-radius:50%; box-shadow:0 0 20px rgba(0,0,0,0.1)}
.sound-media .caption .title{  width:calc(100% - 160px); padding-left:20px;}
.sound-media .caption .title h3{font-size:16px; font-weight:800; margin:0 0 5px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; padding-right:30px;}
.sound-media .caption .title img{margin-right:10px; vertical-align:middle;  text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; }
.sound-media .caption .title p{color:#2081e2; font-size:12px; font-weight:800; } 
.sound-media .caption .title p small{color:#8c8c8c; border-left:2px solid #ddd; vertical-align:baseline; font-size:13px; font-weight:500; padding-left:10px; margin-left:20px;}

#media-bar{font-size:26px; color:#939393; position:absolute; right:30px; top:20px; cursor:pointer;}
#repeat{ font-size:26px; color:#939393; padding:20px 0 0; cursor:pointer;}
#shuffle{font-size:26px; color:#939393; padding:20px 0 0; cursor:pointer;}
 
#player {
  position: relative;
  height: 100%;
  z-index: 3;
}

#player-track {   
  transition: 0.3s ease top;
  z-index: 1; 
}

#player-track.active { 
}

#album-name { 
}
 

#track-time {
  height: 12px;
  margin-bottom: 5px;
  overflow: hidden;
}

#current-time {
  float: left;
}

#track-length {
  float: right;
}

#current-time,
#track-length {
  color: transparent;
  font-size: 11px; 
  border-radius: 10px;
  transition: 0.3s ease all;
}

#track-time.active #current-time,
#track-time.active #track-length {
  color: #2081e2;
  background-color: transparent;
}

#s-area,
#seek-bar {
  position: relative;
  height: 6px;
  border-radius: 6px;
  box-shadow: inset 1px 1px 3px rgb(0 0 0 / 10%);
}
#seek-bar:before{
	content:'';
	width:8px; 
	height:8px;
	background:#2081e2;
	border:4px solid #fff;
	border-radius:50%; 
	position:absolute; right:0;
	margin-right:-15px;
	margin-top:-5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
 

#s-area {
  background-color: #fff; 
  cursor: pointer;
}

#ins-time {
  position: absolute;
  top: -29px;
  color: #fff;
  font-size: 12px;
  white-space: pre;
  padding: 5px 6px;
  border-radius: 4px;
  display: none;
}

#s-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0.2;
  z-index: 2;
}

#ins-time,
#s-hover {
  background-color: #2081e2;
}

#seek-bar {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: #2081e2;
  transition: 0.2s ease width;
  z-index: 1;
}

#player-content { 
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#album-art { 
}

#album-art.active { 
}
 

#album-art.active .swiper-slide.swiper-slide-active{ 
  animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@keyframes rotateAlbumArt {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

#buffer-box { 
}
 

#album-art img,
#buffer-box {
  transition: 0.1s linear all;
}

#album-art.buffering img {
  opacity: 0.25;
}

#album-art.buffering img.active {
  opacity: 0.8;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box {
  opacity: 1;
}

#player-controls {
  width: 120px;
  height: 100%; 
  margin:0 auto;
  overflow: hidden;
  display:flex;
  align-items:center;
}

.control {
  width: 33.333%;   
}

.button { 
	text-align:center;
  border-radius: 6px;
  cursor: pointer;
}

.button i {
  display: block;
  color: #939393;
  font-size: 20px;
  text-align: center;
  line-height: 1;
}

.button,
.button i {
  transition: 0.2s ease all;
}

.button:hover {
  color: #2081e2;
}

.button#play-pause-button i {
  color: #2081e2;
  font-size:40px;
}
 
 
@media screen and (max-width:768px){  
	.sound-media{padding:10px; border-radius:20px} 
	.sound-media .ic-brand{width:30px; height:30px;}
	.button i{font-size:16px;}
	.button#play-pause-button i{font-size:30px;}
	#player-controls{width:80px}
	.sound-media .ic-brand img{max-height:100%;}
	.sound-media .caption .title{width:calc(100% - 110px); padding-left:5px;}
	.sound-media .caption .title img{width:15px;}
	.sound-media .caption .title h3{font-size:14px;}
	.sound-media .caption .title p{font-size:10px;}
	.sound-media .caption .title p small{font-size:12px; margin-left:5px; padding-left:5px; }
}