html, body
{padding: 0; margin: 0;}
/*
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
*/

:root {
  --lightgreen: hsl(76, 60%, 62%) ;
  --palegreen:hsl(76, 60%, 87%);
  --darkgreen: hsl(76, 60%, 52%)  ;
  --deepgreen: hsl(76, 60%, 42%) ;  
  --blue:  hsl(195, 53%, 79%);
  --teal: hsl(180, 21%, 37%);
  --actongreen: hsl(81, 57%, 41%);
}

/* lightened lightcoral hsl(0, 79%, 92%) */


body
{	
  background:#c5c5c5 url(foot-noise.png) repeat;
  font-family: 'Open Sans', sans-serif; 
  position: relative;	
  -webkit-text-size-adjust: none;  
  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.4);}

body *
{	text-shadow: none;}

 @media only screen and (min-width: 1600px) { body {margin: 0 15%;}
}

 @media only screen and (min-width: 2000px) { body {margin: 0 20%;}
}

h1, h2, h3, h4, h5, h6
{line-height: 1; margin: 0;}

h1{padding: 32px 5% 0px 5%; color: #303f12;  margin: 0px;  
font-weight:400;  font-size: 2.2em;  line-height: 1.8em;}

h2{
  font-size: 1.6em;   
  color: #303f12; 
  padding: 8px 5% 12px 5%;   
  margin:0; 
  font-weight: 600; 
  line-height: 1.8em;
}

h3{	font-size: 1.6em; line-height: 1.8em; padding: 12px 5%; 
font-weight: 600; color: black !important;}

