/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


/* Images */
.TopTable:before,
.TopTable:after {
    content: " ";
    display: table;
}
.TopTable:after {
    clear: both;
}
.TopTable {
    *zoom: 1;
}

/* Basic Styles */
body {
	background-color: #ffffff;
}
nav {
	height: 40px;
	width: 100%;
	background: Black;
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid ffb380;
}

nav ul {
	padding: 0;
	margin: 0 auto;
	width: 1000px;
	height: 40px;
}
nav li {
	display: inline;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 150px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 2px 1px 0px 	Black;
}
nav li a {
	border-right: 1px solid ffb380;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
  color: Black;
  background-color: 		mediumseagreen;
  text-shadow: 0px 0px 0px 	mediumseagreen;
}
nav a#pull {
  display: none;
}
nav a#pull:hover {
  background-color: 		mediumseagreen;
}


* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}

.resize {
  max-width:10%;
  max-height:10%;
}

.row:after {
    content: "";
    clear: both;
    display: table;
}




[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}

/*Styles for screen 800px and lower*/
@media screen and (max-width: 900px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: 	Black;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #fff;
	}
}

.wrapper { 
  overflow:hidden;
}

.wrapper div {
   min-height: 150px;
   padding: 10px;
}



#one {
  background-color: white;
  float:left; 
  margin-right:20px;
  width:300px;
  max-height:350px;
  
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:1px;
  min-height:auto;
}

#three { 
  background-color: white;
  overflow:hidden;
  text-align: left;  
  font-size: 60px;
  font-weight: bold;
  color: #404040 ;
  font-family: Verdana,Tahoma, sans-serif;
  display: block;
  
}

#one2 {
  background-color: white;
  float:left; 
  margin-right:20px;
  width:400px;
  max-height:350px;
  
}

.wrapper2 { 
  overflow:hidden;
  
}

.wrapper2 div {
   min-height: 100px;
   padding: 10px;
}

.state { 
  overflow:hidden;
}

.state div {
   padding: 1px;
   color: black;
   font-size: 1px;
   font-weight: bold;
   margin-left: 5px;
   margin-right: 5px;
   vertical-align: middle;
}

#mission {
 background-color: white;
  float:left; 
  margin-right:20px;
  margin-left:20px;
  max-width:800px;
  font-size: 13px;
   vertical-align: middle;
}
#state1 {
  background-color: white;
   float:left; 
   margin-right:20px;
   margin-left:20px;
   max-width:800px;
   font-size: 18px;
    vertical-align: middle;
 }

.focus { 
  overflow:hidden;
}

.focus div {
   padding: 1px;
   border: 3px solid WHITE;
   
   font-size: 25px;
   font-weight: bold;
    margin-right:2%;
   margin-left: 2%;
   vertical-align: middle;
}

#fone {
 background-color: 	Black;
  float:left; 
  width:47%;
  text-align: center;
  color: mediumseagreen;
}
#ftwo { 
    background-color: 	Black;
  overflow:hidden;
  width:47%;
  min-height:auto;
    text-align: center;
	color: mediumseagreen;
}

.focus2 { 
  overflow:hidden;
}

.focus2 div {
   padding: 1px;
   border: 3px solid WHITE;
   font-size: 25px;
   font-weight: bold;
    margin-right:2%;
   margin-left: 2%;
   vertical-align: middle;
}

#fone2 {
 background-color: mediumseagreen;
  float:left; 
  width:47%;
  text-align: center;
  color: 	Black;
  font-weight: bold
}
#ftwo2 { 
    background-color: mediumseagreen;
  overflow:hidden;
  width:47%;
  min-height:auto;
    text-align: center;
	color: 	Black;
}

/*For Information Pages*/

.infowrap { 
  overflow:hidden;
   }

.infowrap div {
   padding: 1px;
   border: 3px solid WHITE;
   display: flex;   
   font-size: 25px;
    margin-right:2%;
   margin-left: 2%;
   vertical-align: middle;
   
}
 



#foneinfo {
 background-color: 	mediumseagreen;
  float:left; 
  font-weight: bold;
  width:47%;
  text-align: left;
  color: mediumseagreen;
    
}
#ftwoinfo { 
    background-color: mediumseagreen;
  overflow:hidden;
  font-weight: bold;
  width:47%;
  min-height:auto;
    text-align: left;
	color: 	Black;

    
}

