.container {
  width: 100%;
}

.demo-perspective-photo {
  position: absolute;
  width: 100%;
  height: 800px;
  top: 0px;
  background-color: #000;
}

.demo-perspective-photo #contentContainer {
  width: 100%;
  height: 800px;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  perspective: 2000px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform-style: preserve-3d;
  -ms-transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
}

.demo-perspective-photo #carouselContainer {
  position: absolute;
  width: 128px;
  height: 72px;
  left: 50%;
  top: 50%;
  margin-left: -64px;
  margin-top: -36px;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, -1000px) rotateX(-15deg);
  -moz-transform-style: preserve-3d;
  -moz-transform: translate3d(0, 0, -1000px) rotateX(-15deg);
  -ms-transform-style: preserve-3d;
  -ms-transform: translate3d(0, 0, -1000px) rotateX(-15deg);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -1000px) rotateX(-15deg);
  will-change: transform;
  z-index: 100;
}

.demo-perspective-photo .mod-sun {
  position: relative;
  box-sizing: border-box;
  position: absolute;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform-style: preserve-3d;
  -ms-transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.demo-perspective-photo .mod-sun .x, .demo-perspective-photo .mod-sun .y, .demo-perspective-photo .mod-sun .z {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.demo-perspective-photo .mod-sun .x1, .demo-perspective-photo .mod-sun .x2, .demo-perspective-photo .mod-sun .y, .demo-perspective-photo .mod-sun .y1, .demo-perspective-photo .mod-sun .y2, .demo-perspective-photo .mod-sun .z, .demo-perspective-photo .mod-sun .z1, .demo-perspective-photo .mod-sun .z2, .demo-perspective-photo .mod-sun .xInner, .demo-perspective-photo .mod-sun .yInner, .demo-perspective-photo .mod-sun .zInner {
  position: absolute;
}

.demo-perspective-photo .mod-sun .x1, .demo-perspective-photo .mod-sun .x2, .demo-perspective-photo .mod-sun .y1, .demo-perspective-photo .mod-sun .y2, .demo-perspective-photo .mod-sun .z1, .demo-perspective-photo .mod-sun .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .mod-sun .x {
  position: relative;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 20s linear infinite 2s;
  animation: rotateItself 20s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .mod-sun .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .mod-sun .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .mod-sun .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  transform: translateZ(50px);
}

.demo-perspective-photo .mod-sun .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateX(180deg) translateZ(50px);
  -moz-transform: rotateX(180deg) translateZ(50px);
  -ms-transform: rotateX(180deg) translateZ(50px);
  transform: rotateX(180deg) translateZ(50px);
}

.demo-perspective-photo .mod-sun .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateX(90deg) translateZ(50px);
  -moz-transform: rotateX(90deg) translateZ(50px);
  -ms-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
}

.demo-perspective-photo .mod-sun .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateX(270deg) translateZ(50px);
  -moz-transform: rotateX(270deg) translateZ(50px);
  -ms-transform: rotateX(270deg) translateZ(50px);
  transform: rotateX(270deg) translateZ(50px);
}

.demo-perspective-photo .mod-sun .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateY(90deg) translateZ(50px);
  -moz-transform: rotateY(90deg) translateZ(50px);
  -ms-transform: rotateY(90deg) translateZ(50px);
  transform: rotateY(90deg) translateZ(50px);
}

.demo-perspective-photo .mod-sun .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  background-image: radial-gradient(transparent 70%, rgba(255, 79, 0, 0.9) 100%);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateY(270deg) translateZ(50px);
  -moz-transform: rotateY(270deg) translateZ(50px);
  -ms-transform: rotateY(270deg) translateZ(50px);
  transform: rotateY(270deg) translateZ(50px);
}

