/* chapternav */
.chapternav-icon {
	width:54px;
	height:54px;
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
}

.chapternav .chapternav-item-ios-ipados .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-ios-ipados-f.svg");
}
.chapternav .chapternav-item-macos .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-macos-f.svg");
}
.chapternav .chapternav-item-ios .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-ios-f.svg");
}
.chapternav .chapternav-item-watchos .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-watchos-f.svg");
}
.chapternav .chapternav-item-tvos .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-tvos-f.svg");
}
.chapternav .chapternav-item-videos .chapternav-icon { 
	background-image: url("/assets/elements/icons/chapternav/icon-videos-f.svg");
}  
.chapternav .chapternav-item-downloads .chapternav-icon { 
	background-image: url("/assets/elements/icons/chapternav/icon-downloads-f.svg");
}  


.theme-dark .chapternav,
.chapternav.theme-dark; {
	background:rgba(51,51,51,0.9);
}
.theme-dark .chapternav .chapternav-item-ios-ipados .chapternav-icon,
.chapternav.theme-dark .chapternav-item-ios-ipados .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-ios-ipados-f-i.svg");
}
.theme-dark .chapternav .chapternav-item-macos .chapternav-icon,
.chapternav.theme-dark .chapternav-item-macos .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-macos-f-i.svg");
}
.theme-dark .chapternav .chapternav-item-ios .chapternav-icon,
.chapternav.theme-dark .chapternav-item-ios .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-ios-f-i.svg");
}
.theme-dark .chapternav .chapternav-item-watchos .chapternav-icon,
.chapternav.theme-dark .chapternav-item-watchos .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-watchos-f-i.svg");
}
.theme-dark .chapternav .chapternav-item-tvos .chapternav-icon,
.chapternav.theme-dark .chapternav-item-tvos .chapternav-icon {
	background-image:url("/assets/elements/icons/platforms/icon-tvos-f-i.svg");
}
.theme-dark .chapternav .chapternav-item-videos .chapternav-icon, 
.chapternav.theme-dark .chapternav-item-videos .chapternav-icon { 
	background-image: url("/assets/elements/icons/chapternav/icon-videos-f-i.svg");
}  
.theme-dark .chapternav .chapternav-item-downloads .chapternav-icon, 
.chapternav.theme-dark .chapternav-item-downloads .chapternav-icon { 
	background-image: url("/assets/elements/icons/chapternav/icon-downloads-f-i.svg");
}


/* banner */
#main section.section.section-banner {
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: center;
	font-size: 14px;
	background-color: #0071e3;
}
#main section.section.section-banner p {
	margin: 0;
	padding: 0;
}
#main section.section.section-banner a {
	color: #fff;
}


