html, body {
	width: 100%; 
	height: 100%; 
	font-size: 18px; 
	margin: 0px; 
	padding: 0px; 
	font-family: 'Merriweather', Arial, sans-serif; 
	background-color: #000;
}
p {line-height: 1.5em}
img {
	border: 0px;
}
header, footer, article, menu, nav {
	margin: 0px; 
	padding: 0px;
}
div#header, div#menu {
	margin: 0 auto; 
	width: 1160px;
}
#content {
	margin: 0 auto; 
	background-color: #f1e9df; 
	padding: 50px; 
	width: 1060px
}
#footer {
	width: 1020px; 
	margin: 0 auto; 
	padding: 40px 70px 40px 70px; 
	color: #f1e9df; 
	background-color: #660000
}
#footer a {
	color: #f1e9df;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline
}
h1 {
	margin: 0; 
	padding: 0;
}
.clear {
	clear: both;
}

button {
	padding: 20px; 
	margin: 15px 20px 60px 40px; 
	width: 300px; 
	font-size: 165%;
	text-transform: uppercase;
	color: #424242;
	border: 0px;
	font-family: 'Merriweather', Arial, sans-serif; 
	float: right; 
	background-color: #fff; 
	box-shadow: 0px 0px 10px 0px #818181;
	border-radius: 30px;
}
button:hover {
	box-shadow: 0px 0px 20px 0px #818181;
 	transition: all .2s ease-in-out; 	
}
h3 {
	padding: 0; 
	margin: 0px 0px 20px 0px
}
blockquote {
	font-size: 170%; 
	color: gray;
}
#box-wrapper {
	margin-top: 4%;
	display: flex; 
	justify-content: space-between; 
	padding-left: 2%;
}
.box {
	width: 30%;
	height: 175px;
	background-color: #faf7f2; 
	border: 2px solid #660000; 
	border-radius: 15px;
	box-shadow: 0px 0px 10px 0px #818181;	
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: 0% 100%;	
	display: flex;
	cursor: pointer;
}
.box a {display: block; width: 100%; padding-top: 40%}
.box:hover {
	box-shadow: 0px 0px 20px 0px #818181;
 	transition: all .2s ease-in-out; 		
}
.box img {
	width: 100%;
}
.box h2 {
	text-align: center;
	margin: 0% 10% 5% 10%;
	padding: 1%;
	color: #f1e9df;
	background-color: rgba(31,31,31,0.60);
	display: inline-block;
	align-self: flex-end;
	width: 80%;

}
blockquote img {
	width: 40px;
}
#sales-wrap {
	padding: 5%; 
	margin: 50px 0px 50px 0px; 
	background-color: white;
	display: flex;
	justify-content: space-around;
	border-radius: 10px;
}
.logo {
	width: 40%;
	padding: 0.5% 2%;
}
.logo img {
	width: 100%
}
#footer-box-wrapper {
	display: flex; 
	justify-content: space-between; 
}
.footer-box {
	width: 30%;
}
.footer-box h4 {
	color: #f1e9df;
}
#contact-wrapper {
	margin-top: 4%;
	display: flex; 
	justify-content: space-between; 
}
.contact-box {
	width: 30%;
	background-color: #faf7f2; 
	border: 2px solid #660000; 
	border-radius: 15px;
	box-shadow: 0px 0px 10px 0px #818181;	
}
.contact-box:hover {
	box-shadow: 0px 0px 20px 0px #818181;
 	transition: all .2s ease-in-out; 		
}
.contact-box img {
	width: 100%;
	border-radius: 13px 13px 0px 0px;
}
.contact-box h3 {
	text-align: center;
	padding-top: 5%;
}
.contact-box p {
	padding: 0% 7% 0% 7%;
	font-size: 85%;
	line-height: 1.5em;
}
.contact-wrap {
	width: 100%;
}
.contact-info {
	width: 45%;
	float: left;
}
.contact-map {
	width: 45%;
	float: right;
}
#results-wrapper {
	margin-top: 4%;
}
.results-card {
	width: 30%;
	float: left;
	margin: 0% 1.3% 3% 1.3%;
	background-color: #faf7f2; 
	border: 2px solid #660000; 
	border-radius: 15px;
	box-shadow: 0px 0px 10px 0px #818181;	
}
.results-card:hover {
	box-shadow: 0px 0px 20px 0px #818181;
 	transition: all .2s ease-in-out; 		
}
.results-card img {
	width: 100%;
	border-radius: 13px 13px 0px 0px;
}
.results-card h3 {
	margin: 5%;
}
.results-card p {
	padding: 0% 7% 0% 7%;
	font-size: 85%;
}
.results-card a {
	text-decoration: none;
	color: #000;
}
#details-wrap h3, #details-wrap h4 {
	text-align: center;
}
#details-wrap h3 {
	margin-top: 30px;
}
.details-left, .details-right {
	float: left;
	width: 36%;
	padding-left: 12%;
}
.filter {font-size: 20px; border-radius: 5px; padding: 3px;}
.filter option {font-size: 20px;}
.search-option {font-weight: bold;}
.search-option input  {font-size: 20px; border-radius: 5px; padding: 3px;}
.search-option select, .search-option select option {font-size: 20px; border-radius: 5px; padding: 3px;}
#sort-wrapper {	display: flex; justify-content: left; align-items: left;}
#sort-wrapper div {margin: 0% 2%;}
#sort-wrapper div select {font-size: 20px; border-radius: 5px; padding: 3px;}
hr {margin: 5%}
aside.our-story {float: right; width: 30%; padding-left: 2%;}
aside.our-story img {width: 100%;}
aside.our-story p {font-size: 70%;}
.history-box {width: 32%;}
.history-box img {width: 100%;}
/* RESPONSIVE NAVIGATION MENU */

