@charset "utf-8";
/* CSS Document */
html 

body {
    font-family: "Source Sans Pro", sans-serif;
    background-color: #f0f0f0; 
    color: #111111;
    font-weight: 300;
    padding-top: 10px;
    
}

.main  {
    background-color: #fff;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
}

img  {
    width: 8em;
    height: auto;
    border: 2px solid white;
    object-fit: cover;
    margin-bottom: 0px;
}

.img-plus a:hover {
    border: #FF28C2;
}

.gallery-img {
    width: 9em;
    height: auto;
    object-fit: cover;    
}

.imglink:hover {
    border: 2px solid #555;
}

.series {
    font-size: 1.5em;
    color: #4f6689;
    background-color: transparent;
    font-weight: 900;   
}

.alternate-series {
    font-size: 2em;
    font-weight: 100;
    color: #222;
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 3px;      
}

.bigimg {
    width: 25em;
    height: auto;
    border: 2em solid white;
    margin-left: auto;
    margin-right: auto;
}

.heroimg-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 2em 5em;
}

.heroimage {
    width: 30em;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.caption  {
    color: #111111;
    width: 28em;
    text-align: center;
    margin-top: 10px;
}

.pics  {
    padding-top: 2.5em;
    background-color: #fff;
    width: 100%; 
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.picpage  {
    width: 30em;
    height: auto;
    border: 0.75em solid white;
    padding-top: 1.25em;
    padding-left: 1.25em;
}

.flex-container > div {
    background-color: #514849;
    color: #4f6689;
    text-decoration: none;
    text-align: center;
    width: 6.25em; 
    margin: 1px;
    padding-top: 10px;
    font-size: 1em;     
}

/* Take the padding out of "a" in notes superscript */

.open-container {
    text-align: center;
    margin-top: 1em;
    width: auto;
    background-color:#ffc3aa;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left:auto;
    margin-right: auto;
    
}
.open >a {
    font-size: 0.8em;
    color: #222;
}

.open >a:hover {
    color: #514849;   
} 

.open-h1 {
    font-size: 3em;
    font-weight: 100;
    color: white;
    margin: 0px;
    
}

.open-h2 {
    font-size: 1.1em;
    color: black;
    font-weight: 500;
}

.open-btn {
    display: block;
    width: 10em;
    background-color: #000;
    color: #ffddcf;
    align-items: center;
    text-align: center;
    padding: 10px 15px;
    border: 2px solid white;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    
}


.open-btn:hover {
    background-color: #f7f7f7;
    border: 2px solid #111;
    color: #111;
}
     
       


.note {
    font-size: smaller;
    padding: 0;
    color: #99a4b6;
    margin: 0;
    text-decoration: underline;
}

.nopadding {
    padding: 0;
}

.notes-text {
    font-size: 1em;
    font-weight: 300;
    color: #000000;
}

.notes {
    font-size: 1em;
    color: #000000;
    padding-bottom: 2em;
}

.grid-container {
    display: grid;
    grid-template-columns: 11em 11em 11em 11em;
    background-color: white;
      
}

.grid-item {
    padding: 2em;
    
}


.bigimg-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 2em 5em;
}

.prenex {   
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.previous {
    background-color: white;
    color: #111111;
    font-size: 1.5em;
    margin-right: .5em;
}

.next  {
    background-color: white;
    color: #111111;
    font-size: 1.5em;
    margin-left: .5em;
}

.round {
    border-radius: 50%;
    
}


@media (max-width: 568px) {
    .bigimg {
        max-width: 16em;}
    .caption {
        max-width: 14em;}
    footer {
        max-width: 599px;}
    .heroimage {
        max-width: 20em;}
    .caption {max-width: 15em;}
    } 

.header-basic {    
    color: #4f6689;
}

.header-top {
    background-color: #4f6689;
    font-weight: 200;
    font-size: 1.25em;
    color: white;
    letter-spacing: 0.2em;
    padding: 0 1em 1em 1em;
    margin: 0 auto;
    text-align: center;       
}

.header-picpage {
    background-color: #fff;
    font-weight: 400;
    font-size: 1.25em;
    color: #111;
    padding-bottom: 0.25em;
    letter-spacing: 0.25em;
    padding-top: 0.35em; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;       
}

h1 {  
    background-color: #ffddcf;
    font-size: 24px;
    font-weight: 300;
    color: #111;
    text-align: center;
    padding: 1em;
    margin: 0;
}

.coming {
    
    font-size: 1em;
    font-weight:400;
    color: #111;
    text-align: center; 
    
    
}

.h1-picpage {
    width: 75%;
    background-color: #fff;
    color: #4f6689;   
}

.year {
    background-color: #4f6689;
    color: white;    
}



.bio-h1 {  
    background-color: #ffddcf;
    font-size: 1.25em;
    font-weight: 700;
    color: #111;
    text-align: center;
    padding: 0.75em 1em 0.75em 1em;  
}
 
a {
    display: inline-flex;
    justify-content: space-around;
    padding: 16px 16px;
    color: #ffddcf;
    text-decoration: none;
    font-weight: 600;    
}


h2 >a {
    color: #ffddcf;    
}

.gallery-img >a {
    border: 2px solid #000;
    margin: 0px;   
}

a:hover {
    background-color: white;
    color: #514849;
}

/* 
.previous {
    background-color: #4f6689;
    color: white;
    text-align: left;
}
.next {
    background-color: #4f6689;
    color: white; 
    text-align: right;
} */


.p-picpage  {
    text-align: center;
    font-size: .8em;
    width: 100%;    
}

.pic a:hover {  
    border: 1px solid red;
}

.narrow {
    width: 100%;
}


p {
    color: black;
    padding: 0px 30px 0px 30px;
}

h2  {
    background-color: #4f6689;
    color: white;
    font-size: 0.8em;
    font-weight: lighter;    
}
    
.bio-h2  {
    background-color: #ffddcf;
    color: #111111;
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    padding: 10px;
       
}
  
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #111;
    font-size: 0.7em;
    display: flex;
    justify-content: space-around;
}

.alternate-ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    font-size: 0.7em;
    display: flex;
    justify-content: space-around; 
}