.list {
  display: flex;
  flex-wrap: wrap;
}
#l2
{
 background-color: 	Black;
  float:left; 
  font-weight: bold;
  text-align: left;
  color: mediumseagreen;
}
#l3
{
  background-color: mediumseagreen;
  overflow:hidden;
  font-weight: bold;
    text-align: left;
	color: 	Black;
}


@media all and (min-width: 40em) {
  .l2 {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .l2 {
    width: 33.33%;
  }
}


html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}

.footer {
    background-color:firebrick;
    color: #ffffff;
    text-align: center;
    font-size: 26px;
    padding: 0px;
	margin-top: 5px
}
#foot { 
  overflow:hidden;
  min-height:auto;
    text-align: center;
}

/*Win Phone and Below*/
@media only screen and (min-width:1px) and (max-width:768px)  {
     #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;  
  }
    #one2 { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;  
  }
 #fone {width: auto; float: none;text-align: left;font-size: 17px;}
  #ftwo {width: auto; float: none; text-align: left;font-size: 17px; background-color: mediumseagreen; color:Black}
   #fone2 {width: auto; float: none;text-align: left;font-size: 17px; background-color: Black; color: mediumseagreen}
  #ftwo2 {width: auto; float: none; text-align: left;font-size: 13px; color: Black}
   #state1 {width: auto; float: none; text-align: left;font-size: 17px; margin-left:0px;}
   #mission {width: auto; float: none; text-align: left;font-size: 13px;}
  #foot   {width: auto; float: none; font-size: 16px;}

   #foneinfo {width: auto; float: none;text-align: left;font-size: 17px;}
  #ftwoinfo {width: auto; float: none; text-align: left;font-size: 17px; background-color: mediumseagreen; color:Black}
  #three {margin-left: 20px;}
}




@media only screen and (min-width:769px) and (max-width:1024px) {
     #one { 
    float: left;
    margin-right:0;
    width:50%;
    border:0;  
    margin-left: 20px
  }
   #one2 { 
    float: left;
    margin-right:0;
    width:50%;
    border:0;  
  }
   #two { 
    float: none;
    margin-right:0;
    border:0;  
  }
	.focus{display: block}
    .photosize {width: 45%;float: right;}
    .photosize2 {width: 80%;float: left;}
		 #fone {font-size: 17px; width: 46%}
		  #fone2 {font-size: 17px; width: 46%}
  #ftwo {width: 46%; float: right; font-size: 17px;}
  #ftwo2 {width: 46%; float: right; font-size: 17px;}
	.state1 {width: auto; float: right;}
  #foneinfo {font-size: 17px; width: 46%; flex:1;}
  #ftwoinfo {width: 46%; float: right; font-size: 17px;}
   #three {margin-left: 50px; margin-top: 50px; }
    
}

/*wxga tablet to ultrabook*/
@media only screen and (min-width:1025px) and (max-width:1366px) {
      #one { 
    width: 550px;
    margin-left: 20px
  }
    #one2 { 
    width: 400px;
  }
     #two { 
    float: none;
    margin-right:0;
    border:0;  
  }
    .photosize {width: 35%;float:left;}
    .photosize2 {width: 80%;float: left;}
		.ftwo {width: auto; float: right;}
			.ftwo2 {width: auto; float: right;}
	.state1 {width: auto; float: right;}
    		 #fone {font-size: 20px; width: 46%}
		  #fone2 {font-size: 20px; width: 46%}
  #ftwo {width: 46%; float: right; font-size: 20px;}
  #ftwo2 {width: 46%; float: right; font-size: 20px;}

#foneinfo {font-size: 20px; width: 46%}
   #ftwoinfo {width: 46%; float: right; font-size: 20px;}
   #three {margin-top: 60px; margin-left: 100px;}
    
}

@media only screen and (min-width:1367px) and (max-width:4000px) {
    .photosize {width: 35%;float: left;}
    .photosize2 {width: 80%;float: left;}
		.ftwo {width: auto; float: right;}
			.ftwo2 {width: auto; float: right;}
	.state1 {width: auto; float: right;}
    		 #fone {font-size: 20px; width: 46%}
		  #fone2 {font-size: 20px; width: 46%}
  #ftwo {width: 46%; float: right; font-size: 20px;}
  #ftwo2 {width: 46%; float: right; font-size: 20px;}
   #two { 
    float: none;
    margin-right:50px;
    border:0; 
  }
  #ftwoinfo {width: 46%; float: right; font-size: 20px;}
  #foneinfo {font-size: 20px; width: 46%;}
  #three {margin-top: 70px; margin-left: 1000px;}
  
    
}