/*
    AUTHOR: Sam Johnson
    MINIMusic Player
*/
/* HTML5 Audio player with playlist styles */
.example,
.example2,
.example3 {
  margin: 50px auto 0;
  width: 390px;
  padding-bottom: 50px;
}

.example2{position: fixed;bottom: 0;width: 100%;left: 0;margin: 0;padding: 0; text-align: center}
.content{max-width: 1080px; height: 100%;}
.example2 .controls{display: inline-block; position: relative; top: 5px; left: auto;}
.example2 .progressbar{position: relative;display: inline-block;width: 500px;left: auto;right: auto; top: -20px; margin: 0 30px;}
.example2 .timeHolder{display: inline-block; position: relative; width: auto; bottom: 16px; margin: 0 30px;}
.example2 .volume{display: inline-block; position: relative; left: auto; top: -24px;}
.example2 .player{
	height: auto;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 25px;
	padding-left: 0;
}
  
* {
  margin: 0;
  padding: 0;
}
body {
  /*background-color: #141942;*/
}

header h2 {
  color: #f09f8b;
  text-align: center;
}

.player {
  background: #000000;
  height: 220px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.title,
.artist {
  font-family: verdana;
  left: 167px;
  position: absolute;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.title {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  top: 23px;
}
.artist {
  color: #eeeeee;
  font-size: 12px;
  top: 40px;
}
.pl {
  /*background: url(../img/sound/playlist.png) no-repeat;*/
  cursor: default;
  height: 40px;
  left: 330px;
  position: absolute;
  top: 20px;
  width: 39px;
}
.pl:hover {
  top: 21px;
  cursor: default;
}
.cover {
  border-radius: 5px 5px 5px 5px;
  height: 94px;
  left: 20px;
  position: absolute;
  top: 30px;
  width: 94px;
}
.controls {
  cursor: pointer;
  left: 0px;
  position: absolute;
  top: 65px;
  left: 122px;
}
.controls .play,
.controls .pause {
  width: 60px;
  height: 60px;
  margin: 0 5px 0px 5px;
}
.controls .play,
.controls .pause,
.controls .rew,
.controls .fwd,
.controls .stop {
  text-indent: -10000px;
  border: none;
  float: left;
}
.controls .rew,
.controls .fwd,
.controls .stop {
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}
.controls .play {
background: url(../img/sound/play.png) no-repeat;
}
.controls .pause {
background: url(../img/sound/pause.png) no-repeat;
  display: none;
}
.controls .rew {
background: url(../img/sound/rewind.png) no-repeat;
}
.controls .fwd {
background: url(../img/sound/next.png) no-repeat;
}
.controls .stop {
background: url(../img/sound/stop.png) no-repeat;
}
.hidden {
  display: none;
}
.controls .visible {
  display: block;
}
.volume {
  height: 11px;
  left: 230px;
  position: absolute;
  top: 142px;
  width: 140px;
}
.mute .volume-btn {
background: url(../img/sound/volume-off.png) no-repeat;
}
.volume-btn {
background: url(../img/sound/volume-up.png) no-repeat;
  height: 20px;
  width: 20px;
  float: left;
  position: relative;
  top: -4px;
}
.volume-adjust {
  height: 11px;
  position: relative;
  width: 80%;
  background: #fff;
  float: right;
}
.volume-adjust:hover {
	cursor:pointer;
}
.volume-adjust > div > div {
  height: 11px;
  background: #296998;
}
.progressbar {
  background-color: #fff;
  cursor: pointer;
  z-index: 1;
  right: 6.875em; /* 110 */
  height: 15px;
  left: 0px;
  position: absolute;
  width: 90%;
  top: 170px;
  margin: 0px 5%;
}
.novolume .progressbar {
  right: 4.375em; /* 70 */
}
.progressbar div {
  width: 0%;
  height: 15px;
  position: absolute;
  left: 0;
  top: 0;
}
.bar-loaded {
  background-color: #f1f1f1;
  z-index: 1;
}
.bar-played {
  background: #296998;
  z-index: 2;
}
.timeHolder {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  bottom: 10px;
  position: absolute;
  margin: 0px 5%;
  width: 90%;
}
.time-current,
.time-duration,
.time-separator {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  float: left;
}
.volume .ui-slider-handle {
  background: url("../img/sound/spr.png") no-repeat scroll -201px -188px
  rgba(0, 0, 0, 0);
  height: 13px;
  width: 13px;
}
.playlist {
  list-style-type: none;
  margin: 0px 0px -5px 0px;
  padding-bottom: 00px;
  padding-top: 0px;
  position: relative;
  width: 100%;
  z-index: 1;
}
.playlist li,
.playlist div {
  color: #296998;
  cursor: pointer;
  margin: 0 0 5px 15px;
}
.playlist li > a,
.playlist div > a {
  color: #296998;
  text-decoration: none;
}
.playlist li.active,
.playlist div.active {
  font-weight: bold;
}
.slick-dots {
  bottom: 5px !important;
}
.slick-dots li button:before {
  font-size: 8px !important;
}

.example2{z-index: 1000}
.example2 .info {display: inline-block; position: relative; top: 5px; left: auto;}
.example2 .info .artist{color: #eeeeee; font-size: 12px; top: -22px; left: auto; position: relative; margin: 0 20px;}
.example2 .cover {
	display: inline-block;
	position: relative;
	top: 5px;
	left: auto;
	width: 60px;
	height: 60px;
	background-size: 80px, auto;
	background-repeat: no-repeat;
	background-position: center center;
}

.close_btn{background: url(../img/sound/close4.png) no-repeat center center; cursor: pointer; position: absolute; right: 10px; top: 10px; width: 25px; height: 25px; background-size: 25px, auto; z-index: 10;}



@media only screen and (min-width:1400px) and (max-width:1599px) {
.example2 .progressbar{width: 300px;}
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
.example2 .progressbar{width: 200px;}
}
	
	@media only screen and (min-width:992px) and (max-width:1250px) {
		.example2 .progressbar{width: 200px;}
		.example2 .timeHolder{display: none;}
	.example2 .volume{display: block; float:none; margin-left:auto; margin-right:auto; margin-top: 45px;}
	  .example2 .player { padding-bottom:15px;}
	}
	
	@media only screen and (min-width: 768px) and (max-width: 991px) {
				.example2 .timeHolder{display: none;}
	.example2 .progressbar{display: none;}
	
		.example2 .volume{display: block; float:none; margin-left:auto; margin-right:auto; margin-top: 45px;}
	  .example2 .player { padding-bottom:15px;}
	  .example2 .info {display: block;}
		  .example2 .info .artist{top: auto; left: auto; margin-bottom:15px; margin-top:15px; display: block; float:none; margin-left:auto; margin-right:auto;}
	  .example2 .cover { display: block; float: none; margin-left:auto; margin-right:auto; }
	
	
.controls { position: relative; top: auto; left: auto; width:100%; text-align:center; }
 .example2 .controls{display: inline-block; position: relative; float:none; left:50%; margin-left:-134px}
 
 
	}
	
	@media only screen and (min-width: 640px) and (max-width: 767px) {
	.example2 .progressbar{display: none;}
	.example2 .timeHolder{display: none}
	.example2 .volume{display: block; float:none; margin-left:auto; margin-right:auto; margin-top: 45px;}
	  .example2 .player { padding-bottom:15px;}
	  .example2 .info {display: block;}
		  .example2 .info .artist{top: auto; left: auto; margin-bottom:15px; margin-top:15px; display: block; float:none; margin-left:auto; margin-right:auto;}
	  .example2 .cover { display: block; float: none; margin-left:auto; margin-right:auto; }
	.controls { position: relative; top: auto; left: auto; width:100%; text-align:center; }
 .example2 .controls{display: inline-block; position: relative; float:none; left:50%; margin-left:-134px}
	}
	
	@media only screen and (min-width: 551px) and (max-width: 639px) {
	.example2 .progressbar{display: none;}
	.example2 .timeHolder{display: none}
	.example2 .volume{display: block; float:none; margin-left:auto; margin-right:auto; margin-top: 45px;}
	  .example2 .player { padding-bottom:10px;}
	  .example2 .info {display: block;}
		  .example2 .info .artist{top: auto; left: auto; margin-bottom:15px; margin-top:15px; display: block; float:none; margin-left:auto; margin-right:auto;}
	  .example2 .cover { display: block; float: none; margin-left:auto; margin-right:auto; }
	.controls { position: relative; top: auto; left: auto; width:100%; text-align:center; }
 .example2 .controls{display: inline-block; position: relative; float:none; left:50%; margin-left:-134px}

	
	}
	
	@media only screen and (min-width: 320px) and (max-width: 550px) {
	.example2 .progressbar{display: none;}
	.example2 .timeHolder{display: none}
	.example2 .volume{display: block; float:none; margin-left:auto; margin-right:auto; margin-top: 45px;}
	  .example2 .player { padding-bottom:10px;}
	  .example2 .info {display: block;}
	  .example2 .info .artist{top: auto; left: auto; margin-bottom:15px; margin-top:15px; display: block; float:none; margin-left:auto; margin-right:auto;}
	  .example2 .cover { display: block; float: none; margin-left:auto; margin-right:auto; }
	.controls { position: relative; top: auto; left: auto; width:100%; text-align:center; }
 .example2 .controls{display: inline-block; position: relative; float:none; left:50%; margin-left:-134px}
	}
	
		@media only screen and (min-width: 0px) and (max-width: 319px) {
	.example2 .progressbar{display: none;}
	.example2 .timeHolder{display: none}
	.example2 .volume{display: block; float:none; margin-left:auto; margin-right:auto; margin-top: 45px;}
	  .example2 .player { padding-bottom:10px;}
	  .example2 .info {display: block;}
	  .example2 .info .artist{top: auto; left: auto; margin-bottom:15px; margin-top:15px; display: block; float:none; margin-left:auto; margin-right:auto;}
	  .example2 .cover { display: block; float: none; margin-left:auto; margin-right:auto; }
	.controls { position: relative; top: auto; left: auto; width:100%; text-align:center; }
 .example2 .controls{display: inline-block; position: relative; float:none; left:50%; margin-left:-134px}
	}