h4{	font-size: .9em; padding: 1% 5% 2% 5%; color: #fff; font-weight: 100; margin: 0; line-height: 1.6em;}

h5{	font-size: 1.4em; padding: 15px 0% 0px 30%; font-weight: 100; color: #A6CE3A; line-height: 1.4em;}

@media only screen and (max-width: 480px) { 
h5 {font-size: 1.08em;}
}

h6{	font-size: 1em; padding: 23px 0% 0px 0%; font-weight: 100; color: #333; line-height: 1.2em; margin:0 4% ;}

p{ font-size: 1em;  padding: 2px 5% 23px 5%;   margin:0px;  
font-weight: normal; color: black; line-height: 1.8em;
}


@media only screen and (max-width: 480px) { 
 h1 {padding: 0 3%; font-size: 3.2em !important;} 

 h2 {font-size: 1.6em; padding:  40px 3% 0 3% !important;}

 h3 {font-size: 1.08em; 
  line-height: 1.4em; 
 padding: 12px 3%; 
}
 
 p {padding:0 3% 0 3%; 	font-size: .9em;  }
}


img {margin: 0; height: auto; padding: 0; max-width: 100%;}

.quote {background: transparent url(quote.png) no-repeat 0% 0%; font-size: 1em;}

.space {color: #E9E9E9;}

.green {color:hsl(76, 60%, 52%);}

.ylw {background: yellow; padding: 23px 5%; opacity: 0.5; border-radius: 5px;}

.center {text-align:center;}

iframe {border: 1px dashed #ccc; }

/*on what-you-can-do page*/

.tks {
	width: 60%;
	margin: 0 5%;
	background: hsl(76, 60%, 87%) url(../img/icons/hands.png) no-repeat;
  background-position: 3% 50%;
	height: auto;
	padding: 2% 5% 2% 25%;
	border-radius: 12px;
}


a, a:link, a:active, a:visited, a:hover
{color: var(--darkgreen); 
  border-bottom: 0;
text-decoration: none;
 outline:none;}

a {outline: none;}
a:hover{  text-decoration: none; background: #ffe;  color: var(--lightgreen); border: 0 !important;
border-radius: 2px;
}
a:active {background: var(--lightgreen); color: white;}

ul li {	list-style-type: none;	margin: 0px;	padding: 0px; color: #fff;}

#contain 
{height: auto; 
  width: auto; 
  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.4); 
  background: #fff;
}

#contain a {border-bottom:2px dotted; }


/* menu stuff g'wan 'ere
nav:not(.mm-menu)
{display: inherit;}

#menu p{color: #ffc; padding: 20px; font-size: 1em; background: transparent; font-weight: normal;}
#menu h3 {font-size: 1.2em;}
*/

.header
{	background: transparent;
	font-weight: normal;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 46px; 
	padding: 0 50px; position: fixed;}

	
	.header2
{	background: #000;
	font-weight: normal;
	width: 100%; top: 0;
	height: 50px; opacity: .9;
	padding: 7px 0 0 0; position: fixed;}
	
	
	.header a
{	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;	width: 40px; height: 40px; position: absolute;	top: 5px;	left: 12px; }
	
@media only screen and (min-width: 480px) 
{ 		.header {width: 10%;}
		.header2 {display: none;}
		.header FixedTop {display: none}
        .header a {display: none;}
}
	
.header.fixed{ position: fixed; top: 0; left: 0;  }


/*==========content ===============*/
/* nav at line 379 */


#banner {width: 18%; height: 165px; background: white; padding: 0px 0 23px 0.5%; float: left;}
#banner a {color: #fff;}
#banner a:hover {color: gold;}


#social {width: 81.5%; background:white; height: 102px; float: left; padding:  0; }
#social h5 {text-align: right; margin: 0 2% 0 0; font-size: 1.4em; padding: 0}
#social img:hover {opacity: .8;}

.donate a, 
.donate2 a 
{background: hsl(76, 60%, 52%); 
color: white;  
  border-top: 13px solid hsl(76, 60%, 52%);
 font-size: .9em; 
  padding:8px; font-weight: 400;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.3);}

  .donate2 a 
  {background: tomato;
    border-top: 13px solid tomato;
  }


.donate a:hover,
.donate2 a:hover
{background: var(--deepgreen); color: white; 
  border-top: 13px solid hsl(76, 60%, 22%); border-bottom: 2px solid hsl(76, 60%,22%); transition: 2s;}

  .donate2 a:hover
  {background:#a00;
    border-top: 13px solid #a00; 
  }


.donate a:active,
.donate2 a:active
 {background: yellow; color: #111;
  border-top: 13px solid yellow;   border-bottom: 2px solid yellow;
}


@media only screen and (max-width: 999px) 
{
#banner {width: 39.5%;}
#social {width: 60%; height: 188px; text-align: center;}
}

@media only screen and (max-width: 599px) 
{
#banner {width: 99.5%;}
#social {width: 100%; height: 70px;}
.donate {   box-shadow: 0px 0px 0px rgba(23, 23, 23, 0);}
}


/* --------------homepage---*/

#box {width: 30%; margin: 0 1.5%; background: #fff; float: left; text-align: center; height: 320px;}

@media only screen and (max-width: 768px) 
{#box {width: 91%; margin: 1.5%;}
}


/*about page*/
#box2 {width: 28.6%; margin: 0 2%; background: var(--palegreen); 
float: left; text-align: center; height: auto; border: 2px solid white;
padding: 0 0 23px 0;

}

@media only screen and (max-width: 768px) 
{#box2 {width: 91%; margin: 1.5%;}
}


#intro {background: var(--lightgreen)!important; height: auto; width: 100%;}
#intro h3 {color: white; font-size: 1.6em; 
padding: 12px 0 23px 5%;}



@media only screen and (max-width: 480px) {
#intro {  line-height: 1.4em; margin:0; border:0;  height: auto; } 
}



#two-wrap {height: auto; width: 100%; float: left; }
#two-wrap h2 {text-align: center; padding: 10%;}

#two {width: 50% ; margin: 0; background: transparent; float: right ; text-align: center; height: auto;}
#two h3 {
	margin: 10px 10% 0 10%; 
	font-size: 1.15em; 
     padding: 0;}

#two-pic {width: 50% ; margin: 0%; background: white; float: right ; text-align: center; height: auto;}

@media only screen and (max-width: 1100px) 
{#two, #two-pic, #two-wrap {
  width: 100% !important;
}

#two-pic img {width: 100%;}

	}

