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

.fade-up{

    animation:fadeUp 1s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*====================================
            FADE LEFT
====================================*/

.fade-left{

animation:fadeLeft 1s ease;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/*====================================
            FADE RIGHT
====================================*/

.fade-right{

animation:fadeRight 1s ease;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

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

.zoom{

animation:zoom .8s ease;

}

@keyframes zoom{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

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

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

transition:.5s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.loader span{

width:55px;

height:55px;

border-radius:50%;

border:5px solid #eee;

border-top:5px solid var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}