body
{
	margin: 0 auto;
	background:#fff;
	font-family: 'Myriad Pro', Arial;
	font-size: 17px;
	line-height: 20px;
	color: #666;
}

h1,h2,h3,h4,h5,h6,img,p,ul,li,table
{
margin:0;
padding:0;
border:0;
}

hr
{
	height: 1px;
	color: #dfdddc;
	border: none;
	background-color: #dfdddc;
	width: 100%;
	clear: both;
}

a
{
	color: #24549e;
	text-decoration: none;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

a:hover
{
	color: #000;
	text-decoration: none;
}


#banner
{
	float: left;
	width: 94%;
	background: #fff;
	min-height: 90px;
	padding: 1% 3% 1% 3%;
	-webkit-box-shadow: 1px 1px 10px 1px #555;
	box-shadow: 1px 1px 10px 1px #555;
}

	#banner span
	{
		float: left;
	}

	#banner span.social-top
	{
		width: 3%;
		padding-top: 32px;
	}

	#banner span.logo
	{
		width: 25%;
		
	}

	#banner span.navigation
	{
		width: 72%;
		margin-top: 5px;
	}

		#banner span.navigation ul
		{
			float: right;
		}

		#banner span.navigation ul li
		{
			list-style: none;
			float: left;
			margin-top: 20px;
		}

			#banner span.navigation ul li a
			{
				color: #999382;
				font-size: 17px;
				display: block;
				padding: 15px 10px 15px 10px;
			}

			#banner span.navigation ul li a:hover
			{
				color: #fff;
				font-size: 17px;
				display: block;
				padding: 15px 10px 15px 10px;
			}

			#banner span.navigation ul li ul li
			{
				margin: 0;
				border-bottom: 1px dotted #fff;
			}

			#banner span.navigation ul li ul li img
			{
				width: 100%;
				margin-bottom: 5px;
			}

			#banner span.navigation ul li ul
			{
				margin: 0;
				padding: 0;
				background: #84a4de;
				font-size: 13px;
				text-transform: normal;
			}

			#banner span.navigation ul li ul li a
			{
				margin: 0;
				padding: 0;
				background: #f4f4f4;
				font-size: 14px;
				padding: 15px;
				text-transform: normal;
				-webkit-border-radius: 0 0 0 0;
				border-radius: 0 0 0 0;
			}

			#banner span.navigation ul li ul li a:hover
			{
				margin: 0;
				padding: 0;
				background: #0066cc;
				color: #fff;
				font-size: 14px;
				padding: 15px;
				text-transform: normal;
			}


#content-inner
{
	float: left;
	width: 84%;
	margin: 5%;
	border: 1px solid #ccc;
	padding: 5% 3% 5% 3%;
	font-size: 16px;
}


	#content-inner h1
	{
		color: #c9830e;
		padding-bottom: 15px;
		margin-bottom: 25px;
		font-weight: normal;
		font-size: 38px;
		border-bottom: 1px dotted #ccc;
		line-height: 38px;
	}


	#content-inner h2
	{
		color: #4973a0;
		margin-bottom: 8px;
		font-weight: normal;
		font-size: 17px;
	}


	#content-inner ul
	{
		margin-left: 30px;
		margin-bottom: 30px;
	}

#content-inner p{
    margin-bottom: 15px;
}

	#content-inner img
	{
		float: right;
		margin-left: 30px;
		margin-bottom: 30px;
		padding: 5px;
		border: 1px solid #ccc;
		height: auto;
	}


#animation
{
	float: left;
	width: 100%;
	min-height: 550px;
}


#what-we-do
{
	float: left;
	width: 94%;
	background: #fff;
	padding: 0 3% 1% 3%;
	margin-top: 1%;
}

	#what-we-do h1
	{
		font-size: 40px;
		color: #000;
		text-align: center;
		margin-bottom: 30px;
		text-transform: uppercase;
	}

	#what-we-do ul li
	{
		float: left;
		list-style: none;
		width: 21%;
		text-align: center;
		border: 1px solid #ccc;
		padding: 2% 1% 2% 1%;
		margin-right: 1.5%;
		font-weight: bold;
		font-size: 15px;
		min-height: 140px;
	}

	#what-we-do ul li:last-child
	{
		float: left;
		list-style: none;
		width: 21%;
		text-align: center;
		border: 1px solid #ccc;
		padding: 2%;
		margin-right: 0;
	}

	#what-we-do ul li img
	{
		margin-bottom: 10px;
		width: 30px;
	}

	


#sdg-eng
{
	float: left;
	width: 91.5%;
	margin: 0 3% 1% 3%;
	text-align: center;
	font-style: italic;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	border: 1px solid #eee;
	padding: 1%;
}


