/* CSS Reset */
html {
    box-sizing: border-box;
    font-size: 16px;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

p {
  margin: 10px 0;
  line-height:145%;
  letter-spacing:1px;
}

ol, ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Global Styles */
html {background-color: #6F171A;}
body {
    font-family: Palatino, serif;
    font-size: 1.1em;
    line-height: 120%;
	background-color: #6F171A;
    margin: 2% 1% 5% 1%; /* Reset default body margin */
}

.mail-link {
    color: #FFFFFF; /* Color for all link states */
    text-decoration: underline; /* Optional: Remove underline */
}


.playfair {
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: 400; /* Default weight if not specified */
  font-style: normal;
  font-variation-settings:
    "width" 100;
}


.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

#myVideo {
  width: 100%;
  height: auto;
}

.home1 {
    font-family: playfair!important;
    font-size: 300%!important;
    line-height: 130%!important;
    text-shadow: none;
    color: #FFFFFF;
    margin: 2% 0 0 0; /* Reset default heading margin */
    border:0px solid yellow;
    text-align:right;
    letter-spacing: -1px;
    font-weight:900;
	transform: scaleY(1.15); /* 1 represents 100%, so 1.05 is 105% (5% stretch) */
	transform-origin: top; /* Ensures the stretching happens from the top */
	display: inline-block; /* Keeps the element inline but allows transforms */
	border:0px solid green;
}

h1:first-letter {
font-family: playfair!important;
font-size: 140%;
background-color: transparent;
color: #fff;
margin: 0.125% -5px 0 0;
}

.h2 {
font-family: playfair, serif;
font-style:italic;
color: white;
font-size: 1.6em;
line-height:100%;
margin: 0.125% .25% 0 0; 
border:0px solid blue;
text-align:right;
}
.home3 {
font-family: playfair, serif;
color: white;
font-size: 1.5em;
line-height:120%;
margin: 1% 0 3% 0;
border:0px solid blue;
text-align:left; /* Override global right alignment for h3 in panels */
width:85%;
}
.home4 {
font-family: playfair, serif;
color: white;
font-size: 1.5em;
line-height:120%;
margin: 1% 0 3% .5%; /* Reset default heading margin */
border:0px solid blue;
text-align:left; /* Override global right alignment for h3 in panels */
width:85%;
}

.expand-icon {
    width: 25px;
    position: relative;
    top: .75%;
    left: 2%;
    z-index: 100000;
    cursor: pointer;
    border:1px solid #FFFFFF;
    padding:0px;
}

.img-menu {
    width: 76px;
    z-index: 300000;
    position: fixed;
    left: 87.25%;
    margin:4% 0 0 0;
    border:1px solid #FFFFFF;
    background-color:#6F171A;
    padding:3px;
}

/* Optional: smooth fade for blinking effect */
#fixedMenu {
  transition: opacity 0.2s;
}


.fade-in {
    animation: fadeIn ease 4s;
    -webkit-animation: fadeIn ease 4s;
    -moz-animation: fadeIn ease 4s;
    -o-animation: fadeIn ease 4s;
    -ms-animation: fadeIn ease 4s;
}