.demo-perspective-photo .mod-sun .x .xInner {
  border: 2px solid rgba(255, 79, 0, 0.9);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .mod-sun .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .mod-sun .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(255, 79, 0, 0.9);
  box-shadow: 0 0 100px rgba(255, 79, 0, 0.9);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform-style: preserve-3d;
  -ms-transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.demo-perspective-photo .example1 {
  margin: -15px 0 0 -15px;
  -webkit-transform: rotateY(60deg) translateZ(300px);
  transform: rotateY(60deg) translateZ(300px);
  -webkit-animation: rotateSunSix 60s linear infinite 2s;
  animation: rotateSunSix 60s linear infinite 2s;
}

.demo-perspective-photo .example1 .x, .demo-perspective-photo .example1 .y, .demo-perspective-photo .example1 .z {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.demo-perspective-photo .example1 .x1, .demo-perspective-photo .example1 .x2, .demo-perspective-photo .example1 .y, .demo-perspective-photo .example1 .y1, .demo-perspective-photo .example1 .y2, .demo-perspective-photo .example1 .z, .demo-perspective-photo .example1 .z1, .demo-perspective-photo .example1 .z2, .demo-perspective-photo .example1 .xInner, .demo-perspective-photo .example1 .yInner, .demo-perspective-photo .example1 .zInner {
  position: absolute;
}

.demo-perspective-photo .example1 .x1, .demo-perspective-photo .example1 .x2, .demo-perspective-photo .example1 .y1, .demo-perspective-photo .example1 .y2, .demo-perspective-photo .example1 .z1, .demo-perspective-photo .example1 .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .example1 .x {
  position: relative;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 30s linear infinite 2s;
  animation: rotateItself 30s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .example1 .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example1 .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example1 .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: translateZ(7.5px);
  -moz-transform: translateZ(7.5px);
  -ms-transform: translateZ(7.5px);
  transform: translateZ(7.5px);
}

.demo-perspective-photo .example1 .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateX(180deg) translateZ(7.5px);
  -moz-transform: rotateX(180deg) translateZ(7.5px);
  -ms-transform: rotateX(180deg) translateZ(7.5px);
  transform: rotateX(180deg) translateZ(7.5px);
}

.demo-perspective-photo .example1 .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateX(90deg) translateZ(7.5px);
  -moz-transform: rotateX(90deg) translateZ(7.5px);
  -ms-transform: rotateX(90deg) translateZ(7.5px);
  transform: rotateX(90deg) translateZ(7.5px);
}

.demo-perspective-photo .example1 .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateX(270deg) translateZ(7.5px);
  -moz-transform: rotateX(270deg) translateZ(7.5px);
  -ms-transform: rotateX(270deg) translateZ(7.5px);
  transform: rotateX(270deg) translateZ(7.5px);
}

.demo-perspective-photo .example1 .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateY(90deg) translateZ(7.5px);
  -moz-transform: rotateY(90deg) translateZ(7.5px);
  -ms-transform: rotateY(90deg) translateZ(7.5px);
  transform: rotateY(90deg) translateZ(7.5px);
}

.demo-perspective-photo .example1 .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(141, 137, 231, 0.7) 100%);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateY(270deg) translateZ(7.5px);
  -moz-transform: rotateY(270deg) translateZ(7.5px);
  -ms-transform: rotateY(270deg) translateZ(7.5px);
  transform: rotateY(270deg) translateZ(7.5px);
}

