/* screen - menu */
html {height: 100%;}
::-webkit-scrollbar {display: none;}
.menu {background-position: center; background-size: cover; height: 100%; overflow-x: hidden; position: fixed; width: 100%; margin: 0; font-family: "Montserrat", Helvetica, Arial, serif;}
.menu a {text-decoration: none; color: #FFFFFF}
.menu .close-button {left: 4%; position: absolute; top: 4%;}
.menu .close-icon {
  font-size: 24px; border-radius: 50%; color: #fff; background: #ffffff4d; padding: 10px; box-shadow: 0px 3px 20px #00000058;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.menu .nombre-terminal {
  color: var(--white); font-family: "Montserrat", Helvetica, Arial, serif; left: 35%;
  position: absolute; text-align: left; top: 2%; right: 5%; font-size: 24px; font-weight: 300;
}
.menu .nombre-terminal span {
  overflow: hidden; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical;
}
.menu .nombre {font-weight: 500; font-size: 33px;}
.menu .contenedor {position: absolute; top: 20.5%; left: 4%; right: 4%; bottom: 0; overflow: auto;}
.menu .titulo-filtro {
  color: var(--white); font-family: "Montserrat", Helvetica, Arial, serif; font-size: 22px; font-weight: 300; 
  display: flex; justify-content: space-between; align-items: baseline; padding: 0 10px 4px 7px;
}
.menu .titulo-vertodo {font-size: 16px; font-weight: normal;}
.menu .botonera {
  display: table; width: 100%; text-align: center; border-spacing: 8px; font-family: 'Montserrat', Helvetica, Arial, 
  serif; color: #FFFFFF; font-size: 16px;
}
.menu .row {display: table-row;}
.menu .ver-todo {height:47px;}
.menu .viaje-prov {
  font-size: 16px; text-align: center; width: calc(33% - 8px); font-weight: 500; background-color: #ffffff4d; border-radius: 5px;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid #ffffff40; padding: 10px 0; margin-top: 4px;
}
.menu .cell {display: table-cell; vertical-align: bottom; padding: 10px 0; width: 33%; border-radius: 5px;}
.menu .cell-rutas {background-color: #ffffff4d; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid #ffffff40}
.menu .separador {background-color: var(--white); height: 1px; opacity: 0.5; margin: 9px 7px;}
.menu .shadow {background-color: rgba(0,0,0,1.0); height: 100%; left: 0px; opacity: 0.61; position: fixed; top: 0px; width: 100%;}
.menu .selfie {padding: 4px 0 6px;}
:root {--white: rgba(255,255,255,1.0);}

@media (max-height: 640px), (max-width: 300px){
  .menu .close-icon {font-size: 20px;}
  .menu .nombre-terminal {font-size: 20px;}
  .menu .nombre {font-size: 25px;}
  .menu .contenedor {top: 19%;}
  .menu .titulo-filtro {font-size: 20px; padding: 0 7px 3px 5px;}
  .menu .titulo-vertodo {font-size: 14px;}
  .menu .botonera {font-size: 13px; border-spacing: 6px;}
  .menu .ver-todo {height:40px;}
  .menu .viaje-prov {font-size: 13px; width: calc(33% - 6px); padding: 8px 0; margin-top: 3px;}
  .menu .cell {padding: 6px 0;}
}

@media (min-height: 901px) {
  .menu .close-icon {font-size: 34px; padding: 17px;}
  .menu .nombre-terminal {font-size: 41px;}
  .menu .nombre {font-size: 56px;}
  .menu .titulo-filtro {font-size: 34px; padding: 0 15px 7px 10px;}
  .menu .titulo-vertodo {font-size: 22px;}
  .menu .botonera {font-size: 24px; border-spacing: 14px;}
  .menu .ver-todo {height:75px;}
  .menu .viaje-prov {font-size: 24px; width: calc(33% - 14px); border-radius: 10px; padding: 16px 0; margin-top: 8px;}
  .menu .cell {padding: 16px 0; border-radius: 10px;}
  .menu .separador {height: 2px; margin: 16px 7px;}
  .menu .selfie {padding: 8px 0 14px;}
}

@media (min-height: 1250px) {
  .menu .close-icon {font-size: 42px; padding: 21px;}
  .menu .nombre-terminal {font-size: 51px;}
  .menu .nombre {font-size: 66px;}
  .menu .titulo-filtro {font-size: 42px; padding: 0 15px 10px 10px;}
  .menu .titulo-vertodo {font-size: 28px;}
  .menu .botonera {font-size: 32px; border-spacing: 14px;}
  .menu .ver-todo {height:87px;}
  .menu .viaje-prov {font-size: 32px; width: calc(33% - 14px); border-radius: 10px; padding: 20px 0; margin-top: 10px;}
  .menu .cell {padding: 20px 0; border-radius: 10px;}
  .menu .separador {height: 2px; margin: 22px 7px;}
  .menu .selfie {padding: 10px 0 25px;}
}