/* === imac hardware === */
.device-imac {
	position: relative;
	width: 987px;
	height: 831px;	
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/metal/images/imac-large.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.device-imac {
		background-image: url("/metal/images/imac-large_2x.png");
	}
}
.device-imac .device-screen {
	top: 26px;
	left: 28px;
	width: 932px;
	height: 525px;
	display: block;
	position: absolute;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
@media only screen and (max-width: 1068px) {
	.device-imac {
		width: 698px;
		height: 588px;
		background-image: url("/metal/images/imac-medium.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.device-imac {
			background-image: url("/metal/images/imac-medium_2x.png");
		}
	}
	.device-imac .device-screen {
		top: 18px;
		left: 19px;
		width: 660px;
		height: 372px;
	}
}
@media only screen and (max-width: 735px) {
	.device-imac {
		width: 320px;
		height: 269px;
		background-image: url("/metal/images/imac-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.device-imac {
			background-image: url("/metal/images/imac-small_2x.png");
		}
	}
	.device-imac .device-screen {
		top: 9px;
		left: 10px;
		width: 303px;
		height: 171px;
	}
}
@media only screen and (max-width: 320px) {
	.device-imac {
		width: 280px;
		height: 235px;
	}
	.device-imac .device-screen {
		top: 8px;
		left: 8px;
		width: 264px;
		height: 149px;
	}
}


/* === locs ===*/
figure[data-figure-id="metal-overview-hero"] {
	margin: 48px auto 0;
	width: 100%;
	height: 664px;
	background-image: url('/metal/images/metal-hero-large.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1165px 664px;
}


@media only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 144dpi) {
	figure[data-figure-id="metal-overview-hero"] {
		background-image: url('/metal/images/metal-hero-large_2x.png');
	}
}
	
@media only screen and (max-width: 1068px) {
	figure[data-figure-id="metal-overview-hero"] {
		height: 485px;
		background-size: 851px 485px;
		background-image: url('/metal/images/metal-hero-medium.png');
	}
}

@media only screen and (max-width: 1068px) and (min-resolution: 1.5dppx),
only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
	figure[data-figure-id="metal-overview-hero"] {
		background-image: url('/metal/images/metal-hero-medium_2x.png');
	}
}

@media only screen and (max-width: 735px) {
	figure[data-figure-id="metal-overview-hero"] {
	height: 212px;
	background-size: 376px 212px;
	background-image: url('/metal/images/metal-hero-small.png');
	}
}

@media only screen and (max-width: 735px) and (min-resolution: 1.5dppx),
only screen and (max-width: 735px) and (min-resolution: 144dpi) {
	figure[data-figure-id="metal-overview-hero"] {
		background-image: url('/metal/images/metal-hero-small_2x.png');
	}
}


/* === Grid=== */
#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 735px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}