/* Global */

html {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	background-color: white;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	height: 100%;
	flex-direction: column;
}

.container {
	width: 80%;
	margin: auto;
	overflow: hidden;
}

ul {
	margin: 0;
	padding: 0;
}

.app-store-link {
	display: inline-block;
	overflow: hidden;
	background: url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat;
	width: 135px;
	height: 40px;
	background-size: contain;
}

.branding {
	text-transform: none;
	color: white;
	padding: 0;
}

/* Header */

header {
	background: darkblue;
	color: white;
	min-height: 60px;
	padding-top: 10px;
}

header h1 {
	float: left;
}

header a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	padding: 0 10px;
	color: lightgray;
}

.highlighted {
	color: white;
}

header li {
	display: inline;
	padding: 0 20px 0 20px;
}

header nav {
	float: right;
	margin-top: 30px;
}

header a:hover {
	color: white;
}

/* Apps */

.app-box {
	float: left;
	width: 30%;
	text-align: center;
	padding: 10px;
}

.app-box img,
.icon-box img {
	width: 90%;
	border-radius: 10%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden;
}

.app-box .desktop-icon,
.icon-box .desktop-icon {
	width: 90%;
	border-radius: 50%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden;
}

.desktop-screenshot {
	width: 90%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden;
}

.app-box a {
	text-decoration: none;
}

.app-title {
	font-weight: bold;
}

/* Footer */

footer {
	width: 100%;
	flex-shrink: 0;
	background-color: #efefef;
	text-align: center;
}

.content {
	flex: 1 0 auto;
}

/* About Page */

.contact-box {
	float: left;
	padding: 10px;
}

/* App Pages */

.overview-text p {
	padding: 10px;
}

.app-gif {
	width: 90%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 1em;
	overflow: hidden;
}

.description-item {
	padding: 50% 0;
}

.app-page-title h1 {
	font-size: 260%;
}

/* Left Box */

.left-box {
	float: left;
	width: 40%;
	padding: 10px;
	text-align: center;
	margin: auto;
}

/* Right Box */

.right-box {
	float: right;
	width: 40%;
	padding: 10px;
	text-align: center;
	margin: auto;
}

/* Full Box */

.horizontal-box {
	padding: 10px;
	text-align: center;
	margin: auto;
}

/* Media Queries */

@media(max-width: 768px) {
	header h1,
	header nav,
	header nav li,
	.app-box,
	.left-box,
	.right-box,
	.contact-box,
	.icon-box {
		float: none;
		text-align: center;
		width: 100%;
	}
	header {
		padding-bottom: 20px;
	}
	.description-item {
		padding: 0 10px;
	}
}

/* Featured On */ 

.featured-section-border {
	border-style: solid none solid none;
	border-color: gray;
	border-width: 1px;
}

.featured-element {
	text-align: center;
	max-width: 480px;
	margin: auto;
}

.featured-element a {
	text-decoration: none;
}