.two {width: 100%; height: auto; float: left; background: #99CA3C;}



#first { height: auto; padding-top: 0px; padding-bottom: 0px;}

#first h1 {font-size: 3.2em; color: orangered;}

@media only screen and (max-width: 480px) {
#first h1 {
	font-size: 2.3em !important; 
    padding: 0 0 10px 3%;}
}


#second { height: auto; width: 100%; background: #fff; }

#second h1 {color: orangered; font-size: 3.2em; } 

#second h3 {color: white;}



#boxa {width: 33.33%; margin: 0; background: #99CA3C; float: left; text-align: center; height: 320px;}
#boxb {width: 33.33%; margin: 0; background: #40ae49 url(../img/hands.png) repeat-x 0 100%; float: left; text-align: center; height: 320px;}
#boxc {width: 33.33%; margin: 0; background: #ffde3f; float: left; text-align: center; height: 320px;}
#boxd {width: 33.33%; margin: 0; background: #3f7928 url(../img/shower.png) no-repeat 50% 100%; float: left; text-align: center; height: 320px;}
#boxe {width: 33.33%; margin: 0; background: #3f7928 url(../img/home-1.jpg) no-repeat; float: left; text-align: center; height: 320px;}

#boxa h2, #boxa p {color: white;}
#boxb h2, #boxb h3 {color: black;}
#boxc h2, #boxc h3 {color: black;}
#boxd h2, #boxd p {color: white;}
#boxe h2, #boxe p {color: white;}

#boxa a, #boxb a, #boxc a, #boxd a, #boxe a {border-bottom: 0; color: white;} 



@media only screen and (max-width: 1024px) {
	#boxa, #boxb, #boxc, #boxd, #boxe {width: 50%;}
}

@media only screen and (max-width: 600px) {
	#boxa, #boxb, #boxc, #boxd, #boxe {width: 100%;}
}

/*------what we do quotes----------------------------*/

#coxa {width: 26%; margin: 1% 3%; background: var(--lightgreen); float: left; text-align: center; 
  height: 200px; border-radius: 12px; }
#coxb {width: 26%; margin: 1% 3%; background: var(--darkgreen) ; float: left; text-align: center; 
  height: 200px;  border-radius: 12px;}
#coxc {width: 26%; margin: 1% 3%; background:  var(--deepgreen); float: left; text-align: center; 
  height: 200px;  border-radius: 12px; }
#coxd {width: 26%; margin: 1% 3%; background: var(--palegreen); float: left; text-align: center; 
  height: 200px; border-radius: 12px;}
#coxe {width: 26%; margin: 1% 3%; background: hsla(103, 50%, 77%, 0.8) ; float: left; text-align: center; height: auto;  border-radius: 12px;  }

#coxa h2, #coxa h3, #coxa p {color: white;}
#coxb h2, #coxb h3, #coxb p {color: white !important;}
#coxc h2, #coxc h3, #coxc p {color: white !important;}
#coxd h2, #coxd h3, #coxd p {color: white;}
#coxe h2, #coxe h3, #coxe p {color: white;}

#coxa a, #coxb a, #coxc a, #coxd a, #coxe a {border-bottom: 1px dashed white; } 



#coxa h3, #coxb h3, #coxc h3, #coxd h3, #coxe h3 {
font-size: .95em; padding: 16px;
}

/*
@media only screen and (max-width: 1024px) {
	#coxa, #coxb, #coxc, #coxd {width: 40%;}
	
		#coxa h3, #coxb h3, #coxc h3, #coxd h3, #coxe h3 {
			font-size: 1em;}
}*/

@media only screen and (max-width: 1024px) {
	#coxa, #coxb, #coxc, #coxd {width: 80%; margin: 2% 10%;}
	
	#coxa h3, #coxb h3, #coxc h3, #coxd h3, #coxe h3 {
		font-size: 1.2em; line-height: 1.6em;}
	
}


 #about-1 h3, 
 #about-2 h3, 
 #about-3 h3
{ font-size: 1.08rem;}


/*----------------------------------*/

#third { 
  height: auto;
  background:transparent;
  width: 100%;}

#third h1 {color: orangered; font-size: 3.2em;}
	
#pic1 {margin: 0; height: auto; width: 100%; background: white; padding: 0;}


