.bg-alt {
	background-color: #f2f2f2;
}

.bg-yellow {
	background: linear-gradient(135deg,  #f8f5e2 0%,#fafafa 100%);
}

.bg-blue-gradient-alt {
	background: linear-gradient(135deg, #d2e3f3 0%, #eff5f9 100%);
}

.headline-row {
	text-align: center;
}

.section.theme-dark {
	background-color: #000;
	color: #fff;
}


/* Images */

.lockup-hero {
	margin-top: 2em;
	width: 830px;
	height: 620px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/augmented-reality/images/lockup-hero-large.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
	.lockup-hero {
		background-image: url("/augmented-reality/images/lockup-hero-large_2x.png");
	}
}

.arkit-glyph {
	margin-bottom: 2em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/augmented-reality/images/arkit-glyph.svg");
}

.icon-reality-composer {
	margin-bottom: 1.5em;
	height: 96px;
	width: 96px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/reality-composer-ios/reality-composer-ios-96x96.png");
	background-size: 96px 96px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
	.icon-reality-composer {
		background-image: url("/assets/elements/icons/reality-composer-ios/reality-composer-ios-96x96_2x.png");
	}
}

.icon-reality-kit {
	margin-right: auto;
	margin-left: auto;
	height: 256px;
	width: 256px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/realitykit/realitykit-256x256_2x.png");
	background-size: 256px 256px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
	.icon-reality-kit {
		background-image: url("/assets/elements/icons/realitykit/realitykit-256x256_2x.png");
	}
}

.icon-app-store {
	margin-bottom: 1.5em;
	height: 96px;
	width: 96px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/app-store/app-store-96x96.png");
	background-size: 96px 96px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
	.icon-app-store {
		background-image: url("/assets/elements/icons/app-store/app-store-96x96_2x.png");
	}
}

.section-arkit {
	height: 463px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right top;
	background-image: url("/augmented-reality/images/lifestyle-lidar-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) {
	.section-arkit {
		background-image: url("/augmented-reality/images/lifestyle-lidar-large_2x.jpg");
	}
}

.section-realitykit2 .section-content .row .column {
	align-self: center;
}

.lockup-realitykit {
	margin-top: 3em;
	width: 980px;
	height: 486px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	background-image: url("/augmented-reality/tools/images/hero-lockup-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) {
	.lockup-realitykit {
		background-image: url("/augmented-reality/tools/images/hero-lockup-large_2x.png");
	}
}

.creation-image {
	margin: 2em auto 0;
}
.screen-creation {
	background: url("/augmented-reality/images/screen-creation-large.jpg");
	background-size: 100% 100%;
}
@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-creation {
		background-image: url("/augmented-reality/images/screen-creation-large_2x.jpg")
	}
}

.router-icon-service {
	margin-bottom: 1em;
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/wwdr-unified/service.svg");
}

@media only screen and (max-width: 1068px) {
	.lockup-hero {
		width: 692px;
		height: 517px;
		background-image: url("/augmented-reality/images/lockup-hero-medium.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
		.lockup-hero {
			background-image: url("/augmented-reality/images/lockup-hero-medium_2x.png");
		}
	}
	.section-arkit {
		height: 529px;
		background-position: 87% top;
	}
	.lockup-realitykit {
		width: 692px;
		height: 343px;
		background-image: url("/augmented-reality/tools/images/hero-lockup-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) {
		.lockup-realitykit {
			background-image: url("/augmented-reality/tools/images/hero-lockup-medium_2x.png");
		}
	}
	.screen-creation {
		background: url("/augmented-reality/images/screen-creation-medium.jpg");
		background-size: 100% 100%;
	}
	@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-creation {
			background-image: url("/augmented-reality/images/screen-creation-medium_2x.jpg")
		}
	}
}

@media only screen and (max-width: 734px) {
	.lockup-hero {
		margin-top: 1em;
		width: 310px;
		height: 232px;
		background-image: url("/augmented-reality/images/lockup-hero-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
		.lockup-hero {
			background-image: url("/augmented-reality/images/lockup-hero-small_2x.png");
		}
	}
	.headline-row {
		text-align: left;
	}
	.section-arkit {
		height: unset;
		background-size: cover;
		background-position: right bottom;
		background-image: url("/augmented-reality/images/lifestyle-lidar-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) {
		.section-arkit {
			background-image: url("/augmented-reality/images/lifestyle-lidar-small_2x.jpg");
		}
	}
	.section-realitykit2 .section-content .row .column {
		align-self: top;
	}
	.lockup-realitykit {
		margin-top: 2em;
		width: 300px;
		height: 148px;
		background-image: url("/augmented-reality/tools/images/hero-lockup-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) {
		.lockup-realitykit {
			background-image: url("/augmented-reality/tools/images/hero-lockup-small_2x.png");
		}
	}
	.creation-image {
		margin: 0 auto 0;
	}
	.screen-creation {
		background: url("/augmented-reality/images/screen-creation-small.jpg");
		background-size: 100% 100%;
	}
	@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-creation {
			background-image: url("/augmented-reality/images/screen-creation-small_2x.jpg")
		}
	}
}

@media only screen and (max-width: 414px) {
	.section-arkit {
		background-position: 50% bottom;
	}
}

@media only screen and (max-width: 320px) {
	.lockup-hero {
		width: 280px;
		height: 209px;
	}
}

/* Gallery */
.row-models {
	margin-top: 2em;
}
.image-model {
	margin: 0 auto;
	width: 250px;
	height: 250px;
	border-radius: 10px;
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: center;
}
.model-drummertoy {
	background-image: url("/augmented-reality/quick-look/models/drummertoy/drummertoy.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) {
    .model-drummertoy {
        background-image: url("/augmented-reality/quick-look/models/drummertoy/drummertoy_2x.jpg");
    }
}
.model-biplane {
	background-image: url("/augmented-reality/quick-look/models/biplane/biplane.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) {
    .model-biplane {
        background-image: url("/augmented-reality/quick-look/models/biplane/biplane_2x.jpg");
    }
}
.model-vintagerobot2k {
	background-image: url("/augmented-reality/quick-look/models/vintagerobot2k/vintagerobot2k.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) {
    .model-vintagerobot2k {
        background-image: url("/augmented-reality/quick-look/models/vintagerobot2k/vintagerobot2k_2x.jpg");
    }
}
.model-toycar {
	background-image: url("/augmented-reality/quick-look/models/toycar/toycar.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) {
    .model-toycar {
        background-image: url("/augmented-reality/quick-look/models/toycar/toycar_2x.jpg");
    }
}

@media only screen and (max-width: 1068px) {
	.row-models {
		margin-top: 0;
	}
	.image-model {
		margin: 0 auto;
		width: 173px;
		height: 173px;
		background-size: 173px 173px;
	}
}
@media only screen and (max-width: 734px) {
	.image-model {
		margin: 0 auto;
		width: 100px;
		height: 100px;
		background-size: 100px 100px;
	}
	#main section .section-content .row.row-models > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 414px) {
	.image-model {
		margin: 0 auto;
		width: 90px;
		height: 90px;
		background-size: 90px 90px;
	}
}

@media only screen and (max-width: 375px) {
	.image-model {
		margin: 0 auto;
		width: 82px;
		height: 82px;
		background-size: 82x 82px;
	}
}

@media only screen and (max-width: 320px) {
	.image-model {
		margin: 0 auto;
		width: 70px;
		height: 70px;
		background-size: 70x 70px;
	}
}


/* ========== Grid ========== */
#main section.section.section-arkit {
	padding-bottom: 0;
}
#main section .section-content .row > .column.copy-column {
	padding-bottom: 4em;
}
@media only screen and (max-width: 734px) {
	#main section .section-content .row > .column.copy-column {
		padding: 0 0 55% 0;
	}
}
@media only screen and (max-width: 320px) {
	#main section .section-content .row > .column.copy-column {
		padding: 0 0 94% 0;
	}
}

/* === DARK MODE === */
body[data-color-scheme="dark"] section.section-gallery {background-color: var(--fill-override); color: var(--glyph-gray-override);}
body[data-color-scheme="dark"] section.section-gallery a {color: var(--glyph-blue-override);}
body[data-color-scheme="dark"] section.section-gallery h2 {color: var(--glyph-gray-override);}
body[data-color-scheme="dark"] section.section-gallery p {color: var(--glyph-gray-override);}