/*
* wBiza Dev Tools
* (c) 2021 Sendi Pratama
*/
a {
	text-decoration: none;
	color: rgb(10, 142, 136);
}

@media only screen and (max-width:500px) {
	.desktop{
		display: none;
	}
	#topMenu .boxMenu .widgetMenu{
		display: none;
	}
	.barMen {
		float: right;
		font-size: 45px;
		margin: 2px 12px 0px 0px;
		border: 1px solid rgba(247, 247, 247, 0.56);
		padding: 2px 6px;
		border-radius: 8px;
	}
	#baner .boxBaner .serviceList .box {
		min-width: 70%;
	}
	#topMenu .boxMenu .menu {
		overflow: hidden;
		transition: 0.2s;
		-webkit-transition: 0.2s;
	}
	#topMenu .boxMenu .menHide {
		height: 60px;
	}
	#topMenu .boxMenu .menShow {
		height: 240px;
	}
	#topMenu .boxMenu .menu .listMenu {
		display: inline-block;
		width: 100%;
	}
	#topMenu .boxMenu .menu .listMenu a {
		display: block;
		margin: 5px;
		padding: 4px 20px;
	}
	#contact .boxIsi .boxContact {
		width: 85%;
	}
	.aboutBox {
		width: 90%;
	}
}

