.remix_loading {
	background: #000;
	position: fixed;
	z-index: 9999999;
	height: 100%;
	width: 100%;
	display: block;
}
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	-webkit-perspective: 100px;
	perspective: 100px;
	transform-type: preserve-3d;
	-webkit-animation: loader 6s cubic-bezier(0,0,1,1) infinite;
	animation: loader 6s cubic-bezier(0,0,1,1) infinite;
}
@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotateX(30deg) rotateZ(0deg);
		transform: rotateX(30deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(30deg) rotateZ(-360deg);
		transform: rotateX(30deg) rotateZ(-360deg);
	}
}
@keyframes loader {
	0% {
		-webkit-transform: rotateX(30deg) rotateZ(0deg);
		transform: rotateX(30deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(30deg) rotateZ(-360deg);
		transform: rotateX(30deg) rotateZ(-360deg);
	}
}
.dott {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: 20px;
	height: 20px;
	margin-top: -90px;
	margin-left: -10px;
	border-radius: 10px;
	background-color: #1e3f57;
	transform-type: preserve-3d;
	-webkit-transform-origin: 50% 90px;
	-ms-transform-origin: 50% 90px;
	transform-origin: 50% 90px;
	-webkit-transform: rotateZ(30deg);
	transform: rotateZ(30deg);
	-webkit-animation: dot1 1.5s cubic-bezier(.6,0,.4,1) infinite;
	animation: dot1 1.5s cubic-bezier(.6,0,.4,1) infinite;
}
.dott:nth-child(2) {
	-webkit-transform: rotateZ(15deg);
	transform: rotateZ(15deg);
	-webkit-animation-name: dot2;
	animation-name: dot2;
	-webkit-animation-delay: 150ms;
	animation-delay: 150ms;
	background-color: #2d556d;
}
.dott:nth-child(3) {
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-animation-name: dot3;
	animation-name: dot3;
	-webkit-animation-delay: 300ms;
	animation-delay: 300ms;
	background-color: #447891;
}
.dott:nth-child(4) {
	-webkit-transform: rotateZ(-15deg);
	transform: rotateZ(-15deg);
	-webkit-animation-name: dot4;
	animation-name: dot4;
	-webkit-animation-delay: 450ms;
	animation-delay: 450ms;
	background-color: #5998b2;
}
.dott:nth-child(5) {
	-webkit-transform: rotateZ(-30deg);
	transform: rotateZ(-30deg);
	-webkit-animation-name: dot5;
	animation-name: dot5;
	-webkit-animation-delay: 600ms;
	animation-delay: 600ms;
	background-color: #6bb2cd;
}
@-webkit-keyframes dot1 {
	0% {
		-webkit-transform: rotateZ(30deg) rotateX(10deg);
		transform: rotateZ(30deg) rotateX(10deg);
	}
	95%, 100% {
		-webkit-transform: rotateZ(390deg) rotateX(10deg);
		transform: rotateZ(390deg) rotateX(10deg);
	}
}
@keyframes dot1 {
	0% {
		-webkit-transform: rotateZ(30deg) rotateX(10deg);
		transform: rotateZ(30deg) rotateX(10deg);
	}
	95%, 100% {
		-webkit-transform: rotateZ(390deg) rotateX(10deg);
		transform: rotateZ(390deg) rotateX(10deg);
	}
}
@-webkit-keyframes dot2 {
  0% {
    -webkit-transform: rotateZ(15deg) rotateX(10deg);
            transform: rotateZ(15deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(375deg) rotateX(10deg);
            transform: rotateZ(375deg) rotateX(10deg);
  }
}

@keyframes dot2 {
  0% {
    -webkit-transform: rotateZ(15deg) rotateX(10deg);
            transform: rotateZ(15deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(375deg) rotateX(10deg);
            transform: rotateZ(375deg) rotateX(10deg);
  }
}

@-webkit-keyframes dot3 {
  0% {
    -webkit-transform: rotateZ(0deg) rotateX(10deg);
            transform: rotateZ(0deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(360deg) rotateX(10deg);
            transform: rotateZ(360deg) rotateX(10deg);
  }
}

@keyframes dot3 {
  0% {
    -webkit-transform: rotateZ(0deg) rotateX(10deg);
            transform: rotateZ(0deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(360deg) rotateX(10deg);
            transform: rotateZ(360deg) rotateX(10deg);
  }
}

@-webkit-keyframes dot4 {
  0% {
    -webkit-transform: rotateZ(-15deg) rotateX(10deg);
            transform: rotateZ(-15deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(345deg) rotateX(10deg);
            transform: rotateZ(345deg) rotateX(10deg);
  }
}

@keyframes dot4 {
  0% {
    -webkit-transform: rotateZ(-15deg) rotateX(10deg);
            transform: rotateZ(-15deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(345deg) rotateX(10deg);
            transform: rotateZ(345deg) rotateX(10deg);
  }
}

@-webkit-keyframes dot5 {
  0% {
    -webkit-transform: rotateZ(-30deg) rotateX(10deg);
            transform: rotateZ(-30deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(330deg) rotateX(10deg);
            transform: rotateZ(330deg) rotateX(10deg);
  }
}

@keyframes dot5 {
  0% {
    -webkit-transform: rotateZ(-30deg) rotateX(10deg);
            transform: rotateZ(-30deg) rotateX(10deg);
  }
  95%, 100% {
    -webkit-transform: rotateZ(330deg) rotateX(10deg);
            transform: rotateZ(330deg) rotateX(10deg);
  }
}

.dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -50px;
  width: 100%;
  height: 100px;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
}

.dot-gfx {
  background: white;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  top: -15px;
  left: -15px;
  position: absolute;
}

@-webkit-keyframes dot-anim-1 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  35% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  55.0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}

@keyframes dot-anim-1 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  35% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  55.0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}
.dot:nth-child(1) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dot-anim-1 5.5s ease-in-out infinite;
          animation: dot-anim-1 5.5s ease-in-out infinite;
}

@-webkit-keyframes dot-anim-2 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  40% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  60% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}

@keyframes dot-anim-2 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  40% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  60% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}
.dot:nth-child(2) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dot-anim-2 5.5s ease-in-out infinite;
          animation: dot-anim-2 5.5s ease-in-out infinite;
}

@-webkit-keyframes dot-anim-3 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  45% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  65% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}

