gistfile1.sass

.hero-map {
	width: 100%;
	position: absolute;
	height: 414px;
	margin: 0 auto 0;
	background-position: top center;
	background-repeat: no-repeat;
	-webkit-background-size: 1200px 528px;
	-o-background-size: 1200px 528px;
	-moz-background-size: 1200px 528px;
	background-size: 940px 414px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1),
only screen and (   min--moz-device-pixel-ratio: 1),
only screen and (   -moz-min-device-pixel-ratio: 1),
only screen and (     -o-min-device-pixel-ratio: 1/1),
only screen and (        min-device-pixel-ratio: 1) {
	.hero-map {
		background-image: url("../img/map.png");
	}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	.hero-map {
		background-image: url("../img/map_x2.png");
	}
}

@media only screen and (min-width: 1010px) {
	.hero {
		height: 600px;
	}
	.hero-map {
		height: 436px;
		-webkit-background-size: 990px 436px;
		-o-background-size: 990px 436px;
		-moz-background-size: 990px 436px;
		background-size: 990px 436px;
	}
}
@media only screen and (min-width: 1140px) {
	.hero {
		height: 640px;
	}
	.hero-map {
		height: 483px;
		-webkit-background-size: 1100px 483px;
		-o-background-size: 1100px 483px;
		-moz-background-size: 1100px 483px;
		background-size: 1100px 483px;
	}
}
@media only screen and (min-width: 1280px) {
	.hero {
		height: 680px;
		h1 {
			padding-left: 10%;
			padding-right: 10%;
		}
	}
	.hero-map {
		height: 528px;
		-webkit-background-size: 1200px 528px;
		-o-background-size: 1200px 528px;
		-moz-background-size: 1200px 528px;
		background-size: 1200px 528px;
	}
}