.training .pH2.migas {
	text-align: center;
	width: 297px
}
.training .pH2.ahli {
	text-align: center;
	width: 267px
}
.training .pH2.pop {
	text-align: center;
	width: 401px
}
.bg-buttom {
	position: absolute;
	bottom: 0;
	height: 260px;
	background: linear-gradient(0deg, #000000c4, transparent);
	width: 100%;
}
.bg-left {
	position: absolute;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #ffffff, #ffffffba, #ffffff00);
	width: 80%;
}
.bg-bottom {
	position: absolute;
	bottom: 0;
	height: 40%;
	background: linear-gradient(0deg, #ffffff, #ffffffcf, #ffffff00);
	width: 100%;
}
.judul_materi {
	position: absolute;
	bottom: 60px;
	left: 100px;
	max-width: 660px;
}
.pro {
	position: absolute;
	bottom: 165px;
	left: 216px;
	color: white;
	line-height: 1.2;
	text-shadow: 1px 1px #000;
	display: none
}
.flek_infoo {
	display: flex;
	position: absolute;
	bottom: 69px;
    left: 212px;
}
.flek_infoo ol {
	font-size: 12px;
	color: white;
}
.flek_infoo ol li {
	margin-bottom: 5px
}
.flek_infoo a {
	cursor: pointer;
	transition: 0.2s ease;
	color: white;
	text-decoration: none;
	border: 1px white solid;
	padding: 1px 8px;
	border-radius: 3px;
	background: rgba(0,0,0, .3);
	margin-right: 10px;
	font-size: 14px
}
.flek_infoo a:hover,
.flek_infoo a:active {
	background: #daa14c;
	color: white;
	border: 1px solid #daa14c;
	text-shadow: 1px 1px #000;
}
h1 {
	font-size: 50px;
	margin: 0;
	color: white
}
.hero-image {
	background-image: url("https://belajark3.com/whats-new/images/bg.webp");
}
.gambar {
	background-image: url("https://belajark3.com/k3_migas/images/gambar-bg.webp");
}
.bg-top {
	position: absolute;
	top: 0;
	height: 200px;
	background: linear-gradient(180deg, #000000a3, transparent);
	width: 100%;
	}
.GARIS3 {
	border-top: solid 3px white;
	width: 100px;
}
.footer {
	text-align: center;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	h1 {
		font-size: 48px
		}
	.judul_materi {
		left: 40px;
		}
	.flek_infoo {
		left: 154px
		}
	.pro {
		left: 179px;
		}
	}
@media (min-width: 768px) and (max-width: 991.98px) {
	.flek_infoo {
		bottom: 40px;
		left: 40px;
		}
	.pro {
		bottom: 162px;
		left: 154px;
		}
	.judul_materi{
		left: 40px;
		bottom: 70px;
		}
	}
@media (min-width: 576px) and (max-width: 767.98px) {
	.judul_materi {
		left: 40px;	
		bottom: 120px;
		width: 300px;
		right: 40px;
		margin: auto;
		text-align: center
		}
	.pro {
		bottom: 60px;
		left: 40px;
		right: 40px;
		color: white;
		line-height: normal;
		display: block;
		text-align: center
		}
	h1 {
		font-size: 56px;
		}
	.gambar {
		background-image: url("https://belajark3.com/k3_migas/images/gambar-bg1.webp");
		}
	.flek_infoo {
		display: none
		}
	}
@media screen and (max-width: 575.98px) {
	.flek_infoo {
		display: none
		}
	.bg-top {
		background: linear-gradient(180deg, #0000006e, transparent);
		}
	.bg-buttom {
		background: linear-gradient(0deg, #0000003b, transparent);
		height: 160px
		}
	.gambar {
		background-image: url("https://belajark3.com/k3_migas/images/gambar-bg1.webp");
		}
	.judul_materi {
		max-width: 270px;
		bottom: 120px
		}
	h1 {
		font-size: 46px;
		}
	.pro {
		bottom: 40px;
		left: 15px;
		right: 15px;
		font-size: 15px;
		display: block;
		text-align: center;
		width: 300px;
        margin: auto;
		}
	.training .pH2.migas {
		width: 248px;
		}
	.training .pH2.ahli {
		width: 246px;
		}
	.training .pH2.pop {
		width: 249px;
		}
	}