html {
    scroll-behavior: smooth;
}
html, body {
	height: 100%;
	margin: 0;
}
body {  
	padding: 0; 
	font-family: 'Montserrat', sans-serif;
}
p, ol, ul, button.link {
	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';
	padding: 0 6px;
	border-radius: 3px;
	cursor: pointer;
	margin-left: 5px;
	box-shadow: inset 0 0 0 1px white, .1em 0.1em 0.3em rgba(0, 0, 0, 0.5);
	background: #374655;
	color: white;
}
.co_laps.ukom {
	margin-bottom: 30px
}
.co_laps.ukom h3 {
	border-left: 5px solid #374655;
	border-bottom-left-radius: 5px;
	padding: 10px 30px;
	margin-top: 0;
	background: linear-gradient(45deg, #3746551a, transparent);
	color: #374655;
}
.co_laps.ukom:after {
	content: 'selengkapnya';
	margin-left: 0;
	padding: 7px;
	font-size: 15px;
	color: white;
    border-radius: 3px;
	background-color: rgb(55, 70, 85);
	box-shadow: inset 0 0 0 1px white, .1em 0.1em 0.3em rgba(0, 0, 0, 0.5);
	border: none;
	width: 120px;
	display: block;
	text-align: center;
	position: absolute;
    right: 0;
    transform: translate(-25px, -70px);
}
.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.ukom ol {
	padding-left: 55px;
}
.co_laps_content.ijasah {
	transform: none;
}
.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;
}
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");
}
.GARIS1 {
	border-top: solid 3px white;
	width: 100px;
}
.GARIS {
	border-top: solid 3px #374655;
	width: 100px;
	transform: translate(0, -5px)
}
.GARIS3 {
	border-top: solid 2px rgba(0,0,0, .5);
	width: 100px;
	margin-top: -10px
}
.selengkapnya {
	position: relative;
	cursor: pointer;
	color: white;
	border-radius: 3px;
	text-shadow: 1px 1px black;
	display: inline-block;
	overflow: hidden;
	background-color: rgb(55,70,85);
	width: 120px;
	text-align: center;
	padding: 7px;
	font-size: 15px;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px white, .1em 0.1em 0.3em rgba(0, 0, 0, 0.5);
}
.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, #myBtn, #ke-atas {
	position: fixed;
	right: 10px;
	cursor: pointer;
	opacity: 0;
	display: none;
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: 1s;
	animation-name: kanan;
	animation-duration: 3s;
}
.infoPELATIHAN {
	bottom: 10px;
}
#myBtn {
	bottom: 55px;
}
#ke-atas {
	bottom: 105px;
	width: 40px;
	height: 40px;
	transition: transform .2s ease;
}
@keyframes kanan {
	from {right: -250%; opacity: 0}
	to {right: 10px; opacity: 1}
}
.infoFlek {
	display: flex;
	align-items: center;
}
.infoFlek img {
	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 0;
	border-radius: 20px;
	border: solid 1px black;
	background: rgb(240, 240, 240);
	text-align: center;
	box-sizing: border-box;
	width: 130px
}
.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: 177px
}
.CALL2 {
	top: 322px;
	left: 177px
}
.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 2s 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	border: 1px solid #888;
	background-color: white;
	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: 450px;
	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: #ffffffb8;
	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;
}
.co_laps.KOLAPP span {
	color: black
}
.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: #ffffffb8;
	float: right;
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 15px;
	color: black;
	box-shadow: none
}
.KOLAPP.aktif: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: 395px;
	z-index: 1;
	justify-content: space-between
}
.flekLOGOimg {
	width: 60px;
	height: 60px;
	border: 1px solid white;
	padding: 0 12px;
	border-radius: 5px;
	background: linear-gradient(45deg, black, transparent);
}
.bk3 {
	display: inline-block;
	transform: translate(5px, -4px)
}
.belajar {
	display: inline;
	font-size: 14px;
	padding: 0 6px;
	background-color: #daa14c;
	color: #fff;
	text-shadow: 1px 1px #000;
	border-radius: 1px;
	font-family: 'Roboto', sans-serif;
}
.learning {
	font-size: 26px;
	line-height: .9;
	font-family: 'Archivo Black', sans-serif;
	color: white;
}
.lembaga {
	font-size: 12.1px;
	color: white;
	font-family: 'Roboto', sans-serif;
	border-top: solid 1px white;
	background: linear-gradient(45deg, black, transparent);
}
.colaps {
	transform: translate(0, -10px)
}
.colaps:after {
	content: "\2261";
	border-radius: 5px;
	padding: 0 12px;
	font-size: 30px;
	z-index: 1;
	cursor: pointer;
	color: white;
	background: none
}
.zia:after {
	background: rgba(250, 250, 250, .8);
	color: black
}
.conten {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease-out;
	width: 310px;
	position: absolute;
	right: 0;
	top: 45px
}
.di-an {
	border: solid 1px #baafa7;
	border-bottom: solid 3px #8c8885;
	border-right: solid 2px #8c8885;
	background: #FFFCFA;
	border-radius: 15px;	
	padding: 8px 24px;
	overflow: auto;
	overscroll-behavior: auto contain;
}
.di-an a {
	text-decoration: none;
	color: black;
	transition: .3s ease;
	font-size: 15px	
}
.di-an a:hover {
	text-decoration: underline;
}
.di-anFlek {
	display: flex;
	align-items: center;
	margin: 16px 0;
}
.di-anFlek img {
	width: 20px;
	height: 20px;
	margin-right: 15px;
}
.left {
	float: left;
	width: 49%;
	position: relative
	}
