/* ==========================================
   TRANSITIONS
========================================== */

*{

    transition:
        background-color .25s,
        color .25s,
        border-color .25s,
        box-shadow .25s,
        transform .25s;

}

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

.fade-in{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

.fade-up{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.scale-in{

    animation:scaleIn .3s ease;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================
   SPINNER
========================================== */

.spinner{

    width:40px;

    height:40px;

    border:4px solid rgba(255,255,255,.15);

    border-top-color:var(--secondary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

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

.shake{

    animation:shake .35s;

}

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-5px);

    }

    50%{

        transform:translateX(5px);

    }

    75%{

        transform:translateX(-5px);

    }

    100%{

        transform:translateX(0);

    }

}