.menu-btn {
  position: relative;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.menu-btn-burger {
  width: 25px;
  height: 2px;
  background: #333;;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}
.menu-btn-burger::before,
.menu-btn-burger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #333;;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}
/* ESPACIO ENTRE LAS BARRAS CON RESPECTO A LA DE EN MEDIO */
.menu-btn-burger::before {
  transform: translateY(-6.5px);
}
.menu-btn-burger::after {
  transform: translateY(6.5px);
}
/* ANIMACIÓN */
.menu-btn.open .menu-btn-burger {
  transform: translateX(-50px);
}
.menu-btn.open .menu-btn-burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn-burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}
/*****************************************************************************************************************/
.menu {
  position: fixed;
  padding: 5px 10px;
  background-color: whitesmoke;
  z-index: 10000;
  font-size: 75%;
  display: none;
  overflow-y: auto;
}

.menu-pos {
  top: 9vh; /* Igual que el alto del header para que el menú aparezca justo debajo */
  left: 0;
}

.menu a {
  padding: 3px 0px;
  text-decoration: none;
  color: #333;
  display: block;
  cursor: pointer;
}

.menu a:hover {
  font-weight: bolder;
}

.menu-idiomas {
  right: 0;
  width: 110px;

  font-size: 80%;

  border: 1px solid #d4d3d3;
}

/* Modificación que sobreescribe a Bootstrap para el comportamiento del hover y el click en la opción de menú */
.dropdown-item:hover, .dropdown-item:focus {
    color: red;
    text-decoration: none;
    background-color: #dcdcdc;
}

.dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
    background-color: transparent;
}