/*CASE STUDY HOMEPAGE */
.cs-swiper-container {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	height:100vh;
    display: flex; /* Align panels horizontally */
    overflow: hidden; /* Hide overflow from other slides */
}
/*
.horizontal .item {
	display: flex;
	width: 100%;
	height: 100vh;
	max-height: 900px;
}
*/
.casestudies.animation-wrap {
    /* overflow-x: scroll; */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.casestudies .cs-item {
    scroll-snap-align: start;
}
.cs-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
}
#cs-crossvalley {
	background-color: #262119;
}
#cs-earthmover {
	background-color: #161E36;
}
#cs-cozycritters {
	background-color: #012E58;
}
#cs-kushconnection {
	background-color: #312746;
}
#cs-kushconnection {
	background-color: #312746;
}
.cs-info {
	position: relative;
	z-index: 2;
}
.parallax-bg {
	position: absolute;
	top: 0;
	left: 25%;
	right: 0;
	bottom: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
}
.parallax-bg img {
	height: 100%;
    object-fit: contain;
    object-position: bottom;
}
.cs-floater {
  position: relative;
  z-index: 5;
}

.cs-headline h2 {
  color: #fbebee;
	font-family: 'owners-xxwide', arial, tahoma, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	text-transform: uppercase;
}
#cs-crossvalley .cs-headline h2 {
	color: #FEFAF9;
}
#cs-earthmover .cs-headline h2 {
	color: #DCEDD7;
}
#cs-cozycritters .cs-headline h2 {
	color: #C5E2FF;
}
#cs-kushconnection .cs-headline h2 {
	color: #DBD6B5;
}
.char {
  display: inline-block; /* Required for GSAP animations */
}
.cs-headline .cs-text {
    color: #818b8a;
	font-family: 'lft-etica-mono', arial, tahoma, sans-serif;
	font-weight: 200;
	font-size: .7rem;
    display: block;
}
.cs-headline .cs-text span {
	border: .0025em solid #597d1d;
	border-radius: 4px;
	padding: 5px;
	margin-right: 20px;
}
#cs-cozycritters .cs-headline p span,
#cs-kushconnection .cs-headline p span {
	border: .0025em solid #ffffff;
}
.csb {
  position: relative;
  width: 110px;
  height: 110px;
  display: block;
  color: #818b8a;
  border: 1px solid red;
}
.csb-menu-list {
	columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style: none;
    max-width: 400px;
}
.csb-menu-list .csb-menu-item {
	position: relative;
	-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  font-family: 'Instrument Sans', arial, tahoma, sans-serif;
	font-size: .8rem;
}
.csb-menu-list .csb-menu-item a,
.csb-menu-list .csb-menu-item a:visited,
.csb-menu-list .csb-menu-item a:active {
	display: inline-block;
  position: relative;
  text-decoration: none;
  color: #d3d4d5;
	transition: color 0.2s ease-in-out;
	cursor: default;
}
.csb-menu-list .csb-menu-item a:hover {
	color: #ffffff;
}
@media (max-width: 960px) {
	.parallax-bg {
		position: absolute;
		top: unset;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: auto;
	}
	.csb-menu-list {
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
	}
	.cs-headline h2 {
    	font-size: 1rem;
	}
	.parallax-bg img {
		height: unset;
	}
}

.rolodex {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
	height: 220px;
	z-index:5;
}

.rolodex::before,
.rolodex::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
}
.rolodex::before {
  top: 0;
  background-image: linear-gradient(
    rgba(var(--rgb), 1) 5%,
    rgba(var(--rgb), 0)
  );
}
.rolodex::after {
  bottom: 0;
  background-image: linear-gradient(
    rgba(var(--rgb), 0),
    rgba(var(--rgb), 1) 95%
  );
}
.rolodex ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.rolodex ul li {
  position: relative;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  background: rgb(var(--rgb));
	
	transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
	
	
  font-size: .7rem;
	line-height: 3rem;
  text-align: center;
  white-space: nowrap;
	
	font-family: 'lft-etica-mono', arial, tahoma, sans-serif;
	font-weight: 200;

  text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;

  opacity: 1;
}
.rolodex .work-pagination-bullet {
	margin: 0 10px 0 10px;
}
.rolodex .work-pagination-bullet a {
	color: white;
}

.rolodex ul li.work-pagination-bullet a:hover {
	font-weight: 300;
  color: #efefef;
	opacity: 1;
}
.rolodex ul li.work-pagination-bullet.active {
  color: #fff;
	opacity: 1;
}
.rolodex ul li.work-pagination-bullet.active a {
	position: relative;
	display: inline;
}
.rolodex ul li.work-pagination-bullet.active a::after {
	content: '';
	position: absolute;
	display: block;
	background: #b4e529;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	right: -35px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 960px) {
	#work .horizontal {
		position: relative;
		overflow-x: auto;
		overflow-y: visible;
	}
	#work .horizontal .pin-wrap {
		position: relative;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		height: unset;
	}
	#work .animation-wrap {
		display: flex;
		flex-wrap: nowrap;
   		min-width: fit-content;
	}
	#work .horizontal .item {
		flex: 0 0 100vw;
		scroll-snap-align: start;
		width: 100vw;
		margin: 0 0 0 0;
	}


	.rolodex {
		position: sticky;
		width: auto;
		left: 90%;
        top: 50%;
        transform: translateY(-50%);
	}
	.rolodex ul {
		width: auto;
		display: inline-flex;
	}
	.work-pagination {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.rolodex .work-pagination-bullet {
		margin: 10px 0px 10px 0;
        writing-mode: vertical-rl;
        line-height: unset;
        line-height: .8;
        height: 10px;
	}
	.rolodex .work-pagination-bullet.active {
		margin: 10px 0px 0px 0;
		height: unset;
	}

	.work-pagination-bullet a {
		display: none;
		text-decoration: none;
		color: #fff;
		font-weight: 300;
	}
	.work-pagination-bullet a:before {
		display: none;
	}

	.work-pagination-bullet.active a {
		color: #fff; 
		writing-mode: sideways-rl;
	}

	/* Create the vertical text on the right */
	.work-pagination::after {
		content: attr(data-active-text);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%) rotate(90deg);
		transform-origin: right center;
		font-size: 16px; /* Adjust font size as needed */
		color: #fff; /* Text color */
		white-space: nowrap;
	}

	/* Optional: Style the bullets */
	.work-pagination-bullet::before {
		content: '';
        width: 8px;
        height: 8px;
		background: #b4e529;
        border-radius: 50%;
        display: block;
        margin: 10px auto 0px;
	}
    .work-pagination-bullet.active::before,
    .rolodex ul li.work-pagination-bullet.active a::after {
		display: none;
	}
}