/*==================================================
            ABOUT ANIMATIONS
==================================================*/

.about-image{

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

}

.info-card{

    animation:fadeUp .8s ease both;

}

.info-card:nth-child(2){

    animation-delay:.15s;

}

.info-card:nth-child(3){

    animation-delay:.3s;

}

.info-card:nth-child(4){

    animation-delay:.45s;

}


/*==================================================
            HOVER ANIMATION
==================================================*/

.skill-card{

    animation:fadeUp .8s ease both;

}

.skill-card:nth-child(2){

    animation-delay:.1s;

}

.skill-card:nth-child(3){

    animation-delay:.2s;

}

.skill-card:nth-child(4){

    animation-delay:.3s;

}

.skill-card:nth-child(5){

    animation-delay:.4s;

}

.skill-card:nth-child(6){

    animation-delay:.5s;

}

.skill-card:nth-child(7){

    animation-delay:.6s;

}

.skill-card:nth-child(8){

    animation-delay:.7s;

}

/*==================================================
            ANIMATIONS
==================================================*/

@keyframes shine{

    0%{

        left:-100%;

    }

    100%{

        left:100%;

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}