.ba-slider {
    position: relative;
    overflow: visible;
	margin-bottom:30px;
}
 
.ba-slider img {
    width: 100%;
    display:block;
    max-width:none;
}
 
.ba-slider .resize {
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 49.5%;
    overflow: hidden;
}


.ba-slider .handle { /* Thin line seperator */
  position:absolute; 
  left:49.5%;
  top:0;
  bottom:0;
  width:4px;
  margin-left:-2px;
 
  background: rgba(255,255,255,.5);
  cursor: ew-resize;
  z-index:10;
}
 
.ba-slider .handle:after {
    position: absolute;
    top: 50%;
    /*width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    line-height:60px;
    font-size:36px;*/
	
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height:44px;
    font-size:30px;
	
 
    content:'\21d4';
    color:white;
    font-weight:bold;
    text-align:center;
 
    background: #ee3134; 
    border:1px solid #ee3134;
    border-radius: 50%;
    transition:all 0.3s ease;
    /*box-shadow:
      0 2px 6px rgba(0,0,0,.3), 
      inset 0 2px 0 rgba(255,255,255,.5),
      inset 0 60px 50px -30px #ee3134;*/
}

.ba-slider .handle.ba-draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height:44px;
    font-size:30px;
}

#spectra {

	padding:30px 0px 30px 0px;
}



#af488 {
	position:absolute;
	top:25%;
	left:18%;
	z-index:10;
	transform: rotate(-80deg);

}


#af514 {
	position:absolute;
	top:25%;
	left:25%;
	z-index:10;
	transform: rotate(-80deg);
}

#af555 {
	position:absolute;
	top:25%;
	left:34%;
	z-index:10;
	transform: rotate(-80deg);
}


#af488 .dye {
	background-color:#caebd0;
	width:10px;
	height:10px;
	display:inline-block;
	margin-right:5px;
}
#af514 .dye {
	background-color:#f3bebe;
	width:10px;
	height:10px;
	display:inline-block;
	margin-right:5px;
}
#af555 .dye {
	background-color:#f7debd;
	width:10px;
	height:10px;
	display:inline-block;
	margin-right:5px;
}

#line {
	width:4px;
	height:100%;
	background:#ee3134;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-2px;
}

#line::before {
  content: "";
  position: absolute;
  top: -4px; /* positions the triangle above the line */
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ee3134; /* same color as the line */
}


/* Ensure the slider is a positioning context */
.ba-slider { position: relative;  }

/* Images fill container */
.ba-img { display:block; width:100%; height:auto; user-select:none; pointer-events:none; }

/* The overlay is already resized by your JS; keep it above base image */
.ba-slider .resize { position:absolute; inset:0 auto 0 0; height:100%;  z-index:2; }

/* Handle should sit on top (adjust if you already style it) */
.ba-slider .handle { position:absolute; top:0; bottom:0; z-index:4; }

/* Captions */
.ba-caption {
  position:absolute;
  top:0px; left:0px; right:0px;
  z-index:1;               /* sits above base image */
  pointer-events:none;     /* let dragging pass through */
  white-space:nowrap;
  background-color:#ffffff;
  width:100%;
  padding:5px 10px 5px 10px;
  opacity:0.7;
  font-weight:bold;
}

/* Overlay caption is inside .resize; lift above its image */
.ba-caption--after { z-index:3; }

/* Optional: align the “before” caption to the right side */
.ba-caption--before { text-align:right; right:0px; left:auto; }