html {
	position: relative;
}
/* dokumen*/
body {
	margin-top: 30px;
	margin-bottom: 120px;
}


.jumbotron img {
	width: 200px;
	border: 5px solid #666;
}

section {
	height: 900px;
}

.portfolio {
	background-color: #eee;
}

.contact {
	min-height: 800px;
}

footer {
	width: 100%;
	bottom: 0;
	height: 200px;
	background-color: #333fff;
	padding: 60px;
}

footer p {
	color: #fff333;
	font-size: lem;
}

footer p i {
	color: sandybrown;
}

.input {
	background-color: blue;
}
.service {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 10px;
}

.service {
	background-color: #eee;
	padding: 15%;
}

.service .icon {
	font-size: 3em;
	width: 50px;
	height: 50px;
}

.img-home {
	margin-top: 5px;
	width:100%;
	height: 550px;
}

@media screen and (min-width: 1500px) {
	.img-home {
		width:100%;
		height: 550px;
	}
}

@media screen and (max-width: 500px) {
	.img-home {
		text-align: left;
		margin-top: 10px;
		width: 400px;
		height: 300px;
	}
}

.img-lapor {
	margin-top: 5px;
	width: 95%;
	/* height: 1300px; */
	height: 240px;
}

@media screen and (min-width: 1500px) {
	.img-lapor {
		width: 95%;
		height: 240px;
	}
}

@media screen and (max-width: 500px) {
	.img-lapor {
		text-align: left;
		margin-top: 10px;
		width: 350px;
		height: 200px;
	}
}


.img-kejadian {
	margin-top: 5px;
	width: 80%;
	text-align: center;
	height:70%;
}

@media screen and (min-width: 1500px) {
	.img-kejadian {
		width: 80%;
		height:70%;
		text-align: center;
	}
}

@media screen and (max-width: 500px) {
	.img-kejadian {
		text-align: left;
		margin-top: 10px;
		width: 290px;
		height: 200px;
	}
}

.img-tampilan {
		margin-left: 5px;
		margin-top: 5px;
		width: 18rem;
		text-align: center;
		border-radius: 2%;
}


@media screen and (min-width: 1080px) {
	.img-tampilan {
		margin-left: 2px;
		width: 18rem;
		border-radius: 2%;
		text-align: center;
	}
}

@media screen and (max-width: 412px) {
	.img-tampilan {
		margin-left: 1px;
		text-align: center;
		margin-top: 0px;
		width: 18rem;
		border-radius: 2%;
	}
}

@media screen and (max-width: 360px) {
	.img-tampilan {
		margin-left: 1px;
		text-align: center;
		margin-top: 0px;
		width: 18rem;
		border-radius: 2%;
	}
}
/* 
.img-tampilan:hover {
	transform: scale(1.1);
	transition: 0.2s;
} */

.img-psu {
	margin-left: 5px;
	margin-top: 0px;
	width: 23rem;
	text-align: center;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
	.img-psu {
		margin-top: 3px;
		margin-left: 2px;
		width: 23rem;
		border-radius: 5%;
		text-align: center;
	}
}


@media screen and (min-width: 810px) {
	.img-psu {
		margin-top: 3px;
		margin-left: 2px;
		width: 20rem;
		border-radius: 5%;
		text-align: center;
	}
}

@media screen and (max-width: 412px) {
	.img-psu {
		margin-left: 1px;
		text-align: center;
		margin-top: 3px;
		width: 20rem;
		border-radius: 5%;
	}
}

@media screen and (max-width: 384px) {
	.img-psu {
		margin-left: 1px;
		text-align: center;
		margin-top: 3px;
		width: 18rem;
		border-radius: 5%;
	}
}


@media screen and (max-width: 360px) {
	.img-psu {
		margin-left: 1px;
		text-align: center;
		margin-top: 3px;
		width: 17rem;
		border-radius: 5%;
	}
}

/* control video */

.video {
	margin-left: 10px;
	margin-top: 0px;
	width:1100px;
	height: 900;
	text-align: center
}


