$color_1: inherit;
$color_2: #7e7e7e;
$color_3: #999999;
$color_4: #111111;
$border-left-color_1: #111111;

.civi-accordion-image {
	.accordion-icon {
		transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
	}
	.accordion-title {
		transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
		display: inline-block;
		margin-bottom: 0;
		color: $color_1;
		font-size: 18px;
	}
	.accordion-header {
		transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
		display: flex;
		align-items: center;
		min-height: 60px;
		cursor: pointer;
	}
	.accordion-section.active {
		>.accordion-header {
			.closed-icon {
				display: block;
			}
			.opened-icon {
				display: none;
			}
		}
	}
	.accordion-title-wrapper {
		font-size: 0;
		flex-grow: 1;
	}
	.accordion-icons {
		font-size: 16px;
		flex-shrink: 0;
		margin: 0 0 0 10px;
		line-height: 0;
		.closed-icon {
			display: none;
		}
	}
	.accordion-content {
		display: none;
		color: $color_2;
	}
}
.civi-accordion-image.civi-accordion-image-icon-left {
	.accordion-header {
		flex-direction: row-reverse;
	}
	.accordion-icons {
		margin-left: 0;
		margin: 0 10px 0 0;
	}
}
.elementor-widget-civi-accordion-image {
	.accordion-heading {
		font-weight: 600;
		font-size: 34px;
		margin-bottom: 32px;
	}
	.civi-accordion-image {
		.accordion-header {
			min-height: unset;
		}
		margin-bottom: 32px;
	}
	.accordion-section {
		border-left: 1px solid #D9D9D9;
		padding-left: 20px;
		padding-top: 8px;
		padding-bottom: 8px;
		&:first-child {
			padding-top: 0px;
		}
		&:last-child {
			padding-bottom: 0px;
		}
		.accordion-title {
			&:hover {
				color: $color_4;
			}
		}
	}
	.accordion-section.active {
		border-left-color: $border-left-color_1;
		.accordion-title {
			color: $color_4;
		}
		.accordion-content {
			color: $color_4;
		}
	}
	.accordion-title {
		color: $color_3;
		font-weight: 500;
		margin-bottom: 4px;
		font-size: 24px;
	}
	.accordion-content {
		color: $color_3;
	}
	.flex {
		display: flex;
		align-items: center;
		margin-left: -15px;
		margin-right: -15px;
		.left {
			flex: 0 0 50%;
			max-width: 50%;
			padding: 0 15px;
			padding-right: 45px;
		}
		.right {
			flex: 0 0 50%;
			max-width: 50%;
			padding: 0 15px;
		}
	}
	.right {
		position: relative;
		overflow: hidden;
		img {
			overflow: hidden;
			transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) 0s, transform 800ms 0s;
			+ {
				img {
					position: absolute;
					top: 0;
					left: 15px;
					opacity: 0;
				}
			}
			&:first-child {
				position: relative;
				opacity: 1;
				transform: translateY(0%);
			}
		}
	}
}
@media (max-width: 767px) {
	.elementor-widget-civi-accordion-image {
		.flex {
			flex-direction: column;
			.left {
				flex: 0 0 100%;
				max-width: 100%;
				padding: 0 15px;
				margin-bottom: 30px;
			}
			.right {
				flex: 0 0 100%;
				max-width: 100%;
				padding: 0 15px;
				width: -webkit-fill-available;
				object-fit: cover;
				height: auto;
				img {
					width: -webkit-fill-available;
					object-fit: cover;
					height: auto;
				}
			}
		}
	}
}
