.container-sld{
	position: relative;
}

.container-sld .slide-container .slide{
	min-height: 80vh;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	padding: 20px 9%;
	padding-bottom: 70px;
}

.container-sld .slide-container .slide .ctn-slide{
	flex: 1 1 350px;
	animation: slideContent .4s linear .6s backwards;
}

@keyframes slideContent{
	0%{
		opacity: 0;
		transform: translateX(-50px);
	}
}

.container-sld .slide-container .slide .image{
	flex: 1 1 400px;
}

.container-sld .slide-container .slide .image img{
	width: 90%;
	animation: slideImage .4s linear;
}

@keyframes slideImage{
	0%{
		opacity: 0;
		transform: translateY(-50px);
	}
}

.container-sld .slide-container .slide .ctn-slide h3{
	font-size: 2rem;
	color: #D4C665;
}

.container-sld .slide-container .slide .ctn-slide p{
	font-size: 1.2rem;
	color: #FFF;
	padding: 10px 0;
	line-height: 150%;
}

.container-sld .slide-container{
	display: none;
}

.container-sld .slide-container.active{
	display: block;
}


/* panah navigasi */
.container-sld #prev,
.container-sld #next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	background: #1E7885;
	height: 40px;
	width: 40px;
	line-height: 40px;
	font-size: 25px;
	text-align: center;
	cursor: pointer;
	font-weight: bolder;
	border-radius: 50%;
}

.container-sld #prev:hover,
.container-sld #next: hover{
	background: #666;
}

.container-sld #prev{
	left: 20px;
}
.container-sld #next{
	right: 20px;
}

/* Media Query */

@media (max-width: 1170px){
	.container-sld{
	left: 3%;
	right: 3%;
	}

	.container-sld .slide-container .slide .ctn-slide{
		flex: 1 1 250px;
	}

	.container-sld .slide-container .slide .image{
		flex: 1 1 350px;
	}	

	.container-sld .slide-container .slide .ctn-slide h3{
		font-size: 25px;
	}

	.container-sld .slide-container .slide .ctn-slide p{
		font-size: 14px;
	}	
}

@media(max-width: 1000px){
	.container-sld{
	left: 2%;
	right: 2%;
	}
}


@media (max-width: 500px){

	.container-sld .slide-container .slide{
		min-height: 50vh;
		gap: 10px;
		padding: 5px 9%;
		padding-bottom: 10px;
	}	

	.container-sld .slide-container .slide .ctn-slide h3{ font-size: 1.5rem;	}
	.container-sld .slide-container .slide .ctn-slide p{ font-size:1.1rem;  padding:5px 0; }

	.container-sld #prev,
	.container-sld #next{
		height: 30px;
		width: 30px;
		line-height: 30px;
		font-size: 20px;
	}

	.container-sld #prev{
		left:0;
		top: 50%;
	}
	.container-sld #next{
		right:0;
		top: 50%;
	}
}