PrimaShop - Different header logo for different devices in responsive design

style.css

/* Change the width of header title and menu. */
/* #header-title (25%) + #header-menu (75%) = 100% */
#header-title {
	width: 25%;
}
#header-menu {
	width: 75%;
}

/* Default logo image (left aligned). */
.header-logo-active #header-title,
.header-logo-active #header-title .site-title,
.header-logo-active #header-title .site-title a {
	background: url("YOURIMAGEURL") no-repeat scroll left center transparent !important;
	height: 120px;
}

/* Logo image for Tablet portrait (768x1024), Small tablet landscape (800x600) - (center aligned). */
@media only screen and (max-width: 1000px) {
	.header-logo-active #header-title,
	.header-logo-active #header-title .site-title,
	.header-logo-active #header-title .site-title a {
		background: url("YOURIMAGEURL") no-repeat scroll center center transparent !important;
		height: 120px;
	}
}

/* Logo image for Small tablet portrait (600x800) - (center aligned). */
@media only screen and (max-width: 700px) {
	/* make it center aligned */
	.header-logo-active #header-title,
	.header-logo-active #header-title .site-title,
	.header-logo-active #header-title .site-title a {
		background: url("YOURIMAGEURL") no-repeat scroll center center transparent !important;
		height: 120px;
	}
}

/* Logo image for Mobile landscape (480x320), Mobile portrait (320x480) - (center aligned). */
@media only screen and (max-width: 500px) {
	/* make it center aligned */
	.header-logo-active #header-title,
	.header-logo-active #header-title .site-title,
	.header-logo-active #header-title .site-title a {
		background: url("YOURIMAGEURL") no-repeat scroll center center transparent !important;
		height: 120px;
	}
}