.glitch_inf_style1:hover {
  position: relative;
  animation: flicker_inf_style1 1s infinite steps(2, end);
}

.glitch_inf_style1:hover::before,
.glitch_inf_style1:hover::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  /*color: white;*/
  width: 100%;
  overflow: hidden;
}

.glitch_inf_style1:hover::before {
  color: #f0f;
  z-index: -1;
  clip-path: inset(0 0 50% 0);
  animation: glitchTop_inf_style1 0.3s infinite;
}

.glitch_inf_style1:hover::after {
  color: #0ff;
  z-index: -1;
  clip-path: inset(50% 0 0 0);
  animation: glitchBottom_inf_style1 0.3s infinite;
}

@keyframes glitchTop_inf_style1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, -2px);
  }
  40% {
    transform: translate(-5px, 2px);
  }
  60% {
    transform: translate(5px, -1px);
  }
  80% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes glitchBottom_inf_style1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(2px, 2px);
  }
  40% {
    transform: translate(5px, -2px);
  }
  60% {
    transform: translate(-5px, 1px);
  }
  80% {
    transform: translate(2px, -1px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes flicker_inf_style1 {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }

  20%, 22%, 24%, 55% {
    opacity: 0.4;
  }
}


.glitch_btn_style1{}
.glitch_btn_style1:hover {
  /*color: white;*/
  position: relative;
  animation: flicker_inf_style1 1s infinite steps(2, end);
}

.glitch_btn_style1:hover::before,
.glitch_btn_style1:hover::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  /*color: white;*/
  width: 100%;
  overflow: hidden;
}

.glitch_btn_style1:hover::before {
  color: #f0f;
  z-index: -1;
  clip-path: inset(0 0 50% 0);
  animation: glitchTop_inf_style1 0.3s infinite;
}

.glitch_btn_style1:hover::after {
  color: #0ff;
  z-index: -1;
  clip-path: inset(50% 0 0 0);
  animation: glitchBottom_inf_style1 0.3s infinite;
}







.b_glitch_container:hover > .glitch_btn_style1 {
  /*color: white;*/
  position: relative;
  animation: flicker_inf_style1 1s infinite steps(2, end);
}

.b_glitch_container:hover > .glitch_btn_style1::before,
.b_glitch_container:hover > .glitch_btn_style1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  /*color: white;*/
  width: 100%;
  overflow: hidden;
}

.b_glitch_container:hover > .glitch_btn_style1::before {
  color: #f0f;
  z-index: -1;
  clip-path: inset(0 0 50% 0);
  animation: glitchTop_inf_style1 0.3s infinite;
}

.b_glitch_container:hover > .glitch_btn_style1::after {
  color: #0ff;
  z-index: -1;
  clip-path: inset(50% 0 0 0);
  animation: glitchBottom_inf_style1 0.3s infinite;
}






/*DIV GLITCH*/
.glitch_div_container {
  position: relative;
  border: 3px solid white;
  animation: flicker_box 1s infinite steps(2, end);
}

.glitch_div_container::before,
.glitch_div_container::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  z-index: -1;
}

.glitch_div_container::before {
  color: #f0f;
  background: pink;
  clip-path: inset(0 0 50% 0);
  animation: glitch_top_box 0.3s infinite;
}

.glitch_div_container::after {
  color: #0ff;
  background: aqua;
  clip-path: inset(50% 0 0 0);
  animation: glitch_bottom_box 0.3s infinite;
}

@keyframes glitch_top_box {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-2px); }
  40%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  80%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes glitch_bottom_box {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(2px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

@keyframes flicker_box {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }

  20%, 22%, 24%, 55% {
    opacity: 0.4;
  }
}


























.glitch_lowpower_inf_style1 {
  position: relative;
  animation: flicker_lowpower_inf_style1 3s infinite steps(2, end);
}

.glitch_lowpower_inf_style1::before,
.glitch_lowpower_inf_style1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  /*color: white;*/
  width: 100%;
  overflow: hidden;
}

.glitch_lowpower_inf_style1::before {
  color: #f0f;
  z-index: -1;
  clip-path: inset(0 0 50% 0);
  animation: glitchTop_lowpower_inf_style1 3s infinite;
}

.glitch_lowpower_inf_style1::after {
  color: #0ff;
  z-index: -1;
  clip-path: inset(50% 0 0 0);
  animation: glitchBottom_lowpower_inf_style1 3s infinite;
}

@keyframes glitchTop_lowpower_inf_style1
{
  0% {transform: translate(3px,0px);}
  3% {transform: translate(-1px, -1px);}
 6% {transform: translate(-0px, 0px);}
  9% {transform: translate(1px, -1px);}
  12% {transform: translate(-1px, 1px);}
 15% {transform: translate(3px,0px);}
  100% {transform: translate(3px,0px);}
}

@keyframes glitchBottom_lowpower_inf_style1 {
  0% {transform: translate(3px,0px);}
  3% {transform: translate(0.3px, 0.3px);}
  6% {transform: translate(1px, -0.3px);}
  9% {transform: translate(-1px, 0px);}
  12% {transform: translate(1px, -0px);}
  15% {transform: translate(3px,0px);}
  100%{transform: translate(3px,0px);}
}

@keyframes flicker_lowpower_inf_style1 {
  0%, 5%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }

   4%, 18% {
    opacity: 0.75;
  }

}
