.jaxx_slideshow_trigger,
.jaxx_slideshow_thumb,
.jaxx_slideshow_prev,
.jaxx_slideshow_play_wrapper,
.jaxx_slideshow_next,
.jaxx_slideshow_close_bt,
.jaxx_slideshow_fullscreen_bt {
	cursor: pointer;
}

.jaxx_slideshow_wrapper,
.jaxx_slideshow_viewer {
	position: fixed;
	z-index: 10000;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
}

.jaxx_slideshow_wrapper {
	background-color: #00000069;
	backdrop-filter: blur(4px);
}

.jaxx_slideshow_viewer {}

.jaxx_slideshow_nav_icon {
    /* background-color: red; */
    position: fixed;
    bottom: 0;
    height: 4em;
    z-index: 1000;
    width: 100%;
    background-image: url(img/mosaique.svg);
    transition: all .6s ease;
    background-repeat: no-repeat;
    background-position: center;
}


.jaxx_slideshow_nav {
	background-color: #000000a6;
	height: auto;
	min-width: 100%;
	bottom: 0;
	position: fixed;
	z-index: 10000;
	transform: translateY(100%);
	opacity: 0;
	transition: all 1s ease;
	text-align: center;
	padding: 1em;
	overflow-y: auto;
	min-height: 11em;
	max-height: 20vh;
	border-top: #ffffff69 1px solid;
	box-shadow: #000 0 0 4em;
}

/* body:hover .jaxx_slideshow_nav,  */
.jaxx_slideshow_nav.open {
    opacity: 1;
    transform: translateY(0);
}

.jaxx_slideshow_nav.closed {
    transform: translateY(100%);
}

.jaxx_slideshow_thumb {
	display: inline-block;
	height: 4em;
	width: 4em;
	/* background-color: orange; */
	margin: .4em;
	background-size: cover;
	transition: all .6s ease;
	cursor: pointer;
}

.jaxx_slideshow_thumb.active {
	border: white 4px solid;
	transform: scale(1.5);
	box-shadow: #000 0 .4em 1em;
}

.jaxx_slideshow_thumb:hover {
	transform: scale(1.2);
	z-index: 2;
}

.jaxx_slideshow_prev,
.jaxx_slideshow_play_wrapper,
.jaxx_slideshow_next {
	/* background-color: #0000ff38; */
	height: 100%;
	width: 20%;
	position: fixed;
	z-index: 100;
	transition: all .8s ease;
	opacity: 0;
}


.jaxx_slideshow_prev {
    background-image: linear-gradient(90deg, black, transparent);
}

.jaxx_slideshow_next {
    background-image: linear-gradient(-90deg, black, transparent);
}

.jaxx_slideshow_prev:hover,
.jaxx_slideshow_play_wrapper:hover,
.jaxx_slideshow_next:hover {
	opacity: 1;
}

