body {
	
    max-width: 100%;
    overflow-x: hidden;
	height:100%;
	margin: 0 auto;
	padding: 0 auto;
}
html{
	font: bold 15px sans-serif;
}

.nav{
	border-bottom: 1px solid #e7e7e7;
	background-color: #f3f3f3;
	text-align: right;
	line-height: 70px;
	min-height: 70px;
}
.menu{
	margin: 0 10px 0 0;
}
.menu a{
	padding: 16px 18px;
	 
	clear: right;
	text-decoration: none;
	color: #666;
	margin: 0 2px;
	line-height: 70px;	
}




/*logo for desktop versions*/
.logo{
	
	padding-top: .8%;
	padding-left: 2%; 
	float: left;
	position: absolute;
	text-decoration: none !important;
}
.navlogo{
	border-bottom: 1px solid #e7e7e7;
	background-color: #f3f3f3;
 
	text-align: right;
	line-height: 70px;
	min-height: 70px;
	text-decoration: none;

}
.motto{
padding-left: 20%;
padding-right: 20%;
text-align: center;
}
a.active {
  color: white;
  background-color: #00853E;
}


a:hover:not(.active) {
	color:  #00853E;
	  font-weight:bold;
  text-decoration: none;
}
a {
    color: #00853E;
    text-decoration: none;
}

label {
	margin: 0 40px 0 0;
	font-size: 26px;
	line-height: 70px;
	display: none;
	width: 26px;
	float: right;
	
}
#toggle{
	display: none;
	
}
/* These are the classes under the categories page */
.category1{
	
	position: absolute; 
	top: 30%; 
	left: 20%; 
	height: 12.5%;
	width: 100%;

	text-decoration: none;

}
.category2{
	
	position: absolute; 
	top: 30%; 
	left: 45%; 
	height: 12.5%;
	width: 100%;

	text-decoration: none;

}
.category3{
	
	position: absolute; 
	top: 30%; 
	left: 70%; 
	height: 12.5%;
	width: 100%;
	text-decoration: none;

}
.category4{
	
	position: absolute;
	top: 55%;
	left: 20%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;

}
.category5{
	
	position: absolute;
	top: 55%;
	left: 45%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;

}

.category6{
	
	position: absolute;
	top: 55%;
	left: 70%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;


}
}
/* End Categories PAGE */
.loggedin{
position: absolute;
width: 100%;
left-padding: 70%;
}
.wrapper{
	position:absolute;
	width:100%;
	left: 50%;
	margin:0 auto;
}

a:link {
  text-decoration: none;
}


	
	

   
/*footer */
#sticky {
  width:100%;
  height:75px;
  padding-top: 10px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e7e7e7;
  line-height: 18px;
  color:black;
  font-weight:bold;
  font-size: 14px;
  text-align:center;
  position: absolute; /*Here's what sticks it*/
  bottom:0px;          /*to the bottom of the body/page*/
  left:0;            /*and to the left of the body/page.*/
}

p.centered{
 word-spacing: 45px;	
}
.left{
padding-left: 25%;
text-align:center;
float:left;
}
.right{
padding-right: 25%;
float:right;
text-align:center;
}
.centered{
text-align:center;
}
/*end of footer*/

@media only screen and (max-width: 500px){
/*Label is the hamburger for the mobile	*/	
	label {
		display: block;
		cursor: pointer;
		width: 100%;
	}
	
	/*Navigation Bar	*/
	.menu{
		text-align: center;
		width: 100%;
		display: none;
	}
	.menu a{
		display: block;
		border-bottom: 1px solid #e7e7e7;
		margin: 0;
	}
		
	#toggle:checked + .menu{
	display: block;
	}
	
	/*end of Navigation Bar	*/
	
	/*This is the footer	*/
	#sticky{
	position: fixed;
	bottom: 0;
	}
	/*end of Footer	*/
	
	
/*start of categories for mobile	*/	
	.category1{	
	position: relative;
	top: 55%;
	left: 35%;
	width: 100%;
	overflow:hidden;
	
	}
	.category2{	
	position: relative;		
	top: 60%;
	left: 35%;
	width: 100%;
	overflow:hidden;
	}
	.category3{	
	position: relative;	
	top: 65%;
	left: 35%;	
	width: 100%;
	overflow:hidden;
	}
	.category4{	
	position: relative;		
	top: 70%;
	left: 35%;
	width: 100%;
	overflow:hidden;
	
	}
	.category5{	
	position: relative;
	top: 75%;
	left: 35%;
	width: 100%;
	overflow:hidden;
	
	}
	.category6{	
	position: relative;		
	top: 80%;
	left: 35%;
	width: 100%;
	overflow:hidden;
	}
	
/*end of categories for mobile	*/
	
	/*this is for the logo for mobile*/
	.logo{
	float: left;
	position: static;
	display:none;
	visibility: hidden;
	}
	
	
	


}


/*for the contact form */
input[type=submit] {
  background-color: #00853E;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact {
  border-radius: 5px;
  background-color: #f3f3f3;
  padding: 20px;
}
.contact input[type="text"], input[type="subject"], select, textarea {
  width: 50%; /* Full width */
  padding: 12px; /* Some padding */  
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  
}





/*the login and register text input */

.login {
  border-radius: 5px;
  background-color: #f3f3f3;
  padding: 20px;
}

.login input[type="text"], input[type="password"] {
 
  width: 25%; /* Full width */
  padding: 12px; /* Some padding */  
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
}
/*main index icons*/

.icon1{
	
	position: absolute; 
	margin-left: 0%;
	top: 45%; 
	padding-left: 15%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
	
}
.icon2{
	
	position: absolute; 
	margin-left: 0%;
	top: 45%; 
	padding-left: 30%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
}
.icon3{
	
	position: absolute; 
	margin-left: 0%;
	top: 45%; 
	padding-left: 45%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
}

.icon4{
	
	position: absolute; 
	margin-left: 0%;
	top: 45%; 
	padding-left: 60%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
}

.icon5{
	position: absolute; 
	margin-left: 0%;
	top: 45%; 
	padding-left: 75%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
}

.icon6{
	
	position: absolute; 
	margin-left: 0%;
	top: 65%; 
	padding-left: 15%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
}
.icon7{
	
		position: absolute; 
	margin-left: 0%;
	top: 65%; 
	padding-left: 30%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
}

.icon8{
	
		position: absolute; 
	margin-left: 0%;
	top: 65%; 
	padding-left: 45%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;

}
.icon9{
	
	position: absolute; 
	margin-left: 0%;
	top: 65%; 
	padding-left: 60%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;

}
.icon10{
	
	position: absolute; 
	margin-left: 0%;
	top: 65%; 
	padding-left: 75%;
	height: 12.5%;
	width: 100%;
	text-decoration: none;
	left: 5%;
	
}
.info{
	
	margin-left: 40%;
	line-height: 50px;
	
}
.privacy{
margin-left: 30%;
  width: 50%;
color: Black;
font-size: 14px;
  padding: 12px; /* Some padding */  
  text-align: left;
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
}
.foot{
	width:100%;
  height:75px;
  padding-top: 10px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e7e7e7;
  line-height: 18px;
  color:black;
  font-weight:bold;
  font-size: 14px;
  text-align:center;
  position: absolute; /*Here's what sticks it*/
         /*to the bottom of the body/page*/
  left:10px;     
	
}
/*END main index icons*/