body {
	font-family: 'Roboto', sans-serif;
	background-color: #050811;
}

nav {
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
}

.nav-logo {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 15px;
	width: 80px;
}

.nav-text {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: auto;
	font-size: 25px
}

.nav-center {
	text-align: center;
	display: flex;
	align-items: center;
}

.nav-text {
	color: white;
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	padding-bottom: 0;
}

.nav-logo {
	max-width: 150px;
}

section.battletrack-banner {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 10px;
	margin: 0 auto;
}

.battletrack-banner-logo {	
	max-width: 120px;
}

.battletrack-logo-container {
	margin-top: 0;
	margin-bottom: 5px;
}

.battletrack-info-containter {
	text-align: center;
}

.battletrack-banner-text-container {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: auto;
}

.white-glow {
	background: #0e1833; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(rgba(255,255,255,0.1) 1%, transparent 20%, transparent 80%, rgba(255,255,255,0.1) 99%); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.1) 1%, transparent 20%, transparent 80%, rgba(255,255,255,0.1) 99%); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.1) 1%, transparent 20%, transparent 80%, rgba(255,255,255,0.1) 99%); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.1) 1%, transparent 20%, transparent 80%, rgba(255,255,255,0.1) 99%);
	background-color: #161616;
}

.purple-grad {
	background: #8b23ca; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(top, #8b23ca, #6a1b9a); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(top, #8b23ca, #6a1b9a); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(top, #8b23ca, #6a1b9a); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to top, #8b23ca, #6a1b9a); /* Standard syntax */
}

.battletrack-banner h1, h2 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 25px;
}

.battletrack-banner h1 {	
	color: white;
}

.battletrack-banner h2 {
	font-weight: 500;
	color: #ececec;
}

.battletrack-banner p {
	margin-top: 16px;
	font-size: 16px;
	color: #e0e0e0;
}

.google-play-badge {
	max-width: 200px;
}

.app-info .row {
	background-color: #0e1833;
	padding-top: 40px;
}

/* Padding for larger screen size */
@media only screen and (min-width: 640px) {
	
	.battletrack-banner-logo {
	max-width: 150px;
  }
	
	.app-info-text {
		padding-top: 120px;
	}
	
	.battletrack-banner h1, h2 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 40px;
  }
	
	.battletrack-banner p {
	margin-top: 16px;
	font-size: 18px;
	color: #e0e0e0;
  }
	
	.google-play-badge {
	max-width: 250px;
  }
	
	.nav-logo {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 15px;
	width: 70px;
	}

		.nav-text {
			margin-top: 0;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: auto;
			font-size: 25px
		}

		.battletrack-banner-logo {	
		max-width: 150px;
	}

	.battletrack-logo-container {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: auto;
		margin-right: 50px;
	}

	.battletrack-info-containter {
		text-align: center;
		display: flex;
		align-items: center;
	}

	.battletrack-banner-text-container {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: auto;
	}
}

.app-info h1 {
	color: white;
	font-weight: 500;
	margin-top: 0;
	vertical-align: middle;
}

.app-info p {
	font-family: 'Raleway', sans-serif;
	color: #ececec;
	vertical-align: middle;
}

.screenshot-container {
	text-align: center;
	margin-bottom: 25px;
}

.screenshot {
	max-height: 600px;
	margin-left: auto;
	margin-right: auto;
}

hr { 
	border: 0; 
 	height: 1px; 
	background-image: -webkit-linear-gradient(left, transparent, #8c8b8b, transparent);
	background-image: -moz-linear-gradient(left, transparent, #8c8b8b, transparent);
	background-image: -ms-linear-gradient(left, transparent, #8c8b8b, transparent);
	background-image: -o-linear-gradient(left, transparent, #8c8b8b, transparent); 
	background-image: linear-gradient(to left, transparent, #8c8b8b, transparent);
}

footer {
	text-align: center;
	color: #b2b2b2;
}

.legal {
	color: #676767;
	font-size: 14px;
}

footer a:link {
	color: #b2b2b2;
}

footer a:visited {
	color: #8d8d8d;
}

footer a:hover {
	color: #2a7c8d;
}