html, body {
	height: 100%;
	margin: 0;
}
body {  
	padding: 0; 
	font-family: 'Exo', sans-serif;
}
p, ol, ul {
	font-size: 18px;
	line-height: 1.5;
}
.konten p, .konten ol, .konten ul {
	text-align: justify
}
.kurung {
	border: solid 1px #3746556e;
    border-radius: 5px;
    padding: 0 24px;
	position: relative
}
.kurung ul li {
	padding-left: 5px
}
.link {
	text-decoration: underline;
	color: #2b4e84;
	cursor: pointer
}
.co_laps span  {
	text-decoration: underline;
	color: #2b4e84;
	cursor: pointer;
}
.co_laps:after {
	content: '\002B';
    border: solid 1px #6c757d;
    padding: 0 5px;
    border-radius: 3px;
    cursor: pointer;
	margin-left: 5px;
}
.aktif:after {
	content: "\2212";
}
.co_laps_content {
	max-height: 0;
	overflow: hidden;
	transition: max-height .5s ease-out;
	transform: translate(0, -20px);
}
.co_laps_content.ijasah {
	transform: none;
}
button {  
	font-family: 'Exo', sans-serif;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer
}
.over-flow {
	overflow: auto;
	overscroll-behavior: auto contain;
	max-height: 328px;
	margin-right: -20px;
	padding-right: 20px;	
}
h1 {
	line-height: 1;
	font-family: 'Anton', sans-serif;
	font-weight: normal;
	color: white;
	text-shadow: 1px 1px black;
}
h2 {
	font-size: 22px;
	color: #374655;
	font-family: "Archivo Black", sans-serif;
}
.hero-image, .gambar, .konten-image {
	position: relative;	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.hero-image, .gambar {
	height: 100%;
}
.depan {
	max-width: 1025px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 24px;
	background: white;
	height: 75%;
	border: 1px solid rgba(0,0,0, .2);
	box-shadow: 
        inset  
              0 0 0 1px white,
              0.3em 0.3em 0.3em rgba(0,0,0,0.3);
}
.konten { 
	max-width: 1025px; 
	margin: 0 auto 0; 
	padding: 20px 15px;
}
.konten-image {
	background-image: url("https://belajark3.com/new_images/konten.webp");
}
.infoPELATIHAN, #myBtn, #ke-atas {
	position: fixed;
	right: 10px;
	cursor: pointer;
	display: none;
	opacity: 0;
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: .6s;
	animation-name: kanan;
	animation-duration: 2s;
}
.GARIS {
	border-top: solid 3px #374655;
	width: 100px;
}
.GARIS1 {
	border-top: solid 3px white;
	width: 100px;
}
.GARIS3 {
	border-top: solid 2px rgba(0,0,0, .5);
	width: 100px;
	margin-top: -10px
}
.selengkapnya {
	position: relative;
	cursor: pointer;
	color: white;
	border-radius: 5px;
	text-shadow: 1px 1px black;
	display: inline-block;
	overflow: hidden;
	background-color: rgb(55,70,85);
	padding: 5px 20px;
	font-size: 16px;
	text-decoration: none;
}
.selengkapnya::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	transition: left 0.4s;
	z-index: 0;
	background-color: #daa14c;
}
.selengkapnya:hover::before {
	left: 0;
}
.selengkapnya span {
	position: relative;
	z-index: 1;
	transition: color 0.4s;
}
.infoPELATIHAN {
	bottom: 5px;
}
#myBtn {
	bottom: 50px;
}
#ke-atas {
	bottom: 95px;
}
@keyframes kanan {
	from {right: -150%; opacity: 0}
	to {right: 10px; opacity: 1}
}
.infoFlek {
	display: flex;
	align-items: center;
}
.infoFlek img, #ke-atas {
	width: 40px;
	height: 40px;
	margin-left: 5px;
	transition: transform .2s ease;
}
.infoFlek:hover img, #ke-atas:hover {
	transform: scale(1.1);
	}
