.container {
  width: 100%;
}

.demo-cube {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: #efefef;
  zoom: 2;
}

.demo-cube .cones-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 30%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateY(35deg);
  transform: rotateY(35deg);
  -webkit-animation: slowRotate 6s ease-in-out infinite 2s;
  animation: slowRotate 6s ease-in-out infinite 2s;
}

.demo-cube .cones-inner > li {
  position: absolute;
  top: 0;
  z-index: 10;
  border-left: 28.8675px solid transparent;
  border-right: 28.8675px solid transparent;
}

.demo-cube .cones-inner .front {
  border-bottom: 50px solid rgba(80, 80, 80, 0.7);
  -webkit-transform: rotate3d(-1, 1.732, 0, 70.5deg);
  transform: rotate3d(-1, 1.732, 0, 70.5deg);
  -webkit-transform-origin: 25% 50%;
  transform-origin: 25% 50%;
}

.demo-cube .cones-inner .left {
  border-bottom: 50px solid rgba(120, 120, 120, 0.7);
  -webkit-transform: rotate3d(1, 1.732, 0, -70.5deg);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
  -webkit-transform-origin: 75% 50%;
  transform-origin: 75% 50%;
}

.demo-cube .cones-inner .right {
  border-bottom: 50px solid rgba(160, 160, 160, 0.7);
  -webkit-transform: rotate3d(1, 0, 0, 70.5deg);
  transform: rotate3d(1, 0, 0, 70.5deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.demo-cube .cones-inner .bottom {
  border-bottom: 50px solid rgba(200, 200, 200, 0.7);
}

.demo-cube .cube-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
  transform: rotateX(-33.5deg) rotateY(45deg);
  -webkit-animation: fastspin 6s ease-in-out infinite 2s;
  animation: fastspin 6s ease-in-out infinite 2s;
}

.demo-cube .cube-inner > li {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.3) 100%);
}

.demo-cube .cube-inner > li:before {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.demo-cube .cube-inner .top {
  -webkit-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}

.demo-cube .cube-inner .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(25px);
  transform: rotateX(-90deg) translateZ(25px);
}

.demo-cube .cube-inner .front {
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
}

.demo-cube .cube-inner .back {
  -webkit-transform: rotateX(-180deg) translateZ(25px);
  transform: rotateX(-180deg) translateZ(25px);
}

.demo-cube .cube-inner .left {
  -webkit-transform: rotateY(-90deg) translateZ(25px);
  transform: rotateY(-90deg) translateZ(25px);
}

.demo-cube .cube-inner .right {
  -webkit-transform: rotateY(90deg) translateZ(25px);
  transform: rotateY(90deg) translateZ(25px);
}

.demo-cube .sphere-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 70%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateX(-15deg) rotateY(70deg);
  transform: rotateX(-15deg) rotateY(70deg);
  -webkit-animation: ballRotate 6s linear infinite 2s;
  animation: ballRotate 6s linear infinite 2s;
}

.demo-cube .sphere-inner > li {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.3) 100%);
}

.demo-cube .sphere-inner .a {
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}

.demo-cube .sphere-inner .b {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.demo-cube .sphere-inner .c {
  -webkit-transform: rotateY(225deg);
  transform: rotateY(225deg);
}

.demo-cube .sphere-inner .c {
  -webkit-transform: rotateY(315deg);
  transform: rotateY(315deg);
}

.demo-perspective-photo {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 200px;
  background-color: #fff;
  zoom: 2;
}

.demo-perspective-photo #stage {
  width: 100%;
  height: 200px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  transition: top 0.5s;
  position: relative;
}

.demo-perspective-photo #container {
  position: absolute;
  width: 64px;
  height: 36px;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -18px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: photoRotate 18s ease-in-out infinite 2s;
  animation: photoRotate 18s ease-in-out infinite 2s;
}

.demo-perspective-photo .piece {
  width: 128px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -moz-transition: opacity 1s, -moz-transform 1s;
  transition: opacity 1s, transform 1s;
  position: absolute;
  bottom: 0;
}

.demo-perspective-photo .example {
  width: 64px;
  height: 36px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -moz-transition: opacity 1s, -moz-transform 1s;
  transition: opacity 1s, transform 1s;
  position: absolute;
  bottom: 0;
}

