.sk-rotating-plane { width: 30px; height: 30px; background-color: #ccc; margin: 40px auto; -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; animation: sk-rotatePlane 1.2s infinite ease-in-out; }

@-webkit-keyframes sk-rotatePlane {
    0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}

@keyframes sk-rotatePlane {
    0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
.sk-double-bounce { width: 30px; height: 30px; position: relative; margin: 40px auto; }
.sk-double-bounce .sk-child { width: 100%; height: 100%; border-radius: 50%; background-color: #ccc; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; animation: sk-doubleBounce 2s infinite ease-in-out; }
.sk-double-bounce .sk-double-bounce2 { -webkit-animation-delay: -1s; animation-delay: -1s; }

@-webkit-keyframes sk-doubleBounce {
    0%,100% { -webkit-transform: scale(0); transform: scale(0); }
    50% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes sk-doubleBounce {
    0%,100% { -webkit-transform: scale(0); transform: scale(0); }
    50% { -webkit-transform: scale(1); transform: scale(1); }
}
.sk-wave { margin: 40px auto; width: 37.5px; height: 30px; text-align: center; font-size: 10px; }
.sk-wave .sk-rect { background-color: #ccc; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
.sk-wave .sk-rect1 { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }
.sk-wave .sk-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-wave .sk-rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; }
.sk-wave .sk-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-wave .sk-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-waveStretchDelay {
    0%,40%,100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); }
    20% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}

@keyframes sk-waveStretchDelay {
    0%,40%,100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); }
    20% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
.sk-wandering-cubes { margin: 40px auto; width: 30px; height: 30px; position: relative; }
.sk-wandering-cubes .sk-cube { background-color: #ccc; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; }
.sk-wandering-cubes .sk-cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

@-webkit-keyframes sk-wanderingCube {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); transform: translateX(30px) rotate(-90deg) scale(0.5); }
    50% { -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); transform: translateX(30px) translateY(30px) rotate(-179deg); }
    50.1% { -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); transform: translateX(30px) translateY(30px) rotate(-180deg); }
    75% { -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}

