.echo, .loader{
    padding-left:3px;
}

/*circles*/
.outer {
    float: none;
    position: absolute;
    text-align: center;

    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 5;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#outer1, #outer2, #outer3, #outer4{
    width: 46px;
    height: 46px;
}
#outer1 {
    background: url(../images/outer1.png) no-repeat left center;
}
div.loader div#outer1{
    -moz-animation-iteration-count: 5;
    -moz-animation-name: ckw;
    -moz-animation-duration: 1s;

    -webkit-animation-iteration-count: 5;
    -webkit-animation-name: ckw;
    -webkit-animation-duration: 1s;
}
div.echo div#outer1{
    -moz-transition-property: -moz-transform;
    -moz-transform: all  500ms ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: ckw_s;
    -moz-animation-duration: 0.5s;

    -webkit-transition-property: -webkit-transform;
    -webkit-transform: all  500ms ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: ckw_s;
    -webkit-animation-duration: 0.5s;
}
#outer2 {
    background: url(../images/outer2.png) no-repeat left center;
}
div.loader div#outer2{
    -moz-animation-iteration-count: 5;
    -moz-animation-name: cckw;
    -moz-animation-duration: 1.84s;

    -webkit-animation-iteration-count: 5;
    -webkit-animation-name: cckw;
    -webkit-animation-duration: 1.84s;
}
div.echo div#outer2{
    -moz-transition-property: -moz-transform;
    -moz-transform: all  600ms ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: cckw_s;
    -moz-animation-duration: 0.6s;

    -webkit-transition-property: -webkit-transform;
    -webkit-transform: all  600ms ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: cckw_s;
    -webkit-animation-duration: 0.6s;
}
#outer3 {
    background: url(../images/outer3.png) no-repeat left center;
}
div.loader div#outer3{
    -moz-animation-iteration-count: 5;
    -moz-animation-name: ckw;
    -moz-animation-duration: 1.5s;

    -webkit-animation-iteration-count: 5;
    -webkit-animation-name: ckw;
    -webkit-animation-duration: 1.5s;
}
div.echo div#outer3{
    -moz-transition-property: -moz-transform;
    -moz-transform: all  500ms ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: ckw_s;
    -moz-animation-duration: 0.5s;

    -webkit-transition-property: -webkit-transform;
    -webkit-transform: all  1000ms ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: ckw_s;
    -webkit-animation-duration: 0.5s;
}
#outer4 {
    background: url(../images/outer4.png) no-repeat left center;
}
div.loader div#outer4{
    -moz-animation-iteration-count: 5 ;/*infinite;*/
    -moz-animation-name: cckw;
    -moz-animation-duration: 2.2s;

    -webkit-animation-iteration-count: 5 ;/*5;*/
    -webkit-animation-name: cckw;
    -webkit-animation-duration: 2.2s;
}
div.echo div#outer4{
    -moz-transition-property: -moz-transform;
    -moz-transform: all  600ms ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: cckw_s;/*cckw_s;*/
    -moz-animation-duration: 1.1s;

    -webkit-transition-property: -webkit-transform;
    -webkit-transform: all  600ms ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: cckw_s;/*cckw_s;*/
    -webkit-animation-duration: 0.6s;
}

/* CSS3 keyframes*/
@-webkit-keyframes ckw {
    0% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw{
    0% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw{
    0% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
100% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
    0% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
100% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
}

@-webkit-keyframes ckw_s {
    0% {
    -webkit-transform: all  1800ms ease-in-out;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);

}
100% {
    -webkit-transform: all  1800ms ease-in-out;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
}
@-moz-keyframes ckw_s {
    0% {
    -webkit-transform: all  1800ms ease-in-out;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);

}
100% {
    -webkit-transform: all  1800ms ease-in-out;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
}
@-webkit-keyframes cckw_s {
    0% {
    -webkit-transform: all  1800ms ease-in-out;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);

}
100% {
    -webkit-transform: all  1800ms ease-in-out;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
}
@-moz-keyframes cckw_s {
    0% {
        -webkit-transform: all  1800ms ease-in-out;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: all  1800ms ease-in-out;
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}