/*** GENERAL ***/

@font-face { /* latin-ext */
	font-family: 'Lato'; font-style: normal; font-weight: 400;
	src: url('/shared/fonts/Lato-Regular-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { /* latin */
	font-family: 'Lato'; font-style: normal; font-weight: 400;
	src: url('/shared/fonts/Lato-Regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
@font-face { /* latin-ext */
	font-family: 'Lato'; font-style: normal; font-weight: 900;
	src: url('/shared/fonts/Lato-Black-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { /* latin */
	font-family: 'Lato'; font-style: normal; font-weight: 900;
	src: url('/shared/fonts/Lato-Black.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }

html { margin: 0px; height: 100vh; min-height: 100%; width: 100%; }
body { margin: 0px; min-height: 100%; width: 100%; }
body { background-color: #999; /******************************************/
	background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../img/bg.jpg") center/cover no-repeat fixed; }
/*html { margin: 0px; height: 100%; width: 100%; }
body { margin: 0px; min-height: 100%; width: 100%; }*/

body { font-family:'Lato', Arial, sans-serif; font-weight: 400;
	overflow: hidden;
	-webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; }

* { /* Prevent click highlights on mobile */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

#body_container { position: absolute; top: 50%; transform: translateY(-50%);
	left: 0; right: 0; margin: auto;
	width: 80%; max-width: 1500px;
	text-align: center; font-size: 0; }

#content { width: 45%; max-width: 360px; display: inline-block; text-align: left; vertical-align: middle;
	margin-right: 15%; }
#logo { width: 107.5%; }
#tagline, #buttons { width: 100%; margin-top: 10%; }
#android, #iOS { width: 50%; }
#web { width: 100%; padding-top: 10px; }
#android { padding-right: 5px; }
#iOS { padding-left: 5px; }
#buttons a { display: inline-block; width: 100%; height: 100%; padding: 15px; box-sizing: border-box;
	font-size: 15px; color: #FFFFFF; text-decoration: none; text-align: center;
	border: 1px solid #fff; border-radius: 5px; background-color: rgba(0,0,0,0.65); }
#buttons a:hover { background-color: rgba(0,0,0,0.75); font-weight: 700; }

#preview { width: 40%; max-width: 320px; display: inline-block; position: relative; vertical-align: middle; }
#mobile { width: 100%; }
#screenshot { position: absolute; width: 100%; height: 100%; z-index: -1;
	background: url("../img/preview.png") center/92% auto no-repeat; }

#photo_credits { position: fixed; bottom: 2px; left: 0; right: 0;
	font-size: 12px; color: rgba(255,255,255,0.5) !important; text-align: center; }
#photo_credits a { color: inherit; text-decoration: none; }

@media only screen and (max-width: 600px) {
	body { overflow-y: initial; }
	#body_container { top: initial; transform: none; padding: 20px 0 20px 0; }
	#content { width: 100%; margin-right: 0; }
	#preview { width: 70%; margin-top: 10%; }
	#photo_credits { z-index: -2; }
}