@keyframes AppearLeft {
    from {
        opacity: .4;
        transform: translate(-20px);
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes AppearRight {
    from {
        opacity: .4;
        transform: translate(20px);
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes AppearTop {
    from {
        opacity: .4;
        transform: translate(0, -20px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes AppearBottom {
    from {
        opacity: .4;
        transform: translate(0, 20px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes AppearBottomLight {
    from {
        opacity: .4;
        transform: translate(0, 10px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes AppearInside {
    from {
        opacity: .4;
        transform: scale(.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes AppearOutside {
    from {
        opacity: .4;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes AppearNowere {
    from {
        opacity: .1;
        transform: scale(.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes DissappearInside {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: .4;
        transform: scale(.95);
    }
}

@keyframes AppearSpinPositive {
    from {
        opacity: .6;
        transform: scale(.95) rotate(-15deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes AppearSpinNegative {
    from {
        opacity: .6;
        transform: scale(.95) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(-15deg);
    }
}

@keyframes ButtonColorToBlue {
    from {
        background-color: #FFF;
        color: #0C0D0D;
    }
    to {
        background-color: #1D75FF;
        color: #FFF;
    }
}

@keyframes ButtonColorFromBlue {
    from {
        background-color: #1D75FF;
        color: #FFF;
    }
    to {
        background-color: #FFF;
        color: #0C0D0D;
    }
}

@keyframes Width_0_100 {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

@keyframes Height_0_100 {
    from {
        height: 0%;
    }
    to {
        height: 100%;
    }
}

/* card hover */

@keyframes CardFocus {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(0, -6px);
    }
}

@keyframes CardDeFocus {
    from {
        transform: translate(0, -6px);
    }
    to {
        transform: translate(0, 0);
    }
}