html{
overflow-x:hidden;
}

body{
min-width:320px;
overflow-x:hidden;
}

body.menu-open{
overflow:hidden;
}

#top{
position:fixed;
}

#primary{
overflow-x: hidden;	
}

article{
padding:25px;	
}

article.general-page{
padding-top:70px;
}

.mobile{
display:block;	
}


#main-navigation{
position:fixed;
left:0;
top:0;
bottom:0;
width:270px;
padding:0;
box-shadow:0 0 15px rgba(0,0,0,0.5);
overflow:auto;
z-index:100;
background:black;
-webkit-transform: translateX(-280px);
transform: translateX(-280px);
-webkit-transition: 0.8s;
transition: 0.8s;
}



/*Nav*/

.disabled-transitions #main-navigation,
.disabled-transitions #menu-overlay{
display:none;	
}

.menu-open #main-navigation{
-webkit-transform: translateX(-0px);
transform: translateX(-0px);
}

.disabled-transitions .menu-open #main-navigation{
display:block;
}

#menu-overlay{
position:fixed;
z-index:10;
display:block;
top:0;
left:0;
right:0;
bottom:0;
background: rgba(0,0,0, 0.6);
backface-visibility:hidden;
opacity:0;
visibility:hidden;
-webkit-transition:0.8s;
transition:0.8s;
}

.menu-open #menu-overlay{
opacity:1;
visibility:visible;
display:block;
}

#menu-overlay:before{
content: "\2715";
color: #000;
position: fixed;
right: 10px;
top: 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
border-radius: 50%;
background: #fff;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
padding: 0;
}


/*Menus*/


nav{
visibility:visible;
opacity:1;
left:0;
top:0;
bottom:0;
position:relative;
width:auto;
}

	.nav-section {
	border:none;
	width:auto;
	background-image:url(images/nav-pattern-right.png) !important;
	background-size:21px auto !important;
	background-position: right top !important;
	background-repeat: repeat-y !important;
	}

		a.nav-header {
		padding: 8px 0 8px 25px;
		}
		
		
	.nav-header::before {
    left: 10px;
	}
	

		.nav-menu{
		position:relative;
		opacity:1;
		visibility:visible;
		width:auto;
		height:auto;
		left:auto;
		top:auto;	
		padding-top:0 !important;
		padding-right:25px;
		background-size: 100% auto;
		background-position: right bottom ;
		background-color:transparent !important;
		-moz-column-count: auto !important;
    	-webkit-column-count: auto!important;
	    column-count: auto!important;
		max-height:0;
		overflow:hidden;
		/*-webkit-transition: 0.5s;
		transition: max-height padding 0.5s ease-out;*/
		}

			.nav-menu a{
			padding-right:22px;
			}
		
		.nav-menu.open{
		max-height:1000px;
		padding-bottom:10px;
		}
		
		.current-page-section .nav-menu{
		max-height:none;	
		padding-bottom:10px;
		}
			
		a.nav-menu{
		display:none;	
		}
			
		.current-page-section .nav-header:before{
		opacity:0;
		}
		
		
		.nav-menu li{
		display:block !important;
		}


#nav-menu-about.open,
.current-page-section #nav-menu-about{
padding-bottom: 50px;
}

#nav-menu-development-partners.open,
.current-page-section #nav-menu-development-partners{
padding-bottom: 50px;
}

#nav-menu-westlock.open,
.current-page-section #nav-menu-westlock{
padding-bottom: 70px;
background-position: right -48px;
}

#nav-menu-projects.open,
.current-page-section #nav-menu-projects{
padding-bottom: 50px;
}

#nav-menu-heroes.open,
.current-page-section #nav-menu-heroes{
padding-bottom: 100px;
}

#nav-menu-ethiopians.open,
.current-page-section #nav-menu-ethiopians{
padding-bottom: 60px;
}

