@charset "utf-8";
/* CSS Document */


/* ******************************************************* */
/* Resetting Default Layout and Text */
/* ******************************************************* */

html {
	box-sizing: border-box;
	font-size: 10px;
}



/* ******************************************************* */
/* Site Universals */
/* ******************************************************* */

body {
	background-color: #FFFFFF;
	margin: 0;	
	color: #34210C;
	font-size: 1.6rem;
	font-family: Helvetica, Arial, sans-serif;
	
	/* creates sticky footer */
	min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}



/* ******************************************************* */
/* Site Template Layout */
/* ******************************************************* */

/* ********** Header layout ********** */

header, footer {
	background-color: black;
	position: sticky;
	top: 0;
	width: 100%;
	margin: 0;
	z-index: 100;
}

.header-logo {
	vertical-align: middle;
}

#header-banner {
	padding: 2rem 0 0 2rem;
}

#header-logo {
	max-width: 14.5rem;
	width: 25%;
	margin-right: 2rem;	
}

#header-brand-name {
	max-width: 60rem;
	width: 75%;
}


/* nav layout */
nav {
    padding: 1rem;
}

nav ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

nav li {
	display: block;
	padding: 1rem 0;
	text-align: center;
}

nav a {
	flex: 1;
	max-width: 15rem;
	margin: 0 2rem 0 0;
}

/* ********** Footer layout (main layout options above with header) ********** */

footer {
	background-color: #377A2F;
	text-align: center;
	padding: 2rem 0;
}

#footer-banner {
    display: inline-block;
    vertical-align: middle;
}

#footer-logo {
    height: 10rem;
}

#footer-nav {    
    display: inline-block;
    padding: 0 5rem;
    vertical-align: middle;
}

#footer-nav ul {    
    padding: 0;
}

.social {
    display: inline-block;
    vertical-align: middle;
}

.social img {
	width: 4rem;
	height: 4rem;
}



/* ******************************************************* */
/* Main content area layout */
/* ******************************************************* */

main {
	margin-bottom: 4rem;	
}

#page-intro {	
	background-color: #377A2F;	
	margin-bottom: 4rem;
	padding: 0;
}

#intro-banner, #intro-banner-slide {
	min-height: 10rem;	
	padding: 0 5%;
}

#intro-headline, #intro-headline-slide {	
	line-height: 10rem;	
	color: #FFFFFF;
}

#intro-img {	
	width: 100%;
}

#intro-content {
	background-color: #FFFFFF;	
	padding: 2rem 5% 0;
}

.icon {
	height: 6rem;
}



/* ******************************************************* */
/* Common Page Content Layout */
/* ******************************************************* */

#page-content, #page-content-contact {	
	padding: 0 5%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 4rem;
}

.main-content-section {
	padding: 0;
	margin: 0;
}

.main-content-section h2 {	
	margin-bottom: 1rem;
}

.content-section-img {
	width: 100%;
	margin-bottom: 1rem;
}

.content-section-icon {
	height: 6rem;
	float: left;
}

.main-content-section div {
	padding-left: 6rem;
	margin-left: 2rem;
}



/* ******************************************************* */
/* Typography */
/* ******************************************************* */
h1 {
    font-family: Tahoma, sans-serif;	
	font-size: 3.2rem;
	margin: 0;
}

h2 {
    font-family: Tahoma, sans-serif;	
	font-size: 2.4rem;	
	margin: 0;
} 

h3 {
    font-family: Tahoma, sans-serif;	
	font-size: 2rem;
	margin: 0;
}

p, ul, ol {
	margin: 0;
	line-height: 2.2rem;
}

.fine-print {
	font-size: 1rem;
}

address {
    font-style: normal;    
}



/* ******************************************************* */
/* Links */
/* ******************************************************* */

/* ********** General Links styles ********** */

a, a:visited {
	outline: none;
	text-decoration: none;
    color: inherit;
}

a:focus, a:hover {
	color: #F2C52F;
}

a li:focus, a li:hover, li a:focus, li a:hover {
	text-decoration: underline;
}

a:active {
	color: #F38F31;
}

/* ********** Header Nav Links styles ********** */
/* need to add .current class to any nav link tag for each page */

#header-nav a {
	color: #FFF4CC;
}

#header-nav a:focus, #header-nav a:hover, #header-nav a.current:hover {
	color: inherit;
}

#header-nav li:hover {
	background-color: #F2C52F;
}

#header-nav a:active, #header-nav a.current {
	color: #F38F31;
}

/* ********** Social media links styles ********** */

.social a img:focus, .social a img:hover {
	background-color: #F2C52F;
	text-decoration: none;
}

.social a img:active {
	background-color: #F38F31;
}

/* ********** Button links styles ********** */

.form-button {
    background-color: #F2C52F;
    width: initial;
    height: 3rem;
    border: 0;
	font-weight: bold;
	margin-top: 1rem;
	color: #34210C;
}

.form-button:focus, .form-button:hover {
    background-color: #F38F31;
}