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

/*
	=========================================================================================================
	CSS FOR Eagles’ Wings Ministries International Website developed by Onswaziline in January 2018. 
	Contcat info@onswaziline.com for more details.
	
	COLOR CODES FROM LOGO
	
	LIGHT BLUE 		#28588C
	YELLOW 			#FBE022
	BROWN 			#5A382C

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


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

	@import url(https://fonts.googleapis.com/css?family=Quicksand);
	@import url(https://fonts.googleapis.com/css?family=Montserrat);
	@import url(https://fonts.googleapis.com/css?family=Raleway);


/*
	==========================
	GENERAL WEB PAGE SETTINGS
	==========================
*/

	
body{ padding:0; margin:0;  font-family:"Quicksand"; font-size:16px; color:#444; line-height:1.5em; background:#FEFEFE;}

img {border:0;}
.clearfix{ clear:both;}

a, a:link{ color: #28588C; text-decoration:none;}
a:active, a:hover{ color:#5A382C; text-decoration: underline;}

h1{font-size:1.6em; text-transform:uppercase;  color:#28588C;  text-align:left;font-family:"Raleway";}
h2{font-size:1.4em;   color:#5A382C;font-family:"Raleway";text-align:left;}
h3{font-size:1.2em;  color:#28588C;font-family:"Raleway"; text-align:left;}

.pub-date { font-size: 14px; color: #666; font-weight: normal !important; text-transform: capitalize; }

/*
	===============
	LINK BUTTONS
	===============
*/
	
	a.btn.btn-blue { padding:10px 20px;	background-color: #28588C;	color: #FFF; font-size:0.9em;}
			a.btn.btn-blue:hover {		background-color:#FBE022;color: #201B77; text-decoration:none;}
	
	a.btn.btn-yellow { padding:10px 20px;	background-color:#FBE022; color: #201B77; font-size:0.9em;}
			a.btn.btn-yellow:hover {		background-color:#28588C;	color: #FFF;text-decoration:none;}
	
	a.btn.btn-brown { padding:10px 20px;	background-color:#5A382C; color: #201B77; font-size:0.9em;}
			a.btn.btn-brown:hover {		background-color:#28588C;	color: #FFF;text-decoration:none;}

			
	a.btn.btn-one {font-weight:bold; }
	a.btn.btn-one:hover {text-decoration:none;}

/****** THE SHARE BUTTONS ON THE TOP RIGHT OF PAGE ********/
.ShareButtons {width:25%; margin:0 auto; float:right; }
.ShareButtons img {width:30px; margin:0.2em 0 0 5px; float:right; }	
										
@media (max-width:1130px) 
{	
	.ShareButtons {width:35%;}			
}											
@media (max-width:820px) 
{	

	.ShareButtons{clear:both; float:none; width:100%; margin:0 auto; }			
}

			
/*
	==========================
	TOP AREA WITH LOGO & MENU
	==========================
*/
		
	#TopArea{width:100%; padding:0;}		
	.TopArea{ margin:0 auto; width:80%; padding:0;}		

		/* SOCIAL MEDIA ICONS AT THE TOP */
		.TheSocialMedia{width:20%; margin:0;float:right;  padding:40px 0 0 0;}
			.socialmedia{ width:30px; float:right; margin:0 10px 0 0; }
			.socialmedia img{ width:100%; }	
			
		/* LOGO AT THE TOP */	
		.Logo{ width:15%; float:left; margin:0 20px 0 auto; }	
			.Logo img{ width:100%;}
				
		/* LOGO TEXT AT THE TOP */	
		.LogoText{ width:60%; float:left; font-size:2.5vw; color:#28588C; padding:40px 0 0 0;}	
	
		@media (max-width:1040px) 
			{
				.LogoText{width:55%;  font-size:2.4vw;}
				.TheSocialMedia{width:25%; margin:0;float:right;  padding:40px 0 0 0;}				
			}		
	
		@media (max-width:830px) 
			{
				.Logo{ width:20%; float:left; margin:0 20px 0 auto; }	
				.LogoText{ width:74%; float:left; font-size:3vw; color:#28588C; padding:40px 0 0 0;}
				.TheSocialMedia{width:100%; margin:0;float:none;clear:both;  padding:20px 0 0 0;}				
			}	
	
		@media (max-width:670px) 
			{
				.LogoText{ width:74%; float:left; font-size:3vw; color:#28588C; padding:20px 0 0 0;}		
			}	
		@media (max-width:600px) 
			{
				.LogoText{ width:75%; float:left; font-size:3.3vw;}		
			}			
	
		@media (max-width:530px) 
			{
				.Logo{ width:60%; float:none; margin:0 auto 20px auto; }	
				.LogoText{ width:100%; float:none;clear:both; text-align:center; font-size:4vw; color:#28588C; padding:0;}	
				.TheSocialMedia{width:100%; margin:0 auto 20px auto; }
			}
		

			
	/*	RESPPONSIVE MENU TAKEN FROM https://www.jqueryscript.net/menu/Responsive-Flat-Dropdown-Menu-with-jQuery-CSS3.html
	*/	
		
		nav {clear:both;  display: block; margin:20px auto; padding:20px 0 0 0; width:100%; font-family:"Raleway"; border-top:1px solid #CCC; }
			.menu { display: block;width:100%; padding:0; margin:0 auto;  }

				/** MAIN LINK**/
				.menu li {  display: inline-block;  position: relative;  z-index: 100;}
				.menu li:first-child { margin-left: 0; }
				.menu li a {text-decoration: none; text-transform:uppercase; font-size:1vw;  padding:10px 0 20px 0;  display: block;  color: #5A382C;  transition: all 0.2s ease-in-out 0s; border-bottom:1px solid #EEE; margin:0 10px; }
				.menu li a:hover,.menu li:hover>a {  color: #28588C; border-bottom:1px solid #28588C; }
				
				/** 1ST LEVEL SUB MENU  **/
				.menu ul {  visibility: hidden;  opacity: 0;  margin: 0;  padding: 0;  width: 200px; font-size:0.8em;  position: absolute;  left: 0px;  background: #28588C;  z-index: 99;  transform: translate(0, 20px);  transition: all 0.2s ease-out;}
				.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: #28588C;  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: #FFF;}
				.menu ul li a:hover,.menu ul li:hover>a {color:#FBE022; }

				.menu li:hover>ul {  visibility: visible;  opacity: 1;  transform: translate(0, 0);}
				.menu ul ul {  left: 199px; width:300px; 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: #28588C;  border-width: 6px;  margin-top: -6px;}
				.menu li>ul ul:hover {  visibility: visible;  opacity: 1;  transform: translate(0, 0);}

					
				/** RESPONSIVE MENU 'HEADER'  **/
				.responsive-menu {  display: none;  width: 100%;  padding:10px; background:none; font-weight:bold;   color: #28588C;  text-transform: uppercase; text-decoration: none;}
				.responsive-menu:hover { color: #5A382C;    text-decoration: none;}
					
				/** HIGHLIGHTER   **/
				.menu li a.Current { color:#28588C; font-weight:bold;border-bottom:1px solid #FBE022; }

				
		/** 1ST STEP RESPONSIVE MENU **/		

		@media (max-width:1220px) 
			{
				.menu li a {margin:0 5px; }			
			
			}
			
		/** 4TH STEP RESPONSIVE MENU **/		
		@media (max-width: 1000px) 
			{
				/** HIGHLIGHTER   **/
				.menu li a.Current { color:#FBE022; font-weight:bold;border-bottom:none; }				
				
				.mainWrap {  width: auto;  padding:0;}
				.menu { display: none; margin:0;background: none; background:#28588C ;padding10px;  }
				.responsive-menu { display: block; font-size:3vw;}
				 
				.menu li {  display: block;  margin: 0;}
				.menu li a {  background:#28588C ;  color:#FFF; font-size:2vw;  border-bottom:1px solid #FBE022;padding:10px 5px 10px 20px; }
				.menu li a:hover,.menu li:hover>a {  color: #FBE022; }
				.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; }
						
				
			}
		
				
		/** 5TH STEP RESPONSIVE MENU **/		
		@media (max-width:600px) 
			{
				.menu {font-size:4vw;}			
				.menu li a {font-size:3vw; }			
			}
			
		
				
		/** 6TH STEP RESPONSIVE MENU **/		
		@media (max-width:380px) 
			{
				.menu {font-size:6vw;}			
				.menu li a {font-size:4vw; }			
			}
			
			
/*
=================================================================
	THE AREA OF THE HOMEPAGE WITH THE SLIDESHOW
=================================================================
*/
	#HomeSlider{ width:100%; margin:0 auto; clear:both;}
	
		/************************************
			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;right:5%;z-index:2;width:40%;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;border-radius:2em;cursor:pointer;background-color:#28588C;}
	.carousel-indicators .active{margin:0;width:22px;height:22px;background-color:#FBE022;}
	.carousel-caption{position:absolute;left:0;right:0; margin:auto;bottom:40px;z-index:2;padding-top:20px;padding-bottom:40px;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:2.5vw;  text-align:center;padding:10px; text-shadow: 1px 1px 1px #000; display:block; border:none; }
	.carousel-caption h3{color:#FFF; font-size:2vw;  text-transform:uppercase; text-align:center;padding:10px; text-shadow: 1px 1px 1px #000; display:block; }
	
	
	a.btn.btn-Slider { padding:10px 20px ; margin:10px auto;background-color:#28588C;color:#FFF; font-size:1.5vw;  font-weight:bold; font-family:"Raleway";-webkit-box-shadow: 1px 1px 1px 0px #777, -1px -1px 1px 0px #777; -moz-box-shadow:1px 1px 1px 0px #777, -1px -1px 1px 0px #777; box-shadow: 1px 1px 1px 0px #777, -1px -1px 1px 0px #777;  }
	a.btn.btn-Slider:hover {background-color:#FBE022; color:#28588C; text-decoration:none;-webkit-box-shadow: 1px 1px 1px 0px #FFF, -1px -1px 1px 0px #FFF; -moz-box-shadow:1px 1px 1px 0px #FFF, -1px -1px 1px 0px #FFF; box-shadow: 1px 1px 1px 0px #FFF, -1px -1px 1px 0px #FFF; }

	
	@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:2;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:800px)
		{
		
			.carousel-caption{position:absolute;left:0;right:0; margin:auto;bottom:20px;z-index:2;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:90%; margin:0 auto;z-index:10; }
			.carousel-caption h1{color:#FFF; font-size:3vw;  text-align:center;padding:10px; text-shadow: 1px 1px 1px #000; display:block; border:none; }
			.carousel-caption h3{color:#FFF; font-size:2.5vw;  text-transform:uppercase; text-align:center;padding:10px; text-shadow: 1px 1px 1px #000; display:block; }
	
			a.btn.btn-Slider { padding:10px 20px ; margin:10px auto; font-size:2vw;  }

		}

	
	@media screen and (max-width:610px)
		{
		
			.carousel-caption{position:absolute;left:0;right:0; margin:auto;bottom:5px;z-index:2;padding-top:10px;padding-bottom:10px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}


		}

	
	@media screen and (max-width:520px)
		{
		
			.carousel-caption{position:absolute;left:0;right:0; margin:auto;bottom:5px;z-index:2;padding-top:0;padding-bottom:0;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:90%; margin:0 auto;z-index:10; }
			.carousel-caption h1{color:#FFF; font-size:4vw;  text-align:center;padding:5px; text-shadow: 1px 1px 1px #000; display:block; border:none; }
			.carousel-caption h3{color:#FFF; font-size:3.5vw;  text-transform:uppercase; text-align:center;padding:5px; text-shadow: 1px 1px 1px #000; display:block; }
	
			a.btn.btn-Slider { padding:5px 10px ; margin:10px auto; font-size:3vw;  }

		}

	
	@media screen and (max-width:430px)
		{
		
			.carousel-caption h1{display:none;}

		}		

	
	@media screen and (max-width:350px)
		{
		
						a.btn.btn-Slider {display:none;}

		}		

		
/*
	==================================
	APOSTLE'S INTRO AREA - HOMEPAGE
	==================================
*/
		
	#ApostlesIntro{width:100%; padding:40px 0;margin:0 auto; }		
	.ApostlesIntro{ margin:0 auto; width:80%; padding:0;}			

	.ApostlesIntroImg{float:left; margin:0 40px 0 auto; width:30%; padding:0;}	
		.ApostlesIntroImg img{width:100%; border:5px solid #E7E3D8;}	
	
	.ApostlesIntroText{float:right; margin:0 auto; width:55%; padding:0 0 0 80px; text-align:justify; background:url(../graphics/quotes.jpg) no-repeat;}	

		
	
		@media (max-width:1050px) 
			{
				.ApostlesIntroImg{float:left; margin:0 40px 0 auto; width:30%; padding:0;}	
				.ApostlesIntroText{float:right; margin:0 auto; width:50%; padding:0 0 0 80px; text-align:justify; background:url(../graphics/quotes.jpg) no-repeat;}		
			}		
	
		@media (max-width:830px) 
			{
				.ApostlesIntroText{float:right; margin:0 auto; width:45%; padding:0 0 0 80px; text-align:justify; background:url(../graphics/quotes.jpg) no-repeat;}		
			}	
					
		@media (max-width:650px) 
			{
				.ApostlesIntroImg {float:none; margin:20px auto; display:block; width:100%; padding:0; text-align:justify;}	
				.ApostlesIntroText{float:none; margin:20px auto; display:block; width:80%; padding:0 0 0 80px; text-align:justify; background:url(../graphics/quotes.jpg) no-repeat;}					
			}	
			
			
/*
	==================================
	MINISTRIES INTRO AREA - HOMEPAGE
	==================================
*/
		
	#MinistriesIntro{width:100%; padding:40px 0;margin:0 auto; background: url(../bcg/bible.jpg);background-size: cover;}		
	.MinistriesIntro{ margin:0 auto; width:70%; padding:40px;background: url(../bcg/opac-white.png);}		

	.MinistriesIntro h1{ text-align:center;} 
	
	
	.MinistriesIntroText{float:left; margin:20px; width:20%; padding:10px 0 30px 0;border-bottom:1px solid #5A382C; text-align:center;}	

	.MinistriesIntroText h3 {font-size:1.1vw; color:#5A382C; }

					
	@media (max-width:1170px) 
		{
			.MinistriesIntroText{float:left; margin:10px; width:20%; padding:10px 0 20px 0;border-bottom:1px solid #5A382C; text-align:center;}	
				.MinistriesIntroText h3 {font-size:1.2vw; color:#5A382C; }
		}		

					
	@media (max-width:940px) 
		{
			.MinistriesIntroText{float:left; margin:10px; width:30%; padding:10px 0 20px 0;border-bottom:1px solid #5A382C; text-align:center;}	
				.MinistriesIntroText h3 {font-size:1.4vw; color:#5A382C; }
		}			

					
	@media (max-width:880px) 
		{
			.MinistriesIntroText{float:left; margin:10px; width:40%; padding:10px 0 20px 0;border-bottom:1px solid #5A382C; text-align:center;}	
				.MinistriesIntroText h3 {font-size:2vw; color:#5A382C; }
		}	

					
	@media (max-width:620px) 
		{
				.MinistriesIntroText h3 {font-size:2.5vw; color:#5A382C; }
		}	


					
	@media (max-width:460px) 
		{
			.MinistriesIntroText{float:none; clear:both; margin:5px auto; width:100%; padding:10px 0 ;border-bottom:1px solid #5A382C; text-align:center;}	
			.MinistriesIntroText h3 {font-size:4vw; color:#5A382C; }
		}	
		
/*
	==================================
	INTRO AREA - HOMEPAGE
	==================================
*/
		
	#IntroArea{width:100%; padding:40px 0;margin:0 auto;}		
	.IntroArea{ margin:0 auto; width:80%; padding:0;}		
		
		.IntroAreaBox{padding:0; float:left; width:25%; margin:20px;text-align:center;}
			.IntroAreaBox img, .IntroAreaBox iframe{ width:100%;}		
		
			.IntroAreaBox h1, .IntroAreaTimes h1, .IntroAreaBoxEvents h1{font-size:1.3vw; }
			
		.IntroAreaTimes{padding:0; float:left; width:36%; margin:20px;}
			.IntroAreaTimes li{ list-style:none; margin:0 0 5px -20px; border-bottom:1px dotted #5A382C; padding:5px 0;}
			
		.IntroAreaBoxEvents{padding:0; float:right; text-align:left;width:25%; margin:20px 0 20px 20px;}	
			.IntroAreaBoxEvents li{ list-style:none; margin:0 0 5px -20px; border-bottom:1px dotted #5A382C; padding:5px 0;}

								
	@media (max-width:920px) 
		{		
			.IntroAreaBox, .IntroAreaTimes{padding:0; float:left; width:25%; margin:20px;text-align:center;}			
			.IntroAreaBoxEvents{padding:0; float:right; text-align:left;width:33%; margin:20px 0 20px 20px;}	
		
			.IntroAreaBox h1, .IntroAreaTimes h1, .IntroAreaBoxEvents h1{font-size:2vw; } 			
		}	
								
	@media (max-width:780px) 
		{			
			.IntroAreaBox, .IntroAreaTimes{padding:0; float:left; width:40%; margin:20px;text-align:center;}			
			.IntroAreaBoxEvents{padding:0; float:none;clear:both; text-align:left;width:100%; margin:20px auto;}	
		
			.IntroAreaBox h1, .IntroAreaTimes h1, .IntroAreaBoxEvents h1{font-size:2vw; } 				
		}			
								
	@media (max-width:600px) 
		{
			.IntroAreaBox h1, .IntroAreaTimes h1, .IntroAreaBoxEvents h1{font-size:3vw; } 				
		}	

								
	@media (max-width:530px) 
		{
			.IntroAreaBox, .IntroAreaTimes{padding:0; float:none;clear:both; width:100%; margin:20px auto;}					
		}	
								
	@media (max-width:450px) 
		{
			.IntroAreaBox h1, .IntroAreaTimes h1, .IntroAreaBoxEvents h1{font-size:4vw; } 				
		}				
		
/*
	==================================
	PAGE THEME IMAGE
	==================================
*/
		
	#PageTheme {width:100%; padding:0;margin:0 auto; }	
		#PageTheme img{width:100%;}
	
						
/*
	==================================
	MAIN TEXT AREA
	==================================
*/
		
	#MaintextArea{width:100%; padding:40px 0;margin:0 auto;  text-align:justify;}		
	.MaintextArea{ margin:0 auto; width:80%; padding:0;}			

		.MaintextArea h1{padding:0 0 20px 0; text-align:left;}	
		
		/* DIVIDE PAGE */
		.HalfL{padding:0; float:left; width:45%; margin:20px 20px 20px auto;}	
		.HalfR{padding:0; float:right; width:45%; margin:20px auto;}	
		
		.TwoThirds{padding:0; float:left; width:70%; margin:0 20px 20px auto;}	
		.Third{padding:0; float:right; width:25%; margin:0 auto;}	


		@media (max-width:740px) 
			{			
				.TwoThirds, .Third{clear:both; padding:0; float:none; width:100%; margin:0 auto 20px auto;}				
			}

			
		/* BRANCHES PAGE */
		.Branch{ margin:0 auto; width:100%; padding:20px;border-bottom:1px dotted #28588C; opacity:0.8;  }	
			.Branch:hover{opacity:1; color:#000; border-bottom:1px dotted #FBE022; background:#E7E3D8;}	


		/* WHAT WE BELIEVE PAGE */
		.WhatWeBelieve li{ margin:0 auto; width:100%; padding:5px; border-bottom:1px dotted #28588C; opacity:0.8;  }	
			.WhatWeBelieve li:hover{opacity:1; color:#000; border-bottom:1px dotted #FBE022; background:#E7E3D8;}	

			
		/* EVENTS AND APOSTLE'S VISIT PAGE */
		.TheEvents li{list-style: url(../graphics/calendar.png); margin:0 auto; width:100%; padding:5px 10px;  opacity:0.8;  }	
			.TheEvents li:hover{opacity:1; color:#000; background:#E7E3D8;}	
			

		/* MINISTRIES PAGE */
		.Ministries{ margin:0 auto; width:100%; padding:20px;border-bottom:1px dotted #28588C; opacity:0.8;  }	
			.Ministries:hover{opacity:1; color:#000; border-bottom:1px dotted #FBE022; background:#E7E3D8;}	

			
		.TheSermons{padding:10px 0; display:block; width:100%; margin:10px auto; font-size:0.8em;}
			.TheSermons iframe{ width:100%;}	
			

			/* GALLERY PICTURES*/

		.gallery-cover{ width:40%; margin:20px; float:left; vertical-align:top; text-align:center; min-height:320px; box-shadow: 0 0 10px #CCC;-moz-box-shadow: 0 0 10px #CCC;-webkit-box-shadow: 0 0 10px #CCC;-o-box-shadow: 0 0 10px #CCC; font-size:0.9em;}
			.gallery-cover img, .gallery-cover iframe{ width:100%; margin-top:-20px;}
				.gallery-cover  a, .gallery-cover  a:link{text-decoration:none; display:block; margin:0 auto; width:100%;}
				.gallery-cover  a:hover, .gallery-cover  a:active{opacity:0.8;}	
			
		
		/* GALLERY PAGE - https://danrnascimento.github.io/simplejscarousel/ */

		.project-page-main {	margin-left: 70px;}
		.carousel-container {	width: 100%;	height: 80vh;	margin: 0 auto;	position: relative;	display: flex;	justify-content: center;	overflow: hidden;}
		.current-image {	width: auto;	height:80%;}
		.next-list {	list-style-type: none;	margin: 0;	padding: 0;	width: 100%;	height: 100px;	position: absolute;	bottom: 20px;	left: 0;	display: flex;	align-items: center;	overflow: hidden;	transition: all .5s;}
		.next-list li {	display: inline-block;	padding: 0;	margin: 0;	width: 100px;	min-width: 100px;	height: 51px;	margin: 0 5px;	text-align: center;	line-height: 50px;	cursor: pointer;
			transition: all .5s;}
		.next-list li:first-of-type {	padding-left: 15px;}
		.next-list li:last-of-type {	padding-right: 15px;}
		.image-of-list {	width: 100%;	height: 100%;	opacity: 0.7;	box-shadow: 0 0 20px #777;	transition: all .5s;}
		.current-image-list {	opacity: 1;	transition: all .5s;}

		.arrow {	display: flex;	position: absolute;	width: 50px;	height: 100px;	bottom:200px;	flex: 1;	text-align: center;	line-height: 50px;	color:#221E71;	cursor: pointer;	display: flex;	align-items: center;	justify-content: center;	z-index: 2;}

		.arrow-left {	left: 10px;}
		.arrow-right {	right: 10px;}

		 /* * Animations */
		 @keyframes fadeIn {     0% {opacity: 0}     100% {opacity: 1} }

		 @keyframes slideInFromLeft {     0% {     	opacity: 0;     	transform: translateX(-100%);    	}
			 100% {     	opacity: 1;     	transform: translateX(0px);     } }

		 @keyframes slideInFromRight {     0% {     	opacity: 0;     	transform: translateX(100%);    	}
			 100% {     	opacity: 1;     	transform: translateX(0px);     } }

		 .slideInFromLeft { 	animation: slideInFromLeft .5s ease-in-out; }
		 .slideInFromRight { 	animation: slideInFromRight .5s ease-in-out; }
		 .fadeIn { 	animation: fadeIn .5s ease-in-out; }
 
 					
	
		/** CONTACT FORM **/
		#contactform {width:100%; display:block;}
			.field {display: block; width:45% ; margin:20px; float:left;}
			.field2 {display: block; width:100% ; margin:20px auto;}
			label {display: block; text-align:left;    width:90%; padding:5px 0; font-weight:bold;	 }
			.input{   padding: 5px;    border: 1px solid #5A382C;    width:90%; color:#333;   }
				.button,.button a{background-color: #28588C; color: #FFF;text-decoration:none; padding:20px; border:none; font-weight:bold;}
					.button:hover,	.button a:hover{ 	background-color: #5A382C; color: #FBE022;}		
			
			/** ERROR AND SUCCESS MESSAGE BOXES **/
			.error{ color:#FFF;  width:90%; padding: 10px; -moz-border-radius:0.3em; font-size:0.7em; background: #F00 ; margin:0 auto; line-height:1em;}
				.error p, .successful p { width:100%;}
						.successful{ color:#000; width:90%; font-size:0.7em; padding: 10px; -moz-border-radius:0.3em; background: #9C0; margin:0 auto;}

				
			@media (max-width:1030px) 
				{
					.field {display: block; width:45% ; margin:20px; float:left;}
				}

				
			@media (max-width:895px) 
				{
					.field  {display: block; width:80% ; margin:10px auto; float: none;}
				}

				
			@media (max-width:500px) 
				{
					.field, .field2 {display: block; width:90% ; margin:5px auto; float: none;}
				}
			
/*
	====================
	FOOTER AREA
	====================
*/	
	
	#FooterSitemap{ width:100%; margin:0 auto; padding:40px 0;background:#EBE8DE; }
	.FooterSitemap{ width:90%; margin:0 auto; padding:0;}
	
		.FGoogleMap{padding:0; float:left; width:50%; margin:0 20px 0 auto;}		
			.FGoogleMap iframe {width:100%; height:300px;}
			
		.FContacts{padding:0; float:right; width:45%; margin:0 auto;}			
								
	@media (max-width:600px) 
		{
		
			.FGoogleMap, .FContacts{padding:0; float:none;clear:both; width:100%; margin:20px auto;}
		
		}
		
		
/*
	====================
	BOTTOM AREA
	====================
*/	
	
	#BottomArea{ width:100%; margin:0 auto; padding:5px 0; background:#28588C; color:#FFF; font-size:0.8em;}
	.BottomArea{ width:80%; margin:0 auto; padding:0;}
	
	.BottomArea a, .BottomArea a:link{ color: #FBE022; text-decoration:underline;}
		.BottomArea a:active, .BottomArea a:hover{ color:#EEE; }
		
		
/*
	================
	BACK TO THE TOP
	================
*/

	
	.back-to-top {position: fixed; bottom:1em; right: 10px;display: none; border-radius:2em; }
		a.back-to-top ,	a:visited.back-to-top  {background:#28588C;  padding:10px; }
			a:hover.back-to-top , a.selected.back-to-top { background:#5A382C;}