.hero {
	margin-top:110px;
}

#ac-globalnav {
	background: rgba(240, 240, 240, 0.95);
}

.ac-familybrowser {
	background: rgba(0, 0, 0, 0.86);
}

.ac-familybrowser-item.xcode .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-xcode.svg");
    background-size: 44px 54px;
    height: 54px;
    width: 44px
}

.ac-familybrowser-item.swift .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-swift.svg");
    background-size: 44px 54px;
    height: 54px;
    width: 44px
}

.ac-familybrowser-item.api .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-api.svg");
    background-size: 44px 54px;
    height: 54px;
    width: 44px
}

.ac-familybrowser-item.guide .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-guide.svg");
    background-size: 40px 54px;
    height: 54px;
    width: 40px
}

.ac-familybrowser-item.sample-code .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-sample-code.svg");
    background-size: 50px 54px;
    height: 54px;
    width: 50px
}

.ac-familybrowser-item.videos .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-videos.svg");
    background-size: 40px 54px;
    height: 54px;
    width: 40px
}

.ac-familybrowser-item.downloads .ac-familybrowser-icon {
    background-repeat: no-repeat;
    background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-downloads.svg");
    background-size: 40px 54px;
    height: 54px;
    width: 40px
}

#ac-familybrowser .ac-familybrowser-paddles button {
    text-align: center
}

/* Overrides */

* + h1,
* + h2,
* + h3 {
	margin-top: 0;
}

.main {
	overflow: visible;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.grid {
		width: 100%;
		padding: 0 22px;
	}

	.row {
		margin: 0 -22px;
	}

	[class*='col-'] {
		padding-left: 22px;
		padding-right: 22px;
	}
}

/*** Page Styles ***/


/* Type */

.headline {
	margin-top: 0;
}

@media only screen and (max-width: 767px) {
	.headline {
		font-size: 52px;
		line-height: 1.07724;
		font-weight: 200;
		letter-spacing: -0.016em;
	}
}

.eyebrow {
	display: block;
	font-size: 28px;
	line-height: 1.14286;
	font-weight: 300;
	letter-spacing: 0em;
	margin-bottom: 21px;
	color: #888;
}

.intro {
	max-width: 750px;
}

p {
	max-width: 650px;
}

@media only screen and (max-width: 767px) {
	p {
		max-width: none;
	}
}

a.more,
span.more {
	white-space: normal;
	padding-right: 12px;
}

.copy-wrapper {
	max-width: 350px;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.copy-wrapper {
		width: 260px;
	}
}

@media only screen and (max-width: 767px) {
	.text-center {
		text-align: center;
	}

	.library-links .col-25 {
		width:100%;
		text-align: center;
	}
}

a.play {
	position: relative;
}

a.play:after {
	display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
	background-position: left top;
  content: "";
	top: 1px;
	right:-24px;
  vertical-align: top;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzBiY2UyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48cG9seWdvbiBwb2ludHM9IjYgNC41IDEzIDkgNiAxMy41IDYgNC41IiBmaWxsPSIjNzBiY2UyIi8+PC9zdmc+');
}

a.play:hover:after {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48cG9seWdvbiBwb2ludHM9IjYgNC41IDEzIDkgNiAxMy41IDYgNC41IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
}

.documentation-headline {
	font-size: 28px;
	font-weight: 400;
	margin-bottom:4px;
}

.document-type {
	display: block;
	font-size: 16px;
	line-height: 1.8;
}

.block-link {
	display: block;
	color: #333;
	cursor: pointer;
}

.block-link:hover {
	text-decoration: none;
}

.block-link-display {
	color: #08c;
}

.block-link:hover .block-link-display {
	text-decoration: underline;
}

/* Layout */
.tech-container {
	padding:0 44px 12px;
}

.bg-light-large {
	background-color: #f2f2f2;
 	max-width: 1698px;
	margin-left: auto;
	margin-right: auto;
 	border-left: 6px solid #ffffff;
 	border-right: 6px solid #ffffff;
}

