@font-face {
	font-family: "tele-groteskultregular";
	src: url("t036018t-webfont.eot");
	src: url("t036018t-webfont.eot?#iefix") format("embedded-opentype"),
		url("t036018t-webfont.woff2") format("woff2"),
		url("t036018t-webfont.woff") format("woff"),
		url("t036018t-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* mobile-first approach */

body {
	margin: 0 auto;
}

.page-container {
	font-family: "tele-groteskultregular";
	margin: 0;
	text-align: center;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.header {
	background-color: #e20074;
	color: #fff;
	text-transform: uppercase;
	font-size: 40px;
}

.subheader {
	color: #e20074;
	font-size: 14px;
	padding: 0.5em;
	background-color: white;
}

.splash {
	background: url("../images/BackgroundV2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
	z-index: -100;
	margin: 0 auto;
	width: 100%;
	margin-bottom: 0.5em;
	padding-top: 47%;
	height: 0;
}

.button {
	margin-bottom: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.button-tmobile {
	flex: 1;
	background-color: #e20074;
	border: 1px solid white;
	-webkit-transition: background-color 200ms ease-in-out;
	-ms-transition: background-color 200ms ease-in-out;
	transition: background-color 200ms ease-in-out;
}

.button-metro {
	flex: 1;
	background-color: rgb(17 16 18);
	border: 1px solid white;
	-webkit-transition: background-color 200ms ease-in-out;
	-ms-transition: background-color 200ms ease-in-out;
	transition: background-color 200ms ease-in-out;
}

.footer {
	height: 2em;
	background-color: #e20074;
	line-height: 2em;
	font-family: Arial;
	font-size: 10px;
	text-decoration: none;
	color: #fff;
}

.footer a {
	color: #fff;
}

@media (max-width: 769px) {
	.splash {
		position: relative;
	}
}

/* desktop */
@media (min-width: 769px) {
	/* font-size scales with larger devices */
	.header {
		font-size: 4.2vw; /* (minimum font size)/(maxmium viewport width) */
	}
	.subheader {
		font-size: 1.95vw; /* (minimum font size)/(maximum viewport width) */
	}
	.footer {
		font-size: 1.3vw; /* (minimum font size)/(maximum viewport width) */
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.button-tmobile {
		position: fixed;
		bottom: 15%;
		left: 10%;
	}

	.button-metro {
		position: fixed;
		bottom: 15%;
		right: 10%;
	}

	.button-tmobile:hover {
		background-color: #ff41a3 !important;
		-webkit-transition: background-color 200ms ease-in-out;
		-ms-transition: background-color 200ms ease-in-out;
		transition: background-color 200ms ease-in-out;
	}

	.button-metro:hover {
		background-color: #2f2e30 !important;
		-webkit-transition: background-color 200ms ease-in-out;
		-ms-transition: background-color 200ms ease-in-out;
		transition: background-color 200ms ease-in-out;
	}
}