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


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

	#fap-main {
		width: 320px;
	}

	#fap-meta-wrapper {
		width: 220px;
	}

	#fap-player-controls {
		width: 100px;
	}

	#fap-main-controls {
		margin-left: 12px;
	}

	#fap-time-bar {
		width: 95%;
	}

	#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;
		max-height: 40px;
	}

	#fap-current-title {
		font-size: 10px;
		line-height: 9px;
	}

	#fap-social-links {
		margin-top: 6px;
	}

	#fap-current-meta,
	#fap-social-links a {
		font-size: 8px;
		line-height: 12px;
	}

	#fap-time-bar > span {
		font-size: 8px;
	}

	#fap-playlist-controls,
	#fap-volume-bar {
		display: none;
	}

}

/* Smartphones (landscape) ----------- */
@media (min-width : 321px) and (max-device-width : 480px) {

	#fap-main {
		width: 500px;
	}

	#fap-meta-wrapper {
		width: 400px;
	}

	#fap-player-controls {
		width: 100px;
	}

	#fap-main-controls {
		margin-left: 12px;
	}

	#fap-time-bar {
		width: 95%;
	}

	#fap-meta-wrapper > p {
		margin-left: 60px !important;
	}

	#fap-current-cover,
	#fap-cover-replacement,
	#fap-cover-replacement canvas,
	#fap-cover-replacement svg {
		max-width: 50px;
		max-height: 50px;
	}

	#fap-current-title {
		font-size: 10px;
		line-height: 9px;
	}

	#fap-social-links {
		margin-top: 6px;
	}

	#fap-current-meta,
	#fap-social-links a {
		font-size: 8px;
		line-height: 12px;
	}

	#fap-time-bar > span {
		font-size: 8px;
	}

	#fap-playlist-controls,
	#fap-volume-bar {
		display: none;
	}

}

/* iPads (portrait) ----------- */
@media (min-width : 768px) and (max-width : 1024px) {

	#fap-main {
		margin-right: auto !important;
		margin-left: auto !important;
		width: 768px;
	}

	#fap-meta-wrapper {
		width: 440px;
		margin-left: 5px;
	}

	#fap-player-wrapper {
		margin-right: 5px;
	}

	#fap-main-controls {
		margin-left: 0;
	}

	#fap-player-controls {
		width: 250px;
	}

	#fap-time-bar {
		width: 100%;
	}

	#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 > span {
		font-size: 10px;
	}

	#fap-volume-bar {
		display: none;
	}

	#fap-playlist-controls {
		display: block;
	}

}

/* Desktops and laptops ----------- */
@media (min-width : 1024px) {

	#fap-main {
		width: 960px;
	}

	#fap-meta-wrapper {
		width: 600px;
	}

	#fap-player-controls {
		width: 300px;
	}

	#fap-main-controls {
		margin-left: 0;
	}

	#fap-time-bar {
		width: 100%;
	}

	#fap-time-bar > span {
		font-size: 10px;
	}

	#fap-playlist-controls,
	#fap-volume-bar {
		display: block;
	}

}