@keyframes bd-slidein {
    0%  {
        transform: translateX(-100%);
        opacity: .2;
    }

    70% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes bd-slideout {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: .2;
    }
}

@keyframes bd-slideoutin {
    0% {
        transform: translateX(-10%);
        opacity: 1;
    }

    20% {
        transform: translateX(-100%);
        opacity: .2;
    }

    70% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(-10%);
        opacity: 1;
    }
}

@keyframes bd-toastUp {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes bd-toastDown {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

@keyframes bd-fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bd-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bd-modalIn {
    0% {
        transform: scale(.8);
        opacity: 0;
    }

    90% {
        transform: scale(1.01);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bd-modalOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    10% {
        transform: scale(1.01);
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        transform: scale(.8);
        opacity: 0;
    }
}

@keyframes bd-backdropIn {
    0% {
        opacity: 0;
    }
}

@keyframes bd-backdropOut {
    100% {
        opacity: 0;
    }
}

@keyframes bd-warnShake {
    10%,
    90% {
        transform: translate3d(-4px, -4px, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 4px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 4px, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, -4px, 0);
    }
}

@keyframes bd-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .7;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bd-settingsButtonPulse {
    0% {
        filter: grayscale(100%);
    }

    50% {
        filter: grayscale(0%);
        opacity: 1;
    }

    100% {
        filter: grayscale(100%);
    }
}

@keyframes bd-colourpickerSlidein {
    0% {
        right: 20px;
    }

    100% {
        right: 0;
    }
}

@keyframes bd-keybindPulse {
    0% {
        box-shadow: 0 0 6px rgba(240, 71, 71, .3);
    }

    50% {
        box-shadow: 0 0 10px rgba(240, 71, 71, .6);
    }

    100% {
        box-shadow: 0 0 6px rgba(240, 71, 71, .3);
    }
}