/* OUR STORY STYLE */
* {
	margin: 0px; padding: 0px;
}
body {
	background-color: #718590;
}

.master {
	display: grid;
	grid-template-areas: "hero"
		"main"
		"footer";
		
	grid-template-columns: 100%;
	grid-template-rows: 800px 
						auto
						auto;
}

.hero-content {
	height: 800px;
	grid-area: hero;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	justify-self: center;
	text-align: left;
}

.banner-image-hidden {
	display: none;
	width: 100%;
}

.header-copy {
	width: 80%;
	max-width: 1150px;
	height: 100%;
	margin: 0 auto;
	padding-top: 250px;
}

.header-intro-text {
	max-width: 470px;
	color: white;
	font-family: 'Roboto';
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	padding: 0px 30px;
}

.main-content {
	grid-area: "main";
	width: 100%;
	background-color: #d7b86a;
	align-items: center;
	justify-content: center;
	height: auto;
	padding: 50px 0px;
}
.footer {
	height: auto;
	clear: both;
	grid-area: "footer";
}

/* ------------- MAIN ---------- */


.category-grid {
	display: grid;
	grid-template-areas: "box-1 box-2 box-3";
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	
	width: 90%;
	height: 100%;
	padding: 20px 0px;
	margin: 0 auto;
	max-width: 940px;
}

#box-1 { grid-area:"box-1"; }
#box-2 { grid-area:"box-2"; }
#box-3 { grid-area:"box-3"; }
#box-4 { grid-area:"box-4"; }

#box-1, #box-3 {
	background-color: #f0e2c7;
}

#box-2, #box-4 {
	background-color: #f0e2c7;
}



.box-content {
	padding: 10px 0px 0px 0px;
	width: 90%;
	margin: 0 auto;
}

.box-content h3 {
	padding: 20px 0px 0px 0px;
	color: black;
}
.box-content h4 {
	padding: 10px 0px 15px 0px;
	color: black;
}
.box-content p {
	padding: 0px 0px 40px 0px;
	font-family: roboto;
	font-weight: 300;
}

#box-image-1, #box-image-2, #box-image-3, #box-image-4, #box-image-5 {
	min-height: 300px;
	width: 100%;
	height: auto;
	max-width: 300px;
	background: url(../images/empty.png)no-repeat;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}









/* -------------INTERNET EXPLORER---------- */

/* ------CSS GRID FOR MODERN BROWSERS------ */
@supports (display: grid) {

}



@media only screen and (max-width: 1100px) {
		
	/* --------Internet Explorer---------- */

	
	/* ------------------------ */
	@supports (display: grid) {
		
	}
	
	.master {
	grid-template-rows: 400px 
						auto
						auto;
	}
	
	h1 {
		font-size: 38px;
		padding-left: 120px;
	}
	.header-intro-text, h3 {
		font-size: 14px;
		max-width: inherit;
		width: 100%;
	}
	
	h3 {
		padding: 10px 0px;
	}

	.hero-content {
		height: 400px;
	}
	
	.header-copy {
		padding-top: 130px;
		width: 90%;
	}

}

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

	
	h1 {
		font-size: 32px;
		padding: 5px;
		
		padding: 30px 0px 0px 20%;
	}
	.header-intro-text, h3 {
		font-size: 12px;
		max-width: inherit;
		width: 100%;
	}
	
	h3 {
		padding: 18px 0px;
		padding-top: 40px;
	}
	
	.main-content {
		height: auto;
	}
	
	.header-copy {
		width: 95%;
	}
	
	.box-content {
		padding: 10px 0px 0px 0px;
		width: 90%;
		margin: 0 auto;
		max-width: 300px;
	}
	
	
	
	.category-grid {
		justify-content: center;
		display: grid;
		grid-template-areas: "box-1"
			"box-2"
			"box-3";
		grid-template-columns: 95%;
		grid-template-rows: 1fr
			1fr
			1fr;
		width: 90%;
		height: 100%;
		padding: 20px 0px;
		margin: 0 auto;
		max-width: 940px;
	}
	
	
	
	
	
	
	
	
	
	
	
}



/* BORDERS 
.hero-content, .header-copy, {
	border: 2px solid red;
}
.header-copy, .our-story-copy, #our-story-copy-div {
	border: 2px solid purple;
}
.header-intro-text {
	border: 2px solid orange;
}

*/