*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
}


html{
	font-family: sans-serif;
}


nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 5rem;
	align-content: center;
	align-items: center;
	background-color: white;
	box-shadow: 0.2px 0px 7px lightgray;
}


nav div.navbar i#closeModalMini{
	display: none;
}

div.container-index{
	position: relative;
	width: 100%;
}



nav i#humberger-menu{

	display: none;
	font-size: 1.3rem;
}

nav div.navbar{
	display: flex;
	margin-right: 20rem;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}


nav div.navbar div.dropdown-container{
	width: 62rem;
	display: flex;
	align-items: center;
	align-content: center;
	
}

nav div.navbar a{
	padding: 0 0.3rem;
	box-sizing: border-box;
	color: rgba(0, 0, 0, 0.6);
	
}

nav div.navbar a:hover{
	
	color: dodgerblue;
	
}

nav div.navbar button{
	padding: 0 0.3rem;
	box-sizing: border-box;
}


i#closeModal{
	display: none;
}

nav img{
	width: 34.5vh;
	padding-top: 1.7rem;
	margin: 0;
}

nav a {
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	background-color: unset;
	font-weight: bold;
	font-size: 0.9rem;
	

}

nav a:hover{
	
	color: dodgerblue;
	
}

.dropdown i{
	color: gray;
	font-size: 0.8rem;
}

.dropdown .dropbtn i{
	color: rgba(0, 0, 0, 0.6);
	font-size: 0.8rem;
}


.dropdown .dropbtn  {
	font-size: 15.4px;
	border: none;
	color: rgba(0, 0, 0, 0.6);
	font-weight: bold;
	font-family: inherit;
	background-color: unset;
	display: block;

}

.dropdown button.dropbtn:hover {
	color: dodgerblue;
}

.dropdown .dropbtn:hover {
	color: royalblue;
	cursor: pointer;
}

nav a, .dropdown:hover .dropbtn {
	color: rgba(0, 0, 0, 0.6);
	
}


.dropdown-content {
	opacity: 0;
	position: absolute;
	top: 7rem;
	width: 16rem;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: -999;
	overflow: hidden;
	background-color: white;
	border-radius: 0.2rem;
	
}

.dropdown .dropdown-content a{
	line-height: 0.8rem;
	padding: 1rem;
	width: 100%;
	text-align: left;
}

.dropdown .dropdown-content a:hover{
	color: white;
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
}


.dropdown:hover .dropdown-content {
	opacity: 1;
	position: absolute;
	top: 3rem;
	z-index: 999;
	transition: 0.4s linear;
	
}

form input#cari{
	font-size: 1rem;
	color: black;
	border: none;
	border-radius: 0.3rem;
	outline-style: none;
	background-color: unset;


}

form {
	padding: 0.7rem;
	font-size: 1rem;
	color: gray;
	border: 0.1rem solid lightgray;
	border-radius: 0.3rem;
	margin-left: 1rem;
}

form li{
	
	font-size: 0.8rem;
	margin-right: 0.4rem;

}

div.btn{
	padding: 0.5rem;
	display: flex;
	width: 9.6rem;
	justify-content: space-between;
}

div.btn a#masuk{
	padding: 0.6rem;
	border: 0.1rem solid darkblue;
	border-radius: 0.2rem;
	color: darkblue;
	transition: 0.3s ease-in-out;
}

div.btn a#masuk:hover{
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
	color: white;
}

div.btn a#daftar{
	padding: 0.6rem;
	background-color: darkblue;
	border-radius: 0.3rem;
	color: white;
	text-align: center;
}

section.hero{
	background-color: #110F3D;
	width: 100%;
	height: 30rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
	align-content: center;
	justify-content: space-between;
	box-shadow: 0px 1px 5px lightgray;
}

section.hero h3{
	font-size: 2.7rem;
	color: whitesmoke;
	padding-bottom: 1rem;
}

div.container-items{
	width: 35rem;
	margin-left: 3rem;
	opacity: 0;
	transform: scale(0.4);

}

div.container-items p{
	color: lightgrey;
	line-height: 1.9rem;
	font-size: 1.2rem;
}

div.btn-belanja{
	margin-top: 1.5rem;
	width: 19.3rem;
	display: flex;
	justify-content: space-between;
}

div.btn-belanja a.belanja{
	padding: 0.9rem;
	background-color: green;
	color: white;
	border-radius: 0.3rem;
	font-weight: 520;
	cursor: pointer;
}

div.btn-belanja a.terbit{
	padding: 0.9rem;
	background-color: whitesmoke;
	color: black;
	border-radius: 0.3rem;
	font-weight: 520;
	cursor: pointer;
}



section.hero img{
	border-top-left-radius: 70%;
	width: 47%;
	display: block;
	height: 100%;
}

/*desain daftar layanan*/ 

section.content-satu{
	width: 66rem;
	margin: 8rem auto;
	display: flex;
	justify-content: space-between;
	opacity: 0;
	transform: scale(0.4);
}

section.content-satu div.content-items{
	width: 32rem;
	padding: 3rem 2%;
}

section.content-satu div.content-items h1{
	font-size: 2.3rem;
	padding-bottom: 1rem;
}

section.content-satu div.content-items p{
	color: gray;
	line-height: 1.8rem;
	font-size: 1.1rem;
}

section.content-satu div.content-items p.list, li{
	color: gray;
	font-size: 0.9rem;
}

section.content-satu img{
	width: 78vh;
	height: 78vh;
}

section.content-satu div.content-items li{
	background-color: lightblue;
	color: white;
	border: 1px solid lightblue;
	padding: 2px;
	border-radius: 100%;
	margin-bottom: 0.7rem;
	font-size: 0.8rem;

}

section.content-satu div.content-items span{
	font-size: 0.9rem;
	color: gray;
	letter-spacing: 0.6px;
}


section.content-satu div.logo-img{
	position: relative;
	background-color: white;
}

section.content-satu div.items-logo{
	position: absolute;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 1rem;
	width: 9rem;
	height: 4rem;
	top: 1.2rem;
	left: 3rem;
	border-top-left-radius: 0.8rem;
	border-bottom-right-radius: 0.8rem;
	overflow: hidden;
	border-bottom: 0.3rem solid darkgray;
	z-index: 1;
}

section.content-satu img#hero{
	padding-top: 1.3rem;
	width: 12rem;
	height: 12rem;


}

section.content-satu div.content-items p.judul-promo{
	color: royalblue;
	font-weight: bold;
	padding-bottom: 1.3rem;
}

section.content-satu div.content-items p.bold{
	font-size: 1.2rem;
	color: black;
	padding-bottom: 1.5rem;
}

section.content-satu div.items_p div.paragraf span{
	font-size: 0.9rem;
}


/*tutup*/


/*section dua*/


section.contentDua{
	width: 66rem;
	margin: 8rem auto;
	display: flex;
	justify-content: space-between;
	opacity: 0;
	transform: scale(0.4);
}

section.contentDua div.content-items{
	width: 32rem;
	padding: 3rem 2%;
}

section.contentDua div.content-items h1{
	font-size: 2.3rem;
	padding-bottom: 1rem;
}

section.contentDua div.content-items p{
	color: gray;
	line-height: 1.3rem;
	text-align: justify;
}

section.contentDua div.content-items p.list, li{
	color: gray;
	font-size: 0.9rem;
}

section.contentDua img{
	width: 78vh;
	height: 78vh;
}

section.contentDua div.content-items li{
	background-color: lightblue;
	color: white;
	border: 1px solid lightblue;
	padding: 2px;
	border-radius: 100%;
	margin-bottom: 0.7rem;
	font-size: 0.8rem;

}

section.contentDua div.content-items span{
	font-size: 0.9rem;
	color: gray;
	letter-spacing: 0.6px;
}


section.contentDua div.logo-img{
	position: relative;
	background-color: white;
}

section.contentDua div.items-logo{
	position: absolute;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 1rem;
	width: 9rem;
	height: 4rem;
	top: 1.2rem;
	left: 3rem;
	border-top-left-radius: 0.8rem;
	border-bottom-right-radius: 0.8rem;
	overflow: hidden;
	border-bottom: 0.3rem solid darkgray;
	z-index: 1;
}

section.contentDua img#hero{
	padding-top: 1.3rem;
	width: 12rem;
	height: 12rem;


}

section.contentDua div.content-items p.judul-promo{
	color: royalblue;
	font-weight: bold;
	padding-bottom: 1.3rem;
}

section.contentDua div.content-items p.bold{
	font-size: 1.2rem;
	color: black;
	padding-bottom: 1.5rem;
}


/*tutup*/


/*section 3*/

section.content-tiga{
	width: 64rem;
	margin: 8rem auto;
	display: flex;
	justify-content: space-between;
	opacity: 0;
	transform: scale(0.4);
}

section.content-tiga div.content-items{
	width: 32rem;
	padding: 0.7rem 2%;
}

section.content-tiga div.content-items h1{
	font-size: 2.3rem;
	padding-bottom: 1rem;
}

section.content-tiga div.content-items p{
	color: gray;
	line-height: 1.3rem;
	text-align: justify;
}

section.content-tiga div.content-items p.list, li{
	color: gray;
	font-size: 0.9rem;
}

section.content-tiga img{
	width: 78vh;
	height: 78vh;
}

section.content-tiga div.content-items li{
	color: darkgray;
	padding: 2px;
	margin-bottom: 0.7rem;
	font-size: 1.2rem;

}

section.content-tiga div.content-items span{
	font-size: 1.2rem;
	color: black;
	letter-spacing: 0.6px;
	padding-left: 0.5rem;
}


section.content-tiga div.logo-img{
	position: relative;
	background-color: white;
}

section.content-tiga div.items-logo{
	position: absolute;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 1rem;
	width: 9rem;
	height: 4rem;
	top: 1.2rem;
	left: 2rem;
	border-top-left-radius: 0.8rem;
	border-bottom-right-radius: 0.8rem;
	overflow: hidden;
	border-bottom: 0.3rem solid darkgray;
	z-index: 1;
}

section.content-tiga img#hero{
	padding-top: 1.3rem;
	width: 12rem;
	height: 12rem;


}

section.content-tiga div.content-items p.judul-promo{
	color: royalblue;
	font-weight: bold;
	padding-bottom: 1.3rem;
}