.right {
	float: right;
	width: 49%;
	position: relative
	}
.group:after {
	content:"";
	display: table;
	clear: both;
    }
button {  
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
}
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;
	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;
	background-color: white
}
.flekLISTRIK {
	display: flex;
	text-align: center;
	flex-wrap: wrap;
	justify-content: space-evenly	
}
.flekLISTRIK hr {
	width: 60%
}
.flekLISTRIK img {
	width: 60px;
	height: 60px;
	margin-bottom: 10px
}
.listrik {
	border: #8c8885 solid 1px;
	width: 150px;
	height: 180px;
	padding: 20px 10px;
	margin: 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.5s ease;
	line-height: 1.2;
	font-size: 15px;
	box-sizing: border-box
}
.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: space-evenly;
	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;
	text-align: left;
	font-size: 15px
}
.berkas button img {
	margin-right: 10px;
	width: 60px;
	height: 60px;
}
.kotak_video {
	height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("/bg_video.webp");
	position: relative;
	}
.flekVIDEO {
	padding-left: 35px;
	display: flex;
	justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
	border-radius: 5px;
	}
.h2_video {
	max-width: 414px;
	text-align: center
	}
.h2_video .GARIS {
	margin: auto
	}
.h2_video p {
	text-align: center;
	}
.VID {
	width: 500px;
	position: relative
	}
.mySlides {
	display: none;
	}
.mySlides video {
	animation-name: fade;
	animation-duration: 5s;
	border-radius: 15px;
	}
.indikator {
	display: flex; 
	align-items: center;
	position: absolute;
	bottom: 150px
	}
.w3-badge {
	height: 10px;
	width: 10px;
	cursor: pointer;
	display: inline-block;
	border-radius: 50%;
	margin-right: 7px
	}
.w3-border {
	border: 1px solid #ccc!important
	}
.w3-transparent {
	background-color: #3746552b!important
	}
.w3-white {
	background-color: #3746555e!important;
	height: 26px;
	width: 26px;
	}
.w3-hover-white:hover {
	background-color: #de9ab8!important
	}
.lazy {
	opacity: 0;
	transition: opacity 1s ease-in;
}
.lazy-loaded {
	opacity: 1;
}
.VIDbutton {
	float: right;
	transform: translate(-52px, 13px);
	}
.VID-button {
	padding: 2px 8px;
	border-radius: 5px;
	cursor: pointer;
	display: inline-block;
	}
