/**
 * Loaders.css
 *
 * Copyright (c) 2016 Jovey Zheng
 *
 * All animations must live in their own file
 * in the animations directory and be included
 * here.
 *
 */
[data-loader]
{
    margin: 8px;
}
[data-loader='circle']
{
    width: 25px;
    height: 25px;

    -webkit-animation: circle infinite .75s linear;
       -moz-animation: circle infinite .75s linear;
         -o-animation: circle infinite .75s linear;
            animation: circle infinite .75s linear;

    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
}
[data-loader='circle-side']
{
    position: relative;

    width: 25px;
    height: 25px;

    -webkit-animation: circle infinite .75s linear;
       -moz-animation: circle infinite .75s linear;
         -o-animation: circle infinite .75s linear;
            animation: circle infinite .75s linear;

    border: 2px solid #fff;
    border-top-color: rgba(0, 0, 0, .2);
    border-right-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    border-radius: 100%;
}

@-webkit-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-o-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}


[data-loader='arrow-circle']
{
    position: relative;

    width: 25px;
    height: 25px;

    -webkit-animation: arrow-circle infinite .75s linear;
       -moz-animation: arrow-circle infinite .75s linear;
         -o-animation: arrow-circle infinite .75s linear;
            animation: arrow-circle infinite .75s linear;

    border: 2px solid #fff;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 100%;
}
[data-loader='arrow-circle']:before,
[data-loader='arrow-circle']:after
{
    position: absolute;
    top: 19px;
    left: -3px;

    content: '';
    -webkit-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);

    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}
[data-loader='arrow-circle']:after
{
    top: 0;
    left: 17px;

    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
         -o-transform: rotate(150deg);
            transform: rotate(150deg);
}

@-webkit-keyframes arrow-circle
{
    0%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
}

@-moz-keyframes arrow-circle
{
    0%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
}

@-o-keyframes arrow-circle
{
    0%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
}

@keyframes arrow-circle
{
    0%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
}

[data-loader='ball-scale']
{
    width: 50px;
    height: 50px;

    -webkit-animation: ball-scale infinite linear .75s;
       -moz-animation: ball-scale infinite linear .75s;
         -o-animation: ball-scale infinite linear .75s;
            animation: ball-scale infinite linear .75s;

    border-radius: 100%;
    background-color: #fff;
}
@-webkit-keyframes ball-scale
{
    0%
    {
        -webkit-transform: scale(.1);
            -ms-transform: scale(.1);
             -o-transform: scale(.1);
                transform: scale(.1);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);

        opacity: 0;
    }
}

@-moz-keyframes ball-scale
{
    0%
    {
        -webkit-transform: scale(.1);
            -ms-transform: scale(.1);
             -o-transform: scale(.1);
                transform: scale(.1);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);

        opacity: 0;
    }
}

@-o-keyframes ball-scale
{
    0%
    {
        -webkit-transform: scale(.1);
            -ms-transform: scale(.1);
             -o-transform: scale(.1);
                transform: scale(.1);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);

        opacity: 0;
    }
}

@keyframes ball-scale
{
    0%
    {
        -webkit-transform: scale(.1);
            -ms-transform: scale(.1);
             -o-transform: scale(.1);
                transform: scale(.1);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);

        opacity: 0;
    }
}

