/* Mobile layer for the older table-based sub-pages (hotel and Payangadi pages).
   Linked from each page's <head>; the main Bootstrap pages do not use it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, iframe, embed, object, video { max-width: 100%; }
img { height: auto; }

@media (max-width: 1020px) {
  body { margin: 0; min-width: 0 !important; }
  table { max-width: 100% !important; }
  table[width], td[width], th[width] { width: auto !important; }
  td, th { word-wrap: break-word; overflow-wrap: anywhere; }
  /* fixed 980px div layouts (blue_mermaid, chera_rock, ezhara_beach) */
  div { max-width: 100% !important; box-sizing: border-box; }
  #banner { background-size: cover; background-position: center; }
  #logo1 { background-size: contain; max-width: 100%; }
}

@media (max-width: 760px) {
  body { padding: 0 8px; }
  table, tbody, tr, td, th {
    display: block;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  td, th { text-align: left; }
  td[align="center"], td div[align="center"], p[align="center"] { text-align: center; }
  img { display: inline-block; vertical-align: middle; }
  /* 1px spacer cells only add gaps once stacked */
  td:empty { display: none; }
  font[size="1"] { font-size: 12px; }
  #contentarea1, #contentarea2, #banner2 { float: none; width: auto !important; margin-left: 0; }
  #banner { height: 180px; }
  #menu, #footer, #footer2 { height: auto; overflow: hidden; }
  .menutxt { display: inline-block; margin: 6px 10px; }
}