#dl {width: 22%; height: auto;  float: left; margin: 0 0% 1% 10%;}

@media only screen and (max-width: 768px) {
	#dl {width: 40%;}
}

@media only screen and (max-width: 480px) {
	#dl {width: 80%; padding: 0 0 0 20%;}
	#dl p {padding: 9px 0 20px 0;}
}


	
#four{ 
  height: auto !important;   
  background:white; 
  width: 100%; 
  padding: 0; 
  margin: 0;
} 


/* column stuff */


.col {
	  -webkit-columns:50px 2; /* Chrome, Safari, Opera */
  -moz-columns: 50px 2; /* Firefox */
  columns: 50px 2;}
 
  
  
.vol {
	  -webkit-columns:auto 3; /* Chrome, Safari, Opera */
  -moz-columns: auto 3; /* Firefox */
  columns: auto 3;
  background: #fffaf0;
  margin: 0 5%;
  padding: 2%;
  }


@media only screen and (max-width: 768px) {
	.vol {columns: 2;}
}


@media only screen and (max-width: 520px) {
	.vol {columns: 1;
	  margin: 0;
  padding: 6%;
	}
}


.cont {
	  -webkit-columns:auto 3; /* Chrome, Safari, Opera */
  -moz-columns: auto 3; /* Firefox */
  columns: auto 3;
   margin: 0 5%;
  padding: 2%;

  }


@media only screen and (max-width: 800px) {
	.cont {columns: 2;}
}


@media only screen and (max-width: 520px) {
	.cont {columns: 1;
	  margin: 0;
  padding: 6%;
	}
}


.deets {
	  -webkit-columns:50px 2; /* Chrome, Safari, Opera */
  -moz-columns: 50px 2; /* Firefox */
  columns: 50px 2;
  margin: 0 10%;
  text-align: center;

  }
 


@media only screen and (max-width: 520px) {
	.deets {columns: 1;
	  margin: 0;
  padding: 6%;
	}
}




#footer
{	background: hsl(120, 3%, 28%); width: 100%; height: auto;  }

#footer h3 {font-size: 2.1em;  margin: 0; padding:20px 0 0px 5%; font-weight: normal; color: hsla(81, 57%, 77%, 0.9) !important; text-align: center !important;} 

#footer h4 {text-align: center;}

#footer img {padding: 2% 5% 3% 0;}

#footer a {color: white; border: 0;}
#footer a:hover {background: transparent; color: hsl(81, 57%, 51%); }

.sml {font-size: 1em; padding: 0 0 0 4%; color: skyblue; }

