.image-wrapper {
    position: relative;
	overflow: hidden;

	.overlay-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.content-inner {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
	}

	img {
		object-fit: cover;
	}
}


.popup-play-btn {
	position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 55px;
    width: 55px;
    background: #fff;
    display: block;
    line-height: 58px;
    font-size: 24px;
    border-radius: 50%;
    animation: ripple-white 1s linear infinite;
	color: $color__theme;

	i {
		margin-left: 8px;
	}

	&:hover {
		background: $color__theme;
		color: #fff;
	}
}

.tt-parallax__image {
	position: relative;
	padding: 40px;
	z-index: 1;

	.parallax-image {
		background-color: #fcdde1;
		padding: 3em;
		border-radius: 20px;

		img {
			border-radius: 1rem;
			width: 100%;
		}
	}

	.image-two, .image-three, .image-four, .image-five {
		position: absolute;
	}

	.image-one {
		&.image_skew {
			backface-visibility: hidden;
			transform: rotateY(-35deg) rotateX(15deg);
		}
	}


	.image-two {
		bottom: 0;
		right: 0;

		img {
			border-radius: 1rem;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
		}

		@media(max-width: 576px) {
			max-width: 150px;
		}
	}

	.dot_shape {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		max-width: 80%;
		width: 100%;
	}

	&--two {
		.parallax-image-two {
			text-align: center;
		}

		.dot_shape {
			left: 50%;
			transform: translateX(-50%);
			top: 150px;
		}

		.image-two, .image-three, .image-three {
			img {
				box-shadow: 0 5px 20px 0 rgba(210, 210, 245, 0.5);
			}
		}

		.image-two {
			left: 0;
			top: 33%;
		}

		.image-three {
			right: -4%;
			top: 36%;
		}

		.image-four {
			right: 46%;
			top: 66%;
		}
	}
}