.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;}
}