@keyframes dot-anim-3 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  45% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  65% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}
.dot:nth-child(3) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dot-anim-3 5.5s ease-in-out infinite;
          animation: dot-anim-3 5.5s ease-in-out infinite;
}

@-webkit-keyframes dot-anim-4 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}

@keyframes dot-anim-4 {
  0% {
    -webkit-transform: translate(-100vw, 0);
            transform: translate(-100vw, 0);
  }

  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100vw, 0);
            transform: translate(100vw, 0);
  }
}
.dot:nth-child(4) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dot-anim-4 5.5s ease-in-out infinite;
          animation: dot-anim-4 5.5s ease-in-out infinite;
}


#bars {
    height: 100px;
    left: 50%;
    margin: -30px 0 0 -20px;
    position: absolute;
    top: 47%;
    width: 300px;
}

.bar {
   background: #fff;
    bottom: 1px;
    height: 3px;
    position: absolute;
    width: 4px;      
    -webkit-animation: sound 0ms -800ms linear infinite alternate;      
            animation: sound 0ms -800ms linear infinite alternate;
}

@-webkit-keyframes sound {
    0% {
       opacity: .35;
        height: 3px; 
    }
    100% {
        opacity: 1;       
        height: 50px;        
    }
}

@keyframes sound {
    0% {
       opacity: .35;
        height: 3px; 
    }
    100% {
        opacity: 1;       
        height: 50px;        
    }
}

