body { 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("https://belajark3.com/LATAR2.webp");
}
.shadow {
  max-width: 1100px;
  margin: 0 auto 0;
  box-shadow: 
  inset 0 -1em 1em rgba(0,0,0,0.1), 
        0 0 0 1px white,
        0.1em 0.1em 0.1em rgba(0,0,0,0.3);
}
.dokumentasi {
	width: 100%;
	display: none;
	margin: auto;
	margin-top: 50px;
	border-radius: 10px;
}
.shadow p {
	text-align: justify
}
.layout-1 {
  background: rgb(240, 240, 240); 
  margin: 50px auto 0px; 
  padding: 30px 60px 30px; 
  border-top: solid 3px #FFC000;
  position: relative;  
}
.layout-2 {
  background: white; 
  margin: 0px auto 0px; 
  padding: 30px 60px 20px; 
}
.layout-3 { 
  background: rgb(255,249,231); 
  margin: 0px auto 0px; 
  padding: 30px 60px 30px;  
}
.layout-bawah { 
  background: rgba(240, 240, 240, 0.87);  
  margin: 0px auto 40px; 
  padding: 30px 60px 30px;
}
.layout-bawah p, .layout-bawah h2 {
	text-align: center
}
.layout-1 .flekLOGO {
	position: relative;
	left: 0;
    top: 0;
}
h1.h1 { 
  color: #374655; 
  font-size: 26px;
  line-height: 1;
  font-weight: normal;
  font-family: "Archivo Black", sans-serif; 
  text-shadow: none;
  margin-top: 50px
}
.KOLOMleft {
	float: left;
    width: 49%;
}
.KOLOMright {
    float: right;
    width: 49%;
}
.KOLOMgroup:after {
    content: "";
    display: table;
    clear: both;
} 
.KOTAK { 
	width: 100%;
	height: auto;
	box-shadow: inset 0 -3em 3em rgba(0,0,0,.1), 0 0 0 2px white, 0.2em 0.3em 0.15em rgba(0,0,0,.3);
	border-radius: 10px
}
.bottom {
	height: 20px
}
.layout-1 .colaps:after {
	color: #374655;
	border: solid 1px #374655
}
video {
	border: solid 1px white;
	width: 50%;
	border-radius: 10px;
	position: absolute;
	left: 40px;
	top: 0;
	bottom: 0;
	margin: auto;
	transform: scale(0);
	animation: zoomIn 2s 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
@keyframes zoomIn {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
#video1 .Unduh_Brosur, #video2 .Unduh_Brosur {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#video1 .Unduh_Brosur {
	background-image: url('https://belajark3.com/Dokumentasi_Training_Pengelolaan_Lingkungan/video_bgA.jpg');
	}
#video2 .Unduh_Brosur {
	background-image: url('https://belajark3.com/Dokumentasi_Training_Pengelolaan_Lingkungan/video_bgB.jpg');
	}
.Unduh_Brosur .flekLOGO {
	left: 40px;
	top: 50px
}
.Unduh_Brosur p {
	color: white;
	position: absolute;
	bottom: 30px;
	left: 40px;
	max-width: 640px;
	text-shadow: 1px 1px black
}
iframe {
	display: block; 
	width: 480px; 
	height: 282px; 
	margin: 0 auto 40px; 
	box-shadow: inset 0 -3em 3em rgba(0,0,0,.1), 0 0 0 2px white, 0.2em 0.3em 0.15em rgba(0,0,0,.3); 
	border-radius: 15px;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.shadow {
		max-width: 1000px;
		}
	iframe {
		width: 431px;
		height: 253px;
		}
	}
@media (min-width: 768px) and (max-width: 991.98px) {
	.layout-1 {
		margin: 0px auto 0px; 
		border-top: none; 
		}
	.layout-bawah { 
		margin: 0px auto 0px; 
		}
	body {
		background-image: none;
		}
	iframe {
		width: 50%
		}
	}
@media (min-width: 576px) and (max-width: 767.98px) {
	iframe {
		width: 100%
		}
	.Unduh_Brosur .flekLOGO {
		top: 20px
		}
	.Unduh_Brosur p {
		bottom: 10px;
		}
	video {
		width: 90%;
		left: 20px;
		right: 20px;
		top: 30%
		}
	body {
		background-image: none;
		}
	.layout-1 {
		margin: 0px auto 0px; 
		border-top: none; 
		}
	.layout-bawah { 
		margin: 0px auto 0px; 
		}
	.KOLOMleft, .KOLOMright {
		float: none;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		}
	#video1 .Unduh_Brosur {
		background-image: url('https://belajark3.com/Dokumentasi_Training_Pengelolaan_Lingkungan/video_bg1.webp');
		height: 70%;
		}
	#video2 .Unduh_Brosur {
		background-image: url('https://belajark3.com/Dokumentasi_Training_Pengelolaan_Lingkungan/video_bg2.webp');
		height: 70%;
		}
	.dokumentasi {
		display: block
		}
	}
@media (max-width: 575.98px) {
	iframe {
		width: 100%;
		height: 205px;
		}
	.Unduh_Brosur .flekLOGO, .Unduh_Brosur p {
		display: none
		}
    .dokumentasi {
		display: block
		}
	#video1 .Unduh_Brosur {
		background-image: url('https://belajark3.com/Dokumentasi_Training_Pengelolaan_Lingkungan/video_bg1.webp');
		height: 70%;
		}
	#video2 .Unduh_Brosur {
		background-image: url('https://belajark3.com/Dokumentasi_Training_Pengelolaan_Lingkungan/video_bg2.webp');
		height: 70%;
		}
	video {
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;
		top: 55%
		}
	.KOLOMgroup {
		margin-top: 20px
		}
	.layout-1 .flekLOGO {
		float: none;
		position: relative;
		}
	h1.h1 {
		margin-top: 50px;
		text-align: center
		}
	.shadow h2 {
		text-align: center;
		margin: 0
		}
	.shadow .GARIS {
		margin: auto;
		margin-top: 10px
		}
	body {
		background-image: none;
		}
	.layout-1 {
		padding: 30px 15px 30px;
		margin-top: 0;
		border-top: none;
		}
	.layout-2 {
		padding: 30px 15px 30px;
		margin-top: 0;
		}
	.layout-3 {
		padding: 30px 15px 30px;
		margin-top: 0;
		}
	.layout-bawah { 
		margin: 0px auto 0px; 
		padding: 30px 15px 30px;
		}
	.KOLOMleft, .KOLOMright {
		float: none;
		width: 100%;
		}
	.bottom {
		height: 0
		}
	}