@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,200,300,100,500);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap');


.player-control-margin {		/*all margin*/
	bottom: 0;
	z-index: 1000;
	position: fixed;
	width: 100%;
	height: 90px;
	background-color: #111010;
}

div.bottom-container {		/*play/pause + progress margin*/
	position: absolute;
	width: 480px;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	height: 90px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
 }


.progress-margin {    /*progress with time margin*/
	position: absolute;
	width: 410px;
	height: 25px;
	bottom: 0;
	top: 20px;
	margin-bottom: auto;
	margin-top: auto;
	right: 0;

	
}

div.control-container {
  	margin-top: 8px;
  	padding-bottom: 8px;
	
}



.next-bt img {
	position: absolute;
	right: 190px;
	top: 28px;
	width: 14px;
	height: auto;
	cursor: pointer;
}


.prev-bt img {
	position: absolute;
	left: 190px;
	top: 28px;
	width: 14px;
	height: auto;
	cursor: pointer;
}


div.control-container div.amplitude-play-pause {
	position: absolute;
	
    width: 45px;
    height: 45px;
	
    cursor: pointer;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	left: 0;
}

		div.control-container div.amplitude-play-pause.amplitude-paused {
			background: url("../img/play-icon.svg");
			background-size: cover;

		}

		div.control-container div.amplitude-play-pause.amplitude-playing {
			background: url("../img/pause-icon.svg"); 
			background-size: cover; 

		}

div.control-container div.amplitude-play-pause.amplitude-paused:hover,
div.control-container div.amplitude-play-pause.amplitude-playing:hover
{
			opacity: .8;

		}



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



div.time-container {
	position: relative;
  	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	top: -10px;
	color: #D8D8D8;
	cursor: default;
	
}

		div.time-container span.current-time {
			float: left;
			margin-left: 0;
			margin-top: 0;
		}

		div.time-container span.duration {
			float: right;
			margin-right: -1px;
			margin-top: 0;
		}



progress.amplitude-song-played-progress {
	position: absolute;
	bottom: 0;
	right: 0;
	top: 0;
	margin-top: auto;
	margin-bottom: auto;
	
	border-radius: 10px;
	
	
  	background-color: #272727;

  	width: 410px;
  	height: 3px;
	
	overflow: hidden;
  	cursor: pointer;
  	border: none; 
	
	}
		progress.amplitude-song-played-progress:not([value]) {
		background-color: #272727;

	}

		progress[value]::-webkit-progress-bar {
			background-color: #272727;
		}

		progress[value]::-moz-progress-bar {
			background-color: #e8cca4;
		}

		progress[value]::-webkit-progress-value {
			background-color: #e8cca4;
		}











@media screen and (max-width: 1200px) {

	
}


@media screen and (max-width: 800px) {
	div.bottom-container {		/*play/pause + progress margin*/
		width: 360px;
	 }

	.progress-margin {    /*progress with time margin*/
		width: 290px;
	}
	
	progress.amplitude-song-played-progress {
		width: 290px;
	}
	
	div.time-container {
		top: -10px;
	}
	
	.next-bt img {
		right: 105px;
	}


	.prev-bt img {
		left: 105px;
	}
}

@media screen and (max-width: 480px) {
	div.bottom-container {		/*play/pause + progress margin*/
		width: 290px;
        
	 }

	.progress-margin {    /*progress with time margin*/
		width: 225px;
	}
	
	progress.amplitude-song-played-progress {
		width: 225px;
	}
	
	.next-bt img {
		right: 70px;
	}


	.prev-bt img {
		left: 70px;
	}
}