/* Cube Moving Animation */
/* CSS OF THE LOADING PART */
/* Presentation purposes */
/* Box model */
.rubiks-loader *, .rubiks-loader *::before, .rubiks-loader *::after {
    box-sizing: border-box;
}
/* Constants */
/* Functions */
/* Inheritance basis */
.row-loading{
    justify-content: center;
    display: flex;
    text-align: center;
    flex-direction: column;
}
.rubiks-loader {
    margin: auto;
    width: 130px;
    height: 130px;
    position: relative;
    perspective: 130px;
}
/* Main */
.rubiks-loader .cube {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 0;
    transform-style: preserve-3d;
}
.rubiks-loader .cube .piece {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    backface-visibility: hidden;
    backface-visibility: -webkit-backface-visibility;
}
/* Piece Size */
.rubiks-loader .cube .piece.justanotherrow-top {
    top: 10px;
}
.rubiks-loader .cube .piece.justanotherrow-centre {
    top: 50px;
}
.rubiks-loader .cube .piece.justanotherrow-bottom {
    top: 90px;
}
.rubiks-loader .cube .piece.column-left {
    left: 10px;
}
.rubiks-loader .cube .piece.column-centre {
    left: 50px;
}
.rubiks-loader .cube .piece.column-right {
    left: 90px;
}
/* Piece Size End */
.rubiks-loader .cube .piece.column-left.justanotherrow-top {
    transform-origin: 55px 55px -55px;
}
.rubiks-loader .cube .piece.column-centre.justanotherrow-top {
    transform-origin: 15px 55px -55px;
}
.rubiks-loader .cube .piece.column-right.justanotherrow-top {
    transform-origin: -25px 55px -55px;
}
.rubiks-loader .cube .piece.column-left.justanotherrow-centre {
    transform-origin: 55px 15px -55px;
}
.rubiks-loader .cube .piece.column-centre.justanotherrow-centre {
    transform-origin: 15px 15px -55px;
}
.rubiks-loader .cube .piece.column-right.justanotherrow-centre {
    transform-origin: -25px 15px -55px;
}
.rubiks-loader .cube .piece.column-left.justanotherrow-bottom {
    transform-origin: 55px -25px -55px;
}
.rubiks-loader .cube .piece.column-centre.justanotherrow-bottom {
    transform-origin: 15px -25px -55px;
}
.rubiks-loader .cube .piece.column-right.justanotherrow-bottom {
    transform-origin: -25px -25px -55px;
}
.rubiks-loader .cube .piece.yellow {
    background-color: #f6c574;
}
.rubiks-loader .cube .piece.blue {
    background-color: #00aacf;
}
.rubiks-loader .cube .piece.green {
    background-color: #00b3a0;
}
.rubiks-loader .cube .piece.white {
    background-color: #e2e8e7;
}
.rubiks-loader .cube .piece.red {
    background-color: #fc5652;
}
.rubiks-loader .cube .piece.orange {
    background-color: #fc9f39;
}
.rubiks-loader .cube .face.back {
    transform: rotateY(180deg);
}
.rubiks-loader .cube .face.right {
    transform: rotateY(90deg);
}
.rubiks-loader .cube .face.left {
    transform: rotateY(-90deg);
}
.rubiks-loader .cube .face.up {
    transform: rotateX(90deg);
}
.rubiks-loader .cube .face.down {
    transform: rotateX(-90deg);
}
/* Animations */
/* This begins to become messy & dirty... */
.rubiks-loader .piece {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
@keyframes step-1-front-to-up {
    0% {
        transform: rotateX(0deg);
   }
    25%, 100% {
        transform: rotateX(90deg);
   }
}
.rubiks-loader .face.front.piece.column-centre {
    animation-name: step-1-front-to-up;
}
@keyframes step-1-down-to-front {
    0% {
        transform: rotateX(-90deg);
   }
    25%, 100% {
        transform: rotateX(0deg);
   }
}
.rubiks-loader .face.down.piece.column-centre {
    animation-name: step-1-down-to-front;
}
@keyframes step-2-front-to-left {
    25% {
        transform: rotateY(0deg);
   }
    50%, 100% {
        transform: rotateY(-90deg);
   }
}
.rubiks-loader .face.piece.front.justanotherrow-centre.column-left, .rubiks-loader .face.piece.down.justanotherrow-centre.column-centre, .rubiks-loader .face.piece.front.justanotherrow-centre.column-right {
    animation-name: step-2-front-to-left;
}
@keyframes step-2-right-to-front {
    25% {
        transform: rotateY(90deg);
   }
    50%, 100% {
        transform: rotateY(0deg);
   }
}
.rubiks-loader .face.right.piece.justanotherrow-centre {
    animation-name: step-2-right-to-front;
}
@keyframes step-3-front-to-down {
    50% {
        transform: rotateX(0deg);
   }
    75%, 100% {
        transform: rotateX(-90deg);
   }
}
@keyframes step-2-3-right-to-front-to-down {
    25% {
        transform: rotateY(90deg);
   }
    50% {
        transform: rotateX(0deg);
   }
    75%, 100% {
        transform: rotateX(-90deg);
   }
}
.rubiks-loader .face.piece.front.justanotherrow-top.column-left, .rubiks-loader .face.piece.front.justanotherrow-bottom.column-left {
    animation-name: step-3-front-to-down;
}
.rubiks-loader .face.piece.right.justanotherrow-centre.column-left {
    animation-name: step-2-3-right-to-front-to-down;
}
@keyframes step-3-up-to-front {
    50% {
        transform: rotateX(90deg);
   }
    75%, 100% {
        transform: rotateX(0deg);
   }
}
.rubiks-loader .face.up.piece.column-left {
    animation-name: step-3-up-to-front;
}
@keyframes step-4-front-to-right {
    75% {
        transform: rotateY(0deg);
   }
    100% {
        transform: rotateY(90deg);
   }
}
@keyframes step-1-4-down-to-front-to-right {
    0% {
        transform: rotateX(-90deg);
   }
    25% {
        transform: rotateX(0deg);
   }
    75% {
        transform: rotateY(0deg);
   }
    100% {
        transform: rotateY(90deg);
   }
}
@keyframes step-3-4-up-to-front-to-right {
    50% {
        transform: rotateX(90deg);
   }
    75% {
        transform: rotateY(0deg);
   }
    100% {
        transform: rotateY(90deg);
   }
}
.rubiks-loader .face.piece.front.justanotherrow-bottom.column-right {
    animation-name: step-4-front-to-right;
}
.rubiks-loader .face.piece.down.justanotherrow-bottom.column-centre {
    animation-name: step-1-4-down-to-front-to-right;
}
.rubiks-loader .face.piece.up.justanotherrow-bottom.column-left {
    animation-name: step-3-4-up-to-front-to-right;
}
@keyframes step-4-left-to-front {
    75% {
        transform: rotateY(-90deg);
   }
    100% {
        transform: rotateY(0deg);
   }
}
.row-loading{
    display: flex;
    justify-content: center;
}
.rubiks-loader .face.left.piece.justanotherrow-bottom {
    animation-name: step-4-left-to-front;
}