@keyframes sk-wanderingCube {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); transform: translateX(30px) rotate(-90deg) scale(0.5); }
    50% { -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); transform: translateX(30px) translateY(30px) rotate(-179deg); }
    50.1% { -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); transform: translateX(30px) translateY(30px) rotate(-180deg); }
    75% { -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
.sk-spinner-pulse { width: 30px; height: 30px; margin: 40px auto; background-color: #ccc; border-radius: 100%; -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; animation: sk-pulseScaleOut 1s infinite ease-in-out; }

@-webkit-keyframes sk-pulseScaleOut {
    0% { -webkit-transform: scale(0); transform: scale(0); }
    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}

@keyframes sk-pulseScaleOut {
    0% { -webkit-transform: scale(0); transform: scale(0); }
    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}
.sk-chasing-dots { margin: 40px auto; width: 30px; height: 30px; position: relative; text-align: center; -webkit-animation: sk-chasingDotsRotate 2s infinite linear; animation: sk-chasingDotsRotate 2s infinite linear; }
.sk-chasing-dots .sk-child { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #ccc; border-radius: 100%; -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; animation: sk-chasingDotsBounce 2s infinite ease-in-out; }
.sk-chasing-dots .sk-dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1s; animation-delay: -1s; }

@-webkit-keyframes sk-chasingDotsRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes sk-chasingDotsRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@-webkit-keyframes sk-chasingDotsBounce {
    0%,100% { -webkit-transform: scale(0); transform: scale(0); }
    50% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes sk-chasingDotsBounce {
    0%,100% { -webkit-transform: scale(0); transform: scale(0); }
    50% { -webkit-transform: scale(1); transform: scale(1); }
}
.sk-three-bounce { margin: 40px auto; width: 60px; text-align: center; }
.sk-three-bounce .sk-child { width: 15px; height: 15px; background-color: #ccc; border-radius: 100%; display: inline-block; -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
.sk-three-bounce .sk-bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.sk-three-bounce .sk-bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

@-webkit-keyframes sk-three-bounce {
    0%,80%,100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes sk-three-bounce {
    0%,80%,100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); }
}
.sk-circle { margin: 40px auto; width: 30px; height: 30px; position: relative; }
.sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.sk-circle .sk-child::before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #ccc; border-radius: 100%; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
.sk-circle .sk-circle2 { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.sk-circle .sk-circle3 { -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.sk-circle .sk-circle4 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.sk-circle .sk-circle5 { -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.sk-circle .sk-circle6 { -webkit-transform: rotate(150deg); transform: rotate(150deg); }
.sk-circle .sk-circle7 { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.sk-circle .sk-circle8 { -webkit-transform: rotate(210deg); transform: rotate(210deg); }
.sk-circle .sk-circle9 { -webkit-transform: rotate(240deg); transform: rotate(240deg); }
.sk-circle .sk-circle10 { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.sk-circle .sk-circle11 { -webkit-transform: rotate(300deg); transform: rotate(300deg); }
.sk-circle .sk-circle12 { -webkit-transform: rotate(330deg); transform: rotate(330deg); }
.sk-circle .sk-circle2::before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-circle .sk-circle3::before { -webkit-animation-delay: -1s; animation-delay: -1s; }
.sk-circle .sk-circle4::before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-circle .sk-circle5::before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.sk-circle .sk-circle6::before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.sk-circle .sk-circle7::before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.sk-circle .sk-circle8::before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.sk-circle .sk-circle9::before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.sk-circle .sk-circle10::before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.sk-circle .sk-circle11::before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.sk-circle .sk-circle12::before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
    0%,80%,100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes sk-circleBounceDelay {
    0%,80%,100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); }
}
.sk-cube-grid { width: 30px; height: 30px; margin: 40px auto; }
.sk-cube-grid .sk-cube { width: 33.33%; height: 33.33%; background-color: #ccc; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
.sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }
.sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%,70%,100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    35% { -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); }
}

@keyframes sk-cubeGridScaleDelay {
    0%,70%,100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    35% { -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); }
}
.sk-fading-circle { margin: 40px auto; width: 30px; height: 30px; position: relative; }
.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.sk-fading-circle .sk-circle::before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #ccc; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
.sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); transform: rotate(150deg); }
.sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); transform: rotate(210deg); }
.sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); transform: rotate(240deg); }
.sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); transform: rotate(300deg); }
.sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); transform: rotate(330deg); }
.sk-fading-circle .sk-circle2::before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3::before { -webkit-animation-delay: -1s; animation-delay: -1s; }
.sk-fading-circle .sk-circle4::before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-fading-circle .sk-circle5::before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.sk-fading-circle .sk-circle6::before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.sk-fading-circle .sk-circle7::before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.sk-fading-circle .sk-circle8::before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.sk-fading-circle .sk-circle9::before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.sk-fading-circle .sk-circle10::before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.sk-fading-circle .sk-circle11::before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.sk-fading-circle .sk-circle12::before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay {
    0%,39%,100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%,39%,100% { opacity: 0; }
    40% { opacity: 1; }
}
.sk-folding-cube { margin: 40px auto; width: 30px; height: 30px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); transform: scale(1.1); }
.sk-folding-cube .sk-cube::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); }
.sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); }
.sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); }
.sk-folding-cube .sk-cube2::before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-folding-cube .sk-cube3::before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.sk-folding-cube .sk-cube4::before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }

@-webkit-keyframes sk-foldCubeAngle {
    0%,10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; }
    25%,75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; }
    90%,100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

@keyframes sk-foldCubeAngle {
    0%,10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; }
    25%,75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; }
    90%,100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}
.sk-wave { width: 40px; }
.sk-fading-circle .sk-circle { margin-top: 0; margin-bottom: 0; }