* {
    box-sizing: border-box; /* Apply universally */
}

body {
    padding: 0;
    margin: 0;
overflow:hidden;
}

.interactive-image {
    position: relative;
    display: inline-block;
}

.spottext {
	margin-left: 36px;
    margin-top: 4px;
	font-family:Verdana; 
	font-size:16px; 
	color: white;
	text-shadow: 1px 1px 10px #8f8f8f, 1px 1px 1px #787878;
}

.close-all-videos {
    position: fixed;
    top: 5px;
	left: 20px;
    z-index: 1100;  /* Make sure it's above all other content */
    display: none; /* Start hidden, show programmatically */  
	cursor: pointer;    
    color: #ffffff;
    float: right;
    font-size: 40px;
    font-weight: bold;	
}

.close-all-videos img {
	width: 50px;
	display:none;
}

/* Make the image fill 100% of the viewport width */
.interactive-image img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

/* Position the interactive image container relative to place hotspots correctly */
.interactive-image {
    position: relative;
    width: 100%; /* Ensure the container spans the full width */
}

/* Ensure hotspots are positioned correctly over the image */
.hotspot {
    position: absolute;
    cursor: pointer;
    /* Define size and styles for hotspots */
    width: 30px; /* Example size */
    height: 30px; /* Example size */
	background-color: rgba(7, 33, 96, 0.8);
	border-radius: 50%;
	border-color: #ffffff;
	border-width: 1px;
	border-style: solid;
	
}

/* Style the video elements to fill 100% width of the viewport */
.video-popup {

    position: fixed; /* Use fixed or absolute positioning as needed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Take up full viewport height */
    background-color: black; /* Optional: for better visibility of videos */
    z-index: 1000; /* Ensure the video is above other content */
    justify-content: center; /* Center the video horizontally */
    align-items: center; /* Center the video vertically */
    display: flex; /* Use flexbox to center the video */
    display: none; /* Hide by default */
}

.video-popup video {
    width: 100%; /* Make the video fill the container's width */
    max-height: 100vh; /* Ensure the video is not taller than the viewport */
}

.modal {
    display: none;
    position: fixed;
    z-index: 10000; /* Updated z-index */
    left: 0;
    top: 0;
    width: 100%;
/*    height: 100%;*/
    overflow: hidden;
/*    background-color: rgba(0,0,0,0.4);*/ /* Dimmed background */
    transition: opacity 0.5s linear; /* Smooth transition for opacity */

}

.modal-content {
    background-color: #000000;
    margin: 10% auto; /* Centering modal content vertically a bit higher */
    padding: 0px;
    border: 0px solid #888;
    width: 60%; /* Limiting width */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Adding some shadow for better visibility */
    position: relative;    
    line-height: 0;    
}

.modal-content video {
    width: 100%; /* Video takes up the full width of the modal content */
    height: auto; /* Maintain aspect ratio */
    margin: 0;
    padding: 0;    
}

.close {
    color: #ffffff;
    float: right;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    right: -34px;
	top: 6px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}