html {
	font-size: 14pt;
	}
	
body {
	text-align: center;
	padding: 0px;
	margin: 0px;
	background: #97b1b5;
	color: #fff;
	}

h1 {
	text-shadow: 0px 5px 10px rgba(0,0,0,0.25);
	}
	
h2, h3 {
	text-shadow: 0px 5px 5px rgba(0,0,0,0.16);
	}
	
h1, h2, h3 {
	margin: 10px 0 5px 5px;
	}
	
ul {
	margin-top: 0;
	}
	
p {
	padding: 10px 40px;
	}
	
img {
	max-width: 100%;
	}
	
a, a:hover, a:link {
	color: #ffc;
	font-weight: bold;
	}
	
hr {
	border: 0;
	border-bottom: 3px solid #eee;
	padding: 0;
	}

#Main {
	min-height: 550px;
	/*padding: 0 15px;*/
	}
	
.Header {
	padding: 10px;
	}
	
.Header a, .Header a:hover, .Header a:link {
	padding: 7px 13px;
	background: #444;
	color: #eee;
	border-radius: 5px;
	text-decoration: none;
}
	
.HomeHeader { }

.Logo {
	width: 500px;
	max-width: 100%;
	margin:0;
	padding: 20px 0px;
	}
body.home .Logo {
	width: auto;
	}

.Icon {
	height: 200px;
	vertical-align: top;
	}

#Footer {
	font-size: 0.86rem;
	text-align: center;
	padding: 10px 0px;
	}
	
.clear {
	clear: both;
	}
	
.Small {
	font-size: 0.7em;
	}
	
.TextBox {
	display: inline-block;
	max-width: 580px;
	padding: 10px;
	vertical-align: top;
	}

.Tagline {
	max-width: 100%;
	padding: 10px;
	font-size: 1.25rem;
	}
	
.Caption {
	margin: 0 0 10px 0;
	}
	
.Quote {
	padding: 10px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 15px 0 15px 0;
	}

.ScreenshotWrapper {
	padding: 0 0 15px 0; 
	}

.DeviceMetaphor {
	margin: 10px 0px;
	border-radius: 15px;
	background: #444;
	display: inline-block;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.33);
	}
	
.Tall {
	padding: 25px 5px;
	}
	
.Wide {
	padding: 5px 25px;
	}
.DeviceMetaphor img, .DeviceMetaphor iframe {
	vertical-align: middle;
	}

.box {
	max-width: 1000px;
	background: #666;
	margin: 20px auto;
	border-radius: 15px 0px 15px 0px;
	text-align: left;
	padding:5px;
	}
	
.box p {
	padding: 10px;
	margin: 10px;
	}
	
.box ol, .box ul {
	margin-left: 1.6em;
	}
.box img {
	vertical-align: middle;
	width: 60px;
	margin-right: 10px;
	padding:2px;
	} 
	
.q {
	color: #f84;
	font-weight: bold;
	}
	
.a {
	color: #af8;
	font-weight: bold;
	}
	
.spacer {
	height: 16px;
	}

.Badges {
	padding-top: 5px;
	}
	
.Badge {
	height: 60px;
	padding-top: 10px;
	}

.BadgeSmall {
	display: none;
	}
	
.BadgeLarge {
	display: inline-block;
	}

.video {
	width: 560px;
	height: 315px;
	max-width: 100%;
	}

.Privacy {
	font:16px verdana, arial, sans-serif;
	}

@keyframes slideInFromTopCorner {
	0%		{ transform: translate(-100%, -100%); }
	100%	{ transform: translate(0, 0); }
	}
	
.PunkLabsButton {
	animation: 0.5s ease-out 0s 1 slideInFromTopCorner;
	position: absolute;
	z-index: 100;
	top: 0px;
	left: 0px;
	width: 80px;
	height: 80px;
	}

.AdditionalMedia img, .AdditionalMedia video {
	float:right;
	height: 150px;
	width: auto;
	}
	
iframe.SoundCloud {
	width: 500px;
	height:400px;
	max-width: 100%;
	}

@media (max-width: 1000px) {
	.PunkLabsButton {
		width: 50px;
		height: 50px;
		}
		
	/* img { width:100%; } */
	
	img.Badge {
		width: auto;
		}
		
	.box img {
		width: 60px;
		} 
		
	.AdditionalMedia img {
		float:right;
		height: 100px;
		width: auto;
		}
	}

@media (max-width: 430px) {
	.PunkLabsButton {
		width: 30px;
		height: 30px;
		}
		
	body {
		font-size: 1rem;
		}
	h1 {
		font-size: 1.43rem;
		}
	h2 {
		font-size: 1.29rem;
		}
	h3 {
		font-size: 1.14rem;
		}
	.Tagline {
		font-size: 1.14rem;
		}
		
	.ScreenshotCaption {
		margin: 0 5px 0 5px;
		}
		
	.TextBox {
		margin: 0 0 5px 0;
		padding: 5px;
		}
		
	.Badge {
		height: 45px;
		}
		
	.BadgeSmall {
		display: inline-block;
		}
		
	.BadgeLarge {
		display: none;
		}
	}


/* 16:9 adjustments... */
@media (max-width: 640px) {
	.video {
		width: 500px;
		height: 281px;
		}
	}
@media (max-width: 580px) {
	.video {
		width: 400px;
		height: 225px;
		}
	}
@media (max-width: 500px) {
	.video {
		width: 300px;
		height: 169px;
		}
	}
@media (max-width: 400px) {
	.video {
		width: 200px;
		height: 112px;
		}
	}