.gallery{
    height:100%
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}



canvas {
    width: 100%;
    height: auto !important;
    cursor: grab;
}



    canvas::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f1b2";
        font-size: 1rem;
        z-index: 9999;
        position: absolute;
        top: 0;
        color: black;
    }



.slide-products {
    position: absolute;
    background-color: white;
    padding: 8px 10px;
    border-radius: 8px;
    top: 20px;
    right: 20px;
}



    .slide-products ol {
        padding-left: 1rem;
        margin-bottom: 0;
        margin-top: 5px
    }



    .slide-products li::marker {
        font-size: .875em;
    }

.slide-tag {

    position: absolute;
    font-family: 'pfdintextcondpro-regular';
    background-color: rgba(232, 245, 228, 0.9);
    color: #000;
    padding: 10px 15px;
    border-radius: 8px;
    bottom: -12px;
    left: 50%;
    transform: translate(-50%, -50%);

}


.threeD {
    color: var(--hangon-green);
    font-family: 'pfdintextcondpro-bold';
}

.slide {
    position: relative;
    height: 100%;
    border: 2px solid var(--light-gray)
}
   /* .slide .threeD {
        display: none;
    }*/


   .slider .slick-dots {
        display: none !important
    }
.slider-nav .thumbnail img, .slider-nav .thumbnail video {
    width: 100%;
    cursor: pointer;
}


/* Make the last thumbnail sticky */

.thumbnail:last-child {
    position: sticky;
    bottom: 0;
}

.thumbnail span {
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: var(--hangon-green);
    border-radius: 50%;
    text-align: center;
    align-content: center;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0);
    padding-left: 4px;
}



.thumbnail:hover span {
    background-color: var(--dark-green);
}



.thumbnail span i:before {
    font-size: 1.7rem;
    color: var(--yellow);
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
}



.slider-nav .thumbnail {
    position: relative;
    border: 2px solid var(--light-gray);
/*    width: auto !important*/
}



.slider-nav .slick-current .thumbnail {
    border: 1px solid var(--dark-green)
}





.slick-vertical .slick-slide {
    padding: 0 0 15px 0;
}



.slick .slick-next,
.slick .slick-prev,
.slider .slick-next:before,
.slider .slick-prev:before,
.slider .slick-next:focus,
.slider .slick-prev:focus {
    opacity: 0;
    transition: opacity 0.1s ease;
    pointer-events: none; /* Prevent click when hidden */
}

