@font-face {
    font-family: 'geosanslightregular';
    src: url('/fonts/geosanslight-webfont.eot');
    src: url('/fonts/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/geosanslight-webfont.woff') format('woff'),
         url('/fonts/geosanslight-webfont.ttf') format('truetype'),
         url('/fonts/geosanslight-webfont.svg#geosanslightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OratorStdMedium';
    src: url('/fonts/oratorstd.eot');
    src: url('/fonts/oratorstd.eot') format('embedded-opentype'),
         url('/fonts/oratorstd.woff') format('woff'),
         url('/fonts/oratorstd.ttf') format('truetype'),
         url('/fonts/oratorstd.svg#OratorStdMedium') format('svg');
	font-weight: normal;
    font-style: normal;
}

:focus { outline:none !important; }
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

html, body{
	height:100vh;
	margin:0;
	padding:0;
	overflow:hidden;
}

body{
	font-family:'geosanslightregular', Arial, Helvetica, sans-serif;
	background-color:#fff;
	display:flex;
	flex-direction:column;
}

#header{
	background-color:#fff;
	margin:0;
	padding:0;
	height:auto;
	overflow:auto;
	width:100vw;
	flex-shrink:0;
	text-align:center;
}

#footer{
	width:calc(100vw - 20px);
	height:20vh;
	padding:10px;
	background-color:#fff;
	flex-shrink:0;
	font-family: 'Handlee', cursive;
	text-align:center;
}
#footer h2{
	margin:5px 0 10px 0;
}

#logo{
	background-image:url(/images/style_census_logo.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:200px 100px;
	display:inline-block;
	width:250px;
	height:100px;
	font-size:1px;
	color:#fff;
	margin:10px;
	padding:0;
	border:0px solid #ddd;
	border-radius:10px;
}

#content{
	display:flex;
	flex-direction:column;
	flex:1 0 auto;
	width:100vw;
}

#home{
	background-color:#D9D4D0;
	width:100vw;
	flex:1 0 auto;
	background-image:url(/images/bg-color2.jpg);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:left center;
}

#slogan{
	background-color:#000;
	color:#fff;
	text-align:center;
	padding:20px 0 20px 0;
	position:absolute;
	width:100vw;
	bottom:calc(30vh + 80px);
	opacity:.75;
	font-size:16pt;
}
#slogan h1{ margin:0 0 10px 0; }


#app_links{
	margin-top:10px;
}

#app_links img{
	height:50px;
	margin-left:10px;
	border:1px solid #aaa;
	border-radius:6px;
}

#brand{
	position:absolute;
	width:100vw;
	text-align:center;
	bottom:10px;
	color:#000;
	text-transform:uppercase;
	font-family:'geosanslightregular', Arial, Helvetica, sans-serif;
	font-size:8pt;
}

#brand-link{
	color:#aaa;
	text-decoration:none;
}


/*=============================================================
====================== Responsive Design ======================
===============================================================*/
@media only screen and (min-width: 768px) and (max-width: 959px){ /*Note: Design for a width of 768px*/
}
@media only screen and (min-width: 480px) and (max-width: 767px){ /*Note: Design for a width of 480px*/
	#header{ text-align:center; }
	#footer{ height:25vh; }
	#home{
		background-size:75% 100%;
	}
	#slogan{
		font-size:12pt;
		bottom:calc(25vh + 100px);
	}
	#app_links img{ height:40px; }
}
@media only screen and (max-width: 479px){ /*Note: Design for a width of 320px*/
	#header{ text-align:center; }
	#footer{ height:30vh; }
	#footer h2{ font-size:16pt; }
	#logo{
		background-size:120px 60px;
		height:60px
	}
	#home{
		background-size:100% 100%;
	}
	#slogan{
		font-size:10pt;
		bottom:calc(25vh + 100px);
	}
	#app_links img{ height:35px; }
}