/* Laurent - Max De Cock — site stylesheet (rebuild of the old foliovilla "skin1" look, 2026-10).
   Colours and fonts come from the artist's settings (printed in each page's <style> block). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; font-size: 14px; line-height: 19px; font-weight: 400; cursor: default; }
a img { border: 0; }
.fv-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- left column: logo + menu ---------- */
.navicontainer { position: absolute; top: 0; left: 0; width: 228px; z-index: 3; }
.userlogo { position: relative; padding: 20px 0 0 15px; text-align: left; }
.the_logo_linker { position: relative; display: inline-block; text-decoration: none; color: inherit; }
.logoAsText { font-size: 22px; line-height: 1.2; padding-top: 25px; max-width: 200px; }
#site_logo { display: block; max-width: none; height: auto; }

.navi { position: relative; left: 25px; width: 218px; margin-top: 30px; padding-bottom: 10px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.45) transparent; }
.navi::-webkit-scrollbar { width: 6px; }
.navi::-webkit-scrollbar-thumb { background: rgba(128,128,128,.45); border-radius: 3px; }
.navi ul { list-style: none; margin: 0; padding: 0; }
.navi a { text-decoration: none; }
.navi a:hover, .collection_name:hover { opacity: .6; }
.navi > ul > li {
  border-bottom: 1px solid rgba(128,128,128,.36);
  padding: 7px 10px 5px 10px;
  margin-right: 0;
  position: relative;
}
.collection_name {
  display: block; width: 100%; margin: 0 0 3px 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; line-height: 1.25;
}
.pro_group > ul { display: none; padding: 2px 0 2px 0; }
.pro_group.open > ul { display: block; }
.pro_group.current > .collection_name { font-weight: bold; }
.pro_group li.project { font-size: .72em; line-height: 1.25em; padding: 3px 0 3px 8px; }
.navi li.current > a { font-weight: bold; }

/* little "i" next to the current series: hover/tap shows the series description */
.fv-info {
  display: inline-block; position: relative; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%;
  background: rgba(255,255,255,.88); color: #333; font: bold 10px/14px Georgia, serif; text-align: center; cursor: help; vertical-align: 1px;
}
.fv-desc-pop {
  display: none; position: fixed; left: 250px; margin-top: -14px; z-index: 20; width: 288px; padding: 12px; font-weight: normal;
  border: 1px solid #999; font: 12px/1.45 inherit; text-align: left; white-space: normal; cursor: default;
}
.fv-info:hover .fv-desc-pop, .fv-info:focus .fv-desc-pop { display: block; }

.fv-menu-btn { display: none; }

/* ---------- main area ---------- */
.fv-main { position: relative; margin-left: 238px; margin-right: 35px; padding-top: 8px; z-index: 0; }

/* series page: big picture */
.bigimagebox { position: relative; }
.theimgbox {
  position: relative; height: calc(100vh - 204px); min-height: 300px; margin: 8px 0 0 0;
  display: flex; align-items: center; justify-content: center;
}
#bigimg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .25s; }
#bigimg.loading { opacity: 0; }
.fv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 70px; border: 0; padding: 0;
  background: rgba(0,0,0,.25); color: #fff; font-size: 44px; line-height: 64px; cursor: pointer; opacity: 0; transition: opacity .2s;
}
.fv-prev { left: 0; } .fv-next { right: 0; }
.theimgbox:hover .fv-arrow, .fv-arrow:focus { opacity: .8; }
.description { position: relative; text-align: center; padding: 0 80px; min-height: 48px; margin-top: 10px; }
.worktitle { margin: 0; font-size: 12px; font-weight: 700; }
.workdescription { margin: 0; font-size: 10px; line-height: 1.5; }

