/* the home page hero header background image (height and image position done at breakpoints, colors set locally on the Hero Module) */


#home #header {
/* have to update the hero image here \/ \/ \/ \/ \/ \/  */
	background-image: url("/hero/hero-94P-low-rear.jpg");
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:0% 0px; /* left */
	/* this sets up the relationship for the absolute position of the hero content */
	position: relative; 
	}
#hero { /* position big hero type */
	margin-left: 4px;
	position: absolute; /*works relative to the parent */
	}


/* 1 * /
/* @media mobile baseline layout blocks  */
/*  \/ \/ \/ \/ \/ \/ position big hero type... top, bottom, percentages  */
#home #header {
	height: 130px;
	}
#hero { /* position big hero type... top, bottom, percentages */
	bottom: 8%;
	}
#hero .name { /* stack for big hero type */
	line-height: 27px;
	}


/* 2 */
/* Tablet Portrait Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
#home #header {
	height: 200px; /* 160 */
	}
/*  \/ \/ \/ \/ \/ \/ position big hero type... top, bottom, percentages  */
#hero { 
	bottom: 8%;
	}
#hero .name { /* stack for big hero type */
	line-height: 32px;
	}
}

/* 3 */
/* Desktop + Tablet Landscape Single Column Layout: 769px up to 1000px */
@media only screen and (min-width: 769px) {

#home #header {
	height: 250px;
	}
#hero { 
	bottom: 8%;
	}
#hero .name { /* stack for big hero type */
	line-height: 44px; 
	}
}

/* 4 */
@media only screen and (min-width: 900px) {
#home #header {
	height: 270px;
	}
}