nbn.glitch {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://www.open.online/pandemia-covid-disturbi-alimentari-anime-affamate/img/apertura2.jpg');
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.glitch .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.open.online/pandemia-covid-disturbi-alimentari-anime-affamate/img/apertura2.jpg');
  background-position: center;
  background-size: cover;
  object-fit: cover;
}

@media only screen and (max-width: 480px) {
  .glitch {
    background-image: url('https://www.open.online/pandemia-covid-disturbi-alimentari-anime-affamate/img/apertura3-mob.jpg');
  }
  .glitch .image {
    background-image: url('https://www.open.online/pandemia-covid-disturbi-alimentari-anime-affamate/img/apertura3-mob.jpg');
  }
}

.glitch .image--1 {
  clip-path: polygon(0 40%, 100% 40%, 100% 80%, 0 80%);
  animation: glitch-1 2.5s infinite 5s, glitch-1-flip 5s infinite 5s;
}
.glitch .image--2 {
  clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
  animation: glitch-2 2.5s infinite 5s;
}
.glitch .image--3 {
  clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%);
  animation: glitch-3 2.5s infinite 5s;
}
.glitch .image--4 {
  clip-path: polygon(0 20%, 100% 20%, 100% 25%, 0 25%);
  animation: glitch-4 2.5s infinite 5s;
}
.glitch .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), black);
  animation: fadeIn 5s ease-in-out, gradient 7.5s ease-in-out infinite 5s;
  opacity: 0.25;
}

@keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}
@keyframes gradient {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes glitch-1 {
  0% {
    top: 0;
    left: 0;
  }
  1% {
    top: 10px;
    left: 0;
  }
  2% {
    top: 15px;
    left: 0;
  }
  3% {
    top: 20px;
    left: 0;
  }
  4% {
    top: 5px;
    left: 0;
  }
  5% {
    top: 15px;
    left: 0;
  }
  6% {
    top: 25px;
    left: 0;
  }
  7% {
    top: 35px;
    left: 0;
  }
  8% {
    top: 35px;
    left: -50px;
  }
  9% {
    top: 35px;
    left: -100px;
  }
  10% {
    top: 35px;
    left: -50px;
  }
  11% {
    top: 35px;
    left: 0;
  }
  12% {
    top: 0;
    left: 0;
  }
  13% {
    top: 0;
    left: 0;
  }
  14% {
    top: 0;
    left: 0;
  }
  15% {
    top: 0;
    left: 0;
  }
  16% {
    top: 0;
    left: 20px;
  }
  17% {
    top: 0;
    left: 30px;
  }
  18% {
    top: 0;
    left: 20px;
  }
  19% {
    top: 0;
    left: 0;
  }
  20% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes glitch-1-flip {
  0% {
    transform: scaleX(-1);
  }
  5% {
    transform: scaleX(-1);
  }
  6% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes glitch-2 {
  0% {
    top: 0;
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  51% {
    top: -10px;
    left: 0;
  }
  52% {
    top: -5px;
    left: 0;
  }
  53% {
    top: 0px;
    left: 0;
  }
  54% {
    top: -10px;
    left: 0;
  }
  55% {
    top: -15px;
    left: 0;
  }
  56% {
    top: -15px;
    left: -10px;
  }
  57% {
    top: -15px;
    left: -5px;
  }
  58% {
    top: -15px;
    left: 20px;
  }
  59% {
    top: -15px;
    left: 0;
  }
  60% {
    top: -50px;
    left: 0;
  }
  61% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes glitch-3 {
  0% {
    top: 0;
    left: 0;
  }
  80% {
    top: 0;
    left: 0;
  }
  81% {
    top: 0;
    left: -10px;
  }
  82% {
    top: 0;
    left: 5px;
  }
  83% {
    top: 0;
    left: 0;
  }
  84% {
    top: 10px;
    left: 0;
  }
  85% {
    top: 25px;
    left: 0;
  }
  86% {
    top: 5px;
    left: 0;
  }
  87% {
    top: -30px;
    left: 0;
  }
  88% {
    top: -25px;
    left: 0;
  }
  89% {
    top: -35px;
    left: 0;
  }
  90% {
    top: -20px;
    left: 0;
  }
  91% {
    top: -20px;
    left: 15px;
  }
  92% {
    top: -20px;
    left: 10px;
  }
  93% {
    top: 0;
    left: 0;
  }
  94% {
    top: 15px;
    left: 0;
  }
  95% {
    top: 40px;
    left: 0;
  }
  96% {
    top: 30px;
    left: 0;
  }
  97% {
    top: 20px;
    left: 0;
  }
  98% {
    top: 10px;
    left: 0;
  }
  99% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes glitch-4 {
  0% {
    top: 0;
    left: 0;
  }
  1% {
    top: 5px;
    left: 0;
  }
  2% {
    top: 0;
    left: 0;
  }
  3% {
    top: 20px;
    left: 0;
  }
  4% {
    top: 0;
    left: 0;
  }
  5% {
    top: 0;
    left: 20px;
  }
  6% {
    top: 0;
    left: 10px;
  }
  7% {
    top: 0;
    left: 5px;
  }
  8% {
    top: 0;
    left: -5px;
  }
  9% {
    top: -10px;
    left: -5px;
  }
  10% {
    top: 50px;
    left: -5px;
  }
  11% {
    top: 25px;
    left: -5px;
  }
  12% {
    top: -25px;
    left: -5px;
  }
  13% {
    top: 0;
    left: -5px;
  }
  14% {
    top: 0;
    left: 0;
  }
  15% {
    top: -10px;
    left: 0;
  }
  16% {
    top: -20px;
    left: 0;
  }
  17% {
    top: -30px;
    left: 0;
  }
  18% {
    top: -50px;
    left: 0;
  }
  19% {
    top: -75px;
    left: 0;
  }
  20% {
    top: -150px;
    left: 0;
  }
  100% {
    top: -300px;
    left: 0;
  }
}