/* CSS Document for Screens */
/* Google fonts - free fonts (make sure to not choose so many fonts it gets out of the green for website speed) */
/* Also the font import has to be first on the CSS file */



/* ---------------Header-Home-Page------------- */

header {
	background: #000000 url(../images/bg.jpg) no-repeat center top;
	top: 0px; 
	position:relative;
	background-size: 110%; 
	height: 985px;
}

header div.hero {
	position: absolute;
	width: 60%;
	top: 480px;
	left: 8%;
}
header div.hero h1 {
	line-height: 1em;
	margin: 0 0 10px 0;
	color: #fff;
}

@media screen and (max-width: 1215px) {
	header {height: 800px;}
}

@media screen and (max-width: 1053px) {
	header {height: 700px;}
}

@media screen and (max-width: 899px) {
	header { height: 600px; background-image: url(../images/bg.jpg)}
	header div.hero { top: 320px; left: 6%;}
}

@media screen and (max-width: 760px) {
	
	header { font-size: 1em; height: 400px; background-image: url(../images/bg.jpg)}
	header div.hero { top: 140px; left: 5%;}
	

}

@media screen and (max-width: 625px) {

	header { height: auto; min-height: 260px; background-image:url(../images/bg.jpg); backgound-postion: left top;}
	header div.hero h1 { margin-bottom: 10px;}
	

}