@media only screen and (max-width: 480px) {
  #footer	
  {position: relative;	
  font-weight: normal;	
  float:left;
  width: 100%;	
  height:420px;  
  margin: 0; 
  background: #6d6e71 !important; }
	
 #footer h3 {font-size: 1.3em !important; line-height: 1.8em; margin: 0; padding:10% 0 0 3% !important; font-weight: normal; bottom: 0;} 
 #footer h4 {padding: 0 0 0 3%;}
}



/*form on contact page ------------- */

.first {margin: 0 102px 0 0; }
.email {margin: 0 106px 0 0;}
.phone {margin: 0 101px 0 0;}
.msg {margin: 0 46px 0 0;}

.submit {padding: 12px 32px; font-size: 1.2em; margin: 23px 0 0 0; 
background: #A6CE39; border-radius: 3px; border: #fff;}
.submit:hover {background:orangered; border: #fff; color: white;}


fieldset {background: #eee; margin: 0 10% 0 0;}
select {height: 60px; width: 270px;}




/* - - - NAVIGATION - - - */
/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ -*/


#navcon {
	width: 81.5%; 
	float:left; 
	height: 86px;
    background: white; }

@media only screen and (min-width: 1600px) { 
#navcon {width: 81.5%; 
float:left;
}
}


@media only screen and (max-width: 1000px) { 
#navcon {width: 81.5%; 
float:left;
height: auto;
}
}



 .toggle, 
 [id^=drop]
  { 
  display: none;
}

nav {
  width: 100%; 
  background:white; 
  border-bottom: 0px; 
  padding: 0;
  margin: 0;
  }

  nav a {
    display: block;
    padding: 13px 12px 2px 12px;
    line-height: 40px;
    text-decoration: none;
    margin: 0 0 0 6px;
    border: 0 !important; 
    color: #222 !important; }
  
  nav a:hover { 
    padding: 13px 12px 2px 12px;
    background: var(--deepgreen);  
    color: white !important;
    margin: 0px 0 0 6px;}

@media only screen and (min-width: 1024px) { 
nav {width: 100%; padding: 0;}
}

@media only screen and (min-width: 768px) {
  nav h3 {padding: 0; }	
}

@media only screen and (max-width: 480px) { 
  nav {width: 100%}
}

nav h3 {
  padding: 0; 
  font-weight: 600 !important;
  font-size: .93rem !important;
  font-weight: normal; 
  font-size: 1.08em; 
  line-height: 46px;}
  


nav:after {content: ""; 
  display: table;  
  clear: both;}

nav ul {
  padding:  0;  
  margin: 0;  
  list-style: none;  
  position: relative; }

nav ul li {
  margin: 0;
  padding: 0 ;
  display: inline-block;
  z-index: 20; /* here for 2nd part of menu */
 	list-style-type: none; 
  background:
}


nav ul ul {
  display: none;
  position: absolute;
  padding: 0 0 0 0px;
  color: white !important;
  top: 55px; 
  background: var(--deepgreen); }


  nav ul li ul li:hover {  
  color: white; 
    }
 

nav ul li:hover > ul { display: inherit; 
}

nav ul ul li {
  width:210px;
  float: none;
  display: list-item;
  position: relative;
  background:  var(--deepgreen); 
}
	
li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }



/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1000px) {
.toggle + a,
 .menu { 
  display:none; }

.toggle {
  display: block; 
  background: var(--actongreen); /* colour of mobile device menu */
  padding: 0 0 0 23px; 
  color: white !important; 
  width: 120%; 
  float: left;
  font-size: 1rem;  
  line-height: 60px;  
  text-decoration: none; 
  letter-spacing: .32em;
  font-weight: 040;
  margin: 0;
  font-size: 1.4rem;
  border-bottom: 1px dotted var(--palegreen);
}


li > a:before { content: ' -'; }

.toggle:hover { 
  background-color: var(--deepgreen) ; color: white!important; }

.toggle a:visited {background: yellow; color: white !important;}

[id^=drop]:checked + ul { display: block; }



nav ul a 
 {background: var(--deepgreen);
  color: white !important; 
  letter-spacing: 0.1rem; 

  line-height: 60px; 
  width: 120%;}

nav ul a:hover 
{padding: 0; margin: 0;}

nav ul li {  
  display: block;  
  width: 100%;
}
/*
nav ul ul .toggle,
 nav ul ul a {  }
*/

nav a:hover,
 nav ul ul a 
 { background-color: var(--deepgreen);
  letter-spacing: 0.1rem !important; 
}


nav ul ul
 {width: 100%;
  background: var(--deepgreen);}

 
 nav ul ul a:hover 
{ background: var(--actongreen) !important; 
  color: white !important;
  padding: 0 0 0 4%;
  letter-spacing: 0.1rem; 
  margin:0 !important;
  opacity: .5
}


nav ul li ul li .toggle,
 nav ul ul a
 { 
  color: #fff !important; 
  font-size: 1.2rem;
  margin: 0;
  letter-spacing: 0.01rem;
  font-weight: 400;
  padding:0 0 0 4%;
}

nav ul ul {
  float: none;
  position: static;
  color: #fff !important;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { 
  display: none; }

nav ul ul li {
  display: block;
  width: 100%;}

nav ul ul ul li { position: static;}

nav ul ul li:hover {color: yellow;}
}


/* code for about page only, smiletones ------------------ */

