@font-face { src: url('fonts/rethink.ttf'); font-family: 'font1'; font-weight: normal; font-style: normal; }
@font-face { src: url('fonts/norwest.woff'); font-family: 'font2'; font-weight: normal; font-style: normal; }
@font-face { src: url('fonts/crentia.woff'); font-family: 'font3'; font-weight: normal; font-style: normal; }
@font-face { src: url('fonts/crentiaitalic.woff'); font-family: 'font3'; font-weight: normal; font-style: italic; }
@font-face { src: url('fonts/alice.woff'); font-family: 'font4'; font-weight: normal; font-style: normal; }
@font-face { src: url('fonts/noto.woff'); font-family: 'font5'; font-weight: normal; font-style: normal; }
:root { font-size: 20px; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html { max-width: 100vw; width: 100%; max-block-size: 100vh; background: #000; overflow-x: hidden; scrollbar-width: thin; overflow-y: auto; scrollbar-width: thin; overscroll-behavior-y: contain; }
body { max-width: 1200px; width: 100%; height: 100%; margin: 0 auto; font-family: 'font1'; font-size: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: transparent; background-image: url('photos/backdrop.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; overflow-x: hidden; }
p { overflow-wrap: break-word; }
h1 { font-family: 'font2'; font-size: 2em; padding: 2rem 1em 1.5rem 0; line-height: 1; letter-spacing: 1px; }
h2 { font-family: 'font2'; font-size: 1.5em; padding: 0.4em 0 1em 0; line-height: 1; letter-spacing: 1px; }
a { display: inline-block; text-decoration: none; color: inherit; cursor: pointer; user-select: none; font-size: inherit; }
a:visited { text-decoration: none; color: inherit; }
a[href] { text-decoration: none; color: inherit; }
img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; border-radius: 0.3rem; user-select: none; }
strong { font-weight: bold; }
.emphasis { padding: 0 0.2em; color: rgb(218, 44, 44); border: 0.1em solid rgb(33, 99, 179); border-radius: 0.3rem; background: #fff; user-select: text; vertical-align: baseline; }
#curtain { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 1024; opacity: 1.0; transition: 300ms ease-in-out; }
#flow { max-width: 100%; min-width: 100%; height: fit-content; display: flex; flex-flow: column wrap; justify-content: center; font-size: 1em; }
#banner { max-width: 100vw; min-width: 100%; max-height: 180px; min-height: 180px; display: flex; flex-flow: row nowrap; background-color: rgba(255, 255, 255, 0.5); background-image: url('photos/banner.png'); background-repeat: no-repeat; background-size: cover; background-position: center; }
#bannercontent { display: block; width: 100vw; max-height: 180px; min-height: 180px; height: 180px; padding: 0.5rem 0; }
.infopane { max-width: 100%; display: flex; flex-flow: row wrap; gap: 0.2rem; padding: 0.5rem; justify-content: center; font-family: 'font5'; font-weight: bold; color: #fff; overflow: hidden; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); }
.infoitem { position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; font-size: 1em; line-height: 1.4; cursor: text; white-space: pre-wrap; }
.infoitem::before { display: inline-block; min-width: 1rem; max-width: 1rem; min-height: 1rem; max-height: 1rem; margin-left: 0.2rem; margin-right: 0.4rem; content: ''; background-size: fill; background-repeat: no-repeat; background-position: center; vertical-align: middle; }
.infopane #info_addr { flex: 0 0 100%; }
.infopane #info_phone { margin-right: 0.5rem; }
#info_addr::before { background-image: url('icons/ic_location.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
#info_phone::before { background-image: url('icons/ic_phone.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
#info_mail::before { position: relative; top: 0.1em; background-image: url('icons/ic_mail.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
#menupanebtn { display: none; min-width: 100%; max-width: 100%; max-height: 3rem; min-height: 3rem; align-items: center; justify-content: center; text-transform: uppercase; cursor: pointer; color: white; background: rgba(0, 0, 0, 0.7); user-select: none; touch-action: manipulation; z-index: 998; transition: background-color 0.2s ease-in-out; }
#menupanebtn p { flex: 1; max-height: 3rem; min-height: 3rem; text-align: center; }
#menuind { display: inline-block; max-width: 2em; min-width: 2em; max-height: 3em; min-height: 3em; background-image: url('icons/menu_default.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; user-select: none; }
#mpc { min-width: 100%; max-width: 100%; max-height: 3em; min-height: 100%; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: stretch; gap: 0; padding: 0; color: white; background: rgba(0, 0, 0, 0.7); }
#mpc * { user-select: none; }
#mpc a { flex: 1; font-family: 'font2'; font-size: 1rem; letter-spacing: 1px; line-height: 3; text-align: center; vertical-align: middle; opacity: 1; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
#mpc a:active { color: rgb(255, 255, 255); color: inherit; background: rgb(0, 0, 0); font-weight: normal; }
#mpc.w { max-height: 100%; min-height: 16em; opacity: 1; transform: translateY(0); }
#mpc.w a { line-height: 4; opacity: 1; }
#contentpane { flex: 1; display: flex; flex-flow: column nowrap; justify-content: center; padding: 0 2em 2em 2em; z-index: 5; overflow: hidden; font-size: 1.2em; }
#contentpane > p { padding: 0 0.5em 1em 0.5em; }
#headingphoto { height: fit-content; }
#bottompane { color: rgb(255, 255, 255); background: #000; text-align: center; padding: 0.2em; user-select: none; font-size: 0.8rem; }
#bottompane::before { content: 'Copyright \00A9  2025'; }
#mdiv { flex: 1; display: flex; flex-flow: column nowrap; gap: 1em; padding: 0 0.5em; }
.mcard { max-width: 100%; min-width: 100%; display: flex; flex-flow: row nowrap; padding: 0 0 0.4em 0; text-align: start; }
.mcard p { display: inline-block; padding: 0; }
.mcard img { display: inline-block; min-width: 10em; max-width: 10em; margin-top: 0.05em; }
.mside { flex: 1; display: flex; flex-flow: column nowrap; gap: 0; padding-left: 1em; justify-content: start; font-size: 1em; }
.mname { padding: 0; font-family: 'font3'; font-size: 1.2em; font-weight: bold; }
.mname::first-letter { margin-left: -0.1em; padding: 0; font-family: 'font4'; font-weight: normal; font-size: 1.8em; line-height: 0.8; }
.mdesg { font-size: 1em; font-weight: bold; vertical-align: top; }
.mdesc { flex: 1; }
#caselist { display: flex; flex-flow: column nowrap; gap: 0; padding: 0 1em; font-size: 1em; }
#newspane { display: flex; flex-flow: column nowrap; gap: 0.5em; padding: 0 1em; }
.newsitem { padding-left: 0.5em; }
.newsitem span:first-child { padding-inline-end: 0.25em; font-weight: bold; text-decoration: underline; }
/* .newsitem > .emphasis { margin-right: 0.25em; font-weight: bold; color: rgb(26, 8, 230); } */
#contactform { display: flex; flex-flow: column nowrap; gap: 0.25em; padding: 0 1em 1em 1em; }
#contactform input:not([type='submit']) { padding: 0.4rem; border: 0.1rem solid rgb(128, 128, 128); border-radius: 0.3rem; font-family: 'font1'; font-size: 1em; }
#contactform input:not([type='submit']):focus { outline: none; border-color: rgb(2, 145, 195); }
.mbtn { padding: 0.4rem; background-color: #fff; border: 0.1rem solid rgb(128, 128, 128); border-radius: 0.3rem; font-family: 'font5'; letter-spacing: 0.5px; font-weight: bold; font-size: 1em; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
#contactform .mbtn { background-color: rgb(232, 232, 232); border: 0.1rem solid rgb(128, 128, 128); }
.mbtn:hover, #contactform .mbtn:hover { background-color: rgb(138, 212, 244); }
.mbtn:active, #contactform .mbtn:active { border-color: rgb(218, 44, 44); color: #fff; background-color: rgb(218, 44, 44); }
textarea { padding: 0.4rem; font: inherit; font-size: 1em; resize: none; border: 0.1rem solid rgb(128, 128, 128); border-radius: 0.3rem; }
textarea:focus { outline: none; border-color: rgb(2, 145, 195); }
#contactpane { display: flex; flex-flow: column nowrap; gap: 0.5em; padding: 0 0 0 1em; }
#contactpane p { line-height: 1.5; font-size: 1em; }
#emailaddr { font-family: 'font3'; font-style: italic; padding: 0.4em 0.2em; }
#whatsappbtn { color: #00663a; user-select: none; }
.options { display: block; position: relative; inset: 0; padding-left: 1.2em; font-size: inherit; }
.options::before { position: absolute; inset: 0; top: 1ch; left: 0.4em; width: 0.4rem; height: 0.4rem; content: ''; background-image: url('icons/listitem.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
#i5834, #i4637 { position: fixed; max-height: 0vh; min-height: 0vh; transform: translateY(-9999em); }
@media (max-width: 700px)
{
  :root { font-size: clamp(2vw, 2.4rem, 3.2vw); }
  body { max-width: 100vw; width: 100%; margin: 0 auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; overscroll-behavior-y: auto; }
  h1 { margin: auto; padding-left: 0; padding-right: 0; }
  h2 { padding: 0.5em 0.4rem 2rem 0.4rem; font-size: 1.5em; text-align: center; }
  #flow { max-width: 100%; min-width: 100%; height: fit-content; display: flex; flex-flow: column wrap; justify-content: center; font-size: 1em; }
  #banner { max-height: 120px; min-height: 120px; background-position: right; background-image: url('photos/banner_mob.png'); }
  #bannercontent { max-height: 120px; min-height: 120px; overflow-y: hidden; }
  .infopane { flex-flow: column nowrap; justify-content: start; }
  .infoitem { justify-content: start; }
  #menupanebtn { display: flex; }
  #menuind { transition: transform 0.1s ease-in-out, color 0.2s ease-in-out; }
  #mpc { flex-flow: column nowrap; max-height: 0; min-height: 0; touch-action: manipulation; transform: translateY(-2rem); opacity: 0; transition: min-height 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; }
  #mpc a { opacity: 0; }
  #mpc a:not(:last-child) { box-shadow: 0 -1px 0 #fff inset; border-radius: 0; }
  #contentpane { padding: 0 0.5em 2em 0.5em; }
  #contentpane > p { padding: 0 1em 0.5em 1em; font-size: 1.2em; }
  #bottompane { font-size: 0.7em; }
  #mdiv { padding-left: 1em; }
  .mcard img { display: inline-block; min-width: 8em; max-width: 8em; }
  #caselist { font-size: 1.2em; }
  .newsitem { font-size: 1.2em; }
}
@media not (hover: none)
{
  #menupanebtn:hover { background: rgba(0, 0, 0, 0.8); }
  #mpc a:hover { background-color: #fff; color: #000; }
}