.menu-secondary {
left: auto;
height: auto;
margin-right: auto;
margin-left: auto;
white-space: normal;
position: relative;
padding-right:0;
}
.menu-secondary:before{
content:none;
}

	.menu-secondary li {
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
	}

		.menu-secondary a{
		display:block;
		padding-left:25px;
		border-radius:0;
		line-height: normal;
		}


	
#menu-button{
width:72%;
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
}

	#donate-link-button{
	width:100%;	
	}


@media (max-width: 540px){
	
	
	#menu-bar{
	padding-left: 115px;
	}
	
	#menu-bar{
		
	}
	
	#logo {
    left: -10px;
    top: -80px;
	width: 140px;
    height: 170px;
    border-width: 8px;
	}
	
	#logo img {
    width: 85px;
	top: 80px;
	left: 2px;
	}
	
	#navigation-bar{
	
	}
	
	#menu-button{
	font-size: 16px;
	line-height:69px;
	}
	

}


@media (max-width: 440px){	

	#menu-button{
	width: -webkit-calc(100% - 105px);
	width: calc(100% - 105px);
	line-height:40px;
	font-size: 15px;
	}
	
	#donate-link{
	width: 90px;
	}

		#donate-link-button{
		border-width:6px;			
		xborder-radius:0;
		top:-34px;
		height:95px;
		}
	
			#donate-link-label{
			width: 95px;
			font-size: 15px;
			top:38px;
			}
			
			#donate-link-message{
			display:none;
			}
			
	#donate-link-message-narrow{
	display:block;
	top:auto;
	bottom:0;
	/*background:#6A321E;*/
	background:#1e7e9e;
	background: radial-gradient(circle,  #36a3bc 0%, #1e7e9e 90%);
	color:white;
	z-index:3;
	text-align:center;
	padding:0px 0 4px;
	width:auto;
	left:110px;
	right:0;
	}
	
	#donate-link{
	z-index:2;	
	}
	
	#logo{
	z-index:4;	
	}
}



.column-group.circle:before,
.column-group.circle:after{
content:none;
}

.column-group.circle .column-left{
margin-top:1em !important;	
}

.column-group.circle .column-left:before{
margin-left:-20px;
}

header{
padding:0;
height:auto;
background-size: 105% !important;
background-position:56% 0;
}

#header-content {
    width: auto;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    height: auto;
    padding-top: 38%;
	}

		#intro {
		left: auto;
		width: auto;
		height: auto;
		font-size: 18px;
		position: static;

		
		}	
			
			#intro-content {
			display: block;
			padding:0;
			position: static;
			
			
			}
		
			#intro-head{
			position:absolute;
			top: 0;
			width: 100%;
			height:0;
			padding-bottom:20%;
			

			}
			
				#intro-head h1{
				width:50%;
				height:80%;
				
				margin-left:47.5%;
				font-size:22px;
				font-size:5vw;
				position: absolute;
				text-align:center;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				
				padding-top:10%;
			    background-color:#b99200;
		        border-radius:50%;	
				}

				.photo-right #intro-head h1 {
				margin-left: 31%;
				}
				
				#intro-head h1 br{
				display:none;	
				}
				
				@media (max-width: 560px){	
					#intro-head h1{
					font-size: 6vw;
					}
				}
				
			#intro-text{
			padding:10px 20px 0 20px;
			font-size:20px;
			background-image:url(images/main-circle-right-mobile.svg);
			background-position: 50% 0;
			background-repeat:no-repeat;
			background-size:80%;
			}
			
			#intro-text.empty{
			display:none;
			}
			
			.photo-right #intro-text{
			background-position: -28% 0;
			}


@media (max-width: 760px) and (min-width: 600px){	
	.article-feature.large{
	margin-left:-10% !important;
	margin-right:-10% !important;
	}
}	
	

@media (max-width: 600px){	
		.article-feature{
		margin-right:-20px !important;
		margin-left:-20px !important;
		}
		
		
		.article-feature:before,
		.article-feature .feature-box:before {
		width: 120%;
		padding-bottom:125%;
		left:-40px;
		}
		

		
		.article-feature .feature-content{
		padding-right:20px !important;
		padding-left:20px !important;
		}
		
}