.demo-perspective-photo .example:nth-child(1) {
  -webkit-transform: rotateY(0deg) translateZ(98px);
  transform: rotateY(0deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(2) {
  -webkit-transform: rotateY(60deg) translateZ(98px);
  transform: rotateY(60deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(3) {
  -webkit-transform: rotateY(120deg) translateZ(98px);
  transform: rotateY(120deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(4) {
  -webkit-transform: rotateY(180deg) translateZ(98px);
  transform: rotateY(180deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(5) {
  -webkit-transform: rotateY(240deg) translateZ(98px);
  transform: rotateY(240deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(6) {
  -webkit-transform: rotateY(300deg) translateZ(98px);
  transform: rotateY(300deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-music {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 400px;
  background-color: #efefef;
  zoom: 2;
}

.demo-music .music {
  width: 80px;
  height: 50px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-40px, -25px);
  transform: translate(-40px, -25px);
  position: absolute;
}

.demo-music #waves {
  width: 80px;
  height: 50px;
  position: absolute;
  top: 12px;
  left: 12px;
}

.demo-music #waves li {
  position: relative;
  float: left;
  height: 100%;
  width: 12%;
  overflow: hidden;
  margin-right: 1px;
}

.demo-music #waves li span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 100%;
  width: 100px;
  background: radial-gradient(transparent 50%, rgba(255, 162, 162, 0.9) 100%);
}

.demo-music #waves .li1 span {
  animation: waves 0.6s linear 0s infinite alternate;
  -webkit-animation: waves 0.6s linear 0s infinite alternate;
}

.demo-music #waves .li2 span {
  animation: waves 0.9s linear 0s infinite alternate;
  -webkit-animation: waves 0.9s linear 0s infinite alternate;
}

.demo-music #waves .li3 span {
  animation: waves 1s linear 0s infinite alternate;
  -webkit-animation: waves 1s linear 0s infinite alternate;
}

.demo-music #waves .li4 span {
  animation: waves 0.8s linear 0s infinite alternate;
  -webkit-animation: waves 0.8s linear 0s infinite alternate;
}

.demo-music #waves .li5 span {
  animation: waves 0.7s linear 0s infinite alternate;
  -webkit-animation: waves 0.7s linear 0s infinite alternate;
}

.demo-music #waves .li6 span {
  animation: waves 0.5s linear 0s infinite alternate;
  -webkit-animation: waves 0.5s linear 0s infinite alternate;
}

.demo-loading {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 600px;
  background-color: #fff;
  zoom: 2;
}

.demo-loading .demo6 {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-12.5px, -12.5px);
  transform: translate(-12.5px, -12.5px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-loading .demo6-x {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 2px solid #2196F3;
  border-top-color: transparent;
  border-bottom-color: transparent;
  -webkit-animation: "aniSix-x" 1s ease-in-out 0.2s infinite;
  animation: "aniSix-x" 1s ease-in-out 0.2s infinite;
}

.demo-loading .demo6-y {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #2196F3;
  -webkit-animation: "aniSix-y" 1s ease-in-out 0.2s infinite;
  animation: "aniSix-y" 1s ease-in-out 0.2s infinite;
}

.demo-loading .demo8 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  -webkit-transform: translate(-12.5px, -12.5px);
  transform: translate(-12.5px, -12.5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-loading .demo8-x {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.9) 100%);
  -webkit-animation: "aniTwo" 1s ease 0s infinite;
  animation: "aniTwo" 1s ease 0s infinite;
}

.demo-loading .demo8-y {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.8) 100%);
  -webkit-animation: "aniTwo" 1s ease 0.2s infinite;
  animation: "aniTwo" 1s ease 0.2s infinite;
}

.demo-loading .demo8-z {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.7) 100%);
  -webkit-animation: "aniTwo" 1s ease 0.3s infinite;
  animation: "aniTwo" 1s ease 0.3s infinite;
}

.demo-loading .demo8-m {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.6) 100%);
  -webkit-animation: "aniTwo" 1s ease 0.4s infinite;
  animation: "aniTwo" 1s ease 0.4s infinite;
}

.demo-loading .demo10 {
  position: absolute;
  top: 50%;
  left: 70%;
  -webkit-transform: translate(-22.5px, -22.5px);
  transform: translate(-22.5px, -22.5px);
  width: 45px !important;
  height: 45px !important;
  padding-top: 10px;
}

.demo-loading .demo10 > div {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  margin-bottom: 5px;
  border-radius: 100%;
  background-color: #2196F3;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  float: left;
}

.demo-loading .demo10-a, .demo-loading .demo10-f, .demo-loading .demo10-h {
  -webkit-animation: "aniTen-e" 1s linear 0s infinite;
  animation: "aniTen-e" 1s linear 0s infinite;
}

.demo-loading .demo10-b, .demo-loading .demo10-d, .demo-loading .demo10-i {
  -webkit-animation: "aniTen-e" 1s linear 0.15s infinite;
  animation: "aniTen-e" 1s linear 0.15s infinite;
}

