.titleIconoModulo {
    position: absolute;
    top: 7%;
    z-index: 30;
    color: white;
    font-weight: 500;
    font-size: 18px;
    width: 100%;
    text-align: center;
    transition: 0.4s !important;
}

.cs-style-5 figure .imgIcon {
    position: absolute !important;
    top: 28%;
    width: 52%;
    left: 24%;
    z-index: 10;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
    border-radius: 25px;
}

figure:hover .imgIcon {
    -webkit-transform: scale(0.5) translateY(-30%);
    -moz-transform: scale(0.5) translateY(-30%);
    -ms-transform: scale(0.5) translateY(-30%);
    transform: scale(0.5) translateY(-30%);
    transition: all 0.4s ease;
    opacity: 0;
}

figure:hover .divGrid {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
    transition: 0.4s;
    border-radius: 50%;
    top: 0;
}

figure:hover .titleIconoModulo {
    -webkit-transform: scale(1.2) translateY(10%);
    -moz-transform: scale(1.2) translateY(10%);
    -ms-transform: scale(1.2) translateY(10%);
    transform: scale(1.2) translateY(10%);
    transition: 0.6s;
    top: -20px;
    z-index: 6;
}

.grid {
    padding: 20px 20px 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

.divGrid {
    display: inline-block;
    width: 348px;
    margin: 0;
    padding: 6px 20px;
    text-align: left;
    position: relative;
}

.grid figure {
    margin: 0;
    position: relative;
}

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #134759;
    color: #b3ff00;
}

.cs-style-5 figcaption {
    height: 100%;
    width: 87%;
    opacity: 0;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
    border-radius: 5% 5% 5% 5%;
    text-align: center;
    left: 6%;
}

figure:hover figcaption {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 1;
    z-index: 5;
}

figure button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

@media screen and (max-width: 31.5em) {
    .grid {
        padding: 10px 10px 100px 10px;
    }

    .divGrid {
        width: 338px;
    }
}

figure:hover .btnMenuAct {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    transform: translateY(120px) translateX(-65px);
    z-index: 6;
}

.btnMenuAct {
    text-align: left;
    padding: 10px 15px;
    border-radius: 7px;
    background: #94e930;
    color: #032b57 !important;
    font-weight: 500;
    margin: 4px;
    filter: drop-shadow(8px 6px 6px #032b57);
    width: max-content;
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5) translateX(-130%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
    z-index: 40;
}

.divMenuIndex {
    filter: drop-shadow(12px 15px 12px #414141);
    background: linear-gradient(114deg, #078248 9%, #073a6b 91%) !important;
    height: 255px;
    width: 306px !important;
    border-radius: 25px;
}

.spanSubtitulo {
    position: absolute;
    left: 5%;
    width: 90%;
    top: 25%;
    font-size: 12px;
}

.spanSubtituloInact {
    position: absolute;
    left: 11%;
    width: 80%;
    top: 55%;
}

.divSection {
    position: absolute;
    height: 255px;
    width: 270px;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
}


/*==============================================================================================*/
/*INICIO BOTON NUEVO GRANDE=====================================================================*/

.btn-nuevoGran {
    color: #ffffff;
    font-weight: 600;
    width: 18vw;
    height: 10vh;
    margin: 10px;
    border-radius: 10px;
    font-size: 19px !important;
    display: inline;
    transition: .2s;
    background: linear-gradient(204deg, #078248 9%, #073a6b 91%) !important;
    filter: drop-shadow(6px 6px 5px #767676)
}

    .btn-nuevoGran:hover {
        transform: scale(1.1);
        color: #85ff14;
        transition: .2s;
        filter: drop-shadow(12px 12px 15px #414141);
        background: linear-gradient(50deg, #059651 9%, #1d7793 91%) !important;
    }

    .btn-nuevoGran:focus, .btn-nuevoGran.focus {
        color: #343a40;
        background-color: #b3ff00;
        border-color: #b3c783;
        font-weight: 500;
    }

    .btn-nuevoGran.disabled, .btn-nuevoGran:disabled {
        color: #fff;
        border-color: #ffffff00;
        opacity: 1;
        background: linear-gradient(12deg, rgb(194 194 194) 25%, rgb(167 167 167) 62%, rgb(116 116 116) 97%) !important;
        filter: drop-shadow(6px 6px 5px #767676)
    }

        .btn-nuevoGran.disabled:hover, .btn-nuevoGran:disabled:hover {
            transform: scale(0.9);
            color: #fff;
            border-color: #ffffff00;
            opacity: 1;
            background: linear-gradient(12deg, rgb(194 194 194) 25%, rgb(167 167 167) 62%, rgb(116 116 116) 97%) !important;
            filter: drop-shadow(6px 6px 5px #fffdfd);
        }

    .btn-nuevoGran:not(:disabled):not(.disabled):active, .btn-nuevoGran:not(:disabled):not(.disabled).active,
    .show > .btn-dameroGrand.dropdown-toggle {
        color: #fff;
        background-color: #204430;
        border-color: #1c3b2a;
    }

        .btn-nuevoGran:not(:disabled):not(.disabled):active:focus, .btn-nuevoGran:not(:disabled):not(.disabled).active:focus,
        .show > .btn-nuevoGran.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(80, 125, 100, 0.5);
        }
/*FIN BOTON NUEVO GRANDE ======================================================================*/
/*==============================================================================================*/

.gridActivo .imgIcon {
    -webkit-transform: scale(0.5) translateY(-30%);
    -moz-transform: scale(0.5) translateY(-30%);
    -ms-transform: scale(0.5) translateY(-30%);
    transform: scale(0.5) translateY(-30%);
    transition: all 0.4s ease;
    opacity: 0;
}

.gridActivo .divGrid {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
    transition: 0.4s;
    border-radius: 50%;
    top: 0;
}

.gridActivo .titleIconoModulo {
    -webkit-transform: scale(0.8) translateY(20%);
    -moz-transform: scale(0.8) translateY(20%);
    -ms-transform: scale(0.8) translateY(20%);
    transform: scale(0.8) translateY(20%);
    transition: 0.6s;
    top: 10px;
}

.gridActivo figcaption {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


.gridActivo .btnMenuAct {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    transform: translateY(95px) translateX(-65px);
}