#about-engage
{
	float: left;
	width: 94%;
	background: url(../images/bg-about.gif) 0 0 repeat-x #ee8a07;
	color: #fff;
	text-align: center;
	padding: 2% 3% 3% 3%;
	margin-top: 0.5%;
	font-size: 20px;
	line-height: 25px;
}


	#about-engage strong
	{
		font-weight: bold;
		font-size: 24px;
		line-height: 30px;
	}


	#about-engage a
	{
		color: #fff83b;
		border: 1px solid #fff83b;
		text-align: center;
		padding: 10px 55px 10px 55px;
		-webkit-border-radius: 30px 30px 30px 30px;
		border-radius: 30px 30px 30px 30px;
	}


	#about-engage a:hover
	{
		color: #512304;
		border: 1px solid #fff83b;
		text-align: center;
		padding: 10px 55px 10px 55px;
		-webkit-border-radius: 30px 30px 30px 30px;
		border-radius: 30px 30px 30px 30px;
		background: #fff83b;
	}


.block-support
{
	float: left;
	width: 94%;
	padding: 3% 3% 3% 3%;
	text-align: center;
}


.block-support a.volunteer-now
{
	background: #24549e;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	padding: 12px 70px 10px 70px;
	-webkit-border-radius: 25px 25px 25px 25px;
	border-radius: 25px 25px 25px 25px;
	margin-right: 10px;
}


.block-support a.donate-now
{
	background: #f0a226;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	padding: 12px 70px 10px 70px;
	-webkit-border-radius: 25px 25px 25px 25px;
	border-radius: 25px 25px 25px 25px;
	margin-right: 10px;
}


#block-problem
{
	float: left;
	width: 100%;
	background: url(../images/img-problem.jpg) 0 0 no-repeat;
	background-size: 100%;
	color: #fff;
	height: 280px;
}


	#block-problem span
	{
		float: left;
		width: 90%;
		padding: 5% 5% 7% 5%;
		background: url(../images/bg-problem.png) 0 0 repeat-y;
	}


	#block-problem p
	{
		width: 50%;
	}


	#block-problem p strong
	{
		font-weight: bold;
		text-transform: uppercase;
		font-size: 30px;
		line-height: 40px;
	}


#block-solution
{
	float: left;
	width: 100%;
	background: url(../images/img-solution.jpg) 0 0 no-repeat;
	background-size: 100%;
	color: #fff;
	text-align: right;
	margin-top: 5px;
}


	#block-solution span
	{
		float: right;
		width: 90%;
		padding: 7% 5% 7% 5%;
		background: url(../images/bg-solution.png) top right repeat-y;
	}


	#block-solution p
	{
		width: 50%;
		float: right;
	}


	#block-solution p strong
	{
		font-weight: bold;
		text-transform: uppercase;
		font-size: 30px;
		line-height: 40px;
	}


#block-how
{
	float: left;
	width: 90%;
	background: url(../images/bg-how.jpg) 0 0 no-repeat;
	background-size: 100%;
	color: #fff;
	margin-top: 5px;
	padding: 5%;
}


	#block-how span
	{
		float: left;
		text-align: center;
		width: 90%;
		padding: 5%;
		border: 1px solid #797a7f;
		font-size: 23px;
		line-height: 30px;
		margin-bottom: 30px;
	}


		#block-how span h2
		{
			font-size: 50px;
			line-height: 60px;
			text-transform: uppercase;
		}


		#block-how span a
		{
			border: 1px solid #ccc;
			padding: 10px 50px 10px 50px;
			-webkit-border-radius: 25px 25px 25px 25px;
			border-radius: 25px 25px 25px 25px;
			color: #fff;
		}


		#block-how span a:hover
		{
			border: 1px solid #ccc;
			padding: 10px 50px 10px 50px;
			-webkit-border-radius: 25px 25px 25px 25px;
			border-radius: 25px 25px 25px 25px;
			color: #666;
			background: #fff;
		}

.arrow-msn-vsn
{
	position: absolute;
	left: 47.5%;
	bottom: -25px;
}





#block-vsn-msn
{
	float: left;
	width: 100%;
	background: url(../images/bg-vision.jpg) 0 0 no-repeat;
	background-size: 100%;
}


#vision-mission
{
	float: left;
	width: 84%;
	margin: 3% 5% 2% 5%;
	padding: 0 3% 0 3%;
	background: #24549e;
	-webkit-border-radius: 25px 25px 25px 25px;
	border-radius: 25px 25px 25px 25px;
	position: relative;
	opacity: 0.8;
}


	#vision-mission span
	{
		float: left;
		width: 43%;
		text-align: center;
		color: #fff;
		padding: 4% 4% 4% 3%;
		min-height: 130px;
	}


	#vision-mission span.vsn-box
	{
		border-left: 1px solid #fff;
		width: 42.8%;
	}


	#vision-mission span strong
	{
		font-weight: bold;
		text-transform: uppercase;
		font-size: 30px;
		line-height: 40px;
	}


