html,body {
     height: 100%;
	 border: black;
	 border-spacing: 10px;
	 background-color: lightgray;
	 max-width: 1000px;
}

h1, h2, h3, h4, h5, h6, p {
     margin-bottom: 20px;
}

.subSectionNav {
     background-color:  #FBFBFB; 
	 border-spacing: 5px 5px;
	 border-color: black gray; 
	 border-style: ridge;
	 border-radius: 10px;
	 font-family: "Verdana";
	 font-size: 10px;
	 margin-left: 5px;
	 margin-right: 10px;
	 margin-top: 5px;
	 margin-bottom: 5px;
	 line-height: 20px;
	 text-decoration: none;
	 text-align: center;
	 position: fixed;
	 opacity: 0.9;
	 z-index: 8;
}

.subSectionNav a:link {
	color: whitesmoke;
}

.subSectionNav a:visited {
	color: #95A4EF;
}

.subSectionNav a:hover {
	color: #BCBCBC;
} 

.subSectionNav2 {
     background-color:  #FBFBFB; 
	 border-spacing: 5px 5px;
	 border-color: black gray; 
	 border-style: ridge;
	 border-radius: 10px;
	 font-family: "Verdana";
	 font-size: 10px;
	 margin-left: 5px;
	 margin-right: 2px;
	 margin-top: 5px;
	 margin-bottom: 5px;
	 line-height: 20px;
	 text-decoration: none;
	 text-align: center;
	 position: relative;
	 opacity: 0.9;
	 z-index: 8;
}

.subSectionNav2 a:link {
	color: whitesmoke;
}

.subSectionNav2 a:visited {
	color: #95A4EF;
}

.subSectionNav2 a:hover {
	color: #BCBCBC;
} 

middle {
	width: 60%;
	max-width: 455px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
    vertical-align: middle;
	color: black;
    font-family: 'Arial', 'sans-serif';
	clear: left;
}

footer {
     position: relative;
     width: 100%;
	 height: align-content;
	 font-size: 50px;
     background-color: #0d3e66;
	 opacity: 0.8;
	 text-align: center;
}

p {
    color: black;
	font-family: arial;
	font-weight: 500;
    font-size: 140%;
}

p1  {
    color: black;
	font-weight: 500;
    font-size: 150%;	
}

p2  {
    /* color: #8A9A5B; */
    color: #0d3e66;
    background-color: white;
    font-family: 'Impact';
    font-weight: 100;
    opacity: 0.5;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

.sect {
     height:align-content;
	 width: align-content;
   	 background-color: gainsboro;
	 background-image: inherit;
	 max-width: 100%;
}

.subSection {
	/* font-family:"Brush Script MT", cursive; */
	/* font-family: "Lucida Calligraphy", cursive; */
	 font-family: "Arial";
	 font-size: 20px;
     height: align-content;
	 margin-left: 5px;
     background-color: lightgray;
	 opacity: 0.8;
	 width: 100%;
	 max-width: 1200px;
}

.subSection a:link {
	color: black;
}

.subSection a:visited {
	color: whitesmoke;
}

.subSection a:hover {
	color:darkslategray;
} 

.subSectionClear {
     height: align-content;
     background-color: transparent;
	 opacity: 0.8;
}

.subSectionNon {
	 height: align-content;
	 margin-left: 5px;
     background-color: lightgray;
	 opacity: 0.9;
	 width: 60%;
	 max-width: 455px;
	 min-width: 455px;
 }
 
.sectionZero {
     margin-left: 5px;
     margin-right: 5px;
     text-align: right;
	 background-color: lightgray;
	 background-size: cover;
	 height: 28px;
	 opacity: 0.9;
}

.sectionOne {
  
}

.sectionTwo {
     margin-left: 5px;
     margin-top: 130px;
	 background-color: transparent;
	 background-size: cover;	 
	 height: 80px;
	 position: relative;
	 opacity: 0.9;
}

.sectionTwo a:link {
	text-decoration: none;
}

.sectionTwo a:visited {
	text-decoration: none;
}

.sectionTwo a:hover {
	text-decoration: none;
} 

.sectionTwoClear {
	 margin-left: 5px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
}

.sectionTwoImage {
	 margin-left: 5px; 
	 font-size: 20px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
}

.sectionTwoImage img {
    max-width: 100%;
	background-size: cover;
	float: both;
}

.sectionThree {
     margin-left: 5px;
     margin-top: 55px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
}


.sectionThree a:link {
	text-decoration: none;
}

.sectionThree a:visited {
	text-decoration: none;
}

.sectionThree a:hover {
	text-decoration: none;
} 

.BlueBackGround {
     background-color: #0d3e66; 
	 background-size: cover;
	 border-radius: 10px;
	 font-size: 20px;
	 height: auto;
	 opacity: 0.9;
	 color: whitesmoke;
	 text-align: center;
}

/* Slide transition */

.wrapper {
    position: relative;
    overflow: hidden;
    width: 250px;
    height: 250px; 
    border: 0px solid black;
}

#slide {
    position: absolute;
    left: -250px;
    width: 250px;
    height: 250px;
    background: gray;
    transition: 1s;
}

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

/* Dropdown Button */
.dropbtn {
  position: fixed;
  left 0;
  margin-right: 25px;
  margin-top: -5px;
  margin-bottom: 5px;
  background-repeat: no-repeat;
  background-size: auto;
  background-color: transparent;
  border-style: none;
  border-radius: 5px;
  border: 1px solid #0d3e66;
  height: 30px;
  width: 30px;
  color: black;
  padding: 0px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}

/* Dropdown button on hover & focus */
.dropbtn:hover {
  background-color: transparent;
}

.dropbtn:focus {
  background-color: transparent;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
  text-align: left;
  z-index: 9;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  left: 0;
  position: fixed;
  margin-top: 10px;
  margin-left: 12px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  font-size: 15px;
  background-color:  white;
  /* background-image: url('purplecog.jpg'); */
  min-width: 105px;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: -1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: lightgray; color:black;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}