/* ==========================================================
   CV. MEUTUAH RAYA
   ANIMATION STYLESHEET
========================================================== */


/* ==========================================================
   TRANSITION
========================================================== */

*{
    transition:.35s ease;
}


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

.fade-in{

    animation:fadeIn 1s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.fade-down{

    animation:fadeDown .8s ease forwards;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

.fade-right{

    animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

.zoom-out{

    animation:zoomOut .7s ease forwards;

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.2);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

.float{

    animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


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

.rotate{

    animation:rotate360 8s linear infinite;

}

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero-content h1{

    animation:fadeDown 1s ease;

}

.hero-content p{

    animation:fadeUp 1.2s ease;

}

.hero-content .btn{

    animation:zoomIn 1.4s ease;

}


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

.card{

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.btn{

    transition:.35s;

}

.btn:hover{

    transform:translateY(-3px);

}


/* ==========================================================
   IMAGE HOVER
========================================================== */

img{

    transition:.35s;

}

.gallery img:hover{

    transform:scale(1.05);

}


/* ==========================================================
   NAVBAR
========================================================== */

.navbar-brand img:hover{

    transform:rotate(-8deg) scale(1.08);

}


/* ==========================================================
   SCROLL ICON
========================================================== */

.scroll-down{

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,12px);

    }

    100%{

        transform:translate(-50%,0);

    }

}


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

.loader-spin{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   BACK TO TOP
========================================================== */

#backToTop{

    transition:.35s;

}

#backToTop:hover{

    transform:translateY(-5px);

}


/* ==========================================================
   GALLERY
========================================================== */

.gallery a{

    overflow:hidden;

    border-radius:12px;

}

.gallery a img{

    transition:.4s;

}

.gallery a:hover img{

    transform:scale(1.08);

}


/* ==========================================================
   FOOTER ICON
========================================================== */

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    transform:translateY(-5px);

}


/* ==========================================================
   END
========================================================== */