/*
    cattocss | 2024 | MIT License  
    A project by: Avalojandro | https://github.com/Avalojandro/Catto-CSS 
*/

/*******************************************************************************************/

/*HOVER ANIMATIONS*/

/*h-float*/
.h-float{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-float:hover{
    box-shadow: 0 8px 8px 0 #000000,0 8px 8px 0 #000000;
    transform: translate(0px,5px);
        -webkit-transform: translate(0px,5px);
        -moz-transform:translate(0px,5px);
}

/*h-rotate*/
.h-rotate-180{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-rotate-180:hover{
    transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
}
.h-rotate-360{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-rotate-360:hover{
    transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
}

/*h-flex*/
.h-flex{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-flex:hover{
    transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0);
        -webkit-transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0);
        -moz-transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0);
}

/*h-translate*/
.h-transLeft{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-transLeft:hover{
    transform: translatex(-20px);
        -webkit-transform: translatex(-20px);
        -moz-transform: translatex(-20px);
}
.h-transRight{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-transRight:hover{
    transform: translatex(20px);
        -webkit-transform: translatex(20px);
        -moz-transform: translatex(20px);
}
.h-transDown{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;    
}
.h-transDown:hover{
    transform: translatey(20px);
        -webkit-transform: translatey(20px);
        -moz-transform: translatey(20px);
}
.h-transUp{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-transUp:hover{
    transform: translatey(-20px);
        -webkit-transform: translatey(-20px);
        -moz-transform: translatey(-20px);
}

/*h-tostretch*/
.h-toStretch{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-toStretch:hover{
    transform: scale(2, 0.5);
        -webkit-transform: scale(1.2, 0.5);
        -moz-transform: scale(1.2, 0.5);
}

/*h-skew*/
.h-skew{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-skew:hover{
    transform: skew(30deg, 20deg);
        -webkit-transform: skew(30deg, 20deg);
        -moz-transform: skew(30deg, 20deg);
}
.h-skewX{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-skewX:hover{
    transform: skewX(30deg);
        -webkit-transform: skewX(30deg);
        -moz-transform: skewX(30deg);
}
.h-skewY{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-skewY:hover{
    transform: skewY(1.07rad);
        -webkit-transform: skewY(15deg);
        -moz-transform: skewY(15deg);
}

/*h-float-fluid*/
.h-float-fluid{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-float-fluid:hover{
    transform: translate3d(12px, 50%, 3em);
        -webkit-transform: translate3d(12px, 50%, 3em);
        -moz-transform: translate3d(12px, 50%, 3em);
    box-shadow: 0 8px 8px 0 #000000,0 8px 8px 0 #000000;
}

/*h-grow*/
.h-grow{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-grow:hover{
    transform: scale3d(1.5, 1.5, 0.3);
        -webkit-transform: scale3d(1.5, 1.5, 0.3);
        -moz-transform: scale3d(1.5, 1.5, 0.3);
}

/*h-flip*/
.h-flipUp-360{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-flipUp-360:hover{
    transform: rotateX(360deg);
        -webkit-transform: rotateX(360deg);
        -moz-transform: rotateX(360deg);
}
.h-flipUp-180{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-flipUp-180:hover{
    transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
}
.h-flipSide-180{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-flipSide-180:hover{
    transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
}
.h-flipSide-360{
    transition: .5s, color .10s;
        -webkit-transition: .5s, color .10s;
        -moz-transition: .5s, color .10s;
}
.h-flipSide-360:hover{
    transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
}

/*h-shake*/
.h-shake:hover{
    animation-name: shake;
        -webkit-animation-name: shake;
        -moz-animation-name: shake;
    animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
    animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
}

@keyframes shake {
    0%  {transform: translate(1px, 1px) rotate(0deg);}
    10% {transform: translate(-1px, -2px) rotate(-1deg);}
    20% {transform: translate(-3px, 0px) rotate(1deg);}
    30% {transform: translate(3px, 2px) rotate(0deg);}
    40% {transform: translate(1px, -1px) rotate(1deg);}
    50% {transform: translate(-1px, 2px) rotate(-1deg);}
    60% {transform: translate(-3px, 1px) rotate(0deg);}
    70% {transform: translate(3px, 1px) rotate(-1deg);}
    80% {transform: translate(-1px, -1px) rotate(1deg);}
    90% {transform: translate(1px, 2px) rotate(0deg);}
    100% {transform: translate(1px, -2px) rotate(-1deg);}
}

.h-shakeFix:hover{
    animation-name: shakefix;
        -webkit-animation-name: shakefix;
        -moz-animation-name: shakefix;
    animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
    animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
}

@keyframes shakefix {
    0%  {transform: translate(1px, 1px);}
    10% {transform: translate(-1px, -2px);}
    20% {transform: translate(-3px, 0px);}
    30% {transform: translate(3px, 2px);}
    40% {transform: translate(1px, -1px);}
    50% {transform: translate(-1px, 2px);}
    60% {transform: translate(-3px, 1px);}
    70% {transform: translate(3px, 1px);}
    80% {transform: translate(-1px, -1px);}
    90% {transform: translate(1px, 2px);}
    100% {transform: translate(1px, -2px);}
}

.h-bounceShakeX:hover{
    animation-name: bounce-shakeX;
        -webkit-animation-name: bounce-shakeX;
        -moz-animation-name: bounce-shakeX;
    animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
}

@keyframes bounce-shakeX{
    0% {transform: translate(-50%,0px);}
    12% {transform: translate(50%,0px);}
    24% {transform: translate(-20%,0px);}
    36% {transform: translate(20%,0px);}
    48% {transform: translate(-10%,0px);}
    60% {transform: translate(10%,0px);}
    72% {transform: translate(-5%,0px);}
    84% {transform: translate(5%,0px);}
    96% {transform: translate(0%,0px);}
    100% {transform: translate(0%,0px);}
}

.h-bounceShakeY:hover{
    animation-name: bounce-shakeY;
        -webkit-animation-name: bounce-shakeY;
        -moz-animation-name: bounce-shakeY;
    animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
}

@keyframes bounce-shakeY{
    0%  {transform: translateY(-50%);}
    12% {transform: translateY(50%);}
    24% {transform: translateY(-20%);}
    36% {transform: translateY(20%);}
    48% {transform: translateY(-10%);}
    60% {transform: translateY(10%);}
    72% {transform: translateY(-5%);}
    84% {transform: translateY(5%);}
    96% {transform: translateY(0%);}
    100% {transform: translateY(0%);}
}

.h-surprise:hover{
    animation-name: surprise;
        -webkit-animation-name: surprise;
        -moz-animation-name: surprise;
    animation-duration: .8s;
        -webkit-animation-duration: .8s;
        -moz-animation-duration: .8s;
}

@keyframes surprise
{
    0% {transform: rotate(0deg) scale(1,1);;}
    10% {transform: rotate(7deg) scale(2,2);}
    20% {transform: rotate(-7deg) scale(2,2);}
    30% {transform: rotate(7deg) scale(2,2);}
    40% {transform: rotate(-7deg) scale(2,2);}
    50% {transform: rotate(7deg) scale(2,2);}
    60% {transform: rotate(-7deg) scale(2,2);}
    70% {transform: rotate(7deg) scale(2,2);}
    80% {transform: rotate(-7deg) scale(2,2);}
    90% {transform: rotate(7deg) scale(2,2);}
    100% {transform: rotate(0deg) scale(1,1);}
}

/*Jello*/
.h-jello:hover {
    animation-name: jello;
        -webkit-animation-name: jello;
        -moz-animation-name: jello;
    animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
    transform-origin: center;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
}

@keyframes jello {
    from,11.1%,to {transform: translate3d(0, 0, 0);}
    22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
    44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}

/*Swing*/
.h-swing:hover{
    animation-name: swing;
        -webkit-animation-name: swing;
        -moz-animation-name: swing;
    animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
}

@keyframes swing {
    20% {transform: rotate3d(0, 0, 1, 15deg);}
    40% {transform: rotate3d(0, 0, 1, -10deg);}
    60% {transform: rotate3d(0, 0, 1, 5deg);}
    80% {transform: rotate3d(0, 0, 1, -5deg);}
    to  {transform: rotate3d(0, 0, 1, 0deg);}
}

/*INIFINITE ANIMATIONS*/

.i-shake{
animation-name: shake;
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
}

.i-pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .i-bounce {
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes bounce {
    0% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
    100% {transform: translateY(0);}
  }

  .i-spin {
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }

  .i-heartbeat {
    animation-name: heartbeat;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes heartbeat {
    0% {transform: scale(1);}
    25% {transform: scale(1.3);}
    50% {transform: scale(1);}
    75% {transform: scale(0.7);}
    100% {transform: scale(1);}
  }
  
  .i-slide {
    animation-name: slide;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes slide {
    0% {transform: translateX(0);}
    50% {transform: translateX(20px);}
    100% {transform: translateX(0);}
  }
  
  .i-flicker {
    animation-name: flicker;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes flicker {
    0% {opacity: 1;}
    25% {opacity: 0.5;}
    50% {opacity: 1;}
    75% {opacity: 0.5;}
    100% {opacity: 1;}
  }

  .i-rotate {
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }
  
  .i-wobble {
    animation-name: wobble;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes wobble {
    0% {transform: translateX(0) rotate(0deg);}
    15% {transform: translateX(-30px) rotate(-5deg);}
    30% {transform: translateX(15px) rotate(3deg);}
    45% {transform: translateX(-15px) rotate(-3deg);}
    60% {transform: translateX(9px) rotate(2deg);}
    75% {transform: translateX(-6px) rotate(-1deg);}
    100% {transform: translateX(0) rotate(0deg);}
  }