.element_give_donations {
	.archive_give_donation {
		padding-bottom: 0;
		.summary {
			width: 100%;
			padding-right: 0;
			.wrap_summary {
				margin: 0 -15px;
				@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: 767px) {
							margin-bottom: 60px;
						}
					}
					@media (max-width: 767px) {
						width: 100%;
						margin-bottom: 60px;
					}
					.detail_body {
						background-color: #fff;
					}
				}
			}
			.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;
	@media (max-width: 991.98px) {
		padding-bottom: 60px;
	}
	.summary {
		width: 66.6667%;
		padding-right: 15px;
		@media (max-width: 991.98px) {
			width: 100%;
			padding-right: 0;
		}
		.wrap_summary {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -15px;
			@media (max-width: 991.98px) {
				margin: 0;
			}
			.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 {
							&:after {
								opacity: 1;
								transition: .3s all ease;
							}
							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%;
				}
				.image_future {
					position: relative;
					
					.thumbnail {
						overflow: hidden;
						&: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;
							@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));
							}
						}
						img {
							width: 100%;
							transition: .3s all ease;
						}
					}
					
					.media {
						position: absolute;
						bottom: 20px;
						right: 20px;
						
						@media (max-width: 767px) {
							bottom: 50%;
							right: 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: #f0c84c;
									padding: 10px;
									border-radius: 100%;
								}
							}
						}
						.gallery {
							transition: .3s all ease .1s;
							&:hover {
								color: #f0c84c;
								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: #f0c84c;
								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: #e1e1e1;
						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 {
					box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
					transition: .3s all ease;
					padding: 15px 25px;
					.title {
						margin: 10px 0 18px 0;
						a {
							color: #202b5d;
							font-size: 24px;
							line-height: 30px;
							font-weight: 600;
							transition: .3s all ease;
							&:hover {
								color: #f0c84c;
								transition: .3s all ease;
							}
						}
					}
					.desc {
						margin-bottom: 30px;
						color: #62718d;
						font-size: 17px;
						line-height: 24px;
						margin-top: 0;
					}
					.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: 5px;
						overflow: visible;
						.wrap_percentage_2{
							background-color: #f0c84c;
							position: relative;
						}
						.wrap_percentage_1{
							background-color: #f0c84c;
							position: relative;
						}
						.percentage{
							background-color: #f0c84c;
							color: #fff;
							position: absolute;
							top: -10px;
							right: 0px;
							z-index: 777;
							padding: 0 10px;
							color: #fff;
							transition: .3s all ease;
						}
					}
					.raised {
						display: flex;
						margin-bottom: 20px;
						margin-top:30px;
						font-size: 17px;
						line-height: 24px;
						@media(max-width: 1200px){
			             display: block;
		                }
						>div {
							span {
								display: block;
							}
						}
						.income {
							display: flex;
							font-size: 17px;
							line-height: 24px;
							color: #202b5d;
							span:last-child {
								color: #62718d;
								letter-spacing: 0.2px;
								padding: 0px 5px 0 5px;
							}
							@media(max-width: 1200px){
								padding-bottom: 5px;
			            
		                }
						}
						.ingo{
							font-size: 17px;
							line-height: 24px;
							color: #202b5d;
							padding-right: 5px;
							@media(max-width: 1200px){
								display: none;
		                    }

						}
						.goal {
							display: flex;
							font-size: 17px;
							line-height: 24px;
							color: #202b5d;
							span:last-child {
								color: #62718d;
								letter-spacing: 0.2px;
								padding: 0px 5px 0px 5px;
							}
						}

					}
				}
			}
		}

		.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: 15px;
		position: sticky;
		position: -webkit-sticky;
		top: 130px;
		bottom: 550px;
		height: 580px;
		
		@media (max-width: 991.98px) {
			width: 100%;
			padding-left: 0;
			position: relative;
			height: auto;
			top: 0;
    		bottom: 0;
		}
		.give-sidebar {
			width: 100%!important;
			padding-left: 50px;
			@media (max-width: 991.98px) {
			 padding-left: 20px;
			 padding-right: 20px;

			}

			.widget-title {
				margin-top: 0;
				padding-bottom: 25px;
				border-bottom: 1px solid #e5e5e5;
			}
		}
	}

	&.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 ********/


/*FIX DONATE HOME 9*/
.donate_home9{
	.give_error{
		display: none;
	}
	[id*=give-form] .give-form-title{
		display: none;
	}
	.give-goal-progress{
		display: none;
	}
	[id*=give-form] div.give-form-content-wrap{
		display: none;
	}
	.give-donation-amount{
		display: none;
	}
	.give-btn-level-custom{
		display: none;
	}
	.give-btn-level-0{
		display: none;
	}
    #give-donation-level-button-wrap>li{
    	margin: 0 10px 10px 0;
    }
	.give-donation-level-btn{
		background-color: #ffff;
		color: #222222;
		padding: 15px 29px;
		transition: 0.3s;
		font-weight: 700;
		&:hover,&:focus,&:active{
		background-color:#222222;
		border-color: #222222;
		color: #ffff;
		};
	}
	.give-btn-modal{
		width: 100%;
		text-align: center;
		font-size: 20px;
		height: 50px;
		font-weight: 700;
		color: #ffffff;
		background-color: #f0c84c;
		border: none;
		outline: none;
		&:hover{
			background-color:#222222;
			transition: 0.3s ease;
		};
	}
	.give-default-level{
		background-color: #222222;
		transition: 0.3s;
		border-color: #222222;
		color: #ffff;
	}
	#give-donation-level-button-wrap{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}

