.container .slide {
	display: none;
	z-index: 999;
	animation: slide1 2s ease;
	animation-play-state: running;


}

.slide.active {
	display: flex;

	/* height:100vh; */
}

@keyframes slide1 {
	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(0.4) !important;
	}

	100% {
		transform: scale(0.8) !important;
	}


}

.container {
	max-width: 1170px;
	margin: auto;

}

.home .container {
	flex-grow: 1;
}

.home .caption {
	/* width:50%; */
	/* margin-left: -101px; */
}

.caption h1 {
	font-size: 42px;
	color: #000000;
	margin: 0;

}

@media screen and (max-width:992px) {
	.caption h1 {
		font-size: 1.5rem;
		text-align: justify;
		text-align-last: center;

	}
}

.slide.active .caption h1 {
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1s;
}

.caption p {
	font-size: 18px;
	margin: 15px 0 30px;
	color: #222222;
}

@media screen and (max-width:992px) {
	.caption p {
		font-size: 18px;
		text-align: justify;
		text-align-last: center;
	}
}

.slide.active .caption p {
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1.2s;
}

.caption a {
	display: inline-block;
	padding: 10px 30px;
	background-color: #000000;
	text-decoration: none;
	color: #ffffff;
}

@media screen and (max-width:992px) {
	.caption a {
		margin-bottom: 50px;
		padding: 5px 15px;
	}

	.caption {
		display: flex;
		flex-direction: column;
		align-items: center;
	}





}

.slide.active .caption a {
	opacity: 0;
	animation: captionText .5s ease forwards;
	animation-delay: 1.4s;
}

@keyframes captionText {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}

	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.controls .prev,
.controls .next {
	position: absolute;
	z-index: 2;
	top: calc(50% - 20px);
	height: 40px;
	width: 40px;
	color: #ffffff;
	background-color: #FF5722;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	cursor: pointer;
	transition: all .5s ease;
}

.controls .prev:hover,
.controls .next:hover {
	background-color: #000000;
}

.controls .prev {
	left: 27px;
}

.controls .next {
	right: 30px;
}

.indicator {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	transform: translateX(-50%);
	display : flex;
}

.indicator div {
	display: inline-block;
	width: 25px;
	height: 25px;
	color: #ffffff;
	background-color: #FF5722;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
	margin: 0 10px;
}

.indicator div.active {
	background-color: #000;
}

/*responsive*/
@media(max-width: 1200px) {
	.controls {
		display: none;
	}
}

@media(max-width: 576px) {

	img[src='img/edu.png'],
	img[src='img/web_creater(1).png'],
	img[src='img/course.png'],
	img[src='img/junior_coding.png'] {
		width: 95%;
		margin: 0 auto;
		display: block;
		/* box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; */
		/* padding: 20px; */
		border: 1px solid;
		padding: 15px;
		box-shadow: 5px 10px 8px #888888;
	}

	.indicator div {
		margin: 0 6px;
	}

}