.bg-gradient {
	background: linear-gradient(to bottom, #f2f1f0 0%,#ffffff 100%);
}
.bg-alt {
	background-color: #f5f5f7;
}

.device-hero {
	margin-top: 4em;
}
.screen-hero {
	background-image: url("/ipados/images/screen-springboard-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.screen-hero {
		background-image: url("/ipados/images/screen-springboard-large_2x.jpg");
	}
}

.device-shareplay {
	margin-top:  2em;
}
.screen-shareplay {
	background-image: url("/ipados/images/screen-shareplay-1-medium.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.screen-shareplay {
		background-image: url("/ipados/images/screen-shareplay-1-medium_2x.jpg");
	}
}

.icon-ipados {
	margin-bottom: 1em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/ipados-15/ipados-15-96x96_2x.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) {
	.icon-ipados {
		background-image: url("/assets/elements/icons/ipados-15/ipados-15-96x96_2x.png");
	}
}

.icon-xcode {
	margin-bottom: 1em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/xcode-12/xcode-12-96x96.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) {
	.icon-xcode {
		background-image: url("/assets/elements/icons/xcode-12/xcode-12-96x96_2x.png");
	}
}

.section-topics .row {
	margin-top: 4em;
}

.topic-icon {
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.icon-widgetkit {
	background-image: url("/assets/elements/icons/widgetkit/widgetkit-96x96.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) {
	.icon-widgetkit {
		background-image: url("/assets/elements/icons/widgetkit/widgetkit-96x96_2x.png");
	}
}
.icon-shareplay {
	background-image: url("/assets/elements/icons/shareplay/shareplay-96x96.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) {
	.icon-shareplay {
		background-image: url("/assets/elements/icons/shareplay/shareplay-96x96_2x.png");
	}
}
.icon-arkit {
	background-image: url("/assets/elements/icons/arkit/arkit-96x96.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) {
	.icon-arkit {
		background-image: url("/assets/elements/icons/arkit/arkit-96x96_2x.png");
	}
}
.icon-arkit::before, 
.icon-arkit::after {
	display: none;
}
.icon-realitykit {
	background-image: url("/assets/elements/icons/realitykit/realitykit-96x96.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) {
	.icon-realitykit {
		background-image: url("/assets/elements/icons/realitykit/realitykit-96x96_2x.png");
	}
}
.icon-app-store {
	background-image: url("/assets/elements/icons/app-store/app-store-96x96.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) {
	.icon-app-store {
		background-image: url("/assets/elements/icons/app-store/app-store-96x96_2x.png");
	}
}
.icon-create-ml {
	background-image: url("/assets/elements/icons/create-ml-framework/create-ml-framework-96x96.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) {
	.icon-create-ml {
		background-image: url("/assets/elements/icons/create-ml-framework/create-ml-framework-96x96_2x.png");
	}
}
.icon-safari {
	background-image: url("/assets/elements/icons/safari-ios/safari-ios-96x96.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) {
	.icon-safari {
		background-image: url("/assets/elements/icons/safari-ios/safari-ios-96x96_2x.png");
	}
}
.icon-screentime {
	background-image: url("/assets/elements/icons/screentime/screentime-96x96.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) {
	.icon-screentime {
		background-image: url("/assets/elements/icons/screentime/screentime-96x96_2x.png");
	}
}
.icon-shazamkit {
	background-image: url("/assets/elements/icons/shazamkit/shazamkit-96x96.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) {
	.icon-shazamkit {
		background-image: url("/assets/elements/icons/shazamkit/shazamkit-96x96_2x.png");
	}
}
.icon-homekit {
	background-image: url("/assets/elements/icons/homekit/homekit-96x96.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) {
	.icon-homekit {
		background-image: url("/assets/elements/icons/homekit/homekit-96x96_2x.png");
	}
}
.icon-metal {
	background-image: url("/assets/elements/icons/metal/metal-96x96.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) {
	.icon-metal {
		background-image: url("/assets/elements/icons/metal/metal-96x96_2x.png");
	}
}
.icon-controller {
	background-image: url("/assets/elements/icons/game-controller/game-controller-96x96.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) {
	.icon-controller {
		background-image: url("/assets/elements/icons/game-controller/game-controller-96x96_2x.png");
	}
}
.icon-swiftui {
	background-image: url("/assets/elements/icons/swiftui/swiftui-96x96.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) {
	.icon-swiftui {
		background-image: url("/assets/elements/icons/swiftui/swiftui-96x96_2x.png");
	}
}

@media only screen and (max-width: 1068px) {
	.screen-hero {
		background-image: url("/ipados/images/screen-springboard-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-hero {
			background-image: url("/ipados/images/screen-springboard-medium_2x.jpg");
		}
	}
}

@media only screen and (max-width: 775px) {
	.device-shareplay {
		margin-left:  -50px;
	}
}

@media only screen and (max-width: 735px) {
	.device-hero {
		margin-top: 1em;
	}
	.screen-hero {
		background-image: url("/ipados/images/screen-springboard-small.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-hero {
			background-image: url("/ipados/images/screen-springboard-small_2x.jpg");
		}
	}
	.device-shareplay {
		margin-left:  0;
	}
	.screen-shareplay {
		background-image: url("/ipados/images/screen-shareplay-1-small.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-shareplay {
			background-image: url("/ipados/images/screen-shareplay-1-small_2x.jpg");
		}
	}
	.section-topics .row {
		margin-top: 3em;
	}
	.topic-icon {
		margin-bottom: 1em;
	}
}

/* ========== Grid ========== */
#main section.section.section-hero {
	padding-bottom: 0;
}
#main section.section.section-topics {
	padding-top: 0;
}
#main section.section.section-resources {
	padding-bottom: 0;
}

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