:root{
    --fog_opacity: 0.066;
    --fog_blendmode: lighten;
    --fog_zindex: 1;
    --fog_maskrepeat: no-repeat;
    --fog_maskposition: center center;
    --fog_masksize: auto 100%;
}

#sitefx_fog
{
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    pointer-events: none;
    overflow: hidden;
}

#sitefx_fog .sitefx_container
{
    position: fixed; width: 200vw; height: 200vw;  top: 50vh; left: -50vw;
   
    background: url(../../img/fog.png) repeat-x 0 center;
    background-size: contain; 
    -webkit-animation-name: fogAnimation;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

/* BLEND */

  #sitefx_fog
  { 
    opacity: var(--fog_opacity);
    mix-blend-mode: var(--fog_blendmode);

    z-index: var(--fog_zindex);

    mask-image: var(--fog_maskimage);
    mask-repeat: var(--fog_maskrepeat);
    mask-position: var(--fog_maskposition);
    mask-size: var(--fog_masksize);
  }


/* ANIMATION */

  @-webkit-keyframes fogAnimation {
    from {
      -webkit-transform: rotate(0deg);
      margin-top: -50%;
    }
    50% {
      margin-top: -100%;
    }
    to {
      -webkit-transform: rotate(360deg);
      margin-top: -50%;
    }
  }