.bg {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:
    url('../img/mist-clouds/mist4.png') 0 0;
    //url('../img/mist-clouds/mist3.png') 40% 0;
    //url('../img/mist-clouds/mist4.png') 80% 0, #000;
  -webkit-animation: moving-images 1000s ease infinite;
     -moz-animation: moving-images 1000s ease infinite;
       -o-animation: moving-images 1000s ease infinite;
          animation: moving-images 1000s ease infinite;
}

.bg1 {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:
    url('../img/mist-clouds/mist3.png') 0 0;
    //url('../img/mist-clouds/mist3.png') 40% 0;
    //url('../img/mist-clouds/mist4.png') 80% 0, #000;
  -webkit-animation: moving-images 600s ease infinite;
     -moz-animation: moving-images 600s ease infinite;
       -o-animation: moving-images 600s ease infinite;
          animation: moving-images 600s ease infinite;
}

.bg2 {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:
    url('../img/mist-clouds/mist2.png') 0 0;
    //url('../img/mist-clouds/mist3.png') 40% 0;
    //url('../img/mist-clouds/mist4.png') 80% 0, #000;
  -webkit-animation: moving-images 200s ease infinite;
     -moz-animation: moving-images 200s ease infinite;
       -o-animation: moving-images 200s ease infinite;
          animation: moving-images 200s ease infinite;
}

@keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-moz-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-webkit-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-o-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}