/* *** NATURE RESOURCES **** */

/* poetry expanders */

    article#penGraphic { text-align:center; padding-top:1em; } 
      #penGraphic img { width:225px; }
    div#poetryGridBox, div#artworkGridBox { display:grid;
            grid-template-columns: 50% 50%;
            background-color: none;
            padding:.5em;
             }    
    div#photosGridBox { display:grid;
            grid-template-columns: 25% 25% 25% 25%;
            background-color: none;
            padding: 0em;
             }    
    div.expandDown { cursor:pointer; padding:1em; }
    .expDown { display:none; background:beige; padding:1em; border-radius:.5em; }
    .openPoem { text-align:center; font-size:1.1em; }
    p.contributor { text-align:right; font-style:italic; font-size:95%; color:gray; } 
    p.poemPreview { font-style:italic; padding-left:1em; }

   article.writing h3 { color:green; margin:.5em 1em 0 1em; }
   p.authorPoem { font-style:italic; margin:0 0 0 1.25em; }
   article.natureLinks h3 { color:green; margin:0 1em 0 1em; font-size:1.36rem;}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 500px;
  background-color: beige;
  color: #000;
  text-align: left;
  border-radius: .5em;
  padding: .5em .75em;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -200px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

img.slideshow {height: 25em;}
div.slidecontainer{text-align: center; background-color: black; padding: 1em; border-radius: .5em;}
div.slidecontainertop{text-align: center; background-color: black; padding: 1.5em 0em 1.5em 0em; border-radius: .5em; width: 100%;}

div.photocontainer{text-align: center; background-color: black; padding: .5em; border-radius: .5em;}
img.zoomy {width: 100%; border-radius: .15em;}
img.zoomy:hover {transform:scale(3);}
img.zoomy {transition: transform .5s;}


/* -------- ARTWORK PAGE -------- */

/* page top */

  div.staticImage { 
    margin:.5em; 
    border:1px solid gray; 
    border-radius:.35em; 
    padding:.7em; 
    background-color:white; 
    text-align:center; 
    font-size:.75rem; 
    color:rgb(102,102,128); 
    }
  .staticImage img { width:100%; }
  #graphic img { width:90%; }
    

    
/* ARTWORK artwork gallery thing */

/* The grid: Four equal columns that floats next to each other */
.column 
  {
  float: left;
  width: 25%;
  padding: 0px;
  }

/* Style the images inside the grid */

.column img 
  {
  opacity: 0.8;
  cursor: pointer;
  width: 80%;
  border-radius: .25em;
  border: .5em solid black;
  }

 .column { text-align:center; font-size: .75em; font-style:italic; color: dark-gray;}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container 
  {
  position: fixed;
  top:10%;
  left:15%;
  width:500px;
  max-width:35%;
  display: none;
  border:1px solid white;
  border-radius:1em;
  padding:4em;
  background-color:gray;
  text-align:center;
  }
img#imgExpanded { 
  max-height:100%; 
  max-width:90%;
  border:1em solid black;
  border-radius:.5em;
  }


/* Expanding image text */
div.imgText {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
  /*box-shadow: 2px 2px 20px grey;*/
  padding: .5em .5em .25em .5em;
  background:rgba(0,0,0,.25);
  border-radius:.25em;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}



/*  SLIDESHOW */


[data-component="slideshow"] 

.slide {
	display: none;
  text-align: center;

}


[data-component="slideshow"]
.slide.active {
	display: block;

}



div.cite { border-top:1px solid rgb(153,153,175); padding:1em 1em .5em 1em; font-size:.75rem; }