.demo-perspective-photo .example1 .x .xInner {
  border: 2px solid rgba(141, 137, 231, 0.7);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .example1 .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example1 .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(141, 137, 231, 0.7);
  box-shadow: 0 0 10px rgba(141, 137, 231, 0.7);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example2 {
  margin: -22.5px 0 0 -22.5px;
  -webkit-transform: rotateY(60deg) translateZ(400px);
  transform: rotateY(60deg) translateZ(400px);
  -webkit-animation: rotateSunFive 90s linear infinite 2s;
  animation: rotateSunFive 90s linear infinite 2s;
}

.demo-perspective-photo .example2 .x, .demo-perspective-photo .example2 .y, .demo-perspective-photo .example2 .z {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.demo-perspective-photo .example2 .x1, .demo-perspective-photo .example2 .x2, .demo-perspective-photo .example2 .y, .demo-perspective-photo .example2 .y1, .demo-perspective-photo .example2 .y2, .demo-perspective-photo .example2 .z, .demo-perspective-photo .example2 .z1, .demo-perspective-photo .example2 .z2, .demo-perspective-photo .example2 .xInner, .demo-perspective-photo .example2 .yInner, .demo-perspective-photo .example2 .zInner {
  position: absolute;
}

.demo-perspective-photo .example2 .x1, .demo-perspective-photo .example2 .x2, .demo-perspective-photo .example2 .y1, .demo-perspective-photo .example2 .y2, .demo-perspective-photo .example2 .z1, .demo-perspective-photo .example2 .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .example2 .x {
  position: relative;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 15s linear infinite 2s;
  animation: rotateItself 15s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .example2 .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example2 .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example2 .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: translateZ(11.25px);
  -moz-transform: translateZ(11.25px);
  -ms-transform: translateZ(11.25px);
  transform: translateZ(11.25px);
}

.demo-perspective-photo .example2 .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateX(180deg) translateZ(11.25px);
  -moz-transform: rotateX(180deg) translateZ(11.25px);
  -ms-transform: rotateX(180deg) translateZ(11.25px);
  transform: rotateX(180deg) translateZ(11.25px);
}

.demo-perspective-photo .example2 .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateX(90deg) translateZ(11.25px);
  -moz-transform: rotateX(90deg) translateZ(11.25px);
  -ms-transform: rotateX(90deg) translateZ(11.25px);
  transform: rotateX(90deg) translateZ(11.25px);
}

.demo-perspective-photo .example2 .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateX(270deg) translateZ(11.25px);
  -moz-transform: rotateX(270deg) translateZ(11.25px);
  -ms-transform: rotateX(270deg) translateZ(11.25px);
  transform: rotateX(270deg) translateZ(11.25px);
}

.demo-perspective-photo .example2 .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateY(90deg) translateZ(11.25px);
  -moz-transform: rotateY(90deg) translateZ(11.25px);
  -ms-transform: rotateY(90deg) translateZ(11.25px);
  transform: rotateY(90deg) translateZ(11.25px);
}

.demo-perspective-photo .example2 .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(228, 128, 24, 0.8) 100%);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateY(270deg) translateZ(11.25px);
  -moz-transform: rotateY(270deg) translateZ(11.25px);
  -ms-transform: rotateY(270deg) translateZ(11.25px);
  transform: rotateY(270deg) translateZ(11.25px);
}

.demo-perspective-photo .example2 .x .xInner {
  border: 2px solid rgba(228, 128, 24, 0.8);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .example2 .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example2 .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(228, 128, 24, 0.8);
  box-shadow: 0 0 25px rgba(228, 128, 24, 0.8);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example3 {
  margin: -27.5px 0 0 -27.5px;
  -webkit-transform: rotateY(60deg) translateZ(520px);
  transform: rotateY(60deg) translateZ(520px);
  -webkit-animation: rotateSunFour 120s linear infinite 2s;
  animation: rotateSunFour 120s linear infinite 2s;
}

.demo-perspective-photo .example3 .x, .demo-perspective-photo .example3 .y, .demo-perspective-photo .example3 .z {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.demo-perspective-photo .example3 .x1, .demo-perspective-photo .example3 .x2, .demo-perspective-photo .example3 .y, .demo-perspective-photo .example3 .y1, .demo-perspective-photo .example3 .y2, .demo-perspective-photo .example3 .z, .demo-perspective-photo .example3 .z1, .demo-perspective-photo .example3 .z2, .demo-perspective-photo .example3 .xInner, .demo-perspective-photo .example3 .yInner, .demo-perspective-photo .example3 .zInner {
  position: absolute;
}

.demo-perspective-photo .example3 .x1, .demo-perspective-photo .example3 .x2, .demo-perspective-photo .example3 .y1, .demo-perspective-photo .example3 .y2, .demo-perspective-photo .example3 .z1, .demo-perspective-photo .example3 .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .example3 .x {
  position: relative;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 30s linear infinite 2s;
  animation: rotateItself 30s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .example3 .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example3 .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example3 .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: translateZ(13.75px);
  -moz-transform: translateZ(13.75px);
  -ms-transform: translateZ(13.75px);
  transform: translateZ(13.75px);
}

.demo-perspective-photo .example3 .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateX(180deg) translateZ(13.75px);
  -moz-transform: rotateX(180deg) translateZ(13.75px);
  -ms-transform: rotateX(180deg) translateZ(13.75px);
  transform: rotateX(180deg) translateZ(13.75px);
}

.demo-perspective-photo .example3 .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateX(90deg) translateZ(13.75px);
  -moz-transform: rotateX(90deg) translateZ(13.75px);
  -ms-transform: rotateX(90deg) translateZ(13.75px);
  transform: rotateX(90deg) translateZ(13.75px);
}