@media only screen and (max-width: 1023px) {
	.bg-light-large {
		padding-left:22px;
		padding-right:22px;
		border-left: none;
		border-right: none;
	}

	.tech-container {
		padding:0 22px 12px;
	}
}

@media only screen and (max-width: 767px) {
	.section-technologies .row [class*='col-25'] {
		width: 50%;
	}
}

@media only screen and (max-width: 416px) {
	.section-technologies .row [class*='col-25'] {
		width: 100%;
		margin: 0 auto;
		float: none;
	}
}


.section-two-up {
	max-width: 1788px;
	margin: 0 auto;
	padding-left: 44px;
	padding-right: 44px;
}

@media only screen and (max-width: 1023px) {
	.section-two-up {
		padding-left: 22px;
		padding-right: 22px;
	}
}

.section-two-up .row {
	width: 100%;
	display: table;
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.section-two-up .row {
		display: inline-block;
		width: 100%;
	}
}

.section-two-up [class*='col-'] {
	background-color: #f2f2f2;
	padding: 0;
	border-left: 6px solid #ffffff;
	border-right: 6px solid #ffffff;
	border-bottom: 12px solid #ffffff;
	vertical-align: top;
	display: table-cell;
	vertical-align: middle;
	padding-top: 10%;
	padding-bottom: 10%;
	float: none;
}

@media only screen and (max-width: 1023px) {
	.section-two-up [class*='col-']:first-of-type {
		border-left: 0;
	}
}

.section-two-up [class*='col-']:last-of-type {
	border-right: 0;
}

@media only screen and (max-width: 767px) {
	.section-two-up [class*='col-'] {
		display: block;
		padding-top: 60px;
		padding-bottom: 60px;
		padding-left: 22px;
		padding-right: 22px;
		border-left: none;
		border-right: none;
	}

	.section-documentation [class*='col-25'] {
		width: 50%;
	}

	.section-resources [class*='col-'] {
		margin: 0 auto;
		max-width: 400px;
		float:none;
	}

	.section-two-up .row-related [class*='col-'] {
		border: none;
	}
}

@media only screen and (max-width: 416px) {
	.section-documentation [class*='col-'] {
		width: 100%;
	}
}

.push {
	left: 50%
}

.pull {
	right:50%;
}

@media only screen and (max-width: 767px) {
	.push,
	.pull {
		right:auto;
		left: auto;
	}
}


/* Heroes */

.hero-wrapper {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	height:882px;
	overflow: hidden;
}
.develop-hero {
	display: block;
	position: absolute;
	height: 882px;
	width: 1509px;
	background-repeat: no-repeat;
	background-image: url("/develop/images/develop-hero-large.png");
	background-size:1509px 882px;
	top: -80px;
	left:46%;
}

.hero .copy-wrapper {
	position: relative;
	left: -1.5em;
	top: 0px;
	max-width: 400px;
	margin-top: 20px;
}

@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) {
    .develop-hero {
        background-image: url("/develop/images/develop-hero-large_2x.png")
    }
}

@media only screen and (max-width: 1024px) {
	.hero .col-50 {
		width: 100%;
	}

	.hero-wrapper {
		position: relative;
		height: auto;
	}

	.develop-hero {
		position: relative;
		width: 715px;
		height: 418px;
		background-size: 715px 418px;
		background-image: url("/develop/images/develop-hero-medium.png");
		top: 0;
		left:0;
		margin:24px auto 0;
	}

	.hero .copy-wrapper {
		width: 100%;
		max-width: 550px;
		margin: 0 auto;
		left: 0;
		top:0;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1023px) , only screen and (min-resolution: 1.5dppx) and (max-width: 1023px) , (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1023px) , (min-resolution: 144dpi) and (max-width: 1023px) {
	.develop-hero {
		background-image: url("/develop/images/develop-hero-medium_2x.png");
	}
}

@media only screen and (max-width: 735px) {
	.develop-hero {
		margin-left: 22px;
	}
}

.development-videos {
	background-repeat: no-repeat;
	background-image: url("https://devimages.apple.com.edgekey.net/develop/images/bg-videos.jpg");
	background-size: cover;
	background-position: center top;
}

@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) {
	.development-videos {
		background-image: url("https://devimages.apple.com.edgekey.net/develop/images/bg-videos_2x.jpg");
	}
}