/* thumbnail strip at the bottom */
.thumbs {
  position: fixed; left: 35px; right: 35px; bottom: 33px; height: 67px; padding: 3px 0;
  border-bottom: 1px solid #bebebe; z-index: 2;
}
.thumbs_innerbox {
  display: flex; gap: 2px; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  scrollbar-width: none;
}
.thumbs_innerbox::-webkit-scrollbar { display: none; }
.thumbs_innerbox a:first-child { margin-left: auto; }
.thumbs_innerbox a:last-child { margin-right: auto; }
.thumbs_innerbox a { flex: 0 0 auto; display: block; padding: 1px; }
.thumbs_innerbox img { display: block; height: 59px; width: auto; opacity: .3; transition: opacity .2s; }
.thumbs_innerbox a:hover img { opacity: .7; }
.thumbs_innerbox a.active img { opacity: 1; }
.fv-round {
  position: fixed; bottom: 106px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(128,128,128,.6);
  background: rgba(128,128,128,.25); color: inherit; font: 18px/22px Georgia, serif; padding: 0; cursor: pointer; z-index: 9;
}
.fv-round-prev { right: 65px; } .fv-round-next { right: 35px; }
.fv-round[disabled] { opacity: .15; cursor: default; }

.fv-empty, .fv-notfound { padding: 120px 0; text-align: center; opacity: .8; }

/* ---------- text pages ---------- */
.page-text { max-width: 900px; padding: 40px 0 90px 0; }
.fv-rich img { max-width: 100%; height: auto; }
.fv-rich iframe, .newsvideo iframe { max-width: 100%; }
.fv-rich a { color: inherit; text-decoration: underline; }
.contactImage { margin-bottom: 20px; }
.contactImage img { max-width: 100%; max-height: 420px; height: auto; }

.newsEntrybox { padding: 0 0 28px 0; margin: 0 0 28px 0; border-bottom: 1px solid rgba(128,128,128,.36); }
.publishedtime { font-size: 11px; opacity: .7; margin: 0 0 6px 0; }
.newsimage { display: inline-block; vertical-align: top; margin: 6px 8px 0 0; }
.newsimage img { display: block; max-height: 320px; max-width: 100%; height: auto; }
.newsvideo { margin-top: 10px; }
.fv-pager { display: flex; gap: 30px; padding-bottom: 80px; }
.fv-pager a { color: inherit; }

/* ---------- footer bits ---------- */
#copyright { position: fixed; left: 40px; bottom: 6px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; z-index: 2; }
#brandinglogo { position: fixed; z-index: 5; bottom: 5px; right: 15px; }
#brandinglogo a {
  white-space: nowrap; color: #fff; text-decoration: none; display: inline-block; padding: 1px 6px;
  background-color: rgba(65,65,65,.8); font: 10px/19px 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#brandinglogo a:hover { color: #f6ff2a; }

/* ---------- welcome page ---------- */
body.page-home { overflow: hidden; }
.backgroundimage { position: fixed; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.enter_button { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: opacity .1s; text-decoration: none; }
.enter_button:hover { opacity: .88; }
#imagebutton { display: block; max-width: 80vw; max-height: 80vh; }
.enter_text { font-size: 24px; color: #000; background: rgba(255,255,255,.8); padding: 8px 20px; }

/* ---------- phones & small screens ---------- */
@media (max-width: 980px) {
  .navicontainer { position: relative; width: auto; }
  .userlogo { text-align: center; padding: 25px 0; }
  .the_logo_linker { left: 0 !important; top: 0 !important; }
  #site_logo { max-width: 70vw; height: auto !important; margin: 0 auto; }
  .fv-menu-btn {
    display: block; position: absolute; top: 14px; right: 14px; z-index: 30; width: 42px; height: 36px; padding: 8px 9px;
    border: 0; border-radius: 4px; background: #222; cursor: pointer;
  }
  .fv-menu-btn span { display: block; height: 2px; margin: 0 0 6px 0; background: #fff; }
  .fv-menu-btn span:last-child { margin: 0; }
  .navi { display: none; left: 0; width: auto; margin: 0 15px 10px 15px; padding-bottom: 10px; max-height: none !important; overflow: visible; }
  .fv-desc-pop { position: absolute; left: 0; top: 20px; margin: 0; width: 260px; }
  body.menu-open .navi { display: block; }
  .pro_group li.project { font-size: .85em; padding: 6px 0 6px 10px; }
  .fv-main { margin: 0 15px; }
  .theimgbox { height: auto; min-height: 0; }
  #bigimg { width: 100%; max-height: none; }
  .fv-arrow { opacity: .55; }
  .description { padding: 0 10px; }
  .thumbs { position: relative; left: 0; right: 0; bottom: 0; margin: 20px 0 50px 0; }
  .fv-round { display: none; }
  .page-text { padding-top: 10px; }
  #copyright { position: static; padding: 10px 15px 40px 15px; }
}