div#carousel1 {
  perspective: 1200px;
 font-size: 0;
 padding:20px 0 0px 0;
     position: relative;
       z-index: 5;
    transform: translateY(70px);
}



figure#spinner1 {
  transform-style: preserve-3d;
  height: 500px;
  transform-origin: 50% 50% -450px/*50% 50% -650px*/;
  transition: 1s;
}

figure#spinner1 figure {
  width: 20%;
  max-width: 500px;
  position: absolute;
  left: 40%;
  transform-origin:50% 50% -450px;
  outline: 1px solid transparent;
  overflow: hidden;
  transition: 1s;
      overflow: visible;   
}

#spinner1 figure.current img {
    opacity: 1;
}

figure#spinner1 figure.focus {
  width: 26%;
  left: 37%;
  margin-top: -3rem;
}

figure#spinner1 figure.current {
  width: 26%;
  left: 37%;
  margin-top:-4rem;
}

figure#spinner1 figure img { width: 100%;box-shadow:0 13px 14px -11px #929292;    opacity: 1;
    transition: opacity 1s; }

figcaption {
  position: absolute;
  top: 100%;
  width: 100%;
 padding: .3rem;
  z-index: 2;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0);
  transition: .6s;
  display:none;
}

figure#spinner1 figure.current:hover figcaption,
figure#spinner1 figure.current.caption figcaption {
  top: 90%;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
}

div#carousel1 ~ span {
  color: #fff;
  margin: 5%;
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  transition: 0.6s color;
  position: relative;
  margin-top: -6rem;
  border-bottom: none;
  line-height: 0;
}

div#carousel1 ~ span:hover {
  color: #888;
  cursor: pointer;
}

.slider1 .arrows span {
    position: absolute;
    top: 40%;
    font-size: 52px;
    left: 0;
    z-index: 8;
    cursor: pointer;
}

.slider1 .arrows span.right{
	left:auto;
	right:0;
}

@media only screen and (max-width: 720px) {

figure#spinner1 figure.current {
    width: 50%;
    left: 25%;
}
figure#spinner1 figure{
    transform-origin: 50% 50% -400px;
}

}