@media (max-width: 480px){	
		.article-feature:before,
		.article-feature .feature-box:before {
		width: 150%;
		padding-bottom:150%;
		}
}
		
@media (max-width: 460px){					
		.article-feature.large:before,
		.article-feature.large .feature-box:before {
		width: 800px;
		height:800px;
		padding-bottom:0;
		left:-40%;
		}
}

@media (max-width: 420px){					
		.article-feature.medium:before,
		.article-feature.medium .feature-box:before {
		width: 600px;
		height:600px;
		padding-bottom:0;
		left:-30%;
		}
}

.intro{
font-size:20px;
}

main{
position:relative;
}
	
	article{
	padding:20px 20px;
	background-image:none;
	}

.drop-cap{
margin-top:-35px;
}


#related a{
padding-right:10px;	
padding-left:30px;
}


#related h2 span{
display:inline-block;
}


#related h2::before, #related h2::after{
max-width:15%;	
}

.feature-section {
padding-top: 50% ;
background-position:right 0 ;
background-size: 175% auto;
border-radius:16px;
margin-top:0;
}


.feature-section:before{
content:'';
display:block;
position:absolute;
bottom:0;
left:0;
right:0;
top:50%;
background:url(images/feature-pattern.jpg) #E8E2D6;
border-radius:0 0 16px 16px;
}

@media (max-width: 660px){	
	.feature-section:before{
	top:44%;
	}
}


	.feature-section .feature{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:-40px;
	margin-top:0px;
	}

	/*.feature-section .feature{
	width:80% !important;
	height:auto !important;
	margin:20px auto !important;
	padding-bottom:80% !important;
	position:relative;
	height:0 !important; 
	}*/
	



/*
.article-feature{
background:url(images/inset-pattern.jpg) #f5f4ef;
border-radius:10px;
padding-bottom:0 !important;
height:auto !important;
padding:0;
width:auto !important;
}
.article-feature:before{
content:none;
}
*/

article > .column-group:first-child .column-left .article-feature:before{
background: -moz-linear-gradient(top,  rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.5) 50%) ;
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.5) 50%) ;
background: linear-gradient(to bottom,  rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.5) 50% );
}
	
@media (max-width: 540px){	
		

		
		.feature-section{
		margin-bottom:1em;
		}
		
		.feature-section:before{
		content:none;	
		}
		
		.feature-section .feature{
		background:url(images/inset-pattern.jpg) #f5f4ef;
		border-radius:0 0 16px 16px;
		height:auto !important;
		padding-bottom:0 !important;
		width:auto !important;
		padding:0 ;
		margin:0 !important;
		}
		
		.feature-section .feature-box:before{
		content:none;	
		}
		
		
		.feature-section .feature-align {
		position:relative;
		top:auto;
		bottom:auto;
		left:auto;
		right:auto;
		}
		
			.feature-section .feature-content{
			top:auto;
			-webkit-transform:none;	
			transform:none;	
			padding:4% 5%;
			position:relative;
			}
		
}


.mobile-square:before,
.mobile-square .feature-box::before{
content:none;	
}

.tablet-square,
.mobile-square{
margin:10px -10px !important;	
}

.tablet-square .feature-content,
.mobile-square .feature-content{
padding-left:20px !important;
padding-right:10px !important;	
}

.mobile-square{
background:url(images/inset-pattern.jpg) white;
border-radius:20px;
width:auto;
max-width:none
}

@media (max-width: 420px){	

	.narrow-square:before,
	.narrow-square .feature-box::before{
	content:none;	
	}

	.narrow-square{
	background:url(images/inset-pattern.jpg) white;
	border-radius:20px;
	width:auto;
	max-width:none
	}
	
	.narrow-square{
	margin:10px -10px !important;	
	}
	
	.narrow-square .feature-content{
	padding-left:20px !important;
	padding-right:10px !important;	
	}

}

