/*css layout*/

*{margin:0px; padding:0px; box-sizing: border-box;}

body {
	font-family: 'Open Sans', sans-serif;
	background-color:white;
}
	
#header {
		font-family: 'Bebas Neue', cursive;
	margin:50px 0 0 50px;
		top:5px;
		position:fixed;
		background-color:white;
}

/* Header logo sizing */
/* header image sizing: larger on desktop/tablet, smaller on mobile */
#header img { display:block; max-height:120px; height:auto; width:auto; }
	
#content {
	height:100%;
	width:100%;
	margin:35px 0 0 250px;
	padding-left:350px;
}

.image {
	margin-top:100px;
	}
	

.galleria {width:80%; height:500px; min-height:500px; margin:0 auto; background:white; position:relative;} 
	
#text {
	width:400px;
	font-size:14px;
	margin:0px 20px 20px 0;
	list-style-type:none;
	float:left;
	}
#list {
	
	font-size:14px;
	margin:100px 20px 20px 0;
	list-style-type:none;

	}
		
#nodot {
 	list-style-type:none;
 	}
		
#sidebar {
	margin:65px 0 0 65px;
	width:185px;
	position:fixed;
	top:150px;
	bottom:0;
	left:0;
	height:100%;
	font-size:15px;
}
 
  #sidebar {
    display: flex;
  }
  
  #sidebar > ul {
    display: flex;
    flex-direction: column;
  }
  
  #sidebar > ul > li {
    flex: 0 0 35px; 
    display: flex;
  }
  
  
	
/*links*/
a {text-decoration:none;}

a:link {
    color:black;
	}
a:visited {
    color:black;
    }
a:hover {
    color:#9c9a9a;
    }
a:active {
    color:black;
    }
		
.grey {
	margin-left:10px;
	}
a.grey {color:#9c9a9a;}

a.grey:hover {
    color:black;
    }

/*index*/

.hover-image:hover {
	opacity: 0.7;
	filter: alpha(opacity=10);
	}

img, iframe {
		max-width:100%;
		height:auto;
		display:block;
	}

.mySlides {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width:100%;
    height:auto;
    display:block;
}
		
.wrapper {
	width:100%;
	max-width:1100px;
	margin:75px auto 0;
	padding:0 20px;
	box-sizing:border-box;
	} 

	
.center {
    display: block;
    margin:75px auto;
    width: 75%;
}

/* Dropdown Button */
.dropbtn {
	background-color: #ffffff;
	color: white;
	padding-right: 15px;
	padding-bottom: 15px;
	font-size: 15px;
	border: none;
	font-family:'Open Sans', sans-serif;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
	
	display: flex;
    flex-direction: column;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 185px;
	z-index: 0;
  }

/* Ensure dropdown is positioned relative to container */
.dropdown { position: relative; }

/* Small adjustments for contact inline icons */
#list img, a img { max-height:24px; width:auto; vertical-align:middle; }
  
  /* Links inside the dropdown */
  .dropdown-content a {
	color: black;
	padding: 5px;
	text-decoration: none;
	display: flex;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content 
  a:hover {background-color: white;}
  a:link {
    color:black;
	}
a:visited {
    color:black;
    }
a:hover {
    color:#9c9a9a;
    }
a:active {
    color:black;
    }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: flex;
    flex-direction: column;}

  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {background-color: #ffffff;}	


  @media only screen and (min-width:700px) {
	.galleria {
		
	}
}

/* Ensure wrapper/content sits to the right of the fixed sidebar and below the fixed header on wide screens */
@media only screen and (min-width:1000px) {
	.wrapper {
		margin:150px 0 0 250px;
		max-width: calc(100% - 300px);
		padding:0 20px;
	}
	.center {
		margin-left:250px;
		width: calc(100% - 300px);
	}
}

@media only screen and (min-width:900px) {
	.galleria {
	
	}
}

@media only screen and (max-width:700px) {
	/* Restore mobile layout: make header/static, stack sidebar, and keep gallery responsive */
	#header { position:static; margin:10px 0; top:auto; background-color:transparent; }
	#header img { max-height:44px; }
	#content { padding-left:10px; margin:10px; padding-top:0; }
	#sidebar { position:static; width:100%; top:auto; height:auto; margin:10px 0; }
	#sidebar > ul { flex-direction: row; flex-wrap:wrap; }
	#sidebar > ul > li { flex: 0 0 auto; margin-right:10px; }
	.galleria { width:100%; height:auto; min-height:260px; }
	.center { width:90%; margin:20px auto; }
	.wrapper { margin-top:20px; }
	body { padding-top:0; }
}

/* Responsive adjustments for small screens */
/* small-screen rules consolidated above */

@media only screen and (max-width:900px) and (min-width:701px) {
	.galleria { height:400px; min-height:400px; }
}


/* Ensure injected video fits the gallery stage */
.galleria video.galleria-video { max-width:100%; max-height:100%; display:block; }

/* Position injected video to cover the gallery stage and sit above images */
.galleria { position: relative; }
.galleria video.galleria-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background: transparent; }
.galleria .galleria-stage img, .galleria img { position: relative; z-index: 10; }

/* Video play overlay to lazy-load the video on user click */
.galleria .video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60; display:flex; align-items:center; justify-content:center; }
.galleria .video-overlay .video-play { background: rgba(0,0,0,0.66); color: #fff; border: none; padding: 14px 20px; font-size: 18px; border-radius: 6px; cursor: pointer; }
.galleria .video-overlay .video-play:active { transform: translateY(1px); }

/* Ensure embedded iframes (Vimeo) sit above images and are interactive */
.galleria iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; }

/* Tablet adjustments (reduce desktop spacing while keeping layout) */
@media only screen and (max-width:1100px) and (min-width:701px) {
	#header { margin:30px 0 0 30px; }
	#header img { max-height:96px; }
	#sidebar { width:160px; margin:55px 0 0 45px; top:120px; }
	#content { margin:35px 0 0 180px; padding-left:280px; }
	.center { margin-left:280px; width:70%; }
	.galleria { width:88%; }
}

@media only screen and (max-width:900px) and (min-width:701px) {
	/* Slightly tighter layout for narrower tablets */
	#header { margin:25px 0 0 25px; }
	#header img { max-height:72px; }
	#sidebar { width:150px; margin:50px 0 0 40px; top:110px; }
	#content { margin:35px 0 0 160px; padding-left:240px; }
	.center { margin-left:240px; width:80%; }
	.galleria { width:92%; }
}