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

body { 

	 
	width: 100%;
	margin:auto;

	
	/*places 5% space on left/ right side of page*/
	
	padding: 0;
	/*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%;
	}
}	
	



h1{
	font-style: italic;
	font-family: 'Oswald';
	text-align: center;
	color: #007acc; 
	font-size: 55px;
	margin-top: 15px;
	margin-bottom: 15px;

}
	




/*slider animation*/


#slider {
	overflow: hidden;
}
#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 15s slider infinite;
}

#slider figure img {
	width: 20%; /*divide by number of photos*/
	height: 500px;
	float: left;
	max-width: 100%; /*if want to keep responsiveness with a max height*/
	min-height: 100%;
	object-fit:cover;
	
}

@keyframes slider{
	0%{
		left: 0; /*the first image displayed (a total of 5 used so 100/5-1 = 25)*/ 
	}
	18%{ /*transition duration*/
		left: 0;
	}
	25%{
		left:-100%; /*slides by one whole image*/
	}
	38%{
		left:-100%;
	}
	50%{
		left:-200%; /*third image*/
	}
	63%{
		left:-200%;
	}
	75%{
		left:-300%; /*fourth image*/
	}
	88%{
		left:-300%;
	}
	100%{
		left:-400%;/*fifth image*/ /*would reset on the first slide once it reaches fifth slide (which is why the fifth and first image are the same to create a continuation effect)*/
	}
	
}





#content{
	width:90%;
	padding-left: 5%;
	padding-right: 5%;
	background-color: white;
	color: #007acc;
	text-align: center;
	font-family: 'Arial';
	font-size-adjust: auto;
	font-size: 20px;
	line-height: 110%;
	
	

}
h2{
    font-style: italic;
    font-family: 'Oswald';
    text-align: center;
    font-size: 50px;
}


#content2{
	background-color:#007acc;
	width: 100%;
	height: 450px;
	color: white;
	
	
	
}

#content2box1{
	width: 370px;
	height: 270px;
	float: left;
	margin-left: 15%;
	padding: 15px;
	
	/*text css*/
	color: white;
	text-align: center;
	font-family: 'Arial';
	font-size: 20px
}


#content2box2{
	
	width: 400px;
	height: 300px;
	color: #007acc;
	float: right;
	margin-right: 15%;
	
}













#content3{
	background-color: white;
	width: 100%;
	height: 450px;
	color: #007acc;
}

#content3box1{
	
	width: 400px;
	height: 300px;
	color: white;
	float: left;
	margin-left: 15%;
}

img #think{
	width: 400px;
	height: 300px;
}

#content3box2{
	width: 370px;
	height: 270px;
	float: right;
	margin-right: 15%;
	padding: 15px;
	
	/*text css*/
	color: #007acc;
	text-align: center;
	font-family: 'Arial';
	font-size: 20px
}








.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:1350px) and (min-width:1160px){}



@media (max-width:1160px) {
	#content2box1{
		margin-left: 5%;
		float:left;
				
	}
	#content2box2{
		margin-right: 5%;
		float:right;
	}
	#content3box1{
		margin-left: 5%;
		float:left;
				
	}
	#content3box2{
		margin-right: 5%;
		float:right;
	}
}




@media (max-width: 903px) {

	/*container*/
	
	#content2{
		width: 100%;
		height: 780px;
		
	}
	#content2box1{
		width: 400px;
		margin-bottom: 30px;
		float: none;   /*to make position stay still and centered*/
		margin: 0 auto;
		
  
		
	}
	
	#content2box2{
		width: 400px;
		float: none;   /*to make position stay still and centered*/
		margin: 0 auto;
	}
	
	
	
	
		#content3{
		width: 100%;
		height: 780px;
		
	}
	#content3box1{
		width: 400px;
		float: none;   /*to make position stay still and centered*/
		margin: 0 auto;
	}
	
	#content3box2{
		width: 400px;
		float: none;   /*to make position stay still and centered*/
		margin: 0 auto;
		
	}
}
	

@media (max-width:320px){
	
	#sasb{
		height: 180px;
	}
	
	/*image slider*/
	#slider figure img {
	width: 20%; /*divide by number of photos*/
	height: 200px;
	float: left;
	max-width: 100%;
	min-height: 100%;
	object-fit:cover;
	}

	#content2{
		width: 100%;
		height: 680px;
		
	}
	#content2box1{
		width: 260px;
		height: 250px;
		margin-bottom: 30px;
		float: left;   /*to make position stay still and centered*/
		margin-left: 7%;
		font-size: 16px;
  
		
	}
	
	#content2box2{
		width: 260px;
		height: 250px;
		float: left;   /*to make position stay still and centered*/
		margin-left: 7%;
	}
	
	#earth{
		max-height: 230px;
		max-width: 230px;
	}
	
	
		#content3{
		width: 100%;
		height: 680px;
		
	}
	#content3box1{
		width: 260px;
		height: 195px;
		margin-bottom: 20px;
		float: left;   /*to make position stay still and centered*/
		margin-left: 7%;	
		
	}
	
	#think{
		max-width: 250px;
		max-height: 194px;
	}
	
	#content3box2{
		width: 260px;
		height: 250px;
		float: left;   /*to make position stay still and centered*/
		margin-left: 7%;
		font-size: 16px;
	}
	
	.footer{
		font-size: 13px;
	}
	
	h2{
    font-size: 42px;
	}
	
	#content{
		font-size: 18px;
	}
	

}

/* examp*/