:root{
    --shake_opacity: 0.25;
    --shake_blendmode: normal;
    --shake_maskimage: none;
    --shake_zindex: 0;
    --shake_maskrepeat: no-repeat;
    --shake_maskposition: center center;
    --shake_masksize: auto 100%;
}

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

#sitefx_shake .sitefx_container{
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;

    background-image: url(../../img/background_shake.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 0%;
    
    -webkit-animation-name: shakeAnimation;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}


#sitefx_shake{
    mix-blend-mode: var(--shake_blendmode);

    z-index: var(--shake_zindex);

    mask-image: var(--shake_maskimage);
    mask-repeat: var(--shake_maskrepeat);
    mask-position: var(--shake_maskposition);
    mask-size: var(--shake_masksize);

}

@media (max-aspect-ratio: 16/9) {
  #shake{
    mask-size: 100% 100%;
  }
}

@-webkit-keyframes shakeAnimation {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  87% {
    opacity: 0;
  }
  92% {
    opacity: 0;
    width: 100%;
  }
  95% {
    opacity: var(--shake_opacity);
    width: 101%;
  }
  to {
    opacity: 0;
    width: 100%;
  }
}