﻿
/* Next & previous buttons */
.SlidePrevUT, .SlideNextUT {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: var(--Pl6) var(--Pl3);
    color: white;
    font-size: calc(27 * var(--Pl1));
    transition: 0.6s ease;
    border-radius: 0 var(--Pl3) var(--Pl3) 0;
    user-select: none;
    background-color: #f1f1f1;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}

/* Position the "next button" to the right */
.SlideNextUT {
    right: 0;   
    border-radius: var(--Pl3) 0 0 var(--Pl3);
}

    /* On hover, add a grey background color */
    .SlidePrevUT:hover, .SlideNextUT:hover {
        background-color: black;
        color: #f1f1f1;
    }

/* Fading animation */
.SFade {
    animation-name: fade;
    animation-duration: 1s;
}

@@keyframes fade {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

.SLeftIn {
    animation-name: SLeftIn;
    animation-duration: .6s;
}

@@keyframes SLeftIn {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}



.SRightIn {
    animation-name: SRightIn;
    animation-duration: .8s;
}

@@keyframes SRightIn {
    from {
        transform: translateX(50%);
    }

    to {
        transform: translateX(0);
    }
}


.SZoomOut {
    animation-name: ScaleOut;
    animation-duration: .6s;
}

@@keyframes ScaleOut {
    from {
        transform: scale(95%);
    }

    to {
        transform: scale(100%);
    }
}

.SZoomIn {
    animation-name: ScaleIn;
    animation-duration: .8s;
}

@@keyframes ScaleIn {
    from {
        transform: scale(120%);
    }

    to {
        transform: scale(100%);
    }
}

.SAngular {
    animation-name: SAngular;
    animation-duration: .9s;
}


@@keyframes SAngular {
    0% {
        transform: scale(150%) skew(-8deg, -8deg) perspective(0);
        opacity: .5;
        -webkit-filter: blur(1px);
        filter: hue-rotate(45deg);
    }


    100% {
        transform: skewX(0deg,0deg) scale(100%) perspective(none);
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: hue-rotate(0);
    }
}

.SlideOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-name: SlideOverlay;
    animation-duration: .9s;
    z-index: -1;
    opacity: 0;
}

    .SlideOverlay > img {
        width: 100%;
        height: 100%;
    }

@@keyframes SlideOverlay {
    from {
        display: block;
        opacity: .5;
        z-index: 10000000000;
        -webkit-filter: blur(1px);
        transform: scale(150%) skew(10deg, 10deg) perspective(0);
    }

    to {
        display: none;
        opacity: 0;
        z-index: -1;
        -webkit-filter: blur(0px);
        transform: scale(100%) skew(2deg, 2deg) perspective(none);
    }
}

.SColor {
    animation-name: SColor;
    animation-duration: 2s;
}

@@keyframes SColor {
    0% {
        -webkit-filter: grayscale(100%);
        opacity: 50%;
    }

    100% {
        -webkit-filter: grayscale(0%);
        opacity: 100%;
    }
}


.SlideFull {
    position: fixed !important;
    width: 90% !important;
    left: 50% !important;
    top: 50% !important;
    min-width: 90%;
    transform: translate(-50%, -50%) !important;
    z-index: 100000000 !important;
}

.SlideFullCloseBn {
    position: absolute;
    top: 1%;
    right: 1%;
    width: var(--Pl30);
    height: var(--Pl30);
    border-radius: 50%;
    padding: var(--Pl8);
    background-color: rgb(239 235 235 / 0.97);
    font-size: calc(16 * var(--Pl1));
    font-weight: 600;
    font-family: Arial;
    z-index: 10000000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 var(--Pl6) rgba(39, 59, 111, 0.5);
    transition: transform ease-in-out .4s;
    border: 1px solid rgb(41 40 40 / 0.40);
}

.SlideFullCloseBn, .SlideNextUT, .SlidePrevUT, .SlideShowUT {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    .SlideFullCloseBn:hover {
        transform: rotate(360deg) scale(1.05);
    }

    .SlideFullCloseBn::before {
        content: "X";
    }

.SlideBackground {
    position: fixed;
    top: 0;
    left: 0;
    //height: 100vh;
    //width: 100vw;
   // background-color: rgb(80 82 82 / 0.95);
    z-index: 99999999;
}

.SlideTextUT {
    position: absolute;
    bottom: 5%;
    left: 50%;
    padding: var(--Pl5);
    background-color: rgb(248 245 245 / 0.85);
    border-radius: var(--Pl5);
    transform: translate(-50%,0);
    font-size: calc(20 * var(--Pl1)) !important;
    text-align:center;
}



/* Slideshow container */
.SlideContainer {
    align-items: center;
    width: 100%;
    display: flex;
   //overflow-x: auto;
    position: relative;
    scroll-behavior: smooth;
}

.SlideMin {
    cursor: zoom-out;
}

.SlideMax {
    cursor: zoom-in;
}

.SlideShowUT {
    position: relative;
    width: 100%;
   // box-shadow: rgba(14, 30, 37, 0.12) 0px var(--Pl2) var(--Pl4) 0px, rgba(14, 30, 37, 0.32) 0px var(--Pl2) calc(16 * var(--Pl1)) 0px;
}


.SlideUT {
    min-width: 100%;
    position: relative;
    display: none;
    height: 100%;
    // box-shadow: rgba(14, 30, 37, 0.12) 0px var(--Pl2) var(--Pl4) 0px, rgba(14, 30, 37, 0.32) 0px var(--Pl2) calc(16 * var(--Pl1)) 0px;
}

.SlideImage {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // max-height: 100vh;
}

    .SlideImage > img {
        width: 100%;
        height:100%;
       // min-height: 143px;
        object-fit: cover;
    }
/* Hide scrollbar for Chrome, Safari and Opera */
.SlideContainer::-webkit-scrollbar {
   // display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.SlideContainer {
   // -ms-overflow-style: none; /* IE and Edge */
   // scrollbar-width: none; /* Firefox */
}



