/*Media query*/

@media only screen and (min-width: 1200px) {
	#headline, h1 {font-size: 4em}
	#byline {font-size: 1.5em}
	audio {width:300px}
	.heading {font-size: 2.2em}
	.margins > p, .video {margin-left: 25%; margin-right:25%}
	.quote > p {font-size: 4em}
	.desktop {display: block}
	.mobile {display: none}
	
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
	#headline, h1 {font-size: 3.2em}
	#byline {font-size: 1.5em}
	audio {width:300px}
	.heading {font-size: 2.2em}
	.margins > p, .video {margin-left: 20%; margin-right:20%}
	.quote > p {font-size: 3.6em}
	.desktop {display: block}
	.mobile {display: none}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#headline {font-size: 3.2em}
	#byline {font-size: 1.5em}
	audio {width:300px}
	.heading {font-size: 2.2em}
	.margins > p, .video {margin-left: 15%; margin-right:15%}
	.quote > p {font-size: 3em}
	.desktop {display: block}
	.mobile {display: none}
}

@media only screen and (min-width: 576px) and (max-width:767px) {
	#headline, h1 {font-size: 3em}
	#byline {font-size: 1.2em}
	audio {width:300px}
	.heading {font-size: 2em}
	.margins > p, .video {margin-left: 15px; margin-right:15px}
	.desktop {display: none}
	.mobile {display: block}
}

@media screen and (max-width: 575px) {
	#headline, h1 {font-size: 1.4em}
	#lede {font-size: 0.8em}
	audio {width:150px}
	.heading {font-size: 1.5em}
	.margins > p, .video {margin-left: 15px; margin-right:15px}
	.desktop {display: none}
	.mobile {display: block}
}