button.VID-button {
	font-size: 15px;
	transition: 0.3s ease;
}
button.VID-button:hover,
button.VID-button:active {
	text-decoration: underline
}
.flek_review {    
	font-size: 12px;	
	display: flex;
	margin-top: 5px
}
.nama {
	opacity: 0;
	animation: animate 1s ease-in-out 1 forwards;
	font-size: 20px;
	font-weight: bold;
	color: #374655
}
.perusahaan, .gTPtFb {
	opacity: 0;
	animation: animate 1s ease-in-out 0.3s 1 forwards;
}
.img-g {
	margin-right: 15px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: solid 1px #3746556e
}
.gTPtFb {
	color: #fbbc04;
	clip-path: polygon(6px 0,4.31px 3.98px,0 4.34px,3.28px 7.18px,2.29px 11.4px,6px 9.16px,9.71px 11.4px,8.72px 7.18px,12px 4.34px,7.69px 3.98px,6px 0,20px 0,18.31px 3.98px,14px 4.34px,17.28px 7.18px,16.29px 11.4px,20px 9.16px,23.71px 11.4px,22.72px 7.18px,26px 4.34px,21.69px 3.98px,20px 0,34px 0,32.31px 3.98px,28px 4.34px,31.28px 7.18px,30.29px 11.4px,34px 9.16px,37.71px 11.4px,36.72px 7.18px,40px 4.34px,35.69px 3.98px,34px 0,48px 0,46.31px 3.98px,42px 4.34px,45.28px 7.18px,44.29px 11.4px,48px 9.16px,51.71px 11.4px,50.72px 7.18px,54px 4.34px,49.69px 3.98px,48px 0,62px 0,60.31px 3.98px,56px 4.34px,59.28px 7.18px,58.29px 11.4px,62px 9.16px,65.71px 11.4px,64.72px 7.18px,68px 4.34px,63.69px 3.98px,62px 0);
	display: inline-block;
	width: 68px;
    height: 11.4px;
}
@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}
.co_laps.video {
	position: absolute;
    right: 0;
	transform: translate(0, -50px)
}
.co_laps_content.video {
	position: absolute;
    right: 20px;
    bottom: 120px;
	width: 460px
}
.co_laps_content.video ol {
	font-size: 12px;
	border: solid 1px #3746556e;
    border-radius: 5px;
    background: #fdfdfdf0;
	padding: 10px 15px 10px 30px
}
.border_video {
	border: solid 1px #3746556e;
	border-radius: 15px;
	padding: 3px 3px 0 3px;
}


.flek_daftar_pelatihan {
	display: flex;
	list-style: none;
	padding-left: 0;
	flex-wrap: wrap;
	justify-content: space-between
}
.flek_daftar_pelatihan li .training {
	text-align: left;
	line-height: 1
}
.KOTAK1 {
	width: 460px;
	display: block;
	margin: 40px auto;
	position: relative
}
.GARIS2 {
	border-top: solid 1.5px #ED7D31;
	width: 130px;
}
.training {
	position: absolute;
	left: 20px;
	right: 40px;	
	bottom: 20px;
}
.training .pH2 {
	font-family: "Archivo Black", sans-serif;
	text-align: left;
	line-height: 1;
	margin: 0 0 10px;
    font-size: 22px;
    color: #374655;
    border-left: 5px solid #374655;
    border-bottom: solid 1px #37465580;
    border-bottom-left-radius: 5px;
    padding: 2px 0 10px 10px;
	box-sizing: border-box;
	text-align: center;
}
.info_lengkap {
	display: flex;
	align-items: flex-end;
}
.img_training {
	width: 130px;
	height: auto;
	transform: translate(0, 5px);
}
.info_lengkap a.link, .info_lengkap button.link {
	font-size: 16px;
	color: black;
	line-height: 1;
	margin-left: 10px
}
.KOTAK1_img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}
.info_lengkap a.link:hover, 
.info_lengkap button.link:hover {
	box-shadow: 1px 1px 15px 10px rgba(0,0,0, .05);
	background: rgba(0,0,0, .05);
	transition: .3s ease;
}
@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;
		}
	.kotak_video {
		height: 408px
		}
	.VID {
		width: 441px;
		}
	.VIDbutton {
		transform: translate(-32px, 7px)
		}
	.indikator {
		bottom: 106px;
		}
	button.VID-button {
		font-size: 15px;
		}
	.co_laps.ukom h3 {
		font-size: 17px
		}
	.h2_video {
		transform: translate(-12px, -12px)
		}
	.co_laps_content.video {
		width: 400px
		}
	.KOTAK1 {
		width: 400px
		}
	.training .pH2 {
		font-size: 20px;
		}
	.training {
		right: 20px
		}
	.info_lengkap a.link, .info_lengkap button.link {
		font-size: 15px;
		}
	}
	
