body {
    overflow-x: hidden; 
    background: #000;
}

/* FOG ANIMATION */
.fogwrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}

#foglayer_01 {
  width: 200%;
  height: 100%;
  position: absolute;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("fog1.png") repeat-x top left transparent;
  background-size: 100%;
  width: 50%;
  height: 100%;
  float: left;
}

#foglayer_02 {
  width: 200%;
  height: 100%;
  position: absolute;
  animation: foglayer_02_opacity 21s linear infinite,
				foglayer_moveme 13s linear infinite;
  -webkit-animation: foglayer_01_opacity 21s linear infinite,
				foglayer_moveme 13s linear infinite;
}
#foglayer_02 .image01, #foglayer_02 .image02 {
  background: url("fog2.png") repeat-x top left transparent;
  background-size: 100%;
  width: 50%;
  height: 100%;
  float: left;
}

#foglayer_03 {
  width: 200%;
  height: 100%;
  position: absolute;
  animation: foglayer_02_opacity 21s linear infinite,
				foglayer_moveme 13s linear infinite;
  -webkit-animation: foglayer_01_opacity 21s linear infinite,
				foglayer_moveme 13s linear infinite;
}
#foglayer_03 .image01, #foglayer_03 .image02 {
  background: url("fog2.png") repeat-x top left transparent;
  background-size: 100%;
  width: 50%;
  height: 100%;
  float: left;
}

@keyframes foglayer_01_opacity {
  0% {
    opacity: .1;
  }
  22% {
    opacity: .5;
  }
  40% {
    opacity: .28;
  }
  58% {
    opacity: .4;
  }
  80% {
    opacity: .16;
  }
  100% {
    opacity: .1;
  }
}
@-webkit-keyframes foglayer_01_opacity {
  0% {
    opacity: .1;
  }
  22% {
    opacity: .5;
  }
  40% {
    opacity: .28;
  }
  58% {
    opacity: .4;
  }
  80% {
    opacity: .16;
  }
  100% {
    opacity: .1;
  }
}

@keyframes foglayer_02_opacity {
  0% {
    opacity: .5;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: .1;
  }
  80% {
    opacity: .3;
  }
  100% {
    opacity: .5;
  }
}
@-webkit-keyframes foglayer_02_opacity {
  0% {
    opacity: .5;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: .1;
  }
  80% {
    opacity: .3;
  }
  100% {
    opacity: .5;
  }
}

@keyframes foglayer_03_opacity {
  0% {
    opacity: .8;
  }
  27% {
    opacity: .2;
  }
  52% {
    opacity: .6;
  }
  68% {
    opacity: .3;
  }
  100% {
    opacity: .8;
  }
}
@-webkit-keyframes foglayer_03_opacity {
  0% {
    opacity: .8;
  }
  27% {
    opacity: .2;
  }
  52% {
    opacity: .6;
  }
  68% {
    opacity: .3;
  }
  100% {
    opacity: .8;
  }
}

@keyframes foglayer_moveme {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@-webkit-keyframes foglayer_moveme {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}