.level-diamond-container {
    transform: scale(0.29);
    right: 30px;
    top: 17px;
    position: absolute;
    width: 0;
    transition: all 2s;
}

.static-diamond {
    transform: scale(0.23);
    left: 14px;
    top: 13px;
    width: 5px;
    z-index: 2;
    position: absolute;
}

.static-diamond-success {
    transform: scale(0.4);
    left: 10px;
    top: 27px;
    width: 5px;
    z-index: 2;
    position: absolute;
}

.static-diamond-gift {
    transform: scale(0.3);
    top: 12px;
    position: relative;
}

.mini-diamond-container {
    transform: scale(0.83);
    left: 150%;
    top: -60px;
    position: absolute;
    width: 0;
    transition: all 2s;
}

.game-diamond-container {
    transform: scale(0.23);
    left: -60px;
    top: -20px;
    position: absolute;
    width: 140px;
    transition: all 2s;
}

.game-diamond-container.fly-off {
    transform: scale(1.23);
    top: -300px;
    opacity: 0;
    width: 500px;
}

.small-diamond-container {
    transform: scale(0.23);
    width: 33px;
    margin: 3px;
    transition: all 2s;
}

.mini-diamond-container.animate-diamond {
    transform: scale(0.23);
    left: 14px;
    top: 13px;
    width: 5px;
    z-index: 2;
}

.shine-diamond {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    z-index: 999;
    box-shadow: 0 0 50px #fff;
    animation: shine-diamond-neon 11s ease-out infinite;
    z-index: 1000;
    position: absolute;
    display: inline;
    left: 2px;
    top: 5px;
    z-index: 4;
}

.wrap-diamond {
    /* transform-origin:0 0; */
    transform-style: preserve-3d;
    overflow: visible;
}

.triangle {
    position: absolute;
    left: -100px;
    top: -30px;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid purple;
    /* border-bottom: 100px solid #33AFFF;  */
    animation: lighting 12s infinite linear;
}

/** Bottom Down **/
.triangle.bottom {
    transform-origin: 50% 0%;
}

