@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nunito+Sans:wght@800&family=Nunito:wght@800&family=Oswald:wght@600&display=swap');  	

body { display: block; margin: 0px; padding: 0px; background-color: #f4f5f8;; color: #47484f; font-size:16px; letter-spacing: 0.03rem; font-family: 'Lato', sans-serif; }

a { color:#899098; cursor:auto;}
a:hover { color:#a62222; cursor:pointer;}

#headlogo { position:relative; top: 0; left: 0; width: 100%; letter-spacing: 2rem; min-height: 92px; max-height: 140px; margin: 0px auto; text-align: center; z-index: 1000;}
#headlogo h1 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 3rem; line-height: .5em; color: #b1b1b1;}
#headlogo img { position: relative; /* max-width: 955px; */ max-width: 800px; width: 95vw; max-height: 80px;opacity: 85%; display: inline-block; top: .5rem;}

#headlogo h3 { 
background-color: #3d3e42;
  padding-left: 0px;
  margin-top: 14px;
  margin-bottom: 0px;
  font-family: 'Lato', sans-serif;
  font-variant: petite-caps;
  font-weight: 300;
  font-size: 2rem;
  letter-spacing:.2rem;
  color:#b1b1b1;
}
 
#SubHead {
margin-bottom: -15px;
margin-top: 15px;
font-family: 'Lato', sans-serif;
font-variant: petite-caps;
font-weight: 400;
font-size: 1.25rem;
letter-spacing: .2rem;
color: #d01e1e;
}

#MenuBar {
padding-left: 0px;
margin: 1rem auto;
}

/* 
#headlogo h3 a { color: #b1b1b1; white-space:pre; text-decoration: none;}
#headlogo h3 a:active { color: #d21616;}
#headlogo h3 a:hover { background-color:#a62222;}
 */

.menu
{
 background-color: #3d3e42;
  padding-left: 0px;
  margin-bottom: 0px;
  font-family: 'Lato', sans-serif;
  font-variant: petite-caps;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing:.2rem;
  color:#b1b1b1;
  width: 100%;
  list-style-type: none;
}

.menu ul
{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.menu ul li
{
  list-style: none;
  padding: 4px;
  position: relative;
  display: block;
}

.menu ul li a
{
  color: #b1b1b1;
  text-decoration: none;
}

.menu ul li:hover
{
  background: #a62222;
}

.menu ul li ul
{
  display: none;
}

.menu ul li:hover ul
{
  display: block;
  position: absolute;
  background: #3d3e42;
  padding: 10px 2px;
 
}

#DropMenu {
  z-index: 2000;
  left: -5px;
}

ul#DropMenu > li{
 border-bottom: 1px solid #d41c1c;
}

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

#spacer {
 display: block;
 position: relative;
  /* top: -1rem; */
 text-align: center;
 font-variant: petite-caps;
 font-size: 1.5rem;
 font-weight: 700;
 z-index: 1000;
}
        
#spacer a { text-decoration: none; float: unset;}

#openingbox {
display: table;
position: absolute;
top: 125px;
height: auto;
left: 4vw;
z-index: 1000;
white-space: nowrap;
border-radius: 15px;
box-shadow: 3px 3px 3px 5px #05050561;
background-color: white;
text-align: center;
padding: 0px;
margin: auto;
transform: rotate(355deg) scale(.95);
overflow: clip;
font-size: 1.5em;
line-height: 1.2em;
width: 150px;
font-weight: bold;
font-family: serif;
font-style: italic;
text-decoration: none;
}

#openingbox a { text-decoration: none; }

#openingbox p { margin: 12px; }

#openingbox > span:nth-child(1) > a:nth-child(1) > img:nth-child(1) {
scale: 1.3;
padding-top: 10px;
}

/* #headshot { float:center; ! width:35vw; margin: 0 1em 1em 1em; border: 2px solid #4E4E4E; max-width: 500px; } */

#bio { display: block; position: relative; width: 80vw; font-size: 1.2rem; margin: 10rem auto 1rem auto; font-weight: 400; }
#bio p { letter-spacing: .02em; word-spacing: .02em; line-height: 1.5rem; margin-bottom: 1rem; margin-top: .2rem; }

#bio2 #headshot {
 margin-left: auto;
 margin-right: auto;
 /* margin-top: -2rem; */
/*  margin-bottom: 1rem; */
/*  width: 100%;  */
 max-width: 800px;
 position: relative;
 }

