//
// About us
//

.become-volunteer{position: relative; background: url('../images/bg-img.jpg') center no-repeat fixed; background-size: cover;
	.content-box {position: relative; max-width: 420px; margin: 0 auto; background: #ffffff; padding: 40px 40px 50px; text-align: center; border-radius: 5px; }
}

.about_cnt{background: url('../images/bg.png') center no-repeat; background-size: 100% 100%;
	.about_feature{ 
		&>div{ display: inline-block; text-align: center; border-radius: 100%; padding: 15px; border:1px solid #ccc; width: 130px; height: 130px; margin:10px; cursor: pointer;
			&:first-chile{ margin-left: 0; }
			h4{ font-size: 40px; margin: 5px 0 5px; }
			span{ display: inline-block; width: 80px; margin: 0; line-height: 120%; font-size: 13px; }
			&:hover{ border: 1px solid #666; background: $light;}
		}
	}
	.img{ position: relative; width: 46%; margin: 10px 2%; overflow: hidden; border-radius: 20px; background: $light;
		&:after{content: ''; position: relative; display: block; padding-bottom: 180%; }
		img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto;  height: 100%; }
		&:hover{
			img{  }
		}
	}
	.w-50{ margin: 10px; border-radius: 10px; }
}

.history_cnt{background: url('../images/image5.jpg') right center no-repeat; background-size: 50% auto;}

.team{ position: relative; overflow: hidden; border-radius: 10px;
	&:after{ content: ''; display: block; padding-bottom: 120%; }
	&__img{ position: absolute; min-width: 100%; height: 100%; left: 50%; transform: translateX(-50%);z-index: 0; }
	&__cnt{position: absolute; left: 0; bottom: -30px; width: 100%; padding: 40px 20px 0; color: $white; background: rgba($black, 1); background: -moz-linear-gradient(180deg, rgba($black,0) 0%, rgba($black,1) 100%); background: -webkit-linear-gradient(180deg, rgba($black,0) 0%, rgba($black,1) 100%); background: linear-gradient(180deg, rgba($black,0) 0%, rgba($black,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="$black",endColorstr="$black",GradientType=1); z-index: 1;
		h4{}
		span{}
		li{ display: inline-block;
			a{ display: block; padding: 5px; color: $white;
			}
		}
	}
	&:hover{
		.team__cnt{ bottom: 0; padding-bottom: 10px;}
	}
	.team_slider{ padding: 0 50px; }
}