/*
  *** slidein-captions.css ***
  
	This CSS code is based on the examples from CSS-Tricks
	by Chris Coyier (http://css-tricks.com/).

	Basic usage example:
	
		<figure>
			<img src="yay.jpg" alt="">
			<figcaption class="from-left">
				yay!!!
			</figcaption>
		</figure>
  
*/
                                                              /* orginal code */
figure { 
  display: block; 
  position: relative; 
  float: left;
  overflow: hidden; 
  margin: 0 20px 20px 0;
}
figcaption {                                                                    /* info text */
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 
  opacity: 0;
  -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
}
figure:before {                                                                 /* the question mark icon */
  content: "?"; 
  position: absolute; 
  font-weight: 800; 
  background: rgba(255,255,255,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
          border-radius: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75;	
}
figure:hover:before {
  opacity: 0;
}

.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
                                                        /* orginal code - end */

figure {
  margin: 0;
  float: none;
}

a figure:before {                                                               /* adapt '?' symbol */
  background: rgba(0,0,0,0.75);
  color: #9C6531;
}
                                                                                /* additional design/artwork info in footer  */
.inline-fig { display: inline; }

.footer figcaption {                                                            /* adapt info box */
  text-align: left;
  font-style: normal;
  padding: 5px 10px;
  border: dashed thin rgba(123,70,20,1.0);
}
.footer figure:before {                                                         /* hide '?' symbol */
  /* content: "";
  background: none; */
  display: none;
}
.footer dt { color: #9C6531; }

.cap-design:before { bottom: 10px; left: 10px; }                                /* '?' symbol alignment; needed, since hidden? */
.cap-design figcaption { bottom: -30%; right: -80px; }                          /* info box alignment */
.cap-design:hover figcaption { bottom: 0; right: -80px;}                        /* + slide-in effect 'speed' */