/*--------------------------------------------------------------
#0.6    popular-campaign
--------------------------------------------------------------*/
.popular-campaign {
	position: relative;

	@include widther(992px) {
		.shadow {
			content: "";
			width: 1170px;
			height: 500px;
			position: absolute;
			top: 0;
			left: 50%;
			@include translatingX();
			box-shadow: 10px 0 40px 0 lighten($shadow-color, 5%), -10px 0 40px 0 lighten($shadow-color, 5%);
		}

		.shadow:after {
			background: $white;
			content: "";
			width: 1170px;
			height: 20px;
			position: absolute;
			bottom: -20px;
			left: 50%;
			@include translatingX();
		}
	}

	@include widther(992px) {
		.content {
			padding: 0 45px;
		}
	}
	
	.img-holder-donation {
		position: relative;
		z-index: 10;

		&:before {
			content: "";
			@include overlay(transparentize($black, 0.8));
			@include rounded-border(10px);
		}
	}

	.img-holder img {
		@include rounded-border(10px);
	}

	.donation-box {
		background-color: $theme-primary-color;
		width: 70px;
		padding: 10px;
		position: absolute;
		left: 15px;
		top: 0;
		border-radius: 0 0 18px 18px;
		
		p {
			color: $white;
			margin: 0;
			font-size: 12px;
			line-height: 1.3em;
		}

		.dollar {
			font-size: 15px;
			font-weight: bold;
			position: relative;
			padding-left: 5px;

			span {
				font-size: 12px;
				font-weight: normal;
				position: absolute;
				top: -5px;
				left: -5px;
			}
		}

		.meter {
			position: relative;
			margin-top: 17px;

			span {
				font-size: 13px;
				color: $white;
				position: absolute;
				left: 50%;
				top: 47%;
				@include center-by-translating;
			}

			canvas:before {
				content: "";
				background-color: red;
				width: 10px;
				height: 10px;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}

	.details {
		padding: 30px 20px 20px;
		border-radius: 0 0 10px 10px;
		position: relative;
		top: -10px;
		@include round-box-shadow($shadow-color, 20px, 0);

		h3 {
			font-size: 18px;
			margin: 0;

			a {
				color: $dark-gray;
			}

			a:hover {
				color: $theme-primary-color;
				text-decoration: none;
			}
		}

		span,
		p {
			font-size: 14px;
			color: lighten($black, 60%);
		}

		p {
			color: $theme-primary-color;
			margin: 10px 0 0;
		}
	}

	.view-all {
		text-align: center;
		clear: both;
		padding-top: 80px;


		a {
			font-weight: bold;
			color: $dark-gray;
			text-transform: uppercase;

			&:hover {
				text-decoration: none;
				color: $theme-primary-color;
			}
		}
	}

	@include media-query(767px) {
		.content > .col {
			width: 50%;
			float: left;
			margin-bottom: 50px;
		}

		.content > .col:nth-child(3) {
			width: 50%;
			margin: 0 auto !important;
			float: none;
			clear: both;
		}
	}

	@include media-query(480px) {
		.content > .col {
			width: 100% !important;
			float: none !important;
			margin-bottom: 50px;
		}
	}
}



/*--------------------------------------------------------------
#0.7    help 
--------------------------------------------------------------*/
.help {
	background-color: $section-bg-color;

	.help-item {
		position: relative;
		padding-left: 90px;
		margin-bottom: 60px;

		@include media-query(767px) {
			padding-left: 70px;
		}

		&:last-child {
			margin-bottom: 0;

			@include media-query(991px) {
				margin-bottom: 60px;
			}
		}

		.icon {
			background-color: $theme-primary-color;
			width: 62px;
			height: 62px;
			display: inline-block;
			line-height: 62px;
			color: $white;
			text-align: center;
			@include rounded-border(5px);
			position: absolute;
			left: 0;
			top: 0;

			i:before {
				font-size: 28px;
			}

			@include media-query(767px) {
				width: 50px;
				height: 50px;
				line-height: 50px;
			}
		}

		h3 {
			font-size: 20px;
			margin: 0 0 0.6em;
			text-transform: uppercase;

			@include media-query(767px) {
				font-size: 18px;
			}
		}

		p {
			font-family: $notosans;
			color: lighten($black, 50%);
			line-height: 1.6em;
			margin: 0;
		}
	}

	.video {
		position: relative;

		&:before {
			content: "";
			@include overlay(transparentize($dark-gray, 0.4));
		}

		i {
			background-color: $theme-primary-color;
			width: 70px;
			height: 70px;
			line-height: 70px;
			font-size: 26px;
			text-align: center;
			color: $white;
			position: absolute;
			left: 50%;
			top: 50%;
			@include center-by-translating();
			@include rounded-border();

			@include media-query(767px) {
				width: 55px;
				height: 55px;
				line-height: 55px;
				font-size: 20px;
			}
		}
	}
}


/*--------------------------------------------------------------
#0.8    cta
--------------------------------------------------------------*/
.cta {
	@include background-color-image($cta-sectionbg, "../images/cta-bg.png", center center, auto, no-repeat, local);
	padding: 70px 0;

	.cta-details {

		@include widther(992px) {
			margin-top: 55px;
		}

		@include media-query(767px) {
			text-align: center;
			padding-top: 35px;
		}

		h2 {
			color: $white;
			font-size: 30px;
			margin: 0 0 1em;

			@include media-query(991px) {
				font-size: 27px;
			}

			@include media-query(767px) {
				font-size: 22px;
			}
		}

		p {
			font-size: 16px;
			color: lighten($text-color, 10%);
			margin: 0 0 2.5em;
		}

		.theme-btn {
			font-size: 16px;
			font-weight: bold;
			padding: 19px 25px;
			@include rounded-border(5px);

			@include media-query(991px) {
				font-size: 15px;
				padding: 19px 15px;
			}

			@include media-query(767px) {
				font-size: 14px;
				padding: 15px 15px;
			}
		}
	}
}


/*--------------------------------------------------------------
#0.9    latest-causes
--------------------------------------------------------------*/
.latest-causes {
	padding-bottom: 60px;

	@include media-query(991px) {
		padding-bottom: 30px;
	}

	@include media-query(767px) {
		padding-bottom: 20px;
	}

	.content > .col {
		margin-bottom: 60px;

		@include media-query(580px) {
			width: 100%;
		}
	}

	.title {
		margin-bottom: 23px;
	}

	.title ul,
	.donate-amount ul {
		position: relative;
		overflow: hidden;

		li {
			float: left;

			&:last-child {
				float: right;
				font-size: 14px;
				color: lighten($black, 50%);

				i {
					color: $theme-primary-color;
				}
			}
		}		
	}

	.title ul {
		h3 {
			font-size: 18px;
			margin: 0;

			@include media-query(767px) {
				font-size: 14px;
			}
		}

		span {
			font-size: 14px;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	/*** style for progressbar  ***/
	.img-progress {
		position: relative;
		.progress {
			background-color: $dark-gray;
		    border-radius: 0;
		    height: 8px;
		    overflow: visible;
		    box-shadow: none;

		    .progress-bar {
				background-color: $theme-primary-color;
				width: 0;
				line-height: 8px;
				font-size: 10px;
				text-align: left;
				padding-left: 10px;
				position: relative;
				box-shadow: none;
				@include transition-time(1.8s);
		    }

		    span {
				background: $theme-primary-color;
				padding: 6px 4px;
				font-size: 10px;
				position: absolute;
				right: 0;
				top: -32px;	

				&:before {
					content: "";
					width: 0;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-top: 7px solid $theme-primary-color;
					position: absolute;
					bottom: -7px;
					left: 50%;
					@include translatingX();
				}
			}
		}
	}

	.img-holder {
		position: relative;
		border-radius: 10px 10px 0 0;

		&:before {
			content: "";
			@include overlay(transparentize($dark-gray, 0.7));
			border-radius: 10px 10px 0 0;
		}

		img {
			border-radius: 10px 10px 0 0;
		}
	}

	.donate-amount {
		margin: 20px 0 15px;
		ul li:first-child {
			font-size: 17px;

			@include media-query(767px) {
				font-size: 14px;
				font-weight: 600;
			}

			span {
				color: $theme-primary-color;
			}
		}
	}

	.text {
		p {
			font-family: $notosans;
			font-size: 16px;
			margin: 0 0 1.2em;
		}

		.theme-btn {
			@include custom-box-shadow(lighten($black, 80%), 0, 5px, 5px);
		}
	}
}


/*--------------------------------------------------------------
#1.0    cta-2
--------------------------------------------------------------*/
.cta-2 {
	background-color: $cta2-bg;

	.join-us {
		@include background-style("../images/join-us-bg.jpg", center center, cover, no-repeat, local);
		position: relative;

		@include media-query(767px) {
			height: 200px !important;
		}

		&:before {
			content: "";
			@include overlay(transparentize($theme-primary-color, 0.2));
		}

		span {
			@include background-style("../images/join-us-bg.jpg", center center, cover, no-repeat, local);
			width: 100%;
			height: 100%;
			font-size: 55px;
			text-align: center;
			text-transform: uppercase;
			font-weight: bold;
			position: absolute;
			left: 0;
			top: 0;
			-webkit-text-fill-color: transparent;
			-moz-text-fill-color: transparent;
			text-fill-color: transparent;
			-webkit-background-clip: text;
			-moz-background-clip: text;
			background-clip: text;

			@include widther(768px) {
				padding-top: 3.5em;
			}

			@include media-query(767px) {
				font-size: 45px;
				padding-top: 1.5em;
			}

		}
	}

	.sing-up {
		
		@include widther(1200px) {
			width: 585px;
			padding: 85px 0 85px 140px;
		}

		@include widther(768px) {
			padding: 85px 25px 85px 100px;
		}

		@include media-query(767px) {
			padding: 55px 15px 55px 70px;
		}

		h3 {
			color: $white;
			margin: 0 0 0.4em;
			position: relative;
			span {
				position: absolute;
				left: -48px;
			}

			@include media-query(767px) {
				font-size: 20px;
			}
		}

		span {
			color: lighten($heading-color, 5%);
			font-weight: bold;
			display: block;
			margin-bottom: 1.44em;
			@include widther(768px) {
				font-size: 17px;
			}
		}

		p {
			margin: 0 0 1.83em;
			color: lighten($heading-color, 20%);
			@include widther(768px) {
				font-size: 16px;
			}
		}

		.theme-btn {
			background-color: transparent;
			font-size: 16px;
			color: $theme-primary-color;
			padding: 18px 38px;
			border: 2px solid $theme-primary-color;
			text-transform: uppercase;

			@include media-query(767px) {
				font-size: 14px;
				padding: 15px 25px;
			}
		}

		.theme-btn:hover {
			background-color: $theme-primary-color;
			color: $white;
		}
	}
}


/*--------------------------------------------------------------
#1.1    volunteers
--------------------------------------------------------------*/
.volunteers {
	padding-bottom: 95px;

	@include media-query(991px) {
		padding-bottom: 60px;
	}

	@include media-query(767px) {
		padding-bottom: 50px;
	}

	.volunteers-grid > .col {
		margin-bottom: 30px;
	}
}


/*--------------------------------------------------------------
#1.2    events
--------------------------------------------------------------*/
.events {
	background-color: $section-bg-color;

	.section-title {
		margin-bottom: 125px;
	}

	.events-slider .owl-stage-outer {
		overflow: visible !important;
	}

	.events-slider .item {
		@include transition-time(0.3s);

		.details {
			@include scaleing(0,0,0);
		}

		img {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}
	}

	.events-slider .details {
		background-color: $theme-primary-color;
		padding:22px;
		border-radius: 0 0 5px 5px;

		h3 {
			font-size: 20px;
			margin: 0 0 0.5em;

			@include media-query(1199px) {
				font-size: 15px;
			}

			a {
				color: $white;
			}
		}

		ul li {
			font-size: 14px;
			color: $white;
			font-weight: normal;
			padding-left: 20px;
			position: relative;

			@include media-query(1199px) {
				font-size: 12px;
			}

			i {
				color: lighten($black, 30%);
				position: absolute;
				left: 0;
				top: 3px;
			}
		}
	}

	.events-slider .owl-item.center .item {
		@include scaleing(1.1, 1.1, 1.15);
	    z-index: 100;
	    position: relative;
	    top: -11px;

	    img {
			-webkit-filter: grayscale(0);
			filter: grayscale(0);
		}

	    .details {
	    	@include scaleing(1,1,1);
	    }
	}

	/*** event slider navigation ***/
	.events-slider {
		position: relative;

		.owl-controls {
			width: 100%;
			margin: 0;
			position: absolute;
			top: 30%;
		}

		.owl-controls .owl-nav > div {
		    background: $theme-primary-color;
			width: 70px;
		    height: 50px;
		    line-height: 44px;
		    font-size: 22px;
		    text-align: center;
		    margin: 0;
		    padding: 0;
		    position: absolute;

		    i {
		    	position: absolute;
		    	left: 50%;
		    	top: 50%;
		    	@include center-by-translating();
		    }

		    &:first-child {
		    	left: 15px;
		    }

		    &:last-child {
		    	right: 15px;
		    }

		    &:hover {
		    	background: darken($theme-primary-color, 5%) !important;
		    } 
		}

		@include media-query(767px) {
			.owl-controls .owl-nav > div {
				width: 40px;
			    height: 30px;
			    line-height: 30px;
			    font-size: 15px;
			}
		}
	}
}


/*--------------------------------------------------------------
#1.3    cta-3
--------------------------------------------------------------*/
.cta-3 {
	background-color: $black;
	@include background-color-image($black, "../images/cta-3-children.jpg", 20% bottom, auto, no-repeat, local);
	
	@include media-query(767px) {
		background-size: 220px;
		background-image: none !important;
	}

	h2 {
		font-size: 30px;
		color: $white;
		font-weight: normal;
		margin: 0 0 0.67em;

		@include media-query(767px) {
			font-size: 22px;
		}
	}

	.details-text {
		padding: 115px 15px;

		@include media-query(991px) {
			text-align: center;
			padding: 90px 15px;
		}

		@include media-query(767px) {
			padding: 60px 15px;
		}

		p {
			color: lighten($text-color, 10%);
			margin-bottom: 2.6em;
			@include widther(992px) {
				font-size: 16px;
			}

			@include media-query(767px) {
				color: lighten($text-color, 20%);
			}
		}

		.theme-btn {
			font-size: 18px;
			padding: 15px 38px;
			text-transform: capitalize;

			@include media-query(767px) {
				font-size: 14px;
				padding: 12px 25px;
			}
		}
	}
}


/*--------------------------------------------------------------
#1.4    latest news
--------------------------------------------------------------*/
.latest-news {
	padding-bottom: 110px;

	@include media-query(991px) {
		padding-bottom: 90px;
	}

	@include media-query(767px) {
		padding-bottom: 60px;
	}

	.latest-news-slider {
		.post {
			padding: 0 15px 15px;
		}

		.owl-controls {
			margin-top: 50px;

			.owl-dots span {
				width: 13px;
				height: 13px;
			}

			.owl-dots .active span,
			.owl-dots .owl-dot:hover span {
				background: $theme-primary-color;
			}
		}
	}
}


/*--------------------------------------------------------------
#1.5    news letter
--------------------------------------------------------------*/
.newsletter {
	background-color: darken($section-bg-color, 2%);

	.children-holder {
		@include background-style("../images/newsletter-children.jpg", center center , cover, no-repeat, local);
		
		@include media-query(991px) {
			height: 260px !important; 
		}
	}

	.subscribe {
		padding: 70px 15px 70px 70px;
		
		@include widther(1200px) {
			width: 682px;
		}

		@include media-query(991px) {
			padding: 70px 45px;
		}

		@include media-query(767px) {
			height: auto !important;
			padding: 50px 45px 50px;
		}

		@include media-query(500px) {
			padding: 50px 15px;
		}

		h3 {
			font-size: 30px;
			margin: 0;

			@include media-query(767px) {
				font-size: 25px;
			}
		}

		p {
			color: $dark-gray;
			font-weight: bold;
			margin: 0 0 2em;

			span {
				color: $theme-primary-color;
			}
		}

		form {
			position: relative;

			@include widther(1200px) {
				width: 550px;
			}

			@include widther(992px) {
				width: 450px;
			}

			input {
				height: auto;
				font-size: 16px;
				padding: 9px 20px;
				border: 1px solid $theme-primary-color;
				padding-right: 120px !important;

				@include rounded-border(5px);

				@include media-query(767px) {
					padding: 8px 20px;
				}
			}

			button {
				padding: 16px 15px;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.pluses {
			color: $theme-primary-color;
			font-size: 32px;
			position: absolute;
			right: 0;
			top: 35px;

			@include media-query(1199px) {
				right: 20px;
			}

			@include media-query(767px) {
				font-size: 20px;
				top: 45px;
			}
		}
	}
}