/* Background Images */

#about{
	color: black;	
	float: left;
	top: 0px;
	left: 0px;
	width: 15%;	
	height: 100%;  
	z-index: -100;
}

#back{
	color: #2F4F4F;	
	float: left;
	top: 0px;
	left: 0px;
	width: 85%;	
	height: 100%;  
	z-index: -100;
	}

#back_img{
	position: fixed;
	top: 0px;
	left: 0px;	
	width:100%; 
	height:100%;  
	object-fit:cover; 
	transition: opacity 1s ease-in-out;	
	z-index: -99;
}

#dive_img{
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%; 
	height:100%;  
	object-fit:cover; 
	transition: opacity .5s ease-in-out;
	z-index: -98;
	opacity: 0;
}

#tech_img{
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%; 
	height:100%;  
	object-fit:cover; 
	transition: opacity .5s ease-in-out;
	z-index: -98;
	opacity: 0;
}

#coding_img{
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%; 
	height:100%;  
	object-fit:cover; 
	transition: opacity .5s ease-in-out;
	z-index: -98;
	opacity: 0;
}

#asia_img{
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%; 
	height:100%;  
	object-fit:cover; 
	transition: opacity .5s ease-in-out;
	z-index: -98;
	opacity: 0;
}

#science_img{
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%; 
	height:100%;  
	object-fit:cover; 
	transition: opacity .5s ease-in-out;
	z-index: -98;
	opacity: 0;
}


/* Menu Header */

#head{
	border: 2.5px hidden rgba(10, 10, 60, 0.5);
	border-radius: 5px;  
	border-top-left-radius: 35px;
	border-top-right-radius: 35px;
	height:4vh;		
	width:98%;
	background:rgba(10, 10, 60, 0.5);
	float:left;  
	text-decoration: none;
	margin: 0% 1% 0% 1%;
	z-index: 100;
	}

#head_schlolaut{
	overflow:hidden;
	border: hidden;
	border-radius: 5px;
	border-top-left-radius: 35px;
	height:100%;
	width:80%;
	background:rgba(10, 10, 60, 0.5);
	float:left;  
	text-decoration: none;
	vertical-align: middle; 	
	margin: 0% 0% 0% 0%;	
  	}

span.head_schlolaut_text{
	color:lightsteelblue;
	font: normal small-caps normal 3.5vh impact;
	letter-spacing: 0.04em;
	text-decoration: none;
	position: relative;	
	left: 20px;
	transition: font-size .15s;
	}

#head_schlolaut:hover{
	background:rgba(10, 60, 10, .5) !important;
	}  

#head_info_button{
	overflow:hidden;
	border: hidden;
	border-radius: 5px;
	border-top-right-radius: 35px;
	height:100%;
	width:20%;
	background:rgba(20, 20, 100, 0.5);
	float:left;  
	text-decoration: none;
	margin: 0% 0% 0% 0%;
	text-align: center;
	vertical-align: middle; 	
	}
  
span.head_info_button_text{
	color:lightsteelblue;
	font: normal small-caps normal 3.5vh impact;
	text-decoration: none;
	position: relative;	
	transition: font-size .15s;
	}

#head_info_button:hover{
	background:rgba(10, 60, 10, .5) !important;
	/* background:rgba(200,0,0,0.5) !important; */
	}  


/* MainMenu */

#menu{
	border: 2.5px hidden rgba(170,100,100,0.9);
	border-radius: 5px;  
	height:4vh;	
	width:98%;
	background:rgba(210,210,240,0.5);
	float:left;  
	text-decoration: none;
	margin: 0% 1% 0%;
	}
  
.menu_button{
	overflow:hidden;
	border: hidden rgba(170,150,150,0.9);
	border-radius: 5px;  
	height:100%;
	width:19.8%;
	background:rgba(220,220,240,0.7);
	float:left;  
	text-decoration: none;
	margin: 0% 0.1% 0% 0.1%;
	padding: 0%;
	text-align: center;
	vertical-align: middle; 	
	}
  
span.menu_button_text{
	color:rgba(10, 10, 60, .8);
	font: normal small-caps normal 3.5vh impact;
	text-decoration: none;  
	position: relative;
	transition: font-size .45s;
	}

.menu_button:hover{
	background:rgba(200,220,200,0.5) !important;
	}


/* Sub-Menus */

.submenu{
	border: hidden rgba(170,100,100,0.9);
	border-radius: 5px;  	
	height:0vh;
	width:98%;
	background:rgba(210,210,240,0.5);
	float:left;  
	text-decoration: none;
	margin: .05% 1% 0%;
	transition: height .75s;	
	}

.submenu_button{
	overflow:hidden;
	border: hidden rgba(170,150,150,0.9);
	border-radius: 5px;  
	height:100%;
	width:33.133333%;
	background:rgba(255,255,255,0.5);
	float:left;  
	text-decoration: none;
	margin: 0% 0.1% 0%;
	padding: 0%;
	text-align: center;
	vertical-align: middle;	
	}

.submenu_button:hover{
	background:rgba(190,220,190,0.5) !important;
	}  

#submenu_notyet_button{
	overflow:hidden;
	border: hidden rgba(170,150,150,0.9);
	border-radius: 5px;  
	height:100%;
	width:100%;
	background:rgba(255,255,255,0.5);
	float:left;  
	text-decoration: none;	
	padding: 0%;
	text-align: center;
	vertical-align: middle;
	cursor: no-drop;
	}


/* Responsive Design */

@media screen and (max-height: 700px), screen and (max-width: 800px)  {
	#head{
		height:25px;
		}
	span.head_schlolaut_text {
		font-size: 20px;
		}	
	span.head_info_button_text{
		font-size: 20px;
		}
	#menu{
		height:25px;
	}
	span.menu_button_text{
		font-size: 20px;
		}  
	}


#content{
		border: 0px hidden rgba(122, 108, 108, 1);
		border-radius: 5px;  
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		height:0px;	
		width:98%;
		background:rgba(250, 250, 250, 0.9);
		float:left;  
		text-decoration: none;
		margin: 0% 1% 0% 1%;
		z-index: 100;				
		padding: 0px;				
		transition: height .75s;		
		font-size: large;
		overflow: hidden;
		text-align: center;
	}