


  .glitch-container {
      position: relative;
      height: 100%;
      width: auto;
  }

  .main-nav-container .glitch-container img:nth-child(1),
  .main-nav-container .glitch-container svg:nth-child(1),
  .jumbotron .main-icon .glitch-container img:nth-child(1),
  .jumbotron .main-icon .glitch-container svg:nth-child(1){
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  .glitch-container img:nth-child(1),
  .glitch-container svg:nth-child(1) {
      left: 50%;
      position: relative;
      transform: translate(-50%, -0%);
      opacity: 1;
  }
  .glitch-container img:nth-child(2),
  .glitch-container svg:nth-child(2)
   {
    transform: translate(-53%, -53%);
    mix-blend-mode: overlay;
    filter: invert(1);
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
  }
  .glitch-container img:nth-child(3),
  .glitch-container svg:nth-child(3) {
    transform: translate(-47%, -47%);
    mix-blend-mode: overlay;
    filter: hue-rotate(180deg);
    z-index: 9;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
  }

  .glitch-container svg:nth-child(2) *
   {
    fill : red;
  }

  .glitch-container svg:nth-child(3) * {
   fill : blue;
  }


  /* GLITCH */
  @-webkit-keyframes glitch-image-clipPath {
    0% {
      -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
              clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2.5% {
      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
              clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    5% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
              clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    7.5% {
      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
              clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    10% {
      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
              clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    12.5% {
      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
              clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    15% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
              clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    17.5% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
              clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    20% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
              clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    22.5% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
              clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    25% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
              clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    26% {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
              clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    100% {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
              clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
  }
  @keyframes glitch-image-clipPath {
    0% {
      -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
              clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2.5% {
      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
              clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    5% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
              clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    7.5% {
      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
              clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    10% {
      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
              clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    12.5% {
      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
              clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    15% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
              clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    17.5% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
              clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    20% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
              clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    22.5% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
              clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    25% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
              clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    26% {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
              clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    100% {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
              clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
  }


  .glitch-container img:nth-child(2),
  .glitch-container svg:nth-child(2)
  {
    opacity: 1;
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }


  .glitch-container img:nth-child(3),
  .glitch-container svg:nth-child(3)
  {
    opacity: 1;
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }




  /*ANIM*/
  .glitch-container:not(.hover-glitch) img:nth-child(2),
  .glitch-container:not(.hover-glitch) svg:nth-child(2)
  {
    -webkit-animation: glitch-image-clipPath 2s infinite;
            animation: glitch-image-clipPath 2s infinite;
  }
  .glitch-container:not(.hover-glitch) img:nth-child(3),
  .glitch-container:not(.hover-glitch) svg:nth-child(3)
  {
    animation: glitch-image-clipPath reverse 2.3s infinite;
    animation-delay: 250ms;
  }



  /*ANIM ON HOVER*/
  .glitch-container.hover-glitch:hover img:nth-child(2),
  li:hover .glitch-container.hover-glitch img:nth-child(2),
  .hover-glitch-container:hover .glitch-container.hover-glitch img:nth-child(2),
  .glitch-container.hover-glitch:hover svg:nth-child(2),
  li:hover .glitch-container.hover-glitch svg:nth-child(2),
  .hover-glitch-container:hover .glitch-container.hover-glitch svg:nth-child(2)
  {
    -webkit-animation: glitch-image-clipPath 2s infinite;
            animation: glitch-image-clipPath 2s infinite;
  }
  .glitch-container.hover-glitch:hover img:nth-child(3),
  li:hover .glitch-container.hover-glitch img:nth-child(3),
  .hover-glitch-container:hover .glitch-container.hover-glitch img:nth-child(3),
  .glitch-container.hover-glitch:hover svg:nth-child(3),
  li:hover .glitch-container.hover-glitch svg:nth-child(3),
  .hover-glitch-container:hover .glitch-container.hover-glitch svg:nth-child(3)
  {
    animation: glitch-image-clipPath reverse 2.3s infinite;
    animation-delay: 250ms;
  }




  /*GRID CARDS*/
  .target-card .glitch-container img:nth-child(2),
  .target-card .glitch-container svg:nth-child(2),
  .target-card .glitch-container img:nth-child(3),
  .target-card .glitch-container svg:nth-child(3)
  .central-player .glitch-container img:nth-child(2),
  .central-player .glitch-container svg:nth-child(2),
  .central-player .glitch-container img:nth-child(3),
  .central-player .glitch-container svg:nth-child(3)  {
      mix-blend-mode: normal;
    }


  .target-card .glitch-container img:nth-child(2),
  .target-card .glitch-container svg:nth-child(2),
  .central-player .glitch-container img:nth-child(2),
  .central-player .glitch-container svg:nth-child(2){
    transform: translate(-60%, -60%);
  }
  .target-card .glitch-container img:nth-child(3),
  .target-card .glitch-container svg:nth-child(3),
  .central-player .glitch-container img:nth-child(3),
  .central-player .glitch-container svg:nth-child(3)  {
    transform: translate(-40%, -40%);
  }



