/**
 * Mojn Loading Animation.
 * Requires div with 5 child divs.
 *
 * @param $colors A list of 5 colors.
 */
/** A circle with given radius, with anchor in its center */
/** A rectangle with anchor in its center */
/** A rectangle with anchor in its center */
/** The machine's cabine has its right side slightly slanted */
/** The smaller wheels */
/** The medium wheels */
/***************
 ** FRAME A ****
 ***************/
/***************
 ** FRAME B ****
 ***************/
/***************
 ** FRAME C ****
 ***************/
/***************
 ** FRAME D ****
 ***************/
/***************
 ***************
 ***************/
@-webkit-keyframes mojnKeyframesElem1 {
    73%,
    77% {
        width: 4.5em;
        height: 2em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        left: 0;
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%,
    98%,
    0%,
    2% {
        width: 2.3em;
        height: 1.63121em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 1.2em;
        top: 0.8em;
    }
    23%,
    27% {
        width: 1.2em;
        height: 1em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        left: 0.5em;
        top: 0.7em;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    48%,
    52% {
        width: 1.2em;
        height: 1em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        left: 0.5em;
        top: 0.7em;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 0.9em;
        transform: rotate(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
@keyframes mojnKeyframesElem1 {
    73%,
    77% {
        width: 4.5em;
        height: 2em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        left: 0;
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%,
    98%,
    0%,
    2% {
        width: 2.3em;
        height: 1.63121em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 1.2em;
        top: 0.8em;
    }
    23%,
    27% {
        width: 1.2em;
        height: 1em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        left: 0.5em;
        top: 0.7em;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    48%,
    52% {
        width: 1.2em;
        height: 1em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        left: 0.5em;
        top: 0.7em;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 0.9em;
        transform: rotate(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@-webkit-keyframes mojnKeyframesElem2 {
    73%,
    77% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
    }
    100%,
    98%,
    0%,
    2% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
        left: 1.75em;
    }
    23%,
    27% {
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
        margin-left: -0.6em;
        margin-top: -0.6em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 2.4em;
        left: 1.5em;
    }
    48%,
    52% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 2.55em;
        left: 2.4em;
        width: 3em;
        margin-left: -1.5em;
    }
}

@keyframes mojnKeyframesElem2 {
    73%,
    77% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
    }
    100%,
    98%,
    0%,
    2% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
        left: 1.75em;
    }
    23%,
    27% {
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
        margin-left: -0.6em;
        margin-top: -0.6em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 2.4em;
        left: 1.5em;
    }
    48%,
    52% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 2.55em;
        left: 2.4em;
        width: 3em;
        margin-left: -1.5em;
    }
}

@-webkit-keyframes mojnKeyframesElem3 {
    73%,
    77% {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
    }
    100%,
    98%,
    0%,
    2% {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
        left: 4.15em;
    }
    23%,
    27% {
        width: 1.3em;
        height: 1.7em;
        margin-left: -0.65em;
        margin-top: -0.85em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        top: 0.85em;
        left: 2.5em;
    }
    48%,
    52% {
        width: 1.3em;
        height: 1.7em;
        margin-left: -0.65em;
        margin-top: -0.85em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        top: 0.85em;
        left: 2.5em;
        top: 1.05em;
        left: 2.5em;
    }
}

@keyframes mojnKeyframesElem3 {
    73%,
    77% {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
    }
    100%,
    98%,
    0%,
    2% {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
        left: 4.15em;
    }
    23%,
    27% {
        width: 1.3em;
        height: 1.7em;
        margin-left: -0.65em;
        margin-top: -0.85em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        top: 0.85em;
        left: 2.5em;
    }
    48%,
    52% {
        width: 1.3em;
        height: 1.7em;
        margin-left: -0.65em;
        margin-top: -0.85em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        top: 0.85em;
        left: 2.5em;
        top: 1.05em;
        left: 2.5em;
    }
}

@-webkit-keyframes mojnKeyframesElem4 {
    73%,
    77% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
    100%,
    98%,
    0%,
    2% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 2.95em;
        transform: rotate(0) translateY(0);
    }
    23%,
    27% {
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
        margin-left: -0.6em;
        margin-top: -0.6em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 2.4em;
        left: 3.25em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
    48%,
    52% {
        width: 2.3em;
        height: 0.3em;
        margin-left: -1.15em;
        margin-top: -0.15em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        top: 0.6em;
        left: 4.2em;
        -webkit-transform: rotate(-40deg) translateY(0);
        transform: rotate(-40deg) translateY(0);
    }
}

@keyframes mojnKeyframesElem4 {
    73%,
    77% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
    100%,
    98%,
    0%,
    2% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 2.95em;
        transform: rotate(0) translateY(0);
    }
    23%,
    27% {
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
        margin-left: -0.6em;
        margin-top: -0.6em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        top: 2.4em;
        left: 3.25em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
    48%,
    52% {
        width: 2.3em;
        height: 0.3em;
        margin-left: -1.15em;
        margin-top: -0.15em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        top: 0.6em;
        left: 4.2em;
        -webkit-transform: rotate(-40deg) translateY(0);
        transform: rotate(-40deg) translateY(0);
    }
}

@-webkit-keyframes mojnKeyframesElem5 {
    73%,
    77% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
    100%,
    98%,
    0%,
    2% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 4.15em;
        transform: rotate(0) translateY(0);
    }
    23%,
    27% {
        width: 1.6em;
        height: 1.13475em;
        margin-left: -0.8em;
        margin-top: -0.56738em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 4.5em;
        top: 2em;
        -webkit-transform: rotate(80deg) translateY(0);
        transform: rotate(80deg) translateY(0);
    }
    48%,
    52% {
        width: 1.2em;
        height: 0.85106em;
        margin-left: -0.6em;
        margin-top: -0.42553em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 5.5em;
        top: 0.7em;
        -webkit-transform: rotate(-80deg) translateY(0);
        transform: rotate(-80deg) translateY(0);
    }
}

@keyframes mojnKeyframesElem5 {
    73%,
    77% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
    100%,
    98%,
    0%,
    2% {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 4.15em;
        transform: rotate(0) translateY(0);
    }
    23%,
    27% {
        width: 1.6em;
        height: 1.13475em;
        margin-left: -0.8em;
        margin-top: -0.56738em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 4.5em;
        top: 2em;
        -webkit-transform: rotate(80deg) translateY(0);
        transform: rotate(80deg) translateY(0);
    }
    48%,
    52% {
        width: 1.2em;
        height: 0.85106em;
        margin-left: -0.6em;
        margin-top: -0.42553em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 5.5em;
        top: 0.7em;
        -webkit-transform: rotate(-80deg) translateY(0);
        transform: rotate(-80deg) translateY(0);
    }
}

@-webkit-keyframes animateIn1 {
    from {
        width: 2.3em;
        height: 1.63121em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 1.2em;
        top: 0.8em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 2.3em;
        height: 1.63121em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 1.2em;
        top: 0.8em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
}

@keyframes animateIn1 {
    from {
        width: 2.3em;
        height: 1.63121em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 1.2em;
        top: 0.8em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 2.3em;
        height: 1.63121em;
        margin-left: 0em;
        margin-top: 0em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
        left: 1.2em;
        top: 0.8em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
}

@-webkit-keyframes animateIn2 {
    from {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
        left: 1.75em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
        left: 1.75em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
}

@keyframes animateIn2 {
    from {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
        left: 1.75em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 0.55em;
        top: 2.55em;
        left: 1.75em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
}

@-webkit-keyframes animateIn3 {
    from {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
        left: 4.15em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
        left: 4.15em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
}

@keyframes animateIn3 {
    from {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
        left: 4.15em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 1.3em;
        height: 1.8em;
        margin-left: -0.65em;
        margin-top: -0.9em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0;
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 1.1em;
        left: 4.15em;
        opacity: 1;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
    }
}

@-webkit-keyframes animateIn4 {
    from {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 2.95em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 2.95em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

@keyframes animateIn4 {
    from {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 2.95em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 3.95em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 2.95em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

@-webkit-keyframes animateIn5 {
    from {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 4.15em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 4.15em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

@keyframes animateIn5 {
    from {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 4.15em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        -webkit-transform: rotate(0) translateY(-0.5em);
        transform: rotate(0) translateY(-0.5em);
    }
    to {
        width: 0.9em;
        height: 0.9em;
        border-radius: 0.45em;
        margin-left: -0.45em;
        margin-top: -0.45em;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        left: 5.35em;
        top: 2.55em;
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0);
        left: 4.15em;
        transform: rotate(0) translateY(0);
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

.hk-spinner {
    position: relative;
    margin: 50px;
    font-size: 30px;
    width: 180px;
    height: 90px;
    -webkit-backface-visibility: hidden;
}

.hk-spinner * {
    position: absolute;
    -webkit-transform: translateZ(0) rotate(0.02deg);
    transform: translateZ(0) rotate(0.02deg);
    -webkit-backface-visibility: hidden;
}

.hk-spinner :nth-child(5) {
    -webkit-animation: mojnKeyframesElem1 3s ease 0.01s infinite;
    animation: mojnKeyframesElem1 3s ease 0.01s infinite;
    background: #ccc;
}

.hk-spinner :nth-child(4) {
    -webkit-animation: mojnKeyframesElem2 3s ease 0.01s infinite;
    animation: mojnKeyframesElem2 3s ease 0.01s infinite;
    background: #555;
}

.hk-spinner :nth-child(3) {
    -webkit-animation: mojnKeyframesElem3 3s ease 0.01s infinite;
    animation: mojnKeyframesElem3 3s ease 0.01s infinite;
    background: #ff5300;
}

.hk-spinner :nth-child(2) {
    -webkit-animation: mojnKeyframesElem4 3s ease 0.01s infinite;
    animation: mojnKeyframesElem4 3s ease 0.01s infinite;
    background: #555;
}

.hk-spinner :nth-child(1) {
    -webkit-animation: mojnKeyframesElem5 3s ease 0.01s infinite;
    animation: mojnKeyframesElem5 3s ease 0.01s infinite;
    background: #555;
}