/*--------------------------------------------------------------
# Glitch logo
--------------------------------------------------------------*/
.img-box {
  position: relative;
  width: 900px;
  height: 550px;
  background: url(../img/hero-logo.png) no-repeat center/100% auto;
  filter: brightness(1.2);
}
.img-box:before, .img-box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
}
.img-box:before {
  -webkit-animation: bgHueRotate 1s both infinite;
          animation: bgHueRotate 1s both infinite;
}
.img-box:after {
  -webkit-animation: bgGlitch 1s both infinite;
          animation: bgGlitch 1s both infinite;
}

@-webkit-keyframes bgGlitch {
  0%, 100% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  14% {
    left: 0.5px;
    -webkit-clip-path: inset(24% 0 36% 0);
            clip-path: inset(24% 0 36% 0);
  }
  19%, 9% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  34% {
    left: 1.5px;
    -webkit-clip-path: inset(14% 0 12% 0);
            clip-path: inset(14% 0 12% 0);
  }
  39%, 29% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  53% {
    left: 5.5px;
    -webkit-clip-path: inset(22% 0 10% 0);
            clip-path: inset(22% 0 10% 0);
  }
  58%, 48% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  75% {
    left: -4.5px;
    -webkit-clip-path: inset(24% 0 40% 0);
            clip-path: inset(24% 0 40% 0);
  }
  80%, 70% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  92% {
    left: 0.5px;
    -webkit-clip-path: inset(11% 0 15% 0);
            clip-path: inset(11% 0 15% 0);
  }
  97%, 87% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
}

@keyframes bgGlitch {
  0%, 100% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  14% {
    left: 0.5px;
    -webkit-clip-path: inset(24% 0 36% 0);
            clip-path: inset(24% 0 36% 0);
  }
  19%, 9% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  34% {
    left: 1.5px;
    -webkit-clip-path: inset(14% 0 12% 0);
            clip-path: inset(14% 0 12% 0);
  }
  39%, 29% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  53% {
    left: 5.5px;
    -webkit-clip-path: inset(22% 0 10% 0);
            clip-path: inset(22% 0 10% 0);
  }
  58%, 48% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  75% {
    left: -4.5px;
    -webkit-clip-path: inset(24% 0 40% 0);
            clip-path: inset(24% 0 40% 0);
  }
  80%, 70% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
  92% {
    left: 0.5px;
    -webkit-clip-path: inset(11% 0 15% 0);
            clip-path: inset(11% 0 15% 0);
  }
  97%, 87% {
    left: 0;
    -webkit-clip-path: none;
            clip-path: none;
  }
}
@-webkit-keyframes bgHueRotate {
  0%, 100% {
    filter: none;
  }
  12% {
    filter: hue-rotate(344deg);
  }
  17%, 7% {
    filter: none;
  }
  34% {
    filter: hue-rotate(67deg);
  }
  39%, 29% {
    filter: none;
  }
  55% {
    filter: hue-rotate(193deg);
  }
  60%, 50% {
    filter: none;
  }
  75% {
    filter: hue-rotate(200deg);
  }
  80%, 70% {
    filter: none;
  }
  91% {
    filter: hue-rotate(211deg);
  }
  96%, 86% {
    filter: none;
  }
}
@keyframes bgHueRotate {
  0%, 100% {
    filter: none;
  }
  12% {
    filter: hue-rotate(344deg);
  }
  17%, 7% {
    filter: none;
  }
  34% {
    filter: hue-rotate(67deg);
  }
  39%, 29% {
    filter: none;
  }
  55% {
    filter: hue-rotate(193deg);
  }
  60%, 50% {
    filter: none;
  }
  75% {
    filter: hue-rotate(200deg);
  }
  80%, 70% {
    filter: none;
  }
  91% {
    filter: hue-rotate(211deg);
  }
  96%, 86% {
    filter: none;
  }
}