.demo-perspective-photo .example3 .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateX(270deg) translateZ(13.75px);
  -moz-transform: rotateX(270deg) translateZ(13.75px);
  -ms-transform: rotateX(270deg) translateZ(13.75px);
  transform: rotateX(270deg) translateZ(13.75px);
}

.demo-perspective-photo .example3 .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateY(90deg) translateZ(13.75px);
  -moz-transform: rotateY(90deg) translateZ(13.75px);
  -ms-transform: rotateY(90deg) translateZ(13.75px);
  transform: rotateY(90deg) translateZ(13.75px);
}

.demo-perspective-photo .example3 .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(31, 107, 234, 0.8) 100%);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateY(270deg) translateZ(13.75px);
  -moz-transform: rotateY(270deg) translateZ(13.75px);
  -ms-transform: rotateY(270deg) translateZ(13.75px);
  transform: rotateY(270deg) translateZ(13.75px);
}

.demo-perspective-photo .example3 .x .xInner {
  border: 2px solid rgba(31, 107, 234, 0.8);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .example3 .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example3 .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(31, 107, 234, 0.8);
  box-shadow: 0 0 30px rgba(31, 107, 234, 0.8);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example4 {
  margin: -55px 0 0 -55px;
  -webkit-transform: rotateY(60deg) translateZ(650px);
  transform: rotateY(60deg) translateZ(650px);
  -webkit-animation: rotateSunThree 150s linear infinite 2s;
  animation: rotateSunThree 150s linear infinite 2s;
}

.demo-perspective-photo .example4 .x, .demo-perspective-photo .example4 .y, .demo-perspective-photo .example4 .z {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}

.demo-perspective-photo .example4 .x1, .demo-perspective-photo .example4 .x2, .demo-perspective-photo .example4 .y, .demo-perspective-photo .example4 .y1, .demo-perspective-photo .example4 .y2, .demo-perspective-photo .example4 .z, .demo-perspective-photo .example4 .z1, .demo-perspective-photo .example4 .z2, .demo-perspective-photo .example4 .xInner, .demo-perspective-photo .example4 .yInner, .demo-perspective-photo .example4 .zInner {
  position: absolute;
}

.demo-perspective-photo .example4 .x1, .demo-perspective-photo .example4 .x2, .demo-perspective-photo .example4 .y1, .demo-perspective-photo .example4 .y2, .demo-perspective-photo .example4 .z1, .demo-perspective-photo .example4 .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .example4 .x {
  position: relative;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 40s linear infinite 2s;
  animation: rotateItself 40s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .example4 .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example4 .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example4 .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: translateZ(27.5px);
  -moz-transform: translateZ(27.5px);
  -ms-transform: translateZ(27.5px);
  transform: translateZ(27.5px);
}

.demo-perspective-photo .example4 .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateX(180deg) translateZ(27.5px);
  -moz-transform: rotateX(180deg) translateZ(27.5px);
  -ms-transform: rotateX(180deg) translateZ(27.5px);
  transform: rotateX(180deg) translateZ(27.5px);
}

.demo-perspective-photo .example4 .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateX(90deg) translateZ(27.5px);
  -moz-transform: rotateX(90deg) translateZ(27.5px);
  -ms-transform: rotateX(90deg) translateZ(27.5px);
  transform: rotateX(90deg) translateZ(27.5px);
}

