.activeFullFront {
    visibility: visible !important;
    top: 0%;
    left: 0%;
    transform: scale(1);
    opacity: 1;
    z-index: 4;
}

.hiddenInTheBack {
    opacity: 0;
    top: 0%;
    left: 0%;
    transform: scale(0);
    z-index: -1;
    visibility: hidden !important;
}

.topLeftWindow {
    display: flex !important;
    opacity: 1;
    top: -25%;
    left: -25%;
    transform: scale(0.48);
}

.topRightWindow {
    display: flex !important;
    opacity: 1;
    top: -25%;
    left: 25%;
    transform: scale(0.48);
}

.bottomLeftWindow {
    display: flex !important;
    opacity: 1;
    top: 25%;
    left: -25%;
    transform: scale(0.48);
}

.bottomRightWindow {
    display: flex !important;
    opacity: 1;
    top: 25%;
    left: 25%;
    transform: scale(0.48);
}


/* ****** cube ******** */
.leftCubicalSide {
    display: flex !important;
    opacity: 1;
    top: 0%;
    left: -25%;
    transform: scale(0.5) rotateY(-20deg);
    z-index: 3;
}

.rightCubicalSide {
    display: flex !important;
    opacity: 1;
    top: 0%;
    left: 25%;
    transform: scale(0.5) rotateY(20deg);
    z-index: 3;
}

.backLeftCubicalSide {
    display: flex !important;
    opacity: 0.3;
    top: 0%;
    left: -12.5%;
    transform: scale(0.25) rotateY(12.5deg);
    z-index: 0;
}

.backRightCubicalSide {
    display: flex !important;
    opacity: 0.3;
    top: 0%;
    left: 12.5%;
    transform: scale(0.25) rotateY(-12.5deg);
    z-index: 0;
}