#desired-impact
{
	float: left;
	width: 80%;
	padding: 3% 10% 5% 10%;
	text-align: center;
	font-size: 25px;
	line-height: 30px;
	border-bottom: 1px solid #ccc;
			color: #000;
}


		#desired-impact h3
		{
			font-size: 50px;
			line-height: 60px;
			text-transform: uppercase;
			color: #000;
		}


		#desired-impact a
		{
			border: 1px solid #f0a226;
			padding: 10px 50px 10px 50px;
			-webkit-border-radius: 25px 25px 25px 25px;
			border-radius: 25px 25px 25px 25px;
			color: #f0a226;
		}


		#desired-impact a:hover
		{
			border: 1px solid #f0a226;
			padding: 10px 50px 10px 50px;
			-webkit-border-radius: 25px 25px 25px 25px;
			border-radius: 25px 25px 25px 25px;
			color: #fff;
			background: #f0a226;
		}


#target-group
{
	float: left;
	width: 90%;
	padding: 3% 5% 8% 5%;
	margin-top: 2%;
	text-align: center;
	background: #24549e;
	color: #bde5ff;
	font-size: 22px;
	line-height: 25px;
}


		#target-group h4
		{
			font-size: 40px;
			line-height: 60px;
			text-transform: uppercase;
			color: #fff;
		}


#whats-new
{
	float: left;
	width: 80%;
	padding: 5% 5% 0 5%;
	margin: 2% 5% 0 5%;
	position: relative;
	top: -110px;
	background: #fff;
	height: 190px;
}


	#whats-new span
	{
		float: left;
	}


	#whats-new span.titleupdates
	{
		width: 20%;
		padding-top: 8%;
		margin-right: 5%;
	}


		#whats-new span.titleupdates strong
		{
			color: #333;
			font-size: 33px;
			line-height: 35px;
			text-transform: uppercase;
		}


	#whats-new span.contentupdates
	{
		width: 75%;
	}


		#whats-new span.contentupdates ul li
		{
			float: left;
			list-style: none;
			width: 29%;
			padding: 0 0 2% 0;
			border-bottom: 2px solid #0078ff;
			margin-right: 5%;
		}


		#whats-new span.contentupdates ul li:last-child
		{
			float: left;
			list-style: none;
			width: 28%;
			padding: 0 0 2% 0;
			border-bottom: 2px solid #0078ff;
			margin-right: 0;
		}


		#whats-new span.contentupdates ul li img
		{
			margin-bottom: 10px;
		}


		#whats-new span.contentupdates ul li a
		{
			text-transform: uppercase;
		}


#photo-gallery
{
	float: left;
	width: 90%;
	padding: 9% 5% 9% 5%;
	background: #baa279;
	margin-top: 3%;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}


	#photo-gallery ul
	{
		margin: 0 auto;
		width: 90%;
	}


	#photo-gallery ul li
	{
		float: left;
		list-style: none;
		margin-right: 2%;
		margin-bottom: 3%;
	}


	#photo-gallery ul li img
	{
		border: 1px solid #fff;
	}


	#photo-gallery span
	{
		margin: 0 auto;
		padding: 10px;
		border: 1px solid #fff;
		margin-left: 20%;
		margin-right: 20%;
		text-transform: none;
		text-align: center;
	}


	#photo-gallery span img
	{
		position: relative;
		top: 5px;
	}


#footer
{
	float: left;
	width: 90%;
	padding: 1% 5% 1% 5%;
	margin-bottom: 3%;
	font-size: 15px;
	color: #a28f6d;
	border-top: 1px solid #d0c7b6;
	border-bottom: 1px solid #d0c7b6;
}


		#footer span
		{
			float: right;
			color: #faa21c;
		}


			#footer span a
			{
				color: #faa21c;
			}


			#footer span a:hover
			{
				color: #faa21c;
				text-decoration: underline;
			}




/* For Table  */



@media
	only screen and (max-width: 1025px),
	(min-device-width: 1025px) and (max-device-width: 1800px)  {
		
		th
		{
			text-align: left;
			border: 1px solid #eee;
			border-collapse: collapse;
			background: #f5f5f5;
		}

		td {
			border: 1px solid #eee;
			border-collapse: collapse;
			font-size: 15px;
			line-height: 21px;
		}

		td img {
			float: none !important;
		}

	}


@media
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 800px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr { border: 1px solid #eee; }

		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
		}

		td img {
			float: left;
		}

		tr th {
			text-align: left !important;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body {
			padding: 0;
			margin: 0;
			width: auto; }
		}

	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body {
			width: auto;
		}
	}



.smoothScroll {
  text-decoration: none;
    font-family: Segoe UI;
  margin: 24px;
}