html, body {margin:0; padding:0; height:100%; font-family:'Baskerville', 'Times New Roman', serif; scroll-behavior:smooth;}
body {border:20px solid white; overflow-x:hidden;}
* {box-sizing: border-box;}

.hero {position:relative; height:100vh; overflow:hidden;}
.slideshow-container {position:absolute; top:0; left:0; width:100%; height:calc(100vh - 40px);}
.slide {position:absolute; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease-in-out;}
.slide.active {opacity:1; z-index:1;}
.caption-overlay {position:absolute; bottom:70px; width:100%; text-align:center; font-size:1.3rem; text-shadow:0 2px 6px rgba(0,0,0,0.7); opacity:0; transition:opacity 1.5s ease-in-out; z-index:10; color:#fff;}
.caption-overlay.active {opacity:1;}

.title-overlay {position:fixed; top:30px; left:30px; right:30px; padding:20px 0px 10px 0; display:flex; justify-content:space-between; align-items:flex-end; z-index:10; border-bottom:1px solid #fff; color:#fff; transition: color 0.5s ease;}
.title-overlay a {color:#fff; transition: color 0.5s ease;}
.title-left {display:flex; align-items:flex-end;}
#logo {width:80px; height:80px; object-fit:contain; margin-right:15px; cursor:pointer;}
.title-text {display:flex; flex-direction:column; justify-content:flex-end;}
.title-main {font-size:2.5rem; font-weight:400; letter-spacing:1px;}
.title-sub {font-size:0.9rem; font-weight:300; font-style:italic; opacity:0.9; margin-top:4px; letter-spacing:0.5px;}
.title-sub .cap {font-weight:700; font-style:normal; font-size:1.2rem;}
.title-right {display:flex; align-items:flex-end; gap:25px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;}
.title-right a {text-decoration:none; font-size:1rem; opacity:0.85; transition:opacity 0.3s;}
.title-right a:hover {opacity:1;}
.title-overlay.scrolled-to-black {color:var(--primary);}
.title-overlay.scrolled-to-black a {color:var(--primary);}

.dots {position:absolute; bottom:60px; width:100%; display:flex; justify-content:center; gap:8px; z-index:2;}
.dot {width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.6); transition:background 0.3s;}
.dot.active {background:white;}
.dot:hover {cursor:pointer;}

.arrow {position:absolute; top:50%; transform:translateY(-50%); color:white; font-size:2rem; background:rgba(0,0,0,0.25); border:none; cursor:pointer; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:10; user-select:none; transition:background 0.3s;}
.arrow:hover {background:rgba(0,0,0,0.6);}
.arrow.left {left:50px;}
.arrow.right {right:50px;}


/*.map-section {height:100vh; width:100%; background:#fff; position:relative;}
#map-container {position:absolute; top:0; left:0; width:100%; height:100%; background:#030;}
*/

.content-section {
  height:100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-top: 20px solid white;
  border-bottom: 20px solid white;
	scroll-snap-align: start;
}

#calendar {background:#c00;}
#locations {background:#00c;}
#map {background:#0c0; border-top:160px solid #fff;}

.travel-train::before {content:"\f238"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:0;}
.travel-flight::before {content:"\f5b0"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:0;}
.travel-cruise::before {content:"\f21a"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:0;}
.travel-location::before {content:"\f236"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:0;}