@-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;
    }
}

@-webkit-keyframes slideOutRight {
    from {
        width: 100%;
    }
    to {
        width: 0;
        visibility: hidden;
    }
}
@keyframes slideOutRight {
    from {
        width: 100%;
    }
    to {
        width: 0;
        visibility: hidden;
    }
}

@-webkit-keyframes slideOutTop {
    from {
        height: 100%;
    }
    to {
        height: 0;
        visibility: hidden;
    }
}
@keyframes slideOutTop {
    from {
        height: 100%;
    }
    to {
        height: 0;
        visibility: hidden;
    }
}

@-webkit-keyframes rotate{
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate{
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes preloader {
    0%, 100% {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
    40% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100% );
    }
    90% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0 );
    }
}