/* to remove float clearing which was coming from main.css for the div. It was causing problems in left and right carousel-nav*/
form .carousel-nav:after {
    all: initial;
    all: unset;
}


/* Carousel container */
.carousel-container {
    width: 100%;
    position: relative;
}

/* Carousel slides */
.carousel-slide {
    display: none;
    position: absolute;
    border: 1px solid #999999; /*   #eeeeee;*/
    border-radius: 15px 15px 15px 15px;
    background: #e5ecf3; /*  background: #f6f9fb;*/
    /* opacity: 0; Start hidden */
    /* transform: translateY(-20px);Optional: initial position */
    /* transition: opacity 0.5s ease, transform 0.5s ease;Smooth transition */
}
    .carousel-slide.active {
        display: block;
         /*  opacity: 1;Element becomes visible */
         /* transform: translateY(0);Returns to its original position */
    }
    .carousel-slide img {
        width: 100%;
        padding: 1em;
    }
  

.Description {
    font-size: 1em;
    padding:1em;
}

.DescriptionDetails{
    font-size: 0.8em;
    padding: 1.5em;
}

a.LinkToMoreInfo, .LinkToMoreInfo, .LinkToMoreInfo a {
    font: 1em/1.3 'Open Sans', Verdana, Georgia, Helvetica, 'Palatino Linotype', 'Book Antiqua','Lucida Grande', arial, tahoma, verdana, sans-serif;
    font-weight: normal;
    padding: 1em;
}
/* Navigation buttons */
.carousel-nav {
    position: absolute;
    top: 45%;  
    width: 100%;
    display: flex;
    justify-content: space-between; 
}






/* Gallery */
/* use for whole page */
.gallery-container {
    display: flex;
    height: 35em;
    width: 100%;
    padding: 1em;
}

.main-image img {
    height: 30em; /*
    width: 100%;
    height: auto;*/
    border: 1px solid #999999;
}

.thumbnails {
    padding: 0 1em;
    float: left;
    width: 30%;
    text-align: left;
}

    .thumbnails img {
        width: 6em;
        height: 4em;
        cursor: pointer;
        padding: 0.5em;
        border: 1px solid transparent;
        transition: border 0.3s;
    }

        .thumbnails img:hover {
            border: 1px solid #999999;
        }


/* use for Half page */
.gallery-container_Half {
    display: flex;
    height: 25em;
    width: 100%;
    padding: 1em;
}

.main-image_Half img {
    height: 24em; /*
    width: 100%;
    height: auto;*/
    border: 1px solid #999999;
}

.thumbnails_Half {
    padding: 0 0.5em;
    float: left;
    width: 30%;
    text-align: left;
}

    .thumbnails_Half img {
        width: 6em;
        height: 4em;
        cursor: pointer;
        padding: 0.2em;
        border: 1px solid transparent;
        transition: border 0.3s;
    }

        .thumbnails_Half img:hover {
            border: 1px solid #999999;
        }

.gallery-container_Half_Vertical {
    display: flex;
    height:100%;
    width: 100%; 
    padding: 1em;
}


.main-image_Half_Vertical img {
    width: 36em; /*
    width: 100%;
    height: auto;*/
    border: 1px solid #999999;
}

.thumbnails_Half_Vertical {
    padding: 0 0.5em;
    float: left;
    width: 30%; /* 60%*/
    text-align: left;
}
    .thumbnails_Half_Vertical img {
        width: 4em;
        height: 6em;
        cursor: pointer;
        padding: 0.2em;
        border: 1px solid transparent;
        transition: border 0.3s;
    }
        .thumbnails_Half_Vertical img:hover {
            border: 1px solid #999999;
        }




/* for now do not use gallery nav because cleaner will be just have next image on the image itself click 
.gallery-nav {    
    position: relative;
    top: -25em;   
    width: 1.5em;
    cursor: pointer;
    padding: 20em 2em 2em 2em;    
    opacity:0;
}
    .gallery-nav img:hover {
        cursor: pointer;
    }
*/