/*
Malerie Marder Website : Update 240507
URI: http: //maleriemarder.com/
Description: Portfolio Site for MM
Version: 0.11
*/

/*--- Font  ------------------------------------------------------------------------*/
/*--- <weight>: Use a value from 200 to 1000 -----*/

.nunito-sans-mm {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

/*--- Body resets and sets  ------------------------------------------------------------------------*/
html {
  font-size:16px;
}
body {
  height: 100%;
  font-family: "Nunito Sans", sans-serif;
  font-size: .8rem;
  line-height: 1.5;
  padding: 20px 40px 0;
  font-weight: 300;
}
body.bodyindex {
  background-image: url('/images/Marder_BecauseIWasFlesh_11a.jpg');
  background-color:#ddee00;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
p {
  margin: 0 0 0px 0;
    /* font-size: 85%; */
  letter-spacing: 1px;
  line-height: 1.5;
}
#main {
  padding: 0px 0px 40px 0px;
  border: 0px solid red;
}
#main img {
  margin: 0px 0px 50px 0px;
  max-width: 1000px;
  height: auto;
}


/*--- Headings  ------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  font-style: normal;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}
h1 {
  font-size: .9rem;
}

h1.prime {
  font-size: .8rem;
  color: #888;
  margin-bottom: 50px;
  letter-spacing: 1px;
}

h2 {
  font-size: .8rem;
}
h3 {
  font-size: .8rem;
}
h4 {
  font-size: .8rem;
}


/*--- Links  ------------------------------------------------------------------------*/
a {
  color: #333;
  text-decoration: none;
  transition: all 0.2s linear;
  border: 0px solid red;
}
a:hover {
  color: #aaa;
  transition: all 0.2s linear;
}
OFFa:visited {
  color: #444444;
}
a,
label {
    cursor: pointer;
}

/* --- Lists and Main Nav  -------------------------------------------------------------------------------- */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
  display: block;
}
ul.cvli {
  margin-left: 5em;
}
.articles #main li,
.cvli li {
  line-height: 1.85;
}
#mainmenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  letter-spacing: 0.7px;
  /*! border: 0px solid green; */
}
#mainmenu ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
#mainmenu ul li {
  padding: 0.3em 1.5em 0.2em 1.5em;
  OFFbackground: rgb(255 105 180 / 100%);
    /* background-blend-mode: screen; */
  margin: 0 0 0px 0px;
  font-weight: 400;
}


/*--- MainMenu Links ----------------------------------------------------------------------------------------- */
#mainmenu a {
  color: #000;
  text-decoration: none;
  opacity: 1;
}
#mainmenu a:visited {
  color: #000;
}

/* maximum constrast for tab focus - change with great care */
#mainmenu a:focus {
  text-decoration: none;
  color: #000;
}
#mainmenu a:active {
  text-decoration: none;
  outline: 0 none;
}
#mainmenu a:hover {
  color: #fff;
  text-decoration: none;
  transition: all 0.2s linear;
}
.button_container.active {
  width: 100%;
    height: 100%;
  position: fixed;
  /*! bottom: 0; */
  /*! right: 0; */
  z-index: 0;
  /*! transition: opacity .25s ease; */
  border: 0px solid red;
  /*! text-align: center; */
}
OLDER.button_container {
  display: block;
  z-index: 150;
  transition: opacity .25s ease;
  border: 0px solid yellow;
  text-align: center;
  margin: 0;
  padding-bottom: 40px;
}
#index .button_container {
    width: 100%;
    /* height: 100%; */
position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
  transition: opacity .25s ease;
  border: 0px solid red;
  text-align: center;
}
.button_container {
  width: 100%;
    /* height: 100%; */
position: relative;
  bottom: 0;
  right: 0;
  z-index: 1;
  transition: opacity .25s ease;
  border: 0px solid white;
  text-align: center;
}


/* --- Revised Ornament menu clicker -------------------------------------------------------------------------------- */

