/*==========================================================
  Nexia UI Framework
  animations.css
==========================================================*/

/*----------------------------------------------------------
 Fade In
----------------------------------------------------------*/

@keyframes nx-fade-in{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*----------------------------------------------------------
 Slide Up
----------------------------------------------------------*/

@keyframes nx-slide-up{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*----------------------------------------------------------
 Orange Glow Pulse
----------------------------------------------------------*/

@keyframes nx-glow{

    0%{

        box-shadow:0 0 0 rgba(255,149,0,0);

    }

    50%{

        box-shadow:
        0 0 12px rgba(255,149,0,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(255,149,0,0);

    }

}

/*----------------------------------------------------------
 Loading Spinner
----------------------------------------------------------*/

@keyframes nx-spin{

    to{

        transform:rotate(360deg);

    }

}

/*----------------------------------------------------------
 Checkbox Pop
----------------------------------------------------------*/

@keyframes nx-check{

    0%{

        transform:scale(.3);

        opacity:0;

    }

    70%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*----------------------------------------------------------
 Button Press
----------------------------------------------------------*/

@keyframes nx-press{

    50%{

        transform:scale(.98);

    }

}

/*----------------------------------------------------------
 Utility Animation Classes
----------------------------------------------------------*/

.nx-fade{

    animation:nx-fade-in .4s ease;

}

.nx-slide{

    animation:nx-slide-up .45s ease;

}

.nx-glow{

    animation:nx-glow 2s infinite;

}

/* =========================================================
   Scroll Reveal
   ========================================================= */

.nx-scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.41s ease,
        transform 0.41s ease;
    will-change: opacity, transform;
}

.nx-scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}