/* =========================================================
   ANIMATIONS.CSS
   HAZLO FACIL TRAVEL
========================================================= */

/* =========================================================
   FLOATING
========================================================= */

@keyframes floating {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }

    100% {
        transform: translateY(0px);
    }

}

/* =========================================================
   PLANE LOADER
========================================================= */

@keyframes fly {

    0% {

        transform:
            translateX(-50px)
            rotate(-10deg);

    }

    50% {

        transform:
            translateX(50px)
            rotate(10deg);

    }

    100% {

        transform:
            translateX(-50px)
            rotate(-10deg);

    }

}

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

@keyframes pulseWhatsapp {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}

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

@keyframes glowPulse {

    0% {

        box-shadow:
            0 0 10px rgba(90,168,255,.25);

    }

    50% {

        box-shadow:
            0 0 30px rgba(90,168,255,.55);

    }

    100% {

        box-shadow:
            0 0 10px rgba(90,168,255,.25);

    }

}

/* =========================================================
   TEXT SHIMMER
========================================================= */

@keyframes shimmer {

    0% {
        background-position: -500px 0;
    }

    100% {
        background-position: 500px 0;
    }

}

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

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

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

@keyframes fadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

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

@keyframes scaleIn {

    from {

        opacity: 0;

        transform:
            scale(.85);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}

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

@keyframes rotateSlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

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

@keyframes floatIcons {

    0% {

        transform:
            translateY(0px);

    }

    50% {

        transform:
            translateY(-8px);

    }

    100% {

        transform:
            translateY(0px);

    }

}

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

@keyframes borderGlow {

    0% {

        border-color:
            rgba(255,255,255,.08);

    }

    50% {

        border-color:
            rgba(90,168,255,.45);

    }

    100% {

        border-color:
            rgba(255,255,255,.08);

    }

}

/* =========================================================
   BACKGROUND PAN
========================================================= */

@keyframes backgroundPan {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

/* =========================================================
   BUTTON SHINE
========================================================= */

@keyframes buttonShine {

    0% {
        left: -100%;
    }

    100% {
        left: 120%;
    }

}

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

@keyframes countdownPulse {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.03);

    }

    100% {

        transform:
            scale(1);

    }

}

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

@keyframes particleFloat {

    0% {

        transform:
            translateY(0px);

        opacity: .2;

    }

    50% {

        transform:
            translateY(-15px);

        opacity: .6;

    }

    100% {

        transform:
            translateY(0px);

        opacity: .2;

    }

}

/* =========================================================
   HERO OVERLAY MOTION
========================================================= */

@keyframes overlayMove {

    0% {

        background-position:
            0% 50%;

    }

    50% {

        background-position:
            100% 50%;

    }

    100% {

        background-position:
            0% 50%;

    }

}

/* =========================================================
   CARD HOVER GLOW
========================================================= */

@keyframes cardGlow {

    0% {

        box-shadow:
            0 0 0 rgba(90,168,255,0);

    }

    50% {

        box-shadow:
            0 0 30px rgba(90,168,255,.25);

    }

    100% {

        box-shadow:
            0 0 0 rgba(90,168,255,0);

    }

}

/* =========================================================
   LOADER FADE
========================================================= */

@keyframes loaderFade {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

/* =========================================================
   AIRPLANE TRAIL
========================================================= */

@keyframes airplaneTrail {

    0% {

        width: 0;

        opacity: 0;

    }

    50% {

        width: 100px;

        opacity: .8;

    }

    100% {

        width: 180px;

        opacity: 0;

    }

}

/* =========================================================
   BLINKING DOT
========================================================= */

@keyframes blinkDot {

    0% {

        opacity: .2;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: .2;

    }

}

/* =========================================================
   SLOW ZOOM
========================================================= */

@keyframes slowZoom {

    0% {

        transform:
            scale(1);

    }

    100% {

        transform:
            scale(1.08);

    }

}

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

@keyframes logoFloat{

    0%{

        transform:
            translateY(0px);

    }

    50%{

        transform:
            translateY(-6px);

    }

    100%{

        transform:
            translateY(0px);

    }

}

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

@keyframes pulseGlow{

    0%{

        opacity:.55;
        transform:
            translate(-50%, -50%) scale(1);

    }

    50%{

        opacity:.9;
        transform:
            translate(-50%, -50%) scale(1.05);

    }

    100%{

        opacity:.55;
        transform:
            translate(-50%, -50%) scale(1);

    }

}