model {
	/* position: absolute;
    top: 0;
    left: 0; */
	width: 100%;
	height: 100%;
	min-height: 500px;
	border-radius: 1em;
	background-color: rgb(234, 244, 255);
	touch-action: none;
}

.relar [data-hide-on-relar] {
	display: none;
}

.section-models figcaption {
	margin-top: 0.8em;
}

.section-models figcaption a {
	margin-top: 0;
	color: #515154;
	text-decoration: none;
}
.section-models figcaption a:hover {
	color: #515154;
	text-decoration: underline;
}

.section-animations a,
.section-reality a,
.section-models a,
.section-actions a,
.section-inline model {
	display: inline-block;
	margin-top: 4em;
}

.section-examples a {
	display: inline-block;
	margin: 4em auto 1em;
}

.image-model + div.block-link {
	margin-top: 0.6em;
}

span.block-link {
	margin-top: 1em;
	color: #0070c9;
	cursor: pointer;
}
.block-link:hover {
	text-decoration: underline;
}

.ar-icon {
	width: 1.2em;
	height: 1.2em;
	margin: -10px 0.12em 0;
}

body[data-color-scheme="dark"] .ar-icon {
	filter: invert(1);
}

model {
    background-color: white;
    width:250px;
    height:250px;
    min-height: 250px;
}

.image-model {
	margin: 0 auto;
	width: 250px;
	height: 250px;
	border-radius: 10px;
}

.device-rotate {
	margin: -2em auto -10em;
	transform: rotate(-93deg);
}
.screen-examples {
	background-image: url("/augmented-reality/quick-look/images/screen-quick-look-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-examples {
		background-image: url("/augmented-reality/quick-look/images/screen-quick-look-large_2x.png");
	}
}

.image-example {
	margin: 0 auto 1em;
	width: 250px;
	height: 250px;
	border-radius: 10px;
	background-size: 250px 250px;
	background-repeat: no-repeat;
	background-position: center;
}

.example-clock {
	background-image: url("/augmented-reality/quick-look/models/clock-alarm/clock-alarm.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) {
	.example-clock {
		background-image: url("/augmented-reality/quick-look/models/clock-alarm/clock-alarm_2x.png");
	}
}

.example-bethesda {
	background-image: url("/augmented-reality/quick-look/images/bethesda.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) {
	.example-bethesda {
		background-image: url("/augmented-reality/quick-look/images/bethesda_2x.png");
	}
}

.example-sofie {
	background-image: url("/augmented-reality/quick-look/images/sofie.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) {
	.example-sofie {
		background-image: url("/augmented-reality/quick-look/images/sofie_2x.png");
	}
}

.example-bango {
	background-image: url("/augmented-reality/quick-look/images/b-o.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) {
	.example-bango {
		background-image: url("/augmented-reality/quick-look/images/b-o_2x.jpg");
	}
}

.example-zemi {
	background-image: url("/augmented-reality/quick-look/images/zemi.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) {
	.example-zemi {
		background-image: url("/augmented-reality/quick-look/images/zemi_2x.jpg");
	}
}

.device-crop-top {
	height: 320px;
	overflow: hidden;
	margin-right: 30px;
	margin-bottom: -2.11765em;
}
@media only screen and (max-width: 1068px) {
	.device-crop-top {
		height: 256px;
	}
}
@media only screen and (max-width: 734px) {
	.device-crop-top {
		margin-bottom: 1rem;
		height: 160px;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid #d2d2d7;
		width: 160px;
	}
}
.device-crop-top > div {
	margin-left: auto;
	margin-right: auto;
}

.flex-row {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.icon-reality-converter {
	margin: 0 auto 1em;
	width: 96px;
	height: 96px;
	background-size: 96px 96px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/reality-converter-mac/reality-converter-macos-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-reality-converter {
		background-image: url("/assets/elements/icons/reality-converter-mac/reality-converter-macos-96x96.png");
	}
}

@media only screen and (max-width: 1068px) {
	.device-rotate {
		margin: -2em auto -8em;
	}
	.screen-examples {
		background-image: url("/augmented-reality/quick-look/images/screen-quick-look-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-examples {
			background-image: url("/augmented-reality/quick-look/images/screen-quick-look-medium_2x.png");
		}
	}
}

@media only screen and (max-width: 734px) {
	.device-rotate {
		margin: -2em auto -4em;
	}
	.screen-examples {
		background-image: url("/augmented-reality/quick-look/images/screen-quick-look-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) {
		.screen-examples {
			background-image: url("/augmented-reality/quick-look/images/screen-quick-look-small_2x.png");
		}
	}
	.section-animated a,
	.section-reality a,
	.section-models a,
	.section-actions a,
	.section-inline model {
		margin-top: 2em;
	}
	.section-examples a {
		margin: 1em auto;
	}
}

/* ========== Grid ========== */
#main section.section.divider-bottom {
	padding-bottom: 0;
	border-bottom: none;
}
#main section.section.divider-bottom .section-content {
	padding-bottom: 4em;
	border-bottom: 1px solid #dadada;
}

@media only screen and (max-width: 734px) {
	#main section.section.divider-bottom {
		padding-bottom: 0;
	}
	#main section.section.divider-bottom .section-content {
		padding-bottom: 2em;
	}
}

/* === DARK MODE === */
body[data-color-scheme="dark"] .section-models figcaption a,
body[data-color-scheme="dark"]#quick-look .section-models figcaption a:hover {
	color: var(--glyph-gray-secondary-alt);
}