.demo-perspective-photo .example4 .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateX(270deg) translateZ(27.5px);
  -moz-transform: rotateX(270deg) translateZ(27.5px);
  -ms-transform: rotateX(270deg) translateZ(27.5px);
  transform: rotateX(270deg) translateZ(27.5px);
}

.demo-perspective-photo .example4 .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateY(90deg) translateZ(27.5px);
  -moz-transform: rotateY(90deg) translateZ(27.5px);
  -ms-transform: rotateY(90deg) translateZ(27.5px);
  transform: rotateY(90deg) translateZ(27.5px);
}

.demo-perspective-photo .example4 .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  background-image: radial-gradient(transparent 70%, rgba(245, 192, 86, 0.7) 100%);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateY(270deg) translateZ(27.5px);
  -moz-transform: rotateY(270deg) translateZ(27.5px);
  -ms-transform: rotateY(270deg) translateZ(27.5px);
  transform: rotateY(270deg) translateZ(27.5px);
}

.demo-perspective-photo .example4 .x .xInner {
  border: 2px solid rgba(245, 192, 86, 0.7);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .example4 .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example4 .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(245, 192, 86, 0.7);
  box-shadow: 0 0 20px rgba(245, 192, 86, 0.7);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example5 {
  margin: -35px 0 0 -35px;
  -webkit-transform: rotateY(60deg) translateZ(800px);
  transform: rotateY(60deg) translateZ(800px);
  -webkit-animation: rotateSunTwo 180s linear infinite 2s;
  animation: rotateSunTwo 180s linear infinite 2s;
}

.demo-perspective-photo .example5 .x, .demo-perspective-photo .example5 .y, .demo-perspective-photo .example5 .z {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.demo-perspective-photo .example5 .x1, .demo-perspective-photo .example5 .x2, .demo-perspective-photo .example5 .y, .demo-perspective-photo .example5 .y1, .demo-perspective-photo .example5 .y2, .demo-perspective-photo .example5 .z, .demo-perspective-photo .example5 .z1, .demo-perspective-photo .example5 .z2, .demo-perspective-photo .example5 .xInner, .demo-perspective-photo .example5 .yInner, .demo-perspective-photo .example5 .zInner {
  position: absolute;
}

.demo-perspective-photo .example5 .x1, .demo-perspective-photo .example5 .x2, .demo-perspective-photo .example5 .y1, .demo-perspective-photo .example5 .y2, .demo-perspective-photo .example5 .z1, .demo-perspective-photo .example5 .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .example5 .x {
  position: relative;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 12s linear infinite 2s;
  animation: rotateItself 12s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .example5 .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example5 .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example5 .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: translateZ(17.5px);
  -moz-transform: translateZ(17.5px);
  -ms-transform: translateZ(17.5px);
  transform: translateZ(17.5px);
}

.demo-perspective-photo .example5 .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateX(180deg) translateZ(17.5px);
  -moz-transform: rotateX(180deg) translateZ(17.5px);
  -ms-transform: rotateX(180deg) translateZ(17.5px);
  transform: rotateX(180deg) translateZ(17.5px);
}

.demo-perspective-photo .example5 .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateX(90deg) translateZ(17.5px);
  -moz-transform: rotateX(90deg) translateZ(17.5px);
  -ms-transform: rotateX(90deg) translateZ(17.5px);
  transform: rotateX(90deg) translateZ(17.5px);
}

.demo-perspective-photo .example5 .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateX(270deg) translateZ(17.5px);
  -moz-transform: rotateX(270deg) translateZ(17.5px);
  -ms-transform: rotateX(270deg) translateZ(17.5px);
  transform: rotateX(270deg) translateZ(17.5px);
}

.demo-perspective-photo .example5 .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateY(90deg) translateZ(17.5px);
  -moz-transform: rotateY(90deg) translateZ(17.5px);
  -ms-transform: rotateY(90deg) translateZ(17.5px);
  transform: rotateY(90deg) translateZ(17.5px);
}

