html,body,div,table,tr,thead,tbody,th,td,ol,ul,li,h1,h2,h3,h4,h5,h6,p,figure,figcaption,small,button,a { margin: 0; padding: 0; border: 0; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

body { font-family: georgia, serif; }


/*--- layout ---*/

html.noscroll,
html.noscroll body { overflow: hidden !important; height: 100% !important; }

#top, header, main, footer { margin: 0 auto; }
header:after, main:after, #top:after, footer:after, footer nav:after, #footerSections:after, #title:after, #breadcrumbs:after { content: ' '; display: table; clear: both; }

body, header, nav { background: #afafaf url('/images/bg.jpg') repeat 0 0; }


/*--- typography ---*/

h1,h2,h3,h4,h5,h6,p,li { font-weight: normal; }

header nav li a, header nav li button { font-size: 17px; }

h1 { font-size: 24px; margin-bottom: 8px; }
#single.notfound h1 { padding-top: 100px; text-align: center; margin-bottom: 200px; }
/*h2 { margin-bottom: 8px; } ??? */
h3 { margin-bottom: 8px; }
p { margin-bottom: 24px; font-size: 17px; line-height: 24px; }

a { color: #f9f9f9; }




#main { clear: both; padding: 0 14px; }
#main h1 { text-align: center; max-width: 1000px; padding: 0 20px; margin: 0 auto; }

@media screen and (min-width: 768px) {
	#main { padding: 0 24px; }
	#main h1 { padding: 0 24px; }
}
@media screen and (min-width: 900px) {
	#main { padding: 0 40px; }
	#main h1 { padding: 0 40px; }
}


#single { clear: both; padding: 0 20px; max-width: 1000px; }

@media screen and (min-width: 768px) {
	#single { padding: 14px 25px 0; /*border-top: 1px solid #ccc;*/ }
}
@media screen and (min-width: 880px) {
	#single { padding: 14px 40px; }
}

#mainContent, #sidebar { max-width: 1000px; margin-bottom: 24px; }

@media screen and (min-width: 880px) {
	#mainContent { max-width: 600px; float: left; }
	#sidebar { max-width: 280px; float: right; }
	.quotes { padding-top: 50px; }
}

#single ul { margin-bottom: 24px; }
#single li { font-size: 17px; line-height: 24px; margin-bottom: 6px; margin-left: 1.2em; }

#single h1,
#single h2.title { font-size: 28px; line-height: 32px; margin-bottom: 18px; }
#single h2.title { margin-bottom: 0; }
#single h2 { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
#single h3 { font-size: 17px; line-height: 24px; margin: 0; }
#single p  { font-size: 17px; line-height: 24px; margin-bottom: 24px; }
#single h4 { font-size: 16px; line-height: 24px; margin: 0; }
#single h5 { font-size: 15px; line-height: 24px; margin: 0; }
#single h6 { font-size: 14px; line-height: 24px; margin: 0; }

#single p.date { font-size: 15px; line-height: 20px; color: #333; }
#single h1.title { margin-bottom: 4px; }

#single #sidebar h1 { font-size: 28px; line-height: 32px; margin-bottom: 18px; }
#single #sidebar h2 { font-size: 20px; line-height: 24px; margin-bottom: 12px; }
#single #sidebar h3 { font-size: 17px; line-height: 24px; margin: 0; }
#single #sidebar p  { font-size: 17px; line-height: 24px; margin-bottom: 24px; }
#single #sidebar h4 { font-size: 16px; line-height: 24px; margin: 0; }
#single #sidebar h5 { font-size: 15px; line-height: 24px; margin: 0; }
#single #sidebar h6 { font-size: 14px; line-height: 24px; margin: 0; }

#single article { padding-bottom: 48px; }
#single article:last-child { padding-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
tbody tr:nth-child(odd) { background-color: #c6c6c6; }
th, td { padding: 4px 6px; }

#single.blog #sidebar { padding-top: 76px; }
#single.blog #sidebar ul { list-style: none; }
#single.blog #sidebar li { margin-left: 0; }

form { margin-bottom: 50px; }
input#hpfp { display: none; }
#single label { display: block; padding-top: 18px; }
/*input, */textarea { font-size: 17px; line-height: 17px; padding: 12px; text-align: left; display: block; width: 100%; max-width: 1000px; box-sizing: border-box; resize: vertical; }
input { font-size: 17px; line-height: 17px; padding: 12px; }
input.search { width: 100%; max-width: 700px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
/*input.search { font-size: 36px; line-height: 36px; padding: 8px; }*/
input.submit { background-color: #0071e3; color: #fff; padding: 12px 20px; border: 0; border-radius: 4px; cursor: pointer; float: right; width: 200px; }
.contact input.submit { float: none; }
textarea { margin-bottom: 24px; }
#single .errors { margin: 0; list-style: none; color: #d00; }
#single .errors li { margin: 0 0 6px; }

#single #results { list-style: none; }
#single #results li { margin-left: 0; margin-bottom: 12px; }


#footerSections { clear: both; max-width: 960px; margin: 0 auto; padding-top: 24px; border-top: 1px solid #d0d0d0; }
.home #footerSections { border: 0; padding: 0; }
.sectionsInner { display: flex; flex-wrap: wrap; align-items: top; justify-content: space-between; }
#footerSections.three {  }
#footerSections.two   {  }
#footerSections.one   {  }

#footerSections .section { margin-bottom: 24px; }

#footerSections small { display: block; font-size: 14px; line-height: 18px; margin-bottom: 4px; }
#footerSections h2 { font-size: 20px; line-height: 24px; font-weight: bold; margin-bottom: 4px; }
#footerSections p { font-size: 17px; line-height: 22px; margin-bottom: 12px; }
#footerSections a { text-decoration: none; color: #f0f0f0; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); }
#footerSections a:hover { color: #fff; text-shadow: none; }

@media screen and (min-width: 768px) {
	.sectionsInner { margin: 0 -16px; }
	#footerSections .section { padding: 0 16px; }
	#footerSections.three .section { width: 30.6666%; margin-left: 4%; }
	#footerSections.one   .section { float: none; margin: 0 auto; }
	#footerSections.two   .section { width: 45%; margin-left: 5%; }
	#footerSections .section:first-child { margin-left: 0 !important; }
}
@media screen and (min-width: 1000px) {
	.home #footerSections { padding-left: 20px; padding-right: 20px; }
}


.sizing { position: relative; }
.sizing a { position: absolute; top: 0; width: 50%; height: 100%; display: block; /*border: 2px solid #b00;*/ }
.sizing a span { display: none; }

.home .sizing { max-width: 1250px; margin: 5px auto 36px; }

@media screen and (min-width: 1024px) { /* TODO */
	.sizing .prev { left: 0; background: url('/images/arrow-left.png') no-repeat 0% 50%; background-size: 45px 45px; }
	.sizing .next { right: 0; background: url('/images/arrow-right.png') no-repeat 100% 50%; background-size: 45px 45px; }

	.home .sizing { margin-top: 15px; }
}



/*-- layout for single, etc. --*/

#single img { margin-bottom: 24px; }
#single figure { margin-bottom: 20px; }
#single figure img { margin-bottom: 0; }
figure.left { float: left; margin: 6px 20px 20px 0; }
figure.right { float: right; margin: 6px 0 20px 20px; }
figure.center { margin: 6px 0 20px; }
figure.img { display: block; }
figcaption { padding: 4px 0; font-size: 15px; line-height: 20px; color: #333; }

#thumbs { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.thumb { position: relative; width: 292px; margin: 0 auto 85px; }
.thumb img { display: block; margin: 0 auto; max-height: 292px; }
.thumb p { font-size: 17px; line-height: 22px; width: 100%; position: absolute; bottom: -10px; transform: translateY(100%); margin: 0; text-align: center; }
.thumb a { display: block; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); }
.empty { height: 0; margin-bottom: 0 !important; }

/*
(858-(24*2)+(-(-15)*2)-(6*15))/3
*/
@media screen and (min-width: 375px) {
	#thumbs { margin: 0 -14px; }
	.thumb { width: 347px; margin: 0 14px 100px; }
	.thumb img { max-height: 347px; }
}


@media screen and (min-width: 415px) {
	#thumbs { margin: 0 -14px; }
	.thumb { width: 250px; margin: 0 14px 100px; }
	.thumb img { max-height: 250px; }
	.thumb p { font-size: 15px; line-height: 20px; }
}

@media screen and (min-width: 480px) {
	#thumbs { margin: 0 -14px; }
	.thumb { width: 220px; margin: 0 14px 100px; }
	.thumb img { max-height: 220px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35); }
}

@media screen and (min-width: 768px) {
	#thumbs { margin: 0 -15px; }
	.thumb { width: 220px; margin: 0 15px 100px; }
	.thumb img { max-height: 220px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35); }
}

@media screen and (min-width: 900px) {
	#thumbs { margin: 0 -20px; }
	.thumb { width: 250px; margin: 0 20px 100px; }
	.thumb img { max-height: 250px; }
}

@media screen and (min-width: 1024px) {
	#thumbs { margin: 0 -20px; }
	.thumb { width: 250px; }
	.thumb img { max-height: 250px; }
}


#breadcrumbs { list-style: none; margin: 0 auto 24px; max-width: 920px; }
#breadcrumbs li { float: left; color: #444; }
#breadcrumbs li, #breadcrumbs h1 { font-size: 15px; line-height: 18px; padding: 0 8px 0 0; }
#breadcrumbs li a { color: #222; }
#breadcrumbs li a:hover { color: #000; }



#back { text-align: center; }
#back { margin-bottom: -20px; position: relative; z-index: 100; }
#back a { color: #f0f0f0; }

img.photograph { display: block; margin: auto; box-sizing: content-box; }

#title { color: #f0f0f0; text-align: center; margin: 10px auto 24px; font-size: 17px; line-height: 24px; }

@media screen and (min-width: 768px) {
	img.photograph { box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5); }
	.home img.photograph { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35); }
	#title { margin: 24px auto; }
}



header { float: left; width: 100%; padding: 14px /*16px*/10px 10px; z-index: 999; }
header h2 a { display: block; background: url('/images/cc-logo-small-2x.png') no-repeat; background-size: 269px 30px; width: 269px; height: 30px; }
header h2 a span { visibility: hidden; height: 0; }

@media screen and (min-width: 768px) {
	header h2 a { background: url('/images/cc-logo-2x.png') no-repeat; background-size: 313px 35px; width: 313px; height: 35px; }
}

label#grilled-cheese { position: absolute; top: 0; right: 0; width: 48px; height: 48px; }
.bread { /*z-index: 3;*/position: absolute; top: 9px; left: 9px; width: 30px; height: 30px;
	transition: transform .25s .2s;
}
.bread-top { /*z-index: 4;*/ }
.bread-bottom {  }
.crust { display: block; width: 17px; height: 1px; background-color: #000; position: absolute; left: 7px;
	transition: transform .25s;
}
.crust-top { top: 14px; transform: translateY(-3px); }
.crust-bottom { bottom: 14px; transform: translateY(3px); }

#grilled-cheese.open .crust-top, #grilled-cheese.open .crust-bottom { transform: none; }
#grilled-cheese.open .bread-top { transform: rotate(45deg); }
#grilled-cheese.open .bread-bottom { transform: rotate(-45deg); }

.navSection, #nav { display: none; }
#nav { clear: both; }
#navTop:after { display: table; content: ''; clear: both; }
#nav h3, .navSection { border-top: 1px solid #ccc; margin-bottom: 0; }
#nav .dropdown:first-child h3 { border: 0; }
#nav .search { border-bottom: 1px solid #ccc; }
#nav h3, #nav .search a { padding: 10px 16px; box-sizing: content-box; }
@media screen and (min-width: 768px) {
	#nav h3, #nav .search a { padding: 10px 24px; }
}
@media screen and (min-width: 900px) {
	#nav h3, #nav .search a { padding: 10px 40px; }
}

#nav .search h3 { padding: 0; }
#nav h3, #nav h3 a, .navSection a { color: #f6f6f6; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); }
#nav h3:hover, #nav h3 a:hover, .navSection a:hover { color: #333; text-decoration: none; text-shadow: none; }

.navSection a { display: block; padding: 6px 16px; }

#nav input, #navToggleMain { display: none; }

@media screen and (min-width: 768px) {
	header { padding: 20px 25px 8px 22px; }
	.navSection a { padding: 6px 24px; }
}

@media screen and (min-width: 900px) {
/*	header { padding: 20px 25px 8px 38px; } ??? */
	.navSection a { padding: 6px 40px; }
}

@media screen and (max-width: 879px) { /*max-width: 767px*/
	label:hover { cursor: pointer; }
	#nav .directclick h3 { padding: 0; }
	#nav .dropclick h3 { float: left; padding: 0; }
	#nav .directclick h3 a, #nav .dropclick h3 a, #nav .more h3 { padding: 10px 16px; }
	#nav h3 a { display: block; }
	#nav .more { float: right; }
	#nav .dropclick:after { content: ' '; display: table; clear: both; }
	/*#nav .more label::after { color: #f0f0f0; padding: 10px 16px; font-size: 17px; content: '+'; float: right; }*/
	.navSectionToggle h3::after { font-size: 17px; content: '+'; float: right; }
	#nav h3.open::after { transform: rotate(45deg); }
	#top.open #nav, #nav.open, .navSection.open { display: block; }
	#header { position: -webkit-sticky; position: sticky; top: 0; }
		
	#top.open { z-index: 999; overflow: auto; height: 100%; width: 100%; background-color: rgba(0,0,0,0.8); position: absolute; left: 0; top: 0; }
	#top.open #header { border-bottom: 1px solid #ccc; }
	
	#nav h3:hover, #nav h3 a:hover, .navSection a:hover { background-color: rgba(0,0,0,0.02); }
}

@media screen and (min-width: 768px) {
	#nav .directclick h3 a, #nav .dropclick h3 a, #nav .more h3 { padding: 10px 24px; }
}

@media screen and (min-width: 880px) { /*min-width: 768px*/

	#top { max-width: 1000px; margin: 0 auto; }
	#top-inner { display: flex; justify-content: space-between; }

	#nav .directclick h3 a, #nav .dropclick h3 a, #nav .more h3 { padding: 10px 15px; }

	header { padding: 0 10px 0 38px; margin: 0; float: none; margin-top: 28px; width: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }

	#nav { padding: 26px 25px 4px 0; margin-top: 2px; background: none; clear: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

	#nav .dropdown, #nav .directclick, #nav .search { float: left; }
	#nav a:hover { text-decoration: none; }

	#grilled-cheese, #nav div.more { display: none; }

	#nav h3, #nav .search, .navSection { border: 0; }
	#nav h3, #nav .directclick a { display: block; padding: 10px 15px; }
	#nav h3 a:hover { color: #333; }
	#nav h3:hover { cursor: default; }
	
	#nav .directclick h3 { padding: 0; }
	
	.navSection a { padding: 7px 15px 10px; }

	nav li { display: inline-block; float: left; }

	#nav .dropdown { position: relative; }
	#nav .dropdown:hover h3, #nav .dropdown:hover a { color: #fff; }
	#nav .dropdown:hover { background-color: #afafaf; }
	#nav .navSection { background-color: #afafaf; min-width: 200px; position: absolute; z-index: 999; }
	#nav .dropdown:hover .navSection { display: block; }
	#nav .right .navSection { right: 0; text-align: right; }
	#nav .navSection li { display: block; float: none; }

	#search-icon { display: block; background: url('/images/search-2x.png') no-repeat 50% 50%; background-size: 16px 15px; width: 16px; height: 15px; overflow: hidden; }
	#search-icon span { /*visibility: hidden;*/ display: none; }

	/* pre grilled cheese */
	#nav ul span, #nav ul a { padding: 7px 15px 10px 15px; color: #666; border: none; }
	#nav li a, #nav li span, #nav li li { display: block; float: none; }
	#nav .dropdown:hover span, #nav ul a:hover, #nav .dropdown a:hover { color: #333; text-decoration: none; cursor: pointer; }

	#nav .dropdown:hover span { cursor: default; }
	#nav li.dropdown { position: relative; }
	#nav li.dropdown ul a, #nav li.dropdown ul span { background-color: #bbb; }
	#nav ul ul { display: none; position: absolute; min-width: 200px; }
	#nav ul ul.last { right: 0; text-align: right; }
	#nav ul .dropdown:hover ul { display: block; }
}

@media screen and (min-width: 960px) {

	/* Menu fits to the right of the Logo */

}

#footer { clear: both; border-top: 1px solid #d0d0d0; padding: 18px 20px 24px; margin-top: 12px; }
#footer nav ul { font-size: 17px; list-style: none; }
#footer nav ul a { color: #f0f0f0; border: none; text-decoration: none; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); }
#footer nav ul a:hover { color: #fff; text-shadow: none; }
#footer nav li { display: inline-block; margin: 0 30px 0 0; }
#footer small { font-size: 15px; clear: both; color: #f0f0f0; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); }

@media screen and (min-width: 768px) {
	#footer { padding: 18px 25px 24px; }
	#footer nav { float: right; }
	#footer nav ul { list-style: none; }
	#footer nav ul a {  }
	#footer nav li { margin: 0 0 0 30px; display: inline-block; }
	#footer small { font-size: 17px; clear: none; float: left; }
}

@media screen and (min-width: 1000px) {
/*	#top { max-width: 1000px; }*/
	#footer { max-width: 920px; padding-left: 0; padding-right: 0; }
}



html:after { content: 'small'; display: none; }

@media only screen and (min-device-width: 376px) {
	html:after { content: 'medium'; display: none; }
}

@media only screen and (min-device-width: 769px) {
	html:after { content: 'large'; display: none; }
}