html,body {
     height: 100%;
	 border: black;
	 border-spacing: 0px;
 	 background-size: cover; 
	 background-repeat: no-repeat;
	 background-color: white;
/*	 background-image: url(photo-1457537227909-08f41319e53a.jpg); */
}

h1 {
     color: black;
     background-color: transparent;
/*   background-size: cover; */
     border-radius: 10px;
     margin-left: 5px;	 
 	 font-weight: 600;
     font-size: 120%;
     font-family: "Sonsie One", "cursive";
     text-align: center;
     opacity: 0.8;
}

h2 {
     background-color: #6495ED;
     color:  black;
     border-radius: 10px;
     padding: 3px;
	 border-style: solid;
	 font-family: "El Messiri", "cursive";
 	 font-weight: 500;
 	 font-size: 14px;
     margin-bottom: 5px;
     margin-left: 5px;
     margin-right: 5px;
}

h3 {
     color: black;
 	 font-weight: 300;
     font-size: 100%;
     font-family: "Sonsie One", "cursive";
}


h4 {
     position: fixed;
     border-radius: 5px;
     margin-top: 20px;
     font-weight: 500;
 	 font-size: 15px;
 	 background-color: white;
     background-size: cover;
     text-align: center;
     opacity: 1.0;
     z-index: 8;
     
}

h6, p {
     margin-bottom: 20px;
}


h5 {
     color: black;
     background-color: transparent;
     background-size: cover; 
     border-radius: 1px;
     margin-left: 5px;	 
     position: fixed; 
 	 font-weight: 600;
     font-size: 90%;
     font-family: "Sonsie One", "cursive";
     text-align: center;
     z-index: 1;
}


.nav3 {
     margin-left: 5px;
     text-align: center;	
}
.subSectionNav {
     background-image: url('cp-green.jpg');
	 border-spacing: 5px 5px; 
	 border-radius: 20px;
	 border-style: solid;
     border-color: gray gray black gray;
	 font-family:  'Verdana', 'sans-serif';
	 font-size: 10px;
	 margin-left: 5px;
	 line-height: 30px;
	 text-decoration: none;
	 text-align: center;
	 padding-left: 10px;
	 opacity: 0.8;
}
.subSectionNav a:link {
	color: black;
}
.subSectionNav a:visited {
	color: whitesmoke;
}
.subSectionNav a:hover {
	color:darkslategray;
} 

#middle {
	 font-family:  'Verdana', 'sans-serif';
	 font-size: 10px;
	 border-radius: 10px;
	 background-size: cover;
	 text-align: center;
	 padding-right: 10px;
	 display: block;
	 margin-left: 5px;
	 margin-right: 10px;
	 opacity: 0.8;
}

@keyframes cf3FadeInOut {
  0% {
  opacity:1;
 }
 55% {
 opacity:1;
 }
 65% {
 opacity:0;
 }
 100% {
 opacity:0;
 }
}

#middle img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#middle img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
animation-direction: alternate;
}

#hmiddle img.top:hover {
  opacity:0;
}

p  {
    color: black;
 	font-weight: 500;
    font-size: 120%;
    font-family: "El Messiri", "cursive";
    margin-left: 5px;	
}

p1 {
    color: black;
	font-family: arial;
	font-weight: 500;
    font-size: 120%;
    font-family: "Noto Serif JP", "El Messiri", "san-serif";
    text-align: justify;	
}

p2  {
    color: black;
 	font-weight: 300;
    font-size: 85%;
    font-family: "El Messiri", "cursive";
}

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

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

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

.GreenBackGround {
     background-color:  #DFEBE3;
	 background-size: cover;
	 border-radius: 10px;
	 font-size: 15px;
	 color: black;
	 text-align: left;
	 padding-left: 10px;
}

.GrayBackGround {
     background-color: #6495ED;
	 background-size: cover;
	 border-radius: 10px;
	 font-size: 15px;
	 color: black;
	 text-align: left;
	 padding-left: 10px;
}

.SpecialGrayBackGround {
     background-color: #6495ED;
	 background-size: cover;
	 border-radius: 10px;
	 font-size: 15px;
	 color: black;
	 text-align: center;
	 padding-left: 10px;
}

/* Dropdown Button */
.dropbtn {
  position: fixed;
/*  background-image: url('cp-menu-icon.png'); */
  background-repeat: no-repeat;
  background-size: auto;
  background-color: transparent;
  color: black;
  border-style: none;
/*  border-spacing: 10px 10px; */ 
  border-radius: 20px;
/*  height: 38px; */
  width: 25px; 
/*  margin-top: 24px; */
  font-size: 18px;
  font-weight: bold;
  font-family: "Sonsie One", "cursive";
  cursor: pointer;
  text-align: left;
  opacity: 0.8;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
 /* background-color: #6495ED; */
  color: black;
}

/* 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;
  position: fixed;
  margin-top: 30px;
  font-family: "El Messiri", "cursive";
  font-weight: bold;
  background-color: #6495ED;
  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: white; color: #6495ED;}

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