.la-ball-newton-cradle {
    position: relative;
}
.la-ball-newton-cradle > div {
    position: relative;
    box-sizing: content-box;
    color: #fff;
    background: #fff;
    border-color: #fff;
    border-style: solid;
    border-width: 0;
}
.la-ball-newton-cradle:after {
    display: table;
    line-height: 0;
    clear: both;
    content: "";
}
.la-ball-newton-cradle.la-dark > div {
    color: #444;
    background: #444;
    border-color: #444;
}
.la-ball-newton-cradle > div {
    display: inline-block;
    width: 10px;
    height: 10px;
    float: left;
    border-radius: 100%;
}
.la-ball-newton-cradle > div:first-child {
    transform: translateX(0%);
    animation: ball-newton-cradle-left 1s 0s ease-out infinite;
}
.la-ball-newton-cradle > div:last-child {
    transform: translateX(0%);
    animation: ball-newton-cradle-right 1s 0s ease-out infinite;
}
.la-ball-newton-cradle.la-sm > div {
    width: 5px;
    height: 5px;
}
.la-ball-newton-cradle.la-lg > div {
    width: 15px;
    height: 15px;
}
.la-ball-newton-cradle.la-2x > div {
    width: 20px;
    height: 20px;
}
/*
 * Animations
 */
@keyframes ball-newton-cradle-left {
    25% {
        transform: translateX(-100%);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateX(0%);
    }
}
@keyframes ball-newton-cradle-right {
    50% {
        transform: translateX(0%);
    }
    75% {
        transform: translateX(100%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0%);
    }
}

.windows8 {
position: relative;
width: 90px;
height:90px;
}

.windows8 .wBall {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 4.95s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 4.95s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 4.95s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 4.95s infinite;
transform: rotate(225deg);
animation: orbit 4.95s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #FFFFFF;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-ms-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px;
}

.windows8 #wBall_1 {
-moz-animation-delay: 1.08s;
-webkit-animation-delay: 1.08s;
-ms-animation-delay: 1.08s;
-o-animation-delay: 1.08s;
animation-delay: 1.08s;
}

.windows8 #wBall_2 {
-moz-animation-delay: 0.22s;
-webkit-animation-delay: 0.22s;
-ms-animation-delay: 0.22s;
-o-animation-delay: 0.22s;
animation-delay: 0.22s;
}

.windows8 #wBall_3 {
-moz-animation-delay: 0.43s;
-webkit-animation-delay: 0.43s;
-ms-animation-delay: 0.43s;
-o-animation-delay: 0.43s;
animation-delay: 0.43s;
}

.windows8 #wBall_4 {
-moz-animation-delay: 0.65s;
-webkit-animation-delay: 0.65s;
-ms-animation-delay: 0.65s;
-o-animation-delay: 0.65s;
animation-delay: 0.65s;
}

.windows8 #wBall_5 {
-moz-animation-delay: 0.86s;
-webkit-animation-delay: 0.86s;
-ms-animation-delay: 0.86s;
-o-animation-delay: 0.86s;
animation-delay: 0.86s;
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}

}

@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}

}