@import url('../basic.css');

.folding-cube_preloader-template {
    width: 40px;
    height: 40px;
    position: relative;
    transform: rotateZ(45deg);
}

.folding-cube_preloader-template div {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1);
}

.folding-cube_preloader-template div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3498db;
    animation: folding-cube_preloader_animation 2.4s infinite linear both;
    transform-origin: 100% 100%;
}

.folding-cube_preloader-template div:nth-child(2) { transform: scale(1.1) rotateZ(90deg); }
.folding-cube_preloader-template div:nth-child(3) { transform: scale(1.1) rotateZ(270deg); }
.folding-cube_preloader-template div:nth-child(4) { transform: scale(1.1) rotateZ(180deg); }

.folding-cube_preloader-template div:nth-child(2):before { animation-delay: 0.3s; }
.folding-cube_preloader-template div:nth-child(3):before { animation-delay: 0.6s; }
.folding-cube_preloader-template div:nth-child(4):before { animation-delay: 0.9s; }

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