/* =========================================================
   Medium Screens / Tablets (Smaller than 980px)
   ==========================================================*/
@media screen and (max-width: 980px) {
	#outerWrapper {
		width: 95%;
	}

	#content {
		width: auto;
		padding: 3% 4%;
	}

	/* Native aspect ratio handling for responsive videos */
	.iframe-container {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.iframe-container iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
}

/* =========================================================
   Small Screens / Mobile Landscape (Smaller than 650px)
   ==========================================================*/
@media screen and (max-width: 650px) {
	#header {
		height: auto;
	}

	#content {
		width: auto;
		margin: 20px 0;
	}
}

/* =========================================================
   Smartphones / Mobile Portrait (Smaller than 480px)
   ==========================================================*/
@media screen and (max-width: 480px) {
	#content {
		width: auto;
		margin: 0;
		height: 100%;
	}

	#content h1 {
		font-size: 1.4rem;
		margin: 0;
		text-align: left;
	}

	/* Modern quotes surrounding attribute selectors */
	input[type=text], select, textarea {
		width: 100%;
	}
}