.card {
    background: #222;
    border: 1px solid #dd2476;
    color: #ac1f23; /*rgba(250, 250, 250, 0.8);*/
    margin-bottom: 2rem;
}

.btnn {
    width: 25%;
    background-color: #f3f3f3;
    border-radius: 5px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
    color: #004868;
    padding: 20px 20px 20px 20px;
    transition: all .6s ease;
    -webkit-text-fill-color: #004868;
    box-shadow: 10px 9px 15px -10px #808080;
}

    .btnn:hover, .btn:focus {
        background-color: #004868;
        border-radius: 5px;
        color: rgb(255 255 255);
        transition: all .6s ease;
        -webkit-transform: scale(1.05);
        -webkit-text-fill-color: #f3f3f3;
        box-shadow: 10px 9px 15px -10px #808080;
    }


.btnSubModulo {
    color: #004868;
    text-decoration: none;
    padding: 10px 20px;
    background: transparent;
    position: relative;
    transition: all .5s;
    overflow: hidden;
}

    .btnSubModulo:hover {
        color: #f3f3f3;
        background: #004868;
    }

    .btnSubModulo::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 0%;
        top: 0;
        left: -40px;
        transform: skewX(45deg);
        background-color: #004868;
        z-index: -1;
        transition: all .5s;
    }

    .btnSubModulo:hover::before {
        width: 160%;
    }