/**@license showplusx: a performance-optimized slideshow engine
 * @author  Levente Hunyadi
 * @version 1.0
 * @remarks Copyright (C) 2009-2022 Levente Hunyadi
 * @remarks Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
 * @see     https://hunyadi.info.hu/projects/showplusx
 **/

/*
* Slideshow container (customizable)
*/

.showplusx-slideshow {
width: 100%;
height: 100%;
}

/*
* Captions (customizable)
*/
.showplusx-caption {
background-color: rgba(0,0,0,0.5);
color: rgb(255,255,255);
text-align: center;
}

.showplusx-caption > a {
color: rgb(255,255,255);
}

/*
* Animation settings (customizable)
*/

.showplusx-animation-in {
animation-duration: 2s;
}

.showplusx-animation-show {
animation-duration: 3s;
animation-timing-function: linear;
}

.showplusx-animation-out {
animation-duration: 2s;
}

/*
* Viewport area showing slideshow images
*/

.showplusx-slideshow {
position: relative;
overflow: hidden;
}

.showplusx-viewport,
.showplusx-item {
position: absolute;
overflow: hidden;
}

.showplusx-viewport {
z-index: 0;  /* establish local stacking context */
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.showplusx-item {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
background-origin: border-box;
background-clip: content-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

/*
* Captions
*/

.showplusx-caption {
position: absolute;
left: 0;
right: 0;
}

.showplusx-caption-top {
top: 0;
}

.showplusx-caption-top.showplusx-animation-in {
animation: push-top-in 1s ease;
}

.showplusx-caption-bottom {
bottom: 0;
}

.showplusx-caption-bottom.showplusx-animation-in {
animation: push-bottom-in 1s ease;
}

/*
* Navigation buttons in viewport area
*/

.showplusx-previous,
.showplusx-next {
position: absolute;
background: transparent none no-repeat scroll 0 center;
top: 0;
bottom: 0;
width: 58px;
}

.showplusx-previous,
.showplusx-slideshow[dir=rtl] > .showplusx-next {
left: 0;
right: auto;
}

.showplusx-next,
.showplusx-slideshow[dir=rtl] > .showplusx-previous {
left: auto;
right: 0;
}

.showplusx-previous,  /* lowest priority rule, sets background image */
div.showplusx-previous:hover,  /* highest priority rule, makes control visible on hover */
.showplusx-slideshow[dir=rtl] > .showplusx-next,
.showplusx-slideshow[dir=rtl] > div.showplusx-next:hover {
background-image: url(navigation-prev.svg);
}

.showplusx-next,
div.showplusx-next:hover,
.showplusx-slideshow[dir=rtl] > .showplusx-previous,
.showplusx-slideshow[dir=rtl] > div.showplusx-previous:hover {
background-image: url(navigation-next.svg);
}

@media (hover) and (pointer: fine) {  /* rules for desktop devices */
div.showplusx-previous,  /* medium priority rule, hides control on desktop devices (unless on hover, see highest priority rule) */
.showplusx-slideshow[dir=rtl] > div.showplusx-previous,
div.showplusx-next,
.showplusx-slideshow[dir=rtl] > div.showplusx-next {
background-image: none
}
}

/*
* Quick-access navigation bar
*/

.showplusx-navigation {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}

.showplusx-navigation.showplusx-top,
.showplusx-navigation.showplusx-bottom {
left: 0;
right: 0;
}

.showplusx-navigation.showplusx-top {
top: 0;
}

.showplusx-navigation.showplusx-bottom {
bottom: 0;
}

.showplusx-navigation.showplusx-start,
.showplusx-navigation.showplusx-end {
top: 0;
bottom: 0;
flex-direction: column;
}

.showplusx-navigation.showplusx-start,
.showplusx-slideshow[dir=rtl] > .showplusx-navigation.showplusx-end {
left: 0;
right: auto;
}

.showplusx-navigation.showplusx-end,
.showplusx-slideshow[dir=rtl] > .showplusx-navigation.showplusx-start {
left: auto;
right: 0;
}

.showplusx-navigation > span {
display: inline-block;
margin: 12px 4px;
border: 1px solid black;
border-radius: 100%;
width: 36px;
height: 36px;
background-color: white;
background-size: cover;
background-position: center;
opacity: 0.5;
}

.showplusx-navigation.showplusx-start > span,
.showplusx-navigation.showplusx-end > span {
margin: 4px 12px;
}

.showplusx-navigation > span:hover {
opacity: 1;
}

/*
* Common animation keyframes
*/

.showplusx-current {
z-index: 2;
}

.showplusx-animation-in {
animation-name: idle;
z-index: 1;
}

.showplusx-animation-show {
animation-name: idle-show;  /* 'in' and 'show', and 'show' and 'out' animations must be different */
}

.showplusx-animation-out {
animation-name: idle;
z-index: -1;
}

@keyframes idle {
    0% {
        visibility: visible;  /* artificial, compatibility with Microsoft browsers where empty keyframe is not allowed */
    }
    100% {
        visibility: visible;  /* artificial, compatibility with Microsoft browsers where empty keyframe is not allowed */
    }
}

@keyframes idle-show {
    0% {
        opacity: 1.0;  /* artificial, makes sure 'idle' keyframe animations are different */
    }
    100% {
        opacity: 1.0;  /* artificial, makes sure 'idle' keyframe animations are different */
    }
}

/*
* Fade effect
*/

.showplusx-fade > .showplusx-animation-in {
animation-name: fade-in;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.showplusx-fade > .showplusx-animation-out {
animation-direction: reverse;
animation-name: fade-in;
}

/*
* Fold effects
* These effects anchor the element to the container edges and run the animation by decreasing the area occupied
* by the margin. As the margin decreases, more of the fixed space becomes available to the image. Proper background
* positioning and the fact that the background is clipped to the border box (not painted over the margin area) causes
* the image to be gradually revealed.
*/

.showplusx-fold > .showplusx-animation-in {
width: auto;
right: 0;
left: 0;
}

/*
* Fold left
* Starts by showing only the leftmost portion of the image, gradually uncovering the entire image.
*/
.showplusx-fold-left > .showplusx-animation-in {
animation-name: fold-left;
}

@keyframes fold-left {
    0% {
        padding-right: 100%;
    }
    100% {
        padding-right: 0%;
    }
}

/*
* Fold right
* Starts by showing only the rightmost portion of the image, gradually uncovering the entire image.
*/
.showplusx-fold-right > .showplusx-animation-in {
animation-name: fold-right;
}

@keyframes fold-right {
    0% {
        padding-left: 100%;
    }
    100% {
        padding-left: 0%;
    }
}

/*
* Fold top
*/
.showplusx-fold-top > .showplusx-animation-in {
animation-name: fold-top;
}

@keyframes fold-top {
    0% {
        padding-bottom: 100%;
    }
    100% {
        padding-bottom: 0%;
    }
}

/*
* Fold bottom
*/
.showplusx-fold-bottom > .showplusx-animation-in {
animation-name: fold-bottom;
}

@keyframes fold-bottom {
    0% {
        padding-top: 100%;
    }
    100% {
        padding-top: 0%;
    }
}

/*
* Push effects
*/

/*
* Push from left
* The image enters into view at the left side of the container.
*/
.showplusx-push-left > .showplusx-animation-in {
animation-name: push-left-in;
}

@keyframes push-left-in {
    0% {
        transform: translate(-100%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.showplusx-push-left > .showplusx-animation-out {
animation-name: push-left-out;
}

@keyframes push-left-out {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}

/*
* Push from right
* The image enters into view at the right side of the container.
*/
.showplusx-push-right > .showplusx-animation-in {
animation-name: push-right-in;
}

@keyframes push-right-in {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.showplusx-push-right > .showplusx-animation-out {
animation-name: push-right-out;
}

@keyframes push-right-out {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

/*
* Push from top
* The image enters into view at the top side of the container.
*/
.showplusx-push-top > .showplusx-animation-in {
animation-name: push-top-in;
}

@keyframes push-top-in {
    0% {
        transform: translate(0, -100%);
    }
    100% {
        transform: translate(0, 0);
    }
}

.showplusx-push-top > .showplusx-animation-out {
animation-name: push-top-out;
}

@keyframes push-top-out {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 100%);
    }
}

/*
* Push from bottom
* The image enters into view at the bottom side of the container.
*/
.showplusx-push-bottom > .showplusx-animation-in {
animation-name: push-bottom-in;
}

@keyframes push-bottom-in {
    0% {
        transform: translate(0, 100%);
    }
    100% {
        transform: translate(0, 0);
    }
}

.showplusx-push-bottom > .showplusx-animation-out {
animation-name: push-bottom-out;
}

@keyframes push-bottom-out {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100%);
    }
}

/*
* Scan effects
*/

.showplusx-scan > .showplusx-animation-in {
animation-name: fade-in;
}

.showplusx-scan > .showplusx-animation-out {
animation-direction: reverse;
animation-name: fade-in;
}

/*
* Scan left
* A sliding window scans the image from the right to the left.
*/

.showplusx-scan-left > .showplusx-animation-in {
background-position-x: right;
}

.showplusx-scan-left > .showplusx-animation-out {
background-position-x: left;
}

.showplusx-scan-left > .showplusx-animation-show {
animation-name: scan-left;
}

@keyframes scan-left {
    0% {
        background-position-x: right;
    }
    100% {
        background-position-x: left;
    }
}

/*
* Scan right
* A sliding window scans the image from the left to the right.
*/

.showplusx-scan-right > .showplusx-animation-in {
background-position-x: left;
}

.showplusx-scan-right > .showplusx-animation-out {
background-position-x: right;
}

.showplusx-scan-right > .showplusx-animation-show {
animation-direction: reverse;
animation-name: scan-left;
}

/*
* Scan up
* A sliding window scans the image from the bottom to the top.
*/

.showplusx-scan-up > .showplusx-animation-in {
background-position-y: bottom;
}

.showplusx-scan-up > .showplusx-animation-out {
background-position-y: top;
}

.showplusx-scan-up > .showplusx-animation-show {
animation-name: scan-up;
}

@keyframes scan-up {
    0% {
        background-position-y: bottom;
    }
    100% {
        background-position-y: top;
    }
}

/*
* Scan down
* A sliding window scans the image from the top to the bottom.
*/

.showplusx-scan-down > .showplusx-animation-in {
background-position-y: top;
}

.showplusx-scan-down > .showplusx-animation-out {
background-position-y: bottom;
}

.showplusx-scan-down > .showplusx-animation-show {
animation-direction: reverse;
animation-name: scan-up;
}

/*
* Circle effect
*/

.showplusx-circle > .showplusx-animation-in {
animation-name: circle-in;
}

@keyframes circle-in {
    0% {
        clip-path: circle(0 at 50% 50%);
        visibility: visible;
    }
    100% {
        clip-path: circle(100% at 50% 50%);
        visibility: visible;
    }
}

/*
* Ken Burns effects.
* These effects operate with pan and zoom, using GPU-accelerated transforms.
*
* First, the effect focuses on part of the image specified by CSS property `transform-origin` (pan effect). This is
* a pair of percentage values for horizontal and vertical position in the range 0% (left or top) to 100% (right or
* bottom). Percentages are expressed in terms of the slideshow container, not the image. Let's consider a few examples:
* - the value `50% 50%` sets the focus in the exact center
* - the value `0% 100%` shifts focus to the bottom left corner
* - the value `75% 25%` highlights the top right quadrant of the image
*
* Once the focus is set, the image is zoomed with the focus in center (zoom effect). This is accomplished with the CSS
* rule `transform: scale(x, y)` where `x` and `y` are multiplication factors for horizontal and vertical dimensions.
* You would typically use the same factor for both dimensions.
*/

.showplusx-kenburns > .showplusx-animation-in {
animation-name: fade-in;
}

.showplusx-kenburns > .showplusx-animation-out {
animation-name: kenburns-out;
}

@keyframes kenburns-out {
    0% {
        opacity: 1;
    }
    100% {
        transform: scale(2.5, 2.5);
        opacity: 0;
    }
}

.showplusx-kenburns > .showplusx-animation-in,
.showplusx-kenburns > .showplusx-animation-show {
transform-origin: 50% 50%;
transform: scale(2, 2);
}

.showplusx-kenburns > .showplusx-animation-show {
animation-name: kenburns;
}

@keyframes kenburns {
    0% {
        /* intentionally left blank */
    }
    100% {
        transform: scale(1, 1);
    }
}

/*
* Ken Burns top left
* Starts by focusing on the top left quadrant of the image, and gradually
* zooms out until the entire image is visible.
*/
.showplusx-kenburns-topleft > .showplusx-animation-in,
.showplusx-kenburns-topleft > .showplusx-animation-show {
transform-origin: 25% 25%;
}

/*
* Ken Burns top right
* Starts by focusing on the top right quadrant of the image, and gradually
* zooms out until the entire image is visible.
*/
.showplusx-kenburns-topright > .showplusx-animation-in,
.showplusx-kenburns-topright > .showplusx-animation-show {
transform-origin: 75% 25%;
}

/*
* Ken Burns bottom right
* Starts by focusing on the bottom right quadrant of the image, and gradually
* zooms out until the entire image is visible.
*/
.showplusx-kenburns-bottomright > .showplusx-animation-in,
.showplusx-kenburns-bottomright > .showplusx-animation-show {
transform-origin: 75% 75%;
}

/*
* Ken Burns bottom left
* Starts by focusing on the bottom left quadrant of the image, and gradually
* zooms out until the entire image is visible.
*/
.showplusx-kenburns-bottomleft > .showplusx-animation-in,
.showplusx-kenburns-bottomleft > .showplusx-animation-show {
transform-origin: 25% 75%;
}

/*
* Hide elements that are not used
*/

.showplusx-hidden {  /* put rule last to have it override other rules of same priority */
display: none;
}