/* protect brockwell park */

*,
*::after,
*::before{
	box-sizing: border-box;}

button,
input,
textarea,
select {
font: inherit;
}

body
{	background:#bbb url(pattern.png) repeat;  /*url(foot-noise.png) repeat;*/ 
	position: relative;	
	
	  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none; 
  
	 font-family: "Work Sans", sans-serif;
	box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.4);
	
 -webkit-user-select: auto; /* Safari */
  -ms-user-select: auto; /* IE 10 and IE 11 */
  user-select: auto; /* Standard syntax */
  
	padding: 0; 
	margin: 0;}


body *
{ text-shadow: none;}

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


.work-sans-pbp {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


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

h1 {
	color: #176F45;  
	font-size: 3em; 
	font-variant: small-caps;
	font-weight:500; 
	line-height: 1.6em;
	margin: 0;  

	padding: 0px 7.5% 0px 7.5%; 

	}

h2 {
	font-size: 1.8em;   
	color: #176F45;
	padding: 12px 7.5% 8px 7%;   
	margin:0;  
	font-weight: 400;
line-height: 1.4em;}
 
h3 {
	font-size: 1.5em; 
	line-height: 1.5em; 
    padding: 0px 7.5% 32px 7.2%; 
	font-weight: 400; 
	color: #176F45;}

h4 {	
	font-size: 1.3em; 
	padding: 0 7.5% 0 7.5%; 
	color: #2b452a;
	line-height: 1.8em;
	font-weight: 400; 
	margin: 0;}

h5 {	
	font-size: 1.2em; 
	padding: 32px 7.5% 32px 7.5%; 
	line-height: 1.4em;}

h6 {
	font-size: .9em; 
	font-style:italic;
	padding: 2px 0% 2px 2.5%; 
    font-weight: 500; 
	color: #2b452a;
	line-height: 1.6em; 
	margin: 0 5%;  
}

p {
	font-size: 1.1em;  
 	padding: 2px 7.5% 12px 7.5%;   
	margin:0;  
	font-weight: normal; 
		color: #176F45;
	line-height: 1.8em;}


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

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

 h3 {
	 font-size: 1.2em; 
	 padding: 12px 3% 0 3%; }
	 
	 h4 {	
	font-size: 1.3em !important;   
	padding: 2.5% !important; 
	color: #FCA105; 
	line-height: 1.4em;
	font-weight: 600 !important; 
	margin: 0;}
	 
 p { 
	 padding:8px 3% 8px 3%;
	 font-size: 1em;  }
}

img {
	margin: 0; 
	width: 100%; 
	height: auto;}
	
	
	button {
		/*background: hsl(180, 50%, 32%);*/
		background:  hsl(151, 65%, 31%);
		padding:  1.5%;
		margin:2% 0% 5% 7%;
		border-radius: 10px;
		border: 2px dotted white;
		line-height: 2.3rem;
		font-size: 1.08rem;
		color: white;
		}	

			
			button a {color: white !important;
			border: 0 !important;
			}	
			
			button a:hover {background: transparent;}	
			
			button:hover {background:  hsl(151, 65%, 21%);
			 transition-duration: 0.6s;
  cursor: pointer;
			}
			
			button:active {
			background: hsl(151, 65%, 51%);
			    box-shadow: 0px 0px 60px hsla(151, 65%, 31%,1);
			}

.active {
	border-bottom: 12px solid white;
	padding: 0 0 4px 0;
		}


.crowd, .crowd2 {
	 border: 4px yellowgreen dashed;
 background: white;
    padding: 16px 23px;
	border-radius: 9px;
	margin: 0 3% 3%;
	text-align: center;
	 }
	 
	 
	 .crowd3 {
	 border: 4px teal dashed;
 background: whitesmoke;
    padding: 16px 23px;
	border-radius: 9px;
	margin: 1% 12% 1% 6% ;
	text-align: center;
	 }


.drone { max-width: 100% !important; }
 

.quote {background: transparent url(quote.png)no-repeat;
font-weight: 600;
        margin: 1% 5%; letter-spacing: .15rem; line-height: 1.9rem;
}

.yellow {background: #ffa; padding:2% 1%; text-align: center; margin:1% 10%;}

video {margin: 0;}


a, 
a:link, 
a:active, 
a:visited, 
a:hover {
	color: #176F45;  
	border-bottom: 2px solid;
	text-decoration: none; 
	outline:none; 
	padding:  2px 2px 3px 2px;}
	
a {
	outline: none;}
	
a:hover {
    background: hsl(81, 68%, 92%);
	border-bottom: 4px solid #B2E05C; 
	text-decoration: none; 
	outline:none; 
	padding: 4px 2px;
	transition: 1.2s; 
	;}

a:active {
	background: hsl(180, 50%, 92%); 
	border-bottom: 4px solid hsl(180, 50%, 32%);
	color: hsl(180, 50%, 32%);}

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

#contain {
	height: auto; 
	width: auto; 
	box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.4); 
	background: white url(pattern.png)repeat;}
	
	
	
	.deadline {
		border: 23px pink solid;
padding: 12px;
margin: 5%;
border-radius: 6px;
text-align: center;
box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.23);
	}
	
	.deadline a {border-bottom: 3px solid !important;}
		
