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

	body{
		width: 100vw;
		margin: 0px;
		padding:0px;
		overflow-x:hidden;
		transition: all 0s;
	}
		
	#content{
		font-size: 1em;
		padding: 0px;
		margin:0px;
		color: #DCEBDD;  
		letter-spacing:	0px;	
	}
	
	/* top area in playlist, has list name and track amount */
	#top-banner{
		xborder:1px solid grey;
		margin-top:0px;
		width:100vw;
	}

	#top-bar-info {
		xborder:1px solid grey;
		width: calc(100% - 100px);
		margin-left:3px;
	}

	#search-container {
		width:100%;
	}
	
	#status-container{
		height:20px;
	}
		
	#icon-list{
		padding-left: 0px;
		padding:0px;
		margin:0px;
		transition: opacity 0s;
	}

	#row-list{
		max-width:95vw;
		transition: opacity 0s;
	}
			
	#icon-list > .item{
		width: 43vw;
		height: 70vw;
		padding:0px;
		position: relative;
		user-select: none;
	}	
	
	#icon-list > .item > img.image{
		width:43vw;
		height:43vw;
		-webkit-box-shadow:none;
		-moz-box-shadow: none;
		box-shadow: none;
		-webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.55);
		-moz-box-shadow: 	0px 0px 10px 3px rgba(0,0,0,0.55);
		box-shadow:		 	0px 0px 10px 3px rgba(0,0,0,0.55);
		box-shadow: 10px 0 5px px #888;
	}	
	
	#icon-list > .item > img.overlay{
		width: 43vw;
		height: 43vw; 
		opacity:0;
		z-index: 0;
	}




	#icon-list > .item > .info {
		padding: 0px;
		overflow:hidden;
	}

	
	#icon-list > .item > .info > .artist{
		xfont-weight: bold;
		xfont-size: 5vw;	
	}	
	
	#icon-list > .item > .info > .track{
		-webkit-line-clamp: 3; /* number of lines to show */
		transition:all 0s;
	}



	#row-list > .item .info{
		font-size:1em;
	}

	#row-list > .item > .info > .artist, #row-list > .item > .info > .album{
		transition:all 0.0s;
	}

	.item > .overlay, .item > .overlay-playing, .item > img.image{
		transition: all 0.0s;
		border-radius:3px;
	}

	.item > .overlay-playing {
		xbackground-color:rgba(0,0,0,0.0);
		border:0px solid #1db954
	}

	#icon-list > .item > .overlay, .item > .overlay-playing > i {
		xborder:1px solid red;
		xmargin-bottom:50px;
	}
	

	.item:hover .overlay{opacity:0;}



	
	#select-playlist-container, #select-playlist{
		xborder:1px solid lime;
		width:100vw;
		margin-right: auto;
		margin-left: auto;
		margin-top:10px;
		padding:0px;
		padding-bottom:200px;
	}

	#select-playlist{

	}



	#select-playlist-title{
		xdisplay:none;
		padding: 5px 0px 20px 30px;
	}
	
	.playlist-option-title{
		font-size: 1.5em;
		text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
		margin-bottom: 5px;	
	}

		
	.playlist-option, .light-overlay, .dark-overlay, .light-overlay, .bottom-fade, .playlist-option-image, .playlist-option-image-small {
		xwidth: 45vw!important;	
		xheight:45vw!important;
		aspect-ratio:1/1!important;
	}

	.playlist-option {
		
	}
	
	#img-container, #track-info, #seekbar-section-outer, #volume-section-outer, #btn-hide-video, .page-title{
		display:none;
	}
    
    #player-area{
        height:175px;
		transition:all 0s!important;
		xmargin-bottom:50px;
		border-top:1px solid #333333;
		xborder-top:none;
		xposition:relative;
		display:block;
    }
	
	#controls{
		xborder:1px solid magenta;
		xposition:absolute;
		width:100vw;
		height:75px;
		xheight:50%;
		padding:0px;
		xmargin-top:5px;
		display:inline-flex;
		justify-content: center;
		flex-direction:row;
	}

	.button-section-content > .button {
		xborder:1px solid cyan;
		margin-bottom:0px;
		transition: all 0s!important;
		padding:25px;
		margin:0px;
		float:none;
		display:inline-flex;
		xtext-shadow: 2px 2px 0px black;
		text-shadow: 0px 0px 0px black;

	}

	
	.button-section-content > .button:hover{
		background-color: rgba(191, 191, 191, 0);
		border:1px solid rgba(191, 191, 191, 0);
	}

	.button-section-content > .button:active{
		background-color: rgba(191, 191, 191, 0.2);
	}


	.button-section-content > .button > .icon {
		xborder:1px solid grey;
		width:100%;
		height:100%;
		margin:0px;
		display: flex;
		justify-content: center;
		align-items: center;  
	}



	#player-button-section {
		xborder:1px solid lime;
		width:60vw;
		display:block;
		position:absolute;
		margin:0px;
		z-index:1;
		padding:5px;
	
	}

	#player-button-section > .button-section-content {
		width:100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#btn-previous {
		
	}

	.button-section-content > #play-button-container.button {
		xborder:1px solid orange;
		background-color:rgba(255,255,255,0.1);
		width: 75px;
		height:75px;
		border-radius:50px;
	}

	#play-button-container {
		xborder:1px solid grey;
	}



	#toggle-button-section {
		xborder:1px solid red;
		display:inline-block;
		width:100vw;
		position:absolute;
		padding: 15px 0px 15px 0px;
		
	}
	
	.toggle-button {
		xborder:1px solid grey;
		padding: 15px;
		xtext-shadow:5px 5px 5px lime;
	}


	.toggle-button#btn-random {
		display:inline-block;
		float:left;
		text-shadow:none;
	}

	.toggle-button#btn-toggle-track-view {
		display:inline-block;
		float:right;
		text-shadow:none;
	}

	.toggle-button#btn-toggle-theme {
		display:none;
	}

	.toggle-button#btn-toggle-view {
		display:none;
	}
	
	#player-elem{
		border: 1px solid grey;
		border-top:1px solid grey!important;
		xborder-bottom:none;

		width:100vw;
		height:200px;
		border-top:0px;
		float:none;
		position:absolute;
		bottom:0;
		margin-bottom:52px;
	}
    
   



	#track-info {
		display:none;
	}	

	.button-section-content{
		padding:0px;
	}

	.button-section{
		xborder:1px solid red;
		padding:0px;
		margin:0px;
		display:flex;	
	}

	/*
	#top-banner > .buttons > .button:hover {
		background-color: #1d1d1d;
	}

	#top-banner > .buttons > .button:active {
		background-color: #1d1d1d;
	}
	*/

	#top-banner > .buttons > .button {
		border: 2px solid #333333; /*189a46  333333*/
	}
	#top-banner > .buttons > .button:hover {
		border: 2px solid #333333; /*189a46  333333*/
	}
	

	#mobile-track-label{
		xborder:1px solid red;
		visibility:visible;
		display:block!important;
		xposition:fixed;
		xbottom:0;	
		xmargin-bottom:50px;
		width:100%;
		overflow-y:hidden;
		overflow-x:ellipsis;
		
		color:grey;
		xpadding:5px;
		padding:0px 5px 0px 5px;
		margin-top:90px;
	
		font-size:2ex;
		line-height: 2ex;
		height: 4.1ex; /* 2.5ex for each visible line */
	
		xdisplay: -webkit-box;
		x-webkit-line-clamp: 2; /* number of lines to show */
		x-webkit-box-orient: vertical;

		
	}

	


	
	#mobile-track-color{
		xborder:1px solid grey;
		width:10px;
		height:10px;
		border-radius:10px;
		display:inline-block;
		margin: 0px 5px 0px 5px;
	}


	#bottom-buttons {
		position:absolute;
		bottom:0;
		height:50px;
	}

	.bottom-button {
		border:none;
		font-size:2.4em;

	}

	.bottom-button:hover{
		color:rgba(255,255,255,0.2);
	}

	.bottom-button:active{
		color:#1db954;
	}
	


	#toggle-video-mobile {
		display:none;
	}

	#toggle-video-mobile {
		display:flex;
	}
	


	#title-area {
		xborder:1px solid grey;
		xmargin: 15px 0px 30px 0px;
	}

	#title-image {
		xborder:1px solid red;

	}
	
	#title-image > img {
		xborder:1px solid lime;

	}
	
	#title {
		xborder:1px solid grey;

	}



}