h1 {
	font-size: 60px;
}
.judul_materi h1 {
	color: #374655; text-shadow: none;
	line-height: .9;
	font-weight: normal;
	font-family: "Archivo Black", sans-serif;
	margin: 0;
}
.bk3 .learning, .bk3 .lembaga {
	color: #374655; text-shadow: none
}
.bk3 .lembaga {
	border-top: solid 1px #374655;
}
.gambar .colaps:after {
	color: #374655;
	border: solid 1px #374655;
}
.hero-image {
	background-image: url("https://belajark3.com/dokumen-CSMS/images/bg.webp");
}
.gambar {
	background-image: url("https://belajark3.com/dokumen-CSMS/images/bg-new.webp");
}
.judul_materi {
	position: absolute;
	bottom: 20px;
	left: 100px;
	max-width: 600px
}
.penjelasan {
	border: solid 1px #BFBFBF;
	background: rgb(250, 250, 250);
	border-radius: 3px;
	padding: 2px 12px;
	font-size: 14px;
	cursor: pointer;
	display: inline;
	color: #2b4e84;
}
.penjelasan:hover,
.penjelasan:active {
	background: rgb(240, 240, 240);
	transition: background-color 0.2s ease-in,
              border-color 0.2s ease-in;
}

.jawab {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	border-radius: 3px;
	background: #e8f0fb;
	padding: 10px 40px;
	box-shadow: inset 0 0 0 1px white, 0.3em 0.3em 0.3em rgba(0, 0, 0, 0.3);
	border: solid 1px rgba(0,0,0, .2);
	animation-name: fade;
	animation-duration: 1.6s;
	width: 620px;
	height: max-content;
	z-index: 1;
	opacity: 0;
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: .7s;
	text-align: justify;
	overflow: auto;
    overscroll-behavior: auto contain;
}
.jawab.show {
	opacity: 1;
	display: block;
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.x {
	right: 0px;
	top: -7px;
	position: absolute;
	cursor: pointer;
	font-weight: bold;
	padding: 5px;
	font-size: 24px;
	color: rgba(0,0,0, .7)
}
.bg-top {
	position: absolute;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #ffffff, transparent);
	width: 100%;
}
.konten .kurung {
    margin-bottom: 50px;
    background: #f8fafd69;
	padding-bottom: 20px
}
.flekPDF {
	border: 1px solid rgba(0, 0, 0, .2);
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
	transition: .5s ease;
    text-align: left;
	margin: 20px 0
}
.kurung .flekPDF a {
	font-size: 16px
}
.flekPDF:hover,
.flekPDF:active {
    box-shadow: inset 0 0 0 4px white, 1em 1em 1em rgba(0, 0, 0, 0.3);
	background: white;
}
.kurung .group .left {
	width: 58%
}
.kurung .group .right {
	width: 40%;
}
body .kurung ul, body .kurung ol, body .kurung p {
	text-align: left
}



@media (min-width: 992px) and (max-width: 1199.98px) {
	h1 {
		font-size: 56px;
		}
	}
@media (max-width: 991.98px) {
	.kurung .group .left, .kurung .group .right {
		width: 100%
		}
	.kurung .group .left {
		margin-bottom: 0
		}
	}
@media (min-width: 768px) and (max-width: 991.98px) {
	.judul_materi {
		left: 40px;
		}
	.konten .kurung {
		padding: 0 60px 20px
		}
	}
@media (min-width: 576px) and (max-width: 767.98px) {
	.judul_materi {
		left: 40px;
		width: 400px
		}
	h1 {
		font-size: 50px;
		}
	.jawab {
		width: auto
		}
	.jawab {
		width: auto;
		left: 50px;
		right: 50px;
		}
	.gambar {
		background-image: url("https://belajark3.com/dokumen-CSMS/images/bg-new1.webp");
		}
	}
@media screen and (max-width: 575.98px) {
	.gambar {
		background-image: url("https://belajark3.com/dokumen-CSMS/images/bg-new1.webp");
		}
	.judul_materi {
		left: 24px;
		bottom: 40px;
		}
	h1 {
		font-size: 50px;
		}
	.jawab {
		width: auto;
		left: 14px;
		right: 15px;
		padding: 5px 20px;
		text-align: left
		}
	.jawab p, .jawab ol, .kurung .flekPDF a {
		font-size: 15px
		}
	}