@media only screen and (min-width:501px) and (max-width:999px) {
	#topMenu{
		overflow: auto;
	}
}
@media only screen and (min-width:501px) {
	.mobile{
		display: none;
	}
	#topMenu .boxMenu .widgetMenu {
		display: block;
	}
	#topMenu .boxMenu .menu {
		min-width: 1000px;
		height: 65px;
	}
	.barMen {
		display: none;
	}
	#topMenu .boxMenu .menu .listMenu {
		display: inline-table;
		width: 750px;
		margin-left: 50px;
		text-align: right;
	}
	#topMenu .boxMenu .menu .listMenu a {
		display: inline-table;
		margin: 0px 5px;
		padding: 0px 20px;
	}
	#baner .boxBaner .slogan {
		width: 930px;
	}
	#baner .boxBaner .serviceList .box {
		min-width: 220px;
	}
	.boxIsi {
		min-width: 1000px;
	}
	#ourWork, #contact, #about, .foter, .bgSparator, #ourTeam {
		min-width: 1000px;
	}
	.aboutBox {
		width: 40%;
	}
	#contact .boxIsi .boxContact {
		width: 40%;
	}
}
#popForm{
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgb(27, 27, 27);
	z-index: 9998;
	opacity: 0;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
	#popForm .centerin{
		width: 100%;
		height: 100%;
		display: inline-grid;
		justify-content: center;
		align-items: center;
	}
	#popForm .boxForm{
		display: inline-block;
		color: white;
		min-width: 300px;
		padding: 25px;
		text-align: left;
		margin: 0px 10px;
	}
		#popForm .boxForm .faLogo{
			color: rgb(4, 224, 214);
  			font-size: 38px;
			display: block;
		}
		#popForm .boxForm .judul{
			display: block;
			font-size: 16px;
			margin-top: 13px;
			font-weight: bold;
		}
		#popForm .boxForm .detail{
			margin:11px 0;
			line-height: 1.9;
		}
		#popForm .boxForm hr{
			border-top: 1px solid rgb(4, 224, 214);
			border-bottom: none;
			width: 60px;
			display: inline-block;
		}
		#popForm .boxForm .boxIn .tMesin{
			display: inline-table;
			width: 100px;
			height: 100px;
			padding: 0 15px;
			margin: 4px 0;
			border-radius: 3px;
			border:1px solid rgba(255, 255, 255, 0.7);
			text-align: center;
			transition: 0.3s;
			-webkit-transition: 0.3s;
			cursor: pointer;
			box-sizing: border-box;
		}
			#popForm .boxForm .boxIn .tMesin:hover{
				border:1px solid rgb(244, 157, 64);
				color: rgb(244, 157, 64);
			}
			#popForm .boxForm .boxIn .tMesin i{
				margin: 18px 0 9px 0;
  				font-size: 24px;
			}
			#popForm .boxForm .boxIn .tMesin label{
				display: block;
				cursor: pointer;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				-o-user-select: none;
				user-select: none;
			}
		#popForm .boxForm .boxIn .mesinSel{
			border:1px solid rgb(4, 224, 214) !important;
			color: rgb(4, 224, 214) !important;
			background-color: rgba(4, 224, 214, 0.07);
		}
		#popForm .boxForm input[type=text],#popForm .boxForm textarea{
			background-color: transparent;
			border: 1px solid rgba(255, 255, 255, 0.7);
			outline: none;
			border-radius: 3px;
			color: white;
			padding: 12px 15px;
			width: 100%;
			margin: 6px 0;
			box-sizing: border-box;
		}
		#popForm .boxForm select{
			background-color: transparent;
			border: 1px solid rgba(255, 255, 255, 0.7);
			outline: none;
			border-radius: 3px;
			color: rgba(255, 255, 255, 0.6);
			padding: 12px 15px;
			width: 100%;
			margin: 6px 0;
			box-sizing: border-box;
		}
		#popForm .boxForm select option{
			background-color: rgb(27, 27, 27);
			color: white;
			padding: 5px;
		}
		#popForm .boxForm select option:hover{
			background-color: rgb(27, 27, 27);
			color: rgb(4, 224, 214) !important;
		}
		#popForm .boxForm textarea{
			min-height: 80px;
		}
		#popForm .boxForm input[type=text]:focus,#popForm .boxForm textarea:focus,#popForm .boxForm select:focus{
			border: 1px solid rgb(244, 157, 64);
			color: rgb(244, 157, 64);
		}
		#popForm .boxForm .boxIn .fa-times-circle-o{
			position: absolute;
			color: rgb(4, 224, 214);
			margin-left: -20px;
			margin-top: 20px;
			cursor: pointer;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
			#popForm .boxForm .boxIn .fa-times-circle-o:hover{
				color: rgb(255, 115, 105);
			}
		.inOK{
			border:1px solid rgb(4, 224, 214) !important;
			color: rgb(4, 224, 214) !important;
		}
		.inNO{
			border-color: rgb(232, 64, 64) !important;
			color: rgb(232, 64, 64) !important;
		}
		.inOrange{
			border-color: rgb(244, 157, 64) !important;
			color: rgb(244, 157, 64) !important;
		}
		#popForm .boxForm input[type=button]{
			margin-top: 15px;
			margin-bottom: 35px;
			color: white;
			padding: 8px 35px;
			border-radius: 6px;
			font-weight: bold;
			cursor: pointer;
		}
		#popForm .boxForm .btnRed{
			border: 1px solid rgb(140, 10, 10);
			background-color: rgba(224, 4, 4, 0.1);
		}
		#popForm .boxForm .btnRed:hover{
			border: 1px solid rgb(140, 10, 10);
			background-color: rgba(140, 10, 10, 0.8);
		}
		#popForm .boxForm .btnBlue{
			border: 1px solid rgba(4, 224, 214);
			background-color: rgba(4, 224, 214,0.1);
		}
		#popForm .boxForm .btnBlue:hover{
			border: 1px solid rgba(4, 224, 214);
			background-color: rgba(4, 224, 214,0.8);
		}
		#popForm .boxForm .boxImgList{
			display: inline-block;
			margin-top: 25px;
			margin-left: 40px;
		}
            #popForm .boxForm .boxImgList .imgList{
                float: left;
                width: 100px;
                height: 100px;
                margin-left: -25px;
                transform: rotate(45deg);
				border-radius: 7px;
                overflow: hidden;
                border:1px solid rgb(0,0,0);
                cursor: pointer;
            }
				#popForm .boxForm .boxImgList .imgList img{
                    width: 140px;
                    height: 140px;
                    object-fit: cover;
                    transform: rotate(-45deg);
                    margin-left: -20px;
                    margin-top: -20px;
                }
                #popForm .boxForm .boxImgList .gnpImg{
                    margin-top: 75px;
                    margin-left: -25px;
                }
#topMenu {
	position: fixed;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	text-align: center;
	color: white;
	z-index: 992;
}

#topMenu .boxMenu {
	display: inline-block;
	padding-top: 8px;
}

#topMenu .boxMenu .widgetMenu {
	width: 100%;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	overflow: hidden;
}

#topMenu .boxMenu .widgetMenuOpn {
	height: 45px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#topMenu .boxMenu .widgetMenuCls {
	height: 0px;
}

