.overlay p {
	margin: 0.0px 0.0px 0.0px 0.0px;
	font: 16.0px 'Helvetica Neue';
	min-height: 16.0px;
	line-height: 24px;
}

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

.bg-blue {
	background-color: #ebf1f8;
}

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


.tile-flex {
	margin-top: 0.3em;
	display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
}
.tile-tools {
	position: relative;
	flex: 1 0 auto;
    align-self: stretch;
    margin-top: 20px;
	margin-left: 20px;
	width: 333px;
	padding: 1.5em 2em 2em;
	background-color: #fff;
	border-radius: 1em;
}
.tile-flex > .tile-tools:nth-of-type(odd) {
	margin-left: 0;
}
.tile-flex > .tile-tools:nth-of-type(even) {
	float: right;
}
.tile-tools h5 {
	font-size: 17px;
}
.tile-tools p:not(.tile-button) {
	margin-bottom: 3.2em;
}
.tile-button {
	position: absolute;
	bottom: 2em;
}
.tile-tools.tile-tools-placeholder {
	background-color: unset;
}


ul.hig-list {
	position: relative;
	list-style: none;
	margin: 1em 0 0 -27px;
	white-space: nowrap;
    z-index: 1;
}
ul.hig-list li {
	box-sizing: border-box;
    position: relative;
	display: inline-block;
	float: left;
    vertical-align: top;
    margin: 0;
    padding: 0;
    width: 25%;
    min-height: 2px;
    z-index: 1;
}
ul.hig-list li a {
	display: block;
    position: relative;
    text-align: center;
    z-index: 1;
}
ul.hig-list li a span {
	font-size: 11px;
	line-height: 1.09091;
	font-weight: 400;
	letter-spacing: 0.005em;
	display: block;
	margin: 0;
}
#main section .section-content ul.hig-list.row {
	margin-left: -27px;
}

.section-frameworks h3 {
	margin-top: 1.5em;
}


@media only screen and (max-width: 1068px) {
	.tile-tools {
		width: 336px;
	}
	ul.hig-list {
		width: 298px;
		margin-left: -10px;
	}
}


@media only screen and (max-width: 735px) {
	.tile-tools {
		width: 230px;
	}
	ul.hig-list {
		padding-bottom: 5.5em;
	}
	.section-frameworks h3 {
		margin-top: 0.5em;
	}
}


@media only screen and (max-width: 563px) {
	.tile-flex > .tile-tools {
		margin-bottom: 20px;
	}
	.tile-flex > .tile-tools.typography-subbody:last-of-type {
		margin-bottom: 0;
	}
	.tile-flex > .tile-tools:nth-of-type(even) {
		margin-left: 0;
		float: none;
	}
	.tile-tools {
		width: 336px;
	}
	.tile-tools.tile-tools-placeholder {
		display: none;
	}
}


@media only screen and (max-width: 375px) {
	.tile-tools {
		width: 330px;
	}
}


@media only screen and (max-width: 320px) {
	.tile-tools {
		width: 230px;
	}
	ul.hig-list {
		margin-left: -8px;
		width: 288px;
	}
}


/* ========== Images ========== */
.image-hero {
	margin-top: 2em;
	width: 740px;
	height: 344px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/fonts/images/fonts-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) {
	.image-hero {
		background-image: url("/fonts/images/fonts-hero-large_2x.png")
	}
}

.icon-font {
	margin: 0 auto 1.5em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.font-san-francisco {
	background-image: url("/fonts/images/font-sf.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) {
	.font-san-francisco {
		background-image: url("/fonts/images/font-sf_2x.png")
	}
}
.font-santa-cruz {
	background-image: url("/fonts/images/font-sf.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) {
	.font-santa-cruz {
		background-image: url("/fonts/images/font-sf_2x.png")
	}
}
.font-symbols {
	background-image: url("/fonts/images/font-sf.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) {
	.font-symbols {
		background-image: url("/fonts/images/font-sf_2x.png")
	}
}
.font-tool-suite {
	background-image: url("/fonts/images/font-sf.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) {
	.font-tool-suite {
		background-image: url("/fonts/images/font-sf_2x.png")
	}
}

.icon-hig {
	margin: 0 auto 0.5em;
	width: 58px;
	height: 54px;
	background-repeat: no-repeat;
}
.icon-macos {
	background-size: 58px 60px;
	background-image: url("/fonts/images/icon-macos-dark.svg");
}
.icon-ios {
	width: 32px;
	background-size: 32px 54px;
	background-image: url("/fonts/images/icon-ios-dark.svg");
}
.icon-watchos {
	width: 44px;
	background-size: 44px 54px;
	background-image: url("/fonts/images/icon-watchos-dark.svg");
}
.icon-tvos {
	background-size: 58px 54px;
	background-image: url("/fonts/images/icon-tvos-dark.svg");
}


@media only screen and (max-width: 1068px) {
	.image-hero {
		width: 692px;
		height: 322px;
		background-image: url("/fonts/images/fonts-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) {
		.image-hero {
			background-image: url("/fonts/images/fonts-hero-medium_2x.png")
		}
	}
}


@media only screen and (max-width: 735px) {
	.image-hero {
		width: 320px;
		height: 149px;
		background-image: url("/fonts/images/fonts-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) {
		.image-hero {
			background-image: url("/fonts/images/fonts-hero-small_2x.png")
		}
	}
	.image-sf {
		margin: 0 0 1em;
	}
}

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



/* ========== Grid ========== */
#main .section-content.divider-bottom {
	padding-bottom: 4em;
}
#main section.section.section-hero {
	padding-bottom: 0;
}
#main section.section.section-banner {
	padding-top: 1em;
	padding-bottom: 1em;
}
#main section.section.section-tools {
	padding-bottom: 3em;
}
#main section.section.section-frameworks {
	padding-top: 0;
}
@media only screen and (max-width: 735px) {
	#main .section-content.divider-bottom {
		padding-bottom: 2em;
	}
	#main section.section.section-hero {
		padding-bottom: 0;
	}
	#main section.section.section-banner {
		padding-top: 0;
		padding-bottom: 0;
	}
	#main section.section-hero .section-content .row > .column {
		padding: 0;
	}
	#main section.section.section-frameworks {
		padding-top: 0;
	}
}


/* === DARK MODE === */
body[data-color-scheme="dark"].dmf .tile-tools {background-color: var(--fill-secondary-alt);} 
body[data-color-scheme="dark"].dmf .tile-tools.tile-tools-placeholder {background-color: unset;} 
body[data-color-scheme="dark"].dmf .icon-hig {filter: invert(1);}