* {
    box-sizing: border-box;
	}

		body, html {
		height: 100%;
		background: #e5e7e6;
	}
	
	p, a, h1, h2, h3, h4, h5 {
		font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	}

		header {
			padding-bottom: 10px;
			background: #fff;
		}

	.logo img {
		height: 100px;
		float: left;
		display: inline-block;
		padding: 10px;
		}	

	.topnav {
		background-color: #fff;
		overflow: hidden;
		float: right;

	}

	.topnav a {
		float: left;
		display: block;
		color: #000;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px;
	}

	.topnav a:hover {
		background-color: #8a3324;
		color: #fff;
	}

	.active {
		background-color: #8a3324;
		color: #fff !important;
	}

	.topnav .icon {
		display: none;
	}

button.go {
    background-color: #4CAF50;
    color: white;
	padding: 6px 8px;
	font-weight: 200;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
	font-family: 'Krub', sans-serif;
	border: 2px solid #fff;
	cursor: pointer;
}



	/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
	@media screen and (max-width: 600px) {
	  .topnav a:not(:first-child) {display: none;}
	  .topnav a.icon {
		float: right;
		display: block;
	  }
	}

	/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
	@media screen and (max-width: 600px) {
	  .topnav.responsive {position: relative;}
	  .topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	  }
	  .topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	  }
	}

		.search {
			float: right;
			clear: right;
			padding-right: 15px;
		}
		.search input[type=text] { 
		padding: 6px;
		margin-top: 8px;
		margin-right: 16px;
		font-size: 17px;
	}

	.signin {
		padding-left: 5px;
		}

	.signin a {
		color: #e9692c;
		text-decoration: none;
		font-size: 16px;
		font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		}

	.signin a:hover {
		color: #4CAF50;
	}

		.clear {
			clear: both;
		}

		/* Hero */
	.hero-section {
	  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("roadwithtrees.jpg") 50% no-repeat;
	  background-size: cover;
	  height: 50vh;
	  text-align: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.hero-section .hero-section-text {
	  color: #fefefe;
	}

	.hero-section h1 {
		font-size: 50px;
	}

	.hero-section p {
		font-size: 25px;
		font-family: 'Krub', sans-serif;
		font-weight: 500;
	}

	#main h2 {
		text-align: center;
		color: #000;
		padding: 15px 0;
		font-family: 'Krub', sans-serif;
	}
	
	#main p {
		font-size: 18px;
		line-height: 30px;
		text-indent: 15px;
		margin: 20px;
		font-family: 'Krub', sans-serif;
		font-weight: 500;
	}
	
	#featured-products {
		background-color: #fff;
	}
	
	#featured-products h2 {
		text-align: center;
		color: #000;
		padding: 25px 0 15px 0;
		font-family: 'Krub', sans-serif;
	}	
	#featured-products .product {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	
	.product {
		width: 200px;
	}
	.product-image {
		height: 200px;
	}
	
	.product-details {
		text-align: center;
		color: #000;
	}
	
	.flexcontainer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
	}
	
	#contact {
		text-align: center;
		padding-bottom: 30px;
	    position: relative;
   	    overflow: hidden;
	}
	
#contact h2 {
	font-family: 'Krub', sans-serif;
}

/*
	#contact:before {
		content: ' ';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		opacity: 0.2;
		background-image:url("crissxcross.png");
		background-repeat: repeat;
		background-position: 50% 0;
		-ms-background-size: cover;
		-o-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size: cover;
		background-size: cover;
	}
*/
	.social-media {
		text-align: center;
	}

	.social-media img {
		width: 50px;
		height: 50px;
	}

	footer {
		background-color:#8a3324;

	}
	
	.footer-links {
		text-align: center;
		padding: 30px 0;
		color: #fff;
	}
	
	footer a {
		color: #fff;
		text-decoration: none;
	}

/* Button Style */

.shop {
    background-color: #e9692c;
    color: white;
	font-weight: 600;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
	font-family: 'Krub', sans-serif;
	 -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	border: 2px solid #fff;
	cursor: pointer;
}

.shop:hover {
    background-color: #fff; 
    color: #e9692c;
	border: 2px solid #e9692c;
}


/* Form Styles */
#contact input, textarea, select {
    width: 15%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-family: 'Krub', sans-serif;
}

#contact input:focus, textarea:focus {
	outline: none;
    border: 2px solid #4CAF50;
	font-family: 'Krub', sans-serif;
}

#contact input[type=submit] {
    width: 10%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

	.footer-links a {
		color: #fff;
		text-decoration: none;
		font-size: 20px;
		font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		}

.footer-links a:hover {
		color: #4CAF50;

}