@-webkit-keyframes fromtop {
    from{
        transform: translateY(-50px);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fromtop{
    from{
        transform: translateY(-50px);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes opacity {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes opacity{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@keyframes height{
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@keyframes rotate {
    0% {
        transform: scale(1, 1) rotate(0deg);
    }
    40% {
        transform: scale(2.4, 1.6) rotate(144deg);
    }
    70% {
        transform: scale(1.4, 2) rotate(252deg);
    }
    100% {
        transform: scale(1, 1) rotate(360deg);
    }
}

@keyframes draw {
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes mousemovehover {
    0%{
        border-radius: 50%;
        transform: rotate(0deg);
    }
    50%{
        border-radius: 0;
        transform: rotate(180deg);
    }
    100%{
        border-radius: 50%;
        transform: rotate(360deg);
    }
}

@keyframes preloader-stroke {
    from {
        stroke-dashoffset: 120;
        stroke-width:0;
    }
    to{
        stroke-dashoffset: 0;
        stroke-width:9;
    }
}


/* LOGO ANIMATIONS START */

@keyframes goin{
    0%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-80%);
    }
    100%{
        transform: translateX(-80%);
    }
}



@keyframes posX{
    0%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-42.85%);
    }
    100%{
        transform: translateX(-42.85%);
    }
}



@keyframes scale{
    0%{
        transform: scaleX(1);
    }
    80%{
        transform: scaleX(0.1298);
    }
    100%{
        transform: scaleX(0.1298);
    }
}



@keyframes posY{
    0%, 80%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-8.5%);
    }
}



@keyframes posYp{
    0%, 80%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-23.6%);
    }
}

@keyframes posYd{
    0%, 80%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(32%);
    }
}
@keyframes posYdR{
    0%, 80%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(32%);
    }
}





@keyframes goinR{
    0%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-80%);
    }
    100%{
        transform: translateX(-80%);
    }
}



@keyframes posXR{
    0%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-42.85%);
    }
    100%{
        transform: translateX(-42.85%);
    }
}



@keyframes scaleR{
    0%{
        transform: scaleX(1);
    }
    80%{
        transform: scaleX(0.1298);
    }
    100%{
        transform: scaleX(0.1298);
    }
}



@keyframes posYR{
    0%, 80%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-8.5%);
    }
}



@keyframes posYpR{
    0%, 80%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-23.6%);
    }
}





/* LOGO ANIMATIONS END */



@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

@keyframes moveLeftToRight {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes moveRightToLeft {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}