.header-desktop {
  display: none;
}

.header-mobile {
  display: grid;
  grid-auto-rows: min-content;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  margin: 0;
  z-index: 1000;
  height: 48px;
  padding: 0.75rem 1rem;
  overflow: hidden;
  background: rgb(255,255,255);
  transition: 300ms;
}

#header-mobile {
  z-index: 100;
}
#menu-mobile {
  z-index: 50;
  overflow: auto;
}

.header-mobile.open { 
  bottom: auto;
  padding: 0.75rem 1rem 0.5rem;
  -webkit-box-shadow: 0px 12px 8px 0px rgba(0,0,0,0.2); 
  box-shadow: 0px 12px 8px 0px rgba(0,0,0,0.2);
  /* border-bottom: 1px solid rgb(225, 225, 225); */
}

.header-mobile__title,
.header-mobile__info,
.header-mobile__page,
.header-mobile__menu-button {
  display: flex;
}

.header-mobile__title,
.header-mobile__page {
  margin-top: 2px;
}

.header-mobile__title {
  grid-column: 1/3;
}
.header-mobile__info {
  grid-column: 3/-1;
  justify-content: space-between;
}
.header-mobile__page {
  overflow: hidden;
  width: auto;
}
.header-mobile__menu-button {
  margin-left: 1rem;
}

.header-mobile__menu-button img {
  width: 24px;
}

.header-mobile__info--search {
  margin-left: auto;
}

#menu-search {
  width: 24px;
  margin-left: auto;
}

#menu-button.open-menu-button{
  margin-left: 1rem;
}

@keyframes runningText {
  0% {transform: translate(0);}
  5% {transform: translate(0);}
  80% {transform: translate(-100%);}
  100% {transform: translate(-100%);}
}

.header-mobile__page h2 {
  white-space: nowrap;
  min-width: fit-content;
  max-width: fit-content;
  padding-right: 1rem;
}

.running-text {
  animation: runningText 5s cubic-bezier(0.2, 0, 0.8, 1) 2s infinite backwards;
}

.header-mobile__menu {
  margin: 0 -1rem;
  margin-top: 1rem;
  grid-column: 1/-1;
}

.header-mobile__menu__container {
  padding: 1rem 1rem 2.5rem;
  background-color: white;
}
.header-mobile__menu__container li {
  margin-bottom: .25rem;
}
.header-mobile__menu__container:not(:first-child) {
  border-top: 1px solid rgb(225, 225, 225);
}
.header-mobile__menu__container:last-child {
    padding: 1rem 1rem .3rem;
    border-bottom: 1px solid rgb(225, 225, 225);
}

.header-mobile__menu__container__full {
    grid-column: span 6;
    margin-bottom: 0.5rem;
}

.header-mobile__menu__container__half {
    grid-column: span 3;
    margin-bottom: 0.5rem;
}
.header-mobile__menu__container__quarter {
    grid-column: span 1;
    margin-bottom: 0.5rem;
}

.hide {
  display: none;
}

.menu-language {
  opacity: 0.5;
}

/* 
  TABLET 
*/
@media only screen and (min-width: 475px) {

  .header-mobile__title {grid-column: 1/3;}
  
  .header-mobile__info {
    grid-column: 3/-1;
    justify-content: space-between;
  }

  .header-mobile__menu.open {
    -webkit-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.2);
  }

  .header-mobile__menu--pages{
    grid-column: 1/7;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.75rem;
  }

  .header-mobile__menu--pages ul {
    grid-column: span 4;
  }

  .header-mobile__menu__container__half {
    grid-column: span 4;
  }

  .header-mobile__menu--links{grid-column: 7/-1;}

  #menu-button.open-menu-button{
    margin-left: 16.8vw;
  }
}

/* DESKTOP */
@media only screen and (min-width: 1024px) {
  .header-mobile {
    display: none;
  }

  .header-desktop {
    display: grid;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    margin: 0;
    z-index: 1000;
    padding: 0.75rem;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 56%, rgba(255,255,255,1) 100%);
  }

  .header-desktop__title{
    grid-column: 1 / 4;
  }


  .header-desktop__pages {
    grid-column: 4 / 10;
  }

  .header-desktop__search img {
    width: 24px;
    object-fit: contain;
  }

  .header-desktop__pages ul {
    display: flex;
  }

  .header-desktop__pages ul li {
    margin-right: 1rem;
  }

  .header-desktop__actions {
    grid-column: 11/-1;
    display: flex;
    justify-content: flex-end;
  }

  .header-desktop__actions ul {
    display: flex;
    margin-right: 2rem;
  }

  .header-desktop__actions li > a{
    margin-left: .75rem;
    color: rgb(160, 160, 160);
    transition: 300ms;
  }

  .header-desktop__actions li:hover > a{
    color: black;
  }

  .header-desktop__actions li.active > a {
    color: black;
  }

  .header-desktop__search img {
    transition: 300ms;
  }

  .header-desktop__search:hover img {
    transform: scale(1.03) rotate(10deg);
  }
}