@charset "UTF-8";
/* CSS Document */

body {
	background-color:#B7AEAE;
	font-family: 'Questrial', 'sans-serif';

}

html {
	font-size:5.7px;
	overflow-y:scroll;
}

ul {

	list-style-type:none;
}

ul > li {
	display:inline;
	margin-right: 0.65rem;
}

a, a:focus, a:visited {
	text-decoration:none;
}

nav {
	position:absolute;
	top: 1rem;
	left: 5.7%;
	display: none;
}

nav p {
	color:#000;
	font-size:2rem;
}

nav p a {
	color:#CDC7C7;
}

nav p a:hover {
	color:#FFF;
}

.container {
	position:relative;
	top: 2.5rem; /* previously 8.5rem */
	margin: 0 5%;
}

.container a, .container a:visited {
	color:#CDC7C7;
	font-size:4rem;
}

.info {
	position:relative;
	top: 8.5rem;
	margin: 0 5%;
}

.info .tracklist {
	position:absolute;
	left:0;
	top:0;
	list-style-type:none;
	padding:0;
	margin:0;
	width:63%;
	overflow:hidden;
}

.info li {
	color:#CDC7C7;
	font-size:2.2rem;
	line-height:3rem;
}

.info a {
	color:#000;
	font-size:2.2rem;
}

.info a:hover {
	color:#FFF;
	font-size:2.2rem;
}


.container a:hover, .container a:focus {
	color:white;
}

.container a.active {
 	color:black;
 }

.container p {
	margin:0;
}

.container .tracklist {
	position:absolute;
	left:0;
	top:0;
	list-style-type:none;
	padding:0;
	margin:0;
	width:63%;
	overflow:hidden;
}

.container .track-info {
	position:absolute;
	left:66%;
	top:0;
	width:30%;
	overflow-x:hidden;
}

.jp-play, .jp-pause {
	font-size:3rem;
}

.container .controls a, .container .track-info span, .container .track-info span a, .container .track-info a {
	color:#000;
	font-size:3.3rem;
}

span.jp-duration {

	display: inline-block;
}
span.jp-duration::first-letter {
	font-size:0rem;
	color:#B7AEAE;
}

@-moz-document url-prefix() {
	span.jp-duration {
		margin-left:-1.2rem;
		color:#000;
		}

	span.jp-duration::first-letter {
		font-size:3rem;
		}
}

.container p span.track-name {
	color: #000;
}

.container .play-state {
	color:white;
}



.jp-progress {
	margin: .6rem 0 0 0;
	width: 100%;
	background-color: #000;
	padding: 0;

}

.jp-seek-bar {
	background-color:#000;
	width: 0px;
	height: 3px;
	overflow: hidden;
	cursor: pointer;
}

.jp-play-bar {
	background-color:#000;
	width: 0px;
	height: 3px;
	overflow: hidden;
}

.jp-play-bar-knob {
	width: 15px;
	height: 3px;
	background-color: #B7AEAE;
	margin: 0;
	float: right;
}

.textpic > div {
	margin-top:.9rem;
}

.textpic > div img {
	width:100%;
	margin:1.1rem 0;
	height:auto;
}

#circle {
  position: fixed;
  background-color: #000;
  cursor: pointer;
  z-index: 8;
  border-radius: 50%;
	width: 20px;
	height: 20px;
  bottom: 20px;
  right: 20px;
}

#circle:hover {
  background-color: #fff;
}

@media (min-width: 640px) {
html {
	font-size:7.5px;
}
}

@media (min-width: 800px) {
html {
	font-size:9px;
}
}

@media (min-width: 993px) {
html {
	font-size:10.9px;
}
}

@media (min-width: 1024px) {
html {
	font-size:11.4px;
}
}

@media (min-width: 1054px) {
html {
	font-size:11.7px;
}
}

@media (min-width: 1091px) {
html {
	font-size:12.2px;
}
}

@media (min-width: 1132px) {
html {
	font-size:12.6px;
}
}

@media (min-width: 1185px) {
html {
	font-size:12.9px;
}
}

@media (min-width: 1203px) {
html {
	font-size:13.2px;
}
}

@media (min-width: 1231px) {
html {
	font-size:13.4px;
}
}

@media (min-width: 1250px) {
html {
	font-size:14px;
}
}

@media (min-width: 1289px) {
html {
	font-size:14.3px;
}
}

@media (min-width: 13136px) {
html {
	font-size:14.8px;
}
}

@media (min-width: 1340px) {
html {
	font-size:15px;
}
}

@media (min-width: 1384px) {
html {
	font-size:15.5px;
}
}

@media (min-width: 1420px) {
html {
	font-size:16px;
}
}

@media (min-width: 1470px) {
html {
	font-size:16.5px;
}
}

@media (min-width: 1517px) {
html {
	font-size:17.1px;
}
}

@media (min-width: 1553px) {
html {
	font-size:17.6px;
}
}

@media (min-width: 1607px) {
html {
	font-size:18.3px;
}
}

@media (min-width: 1660px) {
html {
	font-size:18.8px;
}
}

@media (min-width: 1712px) {
html {
	font-size:19.6px;
}
}

@media (min-width: 1770px) {
html {
	font-size:20.1px;
}
}

@media (min-width: 1830px) {
html {
	font-size:20.8px;
}
}

@media (min-width: 1882px) {
html {
	font-size:21.3px;
}
}

@media (min-width: 1900px) {
html {
	font-size:21.5px;
}
}

@media (min-width: 1960px) {
html {
	font-size:21.9px;
}
}