@media screen and (min-width: 1080px) {
	.video {
		margin-top: 3px;
		margin-left: 10px;
		width:1000px;
		height: 900;
		text-align: center;
	}
}

@media screen and (min-width: 915px) {
	.video {
		margin-top: 3px;
		margin-left: 10px;
		width:700px;
		height: 700;
		text-align: center;
	}
}

@media screen and (min-width: 810px) {
	.video {
		margin-top: 3px;
		margin-left: 10px;
		width:700px;
		text-align: center;
	}
}

@media screen and (max-width: 412px) {
	.video {
		margin-left: 1px;
		text-align: center;
		margin-top: 3px;
		width: 22rem;
	}
}

@media screen and (max-width: 384px) {
	.video {
		margin-left: 1px;
		text-align: center;
		margin-top: 3px;
		width: 20rem;
	}
}


@media screen and (max-width: 360px) {
	.kontrol {
		margin-left: 1px;
		text-align: center;
		margin-top: 3px;
		width: 17rem;
	}
}

.img-parpol:hover {
	transform: scale(1.1);
	transition: 0.2s;
}
/* img-parpol */

.img-parpol {
	margin-left: 5px;
	margin-top: 5px;
	width: 90px;
	height: 90px;
	text-align: center;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
.img-parpol {
	margin-left: 2px;
	width: 90px;
	height: 90px;
	border-radius: 5%;
	text-align: center;
}
}

@media screen and (max-width: 412px) {
.img-parpol {
	margin-left: 1px;
	text-align: center;
	margin-top: 0px;
	width: 45px;
	height: 45px;
	border-radius: 5%;
}
}

@media screen and (max-width: 360px) {
.img-parpol {
	margin-left: 1px;
	text-align: center;
	margin-top: 0px;
	width: 45px;
	height: 45px;
	border-radius: 5%;
}
}

.img-parpol:hover {
transform: scale(1.1);
transition: 0.2s;
}

/* img-caleg */

.img-cetak {
	margin-left: 5px;
	margin-top: 5px;
	width: 35px;
	height: 35px;
	text-align: center;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
.img-cetak {
	margin-left: 2px;
	width: 35px;
	height: 35px;
	border-radius: 20%;
	text-align: center;
}
}

@media screen and (max-width: 412px) {
.img-cetak {
	margin-left: 1px;
	text-align: center;
	margin-top: 0px;
	width: 35px;
	height: 35px;
	border-radius: 20%;
}
}

@media screen and (max-width: 360px) {
.img-cetak {
		margin-left: 1px;
		text-align: center;
		margin-top: 0px;
		width: 35px;
		height: 35px;
		border-radius: 20%;
	}
}


/* img-caleg */

.img-caleg {
	margin-left: 5px;
	margin-top: 5px;
	width: 60px;
	height: 60px;
	text-align: center;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
.img-caleg {
	margin-left: 2px;
	width: 60px;
	height: 60px;
	border-radius: 20%;
	text-align: center;
}
}

@media screen and (max-width: 412px) {
.img-caleg {
	margin-left: 1px;
	text-align: center;
	margin-top: 0px;
	width: 45px;
	height: 45px;
	border-radius: 20%;
}
}

@media screen and (max-width: 360px) {
.img-caleg {
	margin-left: 1px;
	text-align: center;
	margin-top: 0px;
	width: 45px;
	height: 45px;
	border-radius: 20%;
}
}

.img-caleg:hover {
transform: scale(1.1);
transition: 0.2s;
}

/* image ppsu */

.img-tampilan {
	margin-top: 5px;
	width: 400px;
	height: 200px;
	text-align: center;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
.img-tampilan {
	width: 400px;
	height: 200px;
	border-radius: 5%;
	text-align: center;
}
}

@media screen and (max-width: 854px) {
.img-tampilan {
	margin-top: 0px;
	width: 320px;
	height: 210px;
	border-radius: 3%;
}
}

