/* SPINNERS */


/* 01 Usage:
    <div class="pongo-spinner Pongo-spinner-rotating-logo"></div>
 */

.Pongo-spinner-rotating-logo.pongo-spinner {
    content: url('../../../default/img/icon_pongo.png');
    width: 90px;
    height: 110px;
    background-color: transparent;
    margin: 0 auto;
    -webkit-animation: rotatePlane 1.2s infinite ease-in-out;
    animation: rotatePlane 1.2s infinite ease-in-out;
}

@-webkit-keyframes 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 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);
    }
}


/*
 *  02 Usage:
 *    <div class="Pongo-spinner Pongo-spinner-gridCube">
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *      <div class="pongo-cube"></div>
 *    </div>
 *
 */

.Pongo-spinner-gridCube {
    /*
   * Spinner positions
   * 1 2 3 4 5
   * 6 7 8 9 10
   * 11 12 13 14 15
   * 16 17 18 19 20
   * 21 22 23 24 25
   */
}

    .Pongo-spinner-gridCube.Pongo-spinner {
        width: 40px;
        height: 45px;
        margin: 0 auto;
    }

    .Pongo-spinner-gridCube .pongo-cube {
        width: 20%;
        height: 20%;
        /* content: url(../Img_test/Icon_Pongo.png); */
        float: left;
        -webkit-animation: pongo-cubeGridScaleDelay 1.3s infinite ease-in-out;
        animation: pongo-cubeGridScaleDelay 1.3s infinite ease-in-out;
    }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(1) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(2) {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(3) {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(4) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(5) {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(6) {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(7) {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
            background-color: #b0b0b0;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(8) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            background-color: none;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(9) {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(10) {
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(11) {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(12) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(13) {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            background-color: none;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(14) {
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(15) {
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(16) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(17) {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(18) {
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
            background-color: #a20161;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(19) {
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
            background-color: #a20161;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(20) {
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(21) {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            background-color: #f0358c;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(22) {
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(23) {
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(24) {
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
            background-color: #d9d9d9;
        }

        .Pongo-spinner-gridCube .pongo-cube:nth-child(25) {
            -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
            background-color: #d9d9d9;
        }

@-webkit-keyframes pongo-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 pongo-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);
    }
}


/*
 *  03 Usage:
 *    <div class="pongo-spinner pongo-spinner-loading-cubes">
 *      <div class="pongo-cube1"></div>
 *      <div class="pongo-cube2"></div>
 *    </div>
 *
 */

.pongo-spinner-loading-cubes.pongo-spinner {
    margin: 0 auto;
    width: 32px;
    height: 32px;
    position: relative;
}

.pongo-spinner-loading-cubes .pongo-cube1,
.pongo-spinner-loading-cubes .pongo-cube2,
.pongo-spinner-loading-cubes .pongo-cube3,
.pongo-spinner-loading-cubes .pongo-cube4 {
    content: url(../Img_test/Icon_Pongo.png);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: pongo-loadingCubeMove 2s infinite ease-in-out;
    animation: pongo-loadingCubeMove 2s infinite ease-in-out;
}

.pongo-spinner-loading-cubes .pongo-cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.pongo-spinner-loading-cubes .pongo-cube3 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.pongo-spinner-loading-cubes .pongo-cube4 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

@-webkit-keyframes pongo-loadingCubeMove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        /* Hack to make FF rotate in the right direction */
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
        transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

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

@keyframes pongo-loadingCubeMove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        /* Hack to make FF rotate in the right direction */
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
        transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

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


/*
 *  04 Usage:
 *    <div class="pink-spinner pink-spinner-fading-circle">
 *      <div class="pink-circle1 pink-circle"></div>
 *      <div class="pink-circle2 pink-circle"></div>
 *      <div class="pink-circle3 pink-circle"></div>
 *      <div class="pink-circle4 pink-circle"></div>
 *      <div class="pink-circle5 pink-circle"></div>
 *      <div class="pink-circle6 pink-circle"></div>
 *      <div class="pink-circle7 pink-circle"></div>
 *      <div class="pink-circle8 pink-circle"></div>
 *      <div class="pink-circle9 pink-circle"></div>
 *      <div class="pink-circle10 pink-circle"></div>
 *      <div class="pink-circle11 pink-circle"></div>
 *      <div class="pink-circle12 pink-circle"></div>
 *    </div>
 *
 */

.pink-spinner-fading-circle.pink-spinner {
    margin: 0 auto;
    width: 22px;
    height: 22px;
    position: relative;
}

.pink-spinner-fading-circle .pink-circle {
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 0;
}

    .pink-spinner-fading-circle .pink-circle:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 18%;
        height: 18%;
        background-color: #f0358c;
        border-radius: 100%;
        -webkit-animation: pink-circleFadeDelay 1.2s infinite ease-in-out;
        animation: pink-circleFadeDelay 1.2s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

.pink-spinner-fading-circle .pink-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.pink-spinner-fading-circle .pink-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.pink-spinner-fading-circle .pink-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.pink-spinner-fading-circle .pink-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.pink-spinner-fading-circle .pink-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.pink-spinner-fading-circle .pink-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.pink-spinner-fading-circle .pink-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.pink-spinner-fading-circle .pink-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.pink-spinner-fading-circle .pink-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.pink-spinner-fading-circle .pink-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.pink-spinner-fading-circle .pink-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.pink-spinner-fading-circle .pink-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.pink-spinner-fading-circle .pink-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.pink-spinner-fading-circle .pink-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.pink-spinner-fading-circle .pink-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.pink-spinner-fading-circle .pink-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.pink-spinner-fading-circle .pink-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.pink-spinner-fading-circle .pink-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.pink-spinner-fading-circle .pink-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.pink-spinner-fading-circle .pink-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.pink-spinner-fading-circle .pink-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.pink-spinner-fading-circle .pink-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes pink-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

@keyframes pink-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}


/*
 *  05 Usage:
 *     <div class="pink-spinner pink-spinner-wave">
 *        <div class="pink-rect1"></div>
 *        <div class="pink-rect2"></div>
 *        <div class="pink-rect3"></div>
 *        <div class="pink-rect1"></div>
 *        <div class="pink-rect4"></div>
 *        <div class="pink-rect5"></div>
 *        <div class="pink-rect1"></div>
 *      </div>
 */

.pink-spinner-wave.pink-spinner {
    margin: 0 auto;
    width: 60px;
    height: 30px;
    text-align: center;
    font-size: 10px;
}

.pink-spinner-wave div {
    background-color: #f0358c;
    height: 30px;
    width: 5px;
    display: inline-block;
    border-radius: 5px;
    -webkit-animation: pink-waveStretchDelay 1.2s infinite ease-in-out;
    animation: pink-waveStretchDelay 1.2s infinite ease-in-out;
}

.pink-spinner-wave .pink-rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.pink-spinner-wave .pink-rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.pink-spinner-wave .pink-rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.pink-spinner-wave .pink-rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

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

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

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

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}


/*
 * 06 Usage:
 *    <div class="pongo-spinner pongo-spinner-double-bounce">
 *      <div class="pongo-double-bounce1"></div>
 *      <div class="pongo-double-bounce2"></div>
 *    </div>
 *
 */

.pongo-spinner-double-bounce.pongo-spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 0 auto;
}

.pongo-spinner-double-bounce .pongo-double-bounce1,
.pongo-spinner-double-bounce .pongo-double-bounce2 {
    content: url(../Img_test/Icon_Pongo.png);
    width: 90%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: pongo-doubleBounce 2s infinite ease-in-out;
    animation: pongo-doubleBounce 2s infinite ease-in-out;
}

.pongo-spinner-double-bounce .pongo-double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

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

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

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

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}