.demo-perspective-photo .example5 .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  background-image: radial-gradient(transparent 70%, rgba(67, 197, 239, 0.6) 100%);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateY(270deg) translateZ(17.5px);
  -moz-transform: rotateY(270deg) translateZ(17.5px);
  -ms-transform: rotateY(270deg) translateZ(17.5px);
  transform: rotateY(270deg) translateZ(17.5px);
}

.demo-perspective-photo .example5 .x .xInner {
  border: 2px solid rgba(67, 197, 239, 0.6);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .example5 .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example5 .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(67, 197, 239, 0.6);
  box-shadow: 0 0 15px rgba(67, 197, 239, 0.6);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example6 {
  margin: -42.5px 0 0 -42.5px;
  -webkit-transform: rotateY(60deg) translateZ(950px);
  transform: rotateY(60deg) translateZ(950px);
  -webkit-animation: rotateSun 240s linear infinite 2s;
  animation: rotateSun 240s linear infinite 2s;
}

.demo-perspective-photo .example6 .x, .demo-perspective-photo .example6 .y, .demo-perspective-photo .example6 .z {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

.demo-perspective-photo .example6 .x1, .demo-perspective-photo .example6 .x2, .demo-perspective-photo .example6 .y, .demo-perspective-photo .example6 .y1, .demo-perspective-photo .example6 .y2, .demo-perspective-photo .example6 .z, .demo-perspective-photo .example6 .z1, .demo-perspective-photo .example6 .z2, .demo-perspective-photo .example6 .xInner, .demo-perspective-photo .example6 .yInner, .demo-perspective-photo .example6 .zInner {
  position: absolute;
}

.demo-perspective-photo .example6 .x1, .demo-perspective-photo .example6 .x2, .demo-perspective-photo .example6 .y1, .demo-perspective-photo .example6 .y2, .demo-perspective-photo .example6 .z1, .demo-perspective-photo .example6 .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}

.demo-perspective-photo .example6 .x {
  position: relative;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotateItself 8s linear infinite 2s;
  animation: rotateItself 8s linear infinite 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  will-change: transform;
}

.demo-perspective-photo .example6 .x .y {
  top: 0;
  left: 0;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example6 .x .z {
  top: 0;
  left: 0;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .example6 .x .x1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: translateZ(21.25px);
  -moz-transform: translateZ(21.25px);
  -ms-transform: translateZ(21.25px);
  transform: translateZ(21.25px);
}

.demo-perspective-photo .example6 .x .x2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateX(180deg) translateZ(21.25px);
  -moz-transform: rotateX(180deg) translateZ(21.25px);
  -ms-transform: rotateX(180deg) translateZ(21.25px);
  transform: rotateX(180deg) translateZ(21.25px);
}

.demo-perspective-photo .example6 .x .y1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateX(90deg) translateZ(21.25px);
  -moz-transform: rotateX(90deg) translateZ(21.25px);
  -ms-transform: rotateX(90deg) translateZ(21.25px);
  transform: rotateX(90deg) translateZ(21.25px);
}

.demo-perspective-photo .example6 .x .y2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateX(270deg) translateZ(21.25px);
  -moz-transform: rotateX(270deg) translateZ(21.25px);
  -ms-transform: rotateX(270deg) translateZ(21.25px);
  transform: rotateX(270deg) translateZ(21.25px);
}

.demo-perspective-photo .example6 .x .z1 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateY(90deg) translateZ(21.25px);
  -moz-transform: rotateY(90deg) translateZ(21.25px);
  -ms-transform: rotateY(90deg) translateZ(21.25px);
  transform: rotateY(90deg) translateZ(21.25px);
}

.demo-perspective-photo .example6 .x .z2 {
  top: 6.25%;
  left: 6.25%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  background-image: radial-gradient(transparent 70%, rgba(136, 155, 250, 0.8) 100%);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateY(270deg) translateZ(21.25px);
  -moz-transform: rotateY(270deg) translateZ(21.25px);
  -ms-transform: rotateY(270deg) translateZ(21.25px);
  transform: rotateY(270deg) translateZ(21.25px);
}

