@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
 body {
	 font-family: 'Roboto', sans-serif;
	 background: transparent;
     margin:0;
     padding:0;
	 overflow: hidden;
}
 audio {
	 position: absolute;
}
 h2 {
	 font-size: 26px;
	 margin: 14px 0;
	 font-weight: 700;
}
 h3 {
	 font-size: 16px;
	 font-weight: 400;
}
 p {
	 display: inline-block;
	 font-size: 14px;
	 font-weight: 400;
	 margin-bottom: 10px;
	 color: grey;
}
 a {
	 text-decoration: none;
	 color: #9d57e4;
}
 .audio-player {
	 position: absolute;
	 top: 50%;
     border-radius: 1em;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
	 transition: all 0.2s;
	 width: 90vw;
     color:white;
	 max-width: 700px;
	 background: rgb(140 138 138);
	 box-sizing: border-box;
}
#timeleft{
    color:black
}
 @media screen and (max-width: 560px) {
	 .audio-player {
		 width: 90vw;
		 background: rgb(140 138 138);
	}
}
 .info {
	 flex: 1;
	 padding: 16px 30px;
}
 .cover-art {
	 position: absolute;
	 bottom: 160px;
	 right: -30px;
	 width: 230px;
	 height: 230px;
	 background: url(http://laptevpavel.ru/playground/player/drassed-for-space.jpg);
	 background-size: cover;
	 transition: all 0.2s;
}

.cover-art > img {
    width: 100%;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
   
}
 @media screen and (max-width: 560px) {
	 .cover-art {
		 position: relative;
		 width: 100%;
		 height: 80vw;
		 bottom: inherit;
		 right: inherit;
	}
}
 @media screen and (max-width: 520px) {
	 .cover-art {
		 position: relative;
		 width: 100%;
		 height: 90vw;
		 bottom: inherit;
		 right: inherit;
	}
}
 @media screen and (max-height: 500px) {
	 .cover-art {
		 display: none;
		 width: 0px;
		 height: 0px;
	}
}
 .cover-art a {
	 display: block;
	 width: 100%;
	 height: 100%;
}
 .cover-art a:hover {
	 background: #22a952;
	 opacity: 0.2;
}
 .controls {
	 display: flex;
	 width: 100%;
	 height: 100px;
	 background: #b6b6b6;
	 margin-top: -1px;
	 padding: 20px;
	 box-sizing: border-box;
	 transition: all 0.2s;
     border-bottom-left-radius: 1em;
     border-bottom-right-radius: 1em;
}
 .controls_plays {
	 flex: 14;
	 display: flex;
	 justify-content: center;
}
 .controls_player {
	 flex: 14;
	 fill: #7fe5a3;
	 display: flex;
	 justify-content: center;
}
 @media screen and (max-width: 420px) {
	 .controls {
		 flex-direction: column;
		 height: 200px;
	}
}
 #plays_btn, #prev_btn, #next_btn {
	 cursor: pointer;
	 width: 26px;
	 max-width: 18px;
	 transition: all 0.2s;
}
 #plays_btn:hover, #prev_btn:hover, #next_btn:hover {
	 fill: #565349;
}
 #pause_btn {
	 display: none;
}
 #volume_btn, #shuffle_btn, #playlist_btn {
	 cursor: pointer;
	 width: 23px;
	 max-width: 18px;
	 transition: all 0.2s;
}
 #volume_btn:hover, #shuffle_btn:hover, #playlist_btn:hover {
	 fill: #22a952;
}
 .progressbar_slide {
	 width: 100%;
	 background: #7fe5a3;
	 height: 6px;
}
 .progressbar_range {
	 width: 0;
	 background: black;
	 height: 6px;
}
 

.logo > img {
    width: 100%;
}