@media screen and (max-width: 760px) {
.img-tampilan {
	margin-top: 0px;
	width: 320px;
	height: 210px;
	border-radius: 3%;
}
}

@media screen and (max-width: 412px) {
.img-tampilan {
	margin-top: 0px;
	width: 315px;
	height: 210px;
	border-radius: 5%;
}
}


@media screen and (max-width: 360px) {
.img-tampilan {
	margin-top: 0px;
	width: 320px;
	height: 210px;
	border-radius: 5%;
}
}


.img-tampilan:hover {
transform: scale(1.1);
transition: 0.2s;
}


/* img-daftar */

.img-daftar {
	margin-top: 5px;
	width: 350px;
	height: 200px;
	text-align: center;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
.img-daftar {
	width: 350px;
	height: 200px;
	border-radius: 5%;
	text-align: center;
}
}

@media screen and (max-width: 500px) {
	.img-daftar {
		text-align: center;
		margin-top: 0px;
		width: 110px;
		height: 110px;
		border-radius: 5%;
	}
}


.img-logo {
	margin-top: 5px;
	width: 180px;
	height: 180px;
	text-align: center;
}


@media screen and (min-width: 1080px) {
	.img-logo {
		width: 180px;
		height: 180px;
		text-align: center;
	}
}

@media screen and (max-width: 500px) {
	.img-logo {
		text-align: center;
		margin-top: 0px;
		width: 100px;
		height: 100px;
	}
}


.img-logo:hover {
	transform: scale(1.1);
	transition: 0.2s;
}
/* dokumen */

@media screen and (min-width: 1920px) {
	.dokumen {
		width: 1200px;
		height: 900px;
	}
}


@media screen and (max-width: 1280px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 1000px;
		height: 900px;
		font-size: 20px;
		/* width: 9rem; */
	}
}


@media screen and (min-width: 1080px) {
	.dokumen {
		width: 750px;
		height: 900px;
	}
}

@media screen and (max-width: 915px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 630px;
		height: 900px;
		font-size: 20px;
		/* width: 9rem; */
	}
}

@media screen and (max-width: 840px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 630px;
		height: 900px;
		font-size: 20px;
		/* width: 9rem; */
	}
}

@media screen and (max-width: 810px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 630px;
		height: 700px;
		font-size: 20px;
		/* width: 9rem; */
	}
}

@media screen and (max-width: 760px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 450px;
		height: 500px;
		font-size: 20px;
		/* width: 9rem; */
	}
}

@media screen and (max-width: 500px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 320px;
		height: 400px;
		font-size: 20px;
		/* width: 9rem; */
	}
}

@media screen and (max-width: 384px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 300px;
		height: 400px;
		font-size: 20px;
		/* width: 9rem; */
	}
}

@media screen and (max-width: 375px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 280px;
		height: 400px;
		font-size: 20px;
		/* width: 9rem; */
	}
}


@media screen and (max-width: 360px) {
	.dokumen {
		text-align: left;
		margin-top: 20px;
		width: 260px;
		height: 400px;
		font-size: 20px;
		/* width: 9rem; */
	}
}





.ukuran-huruf {
	font-family: 1em sans-serif;
		font-size: 15px;
}

@media screen and (min-width: 1100px) {
	.ukuran-huruf {
		font-family: 1em sans-serif;
		font-size: 15px;
	}
}

@media screen and (max-width: 500px) {
	.ukuran-huruf {
		font-family: 1em sans-serif;
		font-size: 10px;
	}
}


.ukuran-tulisan {
	font-family: 1em sans-serif;
		font-size: 20px;
}

@media screen and (min-width: 1100px) {
	.ukuran-tulisan {
		font-family: 1em sans-serif;
		font-size: 20px;
	}
}

@media screen and (max-width: 500px) {
	.ukuran-tulisan {
		font-family: 1em sans-serif;
		font-size: 13px;
	}
}