.alternate2-ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffddcf;
    font-size: 0.7em;
    display: flex;
    justify-content: space-around; 
}

/*

li {
   float: left;    
} */

li a {
    display: block;
    background-color: #111111;
    color: #ffddcf;
    text-align: center;
    padding: 8px;
    overflow: hidden;
    font-weight: 800;
    text-decoration: none;      
}

.alternate-li  {
    display: block;    
    background-color: #ffddcf;
    color: #111111;
    margin: none;
}

.alternate-li2  {
    display: block;    
    background-color: #111111;
    color: #ffddcf;
    margin: none;
}

.a-alternate  {
    background-color: #ffffff;
    color: #111111;
    font-weight: 600;
    margin: none;
}

.a-alternate:hover {
    background-color: #fff;
    color: #111111;
}
.a-alternate2  {
    background-color: #ffddcf;
    color: #111111;
    font-weight: 800;
    margin: none;
}

.a-alternate2:hover {
    background-color: #111;
    color: #ffddcf;
}


.alternate-series2 {
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: left;
    padding: 20px;
    margin-top: 10px;        
}

li a:hover {
    background-color: #ffddcf;
    color: #111111;    
}
.works-container {
    padding-top: 10px;
    background-color: #fff;
    width: 100%; 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap; 
}

.about {
    background-color: white;
    max-width: 800px;
    padding: 20px 20px 20px 20px;
    baseline-shift: 0; 
    margin-left: auto;
    margin-right: auto;
}

.about-2 {
    background-color: salmon;
    max-width: 800px;
    padding: 20px 20px 20px 20px;
    baseline-shift: 0; 
    margin-left: auto;
    margin-right: auto;
    
}

h4  {
    color: #000;
    text-align: center;
    font-size: 0.8em;
    padding-left: 10px;
    font-weight: 500;
    margin: 0px;
    
}

.contact {
    text-align: left;
    font-size: 1em;
    color: #111111;
    padding-left: 20px;
    font-weight: 300;
    margin: 0px;
}
.contact-empty {
    background-color: white;
    color: #111111;
    font-size: 1.5em;
    padding-top: 1em;
    text-align: center;   
}

.contact p {
    padding: none;
    
}


h4-b {
    
    width: 20em;
    font-size: 0.9em;
    padding-left: 0px;
    color: #000;
    font-weight: 500;
}

h5  {
    color: #ffddcf;
    line-height: 1.8;
    text-align: center;
    padding-left: 0.6em;
    margin: 0px auto;
    font-size: 0.8em;
    font-weight: 300;    
}

h5-b  {
    color: #000;
    padding-left: 0px;
    font-size: 0.8em;
    font-weight: 400;
    
}

.sold {
    color: #F7373A;
    text-transform: uppercase;
    
}

.red-dot {
    
    font-size: 2em;
    font-weight: 900;
    color: #F51619;
    text-align: right;
}

.empty  {
    background-color: #fff;
    color: #111;
    font-size: 1.5em;
    font-weight: 200;
    text-align: center;
    padding: 2em 4em 2em 4em;  
}

/* Commenting out the Gallery code

div.gallery {
  border: 1px solid white;     
}

div.gallery:hover {
    border: 1px solid #777;   
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;   
}

* {
   box-sizing: border-box; 
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;   
}    

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;   
    }
}
@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}   
 
.clearfix:after {rcontent: "";
    display: table;
    clear: both;    
}

*/

.back  {
    color: salmon;
    font-size: smaller;
    text-align: center;   
}

.footer-container {
    background-color: #111;
    max-width: 800px;
}


footer  {
    font-size: 0.75em;
    font-weight: 200;
    color: #ffddcf;
    padding-top: 1.5em;
    padding-right: 0.6em;
    padding-bottom: 2em;
    padding-left: 0.6em;
    text-align: center;
    margin-top: 2.5em;
    margin-left: auto;
    margin-right: auto;
    
}

.cook {
    font-size: 1em;
    font-weight: bolder;
    
}

h3 {
    font-size: 1.2em;
    color: #4f6689;
    background-color: white;
    font-weight: 700;
    padding: 0.3em 0;
    text-align: left;
    margin: 0.6em;    
}

/* CSS from W3 for Grid layout */
/* Style the header */
.header {
  grid-area: header;
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
  font-size: 35px;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'footer footer footer footer footer footer';
  max-width: 800px;
  grid-gap: 20px;
} 

.left,
.middle,
.right {
  padding: 10px;
  }

/* Style the left column */
.left {
  grid-area: left;
}

/* Style the middle column */
.middle {
  grid-area: middle;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'footer footer footer footer footer footer';
  }
}