section.content-tiga div.content-items p.bold{
	text-align: left;
	font-size: 1.2rem;
	color: black;
	padding-bottom: 1.5rem;
	line-height: 1.6rem;
}

section.content-tiga div.content-items p.payment-items{
	padding-left: 2rem;
	margin-bottom: 1rem;
	word-spacing: 1.8px;
	text-align: left;
	line-height: 1.5rem;
}


section.content-tiga div.content-items li.fa{
	font-size: 1.3rem;
}

/*desain section empat*/
section.content-empat{
	width: 100%;
	margin: 0rem auto;
	display: flex;
	justify-content: space-between;
	background-color: #110F3D;
	height: 27rem;
}

div.footer{
	padding: 1.8rem;
	color: royalblue;
	background-color: white;
	text-align: center;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);

}

section.content-empat div.items-footer{
	width: 38.4rem;
	/*padding: 1rem;*/
	margin: 4rem auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transform: scale(0.4);
}

section.content-empat div.items-footer h1{
	font-size: 2.7rem;
	margin: 1.2rem 0;
	color: whitesmoke;
}

section.content-empat div.items-footer p.ajukan{
	display: block;
	color: gold;
	font-family: sans-serif;
	font-weight: bolder;
}

section.content-empat div.items-footer p.ajakan{
	display: block;
	color: gray;
	font-family: sans-serif;
	font-size: 1.2rem;
} 
section.content-empat div.items-footer a{
	
	padding: 0.8rem;
	background-color: royalblue;
	color: white;
	border-radius: 0.3rem;
	margin: 0 auto;
}

div.btn-footer{
	width: 100%;
	margin-top: 2.5rem;
}

div.footer i{
	padding-left: 4rem;

}



/*STYLE UNTUK HALAMAN REGISTRASI*/


body.register-body{
	background-color: whitesmoke;
	padding: 0;
	margin: 0;
}

div.container-register{
	width: 65rem;
	margin: 4rem auto;
	background: white;
	box-shadow: 0px 0px 4px 0.6px lightgray;
	padding: 1.5rem 2%;
	display: flex;
	flex-wrap: wrap;
	border-radius: 0.2rem;
	opacity: 0;
	transform: scale(0.5);


}

div.container-register button{
	padding: 0.7rem;
	color: whitesmoke;
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
	border: none;
	width: 100%;
	font-weight: bold;
	font-size: 1.1rem;
	border-radius: 0.2rem;
	cursor: pointer;
	transition: 0.2s ease-in-out;

}


div.judul-register{
	width: 100%;
	margin-bottom: 1.5rem;
}

div.container-register form{
	border: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	justify-content: space-between;
	


}

div.content-register.satu{
	margin-bottom: 0.5rem;
	display: flex;
	flex-direction: column;


}

div.content-register.dua{
	display: flex;
	flex-direction: column;
	padding-top: 3rem;
}

div.content-register.dua label.pekerjaanBaru{
	margin-top: 3.3rem;
}



div.content-register.akun{
	margin-top: 1.7rem;
	display: flex;
	flex-direction: column;

}

div.content-register{
	width: 30rem;
	display: flex;
	flex-wrap: wrap;
}

div.content-register hr{
	width: 100%;
	border: 0.1px solid lightgray;
	margin-bottom: 0.7rem;
}

div.container-register div.content-register input{
	padding: 0.8rem;
	width: 100%;
	border-radius: 0.3rem;
	outline-style: none;
	text-decoration-color: lightgrey;
	border: 1.9px solid darkgray;
	margin-bottom: 0.8rem;
}

div.content-register label{
	font-size: 1rem;
	padding-bottom: 0.6rem;

}

div.content-register span{
	color: red;
}

div.content-register select{
	padding: 0.7rem;
	width: 100%;
	border-radius: 0.3rem;
	outline-style: none;
	text-decoration-color: lightgrey;
	border: 1.9px solid darkgray;
	margin-bottom: 0.7rem;
}

div.content-register p{

	padding-bottom: 0.7rem;

}


div#regis{
	box-shadow: 0px -1px 0.6px lightgray;
	
}



div.container-pesan{
	width: 34rem;
	background-color: white;
	padding: 2rem;
	margin: 13rem auto;
	box-sizing: border-box;
	box-shadow: 0px 0px 1.5px 0.6px rgba(0, 0, 0, 0.2);
	border-radius: 0.2rem;
}

div.container-pesan h2{
	margin-bottom: 2rem;
}

div.container-pesan p{
	line-height: 1.5rem;

}



/*TUTUP REGISTRASI*/


/*STYLE UNTUK FORM LOGIN*/

body.dashboardBody{
	background-color: whitesmoke;
}

div.container-dashboard{
	margin: 1rem auto;
	width: 88rem;
	display: flex;
	height: 12.5rem;
	border-bottom-left-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);

}

div.heroImg{
	background-color: darkblue;
	width: 88rem;
	height: 7rem;
	display: flex;
	overflow: hidden;
	align-items: center;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	justify-content: space-around;
	
}

div.heroImg img{
	width: 29rem;
	
	
}

div.heroImg img.d3{
	width: 30rem;
	
	
}

div.heroImg img.d2{
	transform: rotate(260deg);
}

div.contentItems{
	display: flex;
	flex-wrap: wrap;
	width: 25rem;
	position: relative;
	top: -2rem;
	right: -0.5rem;
	padding: 0.8rem;
	align-items: center;
}

div.contentItems i{
	background-color: lightgray;
	padding: 0.9rem;
	font-size: 2.2rem;
	border: 3px solid white;
	border-radius: 100%;
	width: 4.5rem;
	color: white;
	text-align: center;
}

div.itemsIconUser{
	width: 5rem;
}

div.contentItems b.titleNama{
	padding-top: 1rem;
	font-size: 1.4rem;
}

div.contentItems p{
	color: gray;
}

div.items-title{
	padding-top: 1.4rem;
}

section.card-items-dashboard{
	width: 100%;
	padding: 0.8rem 0;
	display: flex;
	justify-content: space-between;
}

div.card-items-dashboard{
	background-color: white;
	width: 17rem;
	height: 15.5rem;
	padding: 1.3rem;
	border-radius: 0.3rem;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}

div.card-items-dashboard b{
	font-size: 0.7rem;
	line-height: 1rem;
	color: gray;
	font-weight: bold;
}

div.dashboard1{
	
	padding: 0.5rem;
	border-radius: 0.5rem;
	margin-top: 0.2rem;
}

div.dashboard1:hover{
	background-color: lightgrey;
}

div.dashboard1 a:hover{
	background-color: lightgrey;
	color: royalblue;
}

div.dashboard1 a{
	margin-left: 0.6rem;
	font-weight: 550;
	font-size: 0.9rem;
}

div.dashboard1 i{
	font-size: 0.9rem;
	color: gray;
}

div.dashboard2{
	margin-top: 0.1rem;
	padding: 0.5rem;
	
}

div.dashboard2:hover{
	background-color: lightgrey;
	color: royalblue;
	display: block;
	border-radius: 0.5rem;
	
}

div.dashboard2 a{
	margin-left: 0.6rem;
	color: black;
	font-size: 0.9rem;
	font-weight: 550;
}

div.dashboard2 a:hover{
	color: royalblue;
	border-radius: 0.5rem;
}

div.dashboard2 i{
	font-size: 0.9rem;
	color: gray;
}

div.card-items-dashboard2{
	width: 70rem;
	background-color: white;
	border-radius: 0.3rem;
	display: flex;
	flex-wrap: wrap;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}

div.titleNaskah{
	padding: 1rem;
	width: 100%;
	border-bottom: 1px solid lightgray;
}

div.titleNaskah b{
	font-size: 1.2rem;
	
}

div.content-akun{
	width: 100%;
	margin: 1rem auto;
	padding: 1rem 2%;
}

div.itemsBaru{
	border-bottom: 1px solid lightgray;
	padding: 0.1rem;
	margin-bottom: 1.3rem;
	display: flex;
	flex-wrap: wrap;

}

div.itemsBaru b{
	margin-bottom: 1rem;
	margin-left: 0.3rem;
	
}

div.itemsBaru2{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 1rem 0;
}

div.itemsBaru p{
	
	margin-bottom: 1rem;

	
}

div.itemsBaru2 ul li{
	line-height: 1.5rem;
	font-size: 1rem;
	color: black;
	margin-right: 1rem;
}

div.itemsBaru2 ul{
	padding: 1.5rem;
	margin-top: 0.3rem;
	margin-right: 4rem;

}

div.itemsLangkah{
	padding: 0.2rem;
	border-radius: 100%;
	border: 4px solid royalblue;
	display: flex;


}

div.itemsLangkah span{
	border-radius: 100%;
	padding: 0.3rem;
	margin: auto;
	background-color: royalblue;
}

div.langkah-langkah{
	display: flex;
	width: 3rem;
	margin-right: 1rem;
	flex-direction: column;
	align-items: center;

}

div.juduLPengajuan{
	width: 100%;
	margin-bottom: 2.6rem;
}

div.garis{
	padding: 2px;
	background-color: royalblue;
	height: 6.2rem;
}

div.garis.dua{
	height: 7.8rem;
}

div.garis.baris3{
	height: 8rem;
}

div.garis.baris4{
	height: 11.5rem;
}

div.garis.baris5{
	height: 6.8rem;
}

div.penjelasan{
	width: 58rem;
	color: royalblue;
}

ul.ProsesAkhir li{
	padding-bottom: 1.8rem;

}

div.penjelasan ul{
	margin: 0;
	padding-left: 1.9rem;
	padding-top: 0.5rem;

}

p.baris6{
	margin-top: 3rem;
	color: gray;
	margin-left: 1rem;
}


/*STYLE UNTUK PESAN ERROR LOGIN FORM*/
div.card-error{
	position: fixed;
	bottom: 1rem;
	right: -100%;
	background-color: royalblue;
	padding: 1.5rem;
	border-radius: 0.3rem;
	font-size: 1.1rem;
	color: white;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

i#closeError{
	position: absolute;
	top: 0.9rem;
	right: 0;
	color: white;
	font-size: 1.3rem;
	
}




/*TUTUP*/


/*STYLE HALAMAN TENTANG KAMI*/

div.container-tentang{
	position: relative;
	padding: 1rem 4%;
	margin: 0 auto;
	width: 80rem;
}

