:root {
    --yellow: #ffde59;
}


#content-container section {
	max-width: 1024px; 
	min-height: 550px; 
	background-color: #00456f; 
	margin: 0px auto; 
	color: #fff; 
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);	
}

#video-container {
    position: relative;
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625 = 56.25%) */
    height: 0;
    background-color: #000;
    overflow: hidden;
    margin: 50px 0px; 
    border-top: 5px solid var(--yellow); 
    border-bottom: 5px solid var(--yellow); 
}


#video-container iframe,
#video-container video,
#video-container embed,
#video-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


ul.video-thumbs {
    display: block; width: 100%; 
    font-size: 0; 
    overflow: auto; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    white-space: nowrap;
    padding: 0px; 
}

ul.video-thumbs li {
    display: inline-block; 
    width: 250px;
    background-color: #000;
    box-sizing: border-box; 
    border: 2px solid var(--yellow); 
    cursor: pointer; 
    position: relative; 
}

ul.video-thumbs li::before {
    border: 3px solid #fff; 
    display: block; width: 30px; height: 30px; 
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    content: ""; 
    pointer-events: none;
    border-radius: 100%; 
    backdrop-filter: blur(2px);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);     
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);
    -webkit-backdrop-filter: blur(2px); /* Safari/iOS support */   
}


ul.video-thumbs li::after {
    display: inline-block;  
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    content: ""; 
    pointer-events: none;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    margin-left: 2px; 
}


/* Webkit overlay scrollbar */
ul.video-thumbs::-webkit-scrollbar {
    height: 8px;
    background: #003454;
}

ul.video-thumbs::-webkit-scrollbar-track {
    background: #003454;
}

ul.video-thumbs::-webkit-scrollbar-thumb {
    background: var(--yellow);
    border-radius: 4px;
    width: 50px; 
}

ul.video-thumbs::-webkit-scrollbar-thumb:hover {
    background: #ffea8a;
}






ul.video-thumbs li img {
    display: block; width: 100%; height: 100%; 
    object-fit: cover; 
}