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

.section-features .row-features .row .column {
	align-self: center;
}
.section-features .row-features .row {
	margin-top: 4em;
}
.section-features .row-features .row:first-of-type {
	margin-top: 0;
}

.screen-shareplay {
	background: url("/ios/images/screen-shareplay-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) {
	.screen-shareplay {
		background-image: url("/ios/images/screen-shareplay-large_2x.png")
	}
}
.screen-notifications {
	background: url("/ios/images/screen-notifications-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) {
	.screen-notifications {
		background-image: url("/ios/images/screen-notifications-large_2x.png")
	}
}
.screen-app-store {
	background: url("/ios/images/screen-app-store-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) {
	.screen-app-store {
		background-image: url("/ios/images/screen-app-store-large_2x.png")
	}
}

.icon-ios {
	margin-bottom: 1em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/ios-15/ios-15-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-ios {
		background-image: url("/assets/elements/icons/ios-15/ios-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/xcode-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/xcode-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-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-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-nearby-interaction {
	background-image: url("/assets/elements/icons/nearby-interactions/nearby-interactions-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-nearby-interaction {
		background-image: url("/assets/elements/icons/nearby-interactions/nearby-interactions-96x96_2x.png");
	}
}
.icon-cloudkit {
	background-image: url("/assets/elements/icons/cloudkit/cloudkit-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-cloudkit {
		background-image: url("/assets/elements/icons/cloudkit/cloudkit-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-shareplay {
		background: url("/ios/images/screen-shareplay-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) {
		.screen-shareplay {
			background-image: url("/ios/images/screen-shareplay-medium_2x.png")
		}
	}
	.screen-notifications {
		background: url("/ios/images/screen-notifications-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) {
		.screen-notifications {
			background-image: url("/ios/images/screen-notifications-medium_2x.png")
		}
	}
	.screen-app-store {
		background: url("/ios/images/screen-app-store-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) {
		.screen-app-store {
			background-image: url("/ios/images/screen-app-store-medium_2x.png")
		}
	}
}

@media only screen and (max-width: 735px) {
	.section-features .row .column {
		align-self: top;
	}
	.section-topics .row {
		margin-top: 3em;
	}
	.topic-icon {
		margin-bottom: 1em;
	}
	.device-wrap {
		margin-top:  2em;
	}
}


/* ========== Grid  ========== */
#main section.section.section-hero {
	padding-bottom: 0;
}
#main section.section.section-features {
	padding-bottom: 0;
}
#main section.section.section-topics {
	padding-top: 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;
	}
}