/* code for gallery on project page*/

    .galleria{ 
	width: 100%; 
	height: 1000px; 
	background: hsla(0, 0%, 100%, 0.7); 
	padding: 0; 
	margin:0; }

@media only screen and (max-width: 600px) {.galleria {height: 800px} }	


/* mobile menu stuff goes here*/

nav:not(.mm-menu)
{display: none;}

#menu {background: hsl(81, 68%, 42%) url(patternX.png)repeat;
}

#menu a {
	color: white;
	     font-size: 1.2rem; 
}


/* - - - head ****************************************************/


.header
{
	font-weight: normal;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; 
	top: 0;
	height: 56px; 
	padding: 0px; 
	z-index: 23;
	position: fixed; 
	opacity: .9 ;}

	/*
	.header2
{	background: red;
	font-weight: normal;
	width: 100%; 
	top: 0;
	height: 50px; 
	opacity: .7;
	padding: 7px 0 0 0; 
	position: fixed;}
	*/
	
	.header a
{	background: center center no-repeat hsl(151, 65%, 26%);
	
	background-image: 
	url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC);
	
	display: block;	
	width: 50px; 
	height: 44px; 
	position: absolute;
    border-radius: 3px;
    border: white dotted 1px;
	top: 8px;	
	left: 10px; 
	opacity: 0.8;
		}

.header.fixed { 
	position: fixed; 
	top: 0; 
	left: 0;  }


	
@media only screen and (min-width: 800px) 
{ 		.header {
	width: 10%;}
/*
		.header2 {
			display: none;}
*/
		.header FixedTop {
			display: none}

        .header a {
			display: none;}
}
	

/* nav at the bottom */


/*** BANNER ***********************************************/

#banner {
	width: 100%; 
	height: auto; 
	padding: 0 0 15px 0;
	text-align:center;
	background: hsla(0, 0%, 100%, 0.8) url(logo-banner-bg.png) no-repeat 50% 85%;}
	


@media only screen and (max-width: 800px) 
{
	#banner {display:none !important;
		}
}


/*
@media only screen and (max-width: 480px) 
{ 
    #banner {
	width: 100%; 
	height: auto; 
	margin: 0;}
		}
*/

#banner h1{
	padding: 104px 8% 0px 8%; 
	color: #176f45;  
	margin: 0px;   
	line-height: .7em;
	font-size: 6.5em;
	letter-spacing:.23rem;  
}
	

#banner h2 {
	font-size: 1.8em; 
	letter-spacing: 0.4em; 
	padding: 2% 8% 1.5% 8% !important;  
		color: #176f45;
	margin: 0; 
	line-height: 2.3rem;
	font-weight: 600;
	font-variant: small-caps;
	 text-shadow: 4px 4px 6px white;
	}


@media only screen and (max-width: 800px) { 
#banner h2 {
	font-size: 1.4em; 
}
}



@media only screen and (max-width: 800px) { 
		#banner-mobile {
			background: #fff url(logo.png) no-repeat 0% 0%;
			height: auto !important;
			max-width: 100%;
			opacity: .8;
			display: block;}
				}


@media only screen and (min-width: 801px) { 
   #banner-mobile {display: none !important;}
}
    

/*

#banner h2  {
		font-size: 1.2em; 
		padding: 0 3% 20px 10% !important; 
		line-height: 1.25em; 
		letter-spacing: .21em;}
}*/


#banner a
{color: #176f45;
 border: 0;
 text-shadow: 4px 4px 6px white;
 background: transparent;
}


#banner a:hover {
	color: #B2E05C; 
	background: transparent; 
	border-bottom: 0;}
	

 #footer a {
	color: #fff; 
	border: 0;
	background: transparent;
	}
	

/****************************************************/

#intro { 
	background: #fff; 
	height: auto; 
	padding: 0;}