.triangle.bottom.face-1 {
    animation-delay: -2500ms;
    transform: translateY(90px) rotateY(0deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-2 {
    animation-delay: -3500ms;
    transform: translateY(90px) rotateY(45deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-3 {
    animation-delay: -4500ms;
    transform: translateY(90px) rotateY(90deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-4 {
    animation-delay: -5500ms;
    transform: translateY(90px) rotateY(135deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-5 {
    animation-delay: -6500ms;
    transform: translateY(90px) rotateY(180deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-6 {
    animation-delay: -7500ms;
    transform: translateY(90px) rotateY(225deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-7 {
    animation-delay: -8500ms;
    transform: translateY(90px) rotateY(270deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

.triangle.bottom.face-8 {
    animation-delay: -9500ms;
    transform: translateY(90px) rotateY(315deg) rotateX(35deg) scaleX(.24) scaleY(-1);
}

/** Middle Down **/
.triangle.middle-bottom {
    transform-origin: 50% 0%;
}

.triangle.middle-bottom.face-1 {
    animation-delay: -3500ms;
    transform: rotateY(0deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-2 {
    animation-delay: -4500ms;
    transform: rotateY(45deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-3 {
    animation-delay: -5500ms;
    transform: rotateY(90deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-4 {
    animation-delay: -6500ms;
    transform: rotateY(135deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-5 {
    animation-delay: -7500ms;
    transform: rotateY(180deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-6 {
    animation-delay: -8500ms;
    transform: rotateY(225deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-7 {
    animation-delay: -9500ms;
    transform: rotateY(270deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

.triangle.middle-bottom.face-8 {
    animation-delay: -10500ms;
    transform: rotateY(315deg) translateY(-11px) translateZ(-34px) rotateX(-50deg) scaleX(.24) scaleY(.3);
}

/** Middle Up **/
.triangle.middle-top {
    transform-origin: 50% 100%;
}

.triangle.middle-top.face-1 {
    animation-delay: -2500ms;
    transform: rotateY(22.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-2 {
    animation-delay: -3500ms;
    transform: rotateY(67.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-3 {
    animation-delay: -4500ms;
    transform: rotateY(112.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-4 {
    animation-delay: -5500ms;
    transform: rotateY(157.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-5 {
    animation-delay: -6500ms;
    transform: rotateY(202.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-6 {
    animation-delay: -7500ms;
    transform: rotateY(247.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-7 {
    animation-delay: -8500ms;
    transform: rotateY(292.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

.triangle.middle-top.face-8 {
    animation-delay: -9500ms;
    transform: rotateY(337.5deg) translateY(-111px) translateZ(-31px) rotateX(-58deg) scaleX(.13) scaleY(-.36);
}

/** Top Up **/
.triangle.up {
    animation: lighting-lighter 12s infinite linear;
    transform-origin: 50% 0%;
}

.triangle.up.face-1 {
    animation-delay: -3500ms;
    transform: rotateY(22.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-2 {
    animation-delay: -4500ms;
    transform: rotateY(67.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-3 {
    animation-delay: -5500ms;
    transform: rotateY(112.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-4 {
    animation-delay: -6500ms;
    transform: rotateY(157.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-5 {
    animation-delay: -7500ms;
    transform: rotateY(202.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-6 {
    animation-delay: -8500ms;
    transform: rotateY(247.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-7 {
    animation-delay: -9500ms;
    transform: rotateY(292.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

.triangle.up.face-8 {
    animation-delay: -10500ms;
    transform: rotateY(337.5deg) translateY(-22px) translateZ(0px) rotateX(-70deg) scaleX(.13) scaleY(.33);
}

/** ANIMATIONS **/

.rotor-x {
    transform: rotateX(-22deg);
    /* animation: spinX 6s infinite linear; */
}

.rotor-y {
    animation: spinY 12s infinite linear;
}

.game-diamond-container .rotor-y {
    animation: spinY 5s infinite linear;
}

.rotor-z {
    /* animation: spinZ 18s infinite linear; */
}

@keyframes spinX {
    from {
        transform: rotateX(0);
    }

    to {
        transform: rotateX(360deg);
    }
}

@keyframes spinY {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes spinZ {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(360deg);
    }
}

/* @keyframes lighting {
  0% {   border-bottom-color:#33AFFF; }
  50% {  border-bottom-color:#BBE8FF; }
  100% { border-bottom-color:#33AFFF; }
}
@keyframes lighting-lighter {
  0% {   border-bottom-color:#72C8FF; }
  50% {  border-bottom-color:#99EAFF; }
  100% { border-bottom-color:#72C8FF; }
} */
@keyframes lighting {
    0% {
        border-bottom-color: #c933ff;
    }

    50% {
        border-bottom-color: #edbbff;
    }

    100% {
        border-bottom-color: #b133ff;
    }
}

@keyframes lighting-lighter {
    0% {
        border-bottom-color: #e372ff;
    }

    50% {
        border-bottom-color: #f899ff;
    }

    100% {
        border-bottom-color: #de72ff;
    }
}

/* .triangle.middle-top.face-4:after{
  width: 5px;
  height: 5;
} */

@keyframes shine-diamond-neon {
    0% {
        box-shadow: none;
        background-color: unset;
    }
    75% {
        box-shadow: none;
        background-color: unset;
    }

    77.5%,
    97.5% {
        background-color: #fff;
        box-shadow: 0 0 3px #fff,
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
            /* 0 0 42px #0fa,
                0 0 82px #0fa,
                0 0 92px #0fa, */ 0 0 102px #0fa,
        0 0 151px #0fa;
    }

    80%,
    95% {
        background-color: #fff;
        box-shadow: 0 0 3px #fff,
        0 0 7px #fff,
        0 0 10px #fff,
            /* 0 0 21px #fff,
                  0 0 42px #0fa, */ 0 0 82px #0fa,
        0 0 92px #0fa,
        0 0 102px #0fa,
        0 0 151px #0fa;

    }

    82.5%,
    87.5%,
    92.5% {
        background-color: #fff;
        box-shadow: 0 0 3px #fff,
        0 0 7px #fff,
        0 0 10px #fff,
            /* 0 0 21px #fff, */ 0 0 42px #0fa,
            /* 0 0 82px #0fa, */ 0 0 92px #0fa,
            /* 0 0 102px #0fa, */ 0 0 151px #0fa;

    }

    85%,
    90% {
        background-color: #fff;
        box-shadow: 0 0 3px #fff,
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #0fa,
        0 0 82px #0fa,
        0 0 92px #0fa,
        0 0 102px #0fa,
        0 0 151px #0fa;

    }
}