.siri-query {
	color: #494D96;
}

.siri-query-icon {
	margin-bottom:1em;
}

.title {
	font-weight: 500;
}

.copy {
	max-width: 650px;
	display:block;
	margin-left: auto;
	margin-right: auto;
}

.intro.copy {
	max-width: 750px;
}

.section-fade {
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	-transition: opacity 0.5s ease-in-out;
}

.intro.section-fade {
	-webkit-transition-delay: 0.35s;
	-o-transition-delay: 0.35s;
	-moz-transition-delay: 0.35s;
	transition-delay: 0.35s;
}

figure.section-fade {
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.section-reveal {
	opacity: 0;
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	-o-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out, -moz-transform 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out, -o-transform 0.5s ease-in-out;
	-transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.section-reveal:nth-of-type(even) {
	-webkit-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.section-reveal.show,
.section-fade.show{
	opacity: 1;
	transform: translateY(0);
}

.header-hero {
	margin-top: -52px;
	padding-top: 52px;
	color: #fff;
	background-repeat: no-repeat;
	background-image: url('https://devimages.apple.com.edgekey.net/sirikit/images/hero_large.jpg');
	background-size: cover;
	background-position: center bottom;
	padding-bottom: 5em;
}

.siri-waveform {
	display:block;
	width:100%;
	height: 119px;
	background-repeat: no-repeat;
	background-image: url('https://devimages.apple.com.edgekey.net/sirikit/images/wave_form_large.png');
	background-size: 1445px 119px;
	background-position: center center;
}

@media all and (min-width: 1024px) {
	.siri-query-row {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media all and (min-width: 768px) {
	.main .col-50 {
		padding-left:3em;
		padding-right:3em;
	}
}

@media all and (max-width: 767px) {
	.row {
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}

	.header-hero {
		margin-top: -48px;
		padding-top: 48px;
	}
}