.jaxx_slideshow_play_wrapper {
	left: 50%;
	transform: translateX(-50%);
	/* height: auto; */
	width: 30%;
	min-width: 20em;
	padding-top: 40vh;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background-color: #0000006e;
	background: linear-gradient(90deg, transparent 0, #0009 20%,#0009 80%, transparent 100%);
}

.secondes {
	display: inline-block;
}

.jaxx_slideshow_next {
	right: 0;
	/* background-color: #ff00004f; */
	z-index: 10;
	cursor: pointer;
}
.jaxx_slideshow_close_bt,
.jaxx_slideshow_fullscreen_bt {
	top: 0;
	right: 0;
	height: 3em;
	width: 3em;
	margin: 1em;
	position: fixed;
	opacity: 0.5;
	z-index: 10000;
	transition: all .8s ease;
}
.jaxx_slideshow_close_bt {
	right: 0;
	background-image: url(img/close_thick.svg);
	    transform: rotate(0deg);

}

.jaxx_slideshow_close_bt:hover {
    transform: rotate(360deg);
}


.jaxx_slideshow_fullscreen_bt {
	left: 0;
	background-image: url(img/full_screen_thick.svg);
	position: ;
}

.jaxx_slideshow_slide {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	/* width: 30%; */
	/* transition: all 4s cubic-bezier(0.21, 0.01, 0.18, 1.01); */
	transition: all 4s cubic-bezier(0.21, 0.01, 0.18, 1.01), background-image .8s ease;
	    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dragging  .jaxx_slideshow_slide{ transition:none;}

.jaxx_slideshow_slide_current {
	/* transform: translateX(110%); */
	/* background-color: orange; */
	opacity:1;
	z-index: 2;
	filter:blur(0);

}


.jaxx_slideshow_slide_prev {
	transform: scale(0);
	opacity:0;
	z-index: 1;
	filter:blur(8px);
}


.jaxx_slideshow_slide_next {
	transform: scale(2);
	opacity:0;
	z-index: 3;
	filter:blur(8px);
}

.dragging .jaxx_slideshow_slide_prev {
	transform: translateX( -100%);
	z-index: 1;
	opacity:1;
	filter:blur(0);
}
.dragging .jaxx_slideshow_slide_next {
	transform: translateX( 100%);
	z-index: 3;
	opacity:1;
	filter:blur(0);
}

.dragg_ended .jaxx_slideshow_slide_prev {
	transform: translateX( -100%);
	z-index: 1;
	opacity:0;
}
.dragg_ended .jaxx_slideshow_slide_next {
	transform: translateX( 100%);
	z-index: 3;
	opacity:0;
}

.jaxx_slideshow_prev:before, .jaxx_slideshow_next:before
{
	content: '';
	position: absolute;
	display: inline-block;
	transition: all .8s ease;
	border: transparent 5em solid;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: .5;
}

.jaxx_slideshow_prev:before
{
	border-right-color: white;
	left: 3em;
	border-left-width: 0;
	border-right-width: 4em;
}
.jaxx_slideshow_next:before
{
	border-left-color: white;
	right: 0;
	left: unset;
	border-right-width: 0;
	border-left-width: 4em;
}
.jaxx_slideshow_play_bt {
	display: inline-block;
	position: relative;
	width: 100%;
	width: 12em;
	height: 13em;
	/* background-color: blue; */
	/* padding-bottom: 45%; */
	transition: all .6s ease;
	filter: drop-shadow(0 .1em 1em #000);
	transform: scaleX(1.5);
}



.jaxx_slideshow_play_bt {}

.jaxx_slideshow_play_bt:before,
.jaxx_slideshow_play_bt:after {
	content: '';
	position: absolute;
	display: inline-block;
	transition: all .8s ease;
	background-color: var(--text-color);
}

.jaxx_slideshow_play_bt:before {
	background-color: transparent;
	width: 0em;
	height: 0;
	border: transparent 5em solid;
	border-left-color: white;
	border-right-width: 0;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
}

.jaxx_slideshow_play_bt:after {
	height: 9.8em;
	width: 1px;
	top: 12%;
	left: 34%;
	position: absolute;
	display: inline-block;
}

.jaxx_slideshow_play_bt.playing {
	/* background-color: red; */
	transform: scaleX(1);
}

.jaxx_slideshow_play_bt.playing:before,
.jaxx_slideshow_play_bt.playing:after {
	height: 8.6em;
	width: 4em;
	top: 10%;
	left: 12%;
	border: transparent 0em solid;
	transform: translate(0, 0);
	background-color: white;
}

.jaxx_slideshow_play_bt.playing:after {}

.jaxx_slideshow_play_bt.playing:before {
	left: 57%;
}
.jaxx_slideshow_duration_input_wrapper {
    background-color: #0000006e;
    width: 10em;
    font-size: 2rem;
    border-radius: var(--border-radius);
    margin: 0 auto;
    color: white;
}
.jaxx_slideshow_duration_input {
	position: relative;
	min-height: 1em;
	padding: 1em;
	text-align: center;
}

input.jaxx_slideshow_duration_input {
	display: inline-block;
	font-size: 2rem;
	width: 4em;
	background-color: transparent;
	color: white;
}

.jaxx_slideshow_distract_free_mode *
{
	cursor:none;
}
.jaxx_slideshow_distract_free_mode  .jaxx_slideshow_fullscreen_bt ,
.jaxx_slideshow_distract_free_mode  .jaxx_slideshow_close_bt,
.jaxx_slideshow_distract_free_mode  .jaxx_slideshow_prev,
.jaxx_slideshow_distract_free_mode  .jaxx_slideshow_play_wrapper,
.jaxx_slideshow_distract_free_mode  .jaxx_slideshow_next,
.jaxx_slideshow_distract_free_mode  .jaxx_slideshow_nav_icon,
.jaxx_slideshow_distract_free_mode .jaxx_slideshow_nav
{
	opacity:0;
}
.jaxx_slideshow_distract_free_mode:hover .jaxx_slideshow_nav
{
	transform: translateY(100%);
}


@media screen and (max-height: 600px)
{
	.jaxx_slideshow_play_wrapper 
	{
		padding-top: 0vh;
	}
	.jaxx_slideshow_play_bt
	{
		transform:scale(.5) !important;
		margin: -3em;
	}

	.jaxx_slideshow_duration_input_wrapper {
		background-color: #0000006e;
		width: 100%;
		font-size: 1rem;
	}
	input.jaxx_slideshow_duration_input {
		display: inline-block;
		font-size: 1em;
/* 		width: 4em; */
	}

}


@media screen and (max-height: 800px)
{
	.jaxx_slideshow_play_wrapper 
	{
		padding-top: 0vh;
	}


	.jaxx_slideshow_duration_input_wrapper {
		background-color: #0000006e;
		width: 100%;
/* 		font-size: 1rem; */
	}
	input.jaxx_slideshow_duration_input {
		display: inline-block;
/* 		font-size: 1em; */
/* 		width: 4em; */
	}

}