/* main.css */
/* Main screen -- fonts, color, width */
body{
	background-color: rgba(148, 160, 172, 0.2);
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
h1, h2, h3 {
text-align: center; 
text-decoration-color: rgb(5, 30, 55);
color: rgb(6, 94, 182);
}

/* Header */
header {
	display: flex;
	align-items: center;    
	/* background-color: rgba(119, 132, 227, 0.2); */
}

#bkgrnd{
	background-color: rgba(119, 132, 227, 0.2);
}

.topheader {			
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	margin-left: 20%;
} 

.main, header { 	  
    width: 80%;
	margin-right: auto;
	margin-left: auto;
    padding: 5px;
}

/* Navigation */
nav {
    /*width: 96%;float: right;display:block; */	
    /* display:block; margin:0 auto; position:relative; */
    padding: 2% 2%;	
	float: left;
	position:relative; 
	left:50%; 	
	}
	/*  horizontal navbar  */
	.hnavbar{        
		list-style:none;
		margin-bottom: 0;
		float:left;
		left:-50%;
        position:relative;        
		/*z-index:5;*/
		width: 100%;		   
	}
	.hnavbar li{
		float:left;
		margin-right:10px;
		margin-bottom:2px;
		position:relative;}
	.hnavbar a{
		display:flex;
		padding:5px;
		color:rgb(189, 198, 207);
	text-shadow: 1px 1px 1px #000002;
		background:rgb(19, 77, 194);
		text-decoration:none;
	box-shadow: -2px -2px 4px #000003 inset}


/* Sections -- images */
section.container5 {
    /*height: 285px;*/
    display: flex;
    align-items: center
}

section.container5 p {
    margin: 3px;
}

img {
    padding: 5px;
}

.imgRight{
	clear: both;
	float: right;
	margin: 5px;
	padding: 5px;
	vertical-align:text-top;
}

.imgLeft{
	clear: both;
	float: left;
	margin: 5px;
	padding: 5px;
	vertical-align:text-top;
}

#center{
	display: -webkit-flex;
	margin-left: auto;
	margin-right: auto;
	width: 544;
	height: 813; 
	border: 0;	
}
.textPosition{
	text-align: center;
}

/* Footers */
.footertext {   
    text-align : center;
    color: rgb(6, 94, 182);
	padding: 2% 0} 
	
.footertext a , .footertext  a:visited {
	color: rgb(6, 94, 182)}
	
/*  all and (max-width: 60rem) */
	@media only screen and (max-width: 600px){
		header , nav ,  .main ,  .hnavbar, .hnavbar li ul {
		width: 100% !important;
		display: block !important;
		padding:0 0% !important;
		margin: 0 0 !important;
		border: none;}

	header h1 {font-size: 20px;float: none; text-align:center;padding: 0 0 ;margin: 0 0}

	#center{
		display: -webkit-flex;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 */
	}	

	.topheader {			
		margin-left: 2%;
	} 
		
	.main h1{float: none; text-align: center}
	.hnavbar li , .hnavbar li ul li {
	/* By making the width 100% it forces the menu items to be stacked. */	
	width: 100%;  
	text-align: center;
	margin: 0 0;}
	/* height ?? */
	.hnavbar li a {
	padding: 2.5% 2.5% 5% 2.5%;
	/* Added 2 lines to center */
	width: 80%;
	height: 0.5em;
	margin: 0.5% auto;}
	.hnavbar li ul {
	z-index: 10}
	.hnavbar li li ul { margin: 0 0 0 10px;  }
	/*.hnavbar li aq , .hnavbar li ul li a{height:1em;}*/
	img imgRight imgLeft {
	float: none;
	display: block;
	max-width: 99%;
	margin: 0 auto}	

	.simple_box{
		margin:0 auto;
		}
		
		section.container5 {
			/*height: 285px;*/
			display: flex;
			align-items:none;
		}
	
	/* The img display: none !importatnl above wipped this out! -- Removed !important */
	.content_full img {
		display:block;
		}
}
		
		/* end media quiery */