#loader_cube .cube {
    /* master scale of the cube */
    --cubeScale: 0.6;
    /* size should be set in the loader_container.css file, but can be overwritten here */
    /* --size: 33vmin; */

    position: relative;
    width: calc(var(--size));
    height: calc(var(--size));
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    
    /* transform: translate(-50%, -50%) rotateX(70deg) rotateZ(70deg); */

    /* animate rotating cube */
    animation: loader_cube_rotate 6s infinite ease-in-out;
    -webkit-animation: loader_cube_rotate 6s infinite ease-in-out;
    -o-animation: loader_cube_rotate 6s infinite ease-in-out;

}

#loader_cube .face {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* wireframe of the cube, size relative to master size */
    border: calc(var(--size) * 0.02) solid #413e3f;
    /* blur smoothens edges and fixes a severe bug on firefox */
    filter: blur(calc(var(--size) * 0.0025));
    -webkit-filter: blur(calc(var(--size) * 0.0025));
    /* prevent spacing between the faces of the cube */
    box-sizing: border-box;
}


#loader_cube .face:nth-of-type(1) {
    /*top*/
    transform: translate(-50%, -50%) translateZ(calc(var(--size) * 0.375));
}

#loader_cube .face:nth-of-type(2) {
    /*bot*/
    transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.375));
}

#loader_cube .face:nth-of-type(3) {
    /*left*/
    width: 75%;
    transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.5)) rotateY(90deg);
}

#loader_cube .face:nth-of-type(4) {
    /*right*/
    width: 75%;
    transform: translate(-50%, -50%) translateX(calc(var(--size) * 0.5)) rotateY(-90deg);
}

#loader_cube .face:nth-of-type(5) {
    /*front*/
    height: 75%;
    transform: translate(-50%, -50%) translateY(calc(var(--size) * 0.5)) rotateX(-90deg);
}

#loader_cube .face:nth-of-type(6) {
    /* back */
    height: 75%;
    transform: translate(-50%, -50%) translateY(calc(var(--size) * -0.5)) rotateX(-90deg);
}

#loader_cube #scan_vertical {
    background-color: rgba(0, 193, 242, 0.5);
    border: none;
    /* transform overwritten by animation */
    transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.374));
    /* animate moving up and down */
    animation: loader_cube_scan_v 6s infinite ease-in-out;
    -webkit-animation: loader_cube_scan_v 6s infinite ease-in-out;
    /* animation offset */
    animation-delay: 0.75s;
}

#loader_cube #scan_horizontal {
    background-color: rgba(0, 193, 242, 0.5);
    /* same width as the faces (.face) */
    width: 75%;
    border: none;
    /* transform overwritten by animation */
    transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.375)) rotateY(90deg);
    /* animate moving horizontal */
    animation: loader_cube_scan_h 6s infinite ease-in-out;
    -webkit-animation: loader_cube_scan_h 6s infinite ease-in-out;
}

@keyframes loader_cube_scan_v {
    0% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.374));
    }

    12.5% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * 0.374));
    }

    25% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * 0.374));
    }

    37.5% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.374));
    }

    50% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.374));
    }

    62.5% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * 0.374));
    }

    75% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * 0.374));
    }

    87.5% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.374));
    }

    100% {
        transform: translate(-50%, -50%) translateZ(calc(var(--size) * -0.374));
    }

}

@keyframes loader_cube_scan_h {

    0% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.49)) rotateY(90deg);
    }

    12.5% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * 0.49)) rotateY(90deg);
    }

    25% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * 0.49)) rotateY(90deg);
    }

    37.5% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.49)) rotateY(90deg);
    }

    50% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.49)) rotateY(90deg);
    }

    62.5% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * 0.49)) rotateY(90deg);
    }

    75% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * 0.49)) rotateY(90deg);
    }

    87.5% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.49)) rotateY(90deg);
    }

    100% {
        transform: translate(-50%, -50%) translateX(calc(var(--size) * -0.49)) rotateY(90deg);
    }
}


@keyframes loader_cube_rotate {
    /* -webkit-transform might be irrelevant here, but might solve bugs */
    0% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(22.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(22.5deg);
    }

    12.5% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(22.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(22.5deg);
    }

    25% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(112.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(112.5deg);
    }

    37.5% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(112.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(112.5deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(202.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(202.5deg);
    }

    62.5% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(202.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(202.5deg);
    }

    75% {
        transform: translate(-50%, -50%)scale(var(--cubeScale)) rotateX(70deg)rotateZ(292.5deg);
        -webkit-transform: translate(-50%, -50%)scale(var(--cubeScale)) rotateX(70deg)rotateZ(292.5deg);
    }

    87.5% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(292.5deg);
        -webkit-transform:  translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(292.5deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(382.5deg);
        -webkit-transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg)rotateZ(382.5deg);
    }
}