.container{width:100%}.demo-perspective-photo{background-color:#000;width:100%;height:800px;position:absolute;top:0}.demo-perspective-photo #contentContainer{perspective:2000px;width:100%;height:800px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;position:relative;transform:translate(0,0)}.demo-perspective-photo #carouselContainer{cursor:pointer;width:128px;height:72px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;z-index:100;margin-top:-36px;margin-left:-64px;position:absolute;top:50%;left:50%;transform:translateZ(-1000px)rotateX(-15deg)}.demo-perspective-photo .mod-sun{box-sizing:border-box;width:200px;height:200px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;margin:-100px 0 0 -100px;position:absolute;transform:translate(0,0)}.demo-perspective-photo .mod-sun .x,.demo-perspective-photo .mod-sun .y,.demo-perspective-photo .mod-sun .z{border-radius:50%;width:200px;height:200px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .mod-sun .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;animation:20s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .y{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .z{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .x1{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:6.25%;left:6.25%;transform:translateZ(50px);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .x2{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(50px);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .y1{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(50px);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .y2{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(50px);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .z1{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(50px);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .z2{background-image:radial-gradient(#0000 70%,#ff4f00e6 100%);border:2px solid #ff4f00e6;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(50px);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .xInner{border:2px solid #ff4f00e6;width:100%;top:50%;box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .yInner{border:2px solid #ff4f00e6;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .mod-sun .x .zInner{border:2px solid #ff4f00e6;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 100px #ff4f00e6}.demo-perspective-photo .example{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;position:absolute;transform:translate(0,0)}.demo-perspective-photo .example1{margin:-15px 0 0 -15px;animation:60s linear 2s infinite rotateSunSix;transform:rotateY(60deg)translateZ(300px)}.demo-perspective-photo .example1 .x,.demo-perspective-photo .example1 .y,.demo-perspective-photo .example1 .z{border-radius:50%;width:30px;height:30px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .example1 .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;animation:30s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .y{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .z{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .x1{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:6.25%;left:6.25%;transform:translateZ(7.5px);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .x2{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(7.5px);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .y1{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(7.5px);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .y2{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(7.5px);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .z1{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(7.5px);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .z2{background-image:radial-gradient(#0000 70%,#8d89e7b3 100%);border:2px solid #8d89e7b3;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(7.5px);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .xInner{border:2px solid #8d89e7b3;width:100%;top:50%;box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .yInner{border:2px solid #8d89e7b3;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example1 .x .zInner{border:2px solid #8d89e7b3;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 10px #8d89e7b3}.demo-perspective-photo .example2{margin:-22.5px 0 0 -22.5px;animation:90s linear 2s infinite rotateSunFive;transform:rotateY(60deg)translateZ(400px)}.demo-perspective-photo .example2 .x,.demo-perspective-photo .example2 .y,.demo-perspective-photo .example2 .z{border-radius:50%;width:45px;height:45px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .example2 .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;animation:15s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .y{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .z{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .x1{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:6.25%;left:6.25%;transform:translateZ(11.25px);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .x2{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(11.25px);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .y1{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(11.25px);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .y2{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(11.25px);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .z1{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(11.25px);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .z2{background-image:radial-gradient(#0000 70%,#e48018cc 100%);border:2px solid #e48018cc;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(11.25px);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .xInner{border:2px solid #e48018cc;width:100%;top:50%;box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .yInner{border:2px solid #e48018cc;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example2 .x .zInner{border:2px solid #e48018cc;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 25px #e48018cc}.demo-perspective-photo .example3{margin:-27.5px 0 0 -27.5px;animation:120s linear 2s infinite rotateSunFour;transform:rotateY(60deg)translateZ(520px)}.demo-perspective-photo .example3 .x,.demo-perspective-photo .example3 .y,.demo-perspective-photo .example3 .z{border-radius:50%;width:55px;height:55px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .example3 .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;animation:30s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .y{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .z{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .x1{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:6.25%;left:6.25%;transform:translateZ(13.75px);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .x2{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(13.75px);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .y1{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(13.75px);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .y2{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(13.75px);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .z1{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(13.75px);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .z2{background-image:radial-gradient(#0000 70%,#1f6beacc 100%);border:2px solid #1f6beacc;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(13.75px);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .xInner{border:2px solid #1f6beacc;width:100%;top:50%;box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .yInner{border:2px solid #1f6beacc;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example3 .x .zInner{border:2px solid #1f6beacc;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 30px #1f6beacc}.demo-perspective-photo .example4{margin:-55px 0 0 -55px;animation:150s linear 2s infinite rotateSunThree;transform:rotateY(60deg)translateZ(650px)}.demo-perspective-photo .example4 .x,.demo-perspective-photo .example4 .y,.demo-perspective-photo .example4 .z{border-radius:50%;width:110px;height:110px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .example4 .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;animation:40s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .y{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .z{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .x1{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:6.25%;left:6.25%;transform:translateZ(27.5px);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .x2{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(27.5px);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .y1{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(27.5px);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .y2{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(27.5px);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .z1{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(27.5px);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .z2{background-image:radial-gradient(#0000 70%,#f5c056b3 100%);border:2px solid #f5c056b3;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(27.5px);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .xInner{border:2px solid #f5c056b3;width:100%;top:50%;box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .yInner{border:2px solid #f5c056b3;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example4 .x .zInner{border:2px solid #f5c056b3;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 20px #f5c056b3}.demo-perspective-photo .example5{margin:-35px 0 0 -35px;animation:180s linear 2s infinite rotateSunTwo;transform:rotateY(60deg)translateZ(800px)}.demo-perspective-photo .example5 .x,.demo-perspective-photo .example5 .y,.demo-perspective-photo .example5 .z{border-radius:50%;width:70px;height:70px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .example5 .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;animation:12s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .y{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .z{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .x1{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:6.25%;left:6.25%;transform:translateZ(17.5px);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .x2{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(17.5px);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .y1{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(17.5px);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .y2{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(17.5px);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .z1{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(17.5px);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .z2{background-image:radial-gradient(#0000 70%,#43c5ef99 100%);border:2px solid #43c5ef99;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(17.5px);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .xInner{border:2px solid #43c5ef99;width:100%;top:50%;box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .yInner{border:2px solid #43c5ef99;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example5 .x .zInner{border:2px solid #43c5ef99;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 15px #43c5ef99}.demo-perspective-photo .example6{margin:-42.5px 0 0 -42.5px;animation:240s linear 2s infinite rotateSun;transform:rotateY(60deg)translateZ(950px)}.demo-perspective-photo .example6 .x,.demo-perspective-photo .example6 .y,.demo-perspective-photo .example6 .z{border-radius:50%;width:85px;height:85px}.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{border-radius:50%;width:87.5%;height:87.5%}.demo-perspective-photo .example6 .x{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;animation:8s linear 2s infinite forwards rotateItself;position:relative;box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .y{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:0;left:0;transform:rotateX(90deg);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .z{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:0;left:0;transform:rotateY(90deg);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .x1{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:6.25%;left:6.25%;transform:translateZ(21.25px);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .x2{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:6.25%;left:6.25%;transform:rotateX(180deg)translateZ(21.25px);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .y1{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:6.25%;left:6.25%;transform:rotateX(90deg)translateZ(21.25px);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .y2{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:6.25%;left:6.25%;transform:rotateX(270deg)translateZ(21.25px);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .z1{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:6.25%;left:6.25%;transform:rotateY(90deg)translateZ(21.25px);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .z2{background-image:radial-gradient(#0000 70%,#889bfacc 100%);border:2px solid #889bfacc;top:6.25%;left:6.25%;transform:rotateY(270deg)translateZ(21.25px);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .xInner{border:2px solid #889bfacc;width:100%;top:50%;box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .yInner{border:2px solid #889bfacc;height:100%;left:50%;transform:rotateX(90deg);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .example6 .x .zInner{border:2px solid #889bfacc;height:100%;left:50%;transform:rotateY(90deg);box-shadow:0 0 25px #889bfacc}.demo-perspective-photo .circle{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;border:1px solid #fff;border-radius:50%;position:absolute;top:0;left:0;-webkit-transform:translateZ(-1000px);-moz-transform:translateZ(-1000px);-ms-transform:translateZ(-1000px);box-shadow:0 0 5px #fff}.demo-perspective-photo .circle1{width:600px;height:600px;margin:-300px 0 0 -300px;transform:rotateX(90deg)}.demo-perspective-photo .circle2{width:800px;height:800px;margin:-400px 0 0 -400px;transform:rotateX(90deg)}.demo-perspective-photo .circle3{width:1040px;height:1040px;margin:-520px 0 0 -520px;transform:rotateX(90deg)}.demo-perspective-photo .circle4{width:1300px;height:1300px;margin:-650px 0 0 -650px;transform:rotateX(90deg)}.demo-perspective-photo .circle5{width:1600px;height:1600px;margin:-800px 0 0 -800px;transform:rotateX(90deg)}.demo-perspective-photo .circle6{width:1900px;height:1900px;margin:-950px 0 0 -950px;transform:rotateX(90deg)}@keyframes photoRotate{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@-webkit-keyframes rotateItself{0%{-webkit-transform:rotateY(0)rotateX(0)}to{-webkit-transform:rotateY(360deg)rotateX(360deg)}}@keyframes rotateItself{0%{transform:rotateY(0)rotateX(0)}to{transform:rotateY(360deg)rotateX(360deg)}}@keyframes rotateSun{0%{transform:rotateY(60deg)translateZ(950px)}to{transform:rotateY(420deg)translateZ(950px)}}@-webkit-keyframes rotateSun{0%{-webkit-transform:rotateY(60deg)translateZ(950px)}to{-webkit-transform:rotateY(420deg)translateZ(950px)}}@keyframes rotateSunTwo{0%{transform:rotateY(60deg)translateZ(800px)}to{transform:rotateY(420deg)translateZ(800px)}}@-webkit-keyframes rotateSunTwo{0%{-webkit-transform:rotateY(60deg)translateZ(800px)}to{-webkit-transform:rotateY(420deg)translateZ(800px)}}@keyframes rotateSunThree{0%{transform:rotateY(60deg)translateZ(650px)}to{transform:rotateY(420deg)translateZ(650px)}}@-webkit-keyframes rotateSunThree{0%{-webkit-transform:rotateY(60deg)translateZ(650px)}to{-webkit-transform:rotateY(420deg)translateZ(650px)}}@keyframes rotateSunFour{0%{transform:rotateY(60deg)translateZ(520px)}to{transform:rotateY(420deg)translateZ(520px)}}@-webkit-keyframes rotateSunFour{0%{-webkit-transform:rotateY(60deg)translateZ(520px)}to{-webkit-transform:rotateY(420deg)translateZ(520px)}}@keyframes rotateSunFive{0%{transform:rotateY(60deg)translateZ(400px)}to{transform:rotateY(420deg)translateZ(400px)}}@-webkit-keyframes rotateSunFive{0%{-webkit-transform:rotateY(60deg)translateZ(400px)}to{-webkit-transform:rotateY(420deg)translateZ(400px)}}@keyframes rotateSunSix{0%{transform:rotateY(60deg)translateZ(300px)}to{transform:rotateY(420deg)translateZ(300px)}}@-webkit-keyframes rotateSunSix{0%{-webkit-transform:rotateY(60deg)translateZ(300px)}to{-webkit-transform:rotateY(420deg)translateZ(300px)}}