.bss-slides{
/* the container element needs to be 
   relatively positioned and display:
   block so that the slides can be 
   "stacked up" inside of it */ 
  position: relative; 
  display: block;    
}
.bss-slides figure{
/* these are the individual slides
   each containing an img and caption.
   they are positioned absolute at the
   top of the slideshow container, so they
   will be stacked up like a deck of cards */
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
/* the very first slide is relatively 
   positioned in order to give height 
   to the container element */
  position: relative;
}
.bss-slides figure img{
/* all slide images are made "invisible"
   with an opacity of 0, then we
   set the transition property so
   that later when we change it,
   it transitions over 1.2 seconds for a
   fade in/out effect instead of changing 
   instantly */   
   filter: alpha(opacity=0);
   zoom: 1;
 opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bss-slides .bss-show img{
/* this is for the currently visible slide
   it's the only one that shows, with full
   opacity */
filter: alpha(opacity=100);   
  opacity: 1;
}
.bss-slides figcaption{
/* the caption is positioned absolutely near
   the bottom right of the slide, then we hide it
   with an opacity of 0, and set the transition 
   property just like with the img element above */
  position: absolute;
  font-family: sans-serif;
  line-height:130%;
  font-size: 1.8em;
  bottom: .5em;
  left: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .45);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}

.bss-slides .bss-show figcaption{
/* this is for the currently visible slide caption
   it's the only one that shows, with full opacity, 
   just like the current img. the caption also
   has a z-index of 2 to ensure it always appears
   above the img */
  z-index: 2;
  opacity: 1;
}
.bss-slides figcaption2{
/* the caption is positioned absolutely near
   the bottom right of the slide, then we hide it
   with an opacity of 0, and set the transition 
   property just like with the img element above */
  position: absolute;
  font-family: sans-serif;
  line-height:110%;
  font-size: 1.3em;
  bottom: .5em;
  left: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .45);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}

.bss-slides .bss-show figcaption2{
/* this is for the currently visible slide caption
   it's the only one that shows, with full opacity, 
   just like the current img. the caption also
   has a z-index of 2 to ensure it always appears
   above the img */
  z-index: 2;
  opacity: 1;
}
.bss-slides figcaption3{
/* the caption is positioned absolutely near
   the bottom right of the slide, then we hide it
   with an opacity of 0, and set the transition 
   property just like with the img element above */
  position: absolute;
  font-family: sans-serif;
  line-height:120%;
  font-size: 1.5em;
  bottom: .5em;
  left: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .45);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}

.bss-slides .bss-show figcaption3{
/* this is for the currently visible slide caption
   it's the only one that shows, with full opacity, 
   just like the current img. the caption also
   has a z-index of 2 to ensure it always appears
   above the img */
  z-index: 2;
  opacity: 1;
}

.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: -1px;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}