/* 
  MIXIN(S)
  =================
 /chriscoyier/pen/FwJux


  (TEXT) PARAMS
  =================
  1. Namespace
  2. Intensity
  3. Text color
  4. Background color (flat)
  5. Highlight #1 color
  6. Highlight #2 color
  7. Width (px)
  8. Height (px)
*/
@import "css3";

@keyframes thegoodsucc-anim-1 {
  0% {
    clip: rect(13px, 100px, 45px, 20);
  }
  6.66667% {
    clip: rect(68px, 100px, 94px, 0);
  }
  13.33333% {
    clip: rect(37px, 100px, 86px, 0);
  }
  20% {
    clip: rect(96px, 100px, 83px, 0);
  }
  26.66667% {
    clip: rect(76px, 100px, 85px, 0);
  }
  33.33333% {
    clip: rect(24px, 100px, 76px, 0);
  }
  40% {
    clip: rect(65px, 100px, 16px, 0);
  }
  46.66667% {
    clip: rect(78px, 100px, 22px, 0);
  }
  53.33333% {
    clip: rect(7px, 100px, 92px, 0);
  }
  60% {
    clip: rect(62px, 100px, 11px, 0);
  }
  66.66667% {
    clip: rect(80px, 100px, 73px, 0);
  }
  73.33333% {
    clip: rect(70px, 100px, 10px, 0);
  }
  80% {
    clip: rect(31px, 100px, 13px, 0);
  }
  86.66667% {
    clip: rect(8px, 100px, 31px, 0);
  }
  93.33333% {
    clip: rect(23px, 100px, 82px, 0);
  }
  100% {
    clip: rect(63px, 100px, 97px, 0);
  }
}
@keyframes thegoodsucc-anim-2 {
  0% {
    clip: rect(76px, 100px, 2px, 0);
  }
  6.66667% {
    clip: rect(62px, 100px, 6px, 0);
  }
  13.33333% {
    clip: rect(13px, 100px, 77px, 0);
  }
  20% {
    clip: rect(3px, 100px, 35px, 0);
  }
  26.66667% {
    clip: rect(75px, 100px, 23px, 0);
  }
  33.33333% {
    clip: rect(40px, 100px, 59px, 0);
  }
  40% {
    clip: rect(61px, 100px, 32px, 0);
  }
  46.66667% {
    clip: rect(99px, 100px, 34px, 0);
  }
  53.33333% {
    clip: rect(98px, 100px, 42px, 0);
  }
  60% {
    clip: rect(63px, 100px, 32px, 0);
  }
  66.66667% {
    clip: rect(57px, 100px, 69px, 0);
  }
  73.33333% {
    clip: rect(81px, 100px, 43px, 0);
  }
  80% {
    clip: rect(14px, 100px, 18px, 0);
  }
  86.66667% {
    clip: rect(82px, 100px, 18px, 0);
  }
  93.33333% {
    clip: rect(29px, 100px, 94px, 0);
  }
  100% {
    clip: rect(51px, 100px, 58px, 0);
  }
}

@keyframes test-anim-2 {
  0% {
    clip: rect(127px, 9999px, 177px, 0);
  }
  5% {
    clip: rect(143px, 9999px, 197px, 0);
  }
  10% {
    clip: rect(5px, 9999px, 36px, 0);
  }
  15% {
    clip: rect(118px, 9999px, 117px, 0);
  }
  20% {
    clip: rect(31px, 9999px, 61px, 0);
  }
  25% {
    clip: rect(197px, 9999px, 127px, 0);
  }
  30% {
    clip: rect(131px, 9999px, 120px, 0);
  }
  35% {
    clip: rect(80px, 9999px, 26px, 0);
  }
  40% {
    clip: rect(157px, 9999px, 39px, 0);
  }
  45% {
    clip: rect(127px, 9999px, 44px, 0);
  }
  50% {
    clip: rect(160px, 9999px, 84px, 0);
  }
  55% {
    clip: rect(200px, 9999px, 23px, 0);
  }
  60% {
    clip: rect(116px, 9999px, 140px, 0);
  }
  65% {
    clip: rect(200px, 9999px, 109px, 0);
  }
  70% {
    clip: rect(103px, 9999px, 2px, 0);
  }
  75% {
    clip: rect(79px, 9999px, 149px, 0);
  }
  80% {
    clip: rect(57px, 9999px, 73px, 0);
  }
  85% {
    clip: rect(5px, 9999px, 175px, 0);
  }
  90% {
    clip: rect(2px, 9999px, 168px, 0);
  }
  95% {
    clip: rect(67px, 9999px, 68px, 0);
  }
  100% {
    clip: rect(175px, 9999px, 104px, 0);
  }
}

@keyframes test-anim-1 {
   0% {
    clip: rect(158px, 9999px, 68px, 0);
  }
  5% {
    clip: rect(59px, 9999px, 33px, 0);
  }
  10% {
    clip: rect(27px, 9999px, 95px, 0);
  }
  15% {
    clip: rect(56px, 9999px, 130px, 0);
  }
  20% {
    clip: rect(187px, 9999px, 165px, 0);
  }
  25% {
    clip: rect(18px, 9999px, 51px, 0);
  }
  30% {
    clip: rect(136px, 9999px, 60px, 0);
  }
  35% {
    clip: rect(2px, 9999px, 132px, 0);
  }
  40% {
    clip: rect(176px, 9999px, 122px, 0);
  }
  45% {
    clip: rect(190px, 9999px, 172px, 0);
  }
  50% {
    clip: rect(140px, 9999px, 47px, 0);
  }
  55% {
    clip: rect(99px, 9999px, 109px, 0);
  }
  60% {
    clip: rect(89px, 9999px, 45px, 0);
  }
  65% {
    clip: rect(103px, 9999px, 79px, 0);
  }
  70% {
    clip: rect(177px, 9999px, 171px, 0);
  }
  75% {
    clip: rect(63px, 9999px, 105px, 0);
  }
  80% {
    clip: rect(76px, 9999px, 36px, 0);
  }
  85% {
    clip: rect(61px, 9999px, 78px, 0);
  }
  90% {
    clip: rect(8px, 9999px, 30px, 0);
  }
  95% {
    clip: rect(37px, 9999px, 159px, 0);
  }
  100% {
    clip: rect(18px, 9999px, 100px, 0);
  }
}

.thegoodsucc  > img {
  position: absolute;
  top: 0px;
  left: 0px;
    width:200px;
  height: 200px;
 
}


.thegoodsucc  > img:hover {
  position: absolute;
  top: 0px;
  left: 0px;
  width:200px;
  height: 200px;

}

.thegoodsucc  > img  :hover::after {
  position: absolute;
  top: 0px;
  left: 0px;
 
}
.thegoodsucc >  img:hover:nth-child(2), 
.thegoodsucc >  img:hover:nth-child(1) {
  clip: rect(0, 0, 0, 0);
}


.thegoodsucc > img:nth-child(2) {
  left: 0px;
  animation: test-anim-1 2s infinite linear alternate-reverse,test-anim-2 1s infinite linear alternate-reverse;

}
.thegoodsucc > img:hover:nth-child(1) {
   animation: animation: thegoodsucc-anim-1 1s infinite linear alternate-reverse;

}
.thegoodsucc >  img:hover:nth-child(3){opacity: .10;}