.button_container a {
    display: none;
}

.button_container.active a, .button_container.active a img, #index .button_container.active img  {
    display: block;
}

.button_container.active img {
    display: none;
}

#toggle img {
  width: 4.5vw;
  min-width: 70px;
  margin: 40px auto;
  opacity: 1;
  transition: all 0.2s linear;
}
#toggle.active img {
  /* filter: invert(1); */
  /* mix-blend-mode: screen; */
  /* filter: brightness(0.7); */
  /* mix-blend-mode: overlay; */
  opacity: 0%;
}
#toggle img:hover {
  opacity: .5;
  transition: all 0.2s linear;
}

#overlay img {
  width: 4.5vw;
  min-width: 70px;
  margin: 30px auto;
  opacity: 1;
  transition: all 0.2s linear;
  padding: 6vh 0em 0em 0em;
}
#overlay img:hover {
  opacity: .5;
  transition: all 0.2s linear;
}
.overlay {
  display: flex;
  position: fixed;
  background: #ddee00;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .8;
  visibility: visible;
  height: 100%;
}

p.notice {
    text-align: center;
}

/* --- specific IDs and Classes -------------------------------------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid #888;
  /* color: #ccc; */
  text-align: left;
  width: 8%;
  margin: 2em 0 1em 0;
  padding-top: 2em;
  padding-bottom: 0em;
}
#film .covers {
  display: inline-flex;
}
.cvtable {
  width: 100%;
  padding-left: 0;
  font-size: .9em;
}
.cvtable td {
  vertical-align: top;
  padding-bottom: 10px;
}
.year {
  width: 5em;
}
.spacer {
  margin: 50px 0px 10px 0px;
}

div#main a {
    display: inline-block;
 }

.closebtn.full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  border: 10px solid red;
  z-index: 1;
}

/* --- Custom Sizes for wide installation images -------------------------------------------------------------------------------- */
  #main div.wide img {
    margin: 10px 0px 10px 0px;
    height: 445px;
    /* width: auto; */
  }
  #main div.wide.anatomy-inst img {
    margin: 10px 0px 10px 0px;
    width: auto;
    height: auto;
     max-width: 85vw;
    min-width: 85vw;
}

/* --- Re configs for Monograph images and menu fuctions -------------------------------------------------------------------------------- */

.monographs #main div {
    display: block;
    /* width: 34vw; */
  width: fit-content;
     vertical-align: top;
    /*! padding-right: 10vw; */
    border: 0px solid red;
}

   #main img.anatomy {
      margin: 20px 0px 80px 0px;
    width: 25%;
      height: auto;
   }

   #main img.carnal {
    margin: 10px 0px 10px 0px;
    width: 25%;
    padding: 0px;
    height: auto;
  }
   #main img.nine {
    margin: 45px 0px 80px 0px;
    width: 25%;
    height: auto;
  }
   #main img.flesh {
    margin: 20px 0px 10px 0px;
    width: 25%;
    height: auto;
  }

div.mono-rolls {
margin-bottom: 40px;
}

div.mono-rolls img {
  display: none;
  opacity: 1;
    position: absolute;
  top: 0;
  left: 50%;
  	transition: all 0.2s linear;
}

div.mono-rolls:hover > img {
  display: initial;
    opacity: 1;
  position: absolute;
  top: 0;
  left: 500px;
   transition: all 0.2s linear;

}


body.monographs #toggle {
  /*! position: absolute; */
  /*! width: 100%; */
  /*! bottom: 0px; */
}

/* Responsive Styles  - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - */

