/*
* Fullwidth Audio Player - Responsive Layout
*
*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (max-width : 1024px) {

	#fap-meta-wrapper > p {
		margin-left: 45px !important;
	}
	
	#fap-current-cover, #fap-cover-replacement, #fap-cover-replacement canvas, #fap-cover-replacement svg {
		max-width: 40px !important;
		max-height: 40px !important;
	}
	
	#fap-wrapper { min-width: auto !important; width: 100% !important;}
	#fap-ui-wrapper {
		    /* width: 80px; */
    height: auto;
    float: left;
    position: relative;
    display: block;
    bottom: 160px;
    right: 0px;
    /* margin-bottom: 150px; */
    width: 90%;
	}
	
	#fap-ui-wrapper > div:first-child {
		display: block;
		margin-right: 0;
	}
	
	#fap-current-title {
		font-size: 9px;
		line-height: 9px;
	}
	
	#fap-social-links {
		margin-top: 2px;
		line-height: 6px;
	}
	
	#fap-current-meta, #fap-social-links a {
		font-size: 6px;
		line-height: 8px;
	}
	
	#fap-time-bar, #fap-volume-bar, #fap-volume-sign, #fap-playlist-toggle, #fap-playlist-shuffle { 
		/*display: none;*/
	}
	
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

	#fap-wrapper { min-width: auto !important; width: 100% !important;}
	#fap-main {
		width: 320px;
	}
	
	#fap-meta-wrapper {
		width: 240px;
	}
	
	#fap-ui-wrapper {
		    /* width: 80px; */
    height: auto;
    float: left;
    position: relative;
    display: block;
    bottom: 160px;
    right: 0px;
    /* margin-bottom: 150px; */
    width: 90%;
	}
	
	#fap-time-bar, #fap-volume-bar, #fap-volume-sign, #fap-playlist-toggle, #fap-playlist-shuffle { 
		/*display: none;*/
	}

}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-width : 1024px) {
	

	#fap-wrapper { min-width: auto !important; width: 100% !important; max-width: 600px;}
	#fap-main {
		width: 480px;
	}
	
	#fap-meta-wrapper {
		width: 400px;
	}
	
	#fap-ui-wrapper {
		    /* width: 80px; */
    height: auto;
    float: left;
    position: relative;
    display: block;
    bottom: 160px;
    right: 0px;
    /* margin-bottom: 150px; */
    width: 90%;
	}
	
	#fap-time-bar, #fap-volume-bar, #fap-volume-sign, #fap-playlist-toggle, #fap-playlist-shuffle { 
		/*display: none;*/
	}
	
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px)  and (max-device-width : 1024px) {
	
	#fap-wrapper { min-width: auto !important; width: 100% !important;}
	#fap-main {
		margin-right: auto !important;
		margin-left: auto !important;
		width: 568px;
	}
	
	#fap-meta-wrapper {
		width: 338px;
	}
	
	#fap-ui-wrapper {
		    /* width: 80px; */
    height: auto;
    float: left;
    position: relative;
    display: block;
    bottom: 160px;
    right: 0px;
    /* margin-bottom: 150px; */
    width: 90%;
	}
	
	#fap-current-title {
		font-size: 11px;
		line-height: 11px;
	}
	
	#fap-current-meta, #fap-social-links a {
		font-size: 8px;
		line-height: 8px;
	}
	
	#fap-social-links {
		margin-top: 2px;
	}
	
	#fap-time-bar, #fap-volume-bar, #fap-volume-sign, #fap-playlist-toggle, #fap-playlist-shuffle { 
		/*display: none;*/
	}
	
}