.whirl {
    position: relative
}

.whirl:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    opacity: .9
}

.whirl:after {
    z-index: 2;
    content: "";
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    -webkit-transition: all .75s ease 0s;
    transition: all .75s ease 0s;
    border-radius: 100%;
    border-top: 4px solid #555;
    -webkit-animation: standard .75s infinite linear;
    animation: standard .75s infinite linear;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.whirl.no-overlay:before {
    content: none;
    display: none
}

@-webkit-keyframes standard {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes standard {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.whirl.bar.follow:after {
    -webkit-animation: bar-follow 1s infinite linear;
    animation: bar-follow 1s infinite linear
}

@-webkit-keyframes bar-follow {
    0% {
        -webkit-box-shadow: inset 40px 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset 40px 0 0 rgba(0, 0, 0, .5)
    }
    100% {
        -webkit-box-shadow: inset -40px 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset -40px 0 0 rgba(0, 0, 0, .5)
    }
}

@keyframes bar-follow {
    0% {
        -webkit-box-shadow: inset 40px 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset 40px 0 0 rgba(0, 0, 0, .5)
    }
    100% {
        -webkit-box-shadow: inset -40px 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset -40px 0 0 rgba(0, 0, 0, .5)
    }
}

.whirl.bar:after {
    height: 20px;
    width: 40px;
    border-radius: 0;
    border: none;
    -webkit-animation: bar 1s infinite linear;
    animation: bar 1s infinite linear
}

@-webkit-keyframes bar {
    from {
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset 0 0 0 rgba(0, 0, 0, .5)
    }
    to {
        -webkit-box-shadow: inset 80px 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset 80px 0 0 rgba(0, 0, 0, .5)
    }
}

@keyframes bar {
    from {
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset 0 0 0 rgba(0, 0, 0, .5)
    }
    to {
        -webkit-box-shadow: inset 80px 0 0 rgba(0, 0, 0, .5);
        box-shadow: inset 80px 0 0 rgba(0, 0, 0, .5)
    }
}

.whirl.blade:after {
    height: 20px;
    width: 20px;
    margin: -10px 0 0 10px;
    border-right: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 4px solid #e74c3c;
    opacity: 1;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left
}

.whirl.double-up:after {
    border-right: 4px solid #e74c3c;
    border-top: 4px double #e74c3c;
    border-left: 4px double #e74c3c;
    border-bottom: 4px double #e74c3c
}

.whirl.duo:after {
    border-right: 4px solid #333;
    border-left: 4px solid #333;
    border-top: 4px solid #f1c40f;
    border-bottom: 4px solid #f1c40f
}

.whirl.helicopter:after {
    height: 10px;
    width: 40px;
    margin: -10px 0 0 -20px;
    border: none;
    border-radius: 0;
    opacity: 1;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    background-color: #8e44ad
}

.whirl.line.back-and-forth.grow:after {
    -webkit-animation: line-back-and-forth 1s infinite linear, line-back-and-forth-grow 1s infinite linear;
    animation: line-back-and-forth 1s infinite linear, line-back-and-forth-grow 1s infinite linear
}

@-webkit-keyframes line-back-and-forth-grow {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    25% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2)
    }
    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    75% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2)
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

@keyframes line-back-and-forth-grow {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    25% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2)
    }
    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    75% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2)
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

.whirl.line.back-and-forth:after {
    -webkit-animation: line-back-and-forth 1s infinite linear;
    animation: line-back-and-forth 1s infinite linear
}

@-webkit-keyframes line-back-and-forth {
    0% {
        width: 10px
    }
    50% {
        width: 50px
    }
    100% {
        width: 10px
    }
}

@keyframes line-back-and-forth {
    0% {
        width: 10px
    }
    50% {
        width: 50px
    }
    100% {
        width: 10px
    }
}

.whirl.line.grow:after {
    -webkit-animation: line .75s infinite linear, line-grow .75s infinite linear;
    animation: line .75s infinite linear, line-grow .75s infinite linear
}

@-webkit-keyframes line-grow {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    50% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2)
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

@keyframes line-grow {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    50% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2)
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

.whirl.line:after {
    height: 20px;
    border-radius: 0;
    border: none;
    -webkit-box-shadow: inset -10px 0 0 rgba(0, 0, 0, .5);
    box-shadow: inset -10px 0 0 rgba(0, 0, 0, .5);
    -webkit-animation: line .75s infinite linear;
    animation: line .75s infinite linear
}

