/*	----------------------------------------	
	Brian Gross Fine Art
	briangrossfineart.com
	
	new css file

	designed and built by Richard Winchell: www.richardwinchell.com


	Contents:

	!RESET
	!TYPOGRAPHY
	!STRUCTURE & LAYOUT
	!GLOBAL NAV & LOGO
	!FOOTER

	!HOMEPAGE

	---------------------------------------- */



/*	----------------------------------------	
	!RESET 
	based on http://meyerweb.com/eric/tools/css/reset/ v2.0 
	and https://zellwk.com/blog/css-reset/
	---------------------------------------- */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,em,img,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{border:0;border-style:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline;text-rendering:optimizeLegibility;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
img,video{max-width:100%;}
b,strong{font-weight:bold;}
i,em{font-style:italic;}
a{text-decoration:none;}
a img{border:0;}

*, *::before, *::after {box-sizing:inherit;}
[hidden] {display:none !important;}




/*	----------------------------------------	
	!TYPOGRAPHY
	
	font-family:TradeGothicLTPro;
	font-family:TradeGothicLTPro-Bd2;
	font-family:TradeGothicLTPro-BdCn20Obl;
	---------------------------------------- */
body { font-family:TradeGothicLTPro,Arial,'Helvetica Neue',Helvetica,sans-serif; }


h1 { font-size:1.5em; margin:1.0em 0 0.25em; }
h2 { font-family:TradeGothicLTPro-Bd2; font-size:1.35em; margin-bottom:1.0em; }
h3 { font-family:TradeGothicLTPro-Bd2; font-size:1.35em; line-height:1.5em; white-space:nowrap; }
h4 { font-size:1.35em; line-height:1.5em; }
h4.group { font-size:1.0em; line-height:1.35em; }
h5 { font-family:TradeGothicLTPro-BdCn20Obl; font-size:1.2em; line-height:1.5em; margin:0 0 5px; text-transform:uppercase; color:#999; }
h6 { font-size:1.0em; line-height:1.35em; }
p { line-height:1.2em; }
p+p { margin-top:1.2em; }
p+h5, .artist-grid+h5 { margin-top:3.0em; }
.grid-item p { line-height:1.5em; }
.nobr { white-space:nowrap; }
.grey { color:#999; }

.ArtistDetail .Name { width:98%; margin-bottom:1.0em; }


.Exhibitions h3 { font-size:1.0em; line-height:1.4em; white-space:normal; }
.current-grid h3 { margin-top:1.2em; }
.Exhibitions h4 { font-size:1.0em; font-weight:normal; letter-spacing:normal; line-height:1.4em; }
.Artists h5, .Exhibitions h5 { margin-bottom:1.0em; }
.Exhibitions .date { font-size:85%; }
.Exhibitions .offsite { color:#999; font-size:85%; margin-top:0; }

.grid-item .title { color:#999; font-size:75%; }
.price { color:#999; font-size:75%; margin-top:0; }

.showdate { color:#000; white-space:nowrap; }
.opening { color:#999; font-size:85%; }
.opening+.opening { margin:0.25em 0 2.0em; }
.catalog { font-size:85%; margin:1.0em 0 2.0em; }
.opening+.opening+.catalog { margin:-0.75em 0 2.0em; }


footer { font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; line-height:1.25em; }


a, a:visited { color:#900; }
.grid-item a { color:#333; }
.past-grid, .past-grid a { color:#666; }
a:hover, a:active { color:#600 !important; }


@media screen and (min-width:40em) {
h1 { font-size:2.5em; }
h2 { font-size:1.5em; }
footer { font-size:75%; }
}


/*	----------------------------------------	
	!STRUCTURE & LAYOUT
	---------------------------------------- */
html { min-height:100% !important; height:100%; }
body { min-height:100% !important; min-height:100vh; max-width:1220px !important; margin:0 auto; padding:15px; position:relative; }
main { position:relative; width:100%; min-height:100%; margin:5.0em 0 3.0em; padding-top:20px; padding-bottom:10.0em; grid-area:initial; display:block; }
body:after, main:after { content:""; display:block; clear:both; }

.sidebar { margin-top:3.0em; }
.hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; }

.hr { border-top:1px solid #ccc; padding-top:10px;  }

img.hero { margin:80px 0 30px;}

.artist-grid { column-count:1; display:block; font-size:125%; }
.current-grid { column-count:1; display:block; margin-bottom:3.0em; }
.upcoming-grid { column-count:1; display:block; margin-bottom:3.0em; }
.past-grid { column-count:1; display:block; margin-bottom:2.0em; }
.pubs-grid { column-count:1; display:block; margin-bottom:2.0em; }
.show-grid { column-count:1; display:block; margin-bottom:2.0em; }
.works-grid { column-count:1; display:block; margin-bottom:2.0em; }

.grid-item { break-inside:avoid; column-break-inside:avoid; display:block; margin:0 1.5em 1.5em 0; width:100%; vertical-align:top; }
.artist-grid .grid-item { margin-bottom:0.4em; }
.past-grid .grid-item { display:inline-block; max-width:100%; }
.pubs-grid .grid-item { display:inline-block; max-width:100%; }
.show-grid .grid-item { display:inline-block; max-width:100%; }
.works-grid .grid-item { display:inline-block; max-width:42%; }

.grid-item.center { text-align:center; }
.grid-item.center .title { text-align:left; }
.works-grid img { max-height:600px; }

.middle { vertical-align:middle !important; }

.current-grid img { width:100%; height:200px; object-fit:contain; object-position:left center; }
.grid-item img+a { white-space:nowrap; }
.show-grid .grid-item img { margin-bottom:0.5em; }

.ShowInfo { padding:1.5em 0; display:block; margin-bottom:1.5em; }
.text, .pressRelease { max-width:95%; }

.Name { position:relative; }
.Name li { display:inline-block; }
.Name li+li { margin-left:2.0em; }


.Gallery main { margin-top:0; }

.Thumbnail { display:none; }

@media screen and (min-width:30em) {
.past-grid .grid-item { display:inline-block; max-width:42%;}
.pubs-grid .grid-item { display:inline-block; max-width:42%;}
.show-grid .grid-item { display:inline-block; max-width:42%;}
.works-grid .grid-item { display:inline-block; max-width:42%;}
.grid-item.double { max-width:100%; }
.grid-item.aaw { max-width:100%; }
.upcoming-grid .grid-item.xl { width:100% !important; }
}

@media screen and (min-width:40em) {
main { padding-bottom:5.0em; padding-top:0; }
img.hero { margin:60px 0 30px;}
.artist-grid { column-count:2; column-gap:1.0em; font-size:110%; vertical-align:text-top; }
.artist-grid .grid-item { margin-bottom:0.75em;  }
.current-grid { column-count:2; max-height:600px; }
.current-grid.xl { column-count:1; max-height:600px; }
.upcoming-grid { column-count:2; }
.past-grid .grid-item { display:inline-block; max-width:29%;}
.pubs-grid .grid-item { display:inline-block; max-width:29%;}
.show-grid .grid-item { display:inline-block; max-width:29%;}
.works-grid .grid-item { display:inline-block; max-width:29%;}
.grid-item.double { max-width:60%; }
.grid-item.aaw { max-width:60%; }
.upcoming-grid .grid-item.xl { width:60% !important; }
.current-grid .grid-item img { height:300px; }
.text, .pressRelease { max-width:35em; }
.ShowInfo { padding:0 0 1.0em; }

.artist-grid+h5 { margin-top:1.5em; }
}

@media screen and (min-width:60em) {
.sidebar { margin-top:0; }
//.artist-grid { column-count:4; }
//.artist-grid .grid-item { margin-bottom:0.9em; }
.artist-grid { column-count:2; column-gap:1.0em; font-size:110%; width:50%; }
.artist-grid .grid-item { margin-bottom:0.5em;  }
.current-grid { column-count:2; max-height:550px; }
.current-grid.xl { column-count:1; max-height:550px; }
.upcoming-grid { column-count:3; }
.past-grid .grid-item { display:inline-block; max-width:22%;}
.pubs-grid .grid-item { display:inline-block; max-width:22%;}
.show-grid .grid-item { display:inline-block; max-width:22%;}
.show-grid.three .grid-item { display:inline-block; max-width:29%;}
.works-grid .grid-item { display:inline-block; max-width:17%;}
.grid-item.double { max-width:45.5%; }
.grid-item.aaw { max-width:60%; }
.upcoming-grid .grid-item.xl { width:45.5% !important; }
.text, .pressRelease { max-width:50%; }
.Gallery .text { width:50%; position:relative; top:0; left:0; }
.Gallery .sidebar { width:25%; position:absolute; top:0; right:0; }
.current-grid .grid-item img { height:400px; }
.Name h1 { width:50%; }
.Name ul { position:absolute; top:0.75em; left:50%; }
.Thumbnail { display:block; position:absolute; top:0; left:50%; width:49%; height:400px; display:inline-block; }
.Thumbnail img { max-height:500px; }
}



/*	----------------------------------------	
	!GLOBAL NAV & LOGO
	---------------------------------------- */
#GlobalNav { color:#000; margin:10px 0 40px; overflow:hidden; position:absolute; top:15px; left:15px; width:95%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
#GlobalNav a, .logo a { color:#000; }

#GlobalNav li { display:inline-block; margin:10px 0; }
#GlobalNav li+li { margin-left:0.75em; }


@media screen and (min-width:40em) {
#GlobalNav { font-size:85%; }
#GlobalNav ul { position:relative; top:-40px; left:50%; }
// #GlobalNav ul { position:relative; top:-40px; left:50%; }
.Homepage #GlobalNav ul { position:relative; top:-45px; left:50%; }
#GlobalNav li+li { margin-left:2.0em; }
}



/*	----------------------------------------	
	!FOOTER
	---------------------------------------- */
footer { margin-top:2.0em; overflow:auto; position:absolute; bottom:1.5em; width:98%; }

footer p { color:#333; margin-top:1.2em; }
footer a { color:#333; }
footer #Address { }
footer #Contact { }
footer #Hours { }

//.Gallery footer { display:none; }

@media screen and (min-width:40em) {
footer p { display:inline-block; margin-right:1.5em; width:30%; }
}

@media screen and (min-height:800px) {
footer { overflow:auto; position:absolute; bottom:1.5em; width:98%; clear:both; }
}



/*	----------------------------------------	
	!HOMEPAGE
	---------------------------------------- */
body.Homepage { background:#999; background-image:url(../img/Install1.jpg); background-attachment:fixed; background-position:center top; background-repeat:no-repeat; background-size:cover; display:flex; flex-direction:column; min-height:100% !important; }

.Homepage h3, .Homepage h4 { line-height:1.2em; }
.Homepage h5 { color:#ccc; }
.Homepage .showdate { color:#ccc; margin-top:0.75em; }
.Homepage footer { display:inline-block; margin-top:2.0em; position:absolute; flex: 1 1 auto; }

.homepage-grid { -webkit-column-count:1; column-count:1; column-fill:auto; display:block; margin:120px 0 12.0em; }
.homepage-grid .grid-item { background:rgba(0,0,0,0.5); color:#fff; margin:0 1.5em 1.5em 0 !important; padding:5px 5px 0.75em 5px; }
.homepage-grid a { color:#fff !important; }
.homepage-grid .grid-item img { max-height:300px; }

#Current { background:rgba(0,0,0,0.5); color:#fff; left:10px; width:90%; padding:5px 2em 1em 5px; position:relative; top:0; flex:1 1 auto; }
#Current a { color:#fff !important; }
#Current a:hover, #Current a:active { color:#eee !important; }
.link+.link, .showdate+.link { margin-top:1.5em !important; display:block; }


#Alert { background:rgba(255,255,255,0.9); color:#000; left:10px; max-width:90%; padding:5px 1em 0.75em 5px; position:absolute; top:275px; flex:1 1 auto; }
#Alert a { color:#900; }
#Alert h5 { color:#999; }

@media screen and (min-width:40em) {
body.Homepage { min-height:100% !important; min-height:100vh; }
.homepage-grid { -webkit-column-count:2; column-count:2; column-gap:1.0em; margin:120px 0 4.0em; vertical-align:text-top; }
#Current { width:48.5%; min-width:25%; }
#hpBox3 { width:48.5%; min-width:25%; position:absolute; left:51.5%; top:-48px; }
#Alert { left:48.5%; top:120px; max-width:25em; min-width:25%; }
}

@media screen and (min-width:60em) {
.homepage-grid { -webkit-column-count:3; column-count:3; column-gap:1.0em; vertical-align:text-top; }
#Current { width:30%; min-width:22.5%; }
#Alert { min-width:22.5%; }
}

.Homepage footer p, .Homepage footer a { color:#fff; }



/*	----------------------------------------	
	!ARTWORK DETAIL PAGES
	---------------------------------------- */
.Artwork { width:100%; height:100%; text-align:center; font-size:85%; }
.Artwork main { vertical-align:middle; }
.Artwork img { margin:1.0em auto 1.0em; max-width:100% !important; }
.Artwork p { margin:0 auto 1.0em; max-width:90%; }



/*	----------------------------------------	
	!COVID-19 PAGE
	---------------------------------------- */
.covid19 .text { font-size:120%; line-height:150%; }
.covid19 .text h5 { margin-top:1.5em; }
.covid19 .text p+h5 { margin-top:1.5em; }
ul.bullets { list-style:disc; list-style-position:inside; margin-left:1.75em; text-indent:-1.375em;  margin-bottom:1.5em;}