.des span{
    color: red;
}
.modal-body12 {
    padding: 20px;

}
.color-text {
    color: red;
}
.modal-dialog {
    max-width: 80%;
    width: auto;
    margin: 30px auto;
}
.modal-content {
    height: auto;
}
.modal-body {
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.modal-image, .modal-text {
    flex: 1 1 300px;
    max-width: 100%;
    padding: 10px;
}
.modal-image img {
    max-width: 100%;
    height: auto;
}
.modal-small .modal-dialog {
    max-width: 500px;
    width: 90%;
    margin: 30px auto;
}
.modal-small .modal-content {
    height: auto;
}
.modal-small .modal-body {
    padding: 20px;
    max-height: none;
    overflow-y: visible;
}
.modal-large-image .modal-dialog {
    max-width: 90%;
    width: 90%;
    height: 90vh;
    margin: 5vh auto;
}
.modal-large-image .modal-content {
    height: 100%;
}
.modal-large-image .modal-body {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}
.cuatro {
    font-family: Arial, sans-serif;
    width: 100%;
    margin: 0;
    background-color: #f0f0f0;
    flex-wrap: wrap;
    justify-content: space-around;
}
.todo {
    font-family: Arial, sans-serif;
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #f0f0f0;
    flex-wrap: wrap;
    justify-content: space-around;
}
.box {
    width: calc(33.33% - 20px);
    max-width: 300px;
    height: auto;
    background-color: #ffffff;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
.box:hover {
    background-color: #2980b9;
}
.box a {
    text-decoration: none;
    color: white;
    font-size: 1.2em;
    margin-bottom: 10px;
}
.box img {
    max-width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}
.box p {
    margin: 0;
    font-size: 0.9em;
}
.uno, .dos, .tres {
    display: flex;
}
.cuatro {
    display: flex;
    justify-content: center;
}
.mat-cart {
    background-color: #012f4e;
    color: #fff;
    font-size: 17px;
    text-align: center;
}
@media (max-width: 600px) {
    .navbar-brand small {
        line-height: 0.8;
        position: relative;
        top: -5em;
        font-size: 9px;
    }
    .uno, .dos, .tres, .cuatro {
        flex-direction: column;
        align-items: center;
    }
    .modal-content {
        margin-top: 30%;
    }
    .box {
        width: calc(120% - 20px);
    }
}