/*the circles 

  .dot h3, .dot2 h3, .dot3 h3, .dot4 h3, .dot5 h3, .dot6 h3, .dot7 h3, .dot8 h3, .dot9 h3, .dot10 h3, .dot11 h3    
   {color: grey; padding: 12px 0 0 0; font-weight: 600;}
  
  .dot, .dot4, .dot7, .dot10 {
  height: 60px;
  width: 60px;
  background-color:#409C3E ;
  border-radius: 50%;
  display: inline-block;
  padding: 30px;
}


.dot2, .dot5, .dot8, .dot11 {   height: 60px;
  width: 60px;
  background-color: #99CA3C;
  border-radius: 50%;
  display: inline-block;
  padding: 30px;
 }
  
  
  .dot3, .dot6, .dot9 {   height: 60px;
  width: 60px;
  background-color: #3F7928;
  border-radius: 50%;
  display: inline-block;
  padding: 30px;
 }
  
  
  .dot {margin: 0 0 0 0;}
	  .dot2   {margin: 75px 0 0px 0;}
	    .dot3 {margin: 80px 0 0 0;}
		  .dot4 {margin: 110px 0 0 0;}
		    .dot5 {margin: 80px 0 0 0;}
			  .dot6 {margin: 142px 0 0 0;}
			    .dot7 {margin: 54px 0 0 0;}
				  .dot8 {margin:x2136px 0 392px 0;}
				  
				  	  .dot9 {margin: 36px 0 92px 0;}
					  	  .dot10 {margin: 36px 0 92px 0;}
						  	  .dot11 {margin: 136px 0 92px 0;}
							  
  
  
  .dot:hover,  .dot2:hover, .dot3:hover, .dot4:hover, .dot5:hover, .dot6:hover, .dot7:hover, .dot8:hover 
  { background: darkgreen;}
  
*/



/*the columns containing the three sections */
   
#cola {width: 40%; height: auto; background: white; float: left; text-align: center;}

#colb {width: 20%; height: auto; background: white; float: left; text-align: center;}

#colc {width: 40%; height: auto; background: white; float: left; text-align: center;}

 @media only screen and (max-width: 2900px) {
     #cola {width: 100%;}
	 #colb {display:none;}
	 #colc {display: none;}
 }
  
  .hide {
	  color: #3F7928; 
	  margin: 0 6px 0 0;
  }
  
  
  .hide::after {  content: " -";}
  
  
  @media only screen and (min-width: 2900px) {
	.hide {display: none;}  
  }