#bio2 {
 display: block;
 position: relative;
 width: 90vw;
 font-size: 1.2rem;
 margin: 1rem auto;
/*  margin: 3rem auto 2rem auto; */
 font-weight: 300;
 max-width: 1200px !important;
 text-align: center;
 }
 
#bio2 h2 { font-variant: small-caps; font-size: 1.5rem; font-family: 'Nunito'; margin: 0 auto;}
#bio2 p { margin-top: 0; text-align: left;}
#bio2 figcaption { font-size: 1rem;; }
#bio2 > ul {text-align: left}

#artwork { width: 85vw; margin: 10rem auto 5rem auto; max-width: 1200px;}
#artwork img { width:100%;  box-shadow: 5px 6px 20px 4px rgba(36, 36, 46, 0.55);}
#caption { font-size: 1.3rem; line-height: 1.5rem; font-style:italic; }

#picselect { width:75vw; margin:5em auto 50px auto; font-size: 0.7em; }

#footer {display: block; position: relative; width: 80%; font-weight: 700; clear: both; font-size: 1rem; padding-bottom: 2rem; margin:auto; }
#footer > img:nth-child(1) { max-width: 200px; margin: 5px auto; display: block;}
#footer span:nth-child(2) { float: left; }
#footer span:nth-child(3) {float:right;}
#footer a { text-decoration:none; color:#888; cursor:auto;}
#footer a:hover { text-decoration:none; color:#222; cursor:pointer;}
#footer hr { color: #656464; border-color: #656464; background-color: #656464; }

@media screen and (max-width:1800px) and (orientation:landscape){

#menu { font-size: 1.5em; margin-top: 8px;}
#menu li a { font-size: 1.5em;}
#paintingtext { width: 80vw; font-size: 1.1em; }
.tbcell { width: 100%; }
}

@media screen and (max-width:1200px) and (orientation:landscape){
#openingbox { transform: rotate(355deg)scale(1); }
}

@media screen and (max-width:768px) and (orientation:landscape){
#artwork { width: 75vw; margin: 26vh auto 5vh auto; max-width: 450px; }

#headlogo img { width: 45vw; }
#headlogo h1 { font-size: 2.7rem; letter-spacing: 1.5rem;}

#menu { font-size: 1.5em; margin-top: 8px;}
#menu li a { font-size: 1.5em;}

#paintingtext { width: 80vw; font-size: 1.1em; }
.tbcell { width: 100%; }
}

@media screen and (max-width:500px) and (orientation:portrait){
#headlogo h1 { font-size: 2.4rem; letter-spacing: .1rem;}
#headlogo h3 { font-size: 1.2rem; letter-spacing: .1rem; line-height: 1.7rem; }
#MenuBar { margin-top: 20px; font-size: 1.7rem; letter-spacing: .1rem; line-height: 1.9rem; padding-left: 0px;}
#DropMenu {left: -16vw;}

#SubHead {margin-top: 13px; }
/* .menu {margin-top: -1.5rem} */

#menu:hover { width:35vw;}
#menu { margin-top: 5px;}
#menu li a { font-size: 1em;}

#bio { margin: 7rem auto 1rem auto; }
#headshot { float:none; /*! width: 80vw; */ /*! margin: 0 auto 0 auto !important; */ }

#bio2 #headshot { width: 95%; }
#bio2 { margin: 1rem auto .5rem auto; /*! top: 0rem; */}

#artwork { width:90vw; margin: 7rem auto auto auto; }
#caption { font-size: .9rem; line-height: 1rem; margin-bottom: 1vh; }

#walkthrulink p {margin-top: 15px;}
.tbcell { width: 100%; }

#footer { font-weight: 700; font-size: 1.1rem; line-height: 1.5rem; text-align: center; float: none;}
#footer span:nth-child(3) { display:inline; float:none;}
#footer span:nth-child(4) { display:inline; float:none;}
#footer span:nth-child(4)::before { content:"\a"; white-space: pre;}
#footer hr {width: unset; }

#openingbox { display: table; position: relative; margin-block-start: .5rem; margin-block-end: .5rem; top: 30px; height: auto; z-index: 1000; white-space: nowrap; border-radius: 15px; box-shadow: 3px 3px 3px 5px #05050561; background-color: white; text-align: center; padding: 5px; transform: rotate(0deg) scale(.66) !important; left: 75px; overflow: visible;}
#openingbox > span:nth-child(1) > a:nth-child(1) > img:nth-child(1) { scale: 1.6; }
}