.ss-slideshow {
  margin: auto;
  font: 24px Verdana, sans-serif;
  user-select: none;
}
.ss-scroll {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.ss-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.ss-spotlight {
  position: relative;
}
.ss-pad {
  opacity: .2;
  background-repeat: no-repeat;
  background-size: cover;
}
.ss-pad-left {
  background-position: right top;
}
.ss-pad-right {
  background-position: left top;
}
.ss-spotlight .ss-slide {
  display: none;
  height: 100%;
}
.ss-spotlight.horizontal .ss-slide {
  display: inline-block;
  height: 100%;
}
.ss-slide-inner{
  height: 100%;
  position: relative;
  display: flex;
}
.ss-spotlight-inner{
  height: 100%;
}
.ss-slide a, .ss-slide img {
  height: 100%;
  max-width: 100%;
  display: flex;
}
.ss-spotlight .ss-slide.active {
  display: block;
}
.ss-spotlight.horizontal .ss-slide.active {
  display: inline-block;
}
.ss-slide.active .ss-slide-caption {
  display: block;
}
.ss-slide-caption {
  display: none;
  padding: 6px;
  color: white;
  position: absolute;left: 50%;top: 0;transform: translate(-50%, 0%);-ms-transform: translate(-50%, 0%);
  background: #00000033;
}
.ss-spotlight:hover .ss-dot {
  display: block;
}
.ss-dot {
  display: none;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  overflow: hidden;
}
.ss-dot a, .ss-nav a, .ss-nav img, .ss-dot span {
  cursor: pointer;
}
.ss-dot a:hover, .ss-nav a:hover {
  color: #b4aa50;
  background: white;
}
.ss-spotlight:hover .ss-left, .ss-spotlight:hover .ss-right {
  display: flex;
}
.ss-left:hover, .ss-right:hover {
  background: #00000066;
}
.ss-left, .ss-right {
  position: absolute;
  background: #00000022;
  text-align: center;
  display: none;
  top: 50%;
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.ss-left {
  left: 16px;
}
.ss-right {
  right: 16px;
}
.ss-left i, .ss-right i {
  -webkit-filter: invert(89%) sepia(6%) hue-rotate(185deg);
  filter: invert(89%) sepia(6%) hue-rotate(185deg);
}
.ss-left i {
  background-image: url(button.png);
  background-position: 0px -74px;
  background-size: 74px 246px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  display: inline-block;
}
.ss-right i {
  background-image: url(button.png);
  background-position: 0px -100px;
  background-size: 74px 246px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  display: inline-block;
}
.ss-dot:hover span {
  border: 1px solid #777;
}
.ss-dot span {
  border-radius: 50%;
  border: 1px solid #ccc;
  height: 13px;
  width: 13px;
  display: inline-block;
  margin: 0 3px;
  background: #ffffff33;
}
.ss-dot span.active {
  background: #fff;
}
.ss-nav {
  height: 100px;
}
.ss-nav img {
  height: 100%;
  opacity: .5;
  border: thin solid transparent;
}
.ss-nav img.active {
  opacity: 1;
  border: thin solid seagreen;
}
.ss-nav img:hover {
  opacity: 1;
}
.ss-nav .ss-action {
  display: flex;
  align-items: center;
}
.ss-nav-inner {
  height: 100%;
  /*flex: 1;*/
  text-align: center;
}
.ss-animate-opacity {animation: ss-opacity 0.8s}
@keyframes ss-opacity {
  from {opacity: 0}
  to {opacity: 1}
}