/*=========================================================================================================
	Styles specific to the launch page. This file should be included after custom.main.css in the launch
	page HTML, in order to leverage styles and behaviour present in the tool itself (e.g. responsive text
	sizing for the header and footer, etc.
  =========================================================================================================*/

:root { font-size: 16px; }

.launchPage #background {
	background: url(../img/launchPage.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
}

.launchPage #overlay {
	text-align: center;
	background-color: transparent;
	margin: 0;
	font-size: 1.33rem;
}

.launchPage #overlay p.heading {
	padding-top: 3.25rem;
	margin: 0 18% 0 18%;
	text-transform: uppercase;
	font-size: 3rem;
	line-height: 3rem;
}

.launchPage #overlay p.detail {
	line-height: 1.75rem;
	margin: 1rem 28% 2rem 28%;
}

.launchPage #overlay .buttons {
	margin: 0 auto;
	height: 50px;
	width: 420px;
}

/*=========================================================================================================
	Responsive adjustments for narrower screens (tablets, phones, etc.)
  =========================================================================================================*/

@media (max-width: 1024px) {
	:root { font-size: 15px; }
	.launchPage #overlay p.heading { font-size: 2.5rem; line-height: 2.5rem; }
	.launchPage #overlay p.heading { margin-right: 21%; margin-left: 21%; }
	.launchPage #overlay p.detail { margin-right: 27%; margin-left: 27%; }
	.launchPage #overlay .buttons { width: 390px; }
}

@media (max-width: 992px) {
	:root { font-size: 15px; }
	.launchPage #overlay p.heading { margin-right: 20%; margin-left: 20%; }
	.launchPage #overlay p.detail { margin-right: 22%; margin-left: 22%; }
	.launchPage #overlay .buttons { width: 420px; }
}

@media (max-width: 768px) {
	:root { font-size: 14px; margin-top: 0; }
	.launchPage #overlay p.heading { margin-right: 13%; margin-left: 13%; }
	.launchPage #overlay p.detail { margin-right: 18%; margin-left: 18%; }
	.launchPage #overlay .buttons { width: 370px; }
}

@media (max-width: 640px) {
	:root { font-size: 13px; }
	.launchPage #overlay p.heading { margin-right: 5%; margin-left: 5%; }
	.launchPage #overlay p.detail { margin-right: 14%; margin-left: 14%; }
	.launchPage #overlay .buttons { width: 320px; }
}

@media (max-width: 480px) {
	:root { font-size: 12px; }
	.launchPage #overlay p.detail { margin-right: 9%; margin-left: 9%; }
	.launchPage #overlay .buttons { width: 300px; }
}

@media (max-width: 420px) {
	:root { font-size: 11px; }
	.launchPage #overlay .buttons { width: 280px; }
}

@media (max-height: 414px) {
	:root { font-size: 13px; }
	.launchPage #overlay p.heading { margin-right: 3%; margin-left: 3%; }
	.launchPage #overlay p.detail { margin-right: 10%; margin-left: 10%; }
}

@media (max-height: 320px) {
	:root { font-size: 11px; }
}

@media (max-width: 320px) and (max-height: 480px) {
	:root { font-size: 11px; }
	.launchPage #overlay p.heading { font-size: 1.33em; margin-right: 4%; margin-left: 4%; }
	.launchPage #overlay p.detail { margin-right: 7%; margin-left: 7%; }
	.launchPage #overlay .buttons { width: 290px; }
}