* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

@font-face {
  font-family:"Ubuntu";
  src:url('assets/fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Ubuntu";
  src:url('assets/fonts/Ubuntu-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Ubuntu";
  src:url('assets/fonts/Ubuntu-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Montserrat";
  src:url('assets/fonts/Montserrat-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Montserrat";
  src:url('assets/fonts/Montserrat-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Montserrat";
  src:url('assets/fonts/Montserrat-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root {
  --px: 1px;
}

html, body {
  width:100%;
  height:100%;
  height:100dvh;
  background-color:#024baa;
  transition:background-color 0.85s ease;
  overflow:hidden;
  font-family:"Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

#stage {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-color:#024baa;
  transition:background-color 0.85s ease;
}

#book {
  position:relative;
  width:max(100vw, calc(100vh * 1080 / 1920));
  width:max(100vw, calc(100dvh * 1080 / 1920));
  height:max(100vh, calc(100vw * 1920 / 1080));
  height:max(100dvh, calc(100vw * 1920 / 1080));
  perspective:2600px;
  perspective-origin:50% 50%;
  background-color:#024baa;
  transition:background-color 0.85s ease;
}

@media (min-width:701px) {
  #book {
    width:100vw;
    height:calc(100vw * 1920 / 1080);
    max-height:100vh;
    max-height:100dvh;
    max-width:calc(100vh * 1080 / 1920);
    max-width:calc(100dvh * 1080 / 1920);
  }
}

.page {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(0deg);
  z-index:1;
  overflow:hidden;
}

.page.active { z-index:5; }

.page.flipping {
  transition:transform 0.85s cubic-bezier(.4,.1,.2,1);
}

.page::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.85s ease;
}
.page.flipping::after { opacity:1; }

.page-has-rail {
  background-size:88.611% 100%;
  background-position:left top;
}

#page-1 { background-color:#024baa; }
#page-2 { background-color:#024baa; }
#page-3 { background-color:#024baa; }
#page-4 { background-color:#024baa; }
#page-5 { background-color:#024baa; }

.book-meeting-hotspot {
  position:absolute;
  top:89.4%; left:27.31%; width:34.26%; height:2.9%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  z-index:20;
  text-decoration:none;
  color:#ffeadd;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(32 * var(--px));
  white-space:nowrap;
}

.ov {
  position:absolute;
  left:0;
  width:100%;
  text-align:center;
  font-family:"Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.page-has-rail .ov {
  width:88.611%;
}

.p1-title {
  top:26.9%;
  color:#ffffff;
  font-weight:700;
  font-size:calc(46 * var(--px));
  line-height:1.3;
}

.p1-subtitle {
  top:34.1%;
  color:#f9d9c8;
  font-weight:400;
  font-size:calc(30 * var(--px));
  line-height:1.42;
}

.p2-text1 {
  top:4.2%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(28 * var(--px));
  line-height:1.38;
}

.p2-text2 {
  top:13.2%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(33 * var(--px));
  line-height:1.28;
}

.p2-text3 {
  top:19.5%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(25.5 * var(--px));
  line-height:1.42;
}

#page-3 .p3-h1,
#page-3 .p3-body,
#page-3 .p3-h2 {
  left:15.37%;
  width:73.24%;
  text-align:left;
}

#page-3 .p3-h1 {
  top:33.9%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(45 * var(--px));
  line-height:1.22;
}

#page-3 .p3-body {
  top:40.6%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(28 * var(--px));
  line-height:1.4;
}
#page-3 .p3-body strong { font-weight:700; }

#page-3 .p3-h2 {
  top:57.6%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(42 * var(--px));
  line-height:1.2;
}

#page-3 .p3-b1,
#page-3 .p3-b2,
#page-3 .p3-b3,
#page-3 .p3-b4,
#page-3 .p3-b5,
#page-3 .p3-b6,
#page-3 .p3-b7 {
  left:28.89%;
  width:59.72%;
  text-align:left;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(27 * var(--px));
  line-height:1.32;
}

#page-3 .p3-b1 { top:61.5%; }
#page-3 .p3-b2 { top:67.3%; }
#page-3 .p3-b3 { top:73.2%; }
#page-3 .p3-b4 { top:78.9%; }
#page-3 .p3-b5 { top:84.5%; }
#page-3 .p3-b6 { top:90.8%; }
#page-3 .p3-b7 { top:94.9%; }