.judul {
	font-family: 1em sans-serif;
	font-size: 22px;
	text-align: center;
	color: white;
}

@media screen and (min-width: 1100px) {
	.judul {
		font-family: 1em sans-serif;
		font-size: 22px;
		text-align: center;
		color: white;
	}
}

@media screen and (max-width: 500px) {
	.judul {
		font-family: 1em sans-serif;
		font-size: 14px;
		text-align: center;
		color: rgb(233, 221, 221);
	}
}


.ukuran {
	font-family: sans-serif;
	font-size: 15px;
}

@media screen and (min-width: 1080px) {
	.ukuran {
		font-family: sans-serif;
		font-size: 15px;
	}
}

@media screen and (max-width: 412px) {
	.ukuran {
		font-family: 'Arial Narrow';
		font-size: 14px;
	}
}

@media screen and (max-width: 360px) {
	.ukuran {
		font-family: 'Arial Narrow';
		font-size: 14px;
	}
}

.ukuran-kop {
	font-family: 1em sans-serif;
	font-size: 30px;
}

@media screen and (min-width: 1100px) {
	.ukuran-kop {
		font-family: 1em sans-serif;
		font-size: 30px;
	}
}

@media screen and (max-width: 500px) {
	.ukuran-kop {
		font-family: 1em sans-serif;
		font-size: 20px;
	}
}


.huruf {
	font-family: 1em 'Arial Narrow';
	font-size: 15px;
	color: white;
}

@media screen and (min-width: 1100px) {
	.huruf {
		font-family: 1em 'Arial Narrow';
		font-size: 15px;
		color: white;
	}
}

@media screen and (max-width: 500px) {
	.huruf {
		font-family: 1em 'Arial Narrow';
		font-size: 12px;
		color: white;
	}
}

.img-user {
	margin-top: 5px;
	width: 300px;
	height: 200px;
	text-align: center;
}


@media screen and (min-width: 1080px) {
	.img-user {
		width: 200px;
		height: 200px;
		text-align: center;
	}
}

@media screen and (max-width: 500px) {
	.img-user {
		text-align: center;
		margin-top: 0px;
		width: 200px;
		height: 200px;
	}
}


.img-user:hover {
	transform: scale(1.1);
	transition: 0.2s;
}


.img-masuk {
	margin-top: 5px;
	width: 130px;
	height: 130px;
	text-align: center;
}


@media screen and (min-width: 1080px) {
	.img-masuk {
		width: 130px;
		height: 130px;
		text-align: center;
	}
}

@media screen and (max-width: 550px) {
	.img-masuk {
		text-align: center;
		margin-top: 0px;
		width: 8rem;
		height: 130px;
		max-width: 22rem;
	}
}


.img-masuk:hover {
	transform: scale(1.1);
	transition: 0.2s;
}


.kotak {
	text-align: center;
}


@media screen and (min-width: 1080px) {
	.kotak {
		text-align: center;
	}
}

@media screen and (max-width: 500px) {
	.kotak {
		text-align: center;
	}
}

/* img-all */

.img-sikhu {
	margin-left: 5px;
	margin-top: 5px;
	width:175px;
	height: 130px;
	border-radius: 5%;
}


@media screen and (min-width: 1080px) {
.img-sikhu {
	margin-left: 2px;
	width: 175px;
	height: 130px;
	border-radius: 5%;
	}
}


@media screen and (min-width: 800px) {
	.img-sikhu {
		margin-left: 2px;
		width: 160px;
		height: 130px;
		border-radius: 5%;
		}
	}

@media screen and (max-width: 412px) {
.img-sikhu {
	margin-left: 1px;
	margin-top: 0px;
	width: 165px;
	height: 100px;
	border-radius: 5%;
}
}

@media screen and (max-width: 360px) {
.img-sikhu {
	margin-left: 1px;
	margin-top: 0px;
	width: 140px;
	height: 90px;
	border-radius: 5%;
}
}

.img-sikhu:hover {
transform: scale(1.1);
transition: 0.2s;
}