.info {
	font-size: 15px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 20px;
	border: solid 1px black;
	background: rgb(240, 240, 240);
	text-align: center;
}
.CALL1, .CALL2 {
	position: absolute;
	font-size: 15px;
	display: inline-block;
	padding: 5px 8px;
	border-radius: 3px;
	border: 1px solid rgb(118, 111, 84);
	color: rgb(118, 111, 84);
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: .2s ease
}
.CALL1 {
	top: 165px;
	left: 184px;
}
.CALL2 {
	top: 322px;
	left: 184px;
}
.CALL1:hover,
.CALL1:active,
.CALL2:hover,
.CALL2:active {
	color: rgb(255,255,255);
	background-color: rgb(118, 111, 84);
	border-color: rgb(118, 111, 84); 
}
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	overflow: hidden;
	opacity: 0;
	background-color: rgba(0,0,0, .7);
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: .6s;
	animation-name: fade;
	animation-duration: 1s;
}
@keyframes fade {
	from {opacity: 0} 
	to {opacity: 1}
}
.infoPELATIHAN.buka, #myBtn.buka, .modal.buka, #ke-atas.buka {
	opacity: 1;
	display: block;
}
.modal_body {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.admin, .adminCSMS {
	width: 740px;
	height: 429px;
	animation-name: animatetop;
	animation-duration: 1.6s;
}
.admin {
	background-image: url("https://belajark3.com/admin.webp");
}
.adminCSMS {
	background-image: url("https://belajark3.com/admin-csms.webp");
}
.silabus {
	width: 900px;
	height: 506px; 
	background-image: url("https://belajark3.com/new_images/pq-csms.webp");
	transform: scale(0);
	animation: zoomIn 3s .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	border: 1px solid #888;
	box-shadow: 
		inset 0 -3em 3em rgba(0,0,0,0.1), 
			  0 0 0 3px white,
			  0.3em 0.3em 1em rgba(0,0,0,0.3);			  
}
.Unduh_Brosur {
	width: 900px;
	height: 460px;
	border: solid 1px white;
	padding: 40px 20px;
	background: #1e1e1e;
	animation-name: fade;
	animation-duration: 3s
}
.Unduh_Brosur embed {
	width: 100%;
	height: 100%;
}
@keyframes unfoldIn {
	0% {
		transform:scaleY(.005) scaleX(0);
		}
	50% {
		transform:scaleY(.005) scaleX(1);
		}
	100% {
		transform:scaleY(1) scaleX(1);
		}
}
@keyframes zoomIn {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes animatetop {
	from {top: -200%; opacity: 0}
	to {top:0; opacity: 1}
}
.clos {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 30px;
	font-weight: bold;
	margin: 0;
	line-height: 1;
	border: 1px solid black;
	border-radius: 3px;
	padding: 0 8px;
	background: white
}
.clos:hover,
.clos:focus {
	color: blue;
	text-decoration: none;
	cursor: pointer;
}

/* -- modal silabus ----- */
.modal_content {
	overflow: auto;
	width: 100%; height: 100%;
	overscroll-behavior: auto contain
}
.pading {
	padding: 10px 30px;
	max-width: 500px;
}
.pading h2 {
	font-size: 28px;	
	margin: 0;
	margin-top: 20px
}
.modal_content ul {
	background: rgba(255, 255, 255, .4);
	border: solid 1px rgba(0,0,0,.3);
	border-bottom: solid 3px rgba(0,0,0,.3);
	border-right: solid 2px rgba(0,0,0,.3);
	border-radius: 5px;
	padding-top: 14px;
	padding-right: 15px;
	padding-bottom: 15px;
	margin: 6px 0 10px 0;
	font-size: 17px;
}
/* COLLAPSABLE */
.KOLAPP {
	cursor: pointer;
	margin-bottom: 10px;
}
.KOLAPP:after {
	content: 'Selengkapnya';
	border: solid 1px rgba(0,0,0,.3);
	border-bottom: solid 3px rgba(0,0,0,.3);
	border-right: solid 2px rgba(0,0,0,.3);
	background: rgba(255, 255, 255, .4);
	float: right;
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 15px;
	text-decoration: none;
}
.dian:after {
	content: 'Tutup';
}
.content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.7s ease-out;
}
.content ol {
	border: solid 1px rgba(0,0,0,.3);
	border-bottom: solid 3px rgba(0,0,0,.3);
	border-right: solid 2px rgba(0,0,0,.3);
	background: rgba(255, 255, 255, .4);
	border-radius: 5px;
	font-size: 17px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	margin-top: 6px;
}
.flekPDF {
	display: flex;
	align-items: center;
}
.flekPDF img {
	width: 50px;
	height: 50px;
	margin-right: 16px;
	transition: transform .15s ease;
}
.flekPDF a {
	font-size: 18px;
	text-decoration: none; 
    color: black
}
.flekPDF:hover img {
	transform: scale(1.1);
}
.konten .footer p, .konten .footer h2 {
    text-align: center;
}
.KOTAK4 { 
	background-color: rgba(255, 240, 240, 0.7); 
	padding: 5px 30px 30px 30px;
	margin: 30px 0;
	max-width: 600px;
	text-align: justify;
	box-shadow: 
		inset 0 -3em 3em rgba(0,0,0,0.1), 
			  0 0  0 1px white,
			  0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.flekKiri, .flekKanan {
	display: flex;
	align-items: center;
}
.flekKanan {
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flekKiri img, .flekKanan img {
	width: 360px;
	height: auto;
	box-shadow: 
	inset 0 -3em 3em rgba(0,0,0,0.1), 
        0 0 0 1px white,
        0.2em 0.3em 0.15em rgba(0,0,0,0.3);
}
.flekKiri img {
	margin-right: 40px;
}
.flekKanan img {
	margin-left: 40px;
}
.flekLOGO {
	position: absolute;
	left: 100px;
	top: 20px;
	display: flex;
	align-items: center;
	width: 340px;
	z-index: 1
}
.flekLOGOimg {
	width: 60px;
	height: 60px;
	border: 1px solid white;
	padding: 0 8px;
	border-radius: 5px;
	margin-right: 10px;
	background: linear-gradient(45deg, black, transparent)
}
.belajar {
	display: inline-block;
	font-size: 12px;
	padding: 0 6px;
	background-color: #daa14c;
	color: #fff;
	text-shadow: 1px 1px #000;
	border-radius: 1px;
}
.learning {
	font-size: 26.8px;
	line-height: .9;
	font-family: "Archivo Black", sans-serif;
	text-decoration: underline;
	color: white;
	text-shadow: 1px 1px black;
}
.lembaga {
	font-size: 12px;
	color: white;
	text-shadow: 1px 1px black;
}
.pilihCSMS {
	position: absolute;
	right: 0;
	top: 7px;
}
.colaps:after {
	content: "\2261";
	border: solid 1px white;
	border-radius: 5px;
	padding: 0 12px;
	font-size: 30px;
	z-index: 1;
	float: right;
	cursor: pointer;
	color: white;
}
.zia:after {
	background: rgba(250, 250, 250, .8);
	color: black
}
.conten {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease-out;
	margin-top: 60px;
}
.di-an {
	border: solid 1px #baafa7;
	border-bottom: solid 3px #8c8885;
	border-right: solid 2px #8c8885;
	background: #FFFCFA;
	border-radius: 15px;	
	padding: 15px 20px;
	overflow: auto;
	overscroll-behavior: auto contain;
}
.di-an a {
	text-decoration: none;
	color: black;
	transition: .3s ease;
	font-size: 16px	
}
.di-an a:hover {
	text-decoration: underline;
}
.di-anFlek {
	display: flex;
	align-items: center;
	margin: 10px 0;
}
.di-anFlek img {
	width: 20px;
	height: 20px;
	margin-right: 15px;
}
.left {
	float: left;
	width: 49%;
	}
.right {
	float: right;
	width: 49%;
	}
.group:after {
	content:"";
	display: table;
	clear: both;
    }
button span.wa_call, a span.email {
	color: white;
	font-size: 13px;
	padding: 7px 12px;
	border-radius: 3px;
	transition: .3s ease;
}
button span img, a span img {
	margin-bottom: -5px;
}
a span.email { 
	background: #FA5A5A;
	text-shadow: 1px 1px black;
}
button span.wa_call {
	background: #20433F
}
button span.wa_call:hover, a span.email:hover {
	text-decoration: underline
}
ol button.selengkapnya {
	padding: 2px 10px
}
.flek_icon {
	position: absolute;
	left: 220px;
	bottom: 45px;
	display: flex;
	width: 400px;
	justify-content: space-between;
	margin: 0
}
.flek_icon ol {
	margin: 0;
}
.flek_icon a , .flek_icon button {
	color: white;
	font-family: 'Exo', sans-serif;
	text-decoration: underline;
	line-height: 1;
	font-size: 17px;
	transition: .2s ease;
	margin-left: 5px;
}
.flek_icon a:hover, .flek_icon button:hover {
	color: yellow;
}
.left.kiri, .right.kanan {
	width: 48%;
	margin-bottom: 50px
}
#K3_Listrik .Unduh_Brosur, #persyaratan .Unduh_Brosur {
	background-image: url("https://belajark3.com/membuat_dokumen/b-g.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.flekLISTRIK {
	display: flex;
	text-align: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;	
}
.flekLISTRIK hr {
	width: 60%
}
.flekLISTRIK img {
	width: 60px;
	height: 60px;
	margin-bottom: 10px
}
.listrik {
	border: #8c8885 solid 1px;
	width: 150px;
	padding: 20px 10px;
	margin: 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.5s ease;
	line-height: 1.2
}
.listrik:hover,
.listrik:active,
.berkas .contoh:hover,
.berkas .contoh:active {
	box-shadow: inset 0 0 0 4px white, 1em 1em 1em rgba(0, 0, 0, 0.3);
	background-color: white
}
.Lis-trik, .berkas {
	overflow: auto;
	overscroll-behavior: auto contain;
}
.berkas {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
    justify-content: center;
	margin-top: 20px;
}
.berkas .contoh {
	border: #8c8885 solid 1px;
	padding: 20px;
	margin: 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.5s ease;
	line-height: 1.2;
	display: flex;
	align-items: center;
	width: 330px
}
.berkas a img {
	margin-right: 10px;
	width: 60px;
	height: 60px;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.depan, .konten {
		max-width: 900px;
		}
	p, ol, ul {
		font-size: 17px;
		}
	.flekLOGO {
		left: 60px;
		}
	.flek_icon {
		left: 190px;
		}
	}
	
@media (min-width: 768px) and (max-width: 991.98px) {	
	.hero-image {
		background: none;
		height: 100%;
		}
	.depan {
		padding: 0;
		height: 100%;
		border: none;
		box-shadow: none;
		}
	p, ol, ul {
		font-size: 17px;
		}
	.konten { 
		padding: 20px 40px;
		}
	.silabus, .Unduh_Brosur {
		width: auto;
		height: 80%;
		}
	.modal_body {
		right: 60px;
		left: 60px;
		}
	.flekLOGO {
		left: 40px;
		}
	.flek_icon {
		left: 160px;
		}
	.flekLISTRIK {
		margin-top: 0
		}
	#K3_Listrik .Unduh_Brosur, .Lis-trik, #persyaratan .Unduh_Brosur, .berkas {
		height: 405px
		}
	#K3_Listrik .Unduh_Brosur, #persyaratan .Unduh_Brosur {
		padding: 40px 0;
		}
	.berkas .contoh {
		width: 260px
		}
	.berkas .contoh {	
		margin-top: 0;
		}
	}
@media (min-width: 576px) and (max-width: 767.98px) {  
	.hero-image {
		height: 100%;
		}
	.depan {
		left: 40px;
		right: 40px;
		}
	.konten { 
		padding: 20px 64px;
		}
	p, ol, ul {
		font-size: 17px;
		}
	.silabus, .Unduh_Brosur {
		width: auto;
		height: 640px;
		}
	.modal_body {
		right: 60px;
		left: 60px;
		}
	.admin, .adminCSMS {
		height: 534px;
		width: 400px;
		}
	.admin {
		background-image: url("https://belajark3.com/admin1.webp");
		}
	.adminCSMS {
		background-image: url("https://belajark3.com/admin-csms1.webp");
		}
	.CALL1 {
		top: 225px;
		left: 202px;
		font-size: 14px;
		}
	.CALL2 {
		top: 375px;
		left: 202px;
		font-size: 14px;
		}
	.pading {
		max-width: 100%;
		padding: 10px 40px;
		}
	.flekKiri, .flekKanan {
		display: block;
		}
	.flekKiri img, .flekKanan img {
		width: 80%;
		height: auto;
		margin: 0 auto 20px;
		display: block;
		}
	.KOTAK4 {
		text-align: left
		}
	.flekLOGO {
		left: 40px;
		right: 40px;
		top: 40px;
		width: auto;
		}
	.left, .right, .left.kiri, .right.kanan {
		width: 100%;
		}
	.left {
		margin-bottom: 40px;
		}
	.flek_icon {
		left: 40px;
		right: 40px;
		margin: auto;
		width: auto;
		bottom: 30px;
		}
	.di-anFlek img {
		width: 18px;
		height: 18px;
		}
	.di-an {
		width: 260px;
		}
	.flekLISTRIK {
		margin-top: 0
		}
	#K3_Listrik .Unduh_Brosur, .Lis-trik, #persyaratan .Unduh_Brosur, .berkas {
		height: 630px;
		}
	#K3_Listrik .Unduh_Brosur, #persyaratan .Unduh_Brosur {
		padding: 40px 0px;
		}
	.berkas .contoh {
		margin: 30px 20px;
		width: 380px
		}
	.co_laps {
		position: relative;
		transform: none;
		right: 0;
		}
	.co_laps_content {
		transform: none;
		padding-bottom: 15px
		}
	.co_laps_content.ijasah {
		padding-bottom: 0
		}
	}
