.overlay {
	/* Height & width depends on how you want to reveal the overlay (see JS) */    
	height: 0%;
	width: 100%;	
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	top: 0;
	left: 0;
	background-color: rgb(0,0,0); /* Black fallback color */
	background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide the overlay on reveal) */
}
.overlay a {
	padding: 4px;
	text-decoration: none;
	font-size: 36px;
	color: #818181;
	display: block; 
	transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
	color: #f1f1f1;
}

.overlay .closebtn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 60px;
}

.ovlContent {
	position: relative;
	top: 10%;
	width:100%;
	text-align: left;
	margin-top: 10px;
}

/* Inherit Overlay & Overlay Content*/
.overlay-List{
	width: 365px;
}
.ovlContent-List{
	width:100%;
}

/* Inherit Overlay & Overlay Content*/
.overlay-Media{
	width: 300px;
}
.ovlContent-Media{
	width:90%;
}

/* Inherit Overlay & Overlay Content*/
.overlay-Contact{
	width: 320px;
}
.ovlContent-Contact{
	width:90%;
}

/* Inherit Overlay & Overlay Content*/
.overlay-Follow{
	width: 300px;
}
.ovlContent-Follow{
	width:90%;
}

/* Inherit Overlay & Overlay Content*/
.overlay-About{
	width: 330px;
}
.ovlContent-About{
	width:90%;
}

/* overlayEvent (background)*********************/
.overlayEvent {   
	position: fixed;
	top: 0;
	left: 0;  
	height: 0%;
	width: 560px;
	z-index: 1;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.9);
	overflow-x: hidden;
	transition: 0.5s;
}
.overlay-Event{
	position: fixed;
	top: 0;
	left: 0;  
	height: 0%;
	width: 560px;
	z-index: 1;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.9);
	overflow-x: hidden;
	transition: 0.5s;
}
.ovlContent-Event{
	width:560px;
	height:504px;
}
.ovlContent-Event iframe{
	  transform: scale(1.00, 1.00);
	  width: 560px;
	  height: 504px;	
}


/* When the width of the screen is less than 500 pixels, change size attributes */
@media (max-width: 500px) {
	.overlay-List a {font-size: 20px}
	.overlay-List .closebtn {
		font-size: 40px;
		top: 10px;
		right: 10px;
	}

	.overlay-Media a {font-size: 20px}
	.overlay-Media .closebtn {
		font-size: 40px;
		top: 10px;
		right: 10px;
	}

	.overlay-Contact a {font-size: 20px}
	.overlay-Contact .closebtn {
		font-size: 40px;
		top: 10px;
		right: 10px;
	}

	.overlay-Follow a {font-size: 20px}
	.overlay-Follow .closebtn {
		font-size: 40px;
		top: 10px;
		right: 10px;
	}

	.overlay-About a {font-size: 20px} 
	.overlay-About .closebtn {
		font-size: 40px;
		top: 10px;
		right: 10px;
	}
	
	/* overlay-Event */
	.overlay-Event a {font-size: 20px}
	.overlay-Event .closebtn {
		font-size: 40px;
		top: 10px;
		right: 10px;
	}

	.overlay-Event{
		position: fixed;
		top: 0;
		left: 0;  
		height: 0%;
		width: 420px;
		z-index: 1;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.9);
		overflow-x: hidden;
		transition: 0.5s;
	}
	.ovlContent-Event{
		position: relative;
		top: 10%;  
		width:420px;
		height:400px;
	}
	.ovlContent-Event iframe{
		transform: scale(1.00, 1.00);
		width: 420px;
		height: 400px;		
		position: fixed;
		left: 2px;
		float: left;
	}
}

/*Dark Blue Scrollbars*/ 
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #04233F;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #101036;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #DD7510;
}