body {
  font-family:Akzidenz-GroteskProRegular;
  background-color:#fcee6b;
  padding-top:1em;
}

body.artwork {
  /* background-color:#cf8641; */
  /* background-color:#febb0c; */
  /* background-color:#e04b29; */
  /* background-color:#fcee6b; */
  /* background-color: #d0f2b8; */
  /* background-color: #00cc66;
  background-color: #33fe98;
  background-color: #cccc66;
  background-color: #6fc;
  background-color: #ff9; */
  background-color:#fcee6b;
  color:black;
}

body.writing {
  background-color:#248b26;
}

body.about {
  background-color:#cf8641;
}

#overlay {
  position:fixed;
  width:100vw;
  height:100vh;
  left:0;
  top:0;
  background-color:#fcee6b;
  z-index:2;
  display:none;
  pointer-events:none;
}

.gallerycontainer{
  width:auto;
}

.artworkheader #overlay {
  background-color:#fcee6b;
}

.aboutheader #overlay {
  background-color: #cf8641;
}

.writingheader #overlay {
  background-color:#248b26;
}

.thumbcontainer{
  display:flex;
  justify-content:space-evenly;
  flex-wrap:wrap;
  align-items: center;
}



.thumb:hover{
  filter:none;
  mix-blend-mode:normal;
}

.thumb{
  width:90%;
  padding:3.5vw;
  filter:grayscale();
  mix-blend-mode:multiply;
}

.thumb img {
  width:100%;
}

.thumb .thumbtext {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content: center;
  font-family:Akzidenz-GroteskProRegular;
  font-weight:normal;
  font-size:1.2rem;
  color:#fcee6b;
  /* color:red; */
  visibility: hidden;
}

.writinglink {
  margin-bottom:3rem;
  margin-top:3rem;
  width:90%;
  display:flex;
  align-items:center;
  justify-content: center;
  font-family:Akzidenz-GroteskProRegular;
  font-weight:normal;
  font-size:1.2rem;
  background-color:#248b26;;
  text-align:center;
}

.writinglink:hover {
  background-color:black;
  color:#248b26;;
}

.writinglinkborder {
  display:flex;
  align-items:center;
  justify-content: center;
  font-family:Akzidenz-GroteskProRegular;
  font-weight:normal;
  font-size:1.2rem;
  background-color:black;
}

.linktext {
  margin:3em;
}

.biocontainer {
  /* margin-top:3em; */
  margin-top:1em;
  margin-bottom:3em;
  display: flex;
flex-direction: row;
align-items:flex-start;
flex-wrap: wrap;
font-size: 30px;
text-align: left;
align-items: flex-start;
/* width:60%; */
width:90%;
}

.bioimage {
  /* width:50%; */
  width:100%;
  padding:0;
}

.biotext a {
  font-weight:bold;
}

.biotext {
  /* padding-left:1%;; */
  margin-top:1em;
  margin-bottom:1em;
  /* width:49%; */
  width:100%;
  font-size:1rem;
}

.full {
  display:none;
}

.mobile {
  display:block;
}

.biolinks {
  font-size:1rem;
  font-family:Akzidenz-GroteskProMed;
}




.thumb:hover .thumbtext {
  visibility:visible;
}

.badge {
  width:80%;
  padding:3.5vw;
  filter:grayscale();
  mix-blend-mode:multiply;
}

.badge img {
  width:100%;
  filter: brightness(0.8);
}

.galleryimage{
  width:90%;
  padding:3.5vw;
}

.endspacer {
  height:3em;
  width:100%;
}

.endmattercontainer{
  margin-top:1em;
  width:85%;
  display:flex;
  align-items:center;
  flex-direction:column;
  border-style:none;
  border-color:#fcee6b;
  border-width: 1px;
  border-radius:18px;
  padding:0.5em;
  color:black;
  font-size:0.8em;
  margin-bottom:3rem;
}

.exhib{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:flex-start;
}

.exhibtitle{
  font-family:Akzidenz-GroteskProMed;
  font-style:italic;
  /* margin-right:2em; */
  width:25%;
}

.exhibs{
  width:75%;
}

.galleryimage img {
  width:100%;
  border-radius:18px;
}

p {
  margin-block-start:0;
  margin-block-end:0.5em;
}

.badgetext {
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content: center;
  font-family:EditorialNew;
  font-weight:normal;
  /* color:red; */
}

.artworkname {
  position:absolute;
  left:-100px;
  top: 40px;
  width:40%;
  text-align:center;
  font-size:1.5rem;
  font-family:EditorialNew;
  color:#fcee6b;
  z-index:1;
}

.artworkinfo  {
  width:100%;
  text-align:center;
  font-family:EditorialNew;
  font-size:1rem;
  margin-bottom:2em;
  color:black;
}

.descriptioncontainer {
  border-style:none;
  border-width:1px;
  border-radius:18px;
  border-color:#fcee6b;
  padding:1em;
  width:95%;
  margin-top:0;
  margin-bottom:2em;
}

.descriptioncontainer span{
  font-size:1rem;
}

