body { display: block; margin: 0; padding: 0; background-color:#000000; color: #ffffff; font-size:20px; font-family: 'Lato', Helvetica, sans-serif; }
p {-webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0;}

#spacer { width: 100%; height: 1em; text-align: center; padding-top: 5em; }

#headlogo { position:absolute; top: 0; left: 0; width: 100%; /* min-height:80px; */ margin: 0px auto; background-color:rgba(0, 0, 0, 0.67); text-align: center;}
#headlogo h1 { font-family: 'Oswald', Arial, sans-serif; font-weight: 700; font-size: 2em; line-height: .5em; color: #ffd40d;}
#headlogo h3 { font-family: 'Oswald', Helvetica, sans-serif; font-weight: 700; font-size: .7em; line-height: .1em; vertical-align: top; letter-spacing:.6em; color:#ffd40d ;}

nav {float: left;text-align: left;position: absolute;top: 5em;left: 5vw;z-index: 100;}
#menu { display: block; height:1.1em; padding-left: 5%; list-style-type: none; overflow:hidden; font-weight:bold; cursor:pointer;}
#menu:hover { height:auto;}
#menu:active { height:auto; cursor:pointer;} 
#menu ul { display: block; height:auto; width:12em; list-style-type: none; overflow:hidden; padding: 0px 0px 5px 5px; background-color:rgba(0, 0, 0, 0.70); } 

#menu ul li a { line-height:40px; text-transform: capitalize; text-decoration:none; color: #ffffff;}
#menu ul li a:hover { margin-left: 1em; color: #ffe617; }
#menu ul li a#selected { margin-left: 1em; color: #ffe617 !important;}

#paintingtext { width:75%; font-size: .8em; line-height: 1.3em; margin:0 auto; }
#paintingtext p { font-style:italic; text-indent: .3em; font-weight: 400; letter-spacing: .02em;word-spacing: .03em;text-align: left;line-height: 1.3em; margin-bottom: 1em;}
#paintingtext p:before { content: "\201C"; }
#paintingtext p:after { content: "\201D"; }

#assignation { font-weight:400; float:right; }
#assignation2 { font-weight:300; font-style:italic; float:right; }
#artwork {width:85%;margin: 1em auto 2em auto; max-width:850px; }
#artwork img {width:100%;}
#caption {font-size: .8em;line-height: 1.2em;font-style:italic;float:right;}
/* 
#caption:before { content: "\201C"; }
#caption:after { content: "\201D"; }
 */
#picindex { display: block; font-size: .7em; width: 70%; max-width: 700px; margin: 2em auto auto auto;}
#picselect { /* max-width:700px; margin:5em auto 50px auto; */ font-size: 0.7em; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;}
#picselect img { padding: 5px 0 0 5px; }
#picselect::-webkit-scrollbar { height: 6px; background-color: #B5B5B5; }
#picselect::-webkit-scrollbar-thumb { background-color: #6D6D6D; }

#footer {font-weight: 700; position: inherit; clear: both; font-size: .8em; line-height:2em; width: 75%; margin: 5em auto 1em auto; }
/* #footer {height:100px; font-weight:700;margin-bottom:1em;} */
#footer span:first-child {float:left}
#footer span:nth-child(3) {float:right;}
#footer a { text-decoration:none; color:#ffd40d; cursor:auto;}
#footer a:hover { text-decoration:none; color:#ffe617; cursor:pointer;}
#footer hr { width:100%; color: #656464; border-color: #656464; background-color: #656464; }
#footer img {width: 40px;display: inline-block;margin-bottom: -14px;}
/* #tb { width:70%; max-width: 800px; } */
/* 
.tbcell { width: 50%; float:right; text-align:left; padding:.2em; font-size:1em; font-weight:400;}
 */
.tbcell { width: 45%; float: left; text-align: left; padding-top: 10px; font-size: 1em; line-height: 1.25em; font-weight: 400; margin-right: 5%; border-bottom: 1px solid #4E4E4E; }
#xhibits {display: block;float: left;font-size: .7em;font-weight: 300;width: 25%;padding: .5em;margin-left: 5%;min-width: 40%;}
#xhibits li { display: block;/*  float: left; */ /* font-size:.8em; */ /* width: 23%; */ padding: .3em; }
/* td { border-bottom: 1px solid #4E4E4E; border-right: 1px solid #4E4E4E;} */

@media screen and (max-width:400px) and (orientation:portrait){
body { /* font-size: 3%; */ }
#headlogo h1 { font-size: 1.2em; }
#headlogo h3 { font-size: .5em; }
#spacer { padding-top:3em }
nav { top: .7em; left: .5em; }
#menu:hover {/*  width:90%; */}
#menu { /* margin-top: 5px; */ font-size: .8em;}
#menu li a { font-size: 1.5em;}
#picindex { width: 80%; margin: 0px auto 10px auto;}

.tbcell { width: 100%; }
#footer {height: 100px; font-weight: 700; font-size: .7em; line-height: 1.8em; text-align: center; float: none;}
}

@media screen and (max-width:767px) and (orientation:landscape){
#spacer { padding-top: 4em; }
#artwork { width: 70%; max-width: 450px; }
body { min-height: -webkit-fill-available; /* font-size: 3.5%; */ }
#headlogo h1 { font-size: 1.5em; }
#headlogo h3 { font-size: .6em; }
nav { top: .7em; left: .5em; }
#menu { font-size: 1em;}
#menu li a { font-size: 1em; line-height: 1.5em; }
#paintingtext { width: 80%; font-size: 1.1em; }
.tbcell { width: 100%; }
#footer {height: 100px; font-weight: 700; /* font-size: 1em; line-height: 1.8em; */ text-align: center; /* float: none; */}
#footer span:nth-child(3) { margin-right:6em; }
}