.demo-perspective-photo .example6 .x .xInner {
  border: 2px solid rgba(136, 155, 250, 0.8);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  width: 100%;
  top: 50%;
}

.demo-perspective-photo .example6 .x .yInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .example6 .x .zInner {
  height: 100%;
  left: 50%;
  border: 2px solid rgba(136, 155, 250, 0.8);
  box-shadow: 0 0 25px rgba(136, 155, 250, 0.8);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.demo-perspective-photo .circle {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, -1000px);
  -moz-transform-style: preserve-3d;
  -moz-transform: translate3d(0, 0, -1000px);
  -ms-transform-style: preserve-3d;
  -ms-transform: translate3d(0, 0, -1000px);
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 5px #fff;
}

.demo-perspective-photo .circle1 {
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .circle2 {
  width: 800px;
  height: 800px;
  margin: -400px 0 0 -400px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .circle3 {
  width: 1040px;
  height: 1040px;
  margin: -520px 0 0 -520px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .circle4 {
  width: 1300px;
  height: 1300px;
  margin: -650px 0 0 -650px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .circle5 {
  width: 1600px;
  height: 1600px;
  margin: -800px 0 0 -800px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.demo-perspective-photo .circle6 {
  width: 1900px;
  height: 1900px;
  margin: -950px 0 0 -950px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

@-webkit-keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateItself {
  0% {
    -webkit-transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg) rotateX(360deg);
  }
}

@keyframes rotateItself {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

@keyframes rotateSun {
  0% {
    transform: rotateY(60deg) translateZ(950px);
  }
  100% {
    transform: rotateY(420deg) translateZ(950px);
  }
}

@-webkit-keyframes rotateSun {
  0% {
    -webkit-transform: rotateY(60deg) translateZ(950px);
  }
  100% {
    -webkit-transform: rotateY(420deg) translateZ(950px);
  }
}

@keyframes rotateSunTwo {
  0% {
    transform: rotateY(60deg) translateZ(800px);
  }
  100% {
    transform: rotateY(420deg) translateZ(800px);
  }
}

@-webkit-keyframes rotateSunTwo {
  0% {
    -webkit-transform: rotateY(60deg) translateZ(800px);
  }
  100% {
    -webkit-transform: rotateY(420deg) translateZ(800px);
  }
}

@keyframes rotateSunThree {
  0% {
    transform: rotateY(60deg) translateZ(650px);
  }
  100% {
    transform: rotateY(420deg) translateZ(650px);
  }
}

@-webkit-keyframes rotateSunThree {
  0% {
    -webkit-transform: rotateY(60deg) translateZ(650px);
  }
  100% {
    -webkit-transform: rotateY(420deg) translateZ(650px);
  }
}

@keyframes rotateSunFour {
  0% {
    transform: rotateY(60deg) translateZ(520px);
  }
  100% {
    transform: rotateY(420deg) translateZ(520px);
  }
}

@-webkit-keyframes rotateSunFour {
  0% {
    -webkit-transform: rotateY(60deg) translateZ(520px);
  }
  100% {
    -webkit-transform: rotateY(420deg) translateZ(520px);
  }
}

@keyframes rotateSunFive {
  0% {
    transform: rotateY(60deg) translateZ(400px);
  }
  100% {
    transform: rotateY(420deg) translateZ(400px);
  }
}

@-webkit-keyframes rotateSunFive {
  0% {
    -webkit-transform: rotateY(60deg) translateZ(400px);
  }
  100% {
    -webkit-transform: rotateY(420deg) translateZ(400px);
  }
}

@keyframes rotateSunSix {
  0% {
    transform: rotateY(60deg) translateZ(300px);
  }
  100% {
    transform: rotateY(420deg) translateZ(300px);
  }
}

@-webkit-keyframes rotateSunSix {
  0% {
    -webkit-transform: rotateY(60deg) translateZ(300px);
  }
  100% {
    -webkit-transform: rotateY(420deg) translateZ(300px);
  }
}