.video-container {
    overflow: hidden;
    position: relative;
    width:90%;
    margin-top:3.5vw;
    margin-bottom:3.5vw;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    border-radius:18px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shape0  {
  clip-path: polygon(91% 5%, 100% 50%, 86% 100%, 8% 93%, 13% 33%, 2% 1%);
}

.shape1  {
  clip-path: polygon(100% 0%, 90% 63%, 100% 100%, 15% 100%, 0% 50%, 26% 10%);
}

.shape2  {
  clip-path: polygon(50% 0%, 100% 41%, 50% 100%, 0 51%);
}

.shape3  {
  clip-path: polygon(18% 3%, 100% 0%, 79% 96%, 0% 100%);
}

.shape4  {
  clip-path: polygon(0 3%, 90% 3%, 98% 100%, 18% 100%);
}

.shape5  {
  clip-path: polygon(15% 0, 97% 3%, 100% 84%, 18% 100%, 0% 38%);
}

.shape6  {
  clip-path: polygon(10% 11%, 75% 0%, 100% 63%, 75% 100%, 52% 100%, 0 87%);
}

.shape7  {
  clip-path: polygon(29% 1%, 75% 0%, 100% 36%, 89% 99%, 52% 100%, 0 87%);
}

.shape8  {
  clip-path: polygon(29% 0, 96% 6%, 100% 50%, 75% 100%, 50% 98%, 0 77%);
}

.shape9  {
  clip-path: polygon(88% 0, 100% 38%, 82% 100%, 39% 100%, 0 25%);
}

.shape10 {
  clip-path: polygon(49% 0, 75% 4%, 100% 75%, 45% 100%, 12% 94%, 0% 50%);
}

.shape11 {
  clip-path: polygon(10% 0, 83% 8%, 100% 36%, 88% 100%, 8% 89%);
}

#extratext {
  display:none;
}

#craig {
  font-family:EditorialNewUltrabold;
  /* font-weight:bold; */
}

a:link, a:visited {
	text-decoration:none;
	color: inherit;
}

a:hover {
	text-decoration:underline;
}

.logo {
  padding:0.5rem;
}

.artworkheader {
  color:black;
}







#navbar {
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:3;
}

#navleft{
  padding:0.25rem;
}

.navitem {
  margin-right:0.5rem;
}

.menu, .submenu {
  font-family:Akzidenz-GroteskProRegular;
  list-style-type: none;
  margin:0;
  padding:0;
  margin-top:0.5rem;
  font-size:1.3rem;

}

.menuitem {
  padding:0.25rem;
}

.menuitem a:hover,
.menuitem a:hover::after {
    /* font-weight:bold; */
    /* cursor:pointer; */
}

a {
  cursor:pointer !important;
}

/* mobile menu stuff */

.menu {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
}

menu li {
  display:block;
  padding: 15px 5px;
}

.toggle {
    order: 1;
    font-size: 20px;
    padding-right:0.5rem;
}

.menuitem {
    order: 2;
    width: 100%;
    text-align: center;
    display: none;
}

.active .menuitem {
    display: block;
}

.submenu {
    display: none;
}

.submenu-active a.menulink{
    text-decoration: underline;
}


.submenu-active .submenu {
   display: block;
   font-weight:normal;
}
.has-submenu i {
    /* font-size: 12px; */
}
/* .has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    content: "\f078";
    color: white;
    padding-left: 5px;
} */
.subitem a {
    /* padding: 10px 15px; */
}

.subitem {
}


/* Desktop menu */
@media all and (min-width: 700px) {

    .artworkname {
      font-size:1.8rem;
    }

    .offset0{
      margin-right:10em;
    }

    .offset1{
      margin-right:5em;
    }

    .offset2{
      margin-right:0em;
    }

    .offset3{
      margin-left:5em;
    }

    .offset4{
      margin-left:10em;
    }

    .endmattercontainer{
      width:60%;
    }

    #extratext {
      display:block;
    }

    .video-container {

        width:60%;

    }

    .descriptioncontainer {
      width:80%;
      margin-top:1em;
    }

    .descriptioncontainer span {
      font-size:1.2rem;
    }

    .artworkinfo span {
      font-size:1.2rem;
    }

    .menu {
        align-items: flex-start;
        flex-wrap: nowrap;
        background: none;
        font-size:1.5rem;
    }
    .menuitem {
        order: 1;
        position: relative;
        display: block;
        width:auto;
    }

    .firstitem  {
      margin-left: auto;
    }

    .submenu-active .submenu {
        display: block;
        position: absolute;
        right: 0.25rem;
        top: 1.5rem;
        width: 500px;
        text-align:right;
        font-weight:normal;
    }
    .toggle {
        display: none;
    }
    .submenu-active {
        border-radius: 0;
    }

    .galleryimage img{
      /* filter:grayscale();
      mix-blend-mode:screen; */
    }

    .gallerycontainer{
      width:100%;
      display:flex;
      margin:2em;
      justify-content:center;
    }


    .galleryimage{
      width:60%;
    }


    .variation0 {
      width:42%;
    }
    .variation1 {
      width:42%;
    }
    .variation2 {
      width:43%;
    }
    .variation3 {
      width:45%;
    }
    .badge {
      width:50%;
    }

    .biocontainer {
      margin-top:3em;
    width:70%;
    }

    .bioimage {
      width:40%;
      /* width:100%; */
      padding:0;
    }

    .biotext {
      padding-left:1%;;
      /* margin-top:1em; */
      margin-top:0;
      /* margin-bottom:1em; */
      width:59%;
      /* width:100%; */
      font-size:1.7vw;
    }

    .full {
      display:block;
      text-align:center;
    }

    .mobile {
      display:none;
    }

}