.load-bar {
    position:fixed;
    bottom:0;
    height:5px;
    width:100%;
    opacity: 1;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.load-bar.invisible {
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.load-bar-container {
    float:left;
    width:50%;
    height:100%;
    overflow:hidden
}

.load-bar .load-bar-container:last-child {
    float:right;
    -moz-transform-origin:top right;
    -ms-transform-origin:top right;
    -webkit-transform-origin:top right
}

.load-bar-base {
    float:left;
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    background:#159756
}

.color {
    width:100%;
    height:100%;
    float:left;
    position:absolute
}

.base1 .red {
    background:#da4733;
    -webkit-animation:move_left_red 4s infinite linear;
    -moz-animation:move_left_red 4s infinite linear;
    -ms-animation:move_left_red 4s infinite linear;
    animation:move_left_red 4s infinite linear
}

.base1 .blue {
    background:#3b78e7;
    -webkit-animation:move_left_blue 4s infinite linear;
    -moz-animation:move_left_blue 4s infinite linear;
    -ms-animation:move_left_blue 4s infinite linear;
    animation:move_left_blue 4s infinite linear
}

.base1 .yellow {
    background:#fdba2c;
    -webkit-animation:move_left_yellow 4s infinite linear;
    -moz-animation:move_left_yellow 4s infinite linear;
    -ms-animation:move_left_yellow 4s infinite linear;
    animation:move_left_yellow 4s infinite linear
}

.base1 .green {
    background:#159756;
    -webkit-animation:move_left_green 4s infinite linear;
    -moz-animation:move_left_green 4s infinite linear;
    -ms-animation:move_left_green 4s infinite linear;
    animation:move_left_green 4s infinite linear
}

@-webkit-keyframes move_left_red {
0% {
    -webkit-transform:translateX(100%)
}

25% {
    -webkit-transform:translateX(0%)
}

50% {
    -webkit-transform:translateX(0%)
}

75% {
    -webkit-transform:translateX(0%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_left_red {
0% {
    -moz-transform:translateX(100%)
}

25% {
    -moz-transform:translateX(0%)
}

50% {
    -moz-transform:translateX(0%)
}

75% {
    -moz-transform:translateX(0%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_left_red {
0% {
    -ms-transform:translateX(100%)
}

25% {
    -ms-transform:translateX(0%)
}

50% {
    -ms-transform:translateX(0%)
}

75% {
    -ms-transform:translateX(0%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_left_red {
0% {
    transform:translateX(100%)
}

25% {
    transform:translateX(0%)
}

50% {
    transform:translateX(0%)
}

75% {
    transform:translateX(0%)
}

100% {
    transform:translateX(0%)
}
}

@-webkit-keyframes move_left_blue {
0% {
    -webkit-transform:translateX(100%)
}

25% {
    -webkit-transform:translateX(100%)
}

50% {
    -webkit-transform:translateX(0%)
}

75% {
    -webkit-transform:translateX(0%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_left_blue {
0% {
    -moz-transform:translateX(100%)
}

25% {
    -moz-transform:translateX(100%)
}

50% {
    -moz-transform:translateX(0%)
}

75% {
    -moz-transform:translateX(0%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_left_blue {
0% {
    -ms-transform:translateX(100%)
}

25% {
    -ms-transform:translateX(100%)
}

50% {
    -ms-transform:translateX(0%)
}

75% {
    -ms-transform:translateX(0%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_left_blue {
0% {
    transform:translateX(100%)
}

25% {
    transform:translateX(100%)
}

50% {
    transform:translateX(0%)
}

75% {
    transform:translateX(0%)
}

100% {
    transform:translateX(0%)
}
}

@-webkit-keyframes move_left_yellow {
0% {
    -webkit-transform:translateX(100%)
}

25% {
    -webkit-transform:translateX(100%)
}

50% {
    -webkit-transform:translateX(100%)
}

75% {
    -webkit-transform:translateX(0%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_left_yellow {
0% {
    -moz-transform:translateX(100%)
}

25% {
    -moz-transform:translateX(100%)
}

50% {
    -moz-transform:translateX(100%)
}

75% {
    -moz-transform:translateX(0%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_left_yellow {
0% {
    -ms-transform:translateX(100%)
}

25% {
    -ms-transform:translateX(100%)
}

50% {
    -ms-transform:translateX(100%)
}

75% {
    -ms-transform:translateX(0%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_left_yellow {
0% {
    transform:translateX(100%)
}

25% {
    transform:translateX(100%)
}

50% {
    transform:translateX(100%)
}

75% {
    transform:translateX(0%)
}

100% {
    transform:translateX(0%)
}
}

@-webkit-keyframes move_left_green {
0% {
    -webkit-transform:translateX(100%)
}

25% {
    -webkit-transform:translateX(100%)
}

50% {
    -webkit-transform:translateX(100%)
}

75% {
    -webkit-transform:translateX(100%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_left_green {
0% {
    -moz-transform:translateX(100%)
}

25% {
    -moz-transform:translateX(100%)
}

50% {
    -moz-transform:translateX(100%)
}

75% {
    -moz-transform:translateX(100%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_left_green {
0% {
    -ms-transform:translateX(100%)
}

25% {
    -ms-transform:translateX(100%)
}

50% {
    -ms-transform:translateX(100%)
}

75% {
    -ms-transform:translateX(100%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_left_green {
0% {
    transform:translateX(100%)
}

25% {
    transform:translateX(100%)
}

50% {
    transform:translateX(100%)
}

75% {
    transform:translateX(100%)
}

100% {
    transform:translateX(0%)
}
}

.base2 .red {
    background:#da4733;
    -webkit-animation:move_right_red 4s infinite linear;
    -moz-animation:move_right_red 4s infinite linear;
    -ms-animation:move_right_red 4s infinite linear;
    animation:move_right_red 4s infinite linear
}

.base2 .blue {
    background:#3b78e7;
    -webkit-animation:move_right_blue 4s infinite linear;
    -moz-animation:move_right_blue 4s infinite linear;
    -ms-animation:move_right_blue 4s infinite linear;
    animation:move_right_blue 4s infinite linear
}

.base2 .yellow {
    background:#fdba2c;
    -webkit-animation:move_right_yellow 4s infinite linear;
    -moz-animation:move_right_yellow 4s infinite linear;
    -ms-animation:move_right_yellow 4s infinite linear;
    animation:move_right_yellow 4s infinite linear
}

.base2 .green {
    background:#159756;
    -webkit-animation:move_right_green 4s infinite linear;
    -moz-animation:move_right_green 4s infinite linear;
    -ms-animation:move_right_green 4s infinite linear;
    animation:move_right_green 4s infinite linear
}

@-webkit-keyframes move_right_red {
0% {
    -webkit-transform:translateX(-100%)
}

25% {
    -webkit-transform:translateX(0%)
}

50% {
    -webkit-transform:translateX(0%)
}

75% {
    -webkit-transform:translateX(0%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_right_red {
0% {
    -moz-transform:translateX(-100%)
}

25% {
    -moz-transform:translateX(0%)
}

50% {
    -moz-transform:translateX(0%)
}

75% {
    -moz-transform:translateX(0%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_right_red {
0% {
    -ms-transform:translateX(-100%)
}

25% {
    -ms-transform:translateX(0%)
}

50% {
    -ms-transform:translateX(0%)
}

75% {
    -ms-transform:translateX(0%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_right_red {
0% {
    transform:translateX(-100%)
}

25% {
    transform:translateX(0%)
}

50% {
    transform:translateX(0%)
}

75% {
    transform:translateX(0%)
}

100% {
    transform:translateX(0%)
}
}

@-webkit-keyframes move_right_blue {
0% {
    -webkit-transform:translateX(-100%)
}

25% {
    -webkit-transform:translateX(-100%)
}

50% {
    -webkit-transform:translateX(0%)
}

75% {
    -webkit-transform:translateX(0%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_right_blue {
0% {
    -moz-transform:translateX(-100%)
}

25% {
    -moz-transform:translateX(-100%)
}

50% {
    -moz-transform:translateX(0%)
}

75% {
    -moz-transform:translateX(0%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_right_blue {
0% {
    -ms-transform:translateX(-100%)
}

25% {
    -ms-transform:translateX(-100%)
}

50% {
    -ms-transform:translateX(0%)
}

75% {
    -ms-transform:translateX(0%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_right_blue {
0% {
    transform:translateX(-100%)
}

25% {
    transform:translateX(-100%)
}

50% {
    transform:translateX(0%)
}

75% {
    transform:translateX(0%)
}

100% {
    transform:translateX(0%)
}
}

@-webkit-keyframes move_right_yellow {
0% {
    -webkit-transform:translateX(-100%)
}

25% {
    -webkit-transform:translateX(-100%)
}

50% {
    -webkit-transform:translateX(-100%)
}

75% {
    -webkit-transform:translateX(0%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_right_yellow {
0% {
    -moz-transform:translateX(-100%)
}

25% {
    -moz-transform:translateX(-100%)
}

50% {
    -moz-transform:translateX(-100%)
}

75% {
    -moz-transform:translateX(0%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_right_yellow {
0% {
    -ms-transform:translateX(-100%)
}

25% {
    -ms-transform:translateX(-100%)
}

50% {
    -ms-transform:translateX(-100%)
}

75% {
    -ms-transform:translateX(0%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_right_yellow {
0% {
    transform:translateX(-100%)
}

25% {
    transform:translateX(-100%)
}

50% {
    transform:translateX(-100%)
}

75% {
    transform:translateX(0%)
}

100% {
    transform:translateX(0%)
}
}

@-webkit-keyframes move_right_green {
0% {
    -webkit-transform:translateX(-100%)
}

25% {
    -webkit-transform:translateX(-100%)
}

50% {
    -webkit-transform:translateX(-100%)
}

75% {
    -webkit-transform:translateX(-100%)
}

100% {
    -webkit-transform:translateX(0%)
}
}

@-moz-keyframes move_right_green {
0% {
    -moz-transform:translateX(-100%)
}

25% {
    -moz-transform:translateX(-100%)
}

50% {
    -moz-transform:translateX(-100%)
}

75% {
    -moz-transform:translateX(-100%)
}

100% {
    -moz-transform:translateX(0%)
}
}

@-ms-keyframes move_right_green {
0% {
    -ms-transform:translateX(-100%)
}

25% {
    -ms-transform:translateX(-100%)
}

50% {
    -ms-transform:translateX(-100%)
}

75% {
    -ms-transform:translateX(-100%)
}

100% {
    -ms-transform:translateX(0%)
}
}

@keyframes move_right_green {
0% {
    transform:translateX(-100%)
}

25% {
    transform:translateX(-100%)
}

50% {
    transform:translateX(-100%)
}

75% {
    transform:translateX(-100%)
}

100% {
    transform:translateX(0%)
}
}