:root{
    --frost_opacity: 0.04;
    --frost_blendmode: screen;
    --frost_maskimage: none;
    --frost_maskrepeat: no-repeat;
    --frost_maskposition: center center;
    --frost_masksize: auto 100%;
    --frost_zindex: 0;
}

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

#sitefx_frost .sitefx_container{
    position: fixed; width: 100%; height: 100%; top: 0; left: 0;

    background-image: url(../../img/frost.png);
    background-size: cover;

    -webkit-animation-name: frostAnimation;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}


#sitefx_frost{
    mix-blend-mode: var(--frost_blendmode);
    
    z-index: var(--frost_zindex);

    mask-image: var(--frost_maskimage);
    mask-repeat: var(--frost_maskrepeat);
    mask-position: var(--frost_maskposition);
    mask-size: var(--frost_masksize);
}

@-webkit-keyframes frostAnimation {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  87% {
    opacity: var(--frost_opacity);
  }
  90% {
    opacity: var(--frost_opacity);
  }
  92% {
    opacity: 0.01;
  }
  to {
    opacity: 0;
  }
}


@-webkit-keyframes forceFreeze {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--frost_opacity);
  }
}

@-webkit-keyframes forceUnFreeze {
  from {
    opacity: 0.066;
  }
  to {
    opacity: 0;
  }
}