/* Variables Generales */
:root {
  --dark-grey: #303841;
  --mid-grey: #3A4750;
  --light-grey: #EEEEEE;
  --yellow: #F6C90E;
}

.bgDarkGrey {
  background-color: var(--dark-grey);
}

.bgMidGrey {
  background-color: var(--mid-grey);
}

.bgLightGrey {
  background-color: var(--light-grey);
}

.bgYellow {
  background-color: var(--yellow);
}

/* Estilos Navbar */
#mainNav {
  background-color: var(--dark-grey);
}

/* Tamaño Logo */
.logo {
  max-width: 100px;
}

/* Boton Login dentro de Offcanvas */
.loginButton {
  text-decoration: none;
  background-color: var(--yellow);
  color: var(--dark-grey);
  padding: 8px 16px;
  margin-right: 5px;
  border-radius: 0.375rem;
}

.loginButton:hover {
  color: var(--light-grey);
}

.loginButton:active {
  color: var(--mid-grey);
}

/* Botones de navegación */
.buttonNav {
  color: var(--light-grey);
}

.buttonNav:hover {
  font-size: larger;
  color: var(--yellow);
}

.togglerNav {
  background-color: var(--light-grey);
  color: var(--yellow);
}

.nav-link:focus {
  color: var(--light-grey);
}

/* Ocultar Boton Login del Navbar expandido */
.loginButtonDisplay {
  display: none;
}

/* Breakpoint lg xl xxl */
@media (min-width: 992px) {

  /* Tamaño Logo */
  .logo {
    max-width: 150px;
  }

  /* Botones de navegación */
  .buttonNav {
  width: initial;
  text-align: center;
  }

  .buttonNav:hover {
    color: var(--yellow);
    font-size: initial;
  }

  .loginButtonDisplay {
    display: flex;
  }
}

/* Estilos Footer */
.footerLink {
  color: #757575;
}

.footerLink:hover {
  color: var(--light-grey);
}

.popcornImg {
  max-width: 4.7rem;
}

/* Acerca de nosotros */
@media (max-width: 767px) {
  .rounded {
    max-width: 100px;
  }

  .logohyper {
    max-width: 300px;
  }

  .card {
    max-width: 300px;
    margin: 25px 0;
    border-radius: 45px;
  }

  .card-img-top {
    justify-content: center;
  }

  .quienes {
    flex-direction: column;
  }

  .integrantes {
    flex-direction: column;
  }
}

.rounded {
  justify-content: center;
}

.logohyper {
  justify-content: center;
}

.quienes {
  margin-left: 15px;
}

section {
  margin-left: 20px;
}

.nosotros {
  width: 350px;
  height: 249px;
}

.card {
  border-radius:100px;
  margin: 25px 25px;
}