.title
{width: 82%; height: 60px; background: #A6CE39 url(arrow.png) 100% 50% no-repeat; float:left; margin: 1% 5% 0 15%;}

.text 
{width: 72%; height: auto; background: #FFDE3F; float:left; margin: 0 5% 0 15%; padding: 0;}


.title2
{width: 82%; height: 60px; background: #A6CE39 url(arrow2.png) 0% 50% no-repeat;; float:left; margin: 1% 13% 0 5%;}

.title2l
{width: 82%; height: 60px; background: #A6CE39 url(arrow.png) 100% 50% no-repeat;; float:left; 
  margin: 1% 5% 0 13%;}

.text2
{width: 72%; height: 360px; background: #3F7928; float:left; margin: 0 5% 0 15%;}

.text2l
{width: 72%; height: 360px; background: #3F7928; float:left; margin: 0 5% 0 15%; border-radius: 18px; border: 18px solid hsl(76, 60%, 52%);}

.text2r
{width: 72%; height: auto; background: #3F7928; float:left; margin: 0 5% 0 15%;}

.title h3, .title2 h3, .titlel h3, .title2l h3 {padding: 12px 0 0 0; font-size: 1.2em;}


.title3, .text3
{display: none;}

@media only screen and (max-width: 600px) {
.text2l, .text2r {margin: 0 5% 0 5%; width: 90%; background:forestgreen; height: auto; padding: 12px 0;}
}




 @media only screen and (max-width: 2900px)  /* here and line 562 added 2000px */{
	 .title2l 
	 {width: 82%; height: 60px; background: #A6CE39 ; float:left; margin: 2% 9% 0 9%; }
	 .text2l
     {width: 82%; height: auto; ; float:left; margin: 0 9% 0 9%; }
	 
		
	 .title3 
	 {width: 82%; height: 60px; background: #A6CE39 ; float:left; margin: 2% 9% 0 9%; display: block;}
	 .text3
     {width: 82%; height: auto; background: hsl(76, 60%, 52%); float:left; margin: 0 9% 0 9%; display: block; border-radius: 18px; border: 18px solid #3F7928}
	 
	 
	.title {background: #A6CE39 url(cross.png) no-repeat !important; margin: 2% 9% 0 9%; display: inline!important;}
	.text{width: 82%; margin: 0% 9% 12px 9% !important;  }
	
	 .title2, 
   .text2 
   {display: none;}  
 }
 
 
  .title h3, 
  .title2 h3, 
  .title2l h3, 
  .title3 h3 
  {color: #3F7928; 
     }
  
  .text p, 
  .text2 p, 
  .text2l p, 
  .text2r p 
  {color: #2a2a2a; 
    font-size: 1em; 
    padding: 12px 23px; 
    font-weight: 100 !important; 
    line-height: 1.6em;}
  
  .text2l p, 
  .text2r p, 
  .text3 p 
  {color: #fff; 
    font-size: 1.1em;} 

  .text3 p, 
  .text3 h3 
  {color: #666;}
  
 
  .w3-animate-left{position:relative;animation:animateleft 5.2s !important;}
  .w3-animate-right{position:relative;animation:animateright 5.2s !important;}
  
  .w3-animate-ignore {display: none;}
  
  @keyframes animateright{from{right:-300px;opacity:0.1} to{right:0;opacity:1}}
  @keyframes animateleft{from{left:-300px;opacity:0.1} to{right:0;opacity:1}}
  

  /* dates on the milestone section on about page */

  .date{
    height: 60px;
    width: 60px;
    background-color: hsl(76, 60%, 52%);
    border-radius: 50%;
    display: inline-block;
    border: solid 4px white;
    margin: 2%;
    float: left;
    padding: 25px; 
    color: white;
    font-size: 1.8rem;
    font-weight: 100;
     }  

   .date2{
    height: 60px;
    width: 60px;
    background-color: hsl(103, 50%, 32%);
    border-radius: 50%;
    display: inline-block;
    border: solid 4px white;
    margin: 2%;
    float: left; 
    padding: 25px; 
    font-size: 1.8rem;
    font-weight: 100;
   }

  /*
  .date h3 {
       font-size: 1.08em !important;   
      padding: 12px 12px 0 10px !important;
    color: #fff !important;
    }*/
  
.text2l h3, 
.text3 h3 {
  color: white !important; 
  padding: 0px 0 0 1% !important;  
  margin: 0% 1% 1% 0%!important; 
  font-size: 1.7em;}

  /* ############## */

.name {height:auto; width: 100%; float: left; background:  var(--lightgreen); 
  background-image:
    linear-gradient(
      to bottom,
      var(--lightgreen), var(--palegreen)
    );
padding: 0 0 23px 0; 
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

.name h3 {
	padding:  6px 5% 6px 5% !important;
  color: #222; 
  border-radius: 3px;
  font-weight: 600;
	letter-spacing: normal !important;}

.name p { padding: 0px 5% 0px 5%;}



.scroller {
  max-width: 80%;
  margin: 0 0 10% 10%; 
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg, transparent, white 20%,  white 80%,  transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */

:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-primary-100: hsl(205, 15%, 58%);
  --clr-primary-400: hsl(76, 60%, 77%);
  --clr-primary-800: hsl(217, 33%, 17%);
  --clr-primary-900: hsl(136, 8%, 36%);
}
/*
html {
  color-scheme: dark;
}

body {
  display: grid;
  min-block-size: 100vh;
  place-content: center;
  font-size: 1.125rem;
  background-color: var(--clr-primary-800);
}
*/
.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem;
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
  color: black;
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: orangered !important;
}




/*  ////////// boxes on NEWS //////////////////page   */


#boxa {background:white; height: auto;  width: 98%;	color: #000; border: 0px; float: left; padding: 0%; }

#boxa img { height: auto; border: 0; padding: 0;filter: grayscale(0%);  }

#boxa img:hover { filter: grayscale(70%);}


.boxa{
  float: left;
  height: auto;
  padding: 0px;
  margin: 2% ;
  border-radius: 6px;
  border: 6px solid #eee;
  width: 94%; 
  background: transparent;
}


@media only screen and (min-width: 800px) {
     .boxa{
    margin: 1% 0% 3% 3%;
      width: 45%;
} 
}


@media only screen and (min-width: 1500px) {
  .boxa {
	    width: 29%;
  }
   }

    
  #onea{
    height:auto;
	background: white;
  padding: 12px 0 18px 0;
  text-align:left;

  }
  
#onea h2 {
	font-size: 1.08em;  
  font-variant:none;
	padding:0px 4% 0 4% !important;
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
  color: #555;
  }

  #onea h4 {
    padding: 0 4% 0% 4%; 
    margin: 0;
    line-height: 1.6;
    color: #555;
  }

  #onea p {
font-size: .8rem;
  }

  
  #cona {
    background:transparent;
    height: auto;
    width: 100%;
    border-radius: 3px;
  }


#cona img{
 width:96% !important; 
  padding: 0; 
  margin:2% 0 2% 2%!important;
  border-radius: 0px;
  }    
 

#cona a {
  border: 0px !important; 
  letter-spacing: .1rem;;
  padding: 0 !important;
  color: var(--teal);
  }

#cona a:hover {
	background: transparent !important; 
  margin: 0 !important; 
  color: #555!important;
}


#cona h3 {
  font-size: 3.2em;
  opacity: .23;
}
    
	
	
/* for the boxes on the what we do page */

/* boxes */

.bex {
  background: transparent;
  float: left;
  height: 320px;
  width: 50%;
}


.bex2 {
  background: transparent;
  float: left;
  height: 350px;
  width: 100%;
}


@media only screen and (max-width: 800px) {
  .bex {
    width: 100%; 
	padding: 0% 0% 0% 0%;
	}
	
	
  #one {width: 98% !important;} 
}



#text {
  width: 90%;
  height: auto;
  padding: 5% 5% 12px 5%;
  margin: 0;
}

#text2 {
  width: 80%;
  height: auto;
  padding: 1% 10% 2px 10%;
  margin: 0;
}


