/* -------------------------------- File#: _2_slideshow-preview-mode Title: Preview-Mode Slideshow Descr: Show a collection of items one at a time with a preview of the next/previous elements Usage: codyhouse.co/license -------------------------------- */
:root{
	--slideshow-pm-item-width:100%;
	--slideshow-pm-item-gap:var(--space-sm)
}
@media (min-width: 64rem){
	:root{
		--slideshow-pm-item-width:100%
	}
}
.slideshow-pm{
	overflow:hidden;
	opacity:0
}
.slideshow-pm--js-loaded{
    position: relative;
	opacity:1
}
.slideshow-pm__content{
	position:relative
}
.slideshow-pm__list{
	display:flex;
	flex-wrap:nowrap;
	overflow:auto;
	align-items:center;
	overflow:visible
}
.slideshow-pm__list--has-transition{
	transition:transform 0.4s;
	will-change:transform
}
.slideshow-pm__list--has-transition .slideshow-pm__item{
	transition:all 0.3s;
	will-change:transform,opacity
}
.slideshow-pm__item{
	display:inline-flex;
	width:var(--slideshow-pm-item-width);
	flex-shrink:0;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	/*transform:scale(0.95);*/
	/*opacity:0.4;*/
}
.slideshow-pm__item:not(:last-of-type){
    /*margin-right:var(--slideshow-pm-item-gap)*/
}
.slideshow-pm__item:focus{
	outline:none
}
.slideshow-pm__item--selected{
	transform:scale(1);
	opacity:1
}
.slideshow-pm[data-swipe=on] .slideshow-pm__content{
	-webkit-user-select:none;
	user-select:none
}
.slideshow-pm[data-swipe=on] .slideshow-pm__content img{
	pointer-events:none
}
.slideshow-pm__control-wrapper{
	display:none
}
.slideshow-pm[data-swipe=on] .slideshow-pm__control-wrapper{
	display:none
}
.slideshow-pm__control-wrapper{
	display:block;
	position:absolute;
	z-index:2;
	top:50%;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.2s,visibility 0s 0.2s
}
.slideshow-pm__control-wrapper:first-of-type{
	left:calc((100% - var(--slideshow-pm-item-width)) * 0.25);
	transform:translateY(-50%) translateX(20%)
}
.slideshow-pm__control-wrapper:last-of-type{
	right:calc((100% - var(--slideshow-pm-item-width)) * 0.25);
	transform:translateY(-50%) translateX(-20%)
}
.slideshow-pm__control-wrapper--active{
	opacity:1;
	visibility:visible;
	transition:opacity 0.2s
}
.slideshow-pm__control{
	display:flex;
	background-color:hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.8);
	height:60px;
	width:30px;
	border-radius:var(--radius-md);
	cursor:pointer;
	transition:background 0.2s,transform 0.2s
}
.slideshow-pm__control:hover{
	background-color:hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.85)
}
.slideshow-pm__control:active{
	transform:translateY(2px)
}
.slideshow-pm__control .icon{
	--size:30px;
	display:block;
	margin:auto;
	transition:color 0.2s;
	color:var(--color-bg)
}
@media (min-width: 64rem){
	.slideshow-pm[data-swipe=on] .slideshow-pm__control-wrapper{
		display:block
	}
}
.slideshow-pm__navigation{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:var(--space-sm)
}
.slideshow-pm__nav-item{
	margin:0 var(--space-xs)
}
.slideshow-pm__nav-btn{
	display:block;
	position:relative;
	--size:8px;
	height:var(--size);
	width:var(--size);
	border-radius:50%;
	background-color:currentColor;
	opacity:0.4;
	cursor:pointer
}
.slideshow-pm__nav-btn::before{
	content:"";
	position:absolute;
	top:-3px;
	left:-3px;
	height:calc(var(--size) + 6px);
	width:calc(var(--size) + 6px);
	border-radius:inherit;
	border:1px solid currentColor;
	opacity:0;
	transform:scale(0)
}
.slideshow-pm__nav-btn:focus-visible{
	outline:none
}
.slideshow-pm__nav-btn:focus-visible::before{
	opacity:1;
	transform:scale(1)
}
.slideshow-pm__nav-item--selected .slideshow-pm__nav-btn{
	opacity:1
}
/* -------------------------------- File#: _3_looping-slideshow-v2 Title: Looping Slideshow v2 Descr: A video slideshow looping among items with a visula progress indicator Usage: codyhouse.co/license -------------------------------- */
.loop-slideshow-v2__control{
	height:48px;
	width:48px;
	border-radius:50%;
	cursor:pointer;
	transition:transform 0.2s;
	will-change:transform
}
.loop-slideshow-v2__control:active{
	transform:translateY(2px)
}
.loop-slideshow-v2__control .icon{
	--size:48px
}
/* circle button loader */
.loop-slideshow-v2__loader{
	--loop-slideshow-filling-v2:144.44;
	stroke-dashoffset:var(--loop-slideshow-filling-v2)
}
/* slideshow navigation */
.loop-slideshow-v2__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm);
    position: absolute;
    bottom: 0;
    width: 100%;
}
.loop-slideshow-v2__nav-item{
	--loop-slideshow-filling-v2:0;
	margin:0 var(--space-xxxs)
}
/* footer navigation controls */
.loop-slideshow-v2__nav-btn{
	display:block;
	position:relative;
	overflow:hidden;
	height:4px;
	width:60px;
	border-radius:50em;
	background-color:var(--color-contrast-lower);
	cursor:pointer
	/* filling effect */
}
.loop-slideshow-v2__nav-btn:focus-visible{
	outline:2px solid var(--color-primary);
	outline-offset:2px
}
.loop-slideshow-v2__nav-btn::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	transform:scaleX(var(--loop-slideshow-filling-v2));
	transform-origin:left center;
	background-color:var(--color-primary)
}
@media (min-width: 64rem){
	.loop-slideshow-v2__navigation{
		padding:var(--space-sm)
	}
	.loop-slideshow-v2__nav-btn{
		height:8px;
		width:8px;
		border-radius:50%;
		background-color:currentColor;
		opacity:0.4
	}
	.loop-slideshow-v2__nav-btn:focus-visible{
		outline:1px solid currentColor
	}
	.loop-slideshow-v2__nav-btn::before{
		display:none
	}
	.loop-slideshow-v2__nav-item--selected .loop-slideshow-v2__nav-btn{
		opacity:1
	}
}