@media (max-width: 480px){	
	.feature td{
	display:block;	
	}
	
	.feature tr td:first-child{
	font-weight:bold;	
	}
	
	.feature tr td:last-child{
	padding-bottom:0.5em;
	}
}

h1 br{
display:none;
}

@media (max-width: 420px){	
	.column-list{
	-moz-column-count:1;
	-webkit-column-count:1;	
	column-count:1;
	}
}
	.column-list li{
	padding-right:0;	
	}

main ul{
margin-left:0;
padding-left:1em;
}

.pull-quote.right{
margin-right:0;
}

@media (max-width: 560px){	
	.pull-quote.left,
	.pull-quote.right{
	float:none !important;
	margin:0 auto 10px auto !important;
	}
}

@media (max-width: 560px){	
	.cell{
	width:auto;
	margin:0;
	display:block;	
	}
}



#footer-tagline:before,
#footer-tagline:after{
width:50px;
}

@media (max-width: 480px){	
	#footer-tagline{
	font-size:20px;
	}
	
	#footer-tagline:before,
	#footer-tagline:after{
	content:none;
	}
	
	#related h2::before, #related h2::after{
	max-width:10%;
	margin:0 10px;	
	}

}


.inset{
width:auto;
max-width:50%;
height:auto;
}

@media (max-width: 400px){	

	#related ul{
	-moz-column-count:1;
	-webkit-column-count:1;
	column-count:1;
	}
	
	.inset{
	display:block;
	max-width:none;
	float:none;
	margin:10px auto;	
	}
	
	.footer-item{

	}
	
	footer .bullet{
	padding:0;	
	}
	
}

.credit-left,
.credit-right{
height:auto;
margin:-10px 0 0 0 !important;	
}


.highlight{
font-size:20px;	
}

iframe{
max-width:100%;	
}




.menu-secondary .home{
display:none;
}

.menu-secondary .facebook a{
font-size: 16px;
opacity: 1;
background-position: 25px center;
width: auto;
height: auto;
padding-left: 55px;
display:block;
}

.menu-secondary .icon{
transition:0.3s;	
}

.menu-secondary .icon:hover{
background: rgba(114,196,216,0.3);
}

.menu-secondary .overflow{
display:inline;	
}

.menu-secondary .narrow{
display:none;	
}

#gallery-section a{
width:30%;
}

@media (max-width: 520px){	
	#gallery-section a{
	width:47%;
	}
}

#newsletter{
height:auto;
}

#newsletter-content{
padding-right:0;	
}

	#newsletter-head{
	text-align:center;
	display:block;
	vertical-align:middle;
	margin:0;
	width:auto;
	height:auto;
	position:relative;
	overflow:visible;
	}

		#newsletter-head-circle{
		position:relative;
		width:auto;
		height:auto;
		background:red;
		top:auto;
		border-radius:0;
		background:none;
		}



	#newsletter h2{
	position:relative;
	display:block;
	width:auto;
	font-size:28px;
	margin:6px 0;
	right:auto;
	background:none;
	}
			
		#newsletter h2 em{
		display:inline;
		}

		#mc_embed_signup{
		width:auto;
		background:rgba(0,0,0,0.2);	
		padding:10px 0;
		}
		
			#newsletter form{
			width:auto;
			display:block;
			text-align:right;
			padding-right:40px;
			}
			
			@media (max-width: 480px){	
				#newsletter form{
				padding-right:20px;	
				}
			}
		

			
			#newsletter .text-box {
			width: calc(100% - 120px);
			}

			#newsletter #mc-embedded-subscribe{
			display:inline-block;
			margin:10px 0;
			}
			
	#mc_embed_signup::after{
	content:none;		
	}


#book-button{
position:relative;
top:auto;
right:auto;
margin:auto;
top:-20px;
}


#mc_embed_signup:before{
content:none;	
}

#footer-content{
padding:0;	
}