/*GLOBAL*/
#slideContainer {
	position: relative;
  height: 430px;
  background: linear-gradient(to bottom, #000 0%, #222 70%, #333 100%);
	border-bottom: 1px solid #555;
}
#hp-slider,
#hpfinish {
	position: absolute;
	left: 0;
	right: 0;
}
#hp-slider {padding: 40px 0;}
#hpfinish {padding: 16px 0;}
#slideTagline {
	margin: 12px 0;
	line-height: 24px;
	letter-spacing: .02em;
}
#prefill{
	font-family: 'Philosopher';
	font-style: italic;
	margin-top: 10px;
	font-size: 30px;
	letter-spacing: .03em;
	text-align: center;
  z-index: 3;
  opacity: 1;
  /* Create a gradient mask larger than the element */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  /* Start with the mask shifted entirely to the right (hidden) */
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  /* Animate the mask shifting back to the left */
	
  animation: showl2r 1.6s ease-out forwards;
	animation-delay: .2s;
}
@keyframes showl2r {
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

.bss-slides,
.bss2-slides {
  position: relative;
  display: block; 
  line-height: 0;/*removes the gap if you put a border on the slideshow div*/   
}
.bss-slides:focus,
.bss2-slides:focus{
 outline: 0;
}
figcaption {
  line-height: 1.5; /* restores line-height to the child element*/
}
.bss-slides .bss-show,
.bss2-slides .bss2-show{
  z-index: 2;
}
.bss-slides .bss-show img,
.bss2-slides .bss2-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
}
.bss-slides figure,
.bss2-slides figure{
  position: absolute;
  top: 0;
	margin: 0;
	z-index: 1
}
.bss-slides figure:first-child,
.bss2-slides figure:first-child{
  position: relative;
}


/*SLIDESHOW 1*/
#hp-slider .Flexed {
	opacity: 1;
	justify-content: space-around;
	align-items: center;
	gap: 24px;
}
#captionLeft {flex-basis: 380px;}
#captionLeft h3 {font-family: 'MerriweatherSans Light'; font-size: 23px;}
#slidesRight {flex-basis: calc(100% - 404px);}

#hp-slider.fade-out {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.bss-slides figure img{
  opacity: 0;
	width: 100%;
  -webkit-transition: opacity 1.8s;
  transition: opacity 1.8s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	/*border: 2px ridge rgba(242,242,242,.3);*/
	border-radius: 20px;
}
.bss-slides figcaption{
	position: absolute;
  font-family: 'MerriweatherSans Light';
  font-size: 19px;
  bottom: 0;
  right: 0;
	left: 0;
  padding: 5px 20px;
  color: #fefefe;
  background: rgba(0,0,0, .7);
  opacity: 0;
  text-align: right;
  border-radius: 0 0 20px 20px;
	z-index: 5;
}
.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
  /* Create a gradient mask larger than the element */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  /* Start with the mask shifted entirely to the right (hidden) */
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  /* Animate the mask shifting back to the left */
	
  animation: maskReveal 1.6s ease-out forwards;
	animation-delay: 1s;
}
@keyframes maskReveal {
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .75);
  top: 42%;
  z-index: 4;
  font-size: 3em;
  opacity: .5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: 0px;
  padding: 16px 5px 22px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0px;
  padding: 16px 10px 22px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/*SLIDESHOW 2*/
#hpfinish {display: none;}
.bss2-slides figure{
  position: absolute;
  top: 0;
	margin: 0;
	z-index: 1
}
.bss2-slides figure:first-child{
  position: relative;
}
.bss2-slides figure img{
  opacity: 0;
	width: 100%;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bss2-slides figcaption{
	position: absolute;
  font-family: 'Philosopher';
  font-size: 20px;
  bottom: 0;
  right: 0;
  padding: 5px 20px;
  color: #fefefe;
  background: rgba(0,0,0, .5);
  opacity: 0;
  width: 100%;
  text-align: right;
  border-radius: 0 0 20px 20px;
	z-index: 5;
}