#mac-catalyst .link-mac-catalyst {
	color: rgba(51, 51, 51, 0.6);
	pointer-events: none;
}

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
	/* Blur Navigation Bar */

	#ac-localnav.ac-localnav-scrim .ac-ln-background {
		background-color: rgba(255, 255, 255, 0.65);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px)
	}
}

.bg-grad {
	background: linear-gradient(to bottom,  #ffffff 0%,#e6e6e6 90%);
}

.button-pill {
	border-radius: 1em;
}

.row-section {
	margin-top: 4em;
}
.row-section:first-of-type {
	margin-top: 8em;
}

@media only screen and (max-width: 735px) {
	.row-section {
		margin-top: 2em;
	}
	.row-section:first-of-type {
		margin-top: 4em;
	}
}

.developer-router-links a.block {
	width: 218px;
}

/* ===== Images ===== */
.lockup-hero {
	margin: 4em auto 0;
	width:100%;
	height: 465px;
	background-size: 1127px 465px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/mac-catalyst/images/lockup-hero-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-hero {
		background-image: url("/mac-catalyst/images/lockup-hero-large_2x.png");
	}
}

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

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

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

.tabnav-icon {
	width: 48px;
	height: 48px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.icon-app-one {
	background-image: url("/mac-catalyst/images/icon-twitter-48x48.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-one {
		background-image: url("/mac-catalyst/images/icon-twitter-48x48_2x.png");
	}
}
.icon-app-two {
	background-image: url("/mac-catalyst/images/icon-jira-48x48.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-two {
		background-image: url("/mac-catalyst/images/icon-jira-48x48_2x.png");
	}
}
.icon-app-three {
	background-image: url("/mac-catalyst/images/icon-morpholio-48x48.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-three {
		background-image: url("/mac-catalyst/images/icon-morpholio-48x48_2x.png");
	}
}
.icon-app-four {
	background-image: url("/mac-catalyst/images/icon-tripit-48x48.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-four {
		background-image: url("/mac-catalyst/images/icon-tripit-48x48_2x.png");
	}
}
.icon-app-five {
	background-image: url("/mac-catalyst/images/icon-postit-48x48.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-five {
		background-image: url("/mac-catalyst/images/icon-postit-48x48_2x.png");
	}
}
.icon-app-six {
	background-image: url("/mac-catalyst/images/icon-goodnotes-48x48.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-six {
		background-image: url("/mac-catalyst/images/icon-goodnotes-48x48_2x.png");
	}
}

.device-screen.screen-twitter {
	background-image: url("/mac-catalyst/images/screen-twitter-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) {
	.device-screen.screen-twitter {
		background-image: url("/mac-catalyst/images/screen-twitter-large_2x.png");
	}
}
.device-screen.screen-jira {
	background-image: url("/mac-catalyst/images/screen-jira-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) {
	.device-screen.screen-jira {
		background-image: url("/mac-catalyst/images/screen-jira-large_2x.png");
	}
}
.device-screen.screen-morpholio {
	background-image: url("/mac-catalyst/images/screen-morpholio-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) {
	.device-screen.screen-morpholio {
		background-image: url("/mac-catalyst/images/screen-morpholio-large_2x.png");
	}
}
.device-screen.screen-tripit {
	background-image: url("/mac-catalyst/images/screen-tripit-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) {
	.device-screen.screen-tripit {
		background-image: url("/mac-catalyst/images/screen-tripit-large_2x.png");
	}
}
.device-screen.screen-postit {
	background-image: url("/mac-catalyst/images/screen-postit-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) {
	.device-screen.screen-postit {
		background-image: url("/mac-catalyst/images/screen-postit-large_2x.png");
	}
}
.device-screen.screen-goodnotes {
	background-image: url("/mac-catalyst/images/screen-goodnotes-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) {
	.device-screen.screen-goodnotes {
		background-image: url("/mac-catalyst/images/screen-goodnotes-large_2x.png");
	}
}


@media only screen and (max-width: 1068px) {
	.lockup-hero {
		width: 100%;
		height: 329px;
		background-size: 796px 329px;
		background-image: url("/mac-catalyst/images/lockup-hero-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-hero {
			background-image: url("/mac-catalyst/images/lockup-hero-medium_2x.png");
		}
	}
	.device-screen.screen-twitter {
		background-image: url("/mac-catalyst/images/screen-twitter-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) {
		.device-screen.screen-twitter {
			background-image: url("/mac-catalyst/images/screen-twitter-medium_2x.png");
		}
	}
	.device-screen.screen-jira {
		background-image: url("/mac-catalyst/images/screen-jira-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) {
		.device-screen.screen-jira {
			background-image: url("/mac-catalyst/images/screen-jira-medium_2x.png");
		}
	}
	.device-screen.screen-morpholio {
		background-image: url("/mac-catalyst/images/screen-morpholio-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) {
		.device-screen.screen-morpholio {
			background-image: url("/mac-catalyst/images/screen-morpholio-medium_2x.png");
		}
	}
	.device-screen.screen-tripit {
		background-image: url("/mac-catalyst/images/screen-tripit-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) {
		.device-screen.screen-tripit {
			background-image: url("/mac-catalyst/images/screen-tripit-medium_2x.png");
		}
	}
	.device-screen.screen-postit {
		background-image: url("/mac-catalyst/images/screen-postit-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) {
		.device-screen.screen-postit {
			background-image: url("/mac-catalyst/images/screen-postit-medium_2x.png");
		}
	}
	.device-screen.screen-goodnotes {
		background-image: url("/mac-catalyst/images/screen-goodnotes-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) {
		.device-screen.screen-goodnotes {
			background-image: url("/mac-catalyst/images/screen-goodnotes-medium_2x.png");
		}
	}
}


@media only screen and (max-width: 735px) {
	.lockup-hero {
		margin: 2em auto 0;
		width: 100%;
		height: 143px;
		background-size: 345px 143px;
		background-image: url("/mac-catalyst/images/lockup-hero-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-hero {
			background-image: url("/mac-catalyst/images/lockup-hero-small_2x.png");
		}
	}
	.device-screen.screen-twitter {
		background-image: url("/mac-catalyst/images/screen-twitter-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) {
		.device-screen.screen-twitter {
			background-image: url("/mac-catalyst/images/screen-twitter-small_2x.png");
		}
	}
	.device-screen.screen-jira {
		background-image: url("/mac-catalyst/images/screen-jira-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) {
		.device-screen.screen-jira {
			background-image: url("/mac-catalyst/images/screen-jira-small_2x.png");
		}
	}
	.device-screen.screen-morpholio {
		background-image: url("/mac-catalyst/images/screen-morpholio-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) {
		.device-screen.screen-morpholio {
			background-image: url("/mac-catalyst/images/screen-morpholio-small_2x.png");
		}
	}
	.device-screen.screen-tripit {
		background-image: url("/mac-catalyst/images/screen-tripit-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) {
		.device-screen.screen-tripit {
			background-image: url("/mac-catalyst/images/screen-tripit-small_2x.png");
		}
	}
	.device-screen.screen-postit {
		background-image: url("/mac-catalyst/images/screen-postit-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) {
		.device-screen.screen-postit {
			background-image: url("/mac-catalyst/images/screen-postit-small_2x.png");
		}
	}
	.device-screen.screen-goodnotes {
		background-image: url("/mac-catalyst/images/screen-goodnotes-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) {
		.device-screen.screen-goodnotes {
			background-image: url("/mac-catalyst/images/screen-goodnotes-small_2x.png");
		}
	}
}


/* ===== TabNav ===== */
.tabnav-wrapper.set-height {
	margin-top: 1em;
	height: 6.75em;
}
.tabnav {
	width: 100%;
	position: relative;
	overflow: hidden;
	height: 3.17647em;
	font-size: 17px;
	text-align: center;
	z-index: 1;
}
.tabnav .tabnav-items {
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	padding: 0;
	width: 100%;
}
html.touch .tabnav .tabnav-items {
	margin: 0;
	padding-left: 34px;
	padding-right: 34px;
}
.tabnav.with-icons {
	height: 5.7em;
}
.tabnav.with-icons .tabnav-icon {
	margin: 0 auto 0.5em;
}
.tabnav .tabnav-item {
	display: inline-block;
	padding-left: 60px;
	border-bottom: 1px solid #d6d6d6;
	list-style: none;
	outline: none;
}
.tabnav .tabnav-item:first-child {
	padding-left: 0;
}
.tabnav-link {
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.021em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	padding: 9px 0 11px;
	margin-top: 2px;
	margin-bottom: 4px;
	color: #666666;
	outline: none;
	text-align: left;
	text-decoration: none;
	display: block;
	position: relative;
	z-index: 0;
}
.tabnav-link:lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(ja) {
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(ko) {
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(th) {
	letter-spacing: 0em;
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(zh) {
	letter-spacing: 0em;
}
.tabnav-link:lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.tabnav-link:lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.with-paddles .tabnav-link {
	text-align: center;
}
.tabnav-link:hover {
	color: #0070c9;
	text-decoration: none;
}
.tabnav-link:focus {
	outline-offset: -1px;
}
.tabnav-link.current {
	pointer-events: none;
	color: #333333;
	text-decoration: none;
	cursor: default;
	z-index: 10;
}
.tabnav-link.current:after {
	left: 0;
	position: absolute;
	bottom: -5px;
	width: 100%;
	border-bottom: 1px solid #666666;
	content: '';
}

.theme-dark .tabnav .tabnav-item {
	border-bottom-color: #444444;
}
.theme-dark .tabnav .tabnav-link {
	color: #999999;
}
.theme-dark .tabnav .tabnav-link:hover {
	color: #66bbff;
}
.theme-dark .tabnav .tabnav-link.current {
	color: #cccccc;
}
.theme-dark .tabnav .tabnav-link.current:after {
	border-bottom-color: #999999;
}

@media only screen and (max-width: 1068px) {
	.tabnav .tabnav-item {
	  padding-left: 50px;
	}
}

@media only screen and (max-width: 735px) {
	.tabnav-wrapper.set-height {
		height: 5.75em;
	}
	html.touch .tabnav .tabnav-items {
		margin: 0;
		padding-left: 6.5%;
		padding-right: 6.5%;
	}
	.tabnav .tabnav-item {
	  padding-left: 30px;
	}
}

/* ===== Gallery ===== */
.gallery-content {
	width: 980px;
	margin: 0 auto;
}
.gallery-device {
	margin-top: 1.5em;
}
.gallery-captions {
	position: relative;
	width: 552px;
	margin: 0 auto;
	text-align: center;
}

@media only screen and (max-width: 1068px) {
	.gallery-content {
		width: 692px;
	}
	.gallery-captions {
		width: 502px;
	}
}

@media only screen and (max-width: 735px) {
	.gallery-content {
		width: 100%;
	}
	.gallery-device {
		margin-top: 0;
	}
	.gallery-captions {
		width: 87%;
		max-width: 402px;
		margin: 1em auto 0;
		text-align: left;
	}
	.tabnav.with-icons {
		width: 87%;
	}
}


/* ========== Grid ========== */
#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

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