[data-loader='ball-rotate']
{
    position: relative;

    width: 15px;
    height: 15px;

    -webkit-animation: ball-rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
       -moz-animation: ball-rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
         -o-animation: ball-rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
            animation: ball-rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;

    border-radius: 100%;
    background-color: #0082c9;

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
[data-loader='ball-rotate']:before,
[data-loader='ball-rotate']:after
{
    position: absolute;

    width: 15px;
    height: 15px;
    margin: 2px;

    content: '';

    opacity: .8;
    border-radius: 100%;
    background-color: #0082c9;
}
[data-loader='ball-rotate']:before
{
    top: 0;
    left: -28px;
}
[data-loader='ball-rotate']:after
{
    top: 0;
    left: 25px;
}
@-webkit-keyframes ball-rotate
{
    0%
    {
        -webkit-transform: rotate(0deg) scale(1);
            -ms-transform: rotate(0deg) scale(1);
             -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
    }
    50%
    {
        -webkit-transform: rotate(180deg) scale(.6);
            -ms-transform: rotate(180deg) scale(.6);
             -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
    }
    100%
    {
        -webkit-transform: rotate(360deg) scale(1);
            -ms-transform: rotate(360deg) scale(1);
             -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
    }
}
@-moz-keyframes ball-rotate
{
    0%
    {
        -webkit-transform: rotate(0deg) scale(1);
            -ms-transform: rotate(0deg) scale(1);
             -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
    }
    50%
    {
        -webkit-transform: rotate(180deg) scale(.6);
            -ms-transform: rotate(180deg) scale(.6);
             -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
    }
    100%
    {
        -webkit-transform: rotate(360deg) scale(1);
            -ms-transform: rotate(360deg) scale(1);
             -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
    }
}
@-o-keyframes ball-rotate
{
    0%
    {
        -webkit-transform: rotate(0deg) scale(1);
            -ms-transform: rotate(0deg) scale(1);
             -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
    }
    50%
    {
        -webkit-transform: rotate(180deg) scale(.6);
            -ms-transform: rotate(180deg) scale(.6);
             -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
    }
    100%
    {
        -webkit-transform: rotate(360deg) scale(1);
            -ms-transform: rotate(360deg) scale(1);
             -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
    }
}
@keyframes ball-rotate
{
    0%
    {
        -webkit-transform: rotate(0deg) scale(1);
            -ms-transform: rotate(0deg) scale(1);
             -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
    }
    50%
    {
        -webkit-transform: rotate(180deg) scale(.6);
            -ms-transform: rotate(180deg) scale(.6);
             -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
    }
    100%
    {
        -webkit-transform: rotate(360deg) scale(1);
            -ms-transform: rotate(360deg) scale(1);
             -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
    }
}

[data-loader='ball-pulse']
{
    position: relative;

    width: 1px;
    height: 1px;
}
[data-loader='ball-pulse']:before,
[data-loader='ball-pulse']:after
{
    position: absolute;

    display: inline-block;

    width: 15px;
    height: 15px;

    content: '';

    border-radius: 100%;
    background-color: #fff;
}
[data-loader='ball-pulse']:before
{
    left: -15px;

    -webkit-animation: ball-pulse infinite .75s -.4s cubic-bezier(.2, .68, .18, 1.08);
       -moz-animation: ball-pulse infinite .75s -.4s cubic-bezier(.2, .68, .18, 1.08);
         -o-animation: ball-pulse infinite .75s -.4s cubic-bezier(.2, .68, .18, 1.08);
            animation: ball-pulse infinite .75s -.4s cubic-bezier(.2, .68, .18, 1.08);
}
[data-loader='ball-pulse']:after
{
    right: -15px;

    -webkit-animation: ball-pulse infinite .75s cubic-bezier(.2, .68, .18, 1.08);
       -moz-animation: ball-pulse infinite .75s cubic-bezier(.2, .68, .18, 1.08);
         -o-animation: ball-pulse infinite .75s cubic-bezier(.2, .68, .18, 1.08);
            animation: ball-pulse infinite .75s cubic-bezier(.2, .68, .18, 1.08);
}
@-webkit-keyframes ball-pulse
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    50%
    {
        transform: scale(.1);

        opacity: .6;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@-moz-keyframes ball-pulse
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    50%
    {
        transform: scale(.1);

        opacity: .6;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@-o-keyframes ball-pulse
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    50%
    {
        transform: scale(.1);

        opacity: .6;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@keyframes ball-pulse
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    50%
    {
        transform: scale(.1);

        opacity: .6;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}


[data-loader='ball-circle']
{
    position: relative;

    width: 40px;
    height: 40px;
}
[data-loader='ball-circle']:before,
[data-loader='ball-circle']:after
{
    position: absolute;

    width: 10px;
    height: 10px;

    content: '';

    border-radius: 100%;
    background-color: #fff;
}
[data-loader='ball-circle']:before
{
    transform: translate(0, 0);
    -webkit-animation: ball-circle-before infinite 1.5s linear;
       -moz-animation: ball-circle-before infinite 1.5s linear;
         -o-animation: ball-circle-before infinite 1.5s linear;
            animation: ball-circle-before infinite 1.5s linear;
}
[data-loader='ball-circle']:after
{
    transform: translate(30px, 30px);
    -webkit-animation: ball-circle-after infinite 1.5s linear;
       -moz-animation: ball-circle-after infinite 1.5s linear;
         -o-animation: ball-circle-after infinite 1.5s linear;
            animation: ball-circle-after infinite 1.5s linear;
}

@-webkit-keyframes ball-circle-after
{
    0%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    25%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    50%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    75%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    100%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
}
@-moz-keyframes ball-circle-after
{
    0%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    25%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    50%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    75%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    100%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
}
@-o-keyframes ball-circle-after
{
    0%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    25%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    50%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    75%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    100%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
}
@keyframes ball-circle-after
{
    0%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    25%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    50%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    75%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    100%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
}

@-webkit-keyframes ball-circle-before
{
    0%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    25%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    50%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    75%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    100%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-moz-keyframes ball-circle-before
{
    0%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    25%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    50%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    75%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    100%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-o-keyframes ball-circle-before
{
    0%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    25%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    50%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    75%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    100%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@keyframes ball-circle-before
{
    0%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    25%
    {
        -webkit-transform: translate(30px, 0);
            -ms-transform: translate(30px, 0);
             -o-transform: translate(30px, 0);
                transform: translate(30px, 0);
    }
    50%
    {
        -webkit-transform: translate(30px, 30px);
            -ms-transform: translate(30px, 30px);
             -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
    }
    75%
    {
        -webkit-transform: translate(0, 30px);
            -ms-transform: translate(0, 30px);
             -o-transform: translate(0, 30px);
                transform: translate(0, 30px);
    }
    100%
    {
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

[data-loader='rectangle']
{
    position: relative;

    width: 10px;
    height: 30px;

    -webkit-animation: rectangle infinite 1s ease-in-out -.2s;
       -moz-animation: rectangle infinite 1s ease-in-out -.2s;
         -o-animation: rectangle infinite 1s ease-in-out -.2s;
            animation: rectangle infinite 1s ease-in-out -.2s;

    background-color: #fff;
}
[data-loader='rectangle']:before,
[data-loader='rectangle']:after
{
    position: absolute;

    width: 10px;
    height: 30px;

    content: '';

    background-color: #fff;
}
[data-loader='rectangle']:before
{
    left: -20px;

    -webkit-animation: rectangle infinite 1s ease-in-out -.4s;
       -moz-animation: rectangle infinite 1s ease-in-out -.4s;
         -o-animation: rectangle infinite 1s ease-in-out -.4s;
            animation: rectangle infinite 1s ease-in-out -.4s;
}
[data-loader='rectangle']:after
{
    right: -20px;

    -webkit-animation: rectangle infinite 1s ease-in-out;
       -moz-animation: rectangle infinite 1s ease-in-out;
         -o-animation: rectangle infinite 1s ease-in-out;
            animation: rectangle infinite 1s ease-in-out;
}
@-webkit-keyframes rectangle
{
    0%,
    80%,
    100%
    {
        height: 35px;

        -webkit-box-shadow: 0 0 #fff;
                box-shadow: 0 0 #fff;
    }
    40%
    {
        height: 45px;

        -webkit-box-shadow: 0 -20px #fff;
                box-shadow: 0 -20px #fff;
    }
}
@-moz-keyframes rectangle
{
    0%,
    80%,
    100%
    {
        height: 35px;

        -webkit-box-shadow: 0 0 #fff;
                box-shadow: 0 0 #fff;
    }
    40%
    {
        height: 45px;

        -webkit-box-shadow: 0 -20px #fff;
                box-shadow: 0 -20px #fff;
    }
}
@-o-keyframes rectangle
{
    0%,
    80%,
    100%
    {
        height: 35px;

        -webkit-box-shadow: 0 0 #fff;
                box-shadow: 0 0 #fff;
    }
    40%
    {
        height: 45px;

        -webkit-box-shadow: 0 -20px #fff;
                box-shadow: 0 -20px #fff;
    }
}
@keyframes rectangle
{
    0%,
    80%,
    100%
    {
        height: 35px;

        -webkit-box-shadow: 0 0 #fff;
                box-shadow: 0 0 #fff;
    }
    40%
    {
        height: 45px;

        -webkit-box-shadow: 0 -20px #fff;
                box-shadow: 0 -20px #fff;
    }
}
[data-loader='heart']
{
    position: relative;

    width: 100px;
    height: 90px;

    -webkit-animation: heart infinite .85s linear;
       -moz-animation: heart infinite .85s linear;
         -o-animation: heart infinite .85s linear;
            animation: heart infinite .85s linear;
}
[data-loader='heart']:before,
[data-loader='heart']:after
{
    position: absolute;
    top: 0;
    left: 30px;

    width: 30px;
    height: 50px;

    content: '';
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;

    -moz-border-radius: 30px 30px 0 0;
         border-radius: 30px 30px 0 0;
    background: #fff;
}
[data-loader='heart']:after
{
    left: 0;

    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
@-webkit-keyframes heart
{
    0%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
    50%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
    100%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
}
@-moz-keyframes heart
{
    0%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
    50%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
    100%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
}
@-o-keyframes heart
{
    0%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
    50%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
    100%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
}
@keyframes heart
{
    0%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
    50%
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
    100%
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
             -o-transform: scale(.8);
                transform: scale(.8);
    }
}

[data-loader='jumping']
{
    position: relative;

    width: 50px;

    -webkit-perspective: 200px;
       -moz-perspective: 200px;
        -ms-perspective: 200px;
            perspective: 200px;
}
[data-loader='jumping']:before,
[data-loader='jumping']:after
{
    position: absolute;

    width: 20px;
    height: 20px;

    content: '';
    animation: jumping .5s infinite alternate;

    background: rgba(0,0,0,0);
}
[data-loader='jumping']:before
{
    left: 0;
}
[data-loader='jumping']:after
{
    right: 0;

    animation-delay: .15s;
}
@-webkit-keyframes jumping
{
    0%
    {
        -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
            -ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
             -o-transform: scale(1.0) translateY(0px) rotateX(0deg);
                transform: scale(1.0) translateY(0px) rotateX(0deg);

        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
                box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    100%
    {
        -webkit-transform: scale(1.2) translateY(-25px) rotateX(45deg);
            -ms-transform: scale(1.2) translateY(-25px) rotateX(45deg);
             -o-transform: scale(1.2) translateY(-25px) rotateX(45deg);
                transform: scale(1.2) translateY(-25px) rotateX(45deg);

        background: rgb(255,255,255);
        -webkit-box-shadow: 0 25px 40px rgb(255,255,255);
                box-shadow: 0 25px 40px rgb(255,255,255);
    }
}
@-moz-keyframes jumping
{
    0%
    {
        -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
            -ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
             -o-transform: scale(1.0) translateY(0px) rotateX(0deg);
                transform: scale(1.0) translateY(0px) rotateX(0deg);

        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
                box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    100%
    {
        -webkit-transform: scale(1.2) translateY(-25px) rotateX(45deg);
            -ms-transform: scale(1.2) translateY(-25px) rotateX(45deg);
             -o-transform: scale(1.2) translateY(-25px) rotateX(45deg);
                transform: scale(1.2) translateY(-25px) rotateX(45deg);

        background: rgb(255,255,255);
        -webkit-box-shadow: 0 25px 40px rgb(255,255,255);
                box-shadow: 0 25px 40px rgb(255,255,255);
    }
}
@-o-keyframes jumping
{
    0%
    {
        -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
            -ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
             -o-transform: scale(1.0) translateY(0px) rotateX(0deg);
                transform: scale(1.0) translateY(0px) rotateX(0deg);

        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
                box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    100%
    {
        -webkit-transform: scale(1.2) translateY(-25px) rotateX(45deg);
            -ms-transform: scale(1.2) translateY(-25px) rotateX(45deg);
             -o-transform: scale(1.2) translateY(-25px) rotateX(45deg);
                transform: scale(1.2) translateY(-25px) rotateX(45deg);

        background: rgb(255,255,255);
        -webkit-box-shadow: 0 25px 40px rgb(255,255,255);
                box-shadow: 0 25px 40px rgb(255,255,255);
    }
}
@keyframes jumping
{
    0%
    {
        -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
            -ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
             -o-transform: scale(1.0) translateY(0px) rotateX(0deg);
                transform: scale(1.0) translateY(0px) rotateX(0deg);

        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
                box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    100%
    {
        -webkit-transform: scale(1.2) translateY(-25px) rotateX(45deg);
            -ms-transform: scale(1.2) translateY(-25px) rotateX(45deg);
             -o-transform: scale(1.2) translateY(-25px) rotateX(45deg);
                transform: scale(1.2) translateY(-25px) rotateX(45deg);

        background: rgb(255,255,255);
        -webkit-box-shadow: 0 25px 40px rgb(255,255,255);
                box-shadow: 0 25px 40px rgb(255,255,255);
    }
}

[data-loader='satellite']
{
    position: relative;

    width: 48px;
    height: 48px;

    animation: satellite 3s infinite linear;

    border: 1px solid #fff;
    border-radius: 100%;
}
[data-loader='satellite']:before,
[data-loader='satellite']:after
{
    position: absolute;
    left: 0;

    width: 15px;
    height: 15px;

    content: '';

    border-radius: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px #fff;
            box-shadow: 0 0 10px #fff;
}
[data-loader='satellite']:after
{
    right: 0;

    width: 24px;
    height: 24px;
    margin: 12px;
}

@-webkit-keyframes satellite
{
    from
    {
        -webkit-transform: rotate(0) translateZ(0);
            -ms-transform: rotate(0) translateZ(0);
             -o-transform: rotate(0) translateZ(0);
                transform: rotate(0) translateZ(0);
    }
    to
    {
        -webkit-transform: rotate(360deg) translateZ(0);
            -ms-transform: rotate(360deg) translateZ(0);
             -o-transform: rotate(360deg) translateZ(0);
                transform: rotate(360deg) translateZ(0);
    }
}
@-moz-keyframes satellite
{
    from
    {
        -webkit-transform: rotate(0) translateZ(0);
            -ms-transform: rotate(0) translateZ(0);
             -o-transform: rotate(0) translateZ(0);
                transform: rotate(0) translateZ(0);
    }
    to
    {
        -webkit-transform: rotate(360deg) translateZ(0);
            -ms-transform: rotate(360deg) translateZ(0);
             -o-transform: rotate(360deg) translateZ(0);
                transform: rotate(360deg) translateZ(0);
    }
}
@-o-keyframes satellite
{
    from
    {
        -webkit-transform: rotate(0) translateZ(0);
            -ms-transform: rotate(0) translateZ(0);
             -o-transform: rotate(0) translateZ(0);
                transform: rotate(0) translateZ(0);
    }
    to
    {
        -webkit-transform: rotate(360deg) translateZ(0);
            -ms-transform: rotate(360deg) translateZ(0);
             -o-transform: rotate(360deg) translateZ(0);
                transform: rotate(360deg) translateZ(0);
    }
}
@keyframes satellite
{
    from
    {
        -webkit-transform: rotate(0) translateZ(0);
            -ms-transform: rotate(0) translateZ(0);
             -o-transform: rotate(0) translateZ(0);
                transform: rotate(0) translateZ(0);
    }
    to
    {
        -webkit-transform: rotate(360deg) translateZ(0);
            -ms-transform: rotate(360deg) translateZ(0);
             -o-transform: rotate(360deg) translateZ(0);
                transform: rotate(360deg) translateZ(0);
    }
}

[data-loader='circle-scale']
{
    position: relative;

    width: 36px;
}
[data-loader='circle-scale']:before,
[data-loader='circle-scale']:after
{
    position: absolute;
    left: 0;

    width: 32px;
    height: 32px;

    content: '';
    -webkit-animation: .75s circle-scale infinite linear alternate;
         -o-animation: .75s circle-scale infinite linear alternate;
            animation: .75s circle-scale infinite linear alternate;

    border: 3px solid #fff;
    border-radius: 100%;
}
[data-loader='circle-scale']:before
{
    margin: 2px;

    -webkit-animation-delay: .35s;
         -o-animation-delay: .35s;
            animation-delay: .35s;
}
[data-loader='circle-scale']:after
{
    width: 36px;
    height: 36px;
}
@-webkit-keyframes circle-scale
{
    0%
    {
        -webkit-transform: scale(.2);
            -ms-transform: scale(.2);
             -o-transform: scale(.2);
                transform: scale(.2);
    }
    100%
    {
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
             -o-transform: scale(1.2);
                transform: scale(1.2);
    }
}
@-moz-keyframes circle-scale
{
    0%
    {
        -webkit-transform: scale(.2);
            -ms-transform: scale(.2);
             -o-transform: scale(.2);
                transform: scale(.2);
    }
    100%
    {
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
             -o-transform: scale(1.2);
                transform: scale(1.2);
    }
}
@-o-keyframes circle-scale
{
    0%
    {
        -webkit-transform: scale(.2);
            -ms-transform: scale(.2);
             -o-transform: scale(.2);
                transform: scale(.2);
    }
    100%
    {
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
             -o-transform: scale(1.2);
                transform: scale(1.2);
    }
}
@keyframes circle-scale
{
    0%
    {
        -webkit-transform: scale(.2);
            -ms-transform: scale(.2);
             -o-transform: scale(.2);
                transform: scale(.2);
    }
    100%
    {
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
             -o-transform: scale(1.2);
                transform: scale(1.2);
    }
}

[data-loader='ball-fade']
{
    position: relative;

    width: 15px;
    height: 15px;

    -webkit-animation: 1.2s ball-fade infinite cubic-bezier(.78, .14, .15, .86) .2s;
         -o-animation: 1.2s ball-fade infinite cubic-bezier(.78, .14, .15, .86) .2s;
            animation: 1.2s ball-fade infinite cubic-bezier(.78, .14, .15, .86) .2s;

    border-radius: 100%;
    background-color: rgba(255, 255, 255, .0);
}
[data-loader='ball-fade']:before,
[data-loader='ball-fade']:after
{
    position: absolute;

    width: 15px;
    height: 15px;

    content: '';
    -webkit-animation: 1.2s ball-fade infinite cubic-bezier(.78, .14, .15, .86);
         -o-animation: 1.2s ball-fade infinite cubic-bezier(.78, .14, .15, .86);
            animation: 1.2s ball-fade infinite cubic-bezier(.78, .14, .15, .86);

    border-radius: 100%;
    background-color: rgba(255, 255, 255, .0);
}
[data-loader='ball-fade']:before
{
    left: -20px;
}
[data-loader='ball-fade']:after
{
    right: -20px;

    -webkit-animation-delay: .4s;
         -o-animation-delay: .4s;
            animation-delay: .4s;
}
@-webkit-keyframes ball-fade
{
    0%
    {
        background-color: rgba(255, 255, 255, 1);
    }
    100%
    {
        background-color: rgba(255, 255, 255, 0);
    }
}
@-moz-keyframes ball-fade
{
    0%
    {
        background-color: rgba(255, 255, 255, 1);
    }
    100%
    {
        background-color: rgba(255, 255, 255, 0);
    }
}
@-o-keyframes ball-fade
{
    0%
    {
        background-color: rgba(255, 255, 255, 1);
    }
    100%
    {
        background-color: rgba(255, 255, 255, 0);
    }
}
@keyframes ball-fade
{
    0%
    {
        background-color: rgba(255, 255, 255, 1);
    }
    100%
    {
        background-color: rgba(255, 255, 255, 0);
    }
}

[data-loader='spinner']
{
    width: 25px;
    height: 25px;

    -webkit-animation: spinner 1.2s infinite ease-in-out;
         -o-animation: spinner 1.2s infinite ease-in-out;
            animation: spinner 1.2s infinite ease-in-out;

    background-color: #fff;
    box-shadow: 0 0 10px #fff;
}
@-webkit-keyframes spinner
{
    0%
    {
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
            -ms-transform: perspective(120px) rotateX(0) rotateY(0);
             -o-transform: perspective(120px) rotateX(0) rotateY(0);
                transform: perspective(120px) rotateX(0) rotateY(0);
    }
    50%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(0);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(0);
                transform: perspective(120px) rotateX(-180deg) rotateY(0);
    }
    100%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}
@-moz-keyframes spinner
{
    0%
    {
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
            -ms-transform: perspective(120px) rotateX(0) rotateY(0);
             -o-transform: perspective(120px) rotateX(0) rotateY(0);
                transform: perspective(120px) rotateX(0) rotateY(0);
    }
    50%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(0);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(0);
                transform: perspective(120px) rotateX(-180deg) rotateY(0);
    }
    100%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}
@-o-keyframes spinner
{
    0%
    {
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
            -ms-transform: perspective(120px) rotateX(0) rotateY(0);
             -o-transform: perspective(120px) rotateX(0) rotateY(0);
                transform: perspective(120px) rotateX(0) rotateY(0);
    }
    50%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(0);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(0);
                transform: perspective(120px) rotateX(-180deg) rotateY(0);
    }
    100%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}
@keyframes spinner
{
    0%
    {
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
            -ms-transform: perspective(120px) rotateX(0) rotateY(0);
             -o-transform: perspective(120px) rotateX(0) rotateY(0);
                transform: perspective(120px) rotateX(0) rotateY(0);
    }
    50%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(0);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(0);
                transform: perspective(120px) rotateX(-180deg) rotateY(0);
    }
    100%
    {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
             -o-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}

[data-loader='ball-roll']
{
    position: relative;
    left: -20px;

    width: 15px;
    height: 15px;

    -webkit-animation: ball-roll 1s linear infinite alternate;
       -moz-animation: ball-roll 1s linear infinite alternate;
            animation: ball-roll 1s linear infinite alternate;

    border-radius: 50%;
}
@-webkit-keyframes ball-roll
{
    0%
    {
        background-color: rgba(255,255,255, 1);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    25%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    75%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,1);
    }
}
@-moz-keyframes ball-roll
{
    0%
    {
        background-color: rgba(255,255,255, 1);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    25%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    75%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,1);
    }
}
@-o-keyframes ball-roll
{
    0%
    {
        background-color: rgba(255,255,255, 1);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    25%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    75%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,1);
    }
}
@keyframes ball-roll
{
    0%
    {
        background-color: rgba(255,255,255, 1);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    25%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,2),
        44px 0 0 0 rgba(255,255,255,.2);
    }
    75%
    {
        background-color: rgba(255,255,255, .4);
        box-shadow: 22px 0 0 0 rgba(255,255,255,.2),
        44px 0 0 0 rgba(255,255,255,1);
    }
}

[data-loader='ball-auto']
{
    width: 8px;
    height: 8px;

    animation: ball-auto 2.5s infinite linear;

    box-shadow: 0 -20px 0 -3px #de5454,
    20px 0 0 -3px #1ecaba,
    0 20px 0 -3px #ffeb02,
    -20px 0 0 -3px #2c89e8;
}
@-webkit-keyframes ball-auto
{
    0%
    {
        transform: rotate(0);
    }
    45%
    {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100%
    {
        transform: rotate(720deg);
    }
}
@-moz-keyframes ball-auto
{
    0%
    {
        transform: rotate(0);
    }
    45%
    {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100%
    {
        transform: rotate(720deg);
    }
}
@-o-keyframes ball-auto
{
    0%
    {
        transform: rotate(0);
    }
    45%
    {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100%
    {
        transform: rotate(720deg);
    }
}
@keyframes ball-auto
{
    0%
    {
        transform: rotate(0);
    }
    45%
    {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100%
    {
        transform: rotate(720deg);
    }
}

[data-loader='wave']
{
    width: 3em;
    height: 2em;

    animation: wave 1.5s linear infinite;

    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: .5em .25em, .5em .25em, .5em .25em, .5em .25em, .5em .25em;
}
@-webkit-keyframes wave
{
    25%
    {
        background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em 2em, .5em .25em, .5em .25em, .5em .25em, .5em .25em;
    }
    37.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em 2em, .5em .25em, .5em .25em, .5em .25em;
    }
    50%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em 2em, .5em .25em, .5em .25em;
    }
    62.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em 2em, .5em .25em;
    }
    75%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em .25em, .5em 2em;
    }
}
@-moz-keyframes wave
{
    25%
    {
        background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em 2em, .5em .25em, .5em .25em, .5em .25em, .5em .25em;
    }
    37.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em 2em, .5em .25em, .5em .25em, .5em .25em;
    }
    50%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em 2em, .5em .25em, .5em .25em;
    }
    62.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em 2em, .5em .25em;
    }
    75%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em .25em, .5em 2em;
    }
}
@-o-keyframes wave
{
    25%
    {
        background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em 2em, .5em .25em, .5em .25em, .5em .25em, .5em .25em;
    }
    37.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em 2em, .5em .25em, .5em .25em, .5em .25em;
    }
    50%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em 2em, .5em .25em, .5em .25em;
    }
    62.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em 2em, .5em .25em;
    }
    75%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em .25em, .5em 2em;
    }
}
@keyframes wave
{
    25%
    {
        background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em 2em, .5em .25em, .5em .25em, .5em .25em, .5em .25em;
    }
    37.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em 2em, .5em .25em, .5em .25em, .5em .25em;
    }
    50%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em 2em, .5em .25em, .5em .25em;
    }
    62.5%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em 2em, .5em .25em;
    }
    75%
    {
        background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) .625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: .5em .25em, .5em .25em, .5em .25em, .5em .25em, .5em 2em;
    }
}