@media screen and (max-width: 575.98px) {
	.hero-image {
		background: none;
		height: 660px;
		}
	.depan {
		padding: 0;
		height: 100%;
		border: none;
		box-shadow: none;
		}
	h1 {
		margin: 0
		}
	h2 {
		font-size: 20px
		}
	p, ol, ul {
		font-size: 16px;
		}
	.info {
		font-size: 13px;
		}
	.infoFlek img, #ke-atas {
		width: 35px;
		height: 35px;
		}
	.admin, .adminCSMS {
		height: 442px;
		width: 330px;
		}
	.admin {
		background-image: url("https://belajark3.com/admin1.webp");
		}
	.adminCSMS {
		background-image: url("https://belajark3.com/admin-csms1.webp");
		}
	.CALL1 {
		top: 184px;
		left: 161px;
		font-size: 12px;
		}
	.CALL2 {
		top: 308px;
		left: 161px;
		font-size: 12px;
		}
	#myBtn {
		bottom: 45px;
		}
	.clos {
		font-size: 20px;
		padding: 0 5px
		}
	.silabus {
		width: auto;
		height: 80%;
		}
	.Unduh_Brosur {
		width: auto;
		height: 420px;
		padding: 40px 0;
		}
	.modal_body {
		right: 15px;
		left: 15px;
		}
	.pading {
		padding: 15px
		}
	.pading h2 {
		font-size: 24px;
		margin-top: 10px
		}
	.selengkapnya {
		font-size: 15px
		}
	.flekKiri, .flekKanan {
		display: block;
		}
	.flekKiri img, .flekKanan img {
		width: 100%;
		height: auto;
		margin: 0 auto 20px;
		display: block;
		}
	.KOTAK4 {
		padding: 5px 20px 30px 20px;
		text-align: left
		}
	.konten-image {
		background-image: url("https://belajark3.com/new_images/konten1.webp");
		padding-bottom: 60px
		}
	.di-an {
		padding: 10px 20px;
		width: 250px;
		}
	.di-anFlek {
		font-size: 15px;
		}
	.di-anFlek img {
		width: 18px;
		height: 18px;
		margin-right: 10px;
		}
	.flekLOGO {
		left: 15px;
		width: auto;
		right: 15px
		}
	.left, .right, .left.kiri, .right.kanan {
		width: 100%;
		}
	.left {
		margin-bottom: 40px
		}
	button span.wa_call, a span.email {
		font-size: 13px;
		}
	.flek_icon {
		left: 15px;
		right: 15px;
		margin: auto;
		width: auto;
		justify-content: space-evenly;
		bottom: 40px;
		}
	.flek_icon a, .flek_icon button {
		font-size: 14px;
		}
    .di-an a {
        font-size: 15px	
        }
    .content ol {
        font-size: 16px;
        }
    .modal_content ul {
        font-size: 16px;
        }
	.flekPDF a {
		font-size: 17px
		}
	.flek_icon ol {
        padding-left: 25px
        }
	#ke-atas {
		bottom: 80px;
		}
	.listrik {
		width: 130px;
		padding: 20px 5px;
		margin: 20px 10px;
		}
	#K3_Listrik .Unduh_Brosur, .Lis-trik, #persyaratan .Unduh_Brosur, .berkas {
		height: 460px
		}
	#K3_Listrik .Unduh_Brosur, #persyaratan .Unduh_Brosur {
		padding: 20px 0;
		}
	.berkas {
		margin-top: 5px
		}
	.berkas .contoh {
		margin: 25px 20px
		}
	.kurung {
		padding: 0 20px;
		}
	.kurung ol, .kurung ul {
		padding-left: 30px;
		}
	h3 {
		font-size: 16px
		}
	.flekPDF img {
		width: 40px;
		height: 40px;
		margin-right: 10px;
		}
	.konten p, .konten ol, .konten ul {
		text-align: left
		}
	}