html,body,iframe,div,table,tr,td,ol,ul,li,h1,h2,h3,h4,h5,h6,p,figure,figcaption,small,button,a { margin: 0; padding: 0; }
* { box-sizing: border-box; }
img { max-width: 100%; display: block; } /*80%changes all image sizes- exits masonry mode 120% stays in masonry but OVERLAPS photos 105% masonry but thin or no margins*/
a { text-decoration: none; }
body { background-color: #fff; max-width: 1050px; margin: 0 auto; }
#header, #main, #footer { background-color: #fff; }
body.photographs { max-width: none;}
#top { max-width: 1050px; margin: 0 auto; }
.photograph { display: block; margin: auto; box-shadow: 0px 0px 15px #333 ;}
/*--- layout ---*/
html.noscroll,
html.noscroll body { overflow: hidden !important; height: 100% !important; }
#top:after, #header:after, #main:after, #footer:after { display: table; content: ''; clear: both; }
/*#header { width: 100%; float: left; z-index: 999; padding: 16px 0 16px; } */
#header { width: 100%; float: left; /*padding: 24px 0 18px;*/ z-index: 999; padding: 16px 0 12px; }
#header h2 { float: left; }
#header h3 { color: #777; font-size: 14px; line-height: 28px; text-transform: uppercase; }/*for port*/
#header h3::first-letter { font-size: 17px; }/*for port*/
#header #sig { margin-left: 16px; display: block; background: url('/images/general/sig-small-2x.png') no-repeat; background-size: 149px 28px; width: 149px; height: 28px; overflow: hidden; }
#header #sig span { visibility: hidden; }
#header #port {margin-left: 0px; margin-right: 72px; display: block; height: 28px; text-align: center; overflow: hidden; }/*for port*/
nav ul { list-style: none; }
label#grilled-cheese { position: absolute; /*top: 14px;*/ right: 0; width: 48px; height: 48px; top: 6px; }
.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 { background-color: #fff; clear: both; }
#navTop:after { display: table; content: ''; clear: both; }
#nav h3, .navSection { border-top: 1px solid #ccc; }.navSection
#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; }
#nav .search h3 { padding: 0; }
.navSection a { padding: 6px 16px; }
@media screen and (min-width: 800px) { /* based on the length of the top-level navigation items; Subject to Change */
#header { width: auto; /*padding: 30px 0 28px;*/ border: 0; padding: 30px 0 6px; padding: 30px 0 22px; }
#header #sig { margin-left: 20px; display: block; }
#header #sig { background: url('/images/general/sig-med-2x.png') no-repeat; background-size: 181px 34px; width: 181px; height: 34px; }
#nav h3, #nav .search, .navSection { border: 0; }
#nav h3 { padding: 10px 20px 10px 20px; }
.navSection a { padding: 4px 20px; }
.navSection { padding-bottom: 14px; }
#nav { display: block; clear: none; float: right; padding: 26px 0 28px; margin-top: 5px; padding: 26px 0 6px; }
#nav div { float: left; }
#grilled-cheese { display: none; }
#nav .dropdown { position: relative; }
#nav .dropdown:hover .navSection { background-color: #fff; z-index: 999; display: block; position: absolute; /*width: 300px;*/ }
#nav .right .navSection { right: 0; text-align: right; }
#search-icon { display: block; background: url('/images/general/search-2x.png') no-repeat 50% 50%; background-size: 16px 15px; width: 16px; height: 15px; overflow: hidden; }
#search-icon span { visibility: hidden; }
h2#portTitle { display: none; }
}
/*label:hover h3 { text-decoration: underline; }*/
#nav input, #navToggleMain { display: none; } /*toggle nav section*/
@media screen and (max-width: 799px) {
label:hover { cursor: pointer; }
#nav h3 a { display: block; }
.navSectionToggle h3::after { font-size: 17px; content: '+'; float: right; }
#nav h3.open::after { transform: rotate(45deg); } /* "+" on right becomes an "x" */
#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; }
h2#portTitle { display: block; }
#main h2 { margin-bottom: 2px; }
#main.photo { padding-top: 15px; height: 100%;} /*to see top of box-shadow*/
/* #portfolio .thumb p {display: block !important;} /*allows the text to display*/
/*
#portfolio .thumb {
display: inline-block;
vertical-align: top;
max-width: 100%;
}*/
/*#portfolio .thumb {display: block; break-inside: avoid; margin-bottom: 16px !important; width: 100%;} /*increasing margin on bottom did not work next photo is still overwriting the p block */
/*#portfolio .thumb .imgwrap {display: block; break-inside: avoid; width: 100%;} /*adding imgwrap to important items finally */
}
@media only screen and (max-width: 799px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
/*#title, #location,#caption,#back, #footer { display: none; }*/
/*#top {display: none; }*/
/*body { background-color: #000; }*/
/* #header, #main, #footer { background-color: #fff; } */
label#grilled-cheese {top: 0; }
.photograph { box-shadow: none ; } /* line 11 */
body.photographs { max-height: none; }
#header { padding: 0 0 4px}
#main.photo { padding-top: 0px; } /*no box-shadow line line 97 */
/* CSS rules for landscape phones (touch devices)
#title, #location, #caption, #back, #top, #footer all possible to not display
*/
}
#main { padding: 0 16px; clear: both; margin: 0 auto; position: relative; }/* moves Title left only*/
#main.single { padding-top: 12px; }
form { margin-bottom: 24px; }
#hpfp { display: none; }
#portfolio { margin: 0 auto; position: relative; } /* switched auto to 50px no change; no change if remove */
#main .thumb p { color: #444; font-size: 14px; line-height: 16px; text-transform: uppercase; text-align: center; margin: 5px 0 14px; }
#main .thumb a:hover p { color: #999; }
.thumb img { max-height: 394px; } /* removing does not change*/
.empty { height: 0; margin-bottom: 0 !important; }
.home #thumbs { max-width: 394px; margin: 0 auto; }
.home .thumb img { margin: 0 auto; }
.home #main .thumb p { margin: 5px 0 14px; }
@media screen and (min-width: 800px) {
#main { padding: 0 20px; }
#main.single { padding-top: 24px; }
#thumbs, #portfolio {
width: auto;
display: grid;
grid-template-columns: repeat(auto-fit, 220px);
grid-gap: 30px;
justify-content: space-between;
align-content: flex-start;
}
#portfolio .thumb { margin: 0; }
.home #thumbs { max-width: none; }
.thumb .imgwrap { height: 220px; display: flex; justify-content: center; align-items: flex-end; }
.thumb img { max-height: 220px; }
}
/* .photograph { display: block; margin: auto; box-shadow: 0px 0px 15px #333 ;}
moved above to line 11 so that landscape clause will over ride*/
/*#main.photo { padding-top: 12px; }*/
#main.photo h1, #main.photo p { text-align: center; font-family: 'Roboto Slab', serif; }
#main.photo h1 { font-size: 24px; line-height: 36px; margin: 10px 0 0; }
#main.photo p { color: #444; font-size: 18px; line-height: 24px; margin-bottom: 20px; }
#main.photo #caption { font-size: 16px; line-height: 22px; }
/*#main.photo #back { max-width: 960px; margin: 24px auto 0; font-size: 14px; line-height: 18px; text-transform: uppercase; }*/
#main.photo #back , #main.photo #back_search { max-width: 960px; margin: 24px auto 0; font-size: 14px; line-height: 18px; text-transform: uppercase; }
#main.photo #back a, #main.photo #back_search a { color: #000; background: url('/images/general/arrow-back-2x.png') no-repeat 0 50%; background-size: 6px 10px; padding-left: 12px; margin-left: -12px; }
#main.photo #back a:hover, #main.photo #back_search a:hover { color: #777; background-image: url('/images/general/arrow-back-hover-2x.png'); }
.sizing { position: relative; }
.sizing a { position: absolute; top: 0; width: 40%; height: 100%; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);} /* leave 20% center open */
.sizing a span { display: none; }
.sizing .prev { left: 0; }
.sizing .next { right: 0; }
@media screen and (min-width: 1024px) {
.sizing .prev { background: url('/images/general/arrow-prev-2x.png') no-repeat 0 50%; background-size: 44px 44px; }
.sizing .next { background: url('/images/general/arrow-next-2x.png') no-repeat 100% 50%; background-size: 44px 44px; }
.sizing .prev:hover { background-image: url('/images/general/arrow-hover-prev-2x.png'); }
.sizing .next:hover { background-image: url('/images/general/arrow-hover-next-2x.png'); }
}
#main .content { max-width: 620px; }
figure { margin-bottom: 36px; }
figure img, figure .fluid-vids { margin-bottom: 8px; }
figure.left { float: left; margin: 0 24px 24px 0; }
figure.right { float: right; margin: 0 0 24px 24px; }
#carousel { margin-bottom: 24px; position: relative; }
#carousel-items { position: relative; }
#carousel-items div { position: absolute; top: 0; left: 0; }
#carousel-items img { display: block; }
#carousel-controls { display: none; }
#footer { color: #777; margin: 56px auto 18px; padding: 0 16px; }
#footer nav { margin-bottom: 8px; }
#footer li { display: inline-block; }
#footer li a { margin-right: 20px; padding: 5px 0; display: block; }
#footer small { display: block; font-size: 12px; line-height: 18px; }
@media screen and (min-width: 768px) {
#carousel { margin-bottom: 48px; }
#footer { padding: 10px 15px; text-align: center; }
#footer nav { margin-bottom: 14px; }
#footer li a { margin-left: 15px; margin-right: 15px; padding: 0; }
#footer small { font-size: 14px; line-height: 18px; }
}
@media screen and (min-width: 800px) {
#footer { padding-left: 20px; padding-right: 20px; }
}
@media screen and (min-width: 1000px) {
#footer { max-width: 960px; padding-left: 0; padding-right: 0; }
}
/*--- typography ---*/
html { -webkit-text-size-adjust: none; }
body { font-family: 'Roboto Slab', serif; }
h1,h2,h3,h4,h5,h6,p,li { font-weight: normal; }
#main p, #main li { font-family: 'Roboto', sans-serif; }/* category names*/
#main .content p, #main .content li, #main #back { font-family: 'Roboto Slab', serif; }
#nav h3, .navSection li a, #nav .search a, #footer a { display: block; color: #777; font-size: 14px; line-height: 18px; text-transform: uppercase; }
#nav .navSection li a { white-space: nowrap; }
#nav .navSection li a #coll { display: block; color: #000; } /* make collections darker */
#footer a { text-transform: capitalize; }
#nav h3::first-letter, #nav .navSection li::first-letter, #main #back::first-letter { font-size: 17px; }
#main #back_search {font-size: 17px;}
#nav h3:hover, .navSection li a:hover, #nav .search a:hover, #footer a:hover { color: #000; }
#main .content a:hover { text-decoration: underline; }
/*#main h1 { font-size: 28px; line-height: 32px; margin-bottom: 20px; }*/
#main h1 { font-size: 26px; line-height: 32px; margin-bottom: 16px; }
#main h2 { font-size: 22px; line-height: 32px; margin-bottom: 12px; }
/*#main h2 #shorter { margin-bottom: 2px; } does not work, don't know why*/
#main h3 { font-size: 18px; line-height: 32px; margin-bottom: 8px; }
#main h4 { font-size: 17px; line-height: 24px; margin-bottom: 8px; }
#main h5 { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
#main h6 { font-size: 15px; line-height: 24px; margin-bottom: 8px; }
#main small { font-size: 14px; line-height: 16px; margin-bottom: 2px; display: block; }
#main figcaption, #main p.caption { font-size: 16px; line-height: 24px; margin: 0; }
#main p,
#main ul,
#main ol { font-size: 17px; line-height: 24px; margin-bottom: 18px; }
#main ul,
#main ol { margin-left: 1.3em; }
@media screen and (min-width: 768px) {
/*#main h1 { font-size: 36px; line-height: 48px; margin-bottom: 32px; }*/
#main h1 { font-size: 32px; line-height: 40px; margin-bottom: 18px; }
#main h2 { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
#main h3 { font-size: 20px; line-height: 32px; margin-bottom: 8px; }
#main h4 { font-size: 17px; line-height: 24px; margin-bottom: 8px; }
#main h5 { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
#main h6 { font-size: 15px; line-height: 24px; margin-bottom: 8px; }
#main p,
#main ul,
#main ol { font-size: 20px; line-height: 32px; margin-bottom: 24px; }
}
@media screen and (min-width: 800px) {
#nav .dropdown:hover h3 { color: #000; }
}
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; }
}