/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/


.container .slide-captions h2{
      background-color: rgba(20, 20, 20, 0.3); 
      padding: 0.1em; 
      border-radius: 2px;
}

.container .slide-captions a {
      margin-top: 40px;
      background-color: rgba(20, 20, 20, 0.1);
}

#mainMenu > div > nav > ul > li.dropdown.hover-active > ul > li.dropdown-submenu.hover-active > ul > li {
      color: whitesmoke;
}

/* #seccionGaleriaProyecto2 > section > div {
      background-color: #f9f9fa;
  } */

#galeria-proyectoFinalizado1 > section > div > div > div,
#galeria-proyectoFinalizado3 > section > div > div > div {
        max-height: 200px;
  }

  .side-panel-wrap img {
        width: 14em;
  }

  .background-greydark li, 
  .background-greydark h2,
  .background-greydark h5,
  .background-greydark .icon {
      color: white;
  }

  #GaleriaProyecto2 > section {
        padding: 0;
  }

  #GaleriaProyecto2 > section > div {
        padding: 0;
  }

  #GaleriaProyecto2 > section > div > div.carousel.flickity-enabled.is-draggable.carousel-loaded > div {
        max-height: 350px;
         
  }

  #proyecto-Finalizado1 .container .row,
  #proyecto-Finalizado2 .container.row,
  #proyecto-Finalizado3 .container .row,
  #proyecto-Finalizado4 .container .row,
  #proyecto-Finalizado5 .container .row {
        --bs-gutter-y: 2rem !important;
  }