#topMenu .boxMenu .widgetMenu .sosmed {
	float: left;
	font-size: 22px;
	color: rgba(255, 255, 255, 0.7);
}

#topMenu .boxMenu .widgetMenu .sosmed i {
	margin-right: 10px;
	cursor: pointer;
}

#topMenu .boxMenu .widgetMenu .sosmed i:hover {
	color: rgb(255, 255, 255);
}

#topMenu .boxMenu .widgetMenu .info {
	float: right;
	font-size: 14px;
	margin-top: 10px;
}

#topMenu .boxMenu .widgetMenu .info i {
	font-size: 18px;
	margin: 0px 6px 0px 30px;
}

#topMenu .boxMenu .menu {
	display: inline-block;
}

#topMenu .boxMenu .menu .logo {
	float: left;
	font-weight: bolder;
	color: white;
	font-size: 38px;
	margin-left: 20px;
}

#topMenu .boxMenu .menu .logo img {
	float: left;
	height: 45px;
	margin-top: 6px;
	margin-right: 15px;
	cursor: pointer;
}

#topMenu .boxMenu .menu .logo a {
	color: white;
}

#topMenu .boxMenu .menu .logo i {
	display: none;
}

#topMenu .boxMenu .menu .listMenu {
	margin-top: 16px;
	font-size: 18px;
}

#topMenu .boxMenu .menu .listMenu a {
	border-radius: 3px;
	color: white;
	cursor: pointer;
}

#topMenu .boxMenu .menu .listMenu .menActive {
	background-color: rgb(19, 172, 165) !important;
}

#topMenu .boxMenu .menu .listMenu a:hover {
	background-color: rgb(244, 157, 64);
}

#baner {
	width: 100%;
	height: 100%;
	min-height: 800px;
	text-align: center;
	color: white;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.bgH{
	background-image:url('../images/bgh.webp');
	background-position: center;
}
.bgB{
	background-image:url('../images/bgb.jpg');
	background-position: center;
}
.bgD{
	background-image:url('../images/bgd.jpg');
	background-position: center;
}
.bgA{
	background-image:url('../images/bga.jpg');
	background-position: center;
}

#baner .boxBaner {
	display: inline-block;
	padding-top: 120px;
}

#baner .boxBaner .slogan {
	font-size: 42px;
	padding-left: 70px;
	text-align: left;
	font-weight: bold;
	margin: 100px 0px;
}

#baner .boxBaner .serviceList .box {
	display: inline-table;
	min-height: 190px;
	margin: 10px;
	padding: 30px 30px 15px 30px;
	text-align: left;
	background-color: rgb(27, 27, 27);
	border-bottom: 4px solid rgb(27, 27, 27);
}

#baner .boxBaner .serviceList .boxHover {
	border-bottom: 4px solid rgb(4, 224, 214);
}

#baner .boxBaner .serviceList .box i {
	color: rgb(4, 224, 214);
	font-size: 38px;
}

#baner .boxBaner .serviceList .box .judul {
	font-size: 16px;
	font-weight: bold;
	margin-top: 20px;
}

#baner .boxBaner .serviceList .box hr {
	border-top: 1px solid rgb(4, 224, 214);
	border-bottom: none;
	width: 15%;
	display: inline-block;
}
#baner .boxBaner .serviceList .box input[type=button]{
	float: right;
	margin-top: 30px;
	border: 1px solid rgba(4, 224, 214);
	background-color: rgba(4, 224, 214,0.1);
	color: white;
	padding: 8px 35px;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
}
#baner .boxBaner .serviceList .box input[type=button]:hover{
	border: 1px solid rgba(4, 224, 214);
	background-color: rgba(4, 224, 214,0.8);
}

.bgSparator {
	width: 100%;
	min-height: 192px;
	text-align: center;
	background-color: rgb(27, 27, 27);
}
	.bgSparator .jumBox{
		display: inline-table;
		margin: 50px 10px;
		min-width: 220px;
		padding: 15px 30px 15px 30px;
		text-align: left;
		color: white;
	}
		.bgSparator .jumBox span{
			float: left;
			margin: -18px 22px 0px 10px;
			font-size: 52px;
			color: rgb(4, 224, 214);
			width: 90px;
			text-align: right;
		}

#about {
	width: 100%;
	padding: 0px 0px 40px 0px;
	background-color: #333;
	text-align: center;
}

