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

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom-in{

    animation:zoomIn .8s ease forwards;

}

.zoom-out{

    animation:zoomOut .8s ease forwards;

}

.float{

    animation:float 6s ease-in-out infinite;

}

.pulse{

    animation:pulse 2.5s ease infinite;

}

.rotate{

    animation:rotate 12s linear infinite;

}

.bounce{

    animation:bounce 2s infinite;

}

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

.delay-100{

    animation-delay:.1s;

}

.delay-200{

    animation-delay:.2s;

}

.delay-300{

    animation-delay:.3s;

}

.delay-400{

    animation-delay:.4s;

}

.delay-500{

    animation-delay:.5s;

}

/*==================================================
                    KEYFRAMES
==================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.1);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes bounce{

    0%,
    20%,
    50%,
    80%,
    100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-12px);

    }

    60%{

        transform:translateY(-6px);

    }

}

/*==================================================
                SCROLL INDICATOR
==================================================*/

@keyframes scrollIndicator{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(20px);

    }

}

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

@keyframes glow{

    from{

        opacity:.3;

        transform:scale(1);

    }

    to{

        opacity:.55;

        transform:scale(1.08);

    }

}

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

@keyframes worldFloat{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.05);

    }

}

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

@keyframes glowLeft{

    from{

        transform:translate(-40px,-30px);

    }

    to{

        transform:translate(30px,20px);

    }

}

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

@keyframes glowRight{

    from{

        transform:translate(20px,20px);

    }

    to{

        transform:translate(-30px,-20px);

    }

}