.slideshow {
	position: relative;
}

.carousel-item {
	position: relative;
}

.backgraund {
	z-index: -15;
	display: block;
	object-fit: cover;
	width: 100%;
	height: 700px;
	filter: brightness(0.5);
}

.con {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	top: 200px;
	left: 30%;
}

.subtittle-con {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		top: calc(100% - 2px);
		width: 100%;
		height: 4px;
		background-color: var(--secondary);
		transform-origin: center center;
		transform: scaleX(0);
		animation: line-animation 3s ease infinite alternate;
	}

	div#image-subtittle {
		color: var(--primary);
		font-size: 70px;
		font-style: italic;
		font-weight: 100;
		padding: 10px;
		font-stretch: condensed;
		font-family: 'Great Vibes', serif;

		animation: clip-path-reveal-1 3s ease infinite alternate;
	}
}

@keyframes line-animation {
	0% {
		transform: scaleX(0);
	}

	15% {
		transform: scaleX(0);
	}

	20%,
	25% {
		transform: scaleX(1);
		top: calc(100% - 2px);
	}

	50% {
		transform: scaleX(1);
		top: 0px;
	}

	70% {
		transform: scaleX(0.2);
		top: 0px;
	}

	80%,
	100% {
		transform: scaleX(0.2);
		top: 0px;
	}
}

@keyframes clip-path-reveal-1 {
	0%,
	25% {
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	50% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}

.tittle-con {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		bottom: calc(100% - 2px);
		width: 100%;
		height: 4px;
		background-color: var(--primary);
		transform-origin: center center;
		transform: scaleX(0);

		animation: line-animation 3s ease infinite alternate;
	}

	div#image-tittle {
		color: var(--primary);
		font-size: 150px;
		font-style: italic;
		padding: 10px;
		font-weight: 100;
		font-stretch: condensed;
		font-family: 'Poiret One', serif;
		animation: clip-path-reveal-1 3s ease infinite alternate;
	}
}

@keyframes line-animation {
	0% {
		transform: scaleX(0);
	}

	15% {
		transform: scaleX(0);
	}

	20%,
	25% {
		transform: scaleX(1);
		top: calc(100% - 2px);
	}

	50% {
		transform: scaleX(1);
		top: 0px;
	}

	70% {
		transform: scaleX(0.2);
		top: 0px;
	}

	80%,
	100% {
		transform: scaleX(0.2);
		top: 0px;
	}
}

@keyframes clip-path-reveal-1 {
	0%,
	25% {
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	50% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}

@media only screen and (max-width: 600px) {
	.carousel-item {
		height: 500px;
	}

	.con {
		position: absolute;
		top: 200px;
		left: 27%;
	}

	.subtittle-con {
		div#image-subtittle {
			font-size: 30px;
		}
	}

	.tittle-con {
		div#image-tittle {
			font-size: 55px;
		}
	}
}