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



@media only screen

and (min-width: 320px)

and (max-width: 736px) {

    .header {

        background-color: #64af5c;

        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: #64af5c;

        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: 200px;

        padding: 10px;

        border-radius: 10px;

        border:none;

    }

    

    form input[type ='submit'] {

        width: 70px;

        padding: 10px;

        border-radius: 10px;

        border:none;

        color: white;

        background-color: #095480;

    }

    

    /* 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;

       

        transition: background-color 0.2s;

    }

    

    .md-list li:last-child {

        border-bottom: none;

    }

    

    

    .n-filter {

    

    }

    

    .s-filter {

        background-color: #095480;

        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: #64af5c;

    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: #64af5c;

    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 {

    padding: 5px;

    margin-top: 50px;

    height: 100%;

    margin-right: 40px;

}







form input[type ='text'] {

    width: 200px;

    padding: 10px;

    border-radius: 10px;

    border:none;

}



form input[type ='submit'] {

    width: 70px;

    padding: 10px;

    border-radius: 10px;

    border:none;

    color: white;

    background-color: #095480;

}



/* 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;

   

    transition: background-color 0.2s;

}



.md-list li:last-child {

    border-bottom: none;

}





.n-filter {



}



.s-filter {

    background-color: #095480;

    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;

  }





}