/* #main */
.bg-gradient {
	background: linear-gradient(to bottom, #ffffff 0%,#d6e3f2 100%);
}

.section-sf-symbols {
	margin-bottom: 16px;
}

.section-banner {
	background: linear-gradient(180deg, #399fd5 0%, #0983ff 100%);
}
.section-banner a {
	color: white;
}

.section-hig {
	padding-top: 180px;
	padding-bottom: 64px;
	background: #0983ff;
	background: -moz-linear-gradient(180deg, #399fd5 0%, #0983ff 100%);
	background: -webkit-linear-gradient(180deg, #399fd5 0%, #0983ff 100%);
	background: linear-gradient(180deg, #399fd5 0%, #0983ff 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#399fd5', endColorstr='#0983ff', GradientType=0);
	color: white;
	position: relative;
}

.section-hig .typography-intro {
	color: #fff;
}

.image-hig-hero {
	width: 503px;
	height: 174px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -251px;
	background-image: url(/design/images/hig-hero-large.png);
	background-size: 503px 174px;
	background-position: center;
	background-repeat: no-repeat;
}

@media only screen and (max-width: 735px) {
	.section-hig {
		padding-top: 120px;
	}
	.image-hig-hero {
		width: 301px;
		height: 104px;
		margin-left: -150px;
		background-image: url(/design/images/hig-hero-small.png);
		background-size: 301px 104px;
	}
}

.section-hig a {
	color: white;
	padding-left: 20px;
	padding-right: 20px;
}

.hig-links {
	padding-top: 48px;
}

.section-design-awards {
	padding-top: 5em;
	padding-bottom: 5em;
	margin-bottom: 16px;
	background-color: rgb(18,22,30);
	color: #FAFAFA;
	background-image: url(/design/images/ada-2021-hero.jpg?1);
	background-size: 3080px 770px;
	background-position: calc(50% - 250px) center;
	background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	.section-design-awards {
		background-image: url(/design/images/ada-2021-hero_2x.jpg?1);
	}
}

@media only screen and (max-width: 950px) {
	.section-design-awards {
		background-position: calc(50% - 200px) center;
	}
}

@media only screen and (max-width: 735px) {
	.section-design-awards {
		padding-top: 18em;
		background-image: url(/design/images/ada-2021-hero-small.jpg?1);
		background-position: center top;
		background-size: 749px 634px;
		background-repeat: no-repeat;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 735px), only screen and (min-resolution: 1.5dppx) and (max-width: 735px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 735px), (min-resolution: 144dpi) and (max-width: 735px) {
	.section-design-awards {
		background-image: url(/design/images/ada-2021-hero-small_2x.jpg?1);
	}
}

.section-videos {
	padding-top: 128px;
	padding-bottom: 128px;
	background-image: url(/design/images/bg-videos.jpg);
	background-size: cover;
	margin-bottom: 16px;
}

.section-videos a {
	color: white;
}

.clearfix:after {
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

/* Accessibility */

.section-accessibility {
	background-color: #FAFAFA;
	padding-top: 64px;
	padding-bottom: 64px;
	width: 50%;
	float: left;
	min-height: 380px;
	text-align: center;
	margin-bottom: 16px;
}

.section-accessibility .section-content {
	width: 100%;
	max-width: 490px;
	float: right;
}

.section-accessibility a {
	max-width: 360px;
	margin: 0 auto;
}

@media only screen and (max-width: 1068px) {
	.section-accessibility {
		min-height: 400px;
	}
	.section-accessibility .section-content {
		max-width: 346px;
	}
}

@media only screen and (max-width: 735px) {
	.section-accessibility {
		width: 100%;
		float: none;
		margin-left: 0;
		min-height: auto;
	}
	.section-accessibility .section-content {
		width: 87.5%;
		max-width: inherit;
		float: none;
	}
}


/* Localization */

.section-localization {
	background-color: #FAFAFA;
	padding-top: 64px;
	padding-bottom: 64px;
	width: 49%;
	float: left;
	margin-left: 1%;
	min-height: 380px;
	text-align: center;
	margin-bottom: 16px;
}

.section-localization .section-content {
	width: 99%;
	max-width: 490px;
	float: left;
}

.section-localization a {
	max-width: 360px;
	margin: 0 auto;
}

@media only screen and (max-width: 1068px) {
	.section-localization {
		min-height: 400px;
	}
	.section-localization .section-content {
		max-width: 346px;
	}
}

@media only screen and (max-width: 735px) {
	.section-localization {
		width: 100%;
		float: none;
		margin-left: 0;
		min-height: auto;
	}
	.section-localization .section-content {
		width: 87.5%;
		max-width: inherit;
		float: none;
	}
}

/* App Store */

.section-app-store {
	background-color: #FAFAFA;
	padding-top: 64px;
	padding-bottom: 64px;
	width: 50%;
	float: left;
	min-height: 380px;
	text-align: center;
	margin-bottom: 16px;
	min-height: 600px;
}

.section-app-store .section-content {
	width: 100%;
	max-width: 490px;
	float: right;
}

.section-app-store a {
	max-width: 360px;
	margin: 0 auto;
}

@media only screen and (max-width: 1068px) {
	.section-app-store .section-content {
		max-width: 346px;
	}
}

@media only screen and (max-width: 735px) {
	.section-app-store {
		width: 100%;
		float: none;
		margin-left: 0;
		min-height: auto;
	}
	.section-app-store .section-content {
		width: 87.5%;
		max-width: inherit;
		float: none;
	}
}


/* accessories */

.section-accessories {
	background-color: #FAFAFA;
	padding-top: 64px;
	padding-bottom: 64px;
	width: 49%;
	float: left;
	margin-left: 1%;
	min-height: 380px;
	text-align: center;
	margin-bottom: 16px;
	min-height: 600px;
}

.section-accessories .section-content {
	width: 99%;
	max-width: 490px;
	float: left;
}

.section-accessories a {
	max-width: 360px;
	margin: 0 auto;
}

@media only screen and (max-width: 1068px) {
	.section-accessories .section-content {
		max-width: 346px;
	}
}

@media only screen and (max-width: 735px) {
	.section-accessories {
		width: 100%;
		float: none;
		margin-left: 0;
		min-height: auto;
	}
	.section-accessories .section-content {
		width: 87.5%;
		max-width: inherit;
		float: none;
	}
}

/* 
[lang="zh-CN"] .section-accessibility,
[lang="zh-CN"] .section-localization,
[lang="ja-JP"] .section-accessibility,
[lang="ja-JP"] .section-localization,
*/
[lang="ko-KR"] .section-accessibility,
[lang="ko-KR"] .section-localization {
	min-height: 620px;
}

/*
[lang="ja-JP"] .section-app-store,
[lang="ja-JP"] .section-accessories {
	min-height: 630px;
}
 */

@media only screen and (max-width: 735px) {
	[lang="zh-CN"] .section-accessibility,
	[lang="zh-CN"] .section-localization,
	[lang="ja-JP"] .section-accessibility,
	[lang="ja-JP"] .section-localization,
	[lang="ko-KR"] .section-accessibility,
	[lang="ko-KR"] .section-localization,
	[lang="ja-JP"] .section-app-store,
	[lang="ja-JP"] .section-accessories {
		min-height: auto;
	}
}

figure[data-figure-id="icon-accessibility"] {
	width: 128px;
	height: 128px;
	margin: 2em auto 0;
	background-size: 128px 128px;
	background-image: url(/design/images/icon-accessibility.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) {
	figure[data-figure-id="icon-accessibility"] {
		background-image: url(/design/images/icon-accessibility_2x.png);
	}
}

figure[data-figure-id="icon-localization"] {
	width: 128px;
	height: 128px;
	margin: 2em auto 0;
	background-size: 128px 128px;
	background-image: url(/design/images/icon-localization.png);
	background-repeat: no-repeat;
	background-position: center;
}
@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) {
	figure[data-figure-id="icon-localization"] {
		background-image: url(/design/images/icon-localization_2x.png);
	}
}


figure[data-figure-id="icon-app-store"] {
	width: 128px;
	height: 128px;
	margin: 2em auto 0;
	background-size: 128px 128px;
	background-image: url(/assets/elements/icons/app-store/app-store-128x128.png);
}

figure[data-figure-id="icon-accessories"] {
	width: 128px;
	height: 128px;
	margin: 2em auto 0;
	background-size: 128px 128px;
	background-image: url(/design/images/icon-accessories.png);
}

figure[data-figure-id="image-iphone-hero"] {
	width: 600px;
	height: 145px;
	margin: 72px auto 16px;
	background-size: 600px 145px;
	background-image: url(/design/images/iphone-large.png);
}

@media only screen and (max-width: 735px) {
	figure[data-figure-id="image-iphone-hero"] {
		width: 282px;
		height: 90px;
		background-size: 282px 68px;
		background-image: url(/design/images/iphone-small.png);
		background-repeat: no-repeat;
		margin: 48px auto 0;
	}
}


/* === DARK MODE === */
	body[data-color-scheme="dark"] .bg-gradient {background:linear-gradient(to bottom, var(--fill-blue-gradient-light) 0%, var(--fill-blue-gradient-dark) 100%);}
	body[data-color-scheme="dark"] .section-design-awards {background-color:#040506;}
	body[data-color-scheme="dark"] .section-hig a {color:var(--light);}
	body[data-color-scheme="dark"] .section-accessibility {background-color:var(--fill-secondary-alt);}
	body[data-color-scheme="dark"] .section-localization {background-color:var(--fill-secondary-alt);}
	body[data-color-scheme="dark"] .section-app-store {background-color:var(--fill-secondary-alt);}
	body[data-color-scheme="dark"] .section-accessories {background-color:var(--fill-secondary-alt);}
	body[data-color-scheme="dark"] .chapternav .chapternav-item-ios-ipados .chapternav-icon {background-image:url("/assets/elements/icons/platforms/icon-ios-ipados-f-i.svg");}
	body[data-color-scheme="dark"] .chapternav .chapternav-item-macos .chapternav-icon {background-image:url("/assets/elements/icons/platforms/icon-macos-f-i.svg");}
	body[data-color-scheme="dark"] .chapternav .chapternav-item-ios .chapternav-icon {background-image:url("/assets/elements/icons/platforms/icon-ios-f-i.svg");}
	body[data-color-scheme="dark"] .chapternav .chapternav-item-watchos .chapternav-icon {background-image:url("/assets/elements/icons/platforms/icon-watchos-f-i.svg");}
	body[data-color-scheme="dark"] .chapternav .chapternav-item-tvos .chapternav-icon {background-image:url("/assets/elements/icons/platforms/icon-tvos-f-i.svg");}
	body[data-color-scheme="dark"] .chapternav .chapternav-item-videos .chapternav-icon {background-image: url("/assets/elements/icons/chapternav/icon-videos-f-i.svg");}  
	body[data-color-scheme="dark"] .chapternav .chapternav-item-downloads .chapternav-icon {background-image: url("/assets/elements/icons/chapternav/icon-downloads-f-i.svg");}