/* ==========================================================
   HASHVIX ANIMATIONS
========================================================== */


/* ==========================================================
   FADE IN
========================================================== */

@keyframes hxFadeIn{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hx-fade-in{

animation:hxFadeIn .5s ease both;

}


/* ==========================================================
   FADE UP
========================================================== */

@keyframes hxFadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hx-fade-up{

animation:hxFadeUp .7s ease both;

}


/* ==========================================================
   FADE DOWN
========================================================== */

@keyframes hxFadeDown{

0%{

opacity:0;

transform:translateY(-35px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hx-fade-down{

animation:hxFadeDown .7s ease both;

}


/* ==========================================================
   SCALE
========================================================== */

@keyframes hxScale{

0%{

opacity:0;

transform:scale(.92);

}

100%{

opacity:1;

transform:scale(1);

}

}

.hx-scale-in{

animation:hxScale .45s ease both;

}


/* ==========================================================
   POP
========================================================== */

@keyframes hxPop{

0%{

transform:scale(.85);

}

60%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.hx-pop{

animation:hxPop .4s ease;

}


/* ==========================================================
   FLOAT
========================================================== */

@keyframes hxFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.hx-float{

animation:hxFloat 5s ease-in-out infinite;

}


/* ==========================================================
   PULSE
========================================================== */

@keyframes hxPulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.08);

opacity:.7;

}

100%{

transform:scale(1);

opacity:1;

}

}

.hx-pulse{

animation:hxPulse 2s infinite;

}


/* ==========================================================
   GLOW
========================================================== */

@keyframes hxGlow{

0%{

box-shadow:0 0 0 rgba(79,140,255,0);

}

50%{

box-shadow:0 0 35px rgba(79,140,255,.35);

}

100%{

box-shadow:0 0 0 rgba(79,140,255,0);

}

}

.hx-glow-animation{

animation:hxGlow 3s infinite;

}


/* ==========================================================
   ROTATE
========================================================== */

@keyframes hxRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.hx-rotate{

animation:hxRotate 10s linear infinite;

}


/* ==========================================================
   SPIN
========================================================== */

@keyframes hxSpin{

to{

transform:rotate(360deg);

}

}

.hx-spin{

animation:hxSpin 1s linear infinite;

}


/* ==========================================================
   BOUNCE
========================================================== */

@keyframes hxBounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

.hx-bounce{

animation:hxBounce 1.5s infinite;

}


/* ==========================================================
   SHAKE
========================================================== */

@keyframes hxShake{

0%,100%{

transform:translateX(0);

}

20%{

transform:translateX(-5px);

}

40%{

transform:translateX(5px);

}

60%{

transform:translateX(-5px);

}

80%{

transform:translateX(5px);

}

}

.hx-shake{

animation:hxShake .5s;

}


/* ==========================================================
   GRADIENT
========================================================== */

@keyframes hxGradient{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

.hx-gradient{

background-size:300% 300%;

animation:hxGradient 8s linear infinite;

}


/* ==========================================================
   MARQUEE
========================================================== */

@keyframes hxMarquee{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-120%);

}

}

.hx-marquee{

white-space:nowrap;

animation:hxMarquee 12s linear infinite;

}


/* ==========================================================
   RIPPLE
========================================================== */

@keyframes hxRipple{

0%{

transform:scale(0);

opacity:.5;

}

100%{

transform:scale(3);

opacity:0;

}

}

.hx-ripple{

position:relative;

overflow:hidden;

}

.hx-ripple::after{

content:"";

position:absolute;

width:20px;

height:20px;

border-radius:50%;

background:rgba(255,255,255,.4);

animation:hxRipple .7s ease;

opacity:0;

}


/* ==========================================================
   BLINK
========================================================== */

@keyframes hxBlink{

0%,100%{

opacity:1;

}

50%{

opacity:.35;

}

}

.hx-blink{

animation:hxBlink 1.2s infinite;

}


/* ==========================================================
   SKELETON
========================================================== */

@keyframes hxSkeleton{

0%{

background-position:-200px 0;

}

100%{

background-position:calc(200px + 100%) 0;

}

}

.hx-skeleton{

background:

linear-gradient(

90deg,

rgba(255,255,255,.05),

rgba(255,255,255,.10),

rgba(255,255,255,.05));

background-size:200px 100%;

animation:hxSkeleton 1.3s infinite linear;

}


/* ==========================================================
   HOVER
========================================================== */

.hx-hover-lift{

transition:.3s;

}

.hx-hover-lift:hover{

transform:translateY(-8px);

}

.hx-hover-scale{

transition:.3s;

}

.hx-hover-scale:hover{

transform:scale(1.05);

}

.hx-hover-rotate{

transition:.3s;

}

.hx-hover-rotate:hover{

transform:rotate(3deg);

}


/* ==========================================================
   DELAYS
========================================================== */

.hx-delay-1{

animation-delay:.1s;

}

.hx-delay-2{

animation-delay:.2s;

}

.hx-delay-3{

animation-delay:.3s;

}

.hx-delay-4{

animation-delay:.4s;

}

.hx-delay-5{

animation-delay:.5s;

}


/* ==========================================================
   DURATION
========================================================== */

.hx-fast{

animation-duration:.3s;

}

.hx-normal{

animation-duration:.6s;

}

.hx-slow{

animation-duration:1.2s;

}