*{padding: 0px;margin:0px;}







@media only screen



and (min-width: 320px)



and (max-width: 736px) {



    .header {



        background-color: #095480;



        width: 100%;



        height: 200px;



        display: flex;



        justify-content: center;



        align-items: center;



        flex-direction: column;



    }











    .header img {



        width: 50px;



        height: 50px;



        background-size: contain;



    }







    .header-info {



        color: white;



        font-family: poppins;



        text-align: center;



        font-weight: 700;



        font-size: 30px;



    }











    .content {



        width: 100%;



        height: 100vh;



        display: flex;



        flex-direction: column;



    }











    .lateral-menu {



        width: 100%;



        height: auto;



        background-color: #095480;



        display: flex;



        flex-direction: column;



        justify-content: center;



        align-items: center;







    }











    .page-content {



        width: 100%;



        height: 100%;



        display: flex;



        flex-wrap: wrap;



        padding: 30px;



        box-sizing: border-box;



        justify-content: center;



    }















    form {



        padding: 5px;



        margin-top: 50px;



        height: 100%;



        margin-right: 40px;



    }















    form input[type ='text'] {



        width: 50px;



        padding: 10px;



        border-radius: 10px;



        border:none;



    }







    form input[type ='submit'] {



        width: 70px;



        padding: 10px;



        border-radius: 10px;



        border:none;



        color: white;



        background-color: #64af5c;



    }







    /* Estilos para la lista */



    .md-list {



        list-style: none;



        padding: 0;



        font-family: poppins;



        color: white;



        font-weight: 200;



        display: flex;



        width: auto;



        flex-wrap: wrap;



        height: 100%;



        justify-content: center;



        align-items: center;



    }







    /* Estilos para los elementos de la lista */



    .md-list li {



        display: flex;



        flex-direction: row;



        align-items: center;



        padding: 8px 16px;



        font-size: 10px;



        transition: background-color 0.2s;



    }







    .md-list li:last-child {



        border-bottom: none;



    }











    .n-filter {



        border: 1px solid white;

        padding: 10px;

        border-radius: 15px;



    }







    .s-filter {



        background-color: #64af5c;



        padding: 10px;



        border-radius: 10px;



    }







    /* Cambio de color de fondo al pasar el cursor sobre un elemento */



    .md-list li:hover {



        cursor: pointer;



    }











    .item-content {



        overflow: hidden;



        width: 200px;



        height: 350px;



        background-color: #095480;



        border-radius: 10px;



        margin: 10px;



    }







    .item-content img {







        width: 100%;



        height: 85%;



       background-size: contain;



    }







    .lazy-img {



        width: 100%;



        height: 85%;



       background-size: contain;



      }







    .item-content p {



        width: auto;



        height: 100%;



        font-family: poppins;



        color: rgb(247, 247, 247);



        font-weight: 200;



        text-align: center;



        font-size: 1em;



        padding: 10px;



        overflow: hidden;



        white-space: nowrap;



        text-overflow: ellipsis;



    }











    #pdf-overlay {



        position: fixed;



        top: 0;



        left: 0;



        width: 100%;



        height: 100%;



        background-color: rgba(0, 0, 0, 0.5);



        display: flex;



        justify-content: center;



        align-items: center;



        z-index: 9999;



      }







      #pdf-frame {



        width: 80%;



        height: 80%;



        border: none;



      }



}











@media only screen



and (min-width: 736px)



and (max-width: 2000px) {











.header {



    background-color: #095480;



    width: 100%;



    height: 200px;



    display: flex;



    justify-content: center;



    align-items: center;



}











.header img {



    width: 150px;



    height: 150px;



    background-size: contain;



}







.header-info {



    color: white;



    margin-left: 10px;



    font-family: poppins;



    font-weight: 700;



    font-size: 60px;



}











.content {



    width: 100%;



    height: 100vh;



    display: flex;



    flex-direction: column;



}











.lateral-menu {



    width: 100%;



    height: 10%;



    background-color: #095480;



    display: flex;



    flex-direction: row;



    justify-content: center;



    align-items: center;







}











.page-content {



    width: 100%;



    height: 100%;



    display: flex;



    flex-wrap: wrap;



    padding: 30px;



    box-sizing: border-box;



    justify-content: center;



}















form {



    display: flex;



    padding: 5px;



    gap: 10px;







    margin-right: 40px;



}















form input[type ='text'] {



    width: 90px;



    padding: 10px;



    border-radius: 10px;



    border:none;



}







form input[type ='submit'] {



    width: 70px;



    padding: 10px;



    border-radius: 10px;



    border:none;



    color: white;



    background-color: #64af5c;



}







/* Estilos para la lista */



.md-list {



    list-style: none;



    padding: 0;



    font-family: poppins;



    color: white;



    font-weight: 200;



    display: flex;



    width: auto;



    height: 100%;



    justify-content: center;



    align-items: center;



}







/* Estilos para los elementos de la lista */



.md-list li {



    display: flex;



    flex-direction: row;



    align-items: center;



    padding: 8px 16px;



    font-size: 10px;

    text-align: center;



    transition: background-color 0.2s;



}







.md-list li:last-child {



    border-bottom: none;



}











.n-filter {





}







.s-filter {



    background-color: #64af5c;



    padding: 10px;



    border-radius: 10px;



}







/* Cambio de color de fondo al pasar el cursor sobre un elemento */



.md-list li:hover {



    cursor: pointer;



}











.item-content {



    overflow: hidden;



    width: 200px;



    height: 350px;



    background-color: #095480;



    border-radius: 10px;



    margin: 10px;



}







.item-content img {







    width: 100%;



    height: 85%;



   background-size: contain;



}







.lazy-img {



    width: 100%;



    height: 85%;



   background-size: contain;



  }







.item-content p {



    width: auto;



    height: 100%;



    font-family: poppins;



    color: rgb(247, 247, 247);



    font-weight: 200;



    text-align: center;



    font-size: 1em;



    padding: 10px;



    overflow: hidden;



    white-space: nowrap;



    text-overflow: ellipsis;



}











#pdf-overlay {



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-color: rgba(0, 0, 0, 0.5);



    display: flex;



    justify-content: center;



    align-items: center;



    z-index: 9999;



  }







  #pdf-frame {



    width: 80%;



    height: 80%;



    border: none;



  }











}