/*
BASE (MOBILE) SCREENS
These base styles apply to all screen sizes, but may be overridden on larger screns by the media query-driven styles that appear later in this file.
*/

#hero {
	background-image: linear-gradient(#215b24, #cac8b1);
	border-bottom: 2px solid white;
}

#hero-desktop {
	display: none;
}

/* Google Map as hero image: embed responsively */
#google-maps {
    position: relative;
    padding-bottom: 50%;  /* This is the aspect ratio */
    height: 0;
    overflow: hidden;
}

#google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#content_and_footer {
	background: url(images/background-below_hero.gif) repeat-x;
}




/*
PHONES in LANDSCAPE ORIENTATION
*/
@media only screen and (min-width: 500px) {

/* Google Map as hero image: adjust aspect ratio for larger screens */
#google-maps {
    padding-bottom: 31.25%;  /* This is the aspect ratio */
}

#hero-mobile {
	display: none;
}

#hero-desktop {
	display: block;
}

}




/*
TABLETS in PORTRAIT ORIENTATION
*/
@media only screen and (min-width: 700px) {

} 




/*
TABLETS in LANDSCAPE & SMALLER LAPTOPS
This is the first appearance of the "desktop layout"
*/
@media only screen and (min-width: 964px) {

/* hero image: add left and right borders */
#hero-desktop {
	border-left: 2px solid white;
	border-right: 2px solid white;
}

/* Google Map as hero image: add left and right borders */
#google-maps {
	border-left: 2px solid white;
	border-right: 2px solid white;
}

}