.hero-overlap {
	margin-top: -302px;
	background-color: #f2f2f2;
}

.image-hero {
	display: block;
	margin-top: 48px;
	width: 100%;
	height: 1021px;
	background-image: url('/macos/touch-bar/images/touch-bar-hero-large.jpg');
	background-repeat: no-repeat;
	background-size: 1085px 1021px;
	background-position: center;
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	.image-hero {
		background-image:url('/macos/touch-bar/images/touch-bar-hero-large_2x.jpg');
	}
}

@media only screen and (max-width:1023px) {
	.image-hero {
		background-image:url('/macos/touch-bar/images/touch-bar-hero-medium.jpg');
		background-size:700px 658px;
		height:658px;
	}

	.hero-overlap {
		margin-top: -196px;
	}

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1023px) , only screen and (min-resolution: 1.5dppx) and (max-width: 1023px) , (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1023px) , (min-resolution: 144dpi) and (max-width: 1023px) {
	.image-hero {
		background-image:url('/macos/touch-bar/images/touch-bar-hero-medium_2x.jpg');
	}
}

@media only screen and (max-width:767px) {
	.image-hero {
		background-image:url('/macos/touch-bar/images/touch-bar-hero-small.jpg');
		background-size:300px 282px;
		height:282px;
	}
	.hero-overlap {
		margin-top: -84px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px) , only screen and (min-resolution: 1.5dppx) and (max-width: 767px) , (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px) , (min-resolution: 144dpi) and (max-width: 767px) {
	.image-hero {
		background-image:url('/macos/touch-bar/images/touch-bar-hero-small_2x.jpg');
	}
}