#ourWork {
	width: 100%;
	padding: 0px 0px 40px 0px;
	background-color: white;
	text-align: center;
}
#ourWork input[type=button]{
	border: 1px solid rgba(4, 224, 214);
	padding: 8px 35px;
	border-radius: 6px;
	cursor: pointer;
}
#ourWork .defBut{
	background-color: white;
	color: rgb(68, 232, 224);
}
#ourWork .defBut:hover{
	border: 1px solid rgb(244, 157, 64) !important;
	background-color: rgb(244, 157, 64);
	color: white;
}
#ourWork .selBut{
	background-color: rgba(9, 198, 189, 0.74);
	color: white;
}
#ourWork .listWork{
	margin: 15px 0px;
	min-height: 205px;
}
#ourWork .listWork .workMax{
	display: inline-block;
	max-width: 1000px;
}
#ourWork .listWork .workMax .workBox{
	display: inline-grid;
	width: 200px;
	height: 200px;
	background-color: rgb(27, 27, 27);
	overflow: hidden;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	cursor: pointer;
}
	#ourWork .listWork .workMax .workBox img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#ourWork .listWork .workMax .workBox .workShadow{
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: rgba(0, 0, 0, 0.24);
		-webkit-box-shadow: inset 0 0 20px 2px #000000a3;
		-moz-box-shadow: inset 0 0 20px 2px #000000a3;
		box-shadow: inset 0px 0 20px 2px #000000a3;
		-webkit-transition: 0.2s;
		transition: 0.2s;
		opacity: 0;
	}
	#ourWork .listWork .workMax .workBox .workShadow:hover{
		opacity: 1;
	}
#ourWork .listWork .workMax .workBoxHide{
	opacity: 0;
	width: 0px !important;
	height: 0px !important;
}

#ourTeam {
	width: 100%;
	padding: 0px 0px 40px 0px;
	background-color: rgb(223, 223, 223);
	text-align: center;
}
	#ourTeam .testi{
		display: inline-table;
		padding: 10px 27px;
	}
	#ourTeam .testi .foto{
		display: inline-block;
		height: 110px;
		width: 110px;
		border-radius: 60px;
		overflow: hidden;
		border: 4px solid white;
		box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.32);
	}
	#ourTeam .testi .pes{
		margin-top: 7px;
	}

#contact {
	width: 100%;
	padding: 0px 0px 40px 0px;
	background-color: white;
	text-align: center;
}

.aboutBox {
	display: inline-table;
	text-align: left;
	padding: 10px;
	color: rgb(193, 193, 193);
}

#about .aicon {
	width: 25px;
	font-size: 22px;
	margin-right: 10px;
	float: left;
	color: rgb(4, 224, 214);;
}

#about .aJudul {
	display: inline-block;
	font-weight: bold;
	color: #B6B6B6;
}

.boxIsi {
	display: inline-block;
	width: 100%;
}

.boxIsi hr {
	border-top: 1px solid rgb(102, 102, 102);
	border-bottom: none;
	margin-bottom: 17px;
	width: 50px;
}

.masJudul {
	font-size: 24px;
	margin: 20px 0px 5px 0px;
	color: #333;
	display: inline-table;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	text-align: center;
}
#contact {
	width: 100%;
	padding: 0px 0px 40px 0px;
	background-color: white;
	text-align: center;
}

#contact .boxIsi .boxContact {
	display: inline-block;
	text-align: left;
	overflow: hidden;
    border-radius: 15px;
}

#contact .boxIsi .boxContact .listCont{
	display: block;
	margin-bottom: 7px;
}

#contact .boxIsi .boxContact span {
	font-size: 18px;
}

#contact .boxIsi .boxContact i {
    width: 25px;
    text-align: center;
	font-size: 22px;
	margin-top: -1px;
	float: left;
	margin-right: 8px;
}

.foter {
	width: 100%;
	font-size: 16px;
	color: rgb(191, 189, 189);
	background-position: top;
	background-repeat: repeat-x;
	text-align: center;
	padding: 40px 0px;
}

.foter .sosmed {
	width: 35px;
	margin: 0px;
	padding: 5px 0px;
	display: inline-table;
	font-size: 22px;
	cursor: pointer;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	margin: 0px 5px;
}

.foter .sosmed:hover {
	color: rgb(4, 224, 214);
	background-color: rgba(255, 255, 255, 0.1);
}