.bar:nth-child(1)  { left: 0px; -webkit-animation-duration: 474ms; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 10px; -webkit-animation-duration: 433ms; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 20px; -webkit-animation-duration: 407ms; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 30px; -webkit-animation-duration: 458ms; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 40px; -webkit-animation-duration: 400ms; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 50px; -webkit-animation-duration: 427ms; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 60px; -webkit-animation-duration: 441ms; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 70px; -webkit-animation-duration: 419ms; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 80px; -webkit-animation-duration: 487ms; animation-duration: 487ms; }


.dottts {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 48%;
	top: 47%;
	width: 110px;
	height: 110px;
}
.dottt {
	-webkit-transform-origin: 50% -20px;
	-ms-transform-origin: 50% -20px;
	transform-origin: 50% -20px;
	position: absolute;
	top: 75px;
	left: 45px;
}
.dottt-gfx {
	background: #fff;
	width: 20px;
	height: 20px;
	border-radius: 100%;
}
@-webkit-keyframes dottt-anim-1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  60% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}

@keyframes dottt-anim-1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  60% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}
.dottt:nth-child(1) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dottt-anim-1 4.5s ease-in-out infinite;
          animation: dottt-anim-1 4.5s ease-in-out infinite;
}

@-webkit-keyframes dottt-anim-2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  70% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}

@keyframes dottt-anim-2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  70% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}
.dottt:nth-child(2) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dottt-anim-2 4.5s ease-in-out infinite;
          animation: dottt-anim-2 4.5s ease-in-out infinite;
}

@-webkit-keyframes dottt-anim-3 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  80% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}

@keyframes dottt-anim-3 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  80% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}
.dottt:nth-child(3) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dottt-anim-3 4.5s ease-in-out infinite;
          animation: dottt-anim-3 4.5s ease-in-out infinite;
}

@-webkit-keyframes dottt-anim-4 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}

@keyframes dottt-anim-4 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}
.dottt:nth-child(4) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dottt-anim-4 4.5s ease-in-out infinite;
          animation: dottt-anim-4 4.5s ease-in-out infinite;
}

@-webkit-keyframes dottt-anim-5 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}

@keyframes dottt-anim-5 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}
.dottt:nth-child(5) {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: dottt-anim-5 4.5s ease-in-out infinite;
          animation: dottt-anim-5 4.5s ease-in-out infinite;
}

.rap {
  -webkit-animation: 10s spin linear infinite;
          animation: 10s spin linear infinite;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  top: calc(45% - 0px);
  left: calc(50% - 0px);
}