#text p, #text2 p {
	margin: 5% 0 0 0%;
    font-size: 1.23rem; 
	line-height: 1.7rem;
	text-align: center;
	}



#con { width: 40%; 
       float: left;
	   margin: 0 5%;
	   }

#con img {max-width: 100%;}

#con2 {width:80%; padding: 0 10%;}

	
	
	
	/* about page, our team... grr client keeps changing what they want hence code falling over code*/


.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
 
}

.flex-container > div {
  width: 32%;
  margin:0 0.5% 2% 0.5% ;
  text-align: left;
}


@media only screen and (max-width: 800px) {

.flex-container > div {
  width: 98%;
  margin:0 1%;
  text-align: left;
}
}


@media only screen and (max-width: 1200px) {

  .flex-container > div {
    width: 48%;
    margin:0 1%  ;
    text-align: center;
   }
  }


@media only screen and (min-width: 1600px) {

  .flex-container > div {
    width: 23%;
    margin:0 1% 0 0.5% ;
    text-align: center;


  }
  }

    
  .tile-staff {width: 100%; margin 0; 
height:auto;}

.tile-staff h3 {padding: 8px 0 2px 12px; font-weight: 600;
font-size: 1.08rem; color: white;}


/*  @media only screen and (max-width: 1024px) {
	  .ves {width: 45%;  }
	  }
	  
	  @media only screen and (max-width: 600px) {
	  .ves {width: 95%;  }
	  }

  */
 .staffa, .staffb, .staffc, .staffd, .staffe, .stafff  { 
    width: 100%; 
    height:auto; 
	float:left; 
	padding: 0;
	}
/*
  @media only screen and (max-width: 768px)  {
 .staffa, .staffb, .staffc, .staffd, .staffe, .stafff  {
	width: 100%; 
	height:auto; 
	}
	     }*/

 .staffa img, .staffb img, .staffc img, .staffd img, .staffe img, .stafff img {
	max-width:100%; height: auto; padding: 0 !important;
}