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

body{
	
	width: 98%;
	
	border: 2px solid green;
	
	background-color: white;	
	
	padding: 3px;
	
	}

.main{

	width: 95%;
	
	margin: 0 auto;
	
	border: 2px solid red;
	
	padding: 10px;

}

.header{
	
	border: 2px solid orange;
	
	padding: 2px;
	
	display: flex;
	
	justify-content: center;
	
	height: 200px;
}
.logo{
	
	border: 1px solid black;
	
	width: 19%;
	
	float: left;
}

.banner{
	
	border: 1px solid black;
	
	width: 79%;
	
	margin-left: 5px;

}

.horizontalNav{
	
	border: 1px solid black;
	margin-top: 4px;
	
	height: 50px;
}

.pageBody{
	
	border: 2px solid orange;
	
	margin-top: 4px;
	
	display: flex;
	
	justify-content: center;
	
	padding: 1px;
	
	height: 400px;
}

.leftNav{
	
	border: 1px solid black;
	width: 15%;
	float: left;
}

.mainContent{
	
	border: 1px solid black;
	width: 68%;
	margin-left: 4px;
}

.rightNav{
	
	border: 1px solid black;
	
	width: 15%;
	
	margin-left: 2px;
}
.footer{
	
	border: 1px solid black;
	margin-top: 4px;
	
	height: 100px;
}


  

/*main styles end here*/



@media only screen and (max-width: 992px){
	
	body{
		
		
	}
	
}

@media only screen and (max-width: 768px){
	
	body{
		
	}
	
	
}


@media only screen and (max-width: 480px){
	
	body{
		
		background-color: #EF5658;
	}
	
	.header{
	
	border: 2px solid green;
	
	padding: 2px;
	
	height: 200px;
		
	display: flex;
		
	flex-wrap: wrap;
		
}
	

.logo{
	
	border: 1px solid black;
	
	width: 100%;

}

.banner{
	
	border: 1px solid black;
	
	width: 100%;
	
	margin-top: 2px;
	
	margin-left: 0;
	
}
	
.pageBody{
	
	border: 2px solid green;
	
	margin-top: 4px;
	
	display: flex;
	
	justify-content: center;
	
	padding: 1px;
	
	height: 400px;
	
	flex-wrap: wrap;
}

	.leftNav{
	
	border: 1px solid black;
	width: 100%;

}

.mainContent{
	
	border: 1px solid black;
	
	width: 100%;
	
	margin-top: 2px;
	
	margin-left: 0;

}

.rightNav{
	
	border: 1px solid black;
	
	width: 100%;
	
	margin-top: 2px;
	
	margin-left: 0px;
}

		
}