@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, button.link {
		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;
		justify-content: center
		}
	#K3_Listrik .Unduh_Brosur, .Lis-trik, #persyaratan .Unduh_Brosur, .berkas {
		height: 405px
		}
	.Unduh_Brosur {
		height: 405px
		}
	#K3_Listrik .Unduh_Brosur, #persyaratan .Unduh_Brosur {
		padding: 40px 0;
		}
	.berkas .contoh {
		width: 300px;
		margin: 10px
		}
	.contoh {	
		margin-top: 0;
		}
	.berkas {	
		margin-top: 0
		}
	.co_laps.ukom:after {
		position: relative;
		transform: none
		}
	.co_laps.ukom h3 {
		padding: 10px 20px;
		}
	.listrik  {
		margin: 10px
		}
	.flekKiri, .flekKanan {
		flex-wrap: wrap;
		justify-content: space-around
		}
	.flekKiri img {
		margin-right: 0
		}
	.flekKanan img {
		margin-left: 0
		}
	.flekKiri img, .flekKanan img {
		margin-bottom: 30px;
		width: 500px
		}
	.right, .left {
		float: none;
		width: 100%
		}
	.flekVIDEO {
		justify-content: space-around;
		margin-bottom: 0
		}
	.h2_video {
		max-width: 100%;
		}
	.kotak_video {
		background: none;
		height: auto
		}
	.VIDbutton {
		margin: 10px auto;
		text-align: center;
		float: none;
		transform: none
		}
	.indikator {
		position: relative;
		bottom: 0;
		text-align: center;		
		}
	.konten {
		margin-bottom: 20px
		}	
	.kotak_review {
		height: 52px;
        padding: 24px 15px;
        width: auto;
        border-left: 5px #374655 solid;
        background: linear-gradient(45deg, #3746551a, transparent);
        border-bottom-left-radius: 5px;
		margin-top: 20px
		}
	.co_laps.video {
		transform: none
		}
	.co_laps_content.video {
		bottom: 204px;
		}
	.co_laps_content.video ol {
		margin-top: 15px
		}
	.flek_daftar_pelatihan {
		justify-content: center
		}
	}
@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, button.link {
		font-size: 17px;
		}
	.GARIS1 {
		margin: 20px auto;
		}
	.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: 194px;
		font-size: 14px;
		}
	.CALL2 {
		top: 375px;
		left: 194px; 	
		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;
		}
	.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 {
		margin-top: 0
		}
	.berkas .contoh {
		margin: 30px 20px;
		width: 460px
		}
	.listrik {
		padding: 15px 10px;
		margin: 18px 10px
		}
	.co_laps_content.ijasah {
		padding-bottom: 0
		}
	.flekVIDEO {
		padding-left: 0;
		margin-bottom: 0
		}
	.VID {
		width: auto;
		margin: auto;
		}
	.h2_video {
		max-width: 100%;
		}
	.kotak_video {
		height: auto;
		background: none
		}
	.VIDbutton {
		margin: 10px auto;
		text-align: center;
		float: none;
		transform: none
		}
	.indikator {
		position: relative;
		bottom: 0;
		text-align: center;
		margin: auto;
		}
	.co_laps.ukom:after {
		position: relative;
		transform: none
		}
	.co_laps.ukom h3 {
		padding: 10px 20px;
		}	
	.kotak_review {
		height: 60px;
        padding: 24px 15px;
        width: auto;
        border-left: 5px #374655 solid;
        background: linear-gradient(45deg, #3746551a, transparent);
        border-bottom-left-radius: 5px;
		margin-top: 20px
		}
	.co_laps_content.video {
		bottom: 207px
		}
	.co_laps.video {
		transform: none
		}
	.co_laps_content.video ol {
		margin-top: 15px
		}
	.flek_daftar_pelatihan {
		justify-content: center
		}
	}
