/*=========================================================================================================
	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; }

.topmost {
	width: 1020px;
	text-align: center;
}

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

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

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

.launchPage div#overlay p.detail {
	color: #333333;
	line-height: 1.75rem;
	margin: 1rem 20% 2rem 20%;
}

.launchPage div#overlay div.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 div#overlay p.heading { font-size: 2.5rem; line-height: 2.5rem; }
	.launchPage div#overlay p.heading { margin-right: 21%; margin-left: 21%; }
	.launchPage div#overlay p.detail { margin-right: 27%; margin-left: 27%; }
	.launchPage div#overlay div.buttons { width: 390px; }
}

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

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

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

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

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

@media (max-height: 414px) {
	:root { font-size: 13px; }
	.launchPage div#overlay p.heading { margin-right: 3%; margin-left: 3%; }
	.launchPage div#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 div#overlay p.heading { font-size: 1.33em; margin-right: 4%; margin-left: 4%; }
	.launchPage div#overlay p.detail { margin-right: 7%; margin-left: 7%; }
	.launchPage div#overlay div.buttons { width: 290px; }
}