div#viewport{
	visibility: hidden;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 600;
}
#viewport>div{
	position: relative;
	top: 4.6vh;
	font-size: 24pt;
}
#viewport h2{
	margin: 0;
	padding: 0;
}
#viewport h6{
	border-radius: 2px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: .9rem;
	font-weight: 400;
	padding: 2px;
	margin-top: 0;
	color: white;
}
@media screen and (max-width: 768px) {
	#b5{
		left: -5vw !important;
	}
	div#playZone{
		background-color: rgb(50,50,50, 0.45);
	}
	div#viewport div{
		display: block;
		width: 85vw;
		margin: auto;
	}
	div#viewport {
    	visibility: visible;
  	}
	.volume-bar, #volume-input, .volume-bar:hover, img#mutepic, div.song-name{
		display: none;
		visibility: hidden;
		opacity: 0 !important;
	}
	div.background, div.backg, div.backg img, img{
		z-index: 10 !important;
	}
	
	div.track-list-container, div.track-list{
		height: auto;
		margin: 0 auto;
		display: inline-block;
		max-height: 50vh;
		opacity: 1 !important;
	}
	div.track-list-container{
		position: relative;
		display: inline-block;
		margin: auto;
		width: 85vw;
		height: 100%;
	}
	div.track-list{
		left: 7.5vw;
		display: inline-block;
		background-color: rgb(100,100,100, 0);
		position: relative;
		min-width: 200px;
		width: 82vw;
		margin: 0 auto;
	}
	div.track-list p{
		color: rgb(220, 220, 220);
	}

	/*right palm tree*/
	#b6 img, .face{
		visibility: hidden !important;
	}
}

@media only screen and (max-width: 1280px) {
		/*city2*/
		#b2{
			bottom: -2.2%;
			left: -10vw;
		}
		/*city*/
		#b3{
			bottom: -2%;
			left: 16vw;
		}
		/*left palm tree 2*/
		#b5{
			left: -2vw;
			bottom: -3.5%;
			transform: rotate(14deg) !important;
		}
		/*right palm tree*/
		#b6{
			right: -3vw;
			bottom: 20%;
		}
		/*left palm tree*/
		#b7{
			left: -2vw;
			bottom: 17%;
			transform: rotate(6deg);
		}
		/*right palm tree 2*/
		#b8{
			right: 5vw;
			top: -3.5%;
		}

	.track-list{
		min-width: 380px;
		opacity: 1;
		width: 85vw;
		background-color: rgb(100,100,100, 0.2);
	}
	div.track-list h4{
		font-size: 12pt;
		line-height: 14pt;
	}
	.volume-bar{
		margin-top: 8%;
	}
	#volume-input{
		height: 60%;
	}
}

@media only screen and (min-width : 1440px) {
	.volume-bar{
		margin-top: 8%;
	}
	#volume-input{
		height: 60%;
	}
}

@media only screen and (min-width : 1924px) {

	/*city2*/
	#b2{
		bottom: 20.5%;
		left: 25vw;
	}
	/*city*/
	#b3{
		bottom: 21%;
		left: 33vw;
	}
	/*left palm tree 2*/
	#b5{
		left: 22vw;
		bottom: 21%;
		transform: rotate(14deg) !important;
	}
	/*right palm tree*/
	#b6{
		right: 20vw;
		bottom: 35%;
	}
	/*left palm tree*/
	#b7{
		left: 24vw;
		bottom: 33%;
		transform: rotate(6deg);
	}
	/*right palm tree 2*/
	#b8{
		right: 29vw;
		top: 20%;
	}

	div.track-list{
		min-height: 40vh;
	}
	div.track-list h4{
		font-size: 28pt;
	}
	div.track-list p{
		font-size: 18pt;
	}
	div.trackC{
		min-height: 34px;
	}
}