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

h1 {
     margin-bottom: 5px;
     font-family: "Sonsie One", "Verdana";
     font-size: 18px;
}

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

.subSectionNav {
     background-color:  transparent;
	 border-spacing: 10px;
	 border-radius: 20px;
	 border-width: 3px;
	 border-style: solid;
	 border-color: gray gray black gray;
	 font-family: "Verdana";
	 font-size: 18px;
	 font-weight: bold;
	 margin-left: 5px;
	 line-height: 10px;
	 text-decoration: none;
	 text-align: center;
	 opacity: 0.8;
	 z-index: 7;
}

.subSectionNav2 {
	 border-spacing: 10px 10px;
	 border-radius: 10px;
	 padding: 2px;  
	 font-family: "Sonsie One", "Verdana";
	 font-weight: bold;
	 font-size: 15px;
	 margin-left: 5px;
	 margin-right: 5px;
	 line-height: 50px;
	 text-decoration: none;
	 text-align: center;
	 opacity: 0.8;
	 z-index: 6;
}

.subSectionNav2 a:link {
	color: black;
}
.subSectionNav2 a:visited {
	color: #4E7D19;
}
.subSectionNav2 a:hover {
	color: whitesmoke;
} 

.subSectionNav3 {
	 border-spacing: 10px 10px;
	 font-family: "Verdana";
	 font-weight: bold;
	 font-size: 25px;
	 margin-left: 5px;
	 line-height: 50px;
	 text-decoration: none;
	 text-align: left;
	 opacity: 0.8;
	 	 z-index: 6;
}

.subSectionNav3 a:link {
	color: black;
}
.subSectionNav3 a:visited {
	color: #4E7D19;
}
.subSectionNav3 a:hover {
	color: whitesmoke;
} 

middle {
	width: 60%;
	max-width: 455px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-spacing: 10px;
    border-radius: 20px;
	border-width: 3px;
	text-align: center;
    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: #4E7D19;
     border: 5px gray solid;
	 opacity: 0.8;
	 text-align: center;
	 z-index: 4;
}
p {
    color: black;
	font-family: arial;
	font-weight: 500;
    font-size: 100%;
    text-align: justify;
    text-justify: inter-word;
}
p1  {
    color: white;
    font-family: arial;
	font-weight: 500;
    font-size: 150%;	
}

.nav3 {
     margin-left: 10px;
     margin-right: 10px;
     text-align: center;	
}

.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;
 }
.sectionOne {

}
.video-container {
  position: relative;
  padding-bottom: 60.25%;
  padding-top: 5px;
  margin-top: 100px;
  margin-bottom 100px;
  height: 0;
  overflow: hidden;
  width: 70%;
  height: 70%;
  margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sectionFrame {
	 margin-left: 5px;
	 background-color: transparent;
	 background-size: cover;
	 border-style: dotted;
	 align-content: center;
	 opacity: 0.9;
}
.sectionTwo {
     margin-left: 5px;
	 background-color: lightgray;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
	 z-index: 4;
}
.sectionTwoClear {
	 margin-left: 5px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
	 z-index: 4;
}
.sectionTwoImage {
	 margin-left: 5px;  
	 font-size: 20px;
	 background-color: transparent;
	 background-size: cover;
	 height: 80px;
	 opacity: 0.9;
	 z-index: 4;
}
.sectionTwoImage img {
    max-width: 100%;
	background-size: cover;
	float: both;
	z-index: 4;
}
.GreenBackGround {
	 border-radius: 20px;
     background-color:  #4E7D19;
	 background-size: cover;
	 font-size: 20px;
	 height: 80px;
	 opacity: 0.9;
	 color: whitesmoke;
	 text-align: center;
	 z-index: 4;
}

/* Iframe parameters */
iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

/* Dropdown Button */
.dropbtn {
  position: fixed;
  right: 0;
  margin-right: 20px;
  margin-top: 8px;
  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;
  right: 0;
  position: fixed;
  margin-top: 30px;
  margin-right: 5px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  font-size: 15px;
  background-color: #2980B9;
  background-image: url('la-page.jpg');
  min-width: 200px;
  border-radius: 20px;
  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: 12px 16px;
  text-decoration: none;
  display: block;
}

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

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