/* Smartphones  - - - - - - - - -  */
@media only screen and (max-width : 767px) {
    /* Styles */
  html body {
    border-top: 0px solid gray;
  }
  body {
    padding: 20px 20px;
  }
  body.bodyindex {
    background-image: url('/images/Marder_BecauseIWasFlesh_11a.jpg');
    background-color:#ddee00;
    height: 100vh;
    background-position: 25%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #mainmenu ul li {
  padding: 0.1em 1.5em 0.1em 1.5em;
  OFFbackground: rgb(255 105 180 / 100%);
    /* background-blend-mode: screen; */
  margin: 0 0 1px 0;
  font-weight: 400;
}
  .button_container {
  width: 100%;
    /* height: 100%; */
  position: relative;
  bottom: -100px;
  right: 0;
  z-index: 1;
  transition: opacity .25s ease;
  border: 0px solid white;
  text-align: center;
}
  #overlay img {
  width: 3vw;
  min-width: 55px;
  margin: 10px auto;
  opacity: 1;
  transition: all 0.2s linear;
}
  #main img {
    margin: 0px 0px 50px 0px;
    width: 100%;
    height: auto;
  }
  ul.cvli {
    margin-left: 2em;
  }
  .articles ul {
    margin-left: 0em;
  }
  .monographs #main div {
    display: inline-block;
    width: 80vw;
    vertical-align: top;
    margin-right: 70px;
}
   #main img.anatomy {
margin: 10% auto;
    width: 50%;
    padding: 0;
    height: auto;
   }

   #main img.carnal {
margin: 10% auto;
    width: 50%;
    padding: 0;
    height: auto;
    /*! background: #fff; */
  }
   #main img.nine {
margin: 10% auto;
    width: 50%;
    padding: 0;
     height: auto;
  }
   #main img.flesh {
margin: 10% auto;
    width: 50%;
    padding: 0;
     height: auto;
  }

div.mono-rolls {
margin-bottom: 40px;
}

div.mono-rolls img {
  display: initial;
  opacity: 1;
    position: initial;
  top: 0;
  left: 0px;
  	transition: all 0.2s linear;
}

div.mono-rolls:hover > img {
  display: initial;
    opacity: 1;
  position: initial;
  top: 0;
  left: 0px;
   transition: all 0.2s linear;
}


}

/* Tablets  - - - - - - - - -  */
@media only screen and (min-width : 768px) and (max-width : 1023px) {
    /* Styles */
  html body {
    border-top: 0px solid blue;
  }
  body {
    padding: 20px 20px;
  }
  body.bodyindex {
    background-image: url('/images/Marder_BecauseIWasFlesh_11a.jpg');
    background-color:#ddee00;
    height: 100vh;
    background-position: 25%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #main img {
    margin: 0px 0px 50px 0px;
    width: 100%;
    height: auto;
  }
  ul.cvli {
    margin-left: 2em;
  }
   #main img.anatomy {
      margin: 20px 0px 80px 0px;
    width: 25%;
      height: auto;
   }

   #main img.carnal {
    margin: 10px 0px 10px 0px;
    width: 25%;
    padding: 0px;
    height: auto;
  }
   #main img.nine {
    margin: 45px 0px 80px 0px;
    width: 25%;
    height: auto;
  }
   #main img.flesh {
    margin: 20px 0px 10px 0px;
    width: 25%;
    height: auto;
  }

div.mono-rolls {
margin-bottom: 40px;
}

div.mono-rolls img {
  display: ;
  opacity: 1;
    position: absolute;
  top: 0;
  left: 50%;
  	transition: all 0.2s linear;
}

div.mono-rolls:hover > img {
  display: initial;
    opacity: 1;
  position: absolute;
  top: 0;
  left: 500px;
   transition: all 0.2s linear;
}

}

/* Desktops and laptops  - - - - - - - - -  */
@media only screen and (min-width : 1024px) {
    /* Styles */
  html body {
    border-top: 0px solid indigo;
  }
  #main img {
    margin: 0px 0px 60px 0px;
    width: 75%;
    height: auto;
  }
}

/* Large screens  - - - - - - - - -  */
@media only screen and (min-width : 1824px) {
    /* Styles */
  html body {
    border-top: 0px solid pink;
  }
}