@charset "utf-8";
/* CSS Document */

/*
	=========================================================================================================
	CSS for Piggs Peak Town Council Website developed by Onswaziline in June 2017. 
	Contcat info@onswaziline.com for more details.
	
	COLOR CODES FROM LOGO
	......................
	
	DARK GREEN 	#006400

	==========================================================================================================
*/


/*
	====================
	GOOGLE WEBFONTS USED
	====================
*/	

	@import url(https://fonts.googleapis.com/css?family=Muli);
	@import url(https://fonts.googleapis.com/css?family=Patua+One);
	@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
	
	
/*
	==========================
	GENERAL WEB PAGE SETTINGS
	==========================
*/

	
	body{ padding:0; margin:0;  font-family:"Muli"; font-size:16px; color:#444; line-height:1.5em; background:#EAFCE2;}
	
	
	img {border:0;}
	.clearfix{ clear:both;}
		
	a, a:link{ color:#006400;text-decoration: none;}
		a:hover, a:active{ color: #390; text-decoration:underline;}
	
	h1 {font-family:"Patua One"; font-size:1.8em; color: #360; text-transform:uppercase; line-height:1em; font-weight:normal; text-align:left;}
		h2 {font-family:"Patua One"; font-size:1.5em; color: #690; line-height:1em; font-weight:normal;text-align:left;}
			h3 {font-family:"Patua One"; font-size:1.3em; color:#006400;  line-height:1em; font-weight:normal;text-align:left;}

/*
	===============
	LINK BUTTONS
	===============
*/
	
	a.btn.btn-green {padding:10px 20px;	background-color: #006400; color: #FFF; font-size:0.9em; border-radius:0.5em; font-weight:bold; text-decoration:none;}
	a.btn.btn-green:hover {background-color: #690; color: #030; text-decoration:none;}
	
	a.btn.btn-lime {padding:10px 20px;	background-color: #9C0; color: #030; font-size:0.9em; border-radius:0.5em; font-weight:bold; text-decoration:none;}
	a.btn.btn-lime:hover {background-color: #030; color: #FFF; text-decoration:none;}


/*
	=======================================
		SCALE ON HOVER WITH TRANSITION
	=======================================
*/	
						
	.grow { transition: all .2s ease-in-out; }
	.grow:hover { transform: scale(1.1); }


/*
	==========================
	TOP AREA WITH SEARCH BOX
	==========================
*/
		
	#TopArea{width:100%; padding:0; margin:0 auto; background:#FFF;}		
	.TopArea{ margin:0 auto; width:90%; padding:20px;}	


		/* AREA WITH LOGO */ 
		.Logo{ float:left; width:40%; margin:0 20px 0 0;}	
			.Logo img{width:100%;}	

		
		/* search box ADAPTED FROM https://www.formget.com/css-search-box/ */
		.button_box2 {margin:0 auto; float: right; width:30%;}
		/*-------------------------------------*/
		.cf:before, .cf:after{content:"";display:table;}
		.cf:after{clear:both;}
		.cf{zoom:1;}
		/*-------------------------------------*/
		
		.form-wrapper-2 {width:100%; padding:0;}
		.form-wrapper-2 input {width:70%; padding: 5px 15px;float: left; border:1px solid #DDD;}
		.form-wrapper-2 input:focus {outline: 0;background: #fff;}
		.form-wrapper-2 input::-webkit-input-placeholder {color: #999;font-weight: normal;font-style: italic;}
		.form-wrapper-2 input:-moz-placeholder {color: #999;font-weight: normal;font-style: italic;}
		.form-wrapper-2 input:-ms-input-placeholder {color: #999;font-weight: normal;font-style: italic;}
		.form-wrapper-2 button {overflow: visible;position: relative;float: left;border: 0;padding: 0;cursor: pointer;padding:  5px; width:20%; color: #fff;text-transform: uppercase;background:#006400; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}
		.form-wrapper-2 button:hover{background:#030;}
		.form-wrapper-2 button:active,.form-wrapper-2 button:focus{background:#030; border:none;}
		.form-wrapper-2 button::-moz-focus-inner {border: 0;padding: 0;}

		@media (max-width: 1210px) 
			{
				.button_box2 {margin:0 auto; float: right; width:40%;}
				
			}

		@media (max-width: 915px) 
			{
				.button_box2 {margin:0 auto; float: right; width:50%;}
				
			}
			
		@media (max-width: 730px) 
			{
				.Logo{ float: none; width:60%; margin:0 auto;}	
				.button_box2 {margin:20px auto 10px auto; float: none; width:90%;}
				
			}
		@media (max-width: 420px) 
			{
				.Logo{ float: none; width:100%; margin:0 auto;}	
				.button_box2 {margin:20px auto 10px auto; float: none; width:100%;}
				
			}
		@media (max-width: 380px) 
			{
				.form-wrapper-2 input {width:100%; padding: 5px 15px;float: none; border:1px solid #DDD;}
				.form-wrapper-2 button {overflow: visible;position: relative;float: none; margin:10px auto;;border: 0;padding: 0;cursor: pointer;padding:  5px; width:40%; color: #fff;text-transform: uppercase;background:#006400; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}
				
			}

					
/*
	==========================================================
	DROPDOWNS-MASTER RESNSIVE MENU
	===========================================================
*/				
		#MainMenu{width:100%; margin:-20px auto 0 auto; padding:0; background:#006400; font-family:"Patua One";  }
			nav {  display: block;width:90%; margin:0 auto; padding:0;}

			.menu { display: block; }
			.menu li {  display: inline-block;  position: relative;  z-index: 100;}
			.menu li:first-child { margin-left: 0; }
			.menu li a {  text-decoration: none; padding: 10px 15px;display: block;  color: #FFF;  transition: all 0.2s ease-in-out 0s; }
			.menu li a:hover,.menu li:hover>a {color:#FFF; background: #390;}
			.menu ul {  visibility: hidden;  opacity: 0;  margin: 0;  padding: 0;  width: 200px;  position: absolute;  left: 0px;   z-index: 99;  transform: translate(0, 20px);  transition: all 0.2s ease-out; line-height:1em; text-transform:none;}
			.menu ul:after {  bottom: 100%;  left: 20%;  border: solid transparent;  content: " ";  height: 0;  width: 0;  position: absolute;  pointer-events: none;  border-color: rgba(255, 255, 255, 0);  border-bottom-color: #006400;  border-width: 6px;  margin-left: -6px;}
			.menu ul li {  display: block;  float: none;  background: none;  margin: 0;  padding: 0;}
			.menu ul li a { font-weight: normal;  display: block;  color: #FFC;  background: #006400; text-shadow:none; border-bottom:1px solid #390;}
			.menu ul li a:hover,.menu ul li:hover>a {  background:#070;  color: #FFF;}
			.menu li:hover>ul {  visibility: visible;  opacity: 1;  transform: translate(0, 0);}
			.menu ul ul {  left: 199px;  top: 0px;  visibility: hidden;  opacity: 0;  transform: translate(20px, 20px);  transition: all 0.2s ease-out;}
			.menu ul ul:after {  left: -6px;  top: 10%;  border: solid transparent;  content: " ";  height: 0;  width: 0;  position: absolute;  pointer-events: none;  border-color: rgba(255, 255, 255, 0);  border-right-color: #A00;  border-width: 6px;  margin-top: -6px;}
			.menu li>ul ul:hover {  visibility: visible;  opacity: 1;  transform: translate(0, 0);}
			.responsive-menu {  display: none;  width: 100%;  padding: 5px 15px;  background: #006400; }
			.responsive-menu:hover {  background: #390;  color: #FFF;  text-decoration: none;}
		
			.menu a.Current {color:#FFF; background: #390;}
			
			@media (max-width: 1210px) 
				{
					.menu li a {  text-decoration: none; padding: 10px 15px;display: block;  color: #FFF;  transition: all 0.2s ease-in-out 0s; }
					
				}
			
			@media (max-width: 1130px) 
				{
					.menu li a {  text-decoration: none; padding: 10px;display: block;  color: #FFF;  transition: all 0.2s ease-in-out 0s; }
					
				}
			
			@media (max-width: 1030px) 
				{
					.menu li a { font-size:0.9em;}
					
				}
			
			@media (max-width: 960px) 
				{
					.menu li a {  text-decoration: none; padding: 10px 5px;display: block;  color: #FFF;  transition: all 0.2s ease-in-out 0s; }
					
				}
			
			
			@media (max-width:867px) 
				{
					
					#MainMenu{width:100%; margin:0 auto 20px auto; padding: 0; background:#006400; font-family:"Patua One";  }
					.mainWrap {  width: auto;  padding:0;}
					.menu { display: none; }
					.responsive-menu { display: block; }
					nav {  margin: 0;  width:100%;  background:#006400; font-size:1em;}
					.menu li {  display: block;  margin: 0; border-bottom:1px solid #FFF;}
					.menu li a {  color: #FFF;}
					.menu li a:hover,.menu li:hover>a {background:#390; color:#FFF;}
					.menu ul {  visibility: hidden;  opacity: 0;  top: 0;  left: 0;  width: 100%;  transform: initial;}
					.menu li:hover>ul {  visibility: visible;  opacity: 1;  position: relative;  transform: initial;}
					.menu ul ul {  left: 0;  transform: initial;}
					.menu li>ul ul:hover { transform: initial; }

					#SliderArea{width:100%; padding:0; margin:0 auto; background:#390;}		
					
				}	
				


/*
	==========================
	HOMEPAGE SLIDER AREA
	==========================
*/
		
	#SliderArea{width:100%; padding:0; margin:-18px auto 0 auto; background:#390;}		
	.SliderArea{ margin:0 auto; width:90%; padding:0 20px;}	


			.Welcome{ width:25%; margin:0 auto; float:left; padding:20px 30px; color:#FFF; line-height:1.3em;}
			.Welcome h2 {color:#FFF; font-size:1.2em;}

			.vision, .mission{ width:100%;}
			
			@media (max-width:1355px) 
				{
					.Welcome{ width:25%; margin:0 auto; float:left; padding:10px; color:#FFF; line-height:1.3em;}
					
				}
			
			@media (max-width:1080px) 
				{
					.mission{ display:none;}					
				}
		/* THE AREA OF THE HOMEPAGE WITH THE SLIDESHOW */
			#HomeSlider{ width:70%; margin:20px auto 0 auto; float:right;}
			
			/************************************
				THE SLIDE SHOW ADAPTED FROM 
			
			 * Bootstrap v3.1.1 (http://getbootstrap.com)
			 * Copyright 2011-2014 Twitter, Inc.
			 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
			 */
			
			/*! normalize.css v3.0.0 | MIT License | git.io/normalize 
			**************************************************************/
			
			.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
			@media (min-width:768px){.container{width:750px}}
			@media (min-width:992px){.container{width:970px}}
			@media (min-width:1200px){.container{width:1170px}}
			.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
		
	.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after{content:" ";display:table}
			.clearfix:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-footer:after{clear:both}
		.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;max-width:100%;height:auto}
		.carousel{position:relative}
		.carousel-inner{position:relative;overflow:hidden;width:100%}
		.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}
		.carousel-inner>.item>img,.carousel-inner>.item>a>img{line-height:1}
		.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
		.carousel-inner>.active{left:0}
		.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
		.carousel-inner>.next{left:100%}
		.carousel-inner>.prev{left:-100%}
		.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}
		.carousel-inner>.active.left{left:-100%}
		.carousel-inner>.active.right{left:100%}
		.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}
		.carousel-indicators li{display:inline-block;width:20px;height:20px;margin:1px;text-indent:-999px; cursor:pointer;background-color: #9C0; border-radius:2em;}
		.carousel-indicators .active{margin:0;width:22px;height:22px;background-color:#390;}
		.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
		.carousel-caption .btn{text-shadow:none}
		.carousel-caption{display:block; width:50%; margin:0 auto;z-index:10; }
		.carousel-caption h1{color:#FFF; font-size:5em; text-align:center;padding:20px; text-shadow: 1px 1px 1px #404041; display:block; }
		
		
		@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}
		.carousel-caption{display:block;position:absolute;left:0; bottom:40px;z-index:10;padding: 0;}
		.carousel-indicators{bottom:5px}}
		.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
		.glyphicon-chevron-left:before{content:"\e132"}
		.glyphicon-chevron-right:before{content:"\e133"}
		
		@media screen and (max-width:768px){
		.carousel-indicators{position:absolute;bottom:5px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}
		
		.carousel-caption{display:block;position:absolute;left:0; bottom:40px;z-index:10;padding: 0;}
		
		.carousel-caption h1{ background: url(../bcg/red.png);  padding:10px; color:#FFF;text-align:center; font-size:1.1em;}
		
		}
		@media screen and (max-width:450px){
		.carousel-caption{display: none;;}
		.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px; cursor:pointer;background-color:#FFC; border-radius:2em;}
		.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#390;}
		
		}				
	
		
			@media (max-width:680px) 
				{
					.Welcome{ width:90%; margin:0 auto; float: none; padding:20px 5px; color:#FFF; line-height:1.3em; text-align:justify;}
					#HomeSlider{ width:100%; margin:0 auto; float: none;}
				}
		

			
			
	
/*
	===============
	HOME TEXT AREA
	===============
*/

	#HomeTextArea{width:100%; margin:20px auto 0 auto; padding:20px 0; line-height:2em;}		
	.HomeTextArea{width:90%;  margin:0 auto; text-align:justify; padding:0 20px;}
	
		.HomeTextArea h2{ font-size:1.5em; text-align:left;  color:#006400;}
	
	.HomeNews{float:left;width:40%; margin:0 40px 0 0; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
	

		.NewsFlashItem{ width:100%;  padding:5px 0; font-size:0.9em; border-bottom:1px dotted #EEE;}
		.NewsFlashItem2{ width:45%;  padding:5px 0; margin:30px 10px; float:left; font-size:0.9em;}
			.NewsFlashItem-l{ width:25%; float:left;}
				.NewsFlashItem-l img{ width:100%;}
			.NewsFlashItem-r{ width:70%; float:right; margin-top:-15px;}	
	
	.HomeQuickLinks{float:left;width:24%; margin:0 40px 0 0; border:1px solid #BEDFB5; text-align:left; padding:20px; background:#FFF;}
		.HomeQuickLinks li{ list-style:url(../graphics/list.png); margin:0 0 0 -20px;}

	.HomeWeather{float: right;width:22%; margin:0;}
		.HomeWeather img{width:100%; margin:0;}
				
		
			@media (max-width:1330px) 
				{
				
					.HomeNews{float:left;width:40%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeQuickLinks{float:left;width:24%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeWeather{float: right;width:22%; margin:0;}
				
				}

		
			@media (max-width:1020px) 
				{
				
					.HomeNews{float:left;width:40%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeQuickLinks{float:left;width:24%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeWeather{float: right;width:22%; margin:0;}
				
				}

		
			@media (max-width:695px) 
				{
				
					.HomeNews{float: none;width:90%; margin:20px auto; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeQuickLinks{float:left;width:50%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeWeather{float:right;width:40%; margin:20px auto;}
				
				}
		
			@media (max-width:490px) 
				{
				
					.HomeNews{float: none;width:90%; margin:20px auto; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeQuickLinks{float: none;width:90%; margin:20px auto; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeWeather{float: none;width:90%; margin:20px auto;}
				
				}


	
/*
	===============
	INTRO TEXT AREA
	===============
*/

	#IntroArea{width:100%; margin:20px auto; padding:0; line-height:1.5em;}		
	.IntroArea{width:90%;  margin:0 auto; text-align:justify; padding:0 20px;}
	
		.IntroArea h2{ font-size:1.5em; font-weight:normal; text-align:center;  color:#6C0;}
		
	.IntroBox{float:left;width:22%; margin:0 40px 0 0; padding-bottom:10px; background:#FFF;}
	.IntroBox2{float:left;width:22%; margin:0; padding-bottom:10px; background:#FFF;}
		.IntroBox img, .IntroBox2 img{width:100%;}	


	@media screen and (max-width:1130px)
		{
			.IntroBox{float:left;width:22%; margin:0 20px 0 0; padding-bottom:10px; background:#FFF;}
		}

	@media screen and (max-width:655px)
		{
			.IntroBox, .IntroBox2{float:left;width:45%; margin:20px 20px 0 0; padding-bottom:10px; background:#FFF;}
				.IntroArea h2{ font-size:1.2em; font-weight:normal; text-align:center;  color:#6C0;}
		}

	@media screen and (max-width:470px)
		{
			.IntroBox, .IntroBox2{float:left;width:40%; margin:20px 20px 0 0; padding-bottom:10px; background:#FFF;}
				.IntroArea h2{ font-size:1.2em; font-weight:normal; text-align:center;  color:#6C0;}
		}

	@media screen and (max-width:350px)
		{
			.IntroBox, .IntroBox2{float: none;width:90%; margin:20px auto 0 auto; padding-bottom:10px; background:#FFF;}
		}

	
/*
	===============
	HOME CONTACT AREA
	===============
*/

	#HomeContact{width:100%; margin:20px auto; padding:20px 0; line-height:1.5em; /*background:#FFF;*/}		
	.HomeContact{width:90%;  margin:0 auto; text-align:justify; padding:0 20px;}

	.TheContacts{float:left;width:50%; margin:0 40px 0 0;}
		.TheContacts img{width:100%; margin:0 auto 10px auto;}
	.TheMap{float: right;width:45%; border:4px solid #FFF;}
		.TheMap iframe{width:100%;}
			

	@media screen and (max-width:1089px)
		{
		
			.TheContacts{float:left;width:50%; margin:0 20px 0 0;}
			.TheMap{float: right;width:45%; border:4px solid #FFF;}
		
		}


	@media screen and (max-width:646px)
		{
		
			.TheContacts{float:left;width:50%; margin:0 20px 0 0;}
			.TheMap{float: right;width:40%; border:4px solid #FFF;}
		
		}

	@media screen and (max-width:450px)
		{
		
			.TheContacts{float: none;width:90%; margin:0 auto 20px auto; text-align:left;}
			.TheMap{float:none;width:90%; border:4px solid #FFF;}
		
		}

	
/*
	===============
	MAIN TEXT AREA
	===============
*/


	#MainTextArea{width:100%; margin:20px auto; padding:0; line-height:1.5em; min-height:350px; text-align:justify;}		
	.MainTextArea{width:90%;  margin:0 auto; text-align:justify; padding:20px;}
	
	.MainTextArea li { list-style:url(../graphics/list.png); line-height:2em;}
	
  	
	/** CONTACT FORM **/
	.ContactForm {width:96%; display:block; margin:20px auto; padding:20px; background:#CCF1AB;}
	.ContactForm2 {width:96%; display:block; margin:20px auto; padding:20px; background: #ACD5A8;}
		.ContactFormLeft {width:45%; display:block; float:left; margin:0 40px 0 auto;}
		.ContactFormRight {width:50%; display:block; float: right; margin:0 auto;}
	
		.field {display: block; width:100% ; margin:20px auto;}
		label {display: block; text-align:left;    width:100%; padding:5px 0; font-weight:bold;	 }
		.input{   padding: 5px;    border: 1px solid #9C0;    width:90%;  }
			.button,.button a{background-color: #9C0; font-weight:bold; font-size:1.5em; color: #000; margin:10px 0;  text-decoration:none; padding:20px; border:none;}
				.button:hover,	.button a:hover{ 	background-color: #090; color: #FFF;}		
		
		/** ERROR AND SUCCESS MESSAGE BOXES **/
		.error{ color:#FFF;  width:90%; padding: 10px;   background: #F00 ; margin:0 auto; line-height:1em;}
			.error p, .successful p { width:100%;}
					.successful{ color:#000; width:90%;   padding: 10px;  background: #9C0; margin:0 auto;}
     


		/* THE BOXES FOR PUBLISHED ITEMS */
		.pbox{ float:left; margin:20px 10px; text-align:center; width:28%;}
		.pbox2{ float:left; margin:20px 10px; text-align:center; width:20%;}
			.pbox img, .pbox2 img{ width:100%;  -webkit-box-shadow: 0 8px 6px -6px #000; -moz-box-shadow: 0 8px 6px -6px #000;	        box-shadow: 0 8px 6px -6px #000; margin:10px 0; }
	
			
/*
	===============
	FOOTER AREA
	===============
*/

	#Footer{width:100%; margin:0 auto; padding:10px 0; line-height:1em; background:#FFF; font-size:0.8em;  border-top:1px solid #690;}		
	.Footer{width:90%;  margin:0 auto; text-align:justify; text-align: center; padding:0 20px;}
	
/*
	================
	BACK TO THE TOP
	================
*/

	
	.back-to-top {position: fixed; bottom:0; right: 10px;display: none;}
		a.back-to-top ,	a:visited.back-to-top  {background: #690;  padding:2px; }
			a:hover.back-to-top , a.selected.back-to-top { background: #060;}