/* Local Nav */

#overview .link-overview,
#tools .link-tools,
#features .link-features,
#preview .link-preview,
#extensions .link-extensions,
#resources .link-resources,
#whats-new .link-whats-new {
	color: rgba(51, 51, 51, 0.6);
	pointer-events: none;
}

/* Blur navigation bar */

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
	#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)
	}
}

/* Common Safari styles */

p:not(.intro) {
	max-width: 650px;
}

@media all and (max-width: 767px) {
	.text-center {
		text-align: center;
	}
	.center {
		margin-left: auto;
		margin-right: auto;
	}
	p {
		max-width: none;
	}
}

.bg-light {
	background-color: #fafafa;
}

a.block {
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

a.block:before,
a.block:after {
	content: ' ';
	display: table;
}

/* Overview */

.title {
	font-weight: 500;
}

/* Overview - Safari hero */

.hero-safari {
	display: block;
	background-repeat: no-repeat;
	background-image: url('/safari/images/hero-safari_large.jpg');
	background-size: 1100px 629px;
	background-position: center;
	width: 100%;
	height: 629px;
	margin-bottom: 200px;
}

@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) {
	.hero-safari {
		background-image: url('/safari/images/hero-safari_large_2x.jpg');
	}
}

@media only screen and (max-width:1023px) {
	.hero-safari {
		background-image: url('/safari/images/hero-safari_medium.jpg');
		background-size: 715px 409px;
		height: 409px;
		margin-bottom: 80px;
	}
}

@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) {
	.hero-safari {
		background-image: url('/safari/images/hero-safari_medium_2x.jpg');
	}
}

@media only screen and (max-width:767px) {
	.hero-safari {
		background-image: url('/safari/images/hero-safari_small.jpg');
		background-size: 283px 162px;
		height: 162px;
		margin-bottom: 48px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), only screen and (min-resolution: 1.5dppx) and (max-width: 767px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), (min-resolution: 144dpi) and (max-width: 767px) {
	.hero-safari {
		background-image: url('/safari/images/hero-safari_small_2x.jpg');
	}
}

/* Overview - Apple Pay for Web hero */

.hero-apple-pay-web {
	display: block;
	background-repeat: no-repeat;
	background-image: url('/safari/images/apple-pay-web_large.png');
	background-size: 881px 697px;
	width: 881px;
	height: 697px;
	-webkit-transform: translateX(-290px);
	transform: translateX(-290px);
}

@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) {
	.hero-apple-pay-web {
		background-image: url('/safari/images/apple-pay-web_large_2x.png');
	}
}

@media only screen and (max-width:1023px) {
	.hero-apple-pay-web {
		background-image: url('/safari/images/apple-pay-web_medium.png');
		background-size: 715px 565px;
		width: 715px;
		height: 565px;
		margin: 0 auto;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
}

@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) {
	.hero-apple-pay-web {
		background-image: url('/safari/images/apple-pay-web_medium_2x.png');
	}
}

@media only screen and (max-width:767px) {
	.hero-apple-pay-web {
		background-image: url('/safari/images/apple-pay-web_small.png');
		background-size: 285px 225px;
		width: 285px;
		height: 225px;
		margin: 0 auto;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), only screen and (min-resolution: 1.5dppx) and (max-width: 767px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), (min-resolution: 144dpi) and (max-width: 767px) {
	.hero-apple-pay-web {
		background-image: url('/safari/images/apple-pay-web_small_2x.png');
	}
}

/* Overview - Picture in Picture hero */

.hero-pip {
	display: block;
	background-repeat: no-repeat;
	background-image: url('/safari/images/hero-pip_large.jpg');
	background-size: 1100px 512px;
	background-position: center;
	width: 100%;
	height: 512px;
}

@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) {
	.hero-pip {
		background-image: url('/safari/images/hero-pip_large_2x.jpg');
	}
}

@media only screen and (max-width:1023px) {
	.hero-pip {
		background-image: url('/safari/images/hero-pip_medium.jpg');
		background-size: 715px 333px;
		height: 333px;
	}
}

@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) {
	.hero-pip {
		background-image: url('/safari/images/hero-pip_medium_2x.jpg');
	}
}

@media only screen and (max-width:767px) {
	.hero-pip {
		background-image: url('/safari/images/hero-pip_small.jpg');
		background-size: 283px 132px;
		height: 132px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), only screen and (min-resolution: 1.5dppx) and (max-width: 767px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px), (min-resolution: 144dpi) and (max-width: 767px) {
	.hero-pip {
		background-image: url('/safari/images/hero-pip_small_2x.jpg');
	}
}

/* Download */

@media all and (max-width: 767px) {
	#download .text-right {
		text-align: left;
	}
}

#download ul.links.small > li {
	margin-bottom: 1.0em;
}


#whats-new #main > article {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}