.p3-icon {
  position:absolute;
  z-index:2;
}
.p3-icon-1 { left:18.19%; top:61.67%; width:calc(70 * var(--px)); height:calc(78 * var(--px)); }
.p3-icon-2 { left:17.82%; top:68.23%; width:calc(78 * var(--px)); height:calc(47 * var(--px)); }
.p3-icon-3 { left:18.19%; top:73.75%; width:calc(70 * var(--px)); height:calc(55 * var(--px)); }
.p3-icon-4 { left:18.19%; top:79.17%; width:calc(70 * var(--px)); height:calc(61 * var(--px)); }
.p3-icon-5 { left:17.92%; top:84.375%; width:calc(76 * var(--px)); height:calc(76 * var(--px)); }
.p3-icon-6 { left:19.54%; top:90.625%; width:calc(41 * var(--px)); height:calc(64 * var(--px)); }
.p3-icon-7 { left:18.38%; top:94.79%; width:calc(66 * var(--px)); height:calc(48 * var(--px)); }

.slider-track {
  position:absolute;
  left:26.759%;
  top:47.656%;
  width:46.574%;
  height:9.635%;
  z-index:20;
}

.slider-thumb {
  position:absolute;
  left:4.771%;
  top:12.973%;
  width:27.237%;
  height:74.054%;
  border-radius:999px;
  cursor:grab;
  touch-action:none;
  background:transparent;
}
.slider-thumb:active { cursor:grabbing; }
.slider-thumb img {
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.p4-h1 {
  top:9.4%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(49 * var(--px));
  line-height:1.27;
}

.p4-sub {
  top:17.3%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(29 * var(--px));
  line-height:1.55;
}

.p4-bottom {
  top:85.5%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(29 * var(--px));
  line-height:1.55;
}

.li-hotspot {
  position:absolute;
  left:0;
  width:83.33%;
  display:block;
  z-index:20;
}
.li-julie { top:30.73%; height:13.02%; }
.li-peter { top:48.44%; height:11.72%; }
.li-alfie { top:64.32%; height:12.76%; }

.p5-h1 {
  top:17.14%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(45 * var(--px));
  line-height:1.2;
}

.p5-para {
  top:21.25%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:calc(30 * var(--px));
  line-height:1.52;
}

.p5-details {
  top:41.35%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:calc(44 * var(--px));
  line-height:1.2;
}

.p5-date {
  top:44.63%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(68 * var(--px));
  line-height:1.15;
}
.p5-date sup {
  font-size:0.5em;
  vertical-align:super;
}

.p5-h2 {
  top:64.74%;
  color:#881518;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(45 * var(--px));
  line-height:1.2;
}

.p5-join {
  top:68.18%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  font-size:calc(37 * var(--px));
  line-height:1.2;
}

.p5-reserve {
  top:71.93%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:calc(29 * var(--px));
  line-height:1.59;
}

.p5-explore {
  top:86.98%;
  color:#2c4557;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:calc(29 * var(--px));
  line-height:1.2;
}

.p5-rsvp {
  top:79.06%;
  color:#ffcbad;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(50 * var(--px));
  line-height:1.2;
  text-decoration:none;
  z-index:20;
}

.p5-website {
  top:82.4%;
  color:#ffcbad;
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:calc(30 * var(--px));
  line-height:1.2;
  text-decoration:none;
  z-index:20;
}

.p5-line {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:52.41%;
  height:auto;
  z-index:2;
}
.p5-line-1 { top:34.375%; }
.p5-line-2 { top:48.96%; }
.p5-line-3 { top:60.9%; }

.p5-location-icon {
  position:absolute;
  left:17.78%;
  top:51.98%;
  width:5.74%;
  height:auto;
  z-index:2;
}

.p5-location-text {
  position:absolute;
  left:17.04%;
  width:60%;
  top:52.29%;
  text-align:center;
  color:#2c4557;
  font-family:"Ubuntu", sans-serif;
  font-weight:700;
  font-size:calc(41 * var(--px));
  line-height:1.42;
  white-space:nowrap;
}

#tabRail {
  position:absolute;
  right:0; top:0;
  width:11.389%; height:100%;
  pointer-events:none;
  z-index:200;
  display:none;
}
#tabRail.visible { display:block; }

#tabRail img {
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.rail-hit {
  position:absolute;
  left:0;
  width:100%;
  border:none;
  outline:none;
  cursor:pointer;
  padding:0;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  pointer-events:auto;
}