@-webkit-keyframes line {
    from {
        width: 10px
    }
    to {
        width: 50px
    }
}

@keyframes line {
    from {
        width: 10px
    }
    to {
        width: 50px
    }
}

.whirl.ringed:after {
    border-right: 4px solid #e74c3c;
    border-top: 4px solid #2ecc71;
    border-left: 4px solid #2ecc71;
    border-bottom: 4px solid #2ecc71;
    opacity: 1
}

.whirl.shadow.oval.left:after, .whirl.shadow.oval:after {
    -webkit-animation: spin-shadow .25s infinite linear;
    animation: spin-shadow .25s infinite linear;
    border: none;
    border-radius: 40% 100%
}

@-webkit-keyframes spin-shadow {
    0% {
        -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5)
    }
    25% {
        -webkit-box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5)
    }
    50% {
        -webkit-box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5)
    }
    100% {
        -webkit-box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5)
    }
}

@keyframes spin-shadow {
    0% {
        -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5)
    }
    25% {
        -webkit-box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5)
    }
    50% {
        -webkit-box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5)
    }
    100% {
        -webkit-box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5)
    }
}

.whirl.shadow.oval.right:after {
    -webkit-animation: spin-shadow .25s infinite linear;
    animation: spin-shadow .25s infinite linear;
    border: none;
    border-radius: 100% 40%
}

@keyframes spin-shadow {
    0% {
        -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5)
    }
    25% {
        -webkit-box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5)
    }
    50% {
        -webkit-box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5)
    }
    100% {
        -webkit-box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5)
    }
}

.whirl.shadow:after {
    -webkit-animation: spin-shadow .25s infinite linear;
    animation: spin-shadow .25s infinite linear;
    border-radius: 100%;
    border: none
}

@keyframes spin-shadow {
    0% {
        -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5)
    }
    25% {
        -webkit-box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px 5px 5px rgba(0, 0, 0, .5)
    }
    50% {
        -webkit-box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .5)
    }
    100% {
        -webkit-box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5);
        box-shadow: inset 5px -5px 5px rgba(0, 0, 0, .5)
    }
}

.whirl.sphere.horizontal:after, .whirl.sphere:after {
    border-radius: 100%;
    -webkit-animation: sphere .5s infinite;
    animation: sphere .5s infinite;
    border: none;
    height: 40px
}

@-webkit-keyframes sphere {
    from {
        -webkit-box-shadow: inset 45px 0 10px rgba(0, 0, 0, .5);
        box-shadow: inset 45px 0 10px rgba(0, 0, 0, .5)
    }
    to {
        -webkit-box-shadow: inset -45px 0 10px rgba(0, 0, 0, .5);
        box-shadow: inset -45px 0 10px rgba(0, 0, 0, .5)
    }
}

@keyframes sphere {
    from {
        -webkit-box-shadow: inset 45px 0 10px rgba(0, 0, 0, .5);
        box-shadow: inset 45px 0 10px rgba(0, 0, 0, .5)
    }
    to {
        -webkit-box-shadow: inset -45px 0 10px rgba(0, 0, 0, .5);
        box-shadow: inset -45px 0 10px rgba(0, 0, 0, .5)
    }
}

.whirl.sphere.vertical:after {
    border-radius: 100%;
    -webkit-animation: sphere-v .5s infinite;
    animation: sphere-v .5s infinite;
    border: none;
    height: 40px
}

@-webkit-keyframes sphere-v {
    from {
        -webkit-box-shadow: inset 0 45px 10px rgba(0, 0, 0, .5);
        box-shadow: inset 0 45px 10px rgba(0, 0, 0, .5)
    }
    to {
        -webkit-box-shadow: inset 0 -45px 10px rgba(0, 0, 0, .5);
        box-shadow: inset 0 -45px 10px rgba(0, 0, 0, .5)
    }
}

@keyframes sphere-v {
    from {
        -webkit-box-shadow: inset 0 45px 10px rgba(0, 0, 0, .5);
        box-shadow: inset 0 45px 10px rgba(0, 0, 0, .5)
    }
    to {
        -webkit-box-shadow: inset 0 -45px 10px rgba(0, 0, 0, .5);
        box-shadow: inset 0 -45px 10px rgba(0, 0, 0, .5)
    }
}

.whirl.traditional:after {
    border-right: 4px solid #777;
    border-top: 4px solid #777;
    border-left: 4px solid #999;
    border-bottom: 4px solid #bbb
}