@keyframes backBanner {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -350px -150px;
    }
}

@keyframes showText {
    0% {
        transform: translateX(-600%) scale(5, 5);
        -webkit-transform: translateX(-600%) scale(5, 5);
        -moz-transform: translateX(-600%) scale(5, 5);
        -ms-transform: translateX(-600%) scale(5, 5);
        -o-transform: translateX(-600%) scale(5, 5);
        opacity: 1;
    }
    50% {
        transform: translateX(600%) scale(5, 5);
        -webkit-transform: translateX(600%) scale(5, 5);
        -moz-transform: translateX(600%) scale(5, 5);
        -ms-transform: translateX(600%) scale(5, 5);
        -o-transform: translateX(600%) scale(5, 5);
        opacity: 1;
    }
    75% {
        transform: translateX(-600%) scale(5, 5);
        text-shadow: none;
        color: transparent;
        -webkit-transform: translateX(-600%) scale(5, 5);
        -moz-transform: translateX(-600%) scale(5, 5);
        -ms-transform: translateX(-600%) scale(5, 5);
        -o-transform: translateX(-600%) scale(5, 5);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1, 1);
        text-shadow: 2px 2px 1px black;
        color: white;
        -webkit-transform: translateX(0) scale(1, 1);
        -moz-transform: translateX(0) scale(1, 1);
        -ms-transform: translateX(0) scale(1, 1);
        -o-transform: translateX(0) scale(1, 1);
        opacity: 1;
    }
}

@keyframes showIcon {
    from {
        transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -o-transform: translateY(-200%);
    }
    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}

@keyframes showCategory {
    from {
        transform: translateY(-400%);
        -webkit-transform: translateY(-400%);
        -moz-transform: translateY(-400%);
        -ms-transform: translateY(-400%);
        -o-transform: translateY(-400%);
        color: black;
    }
    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}

@keyframes showDescription {
    from {
        transform: translateX(-300%);
        -webkit-transform: translateX(-300%);
        -moz-transform: translateX(-300%);
        -ms-transform: translateX(-300%);
        -o-transform: translateX(-300%);
        color: black;
    }
    to {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
}

.card:hover {
    background-color: black;
}

.card:hover .icon {
    font-size: 70px;
    color: #37bcf9;
    animation: showIcon 300ms linear;
    -webkit-animation: showIcon 300ms linear;
}

.card:hover .category {
    color: white;
    animation: showCategory 400ms linear;
    -webkit-animation: showCategory 400ms linear;
}

.card:hover .description {
    color: white;
    animation: showDescription 400ms linear;
    -webkit-animation: showDescription 400ms linear;
}