#intro img {
	width: 100%;}

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

/****************************************************/

#first {
	height: auto; 
	width: 100%;
	float: left;
	background: white url(logo-bgX.png) no-repeat 50% 30%;}




#first h4, 
#intro h4 {
    border: 2px dashed white;
	padding:1.23% 7.5%;
	letter-spacing: .1rem;
	font-size: 1.8rem;
	margin:  1% 2%;
	font-weight: 900;
	border-radius: 12px;
	text-align: center;
	font-variant: small-caps;
	color: #176F45;
	background: hsla(179, 51%, 76%, .32) url(pattern-2.png) repeat;}

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


#first ul li, 
#first ul li {
	margin: 0 0 0 5%;
	padding: 0 0 23px 12px; 
			line-height: 2.3rem;
     color: #176F45;
	 list-style-type: disc;	
}

#first-lt {
	float: left;
	width: 52%;
	height: auto;	
	padding: 32px 0 0 0;
	background: hsla(0, 0%, 100%, 0.9);
	}
	
	#first-lt a {border-bottom: 2px solid!important ; }
	
	#first-rt {
		float: right;
	width: 48%;
	height: auto;	
		padding: 32px 2% 0 2%;
		background: hsla(0, 0%, 100%, 0.9);
	}


@media only screen and (max-width: 600px) 
{   
	#first-rt, 
	#first-lt
	{
	width: 100%;	
	}
}


/* latest news on home page */
.box
 {
	background:	 hsla(172, 27%, 93%,0.8) url(pattern-2.png) repeat; 
	padding: 16px 8px 16px 8px;
	color: white;
	margin: 0 8%  0 4%;
	border: 0px solid white;
	border-radius: 9px;	
	box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.0);}




.box a {border-bottom: 2px solid !important;}


.newsroll {
		background:  hsla(172, 27%, 95%,0.8)  url(pattern-2.png) repeat;
	width: 94%;
	margin:5% 3%;
	float: left;	
	text-align: left;
	height: auto;
	border-radius: 9px;
	padding: 23px 0;
	border:0px solid #fffffe;
		box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0);}


@media only screen and (max-width: 600px) 
{
	.newsroll {
	   	width: 100%;
	margin: 5% 0;
	}
}



/****************************************************/


#second { 
	height: auto; 
	width: 100%; 
background: hsla(168, 43%, 93%, 0.7) url(css/pattern-2.png) repeat;}

#second img {max-width: 20%;}

@media only screen and (max-width: 1024px){
#second img {max-width: 30%;}
}

@media only screen and (max-width: 600px){
#second img {max-width: 80%; margin: 0 10%;}
}





/****************************************************/

#third {
	height: auto;  
	padding: 4px 0;
	width: 100%;
	background: hsl(81, 68%, 72%);
	}

#third h1 {
	color: orangered; 
}
	
	/****************************************************/
	
#pic1 {
	margin: 0; 
	height: auto; 
	width: 100%; 
	background: #eee; 
	padding: 0;}

#pic1 img {
	width: 100%;}
	
	/****************************************************/
	
#four {
	height: auto;   
background: hsl(151, 65%, 31%);
	width: 100%; 
	padding: 12px 0; 
	margin: 0;} 
	
	#four img {max-width: 32% !important;}
	
	@media only screen and (max-width: 1024px) 
{ 
	#four img {max-width: 45% !important;}
}
	


	@media only screen and (max-width: 600px) 
{ 
	#four img {max-width: 100% !important;}
}
	

#four h1 {
	font-size:3em; 
	color: orangered;
	font-variant: small-caps;
	font-weight: 900;
	}

#four h3 {
	color: white;}

#four p {
	color: white;}
	


/****************************************************/



#footer {
background: hsl(151, 65%, 31%) url(grass.png) repeat; 
	width: 100%; 
	height: auto; 
	text-align: right !important;
	margin: 0;}

#footer h3 {
	font-size: 1.4em; 
	margin: 0; 
    padding: 14px 5%; 
	font-weight: normal; 
	color: white;} 

#four a, #footer a {
	color: #B2E05C;
	border:0;
	}
	
#four a:hover,
#footer a:hover {
	color: white; 
	border-bottom: 4px solid;
	background: transparent !important;}
	
	#four a:active,
	#footer a:active {
	border-bottom: 4px solid hsl(180, 50%, 82%);
	color: hsl(180, 50%, 82%);}
	


