.div-overflow-p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 20px 0px 40px 0px;
}

@media (min-width: 1800px) {
  .div-overflow-p {
    -webkit-line-clamp: 6;
  }
}

@media (min-width: 300px) {
  .title-1 {
    font-size: 2.8rem;
    font-family: 'Roboto';
  }
}

@media (min-width: 992px) {
  .title-1 {
    font-size: 4rem;
  }
}

.sidenav {
  height: 100%;
  padding: 20vw 5vw;
  background: rgb(102, 153, 0,0.1);
  box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
  .sidenav {
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 20vw 5vw;
    background: rgb(102, 153, 0,0.1);
    box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.05);
    font-family: 'Roboto';
  }
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: start;
  border: none;
}

.div-articles {
  padding: 20vw 5vw;
}

@media (min-width: 768px) {
  .div-articles {
    padding: 5vw;
    border-left-style: solid;
    border-left-color: rgb(102,153,0);
    min-height: 100vh;
  }
}

.modal {
  --bs-modal-width: 800px;
}

.modal-content {
  padding: 10px 20px;
}

.articles-a {
  text-decoration: inherit;
  width: 100%;
  height: 100%;
  color: inherit;
  box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.05);
  padding: 20px;
  /*cursor: url(/assets/img/2.png?h=7fadebd5d3e17f3bff282b9164c33aff),auto;*/
  cursor: pointer;
}

.articles-a:hover {
  box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.25);
}