section.section-tentang{
	margin: 5rem auto;
	background-color: white;
	width: 55rem;
	padding: 1rem;
}

section.section-tentang h1{
	font-size: 2.5rem;
	margin-bottom: 0.6rem;

}

section.section-tentang p.tentang-bold{
	font-size: 1.2rem;
	margin-bottom: 1rem;
	color: black;
	line-height: 1.6rem;
	letter-spacing: 0.2px;
}

section.section-tentang p{
	font-size: 1em;
	letter-spacing: 0.5px;
	line-height: 1.6rem;
	color: gray;

}

section.section-tentang p.kilas{
	font-size: 17px;
	letter-spacing: 0.3px;
	color: black;
	margin-bottom: 1.4rem;
}


section.section-tentang2{
	background-color: white;
	width: 55rem;
	padding: 1rem;
	margin-top: 4rem;
}

section.section-tentang2 h1{
	font-size: 2.5rem;
	margin-bottom: 0.6rem;

}

section.section-tentang2 p.tentang-bold{
	font-size: 1.2rem;
	margin-bottom: 1rem;
	color: black;
	letter-spacing: 0.2px;
}

section.section-tentang2 p{
	font-size: 1em;
	letter-spacing: 0.5px;
	line-height: 1.2rem;
	color: rgba(0, 0, 0, 0.6);
}

section.section-tentang2 p.kilas{
	font-size: 17px;
	letter-spacing: 0.3px;
	line-height: 1.7rem;
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 1.4rem;
}


div.content-hero1{ 
	display: flex;
	width: 70rem;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 4rem auto;
	background-color: white;
	position: relative;
}

div.content-hero1 img{
	border-radius: 0.4rem;
	margin: 0.2rem;
	width: 24rem;
}

div.content-hero1 img.kecilImg{
	width: 20rem;
}


/*TUTUP*/


/*STYLE UNTUK AKUN SUDAH BERHASIL DIBUAT KE HALAMAN DASHBOARD*/


div.formMasuk i{
	padding: 1rem;
	border-radius: 100%;
	background-color: lightgray;
	color: white;
	font-size: 1.8rem;
	cursor: pointer;
	margin-left: 5rem;
	
}

div.modalUserAkun{
	width: 19rem;
	background-color: white;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	z-index: -9999;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 6rem;
	right: 2rem;
	opacity: 0;
	border-radius: 0.3rem;
	transition: 0.3s linear;
}

div.userAkun{
	width: 100%;
	padding: 0.6rem;
	display: flex;
	align-items: center;
	border-bottom: 1px solid lightgray;
}


div.userAkun div.kontakUser i{
	padding: 0.9rem;
	margin: auto;
	border-radius: 100%;
	background-color: lightgray;
	color: white;
	font-size: 1.6rem;
	margin-right: 0.8rem;
	margin-left: 0.4rem;
}

div.userAkun div.titleUser b{
	
	font-size: 1.2rem;
	
}

div.userAkun div.titleUser p{
	
	color: gray;
	
}

div.linkUser{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

div.linkBaru{
	flex-direction: column;
}


div.linkBaru a{
	width: 100%;
	padding: 0.5rem;
	text-align: left;
	display: flex;
	color: gray;
	justify-content: left;
	align-items: center;
	padding-left: 1.5rem;

}

div.linkUser div.linkBaru a{
	width: 100%;
	padding: 0.6rem;
	text-align: left;
	display: flex;
	font-weight: normal;
	color: gray;
	justify-content: left;
	align-items: center;
	padding-left: 1.5rem;

}

div.linkUser div.linkBaru a:hover{
	
	color: white;
	

}


div.linkBaru span{
	
	padding-left: 0.7rem;

}

div.linkBaru i{
	
	font-size: 0.9rem;

}

div.linkBaru a.logOut{
	padding: 1rem;
	border-top: 1px solid lightgray;
	border-bottom-right-radius: 0.3rem;
	border-bottom-left-radius: 0.3rem;
	display: flex;
	height: 3rem;
	align-items: center;
}

div.linkBaru a:hover{
	color: white;
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
}


/*TUTUP*/


/*STYLE LOGIN DI HALAMAN INDEX*/


div.container-login{
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 234, 1) 100%);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: auto;
}

div.masuk{
	background-color: white;
	width: 30rem;
	margin: 4rem auto;
	border-radius: 0.3rem;

	border-bottom: 0.4rem solid royalblue;

}

div.content-masuk{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	padding: 1.4rem;

}

div.content-masuk input.code-security{
	background-color: antiquewhite;
	font-size: 1.3rem;
	text-align: center;
}

div.masuk form{
	border: none;
	margin: 0;
	padding: 0;
	width: 100%;
	padding-top: 1.3rem;
}


div.masuk span{
	color: red;
	font-size: 1.1rem;
}

div.masuk p{
	padding: 1rem;
}

div.sigIn{
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 0 1%;
	align-items: center;
	border-bottom: 1px solid lightgray;
}

div.masuk i{
	cursor: pointer;
	font-size: 1.8rem;
	margin-right: 1rem;
	color: lightgray;
}

div.masuk i:hover{
	color: gray;
}


div.masuk form input{
	padding: 0.9rem;
	flex-wrap: wrap;
	margin-top: 0.4rem;
	width: 100%;
	font-size: 1rem;
	border: none;
	border-radius: 0.2rem;
	outline-style: none;
	background-color: lightgrey;
	margin-bottom: 1rem;
}


