/* Botón superior derecho para cerrar */
.x2 {
    display: flex;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    z-index: 1;
    background: gray;
    font-size: 17px;
    border-radius: 15px;
}
.x2 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
}
    /* Botón superior derecho para cerrar */




h1.proyecto {
        width: 100%;
        margin: 10px 0px 10px 10px;
        font-size: 20px;
    }
section {
    width: 40%;
    padding: 0px 0px 20px 20px;
    font-size: 14px;
    line-height: 20px;
}
article {
    width: 45%;
    height: auto;
    margin: 0px 0px 0px 10px;
    font-size: 14px;
    padding-bottom: 20px;
    color: dimgrey;
    line-height: 20px;
}
    /*Contenedor de la imagen de los proyectos en escritorio */
    main.trabajo1 {
        width: 100%;
        border-top: 10px solid #F4F4F4;
        background: #F4F4F4;
    }
    .trabajo2 {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        width: 100%;
    }
    .trabajo2 div {
        width: 400px;
        padding: 0px 10px 7px 0px;
    }
    .trabajo2 div img{
        width: 100%;
    }
    .trabajo2 a img {
        width: 100%;
    }

@media only screen and (max-width: 823px) {
    h1.proyecto {
        margin: 50px 0px 10px 10px;
    }
    /*Contenedor de la imagen de los proyectos en movil */
    main.trabajo1 {
        width: 100%;
        border-top: 10px solid #F4F4F4;
        background: #F4F4F4;
    }
    .trabajo2 {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 100%;
    }
    .trabajo2 div {
        width: 49%;
        padding: 0px 0px 10px 0px;
    }
    .trabajo2 div img{
        width: 100%;
    }
    .trabajo2 a img {
        width: 100%;
    }
}

@media only screen and (max-width: 423px) {
section {
    width: 100%;
}
article {
    width: 100%;
    margin: 10px 10px 0px 10px;
}
.trabajo2 {
    display: block;
    width: 100%;
}
.trabajo2 div {
    width: 100%;
    padding: 0px 0px 0px 0px;
    }
.trabajo2 img {
    width: 100%;
    max-width: 400px;
    padding-bottom: 10px;
    }
}