@keyframes redflash {
    0% {
        background-color: #E62226;
        /*border: 0.2rem solid transparent;*/
        -webkit-box-shadow: 0px 0px 5px 0px rgba(230,34,38,1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(230,34,38,1);
        box-shadow: 0px 0px 5px 0px rgba(230,34,38,1);

    }
    50% {
        background-color: #ff5252;
        /*border: 0.2rem solid white;*/
        -webkit-box-shadow: 0px 0px 5px 0px #ff5252;
        -moz-box-shadow: 0px 0px 5px 0px #ff5252;
        box-shadow: 0px 0px 5px 0px #ff5252;
    }
}

.b-shadow {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.b-link {
    display: block;
    position: relative;

    margin: auto;

    border-radius: 10px;
    overflow: hidden;

    /*height: 140px;*/
    width: inherit;
    max-width: 220px;

    opacity: 0.8;
}

.b-link img {
    /*border-radius: 1rem;*/
    /*border: 0.1rem solid #0e4967;*/
    width: inherit;

}

/*@media screen and (min-width: 1199px) and (max-width: 1400px) {
    .b-link {
        height: 120px;
        width: 120px;
    }

    .b-wrapper h4 {
        color: white;
        font-weight: bold;
        font-size: 120%;
    }

    .b-wrapper p {
        color: white;
        font-weight: bold;
        font-size: 65%;
    }
}

@media screen and (max-width: 575px) {
    .b-link {
        height: 200px;
        width: 200px;
    }

    .b-link img {
        border-radius: 15px;
    }
}*/

.b-link:hover .b-wrapper {
    -webkit-animation: slide-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.b-wrapper {
    border-radius: 10px;
    transition: 1s;
    width: inherit;
    text-align: center;
    color: #fff;
    background: #0D4967;
    padding: 0.2rem;

    transition: 1s;
    opacity: 0.9;
    z-index: 2;

    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 100%;

    -webkit-animation: slide-top-inversed 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top-inversed 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;


}

.b-wrapper > div > div{
    color: white;
    font-weight: bold;
}

/*.b-wrapper i {
    font-size: 2rem !important;

}*/

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}


@-webkit-keyframes slide-top-inversed {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {

        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slide-top-inversed {
    0% {

        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}