/*GENERAL*/

* {box-sizing: border-box; word-wrap: break-word; margin: 0; padding: 0;}
body {font-family: Georgia,Times New Roman,serif; font-size: 100%; color: #382519; line-height: 150%;}
header .info, a.button, .price, #footernav, #salesnav, label, textarea {font-family: Verdana,Arial,sans-serif;}
a {text-decoration: none;} img {max-width: 100%; height: auto;}
header ul, footer ul {list-style-type: none;}
::selection {background: #382519; color: #e0daca;}

#wrapper {width: 100%; max-width: 1250px; margin: 0 auto;}

header {text-align: center;}
#logodiv {line-height: 0;} #logodiv img {max-height: 5rem;}
.info {padding: .5em; font-size: .875em;}
nav {background: #382519;} nav a {color: #e0daca;} nav ul {max-height: 0; overflow: hidden;} nav li {padding: .25em 0;} nav li:hover {background: #baa184; color: #382519;}
nav label {display: block; height: 3em; cursor: pointer; background:url(images/navdown.svg) center no-repeat;}
input#dropdown {display: none;} input:checked +label {background-image: url(images/navup.svg);} input:checked ~ ul {max-height: 100%;}

.box h1, .box h2, .content h1 {font-size: 3rem; line-height: 125%;}
.noimg {padding: .5em 0 !important; margin-bottom: 1em;}

.button {font-size: 1.125rem; font-weight: bold; padding: .75em; background: #382519; display: inline-block; color: #e0daca;} .button:hover, .salesbox:hover {background: #baa184; color: #382519;}

footer {text-align: center; padding: 1em 0; background-color: #baa184; background:url(images/footer.jpg) top no-repeat; background-size: cover;} footer ul, footer .info, footer p {padding: .25em 0;}
footer a {color: #382519;}
footer li {display: inline-block;}
footer #socialmedia li {height: 50px; width: 50px; margin: 0 5px; background:url(images/social.svg);}
#socialmedia li.tw {background-position-x: -50px;} #socialmedia li.ig {background-position-x: -100px;} #socialmedia li.yt {background-position-x: -150px;}
footer #socialmedia li:hover {background-position-y: 50px;}
#footernav li {padding: 0 0.5em;} #footernav li:hover {background: #382519; color: #e0daca;}

/*HOMEPAGE*/
main h2, .box h2 {line-height: 115%;}

.box {font-size: 1.5em; line-height: 150%; text-align: center; padding: 1em 0; background: #baa184;} .box span {display: block; padding: .5em;} .box p {padding-bottom: .5em;}

#hero {background:url(images/homepage/hero.jpg) bottom no-repeat; background-size: cover;}

#sales {padding-top: 2em; font-size: 1.5em; line-height: 150%;} #sales h2 {font-size: 3rem; text-align: center;}
.salesbox {background: #382519; color: #baa184;}
.salesimg {max-height: 365px; overflow: hidden;} #sales img {display: block; background: #baa184;}
#sales figcaption {padding: .75em;} #sales p {margin: .5em 0;} .price {font-size: 1.125rem; font-weight: bold; color: #e0daca;}

#donate {margin: 1em 0; background:url(images/homepage/shelf.jpg) center no-repeat;}

#volunteer {padding: 0;} #volunteer-img img {width: 100%; height: auto; margin: 0;} #volunteer .text {padding: 1em 0;} #volunteer p {margin: 1em 0;} #volunteer .button {margin-bottom: 1em;}

/*SALES*/

#csales {background: url(images/inner/sales.jpg) center no-repeat; background-size: cover;} #csales h1 {color: #baa184;}
#salesnav {display: none;}
section {padding-bottom: 1em;} article {margin-bottom: 3em;}
article figcaption {padding: .5em 1em; text-align: center;} article  figcaption h2 {font-size: 3rem;} article figcaption p {font-size: 1.125rem; line-height: 200%; font-style: italic; margin-top: 1rem;}
.desc {margin: .5rem 1rem; font-size: 1.5rem; line-height: 175%;} .desc p {margin: 1rem 0;}
.pricetag {margin-left: 1rem;}

/*OTHER PAGES*/
.contenttxt {padding: 0 1em; margin-bottom: 3em;} .contenttxt p {font-size: 1.125rem; line-height: 150%; margin: 1em 0;}
.content h2 {font-size: 1.5rem; margin-top: 1em;}
.contenttxt ul {margin-left: 1em; font-size: 1rem;} .contenttxt li {padding-left: .5em; margin: 1em 0;}

.contact {padding-left: 1em;}
.phone {font-weight: normal; display: block; margin: 1rem 0 3rem 1rem;}
label, input, textarea {display: block; width: 100%; margin: .5em 0;} input, textarea {background: #e0daca; border: 0; font-size: 1rem; color: #382519; padding: .75em 1em;} label, textarea {margin-top: 1em;}
textarea {resize: vertical; min-height: 10em; margin-top: 2em;}
button.button {border: 0; font-size: 1rem; padding: .5em .75em; display: block; margin: 1em 0;}

#cdonate {background: url(images/homepage/shelf.jpg) center no-repeat; background-size: cover;}

/*MEDIA QUERIES*/
@media only screen and (min-width: 550px) {
	#headercontent, footer {overflow: auto; text-align: left;}
	#logodiv, header .info, .salesimg, #sales figcaption {float: left; width: 50%;}
	
	header label {display: none;}
	#headercontent .info {color: #baa184; width: 75%;}
	#logodiv {background: 0; padding: 1em; width: 25%;}
	
	nav ul {max-height: 100%; overflow: visible; background: #fff;} nav li {display: inline-block; padding: .75em 1em; color: #382519;} nav li:hover {color: #baa184; background: #392519;}
	
	.left, .right {width: 60%; float: left; padding: 0 1em;}
	.left {padding-top: .15em;} #socialmedia, #footernav {width: 125px; float: left;} #socialmedia {padding-top: .5em;}
	footer .info {text-align: right; line-height: 1.15em;} .right {width: 40%;}
	
	#hero {text-align: left;} #hero .text {width: 75%;} #hero h1, #hero .button {margin-left: 1rem;} #hero span {margin-left: .5rem;}
	
	#sales h2 {margin-bottom: .5em;} .salesbox {overflow: auto; background: 0; color: #392519;} .salesimg {margin: 1em 0; padding-left: .75em;} .price {color: #baa184;} .salesbox:hover {background: #392519; color: #baa184;}
	
	#donate {background-size: cover;}
	
	#volunteer {margin-bottom: 1em;} #volunteer div {display: table-cell; width: 50%;}
	#volunteer-img {background: url(images/homepage/volunteer-625.jpg) center no-repeat; background-size: cover;} #volunteer-img img {display: none;} #volunteer .text {text-align: left; padding-left: 1em;}
	
	.pagebox {padding: 2em 0;}
	article figcaption {text-align: left; background: rgba(56,37,25,.75); color: #e0daca; position: absolute; margin-top: -10.35rem;}
	
	label {width: 49%; float: left;} .leftlabel {margin-right: 2%;}
}

@media only screen and (min-width: 800px) {	
	header, #salesgrid {overflow: auto;}
	header {padding-top: 1em;}
	#logodiv {width: 30%; padding: 0 2em;}
	#headercontent .info {text-align: right; width: 70%; padding-right: 2em;}
	
	nav ul {width: 75%; float: right; text-align: right; padding-right: 1em;}
	
	footer {padding: 1em 1em 1em .5em;}
	
	#hero .text {padding-left: .5em;}
	
	.salesbox {width: 33.33%; float: left;}
	.salesimg, #sales figcaption {float: none; width: 100%;} .salesimg {margin: 0; padding: 0; max-height: 367px;}
	
	#donate {padding: 1.5em 0;} #donate h2 {margin-bottom: 3em;}
	
	#volunteer .text {padding: 3em 1em;}
	
	.pagebox {padding: 3em 0; margin-bottom: 1rem;}
	main {overflow: auto;}
	#salesnav {display: block; float: left; width: 30%;}
	section, .content {width: 70%; float: right; position: relative;}
	.sticky {position: fixed; top: 0; max-width: 375px;} .sticky + main {padding-top: 1em;} /*https://www.w3schools.com/howto/howto_js_navbar_sticky.asp*/
	
	#salesnav ul {background: #e0daca; list-style-type: none; margin-right: 1rem; font-size: .875rem;}
	#salesnav li {padding: .5rem 1rem; color: #382519;} #salesnav a li:hover {font-weight: bold; background: #baa184;}
	.here {font-weight: bold;} .subnav {padding-left: 2rem !important;}
}