@charset "utf-8";
/* CSS Document */

body { 

	 
	width: 100%;
	margin:auto;

	
	/*places 5% space on left/ right side of page*/
	
	padding: 0px;
	/*takes out extra spaces*/

}


header{
	background-image:url("../Images/bannerheader.jpg");
	background-position: center;
	background-size:cover;
}



#logo{
  display: block;
  margin: 0 auto;
 max-width: 300px;

 width:100%;

}


img{
	display: block;
    margin: 0 auto;
	
}

/*navbar*/



.toggle,        /*to hide menu button*/
[id^=drop] {
	display: none;
}

nav{
	margin: 0;
	padding: 0;
	background-color: #007acc;
	
}

nav ul{   /* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
	
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;  /*made this change to make center*/
 
}   

nav ul li{  /* Positioning the navigation items inline */
	margin: 0 auto;
	display:inline-block;
	float: none;
	position: relative;

} 

nav li a {
  display: inline-block;
  color: white;
  font-family: 'Arial';
  font-size: 22px;

  text-align: center;
  padding: 14px 16px;
  text-decoration: none
}

nav a{
    display: block;
	color: black;
	font-family: 'Arial';
	
}

nav ul li ul li:hover{   
	color: #007acc;
}

nav a:hover{  /* Background color change on Hover */
	background-color: white; /*transition effect, fade to white*/
	transition-duration: 0.6s;
	color: #007acc;
	
}

nav ul ul{
	display: none; 
	position: absolute;    /* Hide Dropdowns by Default
 * and giving it a position of absolute */	
}

nav ul li:hover>ul{ /* Display Dropdowns on Hover */
	display:list-item; /*positions the dropdown under each main li*/
}

nav ul ul li{
	width: 200px;
	float: none;
	display:block;
	position: relative; /*makes them not bunch up in one position*/
	
 	background-color: white;
  	min-width: 160px;
 	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	z-index: 1;
  	cursor: pointer;	
}

nav ul ul li a{
 color: black;     
 display: block;
  text-align:left;    
}

/*end of navbar*/






/*responsive navbar*/

@media (max-width:800px){
	
	nav{
		margin: 0;
	}
	
	/* Hide the navigation menu by default */
	.navbar{
		display: none;
	}
	
	.toggle {
		display: block;
		background-color: #007acc;
		padding:14px 20px;	
		color:white;
		font-size:22px;
		font-family: 'Arial';
		text-decoration:none;
		border:none;
}

	.toggle:hover{
		background: #007acc;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}
	
	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		
		}
	
	nav a:hover,
 	nav ul ul ul a {
		background-color: #84CDFF;
		color: black;
		transition-duration: 0.2s;	
	}

	nav ul li ul li .toggle,
	nav ul ul a {
		background-color:#84CDFF ; 
		
	}
	
		/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		
		/* has to be the same number as the "line-height" of "nav a" */
	}
	  
	/*drop down menu responsive allignment*/
	nav ul ul li {
		display: block;
		width: 100%;
		
	}
	
	
}
	
@media (max-width:320px){
	nav ul li{
		display: block;
		width: 94%;
	}
}	
	

  
.titlepage{
	width: 80%;
	height: 95px;
	
	text-align: center;
}

h1{
	font-style: italic;
	font-family: 'Oswald';
	text-align: center;
	color: #007acc; 
	font-size: 45px;

}
	
	

.writeup{
    margin-left: auto;
    margin-right: auto;
    font-family: 'Arial';
    text-align: center;
    background-color: #F1FCFC;
    width: 70%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-top: 5px;
}


h5{
	font-family: 'Arial';
}



.responsive{
	
	
	max-width: 500px;
	height: auto;
	
}


.footer{
	width: 100%;
	height:50px;
	padding-top: 20px;
   background-color:#007acc;
	font-family: 'Oswald';
	color: white;	

}
	
#footlogo{
	float: right;
	height: 45px;
	width: 45px;
	margin-right: 20px;
	padding-bottom: 5px;
}

@media (max-width:320px){
	
	#sasb{
		height: 180px;
	}

}



/* examp*/