menu a { color: #000; font-weight: 700;
}

 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: -5px 0px 0px 0px;
  padding: 0;
  background-color: #660000;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: block;
	flex: 0 1 auto;
  float: left;
}

nav a {
  display: block;
  padding: 0 25px;
  color: #f1e9df;
  font-size: 18px;
  line-height: 60px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #820000; }

nav a:hover { background-color: #820000; transition: all .2s ease-in-out; }

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 230px;
  float: none;
  display: list-item;
  position: relative;
    z-index: 100
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }

/* NAV MENU for Media Queries
--------------------------------------------- */

@media all and (max-width: 768px) {


nav { margin: 0;}
	nav a {font-size: 20px;}
.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #820000;
  padding: 0 20px;
  color: #f1e9df;
  font-size: 20px;
  line-height: 50px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #820000; color: #f1e9df }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #820000; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #212121; }

nav ul ul {
  float: none;
  position: static;
  color: #820000;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}
@media screen and (max-width:768px){
	div#header, div#menu, div#footer {width: 100%;}
	div#content {width: 88%; padding: 6%;}
	div#header img {width: 100%;}
	.content-left, .content-right {float: none; width: 100%;}
	div#footer {padding: 1% 0 1% 0; font-size: 90%;}
	aside {display: none;}
	h1, h2, h3 {font-size: 115%;}
	#box-wrapper{display: block; padding-left: 0;}
	.box {display:block; position:relative; width: 92%; margin: 10% 3% 8% 3%; float: none; height: 188px;}
	blockquote {font-size: 100%;}
	blockquote img {width: 20px;}
	#sales-wrap {display: block;}
	.logo {width: 80%; padding: 3% 10% 3% 10%;}
	#contact-wrapper {display: block;}
	.contact-box {width: 94%; margin: 7% 3% 0% 3%;}	
	.contact-info, .contact-map {width: 88%; padding: 3% 6%; float: none;}
	#footer-box-wrapper {display: block;}
	.footer-box {width: 88%; padding: 3% 6%;}	
	button {padding: 3%; margin: 10% 3% 8% 3%; width: 92%; font-size: 100%; float: none;}
	.results-card {width: 94%; margin: 7% 3% 0% 3%;}	
	.details-left, .details-right {float: none; width: 88%; padding: 0% 6% 0% 6%;}
	#sort-wrapper {display: block;}
	#sort-wrapper div {margin: 5% 0%;}
	#sort-wrapper div select {font-size: 18px;}
	.history-box {float: none; width: 88%; padding: 3% 6%;}
	aside.our-story {display: block; width: 88%; padding: 8% 6%;}
}