.slideshow {
  position: relative;
  height: 17em;
}
.slideshow > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
}
.slideshow > div:first-of-type {
  opacity: 1;
  pointer-events: auto;
}
.slideshow > div.selected {
  opacity: 1;
  animation-name: slideshow-appear;
  animation-duration: 1s;
  pointer-events: auto;
}
.slideshow > div.not-selected {
  opacity: 0;
  animation-name: slideshow-hide;
  animation-duration: 1s;
}
.slideshow > ul.selectors {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

@keyframes slideshow-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideshow-hide {
  from { opacity: 1; }
  to { opacity: 0; }
}

.slideshow > ul.selectors > li {
  list-style: none;
  display: inline;
  padding: 0.25em 0.25em;
}
.slideshow > ul.selectors > li:before {
  color: var(--cg-color);
  font-family: 'FontAwesome';
  cursor: pointer;
}
.slideshow > ul.selectors > li.item:before {
  content: "\f1db";
}
.slideshow > ul.selectors > li.item.selected:before {
  content: "\f111";
}

.slideshow > ul.selectors > li.pause:before {
  content: "\f04c";
}
.slideshow > ul.selectors > li.pause.paused:before {
  content: "\f04b";
}