.preload-spinner
{
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    position: relative;
    width: 100vw;
}

.preload-spinner > .spinner
{
    height: 50px;
    margin: 20px auto;
    width: 50px;
}

.sk-folding-cube
{
    width: 100%;
    height: 100%;
    -webkit-transform: rotateZ(45deg);
    position: relative;
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube
{
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    float: left;
    height: 50%;
    position: relative;
    transform: scale(1.1);
    width: 50%;
}

.sk-folding-cube .sk-cube:before
{
    -ms-transform-origin: 100% 100%;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    background-color: #00A651;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 100% 100%;
    width: 100%;
}

.sk-folding-cube .sk-cube2
{
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3
{
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4
{
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before
{
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before
{
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before
{
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle
{
    0%, 10%
    {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
        transform: perspective(140px) rotateX(-180deg);
    }

    25%, 75%
    {
        -webkit-transform: perspective(140px) rotateX(0deg);
        opacity: 1;
        transform: perspective(140px) rotateX(0deg);
    }

    90%, 100%
    {
        -webkit-transform: perspective(140px) rotateY(180deg);
        opacity: 0;
        transform: perspective(140px) rotateY(180deg);
    }
}

@keyframes sk-foldCubeAngle
{
    0%, 10%
    {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
        transform: perspective(140px) rotateX(-180deg);
    }

    25%, 75%
    {
        -webkit-transform: perspective(140px) rotateX(0deg);
        opacity: 1;
        transform: perspective(140px) rotateX(0deg);
    }

    90%, 100%
    {
        -webkit-transform: perspective(140px) rotateY(180deg);
        opacity: 0;
        transform: perspective(140px) rotateY(180deg);
    }
}