/* screen - menu */
*{margin:0px;padding:0px;}
html {height: 100%;}
::-webkit-scrollbar {display: none;}
::-webkit-input-placeholder {text-align: center;}
:-moz-placeholder {text-align: center;}/* Firefox 18- */
::-moz-placeholder {text-align: center;}/* Firefox 19+ */
:-ms-input-placeholder {text-align: center;}
.eventos {background-color: #F8F8F8; font-family: "Montserrat", Helvetica, Arial, serif;}
.eventos a {text-decoration: none; color: #FFFFFF}
.eventos .close-button {left: 4%; position: absolute; top: 2.5%;}
.eventos .close-icon {
  font-size: 24px; border-radius: 50%; color: #000; background: #ffffff; padding: 10px; box-shadow: 0px 3px 20px #00000015; 
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.eventos .titulo {color: var(--white); left: 5%; padding: 10px 0; position: absolute; text-align: center; top: 2.5%; right: 5%; font-size: 19px; font-weight: 500;}
.eventos .buscador {position: absolute; top: 11.5%; left: 4%; right: 4%;}
#search {
  height: 35px; font-size: 13px; width: calc(100% - 160px); background-color: #EAEAEA; border-color: #EAEAEA; border-radius: 5px; border: 0;
  font-family: "Montserrat", Helvetica, Arial, serif; padding: 0 80px; outline: none; text-transform: uppercase;
}
.eventos .lupa {font-size: 25px; color: #5F5F5F; position: absolute; left: 3.5%; top: 15%; font-weight: normal;}
.eventos .contenedor {position: absolute; top: 18.5%; left: calc(4% - 8px); right: calc(4% - 8px); bottom: 0; overflow: auto;}
.eventos .agrupado {display: flex; justify-content: space-between;margin: 15px 8px;}
.eventos .agru_div_1 {font-size: 12px; font-weight: 600;}
.eventos .agru_div_2 {font-size: 11px;}
.eventos .ficha {display: table; width: calc(100% - 30px); background-color: #fff; margin: 8px; border-radius: 5px; position: relative; padding: 6px;}
.eventos .image {display: table-cell; height: 52px; width: 21.8%; background-color: darkgrey; background-position: center; background-size: cover; border-radius: 5px;}
.eventos .ficha-dist {align-items: center; font-size: 11px; padding: 0 12px 4px; font-weight: 300;}
.eventos .ficha-name {font-size: 11px; font-weight: 600; padding: 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.eventos .ficha-fecha {font-size: 13px; font-weight: 600;}
.eventos .ficha-hora {font-size: 10px;}
.eventos .ficha-desc {position: absolute; top: 0; width: 100%; height: 100%;}

.black_overlay{display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color:black; z-index:751;opacity:.90; filter:alpha(opacity=70);}
#notificacion {
  display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0px 0px 30px #585858; z-index:751;
  font-size: 14px; text-align: center; font-family: 'Montserrat', Helvetica, Arial, serif;
}
#salirNot {text-align: left; display: inline-block; max-width: 80%;}
#salirNot i {
  margin-bottom: 5%; font-size: 18px;border-radius:50%;color:#000000;background:#ffffff;padding:7px; cursor: pointer;
  text-shadow:rgba(0, 0, 0, 0.145) -1px -1px,rgba(0, 0, 0, 0.145) 1px 1px,rgba(0, 0, 0, 0.145) -1px 1px,rgba(0, 0, 0, 0.145) 1px -1px;
}
#contenidoNot {background-color: #fff; border-radius: 5px; padding: 30px;text-align: center;}


@media (max-height: 640px), (max-width: 300px){
  .eventos .close-button {left: 3%;}
  .eventos .close-icon {font-size: 20px;}
  .eventos .titulo {left: 3%; right: 3%; font-size: 16px;}
  .eventos .buscador {left:3%; right: 3%;}
  #search {height: 33px; font-size: 12px; width: calc(100% - 160px);}
  .eventos .lupa {font-size: 24px; top: 15%;}
  .eventos .contenedor {left: calc(3% - 5px); right: calc(3% - 5px);}
  .eventos .agrupado {margin: 14px 6px;}
  .eventos .agru_div_1 {font-size: 12px; font-weight: 600;}
  .eventos .agru_div_2 {font-size: 11px;}
  .eventos .ficha {width: calc(100% - 20px); margin: 5px; padding: 5px;}
  .eventos .image {height: 50px;}
  .eventos .ficha-dist {font-size: 10px; padding: 0 10px 2px;}
  .eventos .ficha-name {font-size: 10px; padding: 0 10px;}
  .eventos .ficha-fecha {font-size: 12px;}
  .eventos .ficha-hora {font-size: 9px;}
  #notificacion {font-size: 13px;}
}
@media (max-height: 500px), (max-width: 300px){
  .eventos .close-button {top: 2%;}
  .eventos .titulo {top: 2%;}
  .eventos .buscador {top: 15%;}
  .eventos .contenedor {top: 26.5%;}
}

@media (min-height: 901px) {
  .eventos .close-icon {font-size: 34px; padding: 17px;}
  .eventos .titulo {padding: 17px 0; font-size: 30px;}
  #search {height: 60px; font-size: 16px; width: calc(100% - 160px); border-radius: 10px;}
  .eventos .lupa {font-size: 35px; top: 19%;}
  .eventos .contenedor {left: calc(4% - 12px); right: calc(4% - 12px);}
  .eventos .agrupado {margin: 22px 15px;}
  .eventos .agru_div_1 {font-size: 19px;}
  .eventos .agru_div_2 {font-size: 17px;}
  .eventos .ficha {width: calc(100% - 38px); margin: 12px; border-radius: 10px; padding: 7px;}
  .eventos .image {height: 90px; border-radius: 10px;}
  .eventos .ficha-dist {font-size: 17px; padding: 0 23px 6px;}
  .eventos .ficha-name {font-size: 17px; padding: 0 23px;}
  .eventos .ficha-fecha {font-size: 19px;}
  .eventos .ficha-hora {font-size: 16px;}
  #salirNot {max-width: 60%;} #salirNot i {font-size: 28px;}
  #contenidoNot {border-radius: 8px;}
  #notificacion {font-size: 19px;}
}

@media (min-height: 1250px) {
  .eventos .close-icon {font-size: 42px; padding: 21px;}
  .eventos .titulo {padding: 21px 0; font-size: 34px;}
  #search {height: 65px; font-size: 18px; width: calc(100% - 160px); border-radius: 10px;}
  .eventos .lupa {font-size: 40px; top: 21%;}
  .eventos .contenedor {left: calc(4% - 15px); right: calc(4% - 15px);}
  .eventos .agrupado {margin: 30px 15px;}
  .eventos .agru_div_1 {font-size: 24px;}
  .eventos .agru_div_2 {font-size: 21px;}
  .eventos .ficha {width: calc(100% - 46px); margin: 15px; border-radius: 10px; padding: 8px;}
  .eventos .image {height: 100px; border-radius: 10px;}
  .eventos .ficha-dist {font-size: 19px; padding: 0 25px 8px;}
  .eventos .ficha-name {font-size: 19px; padding: 0 25px;}
  .eventos .ficha-fecha {font-size: 24px;}
  .eventos .ficha-hora {font-size: 18px;}
  #salirNot {max-width: 60%;} #salirNot i {font-size: 36px;}
  #contenidoNot {border-radius: 10px;}
  #notificacion {font-size: 24px;}
}