.gon {
  width: 100px;
  height: 100px;
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 50px);
}
.gon:nth-child(1) {
  background-color: rgba(64, 0, 255, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(36deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(36deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.gon:nth-child(1):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(36deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(36deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(2) {
  background-color: rgba(127, 0, 255, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(72deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(72deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.gon:nth-child(2):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(72deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(72deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(3) {
  background-color: rgba(191, 0, 255, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(108deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(108deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.gon:nth-child(3):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(108deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(108deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(4) {
  background-color: rgba(255, 0, 255, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(144deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(144deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.gon:nth-child(4):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(144deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(144deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(5) {
  background-color: rgba(255, 0, 191, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(180deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(180deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.gon:nth-child(5):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(180deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(180deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(6) {
  background-color: rgba(255, 0, 128, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(216deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(216deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.gon:nth-child(6):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(216deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(216deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(7) {
  background-color: rgba(255, 0, 64, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(252deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(252deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.gon:nth-child(7):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(252deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(252deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(8) {
  background-color: rgba(255, 0, 0, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(288deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(288deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.gon:nth-child(8):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(288deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(288deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(9) {
  background-color: rgba(255, 64, 0, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(324deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(324deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.gon:nth-child(9):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(324deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(324deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}
.gon:nth-child(10) {
  background-color: rgba(255, 128, 0, 0.8);
  -webkit-transform: rotateX(-50deg) rotateY(360deg) translateZ(69px);
          transform: rotateX(-50deg) rotateY(360deg) translateZ(69px);
  -webkit-animation: bg 1s linear infinite;
          animation: bg 1s linear infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.gon:nth-child(10):nth-child(even) {
  background: rgba(255, 255, 0, 0.4);
  -webkit-transform: rotateX(-50deg) rotateY(360deg) translateZ(-16px);
          transform: rotateX(-50deg) rotateY(360deg) translateZ(-16px);
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateX(1turn) rotateY(1turn);
            transform: rotateX(1turn) rotateY(1turn);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotateX(1turn) rotateY(1turn);
            transform: rotateX(1turn) rotateY(1turn);
  }
}
@-webkit-keyframes bg {
  50% {
    background: transparent;
  }
}
@keyframes bg {
  50% {
    background: transparent;
  }
}

#loader {
  -webkit-animation: loader 5s cubic-bezier(.8,0,.2,1) infinite;
          animation: loader 5s cubic-bezier(.8,0,.2,1) infinite;
  height: 40px;
  width: 41px;
  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
}
@-webkit-keyframes loader {
  90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
@keyframes loader {
  90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
#top {
  -webkit-animation: top 5s linear infinite;
          animation: top 5s linear infinite;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  height: 0px;
  width: 1px;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
@-webkit-keyframes top {
  90% { -webkit-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(0); transform: scale(0);}
}
@keyframes top {
  90% { -webkit-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(0); transform: scale(0);}
}
#bottom {
  -webkit-animation: bottom 5s linear infinite;
          animation: bottom 5s linear infinite;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
  border-left: 20px solid transparent;
  height: 0px;
  width: 1px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
@-webkit-keyframes bottom {
  10% { -webkit-transform: scale(0); transform: scale(0); }
  90% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes bottom {
  10% { -webkit-transform: scale(0); transform: scale(0); }
  90% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
#line {
  -webkit-animation: line 5s linear infinite;
          animation: line 5s linear infinite;
  border-left: 1px dotted #fff;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 20px;
  left: 20px;
}
@-webkit-keyframes line {
  10% { height: 20px; }
  100% { height: 20px; }
}
@keyframes line {
  10% { height: 20px; }
  100% { height: 20px; }
}

.signal {
    border:3px solid #fff;
    border-radius:30px;
    height:30px;
    left:50%;
    margin:-15px 0 0 -15px;
    opacity:0;
    position:absolute;
    top:50%;
    width:30px;
 
    -webkit-animation: pulsate 1s ease-out;
 
            animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
}

@-webkit-keyframes pulsate {
    0% {
      -webkit-transform:scale(.1);
              transform:scale(.1);
      opacity: 0.0;
    }
    50% {
      opacity:1;
    }
    100% {
      -webkit-transform:scale(1.2);
              transform:scale(1.2);
      opacity:0;
    }
}

@keyframes pulsate {
	0% {
		-webkit-transform:scale(.1);
		transform:scale(.1);
		opacity: 0.0;
	}
	50% {
		opacity:1;
	}
	100% {
		-webkit-transform:scale(1.2);
		transform:scale(1.2);
		opacity:0;
	}
}
#loader10 {
	position: fixed;
	top: 47%;
	left: 48%;
	width: 70px;
	height: 70px;
	border-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-animation: rotate10 3s ease-in-out infinite;
	animation: rotate10 3s ease-in-out infinite;
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg)
}
@-webkit-keyframes rotate10 {
	0% { border-width: 20px; }
	25% { border-width: 3px; }
	50% { 
		-webkit-transform: rotate(90deg); 
		transform: rotate(90deg); 
		border-width: 20px;
	}
	75% { border-width: 3px;}
	100% { border-width: 20px;}
}
@keyframes rotate10 {
  0% { border-width: 20px; }
  25% { border-width: 3px; }
  50% { 
    -webkit-transform: rotate(90deg); 
            transform: rotate(90deg); 
    border-width: 20px;
  }
  75% { border-width: 3px;}
  100% { border-width: 20px;}
}