html,body {
     height: 100%;
	 border: black;
	 border-spacing: 0px;
	 background-color: #C8E6E8;
}

h1 {
     margin-bottom: 5px;
     background-color: transparent;
     font-size: 20px;
     text-align: center;
}


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

.subSectionNav {
     background-color:  #970748;
	 border-spacing: 5px 5px;
	 font-family: "Verdana";
	 font-size: 10px;
	 margin-left: 0px;
	 line-height: 40px;
	 text-decoration: none;
	 text-align: center;
	 opacity: 0.7;
}
.subSectionNav a:link {
	color: black;
}
.subSectionNav a:visited {
	color: white;
}
.subSectionNav a:hover {
	color: darkgray;
} 

middle {
	width: 60%;
	max-width: 455px;
	padding-top: 0px;
	padding-bottom: 0px;
	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;
     color: black;
	 opacity: 0.9;
	 text-align: center;
}
p {
    color: black;
	font-family: arial;
	font-weight: 500;
    font-size: 140%;
}
p1  {
    color: white;
    font-family: arial;
	font-weight: 500;
    font-size: 80%;	
}

.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: 100px;
     height: align-content;
	 margin-left: 0px;
     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: 0px;
     background-color: lightgray;
	 opacity: 0.9;
	 width: 60%;
	 max-width: 455px;
	 min-width: 455px;
 }
.sectionOne {

}
.sectionTwo {
     margin-left: 0px;
	 background-color: lightgray;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
}
.sectionTwoClear {
	 margin-left: 0px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
}
.sectionTwoImage {
	 margin-left: 0px;  
	 font-size: 20px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
}
.sectionTwoImage img {
    max-width: 100%;
	background-size: cover;
	float: both;
}
.subSectionButton {
     height: align-content;
	 text-align: left;
	 color: black;
     background-color: #F6E9E9;
	 opacity: 0.8;
}
.subSectionButton a:link {
    text-decoration: none;
	color: white;
}
.subSectionButton a:visited {
    text-decoration: none;
	color: white;
}
.subSectionButton:hover {
    text-decoration: none;
	color: black;
} 
.WhiteBackJust {
     margin-left: 5px;
     background-color:  black;
     background-size: cover;
     border-radius: 20px; 
	 font-size: 15px;
	 opacity: 0.7;
	 color: white;
     text-align: justify;
}
.WhiteBackGround {
     margin-left: 5px;
     border-radius: 20px;
     background-color:  White;
	 background-size: cover;
	 font-size: 20px;
	 opacity: 0.9;
	 text-align: center;
}
.BlueBackJust {
     margin-left: 5px;
     border-radius: 20px;
     background-color:  #C5BEBC;
     background-size: cover;
	 font-size: 18px;
	 opacity: 0.7;
	 color: black;
}
.Motion {
     width: 150px;
	 height 150px;
	 background-image: health-life.jpg;
	 position: absolute;
	 top: 0;
	-webkit-transition: top 2s;
	-moz-transition: top 2s;
	-o-transition: top 2s;
}
.Motion a:hover {
	 top: 100px;
	-webkit-transition: top 0.4s;
	-moz-transition: top .04s;
	-o-transition: top .04s;
}

/* Dropdown Button */
.dropbtn {
  position: fixed;
  left: 0;
  margin-left: 15px;
  margin-right: 20px;
  margin-top: 55px;
  background-repeat: no-repeat;
  background-size: auto;
  background-color: transparent;
  border-style: none;
  border-radius: 10px;
  height: 35px;
  width: 35px;
  color: black;
  padding: 2px;
  font-size: 18px;
  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: 8;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  left: 0;
  position: fixed;
  margin-top: 85px;
  margin-left: 10px;
  border-radius: 20px;
  border-width: 2px;
  border-style: solid;
  font-size: 15px;
  background-color: black;
  background-size: cover;
  min-width: 140px;
  border-radius: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  opacity: 0.9;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  border-radius: 20px;
  display: block;
}

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

/* 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;}