.slider:hover .slick-next,
.slider:hover .slick-prev,
.slider:hover .slick-next:before,
.slider:hover .slick-prev:before,
.slider:hover .slick-next:focus,
.slider:hover .slick-prev:focus,
.slider:hover .slick-next:focus-visible,
.slider:hover .slick-prev:focus-visible {
    opacity: 1;
    pointer-events: auto;
    background-color: var(--pastel-green);
    height: 30px;
    width: 30px;
    border-radius: 50%;
}




    .slick-prev {
        left: 35px;
        z-index: 9;
    }



    .slick-next {
        right: 25px;
    }



        .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover {
            color: transparent;
            color: var(--hangon-green);
            outline: 0;
            background: var(--powder-green);
        }



    .slider-nav .slick-next, .slider-nav .slick-prev {
        background-color: var(--powder-green);
        height: 30px;
        width: 30px;
        border-radius: 50%;
    }



        .slider-nav .slick-prev:before,
        .slider-nav .slick-next:before {
            color: var(--hangon-green);
            opacity: 1
        }



    .slider-nav [aria-disabled="true"] {
        display: none !important
    }



    .slider-nav .slick-prev {
        bottom: unset;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }



    .slider-nav .slick-next {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }





    .slick-prev:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f104";
        font-size: 1rem;
    }



    .slick-next:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f105";
        font-size: 1rem;
    }




    .slick-slide .slide > img {
        height: fit-content !important;
        object-fit: contain;
        max-height: 100%;
    }




    @media all and (min-width: 2199px) {

        .slider {
            max-width: 80%;
            padding-left: 15px;
            margin-bottom: 0 !important;
            height: 800px;
        }

            .slider, .slider .slick-list {
                min-width: 80%;
            }

            .slider .slick-list {
                height: 800px !important;
            }
        .slider-nav .thumbnail img, .slider-nav .thumbnail video {
            height: 183px;
            width: 100%;
        }
        .slider-nav {
            width: 20% !important
        }

        .slick-slide .slide > img {
            display: block;
        }
    }



    @media all and (max-width: 2199px) {
        .slider {
            max-width: 80%;
            padding-left: 15px;
            margin-bottom: 0 !important;
        }

            .slider, .slider .slick-list {
                min-width: 80%;
            }


                .slider-nav, .slider .slick-list {
                    height: 619px !important;
                }

        .slider-nav {
            width: 20% !important
        }
            .slider-nav .thumbnail img, .slider-nav .thumbnail video {
                height: 138px;
                width: 100%;
            }
        .slick-slide .slide > img {
            display: block;
        }
    }



    @media all and (max-width: 1399px) {
        .slider {
            max-width: 80%;
            padding-left: 15px;
            margin-bottom: 0 !important;
            max-height: 500px;
        }

            .slider, .slider .slick-list {
                min-width: 80%;
            }

            .slider-nav, .slider .slick-list {
                height: 573px !important;
            }
            .slider-nav .thumbnail img, .slider-nav .thumbnail video {
                height: 127px;
                width: 100%,
            }
        .slick-slide .slide > img {
            display: block;
        }

        .thumbnail span {
            height: 45px !important;
            width: 45px !important
        }

            .thumbnail span i:before {
                font-size: 1.5rem;
            }
    }



    @media all and (max-width: 1199px) {
        .slider {
            max-width: 80%;
            padding-left: 15px;
            margin-bottom: 0 !important;
            max-height: 400px;
        }

        .slider, .slider .slick-list {
            min-width: 80%;
        }


            .slider-nav, .slider .slick-list {
                height: 477px !important;
            }
            .slider-nav .thumbnail img, .slider-nav .thumbnail video {
                height: 103px;
                width: 100%;
            }
        .slick-slide .slide > img {
            display: block;
        }

        .slider-nav {
            width: 20% !important
        }

        .thumbnail span {
            height: 40px !important;
            width: 40px !important
        }

            .thumbnail span i:before {
                font-size: 1.2rem;
            }
    }



    @media all and (max-width: 992px) {

        .slider .slick-next,
        .slider .slick-prev,
        .slider .slick-next:before,
        .slider .slick-prev:before,
        .slider .slick-next:focus,
        .slider .slick-prev:focus,
        .slider .slick-next:focus-visible,
        .slider .slick-prev:focus-visible {
            opacity: 1;
            pointer-events: auto;
            background-color: var(--pastel-green);
            height: 30px;
            width: 30px;
            border-radius: 50%;
        }
        .slider, .slider .slick-list {
            max-width: 100%;
            padding-left: 0;
            margin-bottom: 10px !important;
            height: 710px !important;
            max-height: 696px;
        }
        .slider-nav .thumbnail img, .slider-nav .thumbnail video {
            height: 165px;
            width: 100%;
        }
        .slider, .slider .slick-list {
            min-width: 80%;
        }

        .slider-nav {
            height: 168px !important;
        }

        .slider-nav {
            width: 100% !important;
        }

        .slick-slide .slide > img, .slider-video {
            display: block;
        }

        .thumbnail span {
            height: 45px !important;
            width: 45px !important
        }

            .thumbnail span i:before {
                font-size: 1.5rem;
            }

        .slider-nav .slick-slide {
            padding: 0 5px 0 0;
        }

        .slider-nav .slick-next {
            position: absolute;
            top: 50%;
            left: unset;
            right: -25px;
            transform: translate(-50%, -50%);
        }

        .slider-nav .slick-prev {
            position: absolute;
            top: 50%;
            left: unset;
            transform: translate(-50%, -50%);
        }
    }



    @media all and (max-width: 768px) {
        .slider, .slider .slick-list {
            max-width: 100%;
            padding-left: 0;
            margin-bottom: 10px !important;
            height: 504px !important;
            max-height: 504px;
        }

            .slider, .slider .slick-list {
                min-width: 80%;
            }

        .slider-nav {
            height: 123px !important;
        }

        .slick-slide .slide > img, .slider-video, canvas {
            display: block;
        }
        .slider-nav .thumbnail img, .slider-nav .thumbnail video {
            height: 123px;
            width: 100%;
        }

        .thumbnail span {
            height: 45px;
            width: 45px;
        }

            .thumbnail span i:before {
                font-size: 1.4rem;
            }
    }
  .slick-slide .slide > img {
        object-fit: cover !important;
    }



    @media all and (max-width: 500px) {
        .slider, .slider .slick-list {
            max-width: 100%;
            padding-left: 0;
            margin-bottom: 10px !important;
            height: 439px !important;
            max-height: 439px;
        }

            .slider, .slider .slick-list {
                min-width: 80%;
            }

        .slider-nav {
            height: 99px !important;
        }

        .slick-slide .slide > img, .slider-video, canvas {
            display: block;
        }

        .thumbnail span {
            height: 40px !important;
            width: 40px !important
        }

            .thumbnail span i:before {
                font-size: 1.2rem;
            }
        .slider-nav .thumbnail img, .slider-nav .thumbnail video {
            height: 103px;
            width: 100%;
        }
    }



    @media all and (max-width: 400px) {
        .slider, .slider .slick-list {
            max-width: 100%;
            padding-left: 0;
            margin-bottom: 10px !important;
            height: 335px !important;
            max-height: 335px;
        }

            .slider, .slider .slick-list {
                min-width: 80%;
            }

        .slider-nav {
            height: 83px !important;
        }

        .slick-slide .slide > img, .slider-video, canvas {
            display: block;
        }

        .thumbnail span {
            height: 30px !important;
            width: 30px !important
        }

            .thumbnail span i:before {
                font-size: 1rem;
            }
        .slider-nav .thumbnail img, .slider-nav .thumbnail video {
            height: 83px;
            width: 100%;
        }
    }