.playbox *, .playboximage *{
                margin:0px;
                border:0px;
                padding:0px;
                box-sizing:border-box;
            }

            .playbox , .playboximage{
                position:fixed; 
                top:0;
                left:0;
                width:100%;
                height:100%;
                z-index:10500;
                overflow:auto;
                background-color:rgba(0,0,0,.95);
                display:none;
            }
                        
            .playbox .exit, .playboximage .exit{
                position:absolute;
                top:10px;
                right:10px;
                font-size:2.5rem;
                color:#FFF;
                width:40px;
                height:40px;
                overflow:hidden;
                cursor:pointer;
                text-align:center;
                line-height:40px;
                background-color:rgb(255,0,0);
                font-family: "Times New Roman", Times, serif;
                border-radius:50%;
                z-index:10;
            }

            .playbox .exit::selection, .playboximage .exit::selection{
                color: none;
                background: none;
            }
                        
            .playbox .container, .playboximage .container{
                position:relative;
                top:100px;
                width:95%;
                min-height:200px;
                background-color:#FFF;
                box-shadow:0 0 5px rgba(0,0,0,.5);
                margin:0 auto 50px;
                max-width:800px;
                padding:30px 20px;
                border-radius:4px;
            }
                        
            @media (max-width:700px){
                .playbox .container, .playboximage .container{
                    top:65px;
                    width:92%;
                }
            
                .playbox .exit, .playboximage .exit{
                    top:8px;
                    right:8px;
                    width:30px;
                    height:30px;
                    font-size:2rem;
                    line-height:28px;
                }
            }

            @keyframes slideIn{
                0% {transform:translateY(-50px);}
                100%{transform:translateY(0);}
            }

            @keyframes slideOut{
                0% {transform:translateY(0);}
                100%{transform:translateY(-50px);}
            }

            @keyframes fadeIn{
                0% {opacity:0;}
                100%{opacity:1;}
            }
                        
            @keyframes fadeOut{
                0% {opacity:1;}
                100%{opacity:0;}
            }
        ;


            .playboximage .container{
                border-radius: 0 !important;
                padding:0px !important;
                top:60px !important;
                background-color: rgba(0, 0, 0, 0) !important;
                box-shadow: none !important;
                width: 750px !important;
                height: 500px !important;
            }
            
            
            .playboximage .exit{
                border-radius: 50%;
                background-color: rgb(218, 0, 0);
                box-shadow: 0 0 6px rgba(218, 0, 0, 0.6);
            }
            
            /* New Element Styling in the Container */
            .playboximage .bgImage{
                width:100%;
            }
            
            .playboximage .arrow{
                padding:6px 16px;
                top:50%;
                background-color: #303030;
                color:#DDD;
                font-weight: bold;
                display: inline-block;
                font-size: 1.5rem;
                position: absolute;
                z-index: 102;
                border-radius: 100%;
                box-shadow: 0 0 6px rgba(0, 0, 0, .6);
                transform: translateY(-50%);
                cursor: pointer;
            }
            
            .playboximage .leftarrow{
                left:-55px;
            }
            
            .playboximage .rightarrow{
                right:-55px;
            }
            
            .playboximage .imageList{
                position: fixed;
                width: 100%;

                overflow-x: auto;
                box-shadow: 0 0 6px rgba(0, 0, 0, .6);
                background-color: rgba(0, 0, 0, .4);
                bottom:0;
                left:0;
                display: flex;
                justify-content: left;
                padding:20px 50px;
            }
            
            .playboximage .imageList img{
                width: 80px;
                margin-right:10px;
                border: 1px solid rgba(0, 0, 0, 0.3);
                box-shadow:0 0 10px rgba(0,0,0,.5);
                border-radius: 8px;
                cursor: pointer;
            }
            
            .playboximage .active{
                transition:all .2s ease;
                border:none !important;
                box-shadow: 0 0 7px rgba(255, 255, 255, .7) !important;
                
            }
            
            @media (max-width:800px){
                .playboximage .container{
                    top:10% !important;
                    width: 95% !important;
                }
                .playboximage .arrow{
                    background-color: rgba(124, 124, 124, 0.6);
                    top:90%;
                    box-shadow: 0 0 6px rgba(90, 90, 90, 0.6);
                    transform: translateY(-50%);
                }
            
                .playboximage .arrow:active {
                    transition: all .2s ease;
                    background-color: rgba(124, 124, 124, 0.836);
                }
                
                .playboximage .leftarrow{
                    left:20px;
                }
                
                .playboximage .rightarrow{
                    right:20px;
                }
            
                .playboximage .imageList{
                    height:150px;
                    overflow-x: auto;
                    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
                    padding:10px;
                    
                }
            
                .playboximage .imageList img{
                    width:160px;
                    margin-right:8px;
                    height: 110px;
                }
            }
        ;