.demo-loading .demo10-c, .demo-loading .demo10-e, .demo-loading .demo10-g {
  -webkit-animation: "aniTen-e" 1s linear 0.3s infinite;
  animation: "aniTen-e" 1s linear 0.3s infinite;
}

@-webkit-keyframes slowRotate {
  0% {
    -webkit-transform: rotateY(35deg);
    transform: rotateY(35deg);
  }
  40%, to {
    -webkit-transform: rotateY(-315deg);
    transform: rotateY(-315deg);
  }
}

@keyframes slowRotate {
  0% {
    -webkit-transform: rotateY(35deg);
    transform: rotateY(35deg);
  }
  100% {
    -webkit-transform: rotateY(395deg);
    transform: rotateY(395deg);
  }
}

@-webkit-keyframes fastspin {
  0% {
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  40%, to {
    -webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

@keyframes fastspin {
  0% {
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  40%, to {
    -webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

@-webkit-keyframes ballRotate {
  0% {
    -webkit-transform: rotateX(-15deg) rotateY(70deg);
    transform: rotateX(-15deg) rotateY(70deg);
  }
  100% {
    -webkit-transform: rotateX(-15deg) rotateY(430deg);
    transform: rotateX(-15deg) rotateY(430deg);
  }
}

@keyframes ballRotate {
  0% {
    -webkit-transform: rotateX(-15deg) rotateY(70deg);
    transform: rotateX(-15deg) rotateY(70deg);
  }
  100% {
    -webkit-transform: rotateX(-15deg) rotateY(430deg);
    transform: rotateX(-15deg) rotateY(430deg);
  }
}

@-webkit-keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  16.7% {
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
  }
  33.3% {
    -webkit-transform: rotateY(120deg);
    transform: rotateY(120deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  66.7% {
    -webkit-transform: rotateY(240deg);
    transform: rotateY(240deg);
  }
  83.3% {
    -webkit-transform: rotateY(300deg);
    transform: rotateY(300deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  16.7% {
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
  }
  33.3% {
    -webkit-transform: rotateY(120deg);
    transform: rotateY(120deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  66.7% {
    -webkit-transform: rotateY(240deg);
    transform: rotateY(240deg);
  }
  83.3% {
    -webkit-transform: rotateY(300deg);
    transform: rotateY(300deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}

@keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}

@-webkit-keyframes aniSix-x {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes aniSix-x {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes aniSix-y {
  0% {
    -webkit-transform: scale(0.1);
  }
  50% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.1);
  }
}

@keyframes aniSix-y {
  0% {
    transform: scale(0.1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.1);
  }
}

@-webkit-keyframes aniTwo {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2);
    opacity: 0.2;
  }
}

@keyframes aniTwo {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.2;
  }
}

@-webkit-keyframes aniTen-e {
  0% {
    opacity: 0.1;
    -webkit-transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0.4);
  }
}

@keyframes aniTen-e {
  0% {
    opacity: 0.1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(0.4);
  }
}

.demo-cube-test {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 800px;
  background-color: #fff;
  zoom: 2;
}

.demo-cube-test .cube-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
  transform: rotateX(-33.5deg) rotateY(45deg);
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-perspective: 100px;
  perspective: 100px;
}

.demo-cube-test .cube-inner > li {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  float: left;
}

.demo-cube-test .cube-inner > li:before {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.demo-cube-test .cube-inner .top {
  background-color: rgba(255, 0, 0, 0.8);
  -webkit-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}

.demo-cube-test .cube-inner .bottom {
  background-color: rgba(255, 255, 0, 0.8);
  -webkit-transform: rotateX(-90deg) translateZ(25px);
  transform: rotateX(-90deg) translateZ(25px);
}

.demo-cube-test .cube-inner .front {
  background-color: rgba(0, 128, 0, 0.8);
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
}

.demo-cube-test .cube-inner .back {
  background-color: rgba(255, 152, 0, 0.8);
  -webkit-transform: rotateX(-180deg) translateZ(25px);
  transform: rotateX(-180deg) translateZ(25px);
}

.demo-cube-test .cube-inner .left {
  background-color: rgba(103, 58, 183, 0.8);
  -webkit-transform: rotateY(-90deg) translateZ(25px);
  transform: rotateY(-90deg) translateZ(25px);
}

.demo-cube-test .cube-inner .right {
  background-color: rgba(33, 150, 243, 0.8);
  -webkit-transform: rotateY(90deg) translateZ(25px);
  transform: rotateY(90deg) translateZ(25px);
}
