@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Montserrat:ital,wght@0,300;0,400;0,700;1,300&family=Knewave&family=Oswald:wght@200..700&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400&&family=Syne:wght@400..800&display=swap');

:root {
	--accent-bg-color: 0, 102, 102;
    --cover-bg-color: 128, 0, 0;
    --main-bg-color: 255, 255, 255;
    --dark-color: 0, 0, 0;
    --light-color: 255, 255, 255;
}
	
* {
	box-sizing: border-box;
	font-size: 16px;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

html {
	font-family: sans-serif;
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y mandatory;
	font: 400 1.0rem/1.3rem "Syne", sans-serif;
	scroll-behavior: smooth;
  	font-style: normal;
}
section {
	border-bottom: 1px solid white;
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
	position: relative;
	background: #000;
	padding:0;
}
section:nth-child(3) {
	border-bottom: 0px solid white;
}
h2 {
	margin-bottom: 20px;
	text-transform: capitalize;
	font: 600 1.8rem/2.2rem "Syne", sans-serif;
}
h2.form-title {
	margin-bottom: 0;
}
h3 {
	margin: 10% 0 0;
	font-size: 1.3rem;
	line-height: 1.8rem;
	font-weight: 600
}
i {
	color:#fff;
}
.box {
	width:30%;
	color: #fff;
	border-top:4px solid #fff;
	margin: 20px auto;
}
.item-four p {
	font: 400 1.0rem/1.6rem "Montserrat", sans-serif;
}

/*All Items*/
.item {
	text-align: left;
	position: relative;
	width: calc(100%/3);
	float: left;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid white;
	height: 100vh;
	scroll-snap-align: start;
	background-position: center;
	scroll-padding-top: 0
}
.item-quarters {
	width: calc(100%/4);
}
section.one, .lightbox-slide {
	background-image: url("../images/web/bg1.webp");
	background-color: rgba(0, 0, 0, 0.4); /* Black overlay with 40% opacity */
  	background-blend-mode: overlay;
	background-position: center;	
}
section.one img {
	padding-top:35%;	
}
.full {
width: calc(100%/1);	

}
.text-links {
	color: black;
}

.item-one p {
	position: absolute;
	bottom: 10%;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.8rem;
	text-align: center;
	font-family: "Syne", sans-serif;
	font-weight: 400;
}

.item-four {
	background-color: #000;
	text-align: center;
	color: #fff
}
.item-five {
	background-image: url("../images/web/acm-1.webp");
}
.item-five:hover {
	opacity:.90;
	filter: brightness(90%); /* Darkens to make the icon pop */
	transition: opacity 0.3s ease;
}

.overlay-light {
	background: rgba(255, 255, 255, 1);
	height: 100%;
	position: relative;	
}
.main {
	margin: 0 auto;
	padding: 5%
}
.content, .inner, .content-footer {
	width:100%;
	text-align: center;
	margin: 0 auto;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.content-footer {
	top: 85%;
  -ms-transform: translateY(-15%);
  transform: translateY(-15%);
  color: #fff;
}
.content-footer p {
	font-size: 1.2rem;
}

.inner {
	padding:0 15%;
}
.quote {
	font: 400 1.8rem/2rem "Playfair Display", serif;
	padding: 0 7% 10px;
	color: #333;
	text-align: center;
	position: absolute;
	top: 20%;
	width: 100%;
	margin: 0 auto
}
.quote:before {
	content: "\275D";
	padding-right: 5px;
	color: #000;
}
.quote:after {
	content: "\275E";
	padding-left: 5px;
	color: #000;
}
.signature {
	font-style: italic;
	font-size: 1.2rem
}
/*sidebar*/
.sidebar {
  position: fixed;
  text-align: left;
  top: 20px;
  width: 200px;
  left: -300px;
  background-color: rgba(var(--dark-color), 1);
  transition: all .5s ease;
  z-index: 99999
}
.sidebar header {
  background: rgba(var(--dark-color), 1);
  height: 57px
}
.sidebar a {
  display: block;
  padding: 15px;
  width: 100%;
  color: rgba(var(--light-color), 1);
  border-left: 5px solid transparent;
  transition: all .5s ease;
  text-decoration: none
}
.sidebar ul li a:hover {
  border-left: 5px solid rgba(var(--accent-bg-color), 1);
  color: rgba(var(--accent-bg-color), 1);
  background: rgba(var(--main-bg-color), 1)
}
#check {
  display: none
}
label #open, label #cancel {
  position: fixed;
  top: 20px;
  left: 0;
  cursor: pointer;
  margin: 0;
  background-color: rgba(var(--dark-color), 1);
  height: 56px;
  width: 56px;
  text-align: center;
  line-height: 25px;
  transition: all .5s ease;
  z-index: 9999999;
  padding: 18px 0
}
label #cancel {
  opacity: 0;
  visibility: hidden
}
#check:checked ~ .sidebar {
  left: 0;
  -webkit-transition: left 1s;
}
#check:checked ~ label #open {
  opacity: 0;
  visibility: hidden
}
#check:checked ~ label #cancel {
  opacity: 1;
  visibility: visible
}	
.mobile {
		display:none;
	}	
	.desktop {
		display:block;
	}	
.resizeimages {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
a {
	color:white;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
section.one p {
	padding: 0 10%;
	text-align: center;
	color: #fff;
}
.prev, .next {
	text-decoration: none;
}
.page-description {
	text-decoration: none;
}
span.lyric {
	text-transform: none;
	font: 600 1.3rem/1.5rem "Syne", sans-serif;
}
span.source {
	text-transform: none;
	font: 400 1.1rem/1.2rem "Syne", sans-serif;
}
.page-captions {
	grid-template-columns: 100%;
	color: #fff;
}

.expand-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.expand-container img {
  transition: transform 0.3s ease;
}

.expand-container:hover img {
  transform: scale(1.01); /* Slight zoom effect */
  filter: brightness(90%); /* Darkens to make the icon pop */
}

/* The "Expand" Icon Overlay */
.expand-container::after {
  content: ''; /* Or use a FontAwesome icon  🔍*/
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.expand-container:hover::after {
  opacity: 1;
}

@media only screen and (max-width: 768px) /* 640 40em*/ {
.main {
	border-bottom: 1px solid white;
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
	position: relative;
}
	
.item, .main {
	width: calc(100%/1);
	clear: both;
}
	.mobile {
		display:block;
	}	
	.desktop {
		display:none;
	}
.item-one p {
	font-size: 1.2rem;
	line-height: 1.7rem;
	padding: 0 10%;
	bottom: 30%
}
.resizeimages {
	padding-top:20%;
}
#sidebar-box {
	display:none;
	}
.item-one, .lightbox-slide {
	background-image: url("../images/web/bg1b.webp");
	background-position: 76%;
	text-align: center;
	color: #fff
}
.lightbox-slide {
	background-position: 76% 80%;
	background-size: 179vh;
	background-color: rgba(0, 0, 0, 0.2); /* Black overlay with 40% opacity */
  	background-blend-mode: overlay;
}
h2.form-title {
	font: 600 1.4rem/2.0rem "Syne", sans-serif;
}
.inner {
	padding:0 10%;
}
}