article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{ display:block}[hidden]{ display:none}html{ font-family:sans-serif;  -webkit-text-size-adjust:100%;  -ms-text-size-adjust:100%}body{ margin:0}a:focus{ outline:thin dotted}a:active, a:hover{ outline:0}h1{ font-size:2em;  margin:0.67em 0}abbr[title]{ border-bottom:1px dotted}b, strong{ font-weight:bold}hr{ -moz-box-sizing:content-box;  box-sizing:content-box;  height:0} img{ border:0}button, input, select, textarea{ font-family:inherit;  font-size:100%;  margin:0}button, input{ line-height:normal}button, select{ text-transform:none}button, html input[type="button"], input[type="reset"], input[type="submit"]{ -webkit-appearance:button;  cursor:pointer}button[disabled], html input[disabled]{ cursor:default}input[type="checkbox"], input[type="radio"]{ box-sizing:border-box;  padding:0}input[type="search"]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}button::-moz-focus-inner, input::-moz-focus-inner{ border:0; padding:0}textarea{ overflow:auto; vertical-align:top}

@font-face {
    font-family: 'roboto';
    font-weight: 500; /* regular */
    font-style: normal;
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#roboto') format('svg'); 
}

@font-face {
    font-family: 'roboto';
    font-weight: 700; /* bold */
    font-style: normal;
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#roboto') format('svg'); 
}

html, body {
	height: 100%;
}

body {
	color: #444;
	font-family: roboto, sans-serif;
	font-weight: 500;
	margin: 0 1em;
}

section {
	width: 100%;
}

#device {
	margin-top: 1em;
	width: 33%;
	height: auto;
}

#content {

}

@media only screen and (max-width:659px) {
	#content ul {
		position: absolute;
		top: 40px;
		left: 50%;
		width: 40%;
	}
	
	#content li {
		padding-bottom: 20px;
	}
}


h1 {
	margin-bottom: 0;
	font-size: 30px;
}

h2 {
	font-weight: 500;
	font-size: 20px;
	margin-top: 0;
}

p {
	font-size: 16px;
}

ul {
	list-style: none;
	padding: 0;
	margin: 24px 0;
}

li {
	float: left;
	padding-right: 10px;
}

#app-store a, #google-play a {
	display: block;
	width: 115px;
	height: 40px;
	
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background-color: transparent;
}

#app-store a {
	background: url(img/appstore.png) no-repeat 50% / 115px 38px;
}

#google-play a {
	background: url(img/googleplay.png) no-repeat 50% / 115px 38px;
}

footer {
	position: relative;
	font-size: 12px;
	margin-top: 50px;
}

footer a {
	color: #999;
	text-decoration: none;
}

footer a:hover {
	color: #111;
}

footer ul {
	margin: 20px 0;
	min-height: 30px;
}

strong {
	font-weight: 700;
}

@media only screen and (min-width:660px) {
	section {
		position: relative;
		min-height: 100%;
	}
	
	#device {
		position: absolute;
		left: 0;
		top: -30px;
		width: auto;
		height: auto;
	}
	
	.centered {
		position: absolute;
		left: 50%;
		top: 40%;
		-webkit-transform: translate(-50%, -40%);
		-ms-transform: translate(-50%, -40%);
		transform: translate(-50%, -40%);
	}
	
	#content {
		width: 390px;
		padding-left: 260px;
		margin: auto;
	}
	
	footer {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 20px;
		
	}
	
	footer ul {
		position: absolute;
		right: 1em;
		bottom: 0;
		margin: 0;
		min-height: 1px;
	}
}