body html {
background-color: #ffffff;
margin: 0px;
height: 100%;
}

* {
    box-sizing: border-box;
}

img
{
display: block;
margin: auto;
max-width: 100%;
height: auto;
padding-top: 3em;
object-fit: contain;
}


img.index
{
max-width: 100%;
}

img.bio
{
float: right;
margin-left: .5em;
margin-right: 3em;
}

img.contact
{
width: 55%;
height: auto;
float: right;
margin-left: .5em;
margin-right: 3em;
}


h1
{
font-family: "hiragino sans", myriad pro, sans-serif;
font-size: 2.3em;
font-weight: 100;
margin-left: 2rem;
text-align: left;
}

h2
{
font-family: "hiragino sans", myriad pro, sans-serif;
font-size: 1.2em;
font-weight: 300;
text-align: left;
}

h2.clear
{
font-family: "hiragino sans", myriad pro, sans-serif;
font-size: 1.2em;
font-weight: 300;
text-align: left;
clear: both;
margin-top: 9rem;
}

h4
{
font-family: "hiragino sans", myriad pro, sans-serif;
font-size: 1em;
font-weight: 400;
text-align: left;
}

h5
{
font-family: "hiragino sans", myriad pro, sans-serif;
font-size: 1.5em;
font-weight: 100;
background-color: #fff;
}


p
{
font-family: "verdana ref", arial, sans-serif;
text-indent: 0;
line-height: 1.3em;
}

p.textwrap
{
font-family: "verdana ref", arial, sans-serif;
text-indent: 0;
line-height: 1.3em;
margin-top: 3em;
}

p.clear
{
font-family: "verdana ref", arial, sans-serif;
text-indent: 0;
line-height: 1.3em;
clear: both;
}


span.small
{
font-family: "verdana ref", arial, sans-serif;
text-indent: 0;
line-height: 1.1em;
font-size: .9em;
color: #8a7878;
}

span.smaller
{
font-family: "verdana ref", arial, sans-serif;
text-indent: 0;
line-height: 1.1em;
font-size: .7em;
color: #8a7878;
}

span.bold
{
font-family: "verdana ref", arial, sans-serif;
font-size: 1.3em;
font-weight: 300;
}

a
{
color: #a80848;
text-decoration: none;
}

a:hover 
{
color: #000;
}

a.black
{
color: #000;
text-decoration: none;
}


div.box
{
min-height: 100vh;
position: relative;
}

div.top
{
position: sticky;
top: 0px;
background-color: #ffffff;
width: auto;
height: auto;
display: block;
z-index: 1;
}

div.top a
{
color: #000;
}

div.top span
{
color:#a80848;
}
  


div.sidebar
{
position: sticky;
top: 60px;
float: left;
width: 20%;
height: auto;
padding-left: 2rem;
}


span.shrink
{
font-family: "verdana ref", arial, sans-serif;
font-size: .85em;
}

span.indent
{
font-family: "verdana ref", arial, sans-serif;
font-size: .75em;
text-indent: 1em;
}

div.badges img
{
float: left;
width: 40px;
opacity: .7;
padding-top: 2em;
padding-right: .5em;
}


div.badges img:hover
{
opacity: 1;
}


span.contact img
{
display: inline-block;
padding-right: .5em;
padding-top: 0px;
width: 40px;
opacity: .7;
}

span.contact img:hover
{
opacity: 1;
}

div.modal 
{
width: auto;
max-width: 100%;
padding-left: .6em;
padding-right: .6em;
}

div.modal img
{
max-height: 700px;
}

div.modal p
{
font-family: "verdana ref", arial, sans-serif;
font-size: .7em;
text-align: center;
}

div.content
{
position: relative;
top: -5em;
margin: auto;
width: 80%;
padding: .2rem;
overflow: auto;
}

div.textcontent
{
padding-left: 3em;
padding-right: 2em;
padding-bottom: .5em;
width: 80%;
overflow: auto;
}

div.CV
{
float: right;
}


div.buttonsl 
{
position: absolute;
top: 45%;
left: 10%;
}

div.buttonsr 
{
position: absolute;
top: 45%;
right: 10%;
}