@media only screen and (max-width: 480px) 
{
  #footer	{
	  position: relative;	
	  font-weight: normal;	
	  width: 100%;	
	  height: 200px;  
	  margin: 0;  }
	
 #footer h3 {
	 font-size: 1.2em !important; 
	 line-height: 1.8em; 
	 margin: 0; 
	 padding:23px 0 0 3% !important; 
	 font-weight: normal; 
	 bottom: 0;} 
}

/****************************************************/

.lge {
	font-size: 1.32rem;
    padding: 12px 0;
}


.look {
	padding: 4px 8px 6px 8px;
	border-radius: 8px;
}


	.schedule 
	{background:lavender url(asterisk.png) repeat;
	padding: 5%;
	margin: 0 6%;
	border-radius: 6px;
	border: solid 12px white;
    box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.15);
	}


.sml {
	font-size: .666em; 
	padding: 0 0 0 4%; 
	color: pink;}

.smla {
	font-size: .666em; 
	padding: 0 0 0 4%; 
	color: yellow; }

.sml2 {
	font-size: .7em; 
	padding: 0; 
	line-height: .8rem;
	color: slategrey;  }

.sml3 {
	font-size: .666em; 
	padding: 0; 
	color: white;  }

.sml4 {
	font-size:0.666em;  
	letter-spacing: .1em; 
	padding:  4px 8px 4px 10px;  
	color: orangered; 
	background: snow; 
	border: 1px dotted orangered; 
	margin: 0 18px 12px 0; 
	border-radius: 8px;}

.sml4:hover {
	background: red; 
	color: white;}
	
	.sml5 {
	font-size: .8em;	
	}
	
	
		.sml6 {
	font-size: .36em;
	letter-spacing:.2rem;	
	}
	
	
	.sml7 {
	font-size:0.666em;  
	letter-spacing: .23em; 
	padding:  4px 8px 4px 18px;  
	color: greend; 
	background:hsl(81, 68%, 92%); 
	border: 1px dotted skyblue; 
	margin: 0 5% 12px 5%; 
	border-radius: 8px;}
	
	
	.sml8 {
	font-size: .8em; 
}
	
	
	.sml2-line {
	font-size: .666em; 
	padding: 0; 
	color: purple; 
	/*text-decoration-line: line-through;  */}




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


/* Hide toggle buttons and drop elements by default */
.toggle,
[id^="drop"] {
  display: none;
}

/* Main navigation bar */
#nav {
  width: 100%;
  background: #6aae4b url("pattern-2.png") repeat;
  position: fixed;
  opacity: 0.95;
  text-align: right;
  border-bottom: 0;
  padding: 0;
  z-index: 10;
}

/* Navigation header title */
#nav h3 {
  font-weight: normal;
  font-size: 1.2em;
  line-height: 46px;
}

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

/* Nav links */
#nav a {
  border: 0;
  color: #fff;
  padding: 0 6px;
  transition: 2.3s;
}

#nav a:hover {
  background: transparent;
  color: yellow;
  padding: 0 6px;
}

#nav a:active {
  background: hsl(151, 65%, 26%);
  padding: 40px 6px 218px 6px;
  border-top: 22px solid #fff;
  color: white !important;
}

/* Clear floats in nav */
#nav::after {
  content: " ";
  display: table;
  clear: both;
}

/* Main nav list styles */
#nav ul {
  margin: 0;
  list-style: none;
  position: relative;
}

/* Top-level nav items */
#nav ul li {
  display: inline-table;
  margin: 0 4px;
  padding: 0 0 0 12px;
  opacity: 1;
  z-index: 20;
  list-style-type: none;
}

/* Sub-menu hidden by default */
#nav ul ul {
  display: none;
  top: 45px;
  text-align: left !important;
  background: hsl(101, 38%, 51%) url("pattern-2.png") repeat !important;
}

/* Sub-menu item hover */
#nav ul ul a:hover {
  background: transparent;
  color: yellow;
  margin: 6px 0 12px 0;
}

/* Show sub-menu on hover */
#nav ul li:hover > ul {
  display: inherit;
  text-align: left;
  margin: 0;
  padding: 6px !important;
  position: fixed;
}

/* Sub-menu items */
#nav ul ul li {
  width: 150px;
  float: none;
  padding: 0;
  margin: 0;
  display: list-item;
  position: relative;
}

/* Dropdown indicators */
li > a::after {
  content: '...';
}

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

/* Responsive breakpoints */
@media only screen and (min-width: 1600px) {
  #nav {
    width: 70%;
    margin: 0;
    padding: 0 2% 0 0;
  }
}

@media only screen and (max-width: 800px) {
  #nav {
    display: none;
  }
}