[data-loader='spinner-circle']
{
    width: 25px;
    height: 25px;

    animation: .4s infinite linear spinner-circle;

    border-radius: 50%;
    box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
    0 30px 0 -6px rgba(255, 255, 255, .2),
    -30px 0 0 -6px rgba(255, 255, 255, .2),
    0 -30px 0 -6px rgba(255, 255, 255, .2),
    21px 21px 0 -6px rgba(255, 255, 255, .2),
    -21px 21px 0 -6px rgba(255, 255, 255, .2),
    -21px -21px 0 -6px rgba(255, 255, 255, .2),
    21px -21px 0 -6px rgba(255, 255, 255, .2);
}
@-webkit-keyframes spinner-circle
{
    12.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, 1),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    25%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, 1);
    }
    37.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, 1),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    50%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    62.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, 1),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    75%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    87.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, 1),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    100%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, 1),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
}
@-moz-keyframes spinner-circle
{
    12.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, 1),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    25%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, 1);
    }
    37.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, 1),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    50%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    62.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, 1),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    75%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    87.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, 1),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    100%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, 1),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
}
@-o-keyframes spinner-circle
{
    12.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, 1),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    25%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, 1);
    }
    37.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, 1),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    50%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    62.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, 1),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    75%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    87.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, 1),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    100%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, 1),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
}
@keyframes spinner-circle
{
    12.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, 1),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    25%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, 1);
    }
    37.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, 1),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    50%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    62.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, 1),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    75%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, 1),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    87.5%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, 1),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, .2),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
    100%
    {
        box-shadow: 30px 0 0 -6px rgba(255, 255, 255, .2),
        0 30px 0 -6px rgba(255, 255, 255, .2),
        -30px 0 0 -6px rgba(255, 255, 255, .2),
        0 -30px 0 -6px rgba(255, 255, 255, .2),
        21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px 21px 0 -6px rgba(255, 255, 255, .2),
        -21px -21px 0 -6px rgba(255, 255, 255, 1),
        21px -21px 0 -6px rgba(255, 255, 255, .2);
    }
}