.left 
{
float: left;
}

.right 
{
float: right;
}


a.arrow {
    text-decoration: none;
    padding: 8px 16px;
}

a.arrow:hover {
    background-color: #ddd;
    color: black;
}

.arrow {
    background-color: #f1f1f1;
    color: black;
    border-radius: 50%;
    font-size: 2em;
}

div.slidecontainer
{
padding: 5px;
overflow: auto;
}

div.mySlides
{
margin: auto;
width: auto;
height: auto;
}


.caption {
font-family: "verdana ref", arial, sans-serif;
font-size: .7em;
text-align: center;
}


span.reverse{
unicode-bidi: bidi-override;
direction: rtl;
}

div.showthumbs
{
font-family: "verdana ref", arial, sans-serif;
position: absolute;
top: 3.5em;
right: 5em;
}

div.showthumbs a
{
color: #000;
}

div.showthumbs a:hover
{
color: #8a7878;
}

div.plist
{
font-family: "verdana ref", arial, sans-serif;
position: absolute;
top: 2.3em;
right: 5em;
}

div.gotop
{
font-family: "verdana ref", arial, sans-serif;
font-size: .8em;
padding-top: 1em;
}

span.showslides
{
font-family: "verdana ref", arial, sans-serif;
font-size: .7em;
padding-left: .8em;
}


span.showslides a
{
color: #000;
}

span.showslides a:hover
{
color: #8a7878;
}



div.gallerycontainer
{
padding-top: 3.8em;
padding-right: 5em;
}

div.galleryimage
{
display: inline-block;
padding-left: 3em;
}

div.galleryimage img
{
height: 450px;
width: auto;
}

.gallerycaption {
font-family: "verdana ref", arial, sans-serif;
font-size: 1.5em;
text-align: center;
}


div.thumbcontainer
{
padding-top: 5em;
padding-right: 2em;
}

div.thumbimage
{
position: relative;
vertical-align: top;
display: inline-block;
margin-left: .5em;
max-width: min-content;
}

div.thumbimage img
{
height:350px;
width: auto;
max-width: 700px;
opacity: 1;
margin-top: 1em;
padding-top: 0;
}



.thumbimage p 
{
font-size: .9em;
font-family: "verdana ref", arial, sans-serif;
text-align: center;
display: block;
}





.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity:0;
    text-align: center;
    padding-left: .3em;
    padding-right: .3em;
    margin: 0;
  }
  
 
  .thumbimage:hover .overlay  {
    opacity: 1;
  }

  .smallerimage:hover .overlay
  {
    opacity: 1;
  }

img.book
{
width: 20%;
height: auto;
margin-left: .5em;
margin-right: 2em;
float: left;
padding-top: 1em;
padding-bottom: 1.5em;
}

div.storyimage
{
vertical-align: top;
display: inline-block;
padding-left: .5em;
max-width: min-content;
}

div.storyimage img
{
height:300px;
width: auto;
max-width: 700px;
}


div.storyimage p
{
font-size: .9em;
font-family: "verdana ref", arial, sans-serif;
text-align: center;
display: block;   
}

div.oraclecontainer
{
padding-top: 3.8em;
padding-right: 2em;
}

div.oracleimage
{
display: inline-block;
padding-left: 1em;
}

div.oracleimage img
{
height: 400px;
width: auto;
}

.oraclecaption 
{
font-family: "verdana ref", arial, sans-serif;
font-size: .7em;
text-align: left;
}

div.pricecontainer
{
padding-top: 3.8em;
padding-right: 2em;
}

div.priceimage
{
    vertical-align: top;
    display: inline-block;
    margin-left: 1em;
    max-width: min-content;
}


div.priceimage img
{
height: 250px;
width: auto;
max-width: 500px;
padding-left: .75em;
}

.pricecaption 
{
font-family: "verdana ref", arial, sans-serif;
font-size: .7em;
text-align: right;
display: block;
}

div.smallerimage
{
position: relative;
vertical-align: top;
display: inline-block;
margin-left: .5em;
max-width:min-content;
}