/* Icons */

.icon-* {
	display:block;
	background-repeat: no-repeat;
}

.icon-reference {
	margin: 0 auto 1em;
  background-repeat: no-repeat;
  background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-api-dark.svg");
  background-size: 44px 54px;
  height: 54px;
  width: 44px
}

.icon-guides {
	margin: 0 auto 1em;
  background-repeat: no-repeat;
  background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-guide-dark.svg");
  background-size: 40px 54px;
  height: 54px;
  width: 40px
}

.icon-sample-code {
	margin: 0 auto 1em;
  background-repeat: no-repeat;
  background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-sample-code-dark.svg");
  background-size: 50px 54px;
  height: 54px;
  width: 50px
}

.icon-app-frameworks {
	width:49px;
	height: 33px;
	margin-bottom: 31px;
	background-image: url('/assets/elements/icons/wwdr-app-frameworks/wwdr-app-frameworks-64x64-alt.svg');
	background-size: 49px 33px;
}

.icon-app-services {
	width:42px;
	height: 42px;
	margin-bottom: 22px;
	background-image: url('/assets/elements/icons/wwdr-app-services/wwdr-app-services-64x64-alt.svg');
	background-size: 42px 42px;
}

.icon-system {
	width:47px;
	height: 47px;
	margin-bottom: 17px;
	background-image: url('/assets/elements/icons/wwdr-system/wwdr-system-64x64-alt.svg');
	background-size: 47px 47px;
}

.icon-media-and-web {
	width:49px;
	height: 29px;
	margin-bottom: 35px;
	background-image: url('/assets/elements/icons/wwdr-media-and-web/wwdr-media-and-web-64x64-alt.svg');
	background-size: 49px 29px;
}

.icon-graphics-and-games {
	width:46px;
	height: 45px;
	margin-bottom: 19px;
	background-image: url('/assets/elements/icons/wwdr-graphics-and-games/wwdr-graphics-and-games-64x64-alt.svg');
	background-size: 46px 45px;
}

.icon-accessories {
	width:34px;
	height: 45px;
	margin-bottom: 19px;
	background-image: url('/assets/elements/icons/wwdr-accessories/wwdr-accessories-64x64-alt.svg');
	background-size: 34px 45px;
}

.icon-developer-tools {
	width:44px;
	height: 43px;
	margin-bottom: 21px;
	background-image: url('/assets/elements/icons/wwdr-developer-tools/wwdr-developer-tools-64x64-alt.svg');
	background-size: 44px 43px;
}

.icon-download {
	width:40px;
	height: 54px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	background-image: url("https://devimages.apple.com.edgekey.net/develop/images/icon-downloads-dark.svg");
	background-size: 40px 54px;
}

.icon-swift {
	width:44px;
	height: 54px;
	margin-bottom: 1em;
	background-image: url('https://devimages.apple.com.edgekey.net/develop/images/icon-swift-alt.svg');
	background-size: 44px 54px;
}

.icon-swift-playgrounds {
	width:51px;
	height: 51px;
	margin-bottom:0.5em;
	margin-right: 1em;
	background-image: url('https://devimages.apple.com.edgekey.net/develop/images/icon_swift_medium.png');
	background-size: 51px 51px;
}

.block-tile {
	display: inline-block;
	border-radius: 10px;
	color: #333;
	cursor: pointer;
}

.block-tile:hover {
	text-decoration:none;
}

.block-tile:hover .block-link {
	text-decoration:underline;
}

.block-tile p:first-of-type {
	padding-top:0.4em;
}

.block-tile p {
	font-size: 14px;
}
