/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root {
  --alto-menu: 30px;
  --color-menu: #000;
  --color-menu-invert: #fff;
}

/* /// HEADER */
#headerContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - var(--ancho-barra-scroll));
  /* height: var(--alto-menu); */
  /* background-color: aqua; */
  z-index: 1;
  margin-top: 50px;
}
#header {
  /* background-color: red; */
  /* border: 1px solid red; */
  width: 100%;
  max-width: var(--max-width);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: auto;
  /* position: absolute; */
  /* margin-left: 50%; */
  /* transform: translateX(-50%); */
  color: var(--color-menu);
  /* filter: invert(0%); */
}
#header.invert {
  color: var(--color-menu-invert) !important;
}
#header.invert > div > #imgLogoHeader {
  /* filter: invert(100%) brightness(200%) grayscale(100%); */
}

#logoContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.imgLogoHeader {
  left: 0;
  top: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  position: absolute;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  height: 3rem;
  opacity: 0;
  cursor: pointer;
}
#logoNegro {
  opacity: 1;
}
#header.invert > #logoContainer > #logoBlanco {
  opacity: 1;
}
#header.invert > #logoContainer > #logoNegro {
  opacity: 0;
}

#menuContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: main_font;
  /* font-family: "Saira", sans-serif; */
  font-size: 1.25rem;
  /* font-weight: bold; */
  -webkit-transition: color 1s;
  -o-transition: color 1s;
  transition: color 1s;
  /* color: var(--color-menu); */
  /* color: var(--color-menu-invert); */
}

.opcionMenu {
  /* background-color: greenyellow; */
  margin-left: 10px;
  cursor: pointer;
}
.opcionMenu:nth-child(1) {
  /* font-weight: bold; */
}
.opcionMenu:hover {
  font-weight: bold;
}

.separadorMenu {
  /* border: 1px solid red; */
  margin-left: 10px;
}

/* /// IDIOMA */
/* #region */
.es,
.en {
  /* display: none; */
  transform: scale(0);
  opacity: 0.0;
  position: fixed;
}
.es.idiomaSelected,
.en.idiomaSelected {
  position: relative;
  opacity: 1;
  transform: scale(1);

  transition: opacity 0.8s 0.0s;
  display: block;
}
/* #endregion */