div.remember{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

div.rememberMe{
	width: 10rem;
	display: flex;
	padding: 0;
	align-items: center;
}

div.masuk div.content-masuk div.rememberMe input{
	padding: 0;
	margin: 0;
	width: unset;
	height: 1rem;
	line-height: normal;
	cursor: pointer;
}

div.masuk div.content-masuk div.rememberMe label{
	
	margin-left: 0.6rem;
	cursor: pointer;
	
}

div.masuk button{
	padding: 0.8rem;
	width: 100%;
	margin-top: 1.4rem;
	border: none;
	border-radius: 0.3rem;
	background-color: royalblue;
	color: white;
	font-size: 1.2rem;
	cursor: pointer;
}

/*TUTUP*/



/*STYLE HALAMAN LAYANAN PENERBITAN BUKU*/

div.container-penerbitan{

	position: relative;
	top: 0;
	margin: 2rem auto;
	width: 85rem;
	padding: 0.5rem 2%;
}

div.items-content-penerbitan{
	width: 80rem;
	display: flex;
	margin: 1rem auto;
	flex-direction: column;
	justify-content: space-between;
}

div.judul-penerbitan1{
	width: 100%;
	padding: 2rem;
	text-align: center;
	background-color: white;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;

}

div.judul-penerbitan1 h2{
	font-size: 2.6rem;
	margin-bottom: 1rem;
}

div.judul-penerbitan1 p{
	font-size: 1.3rem;
	width: 37rem;
	margin: auto;
	line-height: 1.9rem;
	color: rgba(0, 0, 0, 0.7);
}


div.judul-penerbitan2{
	width: 100%;
	padding: 2rem;
	text-align: center;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

div.judul-penerbitan2 div.items-penerbitan1{
	width: 58rem;
	margin: 1rem auto;
	text-align: left;
	
}


div.items-penerbitan1 span.tanggal-terbit{
	color: royalblue;
	font-size: 1.1rem;
}

div.items-penerbitan1 span{
	font-weight: 550;
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.1rem;
}


div.items-penerbitan2{
	width: 58rem;
	margin: 1rem auto;
	text-align: left;
	display: flex;
	flex-direction: column;

}

div.items-penerbitan2 a{
	font-size: 1em;
	padding-top: 0.9rem;
	color: royalblue;

}

div.items-penerbitan2 a i{
	
	color: darkgray;
	padding-right: 0.7rem;

}

div.items-penerbitan2 h3{
	margin-bottom: 1rem;
	font-size: 1.3rem;
	color: rgba(0, 0, 0, 0.8);
}


div.items-penerbitan2 h3.list-terbit{
	font-size: 1.1rem;
	margin-top: 0.7rem;
	color: rgba(0, 0, 0, 0.8);
}

div.items-penerbitan2 p{
	font-size: 1.1rem;
	margin-left: 1.4rem;
	line-height: 1.7rem;
	color: rgba(0, 0, 0, 0.6);
} 

h3.judul-list-terbit{
	margin-top: 2.9rem;
}



/*TUTUP*/


div.penerbitanBuku1{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0.3rem;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

div.juduLPengajuanPenerbit{
	width: 100%;
	padding: 1rem 0;
}

div.langkah-langkah.penerbitanBuku{
	display: flex;
	width: 2rem;
}

div.pendaftarLangkahBaru{
	width: 48rem;
	display: flex;
	flex-direction: column;
	
}

div.pendaftarLangkahBaru b.title-terbitan{
	
	margin-top: 1.4rem;
}

div.pendaftarLangkahBaru b.title-terbitan.b{
	
	margin-top: 1.7rem;
}

div.pendaftarLangkahBaru ul li{
	
	line-height: 1.6rem;
	font-size: 1rem;
}

p.baris6{
	border-top: 1px solid lightgray;
	padding-top: 0.7rem;
	width: 90%;
}


div.kontak-penerbit{
	display: flex;
	flex-direction: column;
	width: 20rem;
	margin-top: 1rem;
	
}

div.kontak-penerbit p{
	font-size: 1rem;
	padding-bottom: 0.6rem;
	font-weight: 550;
	display: block;
	color: royalblue;

}

div.kontak-penerbit span{
	
	color: royalblue;

}

div.kontak-penerbit a i{
	font-size: 1.1rem;
	padding-right: 0.8rem;
	color: royalblue;
}

div.kontak-penerbit p.lokasi{
	font-weight: normal;
	margin-left: 3.3rem;
}




/*STYLE UNTUK ANIMASI LOADING DATA AJUAN NASKAH*/
.card-container{
	background-color: transparent;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: none;
}

.card{
	background-color: blue;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	width: 10rem;
	color: white;
	position: absolute;
	right:2rem;
	bottom: 2rem;
}

.saving-animasi{
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-bottom: 0.6rem;
	border: 5px solid white;
	border-radius: 100%;
	animation: spin 1s linear infinite, fade 1s ease-in-out infinite;
}

@keyframes spin{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

@keyframes fade{
	0%, 100% {
		opacity: 1;
	}

	50%{
		opacity: 0.5;
	}
}


/*style untuk detaail naskah*/

div.container-detail-naskah{
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	position: relative;
	margin: 1.3rem auto;
	border-radius: 0.3rem;
	width: 95%;
	font-size: 0.9rem;
	padding: 18px;
	box-sizing: border-box;

}

div.container-detail-naskah div.content-satu-detail{

	flex-direction: column;
	width: 100%;
	position: relative;

}

div.container-detail-naskah div.content-satu-detail a.kembaliBtn{

	
	position: absolute;
	top: 0;
	right: 0;
	display: inline;
	padding: unset;
	padding: 0.8rem;
	border-radius: 0.3rem;
	color: white;
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
	margin-bottom: unset;

}

div.container-detail-naskah div.content-satu-detail a{
	display: block;
	/*font-weight: bold;*/
	color: royalblue;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	padding-right: 0.7rem;
	box-sizing: border-box;
}

div.container-detail-naskah div.content-satu-detail p{

	line-height: 1.4rem;
	width: 100%;
	text-align: justify;
	flex-wrap: wrap;
	display: block;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
	color: rgba(0, 0, 0, 0.7);

}

div.container-detail-naskah div.content-satu-detail p.judul_buku_detail{

	text-transform: capitalize;

}

div.container-detail-naskah div.content-satu-detail span{

	text-transform: capitalize;

}

div.container-detail-naskah div.content-satu-detail b{

	display: block;
	font-size: 0.9rem;
	margin-bottom: 0.3rem;

}

div.container-detail-naskah div.content-satu-detail ol{

	margin-left: 2.6rem;
	margin-bottom: 1.7rem;
	font-size: 0.2rem;
	margin-top: 0.6rem;

}

div.container-detail-naskah div.content-satu-detail ol li{


	font-size: 1rem;


}


div.container-detail-naskah div.content-satu-detail ol p.email_detail{

	font-size: 0.8rem;
	color: blue;

}



/*tutup*/

/*style UNTUK HALAMAN PAKET PENERBITAN*/

div.container-paket{
	
	position: relative;
	width: 80rem;
	margin: 0 auto;
	padding: 1rem;
}


div.judul-paket{
	margin: 5rem auto;
	text-align: center;
	width: 39rem;
	animation: wave 1s ease-in-out;
	
}

div.judul-paket.baru{
	
	width: 59rem;
	text-align: center;
	
	
}

div.judul-paket h1{
	
	font-size: 2.5rem;
	margin-bottom: 1rem;
	
}

div.judul-paket p{
	
	font-size: 1.2rem;
	line-height: 1.8rem;
	color: rgba(0, 0, 0, 0.7);
	margin-bottom: 9rem;
	
	
}

div.konten-satu-paket{
	display: flex;
	justify-content: space-between;
	width: 75rem;
	margin: 0 auto;
	padding: 0.5rem;
	
}


div.konten-satu-paket div.card-paket-satu{

	width: 50rem;
	display: flex;
	justify-content: space-evenly;
	height: auto;
	padding: 1rem 0;
	margin-bottom: 2rem;
}


div.konten-satu-paket div.paket1{
	width: 24rem;
	animation: wave 0.9s ease-in-out;
	margin: 0 1px;
}

div.konten-satu-paket div.paket1 h3{
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

div.konten-satu-paket div.paket1 p{
	line-height: 1.5rem;
	color: rgba(0, 0, 0, 0.7);
}


div.konten-satu-paket div.paket2{
	width: 23rem;
	padding: 2rem 2rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 0.4rem solid tomato;
	background-color: white;
	box-sizing: border-box;

}


div.konten-satu-paket div.paket2.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-satu-paket div.paket2.dua{
	
	animation: wave 1.4s ease-in-out;

}


div.konten-satu-paket div.paket2.kombo.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-satu-paket div.paket2.kombo.dua{
	
	animation: wave 1.4s ease-in-out;

}


@keyframes wave {

	0%{
		opacity: 0;
		transition: 3s ease-in-out;
		
	}

	0%, 100% {
		transform: translateY(0);
		
	}

	50% {
		transform: translateY(-70px);
		
	}
}


div.konten-satu-paket div.paket2.kombo{
	
	border-top: 0.4rem solid royalblue;

}


div.konten-satu-paket div.paket2.kombo a{
	border: 1px solid royalblue;
	color: royalblue;
	
}

div.konten-satu-paket div.paket2.kombo a:hover{
	background-color: royalblue;
	color: white;
	
}

div.konten-satu-paket div.paket2.kombo2{
	
	border-top: 0.4rem solid steelblue;

}

div.konten-satu-paket div.paket2.kombo2 a{
	border: 1px solid steelblue;
	color: steelblue;
	
}

div.konten-satu-paket div.paket2.kombo2 a:hover{
	background-color: steelblue;
	color: white;
	
}

div.konten-satu-paket div.paket2.kombo3 a{
	
	border: 1px solid darkgreen;
	color: darkgreen;
	width: 9.2rem;
}

div.konten-satu-paket div.paket2.kombo3 a:hover{
	
	background-color: darkgreen;
	color: white;
	
}

div.konten-satu-paket div.paket2.kombo3{
	border-top: 0.4rem solid darkgreen;
	
}

div.konten-satu-paket div.paket2.kombo3.satu{
	animation: wave 1s ease-in-out;
	
}

div.konten-satu-paket div.paket2.kombo3.dua{
	animation: wave 1.4s ease-in-out;
	
}

div.konten-satu-paket div.paket2 h3{
	margin-bottom: 1.5rem;
	box-sizing: border-box;
}

div.konten-satu-paket div.paket2 p{
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-satu-paket div.paket2 span{
	color: rgba(0, 0, 0, 0.4);
	font-size: 1rem;
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-satu-paket div.paket2 a{
	border: 1px solid tomato;
	padding: 0.8rem;
	border-radius: 0.3rem;
	margin: 1.5rem 0;
	display: block;
	width: 8rem;
	color: tomato;
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;
}

div.konten-satu-paket div.paket2 a:hover{
	background-color: tomato;
	color: white;

}

div.paket-detail h4{
	font-size: 1rem;
	padding-bottom: 0.9rem;
	box-sizing: border-box;
}

div.paket-detail{
	
	line-height: 1.7rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 1rem;
}

div.paket-detail i{
	
	border-radius: 100%;
	border: 1px solid darkgreen;
	font-size: 0.5rem;
	padding: 0.2rem;
	text-align: center;
	color: tomato;
	box-sizing: border-box;
}

div.konten-satu-paket div.paket2 div.paket-detail span{
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 1rem;
	padding-left: 0.2rem;
	box-sizing: border-box;
}




/*KONTEN PAKET DUA*/

div.konten-dua-paket{
	display: flex;
	justify-content: space-between;
	width: 75rem;
	margin: 0 auto;
	padding: 0.5rem;
	
}


div.konten-dua-paket div.card-paket-dua{

	width: 50rem;
	display: flex;
	justify-content: space-evenly;
	height: auto;
	padding: 1rem 0;
	margin-bottom: 2rem;

}


div.konten-dua-paket div.paket1{
	width: 24rem;
	animation: wave 0.9s ease-in-out;
	margin: 0 1px;
	
}

div.konten-dua-paket div.paket1 h3{
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

div.konten-dua-paket div.paket1 p{
	line-height: 1.5rem;
	color: rgba(0, 0, 0, 0.7);
}


div.konten-dua-paket div.paket2{
	width: 23rem;
	padding: 2rem 2rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 0.4rem solid tomato;
	background-color: white;
	box-sizing: border-box;

}


div.konten-dua-paket div.paket2.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-dua-paket div.paket2.dua{
	
	animation: wave 1.4s ease-in-out;

}


div.konten-dua-paket div.paket2.kombo.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-dua-paket div.paket2.kombo.dua{
	
	animation: wave 1.4s ease-in-out;

}

div.konten-dua-paket div.paket2.kombo{
	
	border-top: 0.4rem solid royalblue;

}


div.konten-dua-paket div.paket2.kombo a{
	border: 1px solid royalblue;
	color: royalblue;
	
}

div.konten-dua-paket div.paket2.kombo a:hover{
	background-color: royalblue;
	color: white;
	
}

div.konten-dua-paket div.paket2.kombo2{
	
	border-top: 0.4rem solid steelblue;

}

div.konten-dua-paket div.paket2.kombo2 a{
	border: 1px solid steelblue;
	color: steelblue;
	
}

div.konten-dua-paket div.paket2.kombo2 a:hover{
	background-color: steelblue;
	color: white;
	
}

div.konten-dua-paket div.paket2.kombo3 a{
	
	border: 1px solid darkgreen;
	color: darkgreen;
	width: 9.2rem;
}

div.konten-dua-paket div.paket2.kombo3 a:hover{
	
	background-color: darkgreen;
	color: white;
	
}

div.konten-dua-paket div.paket2.kombo3{
	border-top: 0.4rem solid darkgreen;
	
}

div.konten-dua-paket div.paket2.kombo3.satu{
	animation: wave 1s ease-in-out;
	
}

div.konten-dua-paket div.paket2.kombo3.dua{
	animation: wave 1.4s ease-in-out;
	
}

div.konten-dua-paket div.paket2 h3{
	margin-bottom: 1.5rem;
	box-sizing: border-box;
}

div.konten-dua-paket div.paket2 p{
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-dua-paket div.paket2 span{
	color: rgba(0, 0, 0, 0.4);
	font-size: 1rem;
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-dua-paket div.paket2 a{
	border: 1px solid tomato;
	padding: 0.8rem;
	border-radius: 0.3rem;
	margin: 1.5rem 0;
	display: block;
	width: 8rem;
	color: tomato;
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;
}

div.konten-dua-paket div.paket2 a:hover{
	background-color: tomato;
	color: white;

}

div.paket-detail h4{
	font-size: 1rem;
	padding-bottom: 0.9rem;
	box-sizing: border-box;
}

div.paket-detail{
	
	line-height: 1.7rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 1rem;
}

div.paket-detail i{
	
	border-radius: 100%;
	border: 1px solid darkgreen;
	font-size: 0.5rem;
	padding: 0.2rem;
	text-align: center;
	color: tomato;
	box-sizing: border-box;
}

div.konten-dua-paket div.paket2 div.paket-detail span{
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 1rem;
	padding-left: 0.2rem;
	box-sizing: border-box;
}



/*KONTEN PAKET TIGA*/

div.konten-tiga-paket{
	display: flex;
	justify-content: space-between;
	width: 75rem;
	margin: 0 auto;
	padding: 0.5rem;
	
}


div.konten-tiga-paket div.card-paket-tiga{

	width: 50rem;
	display: flex;
	justify-content: space-evenly;
	height: auto;
	padding: 1rem 0;
	margin-bottom: 2rem;

}


div.konten-tiga-paket div.paket1{
	width: 24rem;
	animation: wave 0.9s ease-in-out;
	margin: 0 1px;
	
}

div.konten-tiga-paket div.paket1 h3{
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

div.konten-tiga-paket div.paket1 p{
	line-height: 1.5rem;
	color: rgba(0, 0, 0, 0.7);
}


div.konten-tiga-paket div.paket2{
	width: 23rem;
	padding: 2rem 2rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 0.4rem solid tomato;
	background-color: white;
	box-sizing: border-box;

}


div.konten-tiga-paket div.paket2.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-tiga-paket div.paket2.dua{
	
	animation: wave 1.4s ease-in-out;

}


div.konten-tiga-paket div.paket2.kombo.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-tiga-paket div.paket2.kombo.dua{
	
	animation: wave 1.4s ease-in-out;

}

div.konten-tiga-paket div.paket2.kombo{
	
	border-top: 0.4rem solid royalblue;

}


div.konten-tiga-paket div.paket2.kombo a{
	border: 1px solid royalblue;
	color: royalblue;
	
}

div.konten-tiga-paket div.paket2.kombo a:hover{
	background-color: royalblue;
	color: white;
	
}

div.konten-tiga-paket div.paket2.kombo2{
	
	border-top: 0.4rem solid steelblue;

}

div.konten-tiga-paket div.paket2.kombo2 a{
	border: 1px solid steelblue;
	color: steelblue;
	
}

div.konten-tiga-paket div.paket2.kombo2 a:hover{
	background-color: steelblue;
	color: white;
	
}

div.konten-tiga-paket div.paket2.kombo3 a{
	
	border: 1px solid darkgreen;
	color: darkgreen;
	width: 9.2rem;
}

div.konten-tiga-paket div.paket2.kombo3 a:hover{
	
	background-color: darkgreen;
	color: white;
	
}

div.konten-tiga-paket div.paket2.kombo3{
	border-top: 0.4rem solid darkgreen;
	
}

div.konten-tiga-paket div.paket2.kombo3.satu{
	animation: wave 1s ease-in-out;
	
}

div.konten-tiga-paket div.paket2.kombo3.dua{
	animation: wave 1.4s ease-in-out;
	
}

div.konten-tiga-paket div.paket2 h3{
	margin-bottom: 1.5rem;
	box-sizing: border-box;
}

div.konten-tiga-paket div.paket2 p{
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-tiga-paket div.paket2 span{
	color: rgba(0, 0, 0, 0.4);
	font-size: 1rem;
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-tiga-paket div.paket2 a{
	border: 1px solid tomato;
	padding: 0.8rem;
	border-radius: 0.3rem;
	margin: 1.5rem 0;
	display: block;
	width: 8rem;
	color: tomato;
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;
}

div.konten-tiga-paket div.paket2 a:hover{
	background-color: tomato;
	color: white;

}

div.paket-detail h4{
	font-size: 1rem;
	padding-bottom: 0.9rem;
	box-sizing: border-box;
}

div.paket-detail{
	
	line-height: 1.7rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 1rem;
}

div.paket-detail i{
	
	border-radius: 100%;
	border: 1px solid darkgreen;
	font-size: 0.5rem;
	padding: 0.2rem;
	text-align: center;
	color: tomato;
	box-sizing: border-box;
}

div.konten-tiga-paket div.paket2 div.paket-detail span{
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 1rem;
	padding-left: 0.2rem;
	box-sizing: border-box;
}



/*KONTEN PAKET 	EMPAT*/

div.konten-empat-paket{
	display: flex;
	justify-content: space-between;
	width: 75rem;
	margin: 0 auto;
	padding: 0.5rem;
	
}


div.konten-empat-paket div.card-paket-empat{

	width: 50rem;
	display: flex;
	justify-content: space-evenly;
	height: auto;
	padding: 1rem 0;
	margin-bottom: 2rem;

}


div.konten-empat-paket div.paket1{
	width: 24rem;
	animation: wave 0.9s ease-in-out;
	margin: 0 1px;
	
}

div.konten-empat-paket div.paket1 h3{
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

div.konten-empat-paket div.paket1 p{
	line-height: 1.5rem;
	color: rgba(0, 0, 0, 0.7);
}


div.konten-empat-paket div.paket2{
	width: 23rem;
	padding: 2rem 2rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 0.4rem solid tomato;
	background-color: white;
	box-sizing: border-box;

}


div.konten-empat-paket div.paket2.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-empat-paket div.paket2.dua{
	
	animation: wave 1.4s ease-in-out;

}


div.konten-empat-paket div.paket2.kombo.satu{
	
	animation: wave 1s ease-in-out;

}

div.konten-empat-paket div.paket2.kombo.dua{
	
	animation: wave 1.4s ease-in-out;

}


div.konten-empat-paket div.paket2.kombo3 a{
	
	border: 1px solid darkgreen;
	color: darkgreen;
	width: 9.2rem;
}

div.konten-empat-paket div.paket2.kombo3 a:hover{
	
	background-color: darkgreen;
	color: white;
	
}

div.konten-empat-paket div.paket2.kombo3{
	border-top: 0.4rem solid darkgreen;
	
}

div.konten-empat-paket div.paket2.kombo3.satu{
	animation: wave 1s ease-in-out;
	
}

div.konten-empat-paket div.paket2.kombo3.dua{
	animation: wave 1.4s ease-in-out;
	
}

div.konten-empat-paket div.paket2 h3{
	margin-bottom: 1.5rem;
	box-sizing: border-box;
}

div.konten-empat-paket div.paket2 p{
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-empat-paket div.paket2 span{
	color: rgba(0, 0, 0, 0.4);
	font-size: 1rem;
	padding-bottom: 0.1rem;
	box-sizing: border-box;
}

div.konten-empat-paket div.paket2 a{
	border: 1px solid tomato;
	padding: 0.8rem;
	border-radius: 0.3rem;
	margin: 1.5rem 0;
	display: block;
	width: 8rem;
	color: tomato;
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;
}

div.konten-empat-paket div.paket2 a:hover{
	background-color: tomato;
	color: white;

}

div.paket-detail h4{
	font-size: 1rem;
	padding-bottom: 0.9rem;
	box-sizing: border-box;
}

div.paket-detail{
	
	line-height: 1.7rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 1rem;
}

div.paket-detail i{
	
	border-radius: 100%;
	border: 1px solid darkgreen;
	font-size: 0.5rem;
	padding: 0.2rem;
	text-align: center;
	color: tomato;
	box-sizing: border-box;
}

div.konten-empat-paket div.paket2 div.paket-detail span{
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 1rem;
	padding-left: 0.2rem;
	box-sizing: border-box;
}



/*STYLE HALAMAN KONTAK*/

div.container-kontak{
	background-image: url(../img/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin-top: 5rem;
	z-index: -999;

}


div.container-kontak div.card-kontak{
	width: 47%;
	margin-top: 5rem;
	padding: 0 4rem;


}

div.container-kontak div.card-kontak img{
	margin-left: -1.4rem;
	margin-bottom: 1rem;
	width: 40vh;

}


div.container-kontak div.card-kontak div.kontak-person{
	line-height: 2rem;
	margin-top: 1.3rem;
}

div.container-kontak div.card-kontak h1{
	margin-bottom: 0.2rem;
}


div.container-kontak div.card-kontak div.kontak-person p.lokasi{
	padding-left: 1.6rem;
	line-height: 1.4rem;
}


div.container-kontak div.card-kontak div.kontak-person i{
	padding-right: 0.5rem;

}



/*STYLE HALAMAN PRODUCT MOTEKAR DASAR*/

section.container-motekar{
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
	height: 25rem;
	position: relative;
	top: 0;
	width: 100%;

}

div.container-card-motekar{
	width: 65rem;
	margin: 0 auto;
	padding-bottom: 7rem;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	/*background-color: red;*/

}

div.card-motekar-satu{
	width: 100%;
	display: flex;
	flex-direction: column;
	/*background-color: lightgrey;*/
	margin-top: 3rem;

}


div.card-motekar-satu h1{
	font-size: 2rem;
	color: white;
}

div.card-motekar-satu p{
	font-size: 1.1rem;
	line-height: 1.8rem;
	padding-top: 1rem;
	color: white;
}

div.card-mini-satu{
	padding: 1.5rem;
	border-radius: 0.4rem;
	margin-top: 3rem;
	box-shadow: 0px 0px 0px 0.2px rgba(0, 0, 0, 0.5);
	background-color: white;
	margin-bottom: 1rem;
}


div.card-mini-satu p{
	color: rgba(0, 0, 0, 0.7);
	font-size: 0.9rem;
}

div.card-mini-satu ul{
	margin-left: 1.5rem;
	padding-top: 0.7rem;
}

div.card-mini-satu ul li{
	line-height: 1.4rem;
	font-size: 0.9rem;
}



form.card-motekar-dua{
	background-color: white;
	border-radius: 0.4rem;
	margin-top: 5rem;
	width: 23rem;
	/*height: 30rem;*/
	flex-direction: column;
	display: flex;
	padding: 1.5rem;
}

form.card-motekar-dua img{
	width: 23vh;
	height: 23vh;
	margin: 0 auto;
	margin-bottom: 4rem;

}

form.card-motekar-dua select{
	padding: 0.7rem;
	font-size: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.3rem;
	outline-color: rgba(0, 0, 0, 0.6);
}

form.card-motekar-dua label{
	padding-bottom: 0.4rem;
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.7);
	font-weight: bold;
}

select#sivitas_nonsivitas{
	margin-bottom: 1.5rem;

}

form.card-motekar-dua button{
	margin-top: 1.5rem;
	padding: 0.8rem;
	border: none;
	background: rgb(12, 0, 36);
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
	color: white;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	border-radius: 0.3rem;
}



/*STYLE UNTUK HALAMAN DAFTAR ALAMAT*/
div.container-penagihan{

	width: 100%;
	margin: 1rem auto;
	padding: 0.8rem 2%;
	position: relative;
	display: none;
}


div.container-penagihan.active {
	display: block;
}


div.container-pengiriman{
	display: none;
}

div.container-pengiriman.active{
	display: block;
}


div.container-penagihan form{
	display: flex;
	margin: 0.5rem auto;
	flex-wrap: wrap;
	padding: unset;
	border: none;
}


div.container-penagihan form input{
	width: 100%;
	padding: 0.8rem;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 0.3rem;
	outline-style: none;
	margin-top: 0.4rem;
	font-size: 1rem;
}

div.container-penagihan form select{
	width: 100%;
	padding: 0.8rem;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 0.3rem;
	outline-style: none;
	margin-top: 0.4rem;
	font-size: 1rem;
	margin-bottom: 1.5rem;

}

div.container-penagihan form span{
	width: 100%;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	padding-top: 0.2rem;
	
}

div.container-penagihan form button{
	padding: 1rem;
	border: none;
	width: 8rem;
	border-radius: 0.3rem;
	color: white;
	font-size: 1rem;
	font-weight: bolder;
	background: rgb(12, 0, 36);
	cursor: pointer;
	background: linear-gradient(80deg, rgba(15,0,54,0.5737179487179487) 1%, rgba(15, 22, 214, 1) 100%);
}

div.container-penagihan form label{
	color: rgba(0, 0, 0, 0.7);
	font-weight: bolder;
	font-size: 0.9rem;
}


div.container-penagihan form div.daftar_nama1{

	width: 49%;
	padding: 1rem 0;
}

div.container-penagihan div.container-card{
	display: flex;
	justify-content: space-between;
	width: 100%;

}


div.container-penagihan div.container-card label{
	margin-bottom: 1rem;
}


div.container-penagihan form div.daftar_nama2{
	padding: 1rem 0;
	width: 49%;
	
	
}

div.container-penagihan form div.daftar_nama2 input{

	width: 100%;
	
	
}

div.container-penagihan form div.card-input-tagih{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	

}

div.container-penagihan form div.card-input-tagih div.card-satu-tagih{
	width: 49%;
}

div.container-penagihan form div.card-input-tagih div.card-satu-tagih input{
	margin-bottom: 1.3rem;
}


div.container-penagihan form div.card-input-tagih2{
	display: flex;
	justify-content: space-between;
	width: 100%;

}


div.container-penagihan form div.card-input-tagih2 div.card-satu-tagih2{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

div.container-penagihan form div.card-input-tagih2 div.card-satu-tagih2 input{
	margin-bottom: 1.5rem;
}

div.container-penagihan form div.card-input-tagih2 div.card-satu-tagih2 label{
	
	width: 100%;
	
} 


div.galeri_img{
	width: 60rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
}

div.galeri_img img{
	width: 50vh;
	margin: 0.5rem auto;
	border-radius: 0.6rem;
}

/*RESPONSIVE MOBILE*/

@media screen and (max-width: 767px){

	html{
		font-size: 64%;
	}

	nav{
		
		height: 8rem;
		margin: 0;
		position: relative;
		top: 0;
		bottom: 0;
		z-index: 99999;

	}
	
	nav img{
		
		width: 18.8rem;

	}

	nav i#humberger-menu{

		display: block;
		font-size: 2.6rem;
		cursor: pointer;
		margin-right: 2.3rem;
	}


	div.btn{
		width: 16.5rem;
		margin-top: 1rem;

	}



	div.btn a#masuk{
		padding: 1.2rem;

	}

	div.btn a#daftar{
		padding: 1.2rem;
	}

	nav div.navbar{
		position: fixed;
		top: 0;
		right: -100%;
		bottom: 0;
		width: 33rem;
		margin: auto;
		padding-bottom: 29rem;
		padding-top: 5rem;
		background-color: white;
		flex-direction: column;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
		transition: 0.3s linear;

	}

	nav div.navbar i#closeModalMini{
		display: block;
		font-size: 2rem;
		color: rgba(0, 0, 0, 0.5);
		padding: 1rem;
		text-align: right;
	}

	/*modal user login dashboard dan lainnya*/
	div.formMasuk i{
		padding: 1.8rem;
		font-size: 2.9rem;
		margin: 2rem auto;

	}

	div.modalUserAkun div.userAkun div.kontakUser i{

		font-size: 2.3rem;
		padding: 1.3rem;
		margin: 1rem;
	}

	div.modalUserAkun div.userAkun div.titleUser b{

		font-size: 1.9rem;
		display: block;
		
	}

	div.modalUserAkun div.userAkun div.titleUser p{

		font-size: 1.4rem;
		margin-bottom: 1.2rem;
		
	}

	div.modalUserAkun div.userAkun{
		margin: unset;
		width: 100%;
		display: unset;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	div.modalUserAkun div.userAkun div.titleUser {
		margin: unset;
		padding: unset;

	}

	div.modalUserAkun{
		top: 0rem;
		right: 6rem;
		margin-bottom: 7rem;
		display: flex;
		width: 22rem;
		flex-direction: column;
		justify-content: space-between;
	}

	div.modalUserAkun div.linkUser div.linkBaru i{
		
		font-size: 1.4rem;
	}


	div.modalUserAkun div.linkUser div.linkBaru span{
		
		font-size: 1.4rem;

		
	}

	div.modalUserAkun div.linkUser div.linkBaru a{
		
		line-height: 1rem;
		display: block;
		
		
	}


	nav div.navbar div.dropdown-container{

		display: flex;
		flex-direction: column;
	}

	i#closeModal{
		display: block;
		font-size: 2.7rem;
		position: absolute;
		top: 1rem;
		left: 1.5rem;
		color: gray;
	}

	nav div.navbar form input#cari{
		padding: 0.7rem;
		font-size: 1.5rem;
		
		
	}
	
	nav div.navbar form{
		margin-top:1.7rem;
	}

	nav div.navbar form li{
		
		font-size: 1.5rem;
	}


	.dropdown-content.satu{
		position: absolute;
		top: 3rem;
		margin-top: 13rem;
		right: 2.6rem;
		width: 24rem;
		z-index: -1;
	}


	.dropdown-content.dua{
		position: absolute;
		top: 3rem;
		margin-top: 16.7rem;
		right: 2.6rem;
		width: 24rem;
		z-index: -1;
	}

	nav .dropdown button.dropbtn{
		font-size: 1.6rem;
		margin: 1rem 0;
	}

	nav .dropdown button.dropbtn i{
		font-size: 1.2rem;
	}

	nav div.navbar a{
		font-size: 1.6rem;
		margin: 1rem 0;
		background-color: unset;
	}


	section.content-satu{
		width: 34rem;
		flex-direction: column;
		margin: 6rem auto;
		padding: 1rem 2%;
		
	}

	section.content-satu div.content-items p{
		font-size: 1.7rem;
		text-align: left;
		line-height: 2.6rem;
		letter-spacing: 0.6px;
		color: rgba(0, 0, 0, 0.7);
	}

	section.content-satu div.content-items{
		width: 100%;
	}

	section.content-satu div.content-items div.items_p{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	section.content-satu div.content-items div.items_p span{
		font-size: 1.6rem;
		padding-left: 1rem;
	}

	section.content-satu div.content-items div.items_p div.paragraf{
		
		width: 100%;
		padding: 0.3rem;
	}

	section.content-satu img{
		width: 42vh;
		height: 42vh;
		margin: 0 auto;
	}

	section.contentDua{
		width: 34rem;
		flex-direction: column;
		margin: 6rem auto;
		padding: 1rem 2%;
	}

	section.contentDua div.content-items{
		width: 100%;
	}

	section.contentDua img{
		width: 42vh;
		height: 42vh;
		margin: 0 auto;
	}

	section.contentDua div.content-items div.items_p{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	section.contentDua div.content-items div.items_p div.paragraf span{
		font-size: 1.5rem;
		padding-left: 0.5rem;
	}

	section.content-tiga div.content-items p.bold{
		font-size: 1.7rem;
		line-height: 2.5rem;
		margin: 1.2rem auto;
		text-align:left;
	}

	section.content-tiga div.content-items li.fa.fa-qrcode{
		font-size: 2.2rem;
	}

	section.content-tiga div.content-items li.fa.fa-truck-fast{
		font-size: 2.2rem;
	}

	section.contentDua div.content-items p.bold{
		font-size: 1.7rem;
		line-height: 2.5rem;
	}

	section.content-tiga div.content-items p.payment-items{
		font-size: 1.5rem;
		text-align: left;
		line-height: 2rem;
	}

	section.content-tiga div.content-items p.judul-promo{
		font-size: 1.8rem;
		text-align: left;
		line-height: 2.5rem;
	}
	
	section.content-tiga div.content-items span{
		font-size: 1.8rem;
		
	}
	
	section.contentDua p.judul-promo{
		font-size: 1.8rem;
		text-align: left;
		line-height: 2.5rem;
	}


	section.hero{
		margin: 0;
		justify-content: normal;
		display: flex;
		height: 42rem;
		position: relative;
		overflow: hidden;
	}
	
	section.hero img{
		width: 90%;
		position:absolute;
		right:0;
		top:0;
	}


	div.container-items{
		width: 40rem;
		z-index: 9999;
		position: absolute;
		padding:unset;
		margin-left:0.9rem;
	}

	div.container-items h3{
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	}

	div.container-items p{
		font-size: 1.8rem;
		line-height: 2.3rem;
		width: 30rem;
		color:white;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	}

	div.container-items div.btn-belanja{
		
		width: 29rem;
	}

	div.container-items div.btn-belanja a{
		padding: 1.6rem;
		font-size: 1.4rem;
	}

	section.content-tiga{
		width: 34rem;
		flex-direction: column;
		margin: 6rem auto;
		padding: 1rem 2%;
	}
	
	div.footer{
		font-size:1.3rem;
	}

	section.content-tiga img{
		width: 42vh;
		height: 42vh;
		margin: 0 auto;
	}

	section.content-empat div.items-footer{
		padding: 1rem;

	}
	
	section.content-empat div.items-footer p{
		font-size: 1.8rem;

	}
	
	section.content-empat div.items-footer p.ajakan{
		font-size: 1.5rem;
		margin:1rem;
	}


	section.content-empat div.items-footer div.btn-footer a{
		padding: 1.6rem;
		font-size: 1.5rem;
		margin-top: 2.6rem;
	}


	/*style HALAMAN TENTANG KAMI*/
	
	body div.container-ubah-pass{
		width:unset;

	}

	div.container-tentang{
		width: 30rem;
		margin: 0 auto;
		padding:unset;
	}


	section.section-tentang{
		margin: 1rem auto;
		width: 34rem;
		padding: 1rem;
	}

	section.section-tentang p.tentang-bold{
		font-size: 1.7rem;
		line-height: 2.6rem;
	}

	section.section-tentang p{
		font-size: 1.7rem;
		line-height: 2.6rem;
		color:rgba(0, 0, 0, 0.7);
	}

	section.section-tentang2 p.kilas{
		font-size: 1.7rem;
		line-height: 2.6rem;
	}

	section.hero-img-tentang2{
		width: 100%;
		display: flex;
		flex-direction:column;
		padding:unset;
	}

	section.hero-img-tentang2 div.content-hero1{
		width: 90%;
		display: flex;
		flex-wrap: wrap;
	}

	section.hero-img-tentang2 div.content-hero1 img{
		width: 100%;
		margin: 0.7rem auto;
		height: 37vh;
	}



	/*style halaman LAYANAN PENERBITAN BUKU*/
	div.container-penerbitan{
		width: unset;
		overflow: hidden;
	}

	div.items-content-penerbitan{
		width: 34rem;
		margin:1rem auto;
		display:flex;
		flex-direction:column;
		padding: 0.4rem;
	}

	div.items-penerbitan2{
		width: 100%;
		margin: unset;
	}

	div.items-penerbitan2 div.content-akun.penerbitanBuku{
		width: 100%;
	}

	div.items-content-penerbitan div.judul-penerbitan1 {
		padding: unset;
		margin: 2rem auto;
		width:34;
		display:flex;
		flex-wrap:wrap;
		flex-direction:column;

	}

	div.items-content-penerbitan div.judul-penerbitan1 p{
		line-height: 2.6rem;
		font-size: 1.8rem;
		width:33rem;
		margin-bottom: 4rem;
	}

	div.items-penerbitan2 h3{
		font-size: 1.8rem;
	}

	div.items-penerbitan2 a{
		font-size: 1.5rem;
	}

	div.judul-penerbitan2{
		padding: unset;
	}

	div.items-penerbitan2 p{
		font-size: 1.7rem;
		line-height: 2.6rem;
	}

	div.items-penerbitan2 h3.list-terbit{
		font-size: 1.6rem;
	}

	div.penjelasan.pendaftarLangkahBaru {
		width: 28.5rem;
		
	}

	div.penjelasan.pendaftarLangkahBaru li {
		font-size: 1.6rem;
		line-height: 2.6rem;
		margin-left: 0.6rem;
		color: rgba(0, 0, 0, 0.6);
	}

	div.penjelasan.pendaftarLangkahBaru b{
		font-size: 1.7rem;
		margin-left: 0.6rem;
	}

	div.juduLPengajuanPenerbit b{
		font-size: 1.4rem;
		margin-bottom: 2rem;
	}

	div.kontak-penerbit{
		width: 100%;
	}

	div.kontak-penerbit a.kontak i{
		font-size: 1.6rem;
		
	}


	div.langkah-langkah.penerbitanBuku{
		
		margin-right: 0.5rem;
	}

	div.langkah-langkah.penerbitanBuku div.garis.satu{
		height: 17.8rem;
	}

	div.langkah-langkah.penerbitanBuku div.garis.dua{
		height: 27.9rem;
	}

	div.langkah-langkah.penerbitanBuku div.garis.baris3{
		height: 25.4rem;

	}

	div.langkah-langkah.penerbitanBuku div.garis.baris4{
		height: 36.2rem;
	}

	div.langkah-langkah.penerbitanBuku div.garis.baris5{
		height: 14.7rem;
	}

	div.langkah-langkah.penerbitanBuku div.garis{
		height: 15rem;
	}


	div.footer{
		font-size: 1.5rem;
		padding: 3rem;
		box-sizing: border-box;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
	}

	h3.judul-list-terbit{
		margin-top: 4rem;
	}

	div.penerbitanBuku1{
		width: 100%;
	}


	/*STYLE UNTUK HALAMAN REGISTRASI*/

	div.container-register{
		width: 33rem;
		display: flex;
		flex-wrap: wrap;
		padding: 2rem;
		position: relative;
		box-sizing: border-box;
	}

	div.container-register p{
		font-size: 1.5rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
		width: 100%;
		margin: 2rem auto;
	}


	div.container-register form{
		width: 100%;
		justify-content: space-between;
		border: none;
		flex-wrap: wrap;
		display: flex;

	}

	div.content-register.satu{
		width: 100%;


	}

	div.content-register.satu select{
		margin-bottom: 1.4rem;
		padding: 1rem;
		
	}


	div.content-register.dua{
		margin: unset;
		width: 100%;
		height: auto;
	}

	div.content-register.dua select{
		margin-bottom: 1.4rem;
		padding: 1rem;

	}

	div.content-register.akun{
		width: 100%;
	}


	div.content-register.dua label.pekerjaanBaru{
		margin: unset;
	}

	div.content-register label{
		font-size: 1.5rem;
		color: rgba(0, 0, 0, 0.8);
	}

	div.content-register span{
		font-size: 1.5rem;
	}

	div.container-register button{
		padding: 1.4rem;
		font-size: 1.6rem;
		border-radius: 0.3rem;
		margin-top: 2rem;
		box-sizing: border-box;

	}

	div.container-register form div.content-register input{
		padding: 1.1rem;
		margin-bottom: 1.7rem;
		box-sizing: border-box;
		font-size: 1.5rem;
	}


	div.masuk{

		width: 32rem;
		margin: 3rem auto;
		flex-wrap: wrap;
		height: auto;
		padding: 1rem 2%;
		
		

	}

	div.masuk P{

		font-size: 1.5rem;

	}

	div.masuk div.remember{
		width: 100%;
	}

	div.masuk div.remember div.rememberMe{
		width: 12rem;
		
	}

	div.masuk div.remember a{
		font-size: 1.5rem;
	}


	div.masuk input#check
	{
		height: 1.4rem;
	}

	div.masuk div.remember div.rememberMe label
	{
		font-size: 1.5rem;
	}

	div.masuk div.sigIn{
		padding: 0.1rem;
	}

	div.masuk i{

		font-size: 2.5rem;

	}

	div.masuk div.content-masuk h2{

		font-size: 2.5rem;

	}

	div.masuk div.content-masuk form button{

		font-size: 1.8rem;
		padding: 1.3rem;
		font-weight: bold;
		margin-top: 2rem;

	}

	div.masuk div.content-masuk form label{

		font-size: 1.4rem;

	}

	div.masuk div.content-masuk form label span{

		font-size: 1.6rem;
		margin: unset;
		padding: unset;
	}

	div.masuk form input{

		padding: 1.6rem;
		margin-bottom:2rem;
		font-size: 1.7rem;
		box-sizing: border-box;
		background-color: lightgrey;

	}

	div.masuk form input.code-security{

		font-size: 2.2rem;
	}






	/*style UNTUK HALAMAN PAKET PENERBITAN*/

	div.container-paket{
		width: 35rem;
		display: flex;
		flex-wrap: wrap;
		padding: 0.2rem 2%;
		position: relative;
		margin: 0 auto;
	}

	div.container-paket div.judul-paket{
		margin-bottom: unset;

	}

	div.container-paket div.konten-satu-paket{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 6rem;
	}

	div.container-paket div.konten-satu-paket div.paket1{
		width: 100%;
		margin-bottom: 3rem;
	}

	div.container-paket div.konten-satu-paket div.paket1 h3{
		font-size: 2.4rem;
	}

	div.container-paket div.konten-satu-paket div.paket1 p{
		font-size: 1.6rem;
		line-height: 2.4rem;

	}

	div.konten-satu-paket div.container-card{
		width: 100%;
		overflow: auto;
		flex-direction: column;
		
	}

	div.konten-satu-paket div.card-paket-satu{

		width: 60rem;
		justify-content: space-between;
		padding: unset;
		display: flex;
		margin: 0.5rem auto;

	}

	div.konten-satu-paket div.card-paket-satu h3{

		font-size: 1.8rem;
	}


	div.konten-satu-paket div.card-paket-satu p{

		font-size: 1.3rem;
	}

	div.konten-satu-paket div.card-paket-satu span{

		font-size: 1.3rem;
	}

	div.konten-satu-paket div.card-paket-satu a{
		margin: 2.3rem 0;
		font-size: 1.4rem;
		width: 11rem;
		padding: 1rem;
	}

	div.konten-satu-paket div.card-paket-satu h1{

		font-size: 2.5rem;
	}

	div.konten-satu-paket div.card-paket-satu h4{

		font-size: 1.5rem;
	}

	div.konten-satu-paket div.card-paket-satu div.paket-detail{

		line-height: 2.5rem;
	}


	div.konten-satu-paket div.card-paket-satu div.paket-detail span{
		padding-left: 0.7rem;
		font-size: 1.4rem;
	}

	div.konten-satu-paket div.card-paket-satu div.paket-detail i{

		font-size: 1rem;
	}

	div.konten-satu-paket div.paket2{
		width: 60rem;
		margin-right: 1rem;
		padding: 3rem 3rem;
		border-top: 6px solid tomato;
	}

	div.container-paket div.judul-paket{
		margin-bottom: unset;
		font-size: 1.8rem;

	}

	div.container-paket div.judul-paket p{
		line-height: 2.9rem;
		font-size: 1.8rem;

	}


	/*STYLE KONTEN 2*/

	div.container-paket div.konten-dua-paket{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 0.5rem;

	}


	div.container-paket div.konten-dua-paket div.paket1{
		width: 100%;
		margin-bottom: 3rem;
	}

	div.container-paket div.konten-dua-paket div.paket1 h3{
		font-size: 2.4rem;
	}

	div.container-paket div.konten-dua-paket div.paket1 p{
		font-size: 1.6rem;
		line-height: 2.4rem;

	}

	div.konten-dua-paket div.container-card{
		width: 100%;
		overflow: auto;
		flex-direction: column;
		margin: unset;
	}

	div.konten-dua-paket div.card-paket-dua{

		width: 60rem;
		justify-content: space-between;
	}


	div.container-paket div.konten-dua-paket{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 6rem;
	}

	div.konten-dua-paket div.card-paket-dua h3{

		font-size: 1.8rem;
	}


	div.konten-dua-paket div.card-paket-dua p{

		font-size: 1.3rem;
	}

	div.konten-dua-paket div.card-paket-dua span{

		font-size: 1.3rem;
	}

	div.konten-dua-paket div.card-paket-dua a{
		margin: 2.3rem 0;
		font-size: 1.4rem;
		width: 11rem;
		padding: 1rem;
	}

	div.konten-dua-paket div.card-paket-dua h1{

		font-size: 2.5rem;
	}

	div.konten-dua-paket div.card-paket-dua h4{

		font-size: 1.5rem;
	}

	div.konten-dua-paket div.card-paket-dua div.paket-detail{

		line-height: 2.5rem;
	}


	div.konten-dua-paket div.card-paket-dua div.paket-detail span{
		padding-left: 0.7rem;
		font-size: 1.4rem;
	}

	div.konten-dua-paket div.card-paket-dua div.paket-detail i{

		font-size: 1rem;
	}

	div.konten-dua-paket div.paket2.kombo{
		width: 40rem;
		margin-right: 1rem;
		padding: 3rem 3rem;
		border-top: 6px solid royalblue;
	}



	/*STYLE KONTEN 3*/


	div.container-paket div.konten-tiga-paket div.paket1{
		width: 100%;
		margin-bottom: 6rem;
	}

	div.container-paket div.konten-tiga-paket div.paket1 h3{
		font-size: 2.4rem;
	}

	div.container-paket div.konten-tiga-paket div.paket1 p{
		font-size: 1.6rem;
		line-height: 2.4rem;

	}

	div.konten-tiga-paket div.container-card{
		width: 100%;
		overflow: auto;
		flex-direction: column;
		margin: unset;
	}

	div.konten-tiga-paket div.card-paket-tiga{

		width: 60rem;
		justify-content: space-between;
	}


	div.container-paket div.konten-tiga-paket{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 4rem;
	}

	div.konten-tiga-paket div.card-paket-tiga h3{

		font-size: 1.8rem;
	}


	div.konten-tiga-paket div.card-paket-tiga p{

		font-size: 1.3rem;
	}

	div.konten-tiga-paket div.card-paket-tiga span{

		font-size: 1.3rem;
	}

	div.konten-tiga-paket div.card-paket-tiga a{
		margin: 2.3rem 0;
		font-size: 1.4rem;
		width: 11rem;
		padding: 1rem;
	}

	div.konten-tiga-paket div.card-paket-tiga h1{

		font-size: 2.5rem;
	}

	div.konten-tiga-paket div.card-paket-tiga h4{

		font-size: 1.5rem;
	}

	div.konten-tiga-paket div.card-paket-tiga div.paket-detail{

		line-height: 2.5rem;
	}


	div.konten-tiga-paket div.card-paket-tiga div.paket-detail span{
		padding-left: 0.7rem;
		font-size: 1.4rem;
	}

	div.konten-tiga-paket div.card-paket-tiga div.paket-detail i{

		font-size: 1rem;
	}

	div.konten-tiga-paket div.paket2.kombo2{
		width: 60rem;
		padding: 3rem 3rem;
		margin-right: 1rem;
		box-sizing: border-box;
		border-top: 6px solid steelblue;
	}



	/*STYLE KONTEN 4*/


	div.container-paket div.konten-empat-paket div.paket1{
		width: 100%;
		margin-bottom: 3rem;
	}

	div.container-paket div.konten-empat-paket div.paket1 h3{
		font-size: 2.4rem;
	}

	div.container-paket div.konten-empat-paket div.paket1 p{
		font-size: 1.6rem;
		line-height: 2.4rem;

	}

	div.konten-empat-paket div.container-card{
		width: 100%;
		overflow: auto;
		flex-direction: column;
		margin: unset;
	}

	div.konten-empat-paket div.card-paket-empat{

		width: 60rem;
		justify-content: space-between;
	}


	div.container-paket div.konten-empat-paket{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 4rem;
	}

	div.konten-empat-paket div.card-paket-empat h3{

		font-size: 1.8rem;
	}


	div.konten-empat-paket div.card-paket-empat p{

		font-size: 1.5rem;
	}

	div.konten-empat-paket div.card-paket-empat span{

		font-size: 1.3rem;
	}

	div.konten-empat-paket div.card-paket-empat div.paket2 a{
		margin: 2.3rem 0;
		width: 14rem;
		font-size: 1.4rem;
		padding: 1.2rem;
		display: block;
	}

	div.konten-empat-paket div.card-paket-empat h1{

		font-size: 2.5rem;
	}

	div.konten-empat-paket div.card-paket-empat h4{

		font-size: 1.5rem;
	}

	div.konten-empat-paket div.card-paket-empat div.paket-detail{

		line-height: 2.5rem;
	}


	div.konten-empat-paket div.card-paket-empat div.paket-detail span{
		padding-left: 0.7rem;
		font-size: 1.4rem;
	}

	div.konten-empat-paket div.card-paket-empat div.paket-detail i{

		font-size: 1rem;
	}

	div.konten-empat-paket div.paket2.kombo3{
		width: 40rem;
		padding: 3rem 2.5rem;
		margin-right: 1rem;
		box-sizing: border-box;
		border-top: 6px solid darkgreen;
	}





	/*STYLE HALAMAN KONTAK*/

	div.container-kontak div.card-kontak{
		width: 100%;
		margin-top: 13rem;
		padding: 0 2rem;
	}

	div.container-kontak div.card-kontak div.kontak-person{
		line-height: 2rem;
		margin-top: 1.3rem;
	}

	div.container-kontak div.card-kontak h1{
		margin-bottom: 0.2rem;
		font-size: 2.4rem;
	}

	div.container-kontak div.card-kontak P{
		font-size: 1.6rem;
		text-shadow: 1px 1px 2px white;
		line-height: 2rem;
	}

	div.container-kontak div.card-kontak div.kontak-person p{
		line-height: 2.8rem;
		display: block;
		font-size: 1.6rem;
	}

	div.container-kontak div.card-kontak div.kontak-person p.lokasi{
		
		line-height: 2.3rem;
	}

	/*STYLE UNTUK HALAMAN MOTEKAR DASAR*/

	div.container-card-motekar{
		width: 36rem;
		margin: 0 auto;
		padding-bottom: 0.5rem;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: 0.5rem 2%;


	}

	div.container-card-motekar div.card-motekar-satu{

		margin-top: 1rem;
		flex-direction: column;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		
	}

	div.container-card-motekar div.card-mini-satu{

		padding: 2.5rem;
		
	}

	div.container-card-motekar div.card-motekar-satu h1{

		font-size: 2.3rem;
		
	}

	div.container-card-motekar div.card-motekar-satu p{

		font-size: 1.4rem;
		line-height: 2.3rem;
		
	}

	div.container-card-motekar div.card-motekar-satu div.card-mini-satu p{

		font-size: 1.3rem;
		line-height: 2rem;
		
	}

	div.container-card-motekar div.card-motekar-satu div.card-mini-satu h4{

		font-size: 1.3rem;
		line-height: 2rem;
		
	}

	div.container-card-motekar div.card-motekar-satu div.card-mini-satu ul li{

		font-size: 1.3rem;
		line-height: 2rem;
		color: rgba(0, 0, 0, 0.7);
		
	}


	div.container-card-motekar form{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 3rem;
		padding: 2rem;
	}

	div.container-card-motekar form label{
		font-size: 1.3rem;
	}

	div.container-card-motekar form select{
		padding: 1.3rem;
		font-size: 1.3rem;
		margin-bottom: 1.3rem;
		
	}

	div.container-card-motekar form button{
		padding: 1.6rem;
		font-size: 1.4rem;
		
	}
	/*TUTUP*/


	/*STYLE NASKAH DETAL*/

	div.container-detail-naskah div.content-satu-detail{
		line-height: 2rem;
	}

	div.container-detail-naskah div.content-satu-detail ol li{
		font-size: 1.5rem;

	}

	div.container-detail-naskah div.content-satu-detail a.kembaliBtn{
		font-size: 1.4rem;
		position: unset;
		width: 8rem;
		text-align: center;
		margin-bottom: 2rem;
		display: block;

	}

	div.container-detail-naskah div.content-satu-detail b{
		font-size: 1.4rem;
		color: rgba(0, 0, 0, 0.8);

	}

	div.container-detail-naskah div.content-satu-detail p{
		font-size: 1.4rem;
		color: rgba(0, 0, 0, 0.8);
	} 

	div.container-detail-naskah div.content-satu-detail ol p.email_detail{
		font-size: 1.3rem;
		
	}

	div.container-detail-naskah div.content-satu-detail a, i.fa{
		font-size: 1.3rem;
		
	}



	/*STYLE UNTUK HALAMAN DAFTAR ALAMAT*/
	div.container-penagihan{

		padding: 2rem;
		box-sizing: border-box;
	}

	div.container-penagihan h3{
		margin-bottom: 1.4rem;
		font-size: 1.5rem;
	}

	div.container-penagihan form{
		display: flex;
		margin: 0.5rem auto;
		flex-wrap: wrap;
		padding: unset;
		border: none;
	}

	div.container-penagihan form span{
		font-size: 1.3rem;
	}

	div.container-card{
		flex-direction: column;
	}

	div.container-penagihan form div.container-card  div.daftar_nama1{
		width: 100%;
	}

	div.container-penagihan form div.container-card  div.daftar_nama2{
		width: 100%;
	}


	div.container-penagihan form input{
		
		padding: 1.2rem;
		font-size: 1.6rem;

		
	}

	div.container-penagihan form button{
		margin-top: 2rem;
		padding: 1.4rem;
		font-size: 1.7rem;
		width: 100%;
		
	}


	div.container-penagihan form select{
		padding: 1.2rem;
		font-size: 1.6rem;

	}

	div.container-penagihan form label{
		
		font-size: 1.4rem;
		margin-top: 0.7rem;

	}


	div.galeri_img{
		width: 28rem;
	}

	div.galeri_img img{
		width: 27vh;

	}

	section.hero-img-tentang2{
		width: 30rem;
		margin: 0 auto;
	}
	

}