﻿.slideshow {
    width: 100%; /* Ensure slideshow fits within the column */
    height: 300px; /* Set a fixed height for the slideshow, adjust as needed */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Make the slideshow a positioned element for absolute positioning of images */
}

    .slideshow img {
        position: absolute; /* Position images on top of each other */
        width: 100%; /* Make the image take the full width of the container */
        height: 100%; /* Ensure the image covers the entire container height */
        object-fit: cover; /* Crop the image to cover the container while maintaining aspect ratio */
        opacity: 0; /* Hide all images by default */
        animation: fade 9s infinite; /* Apply fade animation to transition between images */
        border-radius: 25px;
    }

        .slideshow img:nth-child(1) {
            animation-delay: 0s;
        }

        .slideshow img:nth-child(2) {
            animation-delay: 3s;
        }

        .slideshow img:nth-child(3) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(4) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(5) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(6) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(7) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(8) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(9) {
            animation-delay: 6s;
        }

        .slideshow img:nth-child(10) {
            animation-delay: 6s;
        }




.slideshowBig {
    width: 100%; /* Ensure slideshow fits within the column */
    /*  height: 300px;*/ /* Set a fixed height for the slideshow, adjust as needed */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Make the slideshow a positioned element for absolute positioning of images */
}

    .slideshowBig img {
        position: absolute; /* Position images on top of each other */
        width: 100%; /* Make the image take the full width of the container */
        height: 100%; /* Ensure the image covers the entire container height */
        object-fit: cover; /* Crop the image to cover the container while maintaining aspect ratio */
        opacity: 0; /* Hide all images by default */
        animation: fade 9s infinite; /* Apply fade animation to transition between images */

        border-bottom-right-radius: 25px;
        border-top-right-radius: 25px;
    }

      /*  .slideshowBig img:nth-child(1) {
            animation-delay: 0s;
        }

        .slideshowBig img:nth-child(2) {
            animation-delay: 3s;
        }

        .slideshowBig img:nth-child(3) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(4) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(5) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(6) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(7) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(8) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(9) {
            animation-delay: 6s;
        }

        .slideshowBig img:nth-child(10) {
            animation-delay: 6s;
        }
*/

@keyframes fade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
    /* The image fully fades in */
    33.33% {
        opacity: 1;
    }
    /* Image stays fully visible */
    43.33% {
        opacity: 0;
    }
    /* The image starts fading out */
    100% {
        opacity: 0;
    }
    /* The image is hidden */
}

@media screen and (max-width:900px) {
    .slideshow {
        height: 300px;
    }

    .slideshowBig {
        height: 300px;
    }

        .slideshowBig img {
            border-radius: 25px;
        }
}
