body {
	background-color: #F7F7F7;
	background-image: url("images/textile.png");
	color: #FFFFFF;
	padding-top: 60px; /* allows top nav without blocking content */
	padding-bottom: 60px; /* and this allows room for the footer without blocking content */
}

a:link {
	color: #FFFFFF;
}

a:visited {
	color: #FFFFFF;
}

a:hover {
	color: ##B5D407;
}

/* Accessibility Nav Skip link */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #BF1722;
	color: white;
	padding: 8px;
	z-index: 100;
	transition: top 1s;
}

.skip-link:focus {
	top: 0;
}

/* Header */
.jumboheader {
	width: 75%;
	margin: 0 auto;
	background-color: #0E5291;
}

.small-logo {
	width: 10%;
	height: auto;
}

/* Navigation */
.navbar {
	max-width: 75%;
	margin-right: auto;
	margin-left: auto;
}

.custom-nav {
	background-color: #823161;
	color: #FFFFFF;
}

.navbar .dropdown-item {
  color: #823161;
}

.nav-link.active {
	background-color: #823161;
	color: #FFFFFF;
}
 
.nav-link:hover {
	background-color: #B5D407;
	color: #000000;
}

.nav-link:focus {
  background-color: #90C404; 
  color: #000000;
}

/* Main content */
.hcontent {
	text-align: center;
}

.container {
	max-width: 75%;
	margin-right: auto;
	margin-left: auto;
	background-color: #F7F7F7;
	color: #000000;
}

.container a:link {
	color: #823161;
}

.container a:visited {
	color: #823180;
}

.container a:hover {
	color: #000000;
}

.container a:active {
	color: #000000;
}

.sidenav {
	background-color: #0E5291;
}

/* Exhibit images */
.e-img {
   width: 100%; 
   height: 50vh;
   object-fit: contain;
}


/* Toggle button */
.toggle-btn {
	display: none; /* don't show it on big screens */
	margin-left: auto; 
	margin-right: auto; 
	text-align: center;
}

/* Carousel */
#carousel {
   width: 100%;
   height: 75vh;
   position: relative;
   overflow: hidden;
}

.carousel-img {
   width: 100%;
   height: 75vh; /* adjust as necessary */
   object-fit: contain;
}

.carousel-item {
   position: relative;
   display: none;
   padding-bottom: 10px;  /* Adjust this value according to the height of your caption */
}

.carousel-item:first-child {
   display: block;
}

.carousel-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 10px;
   background: rgba(0,0,0,0.9); /* semi-transparent black */
   color: white;
}

.carousel-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%); /* center the arrows vertically */
   font-size: 2rem;
   color: white;
   background: rgba(0,0,0,0.5); /* semi-transparent black for contrast */
   padding: 10px 20px;
   cursor: pointer;
   z-index: 1;
}

.carousel-arrow-prev {
   left: 10px;
}

.carousel-arrow-next {
   right: 10px;
}

/* Footer */
.footer {
	max-width: 75%;
	height: 80px;
	margin: 0 auto;
}

/* Media Queries */
@media screen and (max-width: 600px) {
	.small-logo {
		width: 50%;
	}
	
	/* Hide the carousel arrows on small screens */
	.carousel-arrow-prev,
	.carousel-arrow-next {
		display: none;
	}
	
	/* Make images a sane size on small screens */
	.carousel-img {
		width: 100%;
		height: auto;
	}
	
	/* Fix the caption on small screens */
	.carousel-caption {
		position: relative; /* change position from absolute to relative */
		font-size: 12px; /* reduce the font size */
		padding: 5px; /* reduce the padding */
		text-align: center; /* center align the text */
		margin: 0 auto; /* horizontal margin auto makes element centrally aligned */
	}
	
	/* Poof! Toggle button on mobile! */
	.toggle-btn {
		display: block;
	}
	  
	/* Widen content on smaller screens */
	.jumboheader {
		width: 95%;
	}
	.navbar {
		max-width: 95%;
	}
	.container {
		max-width: 95%;
	}
	.footer {
		max-width: 95%;
	}