#background {
  z-index: 100;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: block;
}

.cylinder {
  -webkit-perspective: 300px;
  perspective: 300px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ring {
  -webkit-transform-style: preserve-3d;
  -webkit-animation: infinite rotate 240s linear;
  transform-style: preserve-3d;
  animation: infinite rotate 240s linear;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
}

.poly {
  width: 240px;
  height: 200%;
  background-size: calc(240px * 16) calc(200% / 2);
  background-position: right top;
  background-image: url("../assets/background/pano.jpg");
  background-repeat: no-repeat;
  -webkit-background-size: calc(240px * 16) calc(200% / 2);
  background-size: calc(240px * 16) calc(200% / 2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.ring-0 .poly:nth-child(1) {
  background-color: rgb(255, 255, 255);
  background-position: 0px center;
  -webkit-transform: rotateY(0deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(0deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(2) {
  background-color: rgb(255, 255, 255);
  background-position: -240px center;
  -webkit-transform: rotateY(-22.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-22.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(3) {
  background-color: rgb(255, 255, 255);
  background-position: -480px center;
  -webkit-transform: rotateY(-45deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-45deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(4) {
  background-color: rgb(255, 255, 255);
  background-position: -720px center;
  -webkit-transform: rotateY(-67.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-67.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(5) {
  background-color: rgb(255, 255, 255);
  background-position: -960px center;
  -webkit-transform: rotateY(-90deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-90deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(6) {
  background-color: rgb(255, 255, 255);
  background-position: -1200px center;
  -webkit-transform: rotateY(-112.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-112.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(7) {
  background-color: rgb(255, 255, 255);
  background-position: -1440px center;
  -webkit-transform: rotateY(-135deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-135deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(8) {
  background-color: rgb(255, 255, 255);
  background-position: -1680px center;
  -webkit-transform: rotateY(-157.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-157.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(9) {
  background-color: rgb(255, 255, 255);
  background-position: -1920px center;
  -webkit-transform: rotateY(-180deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-180deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(10) {
  background-color: rgb(255, 255, 255);
  background-position: -2160px center;
  -webkit-transform: rotateY(-202.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-202.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(11) {
  background-color: rgb(255, 255, 255);
  background-position: -2400px center;
  -webkit-transform: rotateY(-225deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-225deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(12) {
  background-color: rgb(255, 255, 255);
  background-position: -2640px center;
  -webkit-transform: rotateY(-247.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-247.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(13) {
  background-color: rgb(255, 255, 255);
  background-position: -2880px center;
  -webkit-transform: rotateY(-270deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-270deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(14) {
  background-color: rgb(255, 255, 255);
  background-position: -3120px center;
  -webkit-transform: rotateY(-292.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-292.5deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(15) {
  background-color: rgb(255, 255, 255);
  background-position: -3360px center;
  -webkit-transform: rotateY(-315deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-315deg) translateZ(600px) rotateY(180deg);
}

.ring-0 .poly:nth-child(16) {
  background-color: rgb(255, 255, 255);
  background-position: -3600px center;
  -webkit-transform: rotateY(-337.5deg) translateZ(600px) rotateY(180deg);
  transform: rotateY(-337.5deg) translateZ(600px) rotateY(180deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: scale(3) translateZ(0) rotateY(0deg);
  }
  100% {
    -webkit-transform: scale(3) translateZ(0) rotateY(360deg);
  }
}
.blurred, .blurred_start {
  opacity: 1;
}

.blurred {
  -webkit-animation: blurin 1s;
  animation: blurin 1s;
}

.clear {
  -webkit-animation: blurout 1s;
  -webkit-filter: blur(0px);
  animation: blurout 1s;
  filter: blur(0px);
}

@keyframes blurin {
  from {
    filter: blur(0px);
  }
  to {
    filter: blur(10px);
  }
}
@keyframes blurout {
  from {
    filter: blur(15px);
  }
  to {
    filter: blur(10px);
  }
}