@charset "UTF-8";
/* CSS Document */
/* first the global desktop view */
nav {
	float: right;
	padding-right: 20px;
}
/* this is a percentage-based background allowing the appearnace and branding to stay consistent through screen sizes */
body {
	
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	font-family: arial;
	background-image: 
		-webkit-linear-gradient(
	90deg,
		
		rgba(100, 175, 255, 0.4) 0,
		rgba(100, 175, 255, 0.4) 30%,
		rgba(255, 255, 255, 0.9) 30%,
		rgba(255, 255, 255, 0.9) 35%,
		rgba(200, 175, 100, 0.4) 35%,
		rgba(200, 175, 100, 0.4) 45%,
		rgba(255, 255, 255, 0.9) 45%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(255, 140, 100, 0.4) 50%,
		rgba(255, 140, 100, 0.4) 98%
	);


	background-image: 
		-moz-linear-gradient(
	90deg,
		rgba(100, 175, 255, 0.7) 0%,
		rgba(100, 175, 255, 0.7) 30%,
		rgba(255, 255, 255, 0.9) 30%,
		rgba(255, 255, 255, 0.9) 35%,
		rgba(200, 175, 100, 0.7) 35%,
		rgba(200, 175, 100, 0.7) 45%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 140, 100, 0.5) 50%,
		rgba(255, 140, 100, 0.5) 98%
	);	
	
	background-image: 
		-o-linear-gradient(
	90deg,
		rgba(100, 175, 255, 0.4) 0,
		rgba(100, 175, 255, 0.4) 30%,
		rgba(255, 255, 255, 0.9) 30%,
		rgba(255, 255, 255, 0.9) 35%,
		rgba(200, 175, 100, 0.4) 35%,
		rgba(200, 175, 100, 0.4) 45%,
		rgba(255, 255, 255, 0.9) 45%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(255, 140, 100, 0.4) 50%,
		rgba(255, 140, 100, 0.4) 98%
	);
	
	background-image: 
		linear-gradient(
	90deg,
		rgba(100, 175, 255, 0.4) 0,
		rgba(100, 175, 255, 0.4) 30%,
		rgba(255, 255, 255, 0.9) 30%,
		rgba(255, 255, 255, 0.9) 35%,
		rgba(200, 175, 100, 0.4) 35%,
		rgba(200, 175, 100, 0.4) 45%,
		rgba(255, 255, 255, 0.9) 45%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(255, 140, 100, 0.4) 50%,
		rgba(255, 140, 100, 0.4) 98%
	);
}



nav ul li {
	list-style-type: none;
	padding-left: 20px;
	text-align: right;
	display: inline-block;
}

nav ul li a {
	text-decoration: none;
	color: #393939;
	font-family: 'Lobster', cursive; 
}
/* below just one of three hover interactvity properties thrown in for user experience */
a:hover {
	color: #047577;

}
/* the hero box has a light black gradient applied over the viewable image to give overlaying text readability */
.hero-box {
	height: 338px;
	background-color:#546F02;
	background-image: linear-gradient(rgba(0,0,0, 0.3) 0%, rgba(0,0,0, 0.3) 100%), url(images/hero-box-image.jpg);
	background-position: center;
	margin: 1%;
	border-radius: 20px;
	box-shadow: 5px 5px 10px rgba(0,0,0, 0.5);
	margin-bottom: 75px;
	
}


h1 {
	color: #FFFFFF;
	font-size: 55px;
	padding-top: 120px;
	padding-left: 60px;
	text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
	font-family: 'Lobster', cursive;
}
h2 {
	color:#FFFFFF;
	font-size: 20px;
	padding-top: 0px;
	padding-left: 60px;
	text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.9);	
}

h3 {
	font-size: 25px;
	color: #393939;
	text-align: center;
	font-family: 'Lobster', cursive;
}
h3:hover {
	color: #047577;
}
.col img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
	box-shadow: 5px 5px 10px rgba(0,0,0, 0.5);
}

.col img:hover {
	box-shadow: 5px 5px 10px rgba(34,124,100, 0.5);
}

.col {
	width: 31.3%;
	height: 400px;
	float: left;
	margin: 1%;
}

footer {
	height: 75px;
    text-align: center;
    padding: 50px;
    text-decoration: none;
}

footer a {
	text-decoration: none;
}

/* Tablet size with a 768 breakpoint allowing two columns to form and a block display menu */
@media (max-width:768px){
	h1 {
		font-size: 40px;
		text-align: center;
		padding-left: 0px;
	}
	h2 {
		font-size: 20px;
		text-align: center;
		padding-left: 0px;
	}
	h3 {
		font-size: 20px;
	}
	.col {
		width: 48%;
	}
	nav ul li {
		display: block;
	}
}




/*mobile size with a 400px breakpoint to allow font changes and a one-column format, all nested inside one media-query set of curly braces, block menu carries over from the tablet conditions */
@media (max-width:400px){
	h1 {
		font-size: 28px;
		
	}
	h2 {
		font-size: 14px;
		text-align: center;
		
	}
	h3 {
		font-size: 17px;
	}
	.col {
		width: 98%;
	}
}