@media screen and (max-width: 575.98px) {
	.hero-image {
		background: none;
		height: 88%;
		}
	.depan {
		padding: 0;
		height: 100%;
		border: none;
		box-shadow: none;
		}
	.GARIS1 {
		margin: 20px auto;
		}
	.judul_materi {
		left: 15px;
		right: 15px;
		margin: auto;
		text-align: center;
		}
	h2 {
		font-size: 20px
		}
	p, ol, ul, button.link {
		font-size: 16px;
		}
	.info {
		font-size: 13px;
		width: 110px
		}
	.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: 155px;
		font-size: 12px;
		}
	.CALL2 {
		top: 308px;
		left: 155px;
		font-size: 12px;
		}
	#ke-atas {
		bottom: 90px;
		}
	#myBtn {
		bottom: 50px;
		}
	.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: 13px;
		width: 100px
		}
	.flekKiri, .flekKanan {
		display: block;
		}
	.flekKiri img, .flekKanan img {
		width: 100%;
		height: auto;
		margin: 2px 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
		}
	.conten {
	    width: 270px;
		top: 49px
	    }
	.di-an {
		padding: 5px 20px;
		}
	.di-anFlek {
		font-size: 15px;
		margin: 15px 0;
		}
	.di-anFlek img {
		width: 20px;
		height: 20px;
		margin-right: 2;
		}
	.flekLOGO {
		left: 15px;
		top: 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: 0;
		right: 0;
		margin: auto;
		width: auto;
		justify-content: space-evenly;
		bottom: 30px;
		}
	.flek_icon a, .flek_icon button {
		font-size: 15px;
		}
	.di-an a {
		font-size: 14px	
		}
	.content ol, .modal_content ul {
		font-size: 15px;
		}
	.flekPDF a {
		font-size: 16px
		}
	.flek_icon ol {
		padding-left: 25px
		}
	.listrik {
		width: 140px;
		height: 144px;
		padding: 10px;
		margin: 10px 5px;
		font-size: 14px
		}
	#K3_Listrik .Unduh_Brosur, .Lis-trik, #persyaratan .Unduh_Brosur {
		height: 490px
		}
	.Unduh_Brosur {
		height: 445px
		}
	.clos {
		top: 6px;
		right: 6px;
		}
	#K3_Listrik .Unduh_Brosur, #persyaratan .Unduh_Brosur {
		padding: 20px 0;
		}
	.flekLISTRIK img {
		margin-bottom: 5px;
		width: 55px;
		height: 55px;
		}
	.berkas {
		margin-top: 0;
		height: 480px
		}
	.berkas button img {
		width: 61px;
		height: 61px;
		}
	.berkas .contoh {
		width: 100%;
		margin: 10px 20px
		}
	.kurung {
		padding: 0 20px;
		}
	.kurung ol {
		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
		}
	.KOLAPP:after {
		font-size: 13px;
		}
	.flekVIDEO {
		padding-left: 0;
		margin-bottom: 0
		}
	.mySlides video {
		border-radius: 5px
		}
	.VID {
		width: auto;
		margin: auto;
		}
	.h2_video {
		max-width: 100%;
		}
	.kotak_video {
		height: auto;
		background: none
		}
	.VIDbutton {
		text-align: center;
		float: none;
		transform: translate(0, -146px)
		}
	.indikator {
		position: relative;
		bottom: 0;		
		margin: auto
		}
	.w3-badge {
		height: 8px;
		width: 8px;
		}
	.w3-white {
		height: 20px;
		width: 20px;
		}
	.co_laps.ukom:after {
		font-size: 20px;
        width: 100px;
		width: auto;
		content: '\002B';
		padding: 0 7px;
		transform: translate(-15px, -60px);
		}
	.co_laps.ukom.aktif:after {
		content: "\2212";
		}
	.co_laps.ukom h3 {
		font-size: 16px;
		padding: 10px 40px 10px 15px
		}
	.left.ukom {
		margin-bottom: 0
		}
	.co_laps_content.ukom ol {
		padding-left: 30px
		}
	.kurung ul {
		padding-left: 20px;
		}
	.h2_video p {
		text-align: center;
		}	
	.kotak_review {
		height: 62px;
        padding: 24px 15px;
        width: auto;
        border-left: 5px #374655 solid;
        background: linear-gradient(45deg, #3746551a, transparent);
        border-bottom-left-radius: 5px;
		margin-top: 50px
		}
	.co_laps.video {
		transform: translate(-10px, -5px)
		}
	.co_laps_content.video {
		width: auto;
		margin-left: 20px;
		z-index: 1;
		bottom: 115px;
		}
	.nama {
		font-size: 18px
		}
	button.VID-button {
		font-size: 13px
		}
	.border_video {
		border-radius: 6px
		}
	.img-g {
		transform: translate(0, 2px)
		}
	.KOTAK1 {
		width: 100%;
		}
	.training {
		right: 15px;
		left: 0;
		bottom: -20px;
		}
	.training .pH2 {
		font-size: 20px;
		margin: 0;
		}
	.img_training {
		width: 110px
		}
	.info_lengkap a.link, .info_lengkap button.link {
		font-size: 13px;
		margin-left: 10px
		}
	.flekLOGOimg {
		width: 65px;
		height: 65px;
		padding: 0 12px	
		}
	.bk3 {
		transform: translate(5px, -7px)
		}
	.co_laps.colaps {
		transform: translate(0, -10px)
		}
	}