.element_give_donations {
	.archive_give_donation {
		padding-bottom: 0;
		.summary {
			width: 100%;
			padding-right: 0;
			.wrap_summary {
				margin: 0 ;
				transition: 0.4s ease;
				.owl-nav{
					display: flex;
					position: absolute;
					top: -135px;
					right:0px;
					z-index: 2;
					@media (max-width: 767px) {
						display: flex;
						position: absolute;
						top: 20px;
						right: 20px;
						z-index: 2;
					
				}
					button{
						position: relative;
						border: 2px solid #d0cccd !important;
						background: transparent;
						border-radius: 50%;
						width: 65px;
						height: 65px;
						display: inline-flex;
						justify-content: center;
						align-items: center;
						outline: none;
						transition: 0.4s;
						color: #d7d3d4 !important;
						@media (max-width: 767px) {
							border: 2px solid #fff !important;
							color: #ff9d00 !important;
							width: 40px;
							height: 40px;
						
						}

					
						&:focus{
							outline: none;
						}
						&:hover{
							transition: 0.4s ease;
							border: 2px solid #2c2734 !important;
							@media (max-width: 767px) {
								border: 2px solid #ff6d12 !important;
							}


							i{
								transition: 0.4s ease;
								color: #2c2734;
								@media (max-width: 767px) {
									color: #ff6d12;

								}


							}
						}
						&.owl-prev{
							transform: rotate(180deg);
							margin-bottom: 15px;
							margin-right: 10px;
						}
						i{
							font-size: 23px;
							color: #d7d3d4;
							@media (max-width: 767px) {
								font-size: 20px;
								color: #fff;
							}

						}
					}
				}
				.owl-dots{
					text-align: center;
					margin-top: 62px;
					display: flex;
					justify-content: center;
					width: 100%;
					@media (max-width: 1169px) {
							margin-top: 0px;
					}
					.owl-dot{
						outline: none;
						span{
							width: 6px;
							height: 6px;
							margin: 5px;
							background: #d1d1d6;
							display: block;
							-webkit-backface-visibility: visible;
							transition: opacity .2s ease;
							border-radius: 30px;
						}
						&.active{
							span{
								width: 12px;
								border-radius: 5px;
								opacity: 1;
								background-color: #ff6d12;
							}
						}
					}
				}
			
				@media (max-width: 767px) {
					margin: 0;
				}
				.give_detail {
					width: 33.3333%;
					margin-bottom: 30px;
					&:nth-last-child(-n+3) {
						margin-bottom: 0px;

						@media (max-width: 1024px) {
							margin-bottom: 60px;
						}
					}
						@media (max-width: 1024px) {
						width: 50%;
					}

					@media (max-width: 767px) {
						width: 100%;
					}

					.detail_body {
						background-color: #fff;
						overflow: hidden;
					}

					 &.give_slide{
					 	width: 100% !important;
					 	padding: 0 !important;
					 	display: block !important;
					 }
					 &.give_slide2{
					 	width: 100% !important;
					 	padding: 0 30px 50px 0;
					 	display: flex;
					 	flex-wrap: wrap;
					 	@media only screen and (max-width: 1024px) {
					 		padding: 0;
					 	}
					 	@media (max-width: 1023px) {
					 		display: block;
					 	}


					 	.image_future{
					 		width: 50%;
					 		position: relative;
					 		@media (max-width: 1023px) {
					 			width: 100%;
					 		}


					 		.thumbnail{
					 			display: block;
					 			position: relative;
					 			margin-right: -78px;
					 			border-radius: 10px 10px 10px 10px;
					 			@media (max-width: 1023px) {
					 				margin-right:0;
					 			    border-radius: 10px 10px 0px 0px;
					 			}

					 			&:after{
					 				border-radius:10px 10px 10px 10px;
					 				@media (max-width: 1023px) {
					 				border-radius: 10px 10px 0px 0px;
					 			}
					 			};

					 		}

					 	}
					 	.detail_content{
					 		position: relative;
					 		width: 50%;
					 		display:block;
					 			@media (max-width: 1023px) {
					 			width: 100%;
					 		}

					 	.detail_body{
					 		margin-left: -42px;
					 		margin-top: 60px;
					 		position: relative;
					 		padding: 90px 0px 70px 0px;
					 		border:none;
					 		border-radius: 10px 10px 10px 10px;
					 		overflow: visible;
				 		    box-shadow: 0px 10px 40px 0px rgba(6 ,22 ,58, .1);
					 		@media (max-width: 1024px) {
					 			margin-left: 0;
					 			margin-top: 0;
					 			border-radius: 0px 0px 10px 10px;
					 			padding: 30px 0px;
				 			    box-shadow: none;
								border: 1px solid #eee;
					 		}

					 		.post_cat{
					 			position: absolute;
					 			right: 20px;
					 			top: -38px;
					 			a{
					 				font-size: 16px;
					 				font-weight: 500;
					 				color: #fff;
					 				background-color: #ff9d00;
					 				padding: 10px 20px;
					 				border-radius: 5px 5px 0px 0px;
					 				text-transform: capitalize;
					 				transition: 0.4s ease;
					 				&:hover{
					 					background-color:#2c2734;
					 				};
					 			}
					 		}

					 		.title {
					 			margin: 10px 100px 18px 100px;
					 			@media (max-width: 1023px) {
					 				margin: 10px 30px 18px 30px;


					 			}
					 		}
					 		.desc{
					 			padding: 0px 100px 50px 100px;
					 			margin-bottom: 90px;
					 			@media (max-width: 1024px) {
					 				padding: 0px 30px 30px 30px;
					 				margin-bottom: 60px;

					 			}
					 		}
					 		.progress{
					 			margin: 0px 100px 15px 100px;
					 			@media (max-width: 1024px) {
					 				margin: 0px 35px 15px 35px;
					 				
					 			}

					 		}
					 		.raised{
					 			margin: 0 100px;
					 			@media (max-width: 1024px) {
					 				margin: 0 35px;
					 			}
					 		}
					 	}

					 }
					}
				}
			}
			.wrap_summary.column_2 {
				.give_detail {
					width: 50%;
					@media (max-width: 767px) {
						width: 100%;
						margin-bottom: 60px;
					}
				}
			}
		}
	}
}
/***** Archive Give ********/
.archive_give_donation {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 120px;
	padding: 0px 10px;
	@media (max-width: 991.98px) {
		padding-bottom: 60px;
		padding: 0;
	}
	.summary {
		width: 66.6667%;
		
		@media (max-width: 991.98px) {
			width: 100%;
			
		}
		.wrap_summary {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -15px;
			@media (max-width: 991.98px) {
				margin: 0;
			}
			&.give-slide{
				position: relative;
			}
			&.give-slide2{
				position: relative;
				.owl-nav{
					@media (max-width: 1023px) {
						display: flex;
						position: absolute;
						top: 20px;
						right: 20px;
						z-index: 2;
					
				}
			}

			}
			.give_detail {
				width: 50%;
				padding: 0 15px;
				margin-bottom: 30px;
				&:hover {
					transition: .3s all ease;
					.detail_body {
						box-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
					}
					.image_future {
						.thumbnail {
							border-radius: 10px 10px 0px 0px;
							&:after {
								opacity: 1;
								transition: .3s all ease;
								border-radius: 10px 10px 0px 0px;
							}
							img {
								transition: .3s all ease;
								transform: scale(1.05);
								@media (max-width: 767px) {
									transform: scale(1);
								}
							}
						}
						.media {
							.gallery {
								transform: translateX(0px);
								opacity: 1!important;
								transition: .3s all ease;
							}
							.video {
								transform: translateX(0px);
								opacity: 1!important;
								transition: .3s all ease .1s;
							}
						}
					}
					.progress {
						.wrap_percentage_1:after, .wrap_percentage_1 .percentage, .wrap_percentage_2:after, .wrap_percentage_2 .percentage {
							transition: .3s all ease;
							@media (max-width: 767px) {
								opacity: 1;
							}
						}
					}
				}
				@media (max-width: 991.98px) {
					width: 50%;
					padding: 0 15px;
					margin-bottom: 50px;
				}
				@media (max-width: 767.98px) {
					width: 100%;
					padding: 0px 10px;
				}
				.image_future {
					position: relative;

					.post_cat{
						position: absolute;
						right: 20px;
						bottom: 0;
						a{
						font-size: 16px;
						font-weight: 500;
						color: #fff;
						background-color: #ff9d00;
						padding: 10px 20px;
						border-radius: 5px 5px 0px 0px;
						text-transform: capitalize;
						transition: 0.4s ease;
						&:hover{
							background-color:#2c2734;
						};
					    }
					}
					
					.thumbnail {
						overflow: hidden;
						border-radius: 10px 10px 0px 0px;
						&:after {
							position: absolute;
							content: '';
							width: 100%;
							height: 100%;
							background-color: rgba(0,0,0,0.5);
							top: 0;
							left: 0;
							opacity: 0;
							transition: .3s all ease;
							border-radius: 10px 10px 0px 0px;
							@media (max-width: 767px) {
								opacity: 1;
								background-color: transparent;
								background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
								border-radius: 10px 10px 0px 0px;
							}
						}
						img {
							width: 100%;
							transition: .3s all ease;
							border-radius: 10px 10px 0px 0px;
						}
					}
					
					.media {
						position: absolute;
						bottom: 20px;
						left: 20px;
						z-index: 10;

						ul.gallery_archive{
							display: none;
						}
						
						@media (max-width: 767px) {
							bottom: 50%;
							left: 50%;
							transform: translate(-50%, 50%);
						}
						.gallery, .video {
							display: inline-block;
							color: #fff;
							font-size: 20px;
							opacity: 0!important;
							transform: translateX(50px);
							@media (max-width: 767px) {
								opacity: 1!important;
								transform: translateX(0);
								font-size: 16px;
								i {
									background-color: #ff6d12;
									padding: 10px;
									border-radius: 100%;
								}
							}
						}
						.gallery {
							transition: .3s all ease .1s;
							&:hover {
								color: #ff6d12;
								transition: .3s all ease;
								@media (max-width: 767px) {
								color: #222222;
								transition: .3s all ease;
								}
							}
							@media (max-width: 767px) {
								opacity: 1;
								transform: translateX(0);
							}
						}
						.video {
							margin-left: 15px;
							transition: .3s all ease;
							&:hover {
								color: #ff6d12;
								transition: .3s all ease;
								@media (max-width: 767px) {
								color: #222222;
								transition: .3s all ease;
								}
							}
						}
					}

					.progress {
						margin-top: -5px;
						height: 10px;
						border-radius: 0;
						background-color: #eae5e3;
						position: relative;
						z-index: 10;
						overflow: visible;

						.wrap_percentage_1 {
							background-color: #fa7f4b;
							background-image: linear-gradient(to left, #fac54b, #faa24b, transparent);
							position: relative;
							border-radius: 0;
							&:after {
								position: absolute;
								content: '';
								width: 0;
								height: 0;
								top: -10px;
								right: -10px;
								background-color: transparent;
								border-top: 10px solid #fa7f4b;
								border-right: 10px solid transparent;
								transition: .3s all ease;
							}
							.percentage {
								position: absolute;
								top: -10px;
								right: -10px;
								transform: translate(50%, -100%);
								z-index: 777;
								padding: 0 5px;
								background-color: #fa7f4b;
								color: #fff;
								transition: .3s all ease;
							}
						}
						.wrap_percentage_2 {
							background-color: #fa7f4b;
							background-image: linear-gradient(to left, #fac54b, #faa24b, transparent);
							position: relative;
							border-radius: 0;
							&:after {
								position: absolute;
								content: '';
								width: 0;
								height: 0;
								top: -10px;
								right: 0;
								background-color: transparent;
								border-top: 10px solid #fa7f4b;
								border-left: 10px solid transparent;
								transition: .3s all ease;
							}
							.percentage {
								position: absolute;
								top: -10px;
								right: 15px;
								transform: translate(50%, -100%);
								z-index: 777;
								padding: 0 5px;
								background-color: #fa7f4b;
								color: #fff;
								transition: .3s all ease;
							}
						}
					}
				}
				
				.detail_body {
					border:1px solid #eae5e3;
					border-top: none;
					transition: .3s all ease;
					padding: 35px 0px 25px 0px;
					border-radius: 0px 0px 10px 10px;
				
					.title {
						margin: 10px 35px 18px 35px;
						a {
							color: #2c2734;
							font-size: 24px;
							line-height: 30px;
							font-weight: 500;
							transition: .3s all ease;
							&:hover {
								color: #ff6d12;
								transition: .3s all ease;
							}
						}
					}
					.desc {
						margin-bottom: 30px;
						color: #88858e;
						font-size: 18px;
						line-height: 30px;
						padding:0px 35px 30px 35px;
						border-bottom: 1px solid #eae5e3;
					
					}
					.donate_remaining {
						display: flex;
						justify-content: baseline;
						align-items: center;
						padding-bottom: 15px;
						.donate {
							color: #fff;
							font-weight: 600;
							font-size: 16px;
							line-height: 24px;
							transition: .3s all ease;
							padding: 10px 20px;
							background-color: #222222;
							&:hover {
								transition: .3s all ease;
								background-color: #f0c84c;
							}
						}
					}
					.progress{
						height: 9px;
						overflow: visible;
						border-radius: 20px;
						margin: 55px 35px 10px 35px;
						background-color: #eae5e3;
						.wrap_percentage_2{
							background-color: #ff6d12;
							position: relative;
							border-radius: 20px;
						}
						.wrap_percentage_1{
							background-color: #ff6d12;
							position: relative;
							border-radius: 20px;
						}
						.percentage{
							color: #2c2734 !important;
							position: absolute;
							top: -35px;
							right: -20px;
							z-index: 777;
							color: #fff;
							transition: .3s all ease;
							font-size: 16px;
						}
					}
					.raised {
						display: flex;
						margin-bottom: 20px;
						margin-top:30px;
						font-size: 20px;
						line-height: 40px;
						justify-content: space-between;
						flex-wrap: wrap;
						align-items: flex-end;
						margin: 0px 35px 0px 35px;
						
						>div {
							span {
								display: block;
							}
						}
						.income {
							display: flex;
							font-size: 20px;
							line-height: 40px;
							color:#2c2734;
							align-items: flex-end;
							span:last-child {
								color: #88858e;
								padding: 0px 5px 0 5px;
								font-size: 14px;
								line-height: 40px;
							}
						}
						.ingo{
							font-size: 17px;
							line-height: 24px;
							color: #202b5d;
							padding-right: 5px;
							@media(max-width: 1200px){
								display: none;
		                    }

						}
						.goal {
							display: flex;
							font-size: 20px;
							line-height: 40px;
							color:#2c2734;
							align-items: flex-end;
							span:last-child {
								color: #88858e;
								padding: 0px 0px 0 5px;
								font-size: 14px;
								line-height: 40px;
							}
						}

					}
				}
			}
		}

		.pagination_archive_give {
			margin: 0px 0px 90px 0px;
			padding-top: 40px;
			.blog_pagination {
				ul.pagination {
					@media (max-width: 767px) {
						justify-content: center;
					}
					li {
						a {
							font-size: 16px;
							line-height: 24px;
							color: #333333;
							background-color: rgba(0,0,0,0.1);
							border: none;
							border-radius: 50%;
							width: 50px;
							height: 50px;
							width: 50px;
							height: 50px;
							display: inline-flex;
							justify-content: center;
							align-items: center;
							padding: 0px;
							transition: 0.5s;
							&:hover {
								color: #fff;
								background-color: #fa7f4b;
							}
						}
						.pagi_dots {
							color: #333333;
							background-color: rgba(0, 0, 0, 0.1);
							border: none;
							border-radius: 50%;
							width: 50px;
							height: 50px;
							display: inline-flex;
							justify-content: center;
							align-items: center;
							padding: 0px;
							transition: 0.5s;
							margin-right: 10px;
						}
						&.active {
							a {
								color: #fff;
								background-color: #fa7f4b;
							}
						}
					}
				}
			}
		}
	}
	.sidebar {
		width: 33.3333%;
		padding-left: 30px;
		position: sticky;
		position: -webkit-sticky;
		top: 130px;
		bottom: 550px;
		height: 580px;
		
		@media (max-width: 991.98px) {
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
			position: relative;
			height: auto;
			top: 0;
    		bottom: 0;
		}
		.give-sidebar {
			width: 100%!important;
			@media (max-width: 991.98px) {
			 padding-left: 0px;
			 padding-right: 0px;

			}

			.widget-title {
				margin-top: 0;
				padding-bottom: 25px;
			}
		}
	}

	&.type_2 {
		padding-bottom: 0;
		.summary {
			width: 100%;
			.wrap_summary .give_detail {
				width: 33.3333%;
				@media (max-width: 991.98px) {
					width: 50%;
				}
				@media (max-width: 767.98px) {
					width: 100%;
				}
			}
		}
		.sidebar {
			display: none;
		}
	}
		&.type_5 {
		padding-bottom: 0;
		.summary {
			width: 100%;
			.wrap_summary .give_detail {
				width: 33.3333%;
				@media (max-width: 991.98px) {
					width: 50%;
				}
				@media (max-width: 767.98px) {
					width: 100%;
				}
			}
		}
		.sidebar {
			display: none;
		}
	}

	&.type_3 {
		padding-bottom: 0;
		.summary {
			width: 100%;
			.wrap_summary .give_detail {
				width: 25%;
				@media (max-width: 1200px) {
					width: 33.3333%;
				}
				@media (max-width: 991.98px) {
					width: 50%;
				}
				@media (max-width: 767.98px) {
					width: 100%;
				}
				.raised{
					 display: block;
					 .income{
					 	padding-bottom: 5px;
					 }
					.ingo{
						display: none;
					}
				}
			}

		}
		.sidebar {
			display: none;
		}
	}
		&.type_4 {
		padding-bottom: 0;
		.summary {
			width: 100%;
			.wrap_summary .give_detail {
				width: 100%;
			}
		}
	}
}

/***** End Archive Give ********/

/***** Fix Form Donation Give ********/
.give-form {
	.give-submit {
		height: auto;
		padding: 5px 20px;
		transition: .3s all ease;
		font-size: 16px;
	    text-transform: uppercase;
	    font-weight: 600;
		&:hover {
			transition: .3s all ease;
			color: #fff;
			background-color: #343434!important;
			border-color: #343434!important;
		}
	}
	#give-gateway-radio-list {
		display: flex;
		li {
			display: flex!important;
			align-items: center;
			&:first-child {
				margin-right: 20px;
			}
		}
	}
}
/***** End Fix Form Donation Give ********/

/***** Fix PrettyPhoto Give ********/
.pp_pic_holder {
	.ppt {
		display: none!important;
	}
}
/***** End Fix PrettyPhoto Give ********/


