/* GENERALES Y ENCABEZADO */

#materialesmobile {
    display: flex;
}

#materialesdesk {
    display: none;
}

#materialesdesk .contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#materialesmobile .contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.encab {
    padding-top: 20px;
    padding-bottom: 10px;
}

.encab h1, .encab h4 {
    text-align: center;
    color: #040;
}

.encab h1 {
    font-style: italic;
    font-size: 40px;
}

/* ITEM */

#materialesdesk .item {
    padding: 5px;
    margin: 7px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
}

#materialesmobile .item {
    padding: 10px;
    margin: 10px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
    max-width: 450px;
}

.trigo {
    background-image: linear-gradient(rgb(236, 230, 92),rgb(234, 237, 124));
    color: rgb(57, 42, 9);
}

.maiz {
    background-image: linear-gradient(rgb(186, 169, 77),rgb(214, 195, 136));
    color:rgb(59, 40, 23);
}

.bambu {
    background-image: linear-gradient(rgb(173, 190, 86),rgb(187, 195, 118));
    color:rgb(18, 57, 30);
}

#materialesmobile .item img {
    border-radius: 50%;
}

#materialesdesk .item img {
    border-radius: 50%;
    width: 69px;
}

.maiz img {
    border: 5px solid rgb(80, 55, 0);
}

.bambu img {
    border: 5px solid rgb(22, 70, 0);
}

.trigo img {
    border: 5px solid rgb(131, 108, 6);
}

#materialesmobile .icono {
    padding-right: 20px;
}

#materialesdesk .icono {
    padding-right: 10px;
}

.nombre {
    text-align: center;
    width: 100%;
    font-style: italic;
    font-weight: bold;
}

#materialesmobile .nombre {
    font-size: 23px;
}

#materialesdesk .nombre {
    font-size: 20px;
}

.caract {
    border-radius: 5px;
    background-color: white;
    text-align: center;
    width: 100%;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

#materialesmobile p {
    line-height: 23px;
}

#materialesdesk p {
    font-size: 15px;
    line-height: 15px;
}

/* MOBILE */

#materialesmobile .contenedor {
    background-image: url(../img/hojatransp.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 80%;
}

/* desktop */

.mitad1, .mitad2 {
    width: 50%;
}

.mitad1 img {
    width: 100%;
}

/* RESPONSIVE */

@media (min-width:977px) {
    #materialesmobile .contenedor {
        background-size: 48%;
    }
}

@media (min-width: 1048px) {
    #materialesmobile {
        display: none;
    }
    
    #materialesdesk {
        display: flex;
    }
}