div.smallerimage img
{
height: 250px;
width: auto;
max-width: 700px;
}

div.smallerimage p
{
font-size: .9em;
font-family: "verdana ref", arial, sans-serif;
text-align: center;
display: block;   
}


div.catimage
{
display: inline-block;
padding-left: .5em;
}

div.catimage img
{
height: 300px;
width: auto;
}

div.catimage p
{
font-size: .9em;
font-family: "verdana ref", arial, sans-serif;
text-align: center;
display: block;   
}

div.footer
{
width: auto;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 5px;
}

div.footer span
{
color: #8f8f89;
font-family: "verdana ref", arial, sans-serif;
font-size: 10px;
}



/*Begin responsive tweeks*/

@media (max-width: 768px) {
div.sidebar, div.content, div.textcontent, div.gallerycontent, div.top{
width: 100vw;
}

div.top
{
position: fixed;
top: 0px;
left: -10px;
background-color: #fff;
z-index: 1;
}

div.sidebar
{
position: fixed;
top: 4em;
background-color: #fff;
}


div.sidebar {
padding-left: 1rem;
padding-top: 0;
padding-bottom: .5em;
z-index: 1;
}

div.badges
{
position: fixed;
top: 2.2em;
right: 1em;
}

h2.clear
{
margin-top: 3.5rem;
}

div.indexcontainer
{
margin-top: 11.5em;
padding-bottom: .3em;
}

div.thumbcontainer, div.oraclecontainer, div.gallerycontainer, div.pricecontainer
{
margin-top: 8em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: .5em;
overflow: auto;
}


div.thumbimage, div.priceimage, div.storyimage, div.oracleimage, div.galleryimage, div.catimage, div.priceimage
{
display: block;
margin: auto;
padding-bottom: .7em;
padding-left: 0;
}

div.oracleimage
{
padding-top: 1.5em;
}


p.pricecaption
{
text-align: center;
font-size: .6em;
}

div.overlay 
{
display: none;
}

div.oracleimage img
{
width: auto;
height: auto;
}

div.thumbimage img, div.storyimage img, div.pricimage img
{
width: auto;
height: auto;
max-width: 90vw;
}

div.galleryimage img
{
width: auto;
height: auto;
max-width: 80vw;
}

img.book
{
width: auto;
height: auto;
max-width: 80vw;
}

img.bio
{
float: none;
}

div.textcontent
{
margin-top: 8em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: .5em;
overflow: auto;
}


h5
{
font-family: "hiragino sans", myriad pro, sans-serif;
font-size: 1.5em;
font-weight: 100;
}


div.mySlides {
height: auto;
max-width: 100%;
}

div.buttonsl, div.buttonsr, span.showslides, div.gotop {
display: none;
}


h1 {
font-size: 1.8em;
max-width: fit-content;
}

img
{
display: block;
max-width: 100%;
height: auto;
padding-top: .3em;
}

img.contact
{
float: none;
display: block;
width: auto;
height: auto;
margin: auto;
}
		}

/*Begin responsive menu*/

ul {
list-style-type:none;
margin:0;
padding:8px;
z-index: 1;
}


li a {
font-family: "optima", verdana, sans-serif;
font-size: 1.2em;
color: #000000;
text-decoration: none;
text-indent: 0;
margin-left: 0;
}

li {
padding-top: 6px;
}

li:hover a {
text-decoration: none;
color: #a80848;
}

span.indent{
line-height: 1.2em;
}

a.navactive
{
text-decoration: none;
color: #ae4f75;
}

.show-menu {
text-decoration: none;
display: none;
}


input[type=checkbox]{
display: none;
}

input[type=checkbox]:checked ~ #menu{
display: block;
}


@media screen and (max-width : 768px){

ul {
position: absolute;
display: none;
text-align: left;
padding: 0;
margin: 0;
width: 100%;
}

li {
text-decoration: none;
background: #fff;
padding: 4px;
opacity: 0.9;
border-bottom: 2px dotted white;
}

li a {
color: #000;
}

span.indent {
display: none;
}

.show-menu {
display:block;
}

	}



/*begin x animation */

.xcontainer {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}