@-webkit-keyframes moveup {
    0%,
    60%,
    100% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }
    25% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
    }
}
@keyframes moveup {
    0%,
    60%,
    100% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }
    25% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
    }
}
@-webkit-keyframes movedown {
    0%,
    60%,
    100% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }
    25% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
    }
}
@keyframes movedown {
    0%,
    60%,
    100% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }
    25% {
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
    }
}

.layer {
    display: block;
    position: absolute;
    height: 3em;
    width: 3em;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
}
.layer:nth-of-type(1) {
    background: #522583;
    margin-top: 1.5em;
    -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s
        infinite normal;
    animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite
        normal;
}
.layer:nth-of-type(1):before {
    content: '';
    position: absolute;
    width: 85%;
    height: 85%;
    background: #522583;
}
.layer:nth-of-type(2) {
    background: #8260a5;
    margin-top: 0.75em;
}
.layer:nth-of-type(3) {
    background: #a78fc3;
    -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite
        normal;
    animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
}

.loader {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.loader.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.brand {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader h1 {
    position: absolute;
    top: 40%;
    left: 51%;
    color: #000;
    font: 400 28px Helvetica Neue, Helvetica, sans-serif;
    transform: translate(-50%, -50%);
    text-align: center;
}