/*LAYOUT*/
* {word-wrap: break-word; box-sizing: border-box; margin: 0; padding: 0;}
body {background: #bababa; font-family: Merriweather, Georgia, serif; color: #393939; font-size: 100%;}
header, h1, h2, h3, h4, input, ul, footer, .button, article h2, textarea {font-family: "Merriweather Sans", Tahoma, sans-serif;} a {text-decoration: none;} img {max-width: 100%; height: auto;}
#wrapper {background: #fff; max-width: 1200px; margin: 0 auto;}
::selection {background: #ff3e31; color: #fff;}

header {width: 100%;}
#logo {width: 40px; height: 40px; z-index: 500;} #logo svg {fill: #ff3e31;}
#searchbar {float: right; margin-top: -40px;} #searchbar input {height: 40px; border: 0; background: rgba(255,255,255,0); color: #808080; text-align: right; padding-right: .5rem; font-style: italic;} #searchbar ::selection {background: #ff9e97;}
#arrow {color: #ff9e97; font-size: 1.313rem; line-height: 2.5rem; cursor: pointer; width: 40px; height: 40px; text-align: center; float: right; vertical-align: center; transition: .2s} #arrow:hover {color: #fff;}

nav {background: #fff; border-bottom: 2px solid #bababa;}
nav ul {max-height: 0; overflow: hidden; list-style-type: none;}
nav label {display: block; height: 2rem; cursor: pointer; background:url(images/down.svg) center no-repeat; opacity: .5; transition: .2s;} nav label:hover {opacity: 1;}
input#dropdown {display: none;} input:checked +label {background-image: url(images/up.svg);} input:checked ~ ul {max-height: 100%;}
nav li {text-align: center; padding: .5em 0; color: #ff3e31; transition: .3s; transition-property: color,background; border-radius: .1rem;} nav li:hover {background: #ff3e31; color: #fff;}
/*#navitems {padding: .5em 0;} use if background color for dropdown*/

main {padding: .5rem 0;}

footer {border-top: 2px solid #bababa; font-weight: 300; font-size: .875rem; color: #808080; text-align: center; padding: 1rem 0 1.5rem;} footer span {font-size: .75rem;}
footer ul {list-style-type: none; margin-bottom: 1em;} footer li {display: inline-block; color: #ff3e31; padding: .5em .75em; border-radius: .1rem; transition: .3s; transition-property: color,background;} footer li:hover {color: #fff; background: #ff3e31; font-weight: 400;}

.button {background: #ff3e31; color: #fff; font-weight: bold; font-size: 1.125rem; padding: .75em 1em; border-radius: .1rem; display: inline-block; margin: 1rem auto; transition: .3s;} .button:hover {background: #fff; color: #ff3e31;}
h2 {font-size: 2.25rem; line-height: 125%; font-family: Merriweather, Georgia, serif; text-align: center;}

/*HOMEPAGE*/
/*hero image credit: https://unsplash.com/photos/IL1qSqEMNBo*/
#hero {background: url(images/hero1.jpg) center no-repeat; background-size: cover; text-align: center; padding: .5rem 1rem;} #hero h2 {font-size: 2.25rem; padding: 1rem 0;} #hero h1 {font-family: Merriweather, Georgia, serif; font-weight: 300; font-size: 1.5rem; line-height: 150%; padding: 1rem 0;}
.homepage .article-content h2 {font-family: Merriweather, Georgia, serif; font-size: 1.5rem; line-height: 150%;} .homepage .article-content h2:before {content: none;}

.homepage {margin: 3rem auto;}
.sectionhead {margin-bottom: -3rem;}
.homepage article {margin-top: 5rem;}

/*ARTICLES*/
article {margin-top: 2rem; line-height: 200%;}
article img {background: #ff9e97;}
.article-content {margin: 1.5rem 1rem;}
article h2 {line-height: 125%; text-align: left;}
.meta {font-weight: 300; color: #808080; margin: 1rem 0;} .meta b {font-weight: 700;} .date {float: right;}
.readmore {font-weight: 700; color: #ff3e31; display: inline-block; transition: .2s;} .readmore:hover {color: #ff9e97;}

/*PAGES*/
h1.pagetitle {font-family: Merriweather, Georgia, serif; font-size: 2rem; line-height: 150%;}
.article-content img {margin-top: 2rem;}
.article-content h2 {font-size: 1.5rem; line-height: 115%; margin: 1rem 0;} .article-content h2:before {content: "\25b6"; display: inline-block; width: 1em; color: #ff9e97; margin-right: .25em;}
blockquote {margin: 1em 0 1em 1.5rem; font-style: italic; color: #808080; max-width: 460px; line-height: 175%;}
.article-content a {color: #ff3e31; transition: .2s;} .article-content a:hover {color: #ff9e97;}
.article-content p {margin: .5rem 0;}
.article-content ul, .article-content ol {font-size: 1.125rem;} .article-content li {margin: 1rem 0; font-family: Merriweather Sans, sans-serif;} .closer li {margin: 0;}
.article-content ul {list-style-type: none; padding-left: 1rem;} .article-content ul li:before {content: "\25b6"; color: #ff9e97; margin-right: 1rem; display: inline-block; width: 1rem;}
ol {padding-left: 2rem;} .article-content ol li {padding-left: 1rem;}
.article-content b, .article-content strong {font-weight: 900;}

.article-footer {margin: 2rem 0 5rem; font-size: .875rem;} .article-footer span {font-style: italic; margin: 2rem 0;}
.article-footer ul {font-size: .875rem; line-height: 150%;} .article-footer ul li:before {font-size: 1.125rem; margin-right: .5rem;}

.page {font-size: 1.15em;} .page h1 {font-size: 2.5rem; margin-bottom: 1rem;} .page p {margin: 1em 0;}

.contact textarea {width: 580px; max-width: 100%; resize: vertical; border: 1px solid #ff9e97; color: #393939; padding: .75rem 1rem; line-height: 150%; min-height: 10em;}
.contact a {color: #fff; padding: .25em 1em;}

.resources h2:before {content: none;} .resources h2 {margin-top: 2rem;}
.resources ul {line-height: 150%;}
.resources li a {color: #393939; font-family: Merriweather, Georgia, serif;} .resources li a:hover {color: #ff3e31;}

@media only screen and (min-width: 550px) {
	#hero {background: url(images/hero2.jpg) center no-repeat; background-size: cover; padding: 2rem;} #herotext {text-align: left;} #hero h2 {font-size: 3rem; text-align: left;} #hero h1 {font-size: 1.313rem;}
	.sectionhead {text-align: left; margin-bottom: 0;}
	
	#articles {padding: 0 2rem;} .article-content {margin: 1.5rem 0;}
	
	blockquote {margin: 0 0 0 3rem;}
}

@media only screen and (min-width: 650px) {
	header {background: none; padding: 1rem 2rem; border-bottom: 2px solid #bababa;} header label blockquote {margin: 0 0 0 1em; font-style: italic; color: #808080; max-width: 460px;}{display: none;}
	#logo {width: 15%; height: 15%; max-width: 100px;} #logo svg {fill: #ff3e31;}
	#searchbar {padding-top: 10px;} #arrow {width: 25px;} #arrow:hover {color: #ff3e31;}
	nav {border: 0; margin-top: 1rem;} nav ul {max-height: 100%; overflow: visible; text-align: right;} nav li {display: inline-block; padding: .5em; margin-left: .5em;} nav label {display: none;}
	
	#hero {text-align: left;} #herotext {width: 60%;}
	.sectionhead {margin-bottom: -1.5rem;}
	
	.meta {text-align: right; line-height: 150%; margin-top: -3em; border-right: 2px solid #bababa; padding-right: 1.5rem; position: absolute;} .meta span {display: block;} .date {float: none;}
	.homepage .article-content h2, .article-text, .pagetitle {margin-left: 11rem; max-width: 580px;} #headerimg, .headerimg {padding-left: 11rem;}
	article p {margin-top: 1em;}
	#searchbar {margin-top: -95px;} nav {margin-top: -30px;}
	
	blockquote {margin: 0 0 0 2rem;}
}

@media only screen and (min-width: 825px) {
	header {padding: 1rem 3rem;} #hero {padding: 2rem 3rem;} .sectionhead {padding-left: 1rem;}
	main {overflow: auto;}
	article {float: right; margin-right: 1rem;}
}

@media only screen and (min-width: 1201px) {
	header {padding: 2rem 4rem 1rem;}
	#hero {padding: 2rem 4rem;}
	.homepage article:first-of-type {margin-top: -1rem;}
}