:root {
    --primario: #575151b9;
    --secundario: #cecbcb;
    --letras: #ffffff;
    --fuente: "Poppins", sans-serif;
    --fuente-logo: "Kaushan Script", sans-serif;
    --azul: #49096d;
    --form: #222;
    --botones:#a619f6;
  }

  html {
    min-height: 100%;
    position: relative;
  }

  body{
    background-color: var(--primario) !important;
    font-family: var(--fuente) !important;
  }

  .navbar-brand-uppercase {
    text-transform: uppercase;
  }

  .logo{
    width: 80px;
    height: 80px;
  }
  .titulo{
    margin-left: 20px; 
    font-family: var(--fuente-logo);
  }
  
  @media (max-width: 768px) {
    .titulo{
      margin-left: 0px;
      
    }    
  }

  @media (max-width: 400px) {
    .titulo{
      margin-left: 0px;
      font-size: 18px;
      
    }    
  }

  @media (max-width: 768px) {
    .nav-item{
      text-align: center;
    }    
  }

  #offcanvasDarkNavbar{
    width: 60%;
  }

  .contenedor-img{
    margin-top: 150px !important;
    margin-bottom: 60px !important;
  }

  @media (max-width: 575.98px) {
    .custom-col {
      display: inline-block !important;
      width: 50% !important;
      padding: 3px;
    }
  }

  .foto:hover {
    cursor: pointer;
    filter: grayscale(100%) sepia(100%) hue-rotate(220deg) saturate(500%) brightness(50%); 
}

  .modal-content{
    max-height: 800px;
    max-width: 680px;
  }

  .btn-close {
    color: var(--botones);
    background-color: var(--botones)!important;
    position: absolute;
    top: 10px; 
    right: 10px; 
    z-index: 9999; 
}


  footer {
    margin-top: auto;
    position: absolute;
    bottom: 0;
    width: 100%;
  }