.italics {font-style:italic;}
.bold-900 {font-weight:900;}
.color-FFF {color:#FFFFFF;}
.text-120 {font-size:120%;}
.line-height-130 {line-height:130%;}
.caption-1 {font-style:italic; font-weight:900; color:#FFFFFF; font-size:115%; line-height:130%;padding:0 0 1% 0;}
.credit-caption-1 {font-style:italic; font-weight:900; color:#FFFFFF; font-size:100%; line-height:130%;}
.image-1 {width:100%;}
.image-2 {width:40%;float:right;margin:1% 0 3%;}
.image-3 {width:40%;float:left;margin:1% 3% 0 0;}
.flush-right {text-align:right;}
.float-left {float:left;}
.float-right {float:right;}
.opacity-8 {opacity:.8;}
.border-white {border:1px solid #FFFFFF;}
.display-yes-no {display: block;}
.display-no {display: none;}
.top-blurb {width:45%;float:left;margin:4% 3% 0 0;color:#FFFFFF;font-size:1.4em;font-weight:600;line-height:130%;text-align:left;}
.keyline {border:1px solid #410000;}
.new-release {width:100%;}
.pos-new-release {position:absolute;top:0;left:60%;border:0px solid green;}
.img-fb-icon-1 {width: 50px;vertical-align: middle;}
.join {padding-left: 13%;color: #ffffff;}
.img-travel-blog {width:20%;vertical-align:top;display:inline-block;}
.img-inbetween-cover-1 {width:55%;float:left;margin:0 2% 0 0;}
.img-60p {width:70%}

.travel-blog-section {margin:-5% 0 0 2.5%;}
.wilderness-logo {width:20%;position:relative;top:4px;padding:4px 10px 0 0;}
.travel-blog-header {font-family: playfair, serif;color: white;font-size: 1.7em;line-height:150%;margin: 0 0 3% 0; /* Reset default heading margin */border:0px solid blue;text-align:left; /* Override global right alignment for h3 in panels */width:85%;}
.travel-blog-panels {margin:-2.5% 0 0 0;}
.bold-journey {width:24.5%;margin:2% 0 0 2.5%;padding: 3px;background-color:#FFFFFF;border:1px solid #000000;position:relative;display: inline-block;vertical-align:top;}
.interview-section {margin:5% 0 0 2.5%;}
.interview-header {font-family: playfair, serif;color: white;font-size: 1.7em;line-height:150%;margin: 0 0 -1.5% 0; /* Reset default heading margin */border:0px solid blue;text-align:left; /* Override global right alignment for h3 in panels */width:85%;}
.img-podcast {width:25%;margin:2% 0 0 2.5%;display:inline-block;vertical-align:top;}
.pos-video {margin-top:-5%;}
.moon-menu {width: 40%;padding: 6%;}
.video-container {position: fixed;top: 0px;left: 0px;width: 100%;border-bottom: 0px solid #7e2d32;padding: 0;margin: 0;}
.trilogy-cover {width:100%;padding:0 0 1px 0;border:1px solid #FFFFFF;margin:0 3% 2% 0;}
.trilogy-panel {position:relative;width:27%;display:inline-block;vertical-align:top;padding:0 5% 0 0;}
.trilogy-description {width:55%;margin:2% 0 1% 0;}
.trilogy-description-first {width:55%;margin:-1.5% 0 0 0;}
.trilogy-section {padding:0 0 0 5%;}

/* Layout Styles */
.banner {
    width: 100%;
    text-align: right; /* Align banner content to the right */
    padding: 0 6% 0 0; /* Add some padding for visual spacing */
}

.banner-content {
    /* Content is inline, so text-align on banner will handle it */
}

.main-content {
    border: 0px solid blue;
    width: 94%;
    display: flex;
    justify-content: center; /* Center the panels horizontally */
    gap: 5px; /* Gutter between panels */
    margin: 5% .125% 5% .125%;
}

.panel {
    position: relative; /* For absolute positioning of the expand icon */
    overflow: hidden; /* Clip content that expands beyond initial size */
    transition: width 0.3s ease-in-out; /* Smooth transition for width change */
    width:45%;
}

.panel-expanded {
    width: 220% !important; /* Override inline style if needed */
}

.left-panel {
	/*background-color: #790815;*/
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* Align content to the left */
	padding: 2.5% 1% 1% 1%;
	border:0px solid #3B171A;
	display:inline-block;
	vertical-align:top;
}

.center-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2.5% 1% 1% 10%;
	margin-top: 1.5%;
	opacity: 0; /* Initially hidden */
	transition: opacity 2s ease-in; /* Fade-in transition */
	display:inline-block;
	vertical-align:top;
}

/* Style to show panel boundaries (for initial display) */
.panel.visible-boundaries {
  border: 0px solid #000000; /* Or any other visible style */
}
.panel video {
    width: 98%;
    opacity: 0.8;
    margin: 0 auto; /* Center the video */
    display: block;
}

.footer {
    width: 100%;
    background-color: transparent;
    padding: 5% 5%; /* Add some padding */
}

.footer-content {
    width: 60%;
    color: #ffffff;
    text-align: left; /* Align footer text to the left */
    opacity:.5;
}

.text-block {
	position: absolute;
	opacity: 0;
	font-size: 1em;
	line-height:120%;
	font-family: Tahoma, sans-serif;
	color:#FFFFFF;
	text-align:left;
}

#container {position: relative; width: 46vw; height: 0vh;}

/*######################################################*/
/*######################################################*/
/*######################################################*/

/* Media query for smaller screens */
@media (max-width: 770px) {
    .main-content {
        flex-direction: column; /* Stack panels vertically */
        align-items: center; /* Center panels horizontally */
    }
    .panel {
        width: 90%;
        margin-bottom: 15px; /* Add spacing between stacked panels */
    }
    .img-menu {
    width: 80px;
    z-index: 300000;
    position: fixed;
    left: 79%;
    margin:30px 0 0 0;
	}
	.expand-icon {
		display: none;
		width: 25px;
		position: absolute;
		top: 2%;
		left: 87%;
		z-index: 100000;
		cursor: pointer;
	}
	.display-yes-no {display: none;}
	
	.review-container {
			display: none;
	}
	
	#container {		display: none;
	}
	.img-travel-blog {width:40%;vertical-align:top;display:inline;padding:5px 0 0 0;}
	.travel-blog-section {margin:-5% 0 0 2.5%;}
	.wilderness-logo {width:60%;position:relative;top:4px;padding:4px 10px 0 0;}
	.travel-blog-header {font-family: playfair, serif;color: white;font-size: 1.7em;line-height:150%;margin: 0 0 3% 0; /* Reset default heading margin */border:0px solid blue;text-align:left; /* Override global right alignment for h3 in panels */width:85%;}
	.travel-blog-panels {margin:-2.5% 0 0 0;}
	.bold-journey {width:45%;}
	.pos-video {margin-top:0;}
}

@media (min-width: 1024px) {
	.text-block {
		position: absolute;
		opacity: 0;
		font-size: 1.2em;
		line-height:120%;
		font-family: Tahoma, sans-serif;
		color:#FFFFFF;
		text-align:left;
	}
}