html, body{
    overflow-x: hidden;

}

.container-fluid{
    border: solid 0px #ff0000
}

.inner-container {
    
    margin: auto;
    border: solid 0px #ff0000
}

a {
    text-decoration: none;
    color: black;
}

    ul {
        list-style: none;
    }

        ul li img {
            user-select: none; /* Prevents selection of images within list items */
        }

    .viewer-turntable-content {
        width: 100%;
        height: 100%;
        border: solid 0px #ff0000
    }

        .viewer-turntable-content img {
            width: 100%;
            height: 100%;
            cursor: grab
        }

    .viewer-zoom-content {
        width: 100%;
        height: 100%;
        border: solid 0px #ff0000
    }

    .content {
        position: relative;
        width: 100%;
        height: 100%;
        border: solid 0px #808080
    }

        .content img {
            /*opacity: 0;
            transition: opacity .6s linear .85s;*/
        }

            .content img.loaded {
                opacity: 1;
            }

    

    /* panning css */

    .img-pan-container, .img-pan-container img {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .img-pan-container {
        position: relative;
        overflow: hidden;
        cursor: move;
        height: 100%;
        width: 100%;
    }

        .img-pan-container img {
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            position: absolute;
            top: 0;
            left: 0;
        }

    .hidden {
        display: none
    }

    .turntable-navigation {
        position: absolute;
        bottom: 50px;
        right: 50px;
        /* background-color: red; */
        /* min-width: 300px; */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row-reverse;
        z-index: 1000;
    }

    .turntable-navigation-item {
        width: 85px;
        height: 50px;
        margin: 0px 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #292929;
    }

        .turntable-navigation-item a {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            background-color: #292929;
            font-family: 'Times New Roman', Times, serif;
        }

    .view-navigation {
        position: absolute;
        bottom: 120px;
        right: 50px;
    }

    .view-navigation-item {
        width: 200px;
        height: 50px;
        margin: 0px 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #292929;
    }

        .view-navigation-item:hover {
            color: white;
            background-color: #292929;
        }

        .view-navigation-item a {
            color: white;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Times New Roman', Times, serif;
        }

    .btn {
        /* border: 1px solid black; */
        border-radius: 0px;
        /* box-shadow: 0px 0px 10px 1px rgba(187, 187, 187, 0.6); */
        background-color: #292929;
        color: white;
    }

        .btn:hover {
            color: white;
            background-color: #292929;
            transform: scale(1.02);
        }

    /* .btn:hover {
    color: white;
    background-color: #292929;
} */

    .aspect-ratio-16-11 {
        position: relative;
        width: 100%; /* or any specific width you desire */
        padding-top: 68.75%; /* 11 divided by 16 times 100 */
    }

        .aspect-ratio-16-11 > .content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

    iframe {
        overflow: hidden
    }

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

        .flex-container > div {
            margin: 10px;
        }