.contenedor {
    
    width: 90%;
    max-width: 1200px;
    background: #ffffff;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15%;
    color: black;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: min-content;
   
    gap: 15px;


}

.menu .vectorial a{
    font-weight: 900;

}


.item {
    height: fit-content;
    min-height: 50px;
    min-width: 50px;
    vertical-align: middle;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: center;

}

.item img{
    object-fit: contain;
    border: none;
}

.item.uno {
    width: 100%;
    height: 100%;
    grid-column: 2/8;
    grid-row: 8/14;
    transition: 1.0s ease all;
    border: 15px solid black;
    background-color: darkgrey;
    

}

/*//////////////////////////CUERVO/////////////////////////////////*/
.item.dos {
    height: 100%;
    width: 100%;
    grid-column: 2/8;
    grid-row: 16/22;
    transition: 1.0s ease all;

}

.item.dos img:hover {
    opacity: 0;
}

.item.dos:hover {
    background-image: url(../img/cuervocontornos.PNG);
    background-repeat: no-repeat;
    background-size: cover;
    border: 15px solid black;
    width: 100;
    height: 100%;
}

/*//////////////////////////CUERVO/////////////////////////////////*/
.item.tres {
    height: 100%;
    width: 100%;
    grid-column: 1/2;
    grid-row: 10/12;
    border: none;
}

.item.cuatro {
    height: 100%;
    width: 100%;
    grid-column: 2/4;
    grid-row: 14/16;
}

.item.cinco {
    height: 100%;
    width: 100%;
    grid-column: 4/6;
    grid-row: 14/16;
}

.item.seis {
    height: 100%;
    width: 100%;
    grid-column: 6/8;
    grid-row: 14/16;
}

/*CUERVO*/

/*MANTIS*/
.item.siete {
    height: 100%;
    width: 100%;
    grid-column: 2/8;
    grid-row: 22/28;
    border: 15px solid black;
    background-color: darkgray;
    transition: 1.5s ease all;
}

.item.siete img:hover {
    opacity: 0;
    background-color: transparent;
}

.item.siete:hover {

    background-image: url(../img/mantis1.png);
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px;
    width: 100;
    height: 100%;
}

.item.veintiuno {
    grid-row: 28/31;
    grid-column: 2/5;
    width: 100%;
    height: 100%;
    background-color: darkgray;
    border: 15px solid black;
}

/*MANTIS*/
.item.ocho {
    height: 100%;
    width: 100%;
    grid-column: 2/6;
    grid-row: 28/32;
    z-index: 1;
}

.item.nueve {
    height: 100%;
    width: 100%;
    grid-column: 5/8;
    grid-row: 28/31;
    border: 15px solid black;

}

.item.diecinueve {

    width: 100%;
    height: 100%;
    grid-column: 1/2;
    grid-row: 23/25;
}

/*TORTUGA*/
/*TORTUGAPricipal*/
.item.diez {
    grid-column: 2/8;
    grid-row: 31/37;
    transition: 1.0s ease all;
    border: 15px solid black;
    background-color: darkgray;
}

.item.diez img:hover {
    opacity: 0;
    background-color: transparent;
}

.item.diez:hover {
    background-image: url(../img/aligavectoralpha.PNG);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100;
    height: 100%;

}

/*TORTUGAPricipal*/
.item.once {
    height: 100%;
    width: 100%;
    grid-column: 2/4;
    grid-row: 37/39;

}

.item.doce {
    height: 100%;
    width: 100%;
    grid-column: 4/6;
    grid-row: 37/39;
}

.item.trece {
    height: 100%;
    width: 100%;
    grid-column: 6/8;
    grid-row: 37/39;
}

.item.dieciocho {

    grid-column: 1/2;
    grid-row: 32/36;
}

/*TORTUGA*/
/*ELEFANTE*/
/*ELEFANTE PRINCIPAL*/
.item.catorce {
    width: 100%;
    height: 100%;
    grid-column: 2/8;
    grid-row: 39/45;
    background-color: darkgray;
    transition: 1.0s ease all;
    border: 15px solid black;
}

.item.catorce img:hover {
    opacity: 0;
    background-color: transparent;
}

.item.catorce:hover {
    background-image: url(../img/elefanteColordetalle.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100;
    height: 100%;

}

/*ELEFANTE PRINCIPAL*/
.item.quince {
    width: 100%;
    height: 100%;
    grid-column: 2/5;
    grid-row: 45/48;


}

.item.dieciseis {
    width: 100%;
    height: 100%;
    grid-column: 5/8;
    grid-row: 45/48;


}

.item.diecisiete {
    width: 100%;
    height: 100%;
    grid-column: 1/2;
    grid-row: 40/43;
}

/*ELEFANTE*/
/*ABEJA*/
.item.veinte {
    width: 100%;
    height: 100%;
    grid-column: 2/8;
    grid-row: 48/54;
    border: 15px solid black;
    background-color: darkgray;
}

.item.veinte img:hover {
    opacity: 0;
    background-color: darkgray;
}

.item.veinte:hover {
    background-image: url(../img/abeja.png);
    background-repeat: no-repeat;
    background-size: contain;

}

.item.veintiuno {
    grid-column: 2/8;
    grid-row: 54/60;
}
.item.veintidos {
    grid-column: 2/8;
    grid-row: 60/66;
}
.item.veintitres {
    grid-column: 2/8;
    grid-row: 66/72;
}
.item.veinticuatro {
    grid-column: 2/8;
    grid-row: 72/78;
}
@media (max-width:960px){
    .contenedor{
        width: 100%;
    }
.item{
    border-width: 8px;
}
}