/* FRONT STYLE  */

/* FONTS  */

@font-face {
    font-family: gothic_cond;
    src : url(../fonts/Franklin-Gothic-Medium-Cond-Regular.ttf);
}

/*@font-face {
    font-family: font_roboto;
    src : url(../../fonts/RobotoCondensed-Bold.ttf);
}*/

body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}

/* Navbar */

.navbar, .nav-link {
	font-size: 10pt;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    color: black;
    font-weight: bolder;
}

.navbar, .nav-kepeg {
	font-size: 9pt;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    color: black;
    font-weight: bolder;
}

.navbar {
    background-color: transparent;
}

.navbar-tengah {
	background-color: #eaeaea;
	/*margin-bottom: 10px;*/
}

.navbar-tengah.fixed-top {
	background-color: #8ed796 !important;
	transition: background-color 400ms linear;
}

.dropdown-item {
	font-size: 9pt;
	font-family: 'Roboto', sans-serif;
}


/* navbar */

.dropdown {
   display: flex;
   color: white;
   position: relative;
   font-size: 10px;
   perspective: 1000px;
   z-index: 100;
   
}

 .dropdown_menu {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   perspective: 1000px;
   z-index: -1; 
}

.dropdown_menu a {
    display: none;
    color: white;
    background-color: #34495e;
    padding: 10px 20px;
    font-size: 16px;
    opacity: 0;
}

.dropdown_menu a:hover {
	background-color: #2980b9;
}

.dropdown:hover .dropdown_menu--animated {
    display: inline-block;
}
.dropdown_menu--animated {
    display: none;
}
.dropdown_menu--animated a {
      display: inline-block;
      opacity: 5;
}

.dropdown_menu-6 {
    animation: growDown 700ms ease-in-out forwards;
    transform-origin: top center;
}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}

.dropdown-item:hover {
	background-color: #71bd78;
}

/* dropdown */


/* Navbar */

/* header  */

#sisi-text {
	padding: 2px;
}

/*#sisi-gambar > img {
	width: auto;
	height: 400px;
}*/

/* carousel  */

#carousel-depan {
	height: 80vh;
	/*background-color: #e8e8e8;*/
	background-image: url('../img/latar-belakang-carousel.png');
	background-position: center center;
    background-size: cover;
}

.carousel {
	border-radius: 10px;
	padding-top: 0.5em;
}

.carousel-item {
    height: 75vh;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 10px;
}

.carousel-item > img {
	height: 75vh;
	border-radius: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 60px;
  width: 60px;
  outline: white;
  background-size: 100%, 100%;
  border-radius: 30%;
  border: 1px solid white;
  background-image: none;
}

.carousel-control-next-icon:after
{
  align-items: center;
  font-size: 20px;
  color: black;
}

.carousel-control-prev-icon:after {
	align-items: center;
  	font-size: 20px;
  	color: black;
}

.carousel-control-prev-icon {
	margin: auto;
	padding: 13px;
	font-size: 16pt;
}

.carousel-control-next-icon {
	margin: auto;
	padding: 13px;
	font-size: 16pt;
}

.carousel-control-prev-icon:hover {
	transform: scale(1.0);
	background: linear-gradient(to right, #bdc3c7, #2c3e50);
}

.carousel-control-next-icon:hover {
	background: linear-gradient(to right, #43c6ac, #191654);
}

.carousel-indicators {
    margin-bottom: 20px;
}

.carousel-indicators li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border : 1px solid black;
}

.carousel-indicators .active {
    background-color: black;
}

/* carousel  */

.h1_depan {
	font-size: 35pt;
	font-family: font_roboto;
	text-align: justify;
	color: black;
}

.text-depan {
	font-size: 15pt;
	font-family: font_roboto;
	text-align: justify;
	color: black;
}



/* header  */

label {
	font-size: 10pt;
}

/* SECTION HEADER  */

#header-depan {
	width: 100%;
	height: 500px;
	border-radius: 0 0 95% 95% / 8%;
	text-align: center;
	position: relative;
	overflow: hidden;
}

#header-depan .overlay {
	width: 100%;
	height: 100%;
	padding: 3px;
	/*background-image: linear-gradient( 150deg, #e8e7e3 10%, #e8e6dc 100%);*/
	/*background-image: linear-gradient(to right, #2c3e50, #4ca1af);*/
	background-color: whitesmoke;
}

/* SECTION SAMBUTAN  */

#sambutan {
	height: 400px;
	background-color: #fafcfb;
}

#survei {
	height: 10000px;
	background-color: #fafcfb;
}



/* HEADER  */

.text-header {
	margin-top: 15px;
	font-family: gothic_cond;
	font-weight: bolder;
	font-size: 25pt;
	text-align: center;
	text-transform: uppercase;
	text-decoration-line: underline;
}

/* TEXT  */

#text-sambutan {
	text-align: justify;
	font-size: 10pt;
	font-family: 'Roboto Mono', monospace;
	margin-top: 5px;
}

/* CARD */

/* SAMBUTAN */

.card-sambutan{
	margin-top: 5px;
}

/* GAMBAR  */

#gambar-sambutan {
	width: 100%;
	height: 300px;
	margin-top: 5px;
}

/* SECTION BERITA */

#berita {
	height: 2000px;
	background-color: #e8e8e8;
	background-image: url('../img/5570863.jpg');
	background-position: center center;
    background-size: cover;
}

/* CARD BERITA */

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem; 
}

.card-img-top {
  width: 100%;
  height: 280px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-top-front {
  width: 100%;
  height: 150px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-top-front-layanan {
  width: 100%;
  height: 200px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-pimpinan-front {
  width: 100%;
  height: 300px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-front-layanan {
  width: 100%;
  height: 250px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-front-struktur {
  width: 100%;
  height: 600px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-top-layanan {
  width: 100%;
  height: 400px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card-img-top-sambutan {
  width: 100%;
  height: 250px;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px); 
}

.card:hover {
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
}

/* text-judul */

.text-judul {
    font-size: 11pt;
    font-family: gothic_cond;
    color: black;
}

/* text- */

.text-jadwal {
	font-size: 10pt;
    font-family: 'Roboto Mono', monospace;
}

/* CARD-PENGUMUMAN */

.card-pengumuman {
	max-height: 300px;
	overflow-x: scroll;
}

.card-galeri {
	max-height: 550px;
	overflow-x: scroll;
}

.card-kepegawaian {
	max-height: 800px;
}

.div-tabel-duk{
    max-height: 400px;
	overflow-x: scroll;
}

.div-tabel-kgb{
    max-height: 400px;
	overflow-x: scroll;   
}

/* JADWAL DAN BERAKHLAK */

#berakhlak {
    width:400px; height:100px;
}
/* SECTION LINK TERKAIT */

#link-terkait {
	height: 400px;
	background-color: #fafcfb;
}

/* card-link */

.card-link {
	text-align: center;
	margin-bottom: 5px;
}

/*.card-link, .card-body {
	padding: 5px;
	text-align: center;
}*/

/*.card-link img {
	width: 80px; height: 80px;
	margin-right: 5px;
}*/

/* section detail berita dan informasi */

#halaman-detail {
	height: 1300px;
}

#halaman-sipbetul {
	height: 1100px;
}

#halaman-galeri {
	height: 700px;
}

#halaman-standar-pelayanan {
	height: 1500px;
}

#publikasi-perkara{
    width:100%;
    height:800px;
}

.detail-link {
	margin-top: 5px;
	font-size: 10pt;
    font-family: 'Roboto Mono', monospace;
    color: black;
}

.detail-link a {
	color: black;
}

.detail-link .detail-active {
	font-weight: bold;
	color: red;
}

.detail-judul{
	font-size: 12pt;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
	text-align: center;
	margin-bottom: 3px;
}

.detail-gambar {
    height: 90vh;
    min-height: 500px;
    width: 820px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    padding: 3px;
}

.detail-gambar-layanan {
    height: 120vh;
    min-height: 650px;
    width: 1110px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    padding: 3px;
}

.detail-gambar-1 {
    height: 80vh;
    min-height: 550px;
    width: auto;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    padding: 3px;
}

.detail-gambar-standar {
    height: 100vh;
    min-height: 650px;
    width: 900px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    padding: 3px;
}

.detail-gambar-perintah {
    height: 100vh;
    min-height: 650px;
    width: 680px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    padding: 3px;
}

.detail-content-perintah {
    max-height: 800px;
	overflow-x: scroll;
	font-size: 12pt;
	text-align: justify;
	margin-top: 3px;
	font-family: 'Roboto Mono', monospace;
}

.detail-berita {
    max-height: 450px;
	overflow-x: scroll;
	font-size: 12pt;
	text-align: justify;
	margin-top: 3px;
	font-family: 'Roboto Mono', monospace;
}

.detail-standar-layanan {
    max-height: 1400px;
	overflow-x: scroll;
	font-size: 12pt;
	text-align: justify;
	margin-top: 3px;
	font-family: 'Roboto Mono', monospace;
}

.detail-top-related {
	font-size: 12pt;
	text-align: center;
	margin-top: 5px;
	font-weight: bolder;
	font-family: 'Roboto Mono', monospace;
}

.detail-related {
	font-size: 10pt;
	text-align: justify;
	margin-top: 2px;
	font-family: 'Roboto Mono', monospace;
}

/* end section detail */

/* section berita full */

#halaman-berita {
	height: 1550px;
}

.berita {
	margin-bottom: 8px;
}

.berita-full {
	align-items: center;
}

.berita-full img {
	align-items: center;
	margin-top: 5px;
	margin-left: 10px;
}

.pimpinan-1 {
	align-items: center;
}

#videokantor {
    width:465px;
    height:200px;
}

/* end section berita full */

/* section sambutan */

#halaman-sambutan {
	height: 800px;
}

#halaman-perintah {
	height: 1000px;
}

.sambutan img {
	height: 400px;
}

.alert {
	font-family: 'Roboto Mono', monospace;
	font-size: 11pt;
}

/* end section sambutan */

/* section kejaksaan */

#halaman-kejaksaan {
	height: 1500px;
}

#halaman-layanan-kejaksaan {
	height: 1000px;
}

/* halaman-organisasi */

#halaman-organisasi {
	height: 800px;
}

/* end halaman-organisasi */

/* halaman-produk-hukum */

#halaman-produk-hukum {
	height: 1100px;
}

/* end halaman-produk-hukum */

/* halaman faq */

#halaman-faq {
	height: 700px;
	background-image: url('../img/faq - 1.png');
	background-position: center center;
    background-size: cover;
}

/* halaman faq */

/* halaman-lapdumas */

#halaman-lapdumas {
	height: 750px;
}

/* end halaman-lapdumas */

/* halaman-produk-hukum */

#halaman-digital-library {
	height: 1100px;
}

/* end halaman-produk-hukum */

/* section-tabel */

.tabel-depan thead {
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	font-size: 12pt;
}

.tabel-depan td {
	text-align: justify;
	font-family: 'Roboto Mono', monospace;
	font-size: 11pt;
}

.tabel-depan-kgb thead {
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	font-size: 12pt;
}

.tabel-depan-kgb td {
	text-align: justify;
	font-family: 'Roboto Mono', monospace;
	font-size: 11pt;
}

/* end section-tabel */

/* section kontak */

#halaman-kontak {
	height: 1050px;
}

span {
	font-family: 'Roboto Mono', monospace;
	font-size: 10pt;
}

/* end section kontak */

/* galeri */

.galeridepan {
	margin-bottom: 5px;
}

.galeridepan:hover {
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
}

/* end of galeri */

/* back to top */

.btn-lingkaran{
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 20px;
    font-weight:bold;
    text-align: center;
    line-height: 20px;
    background-color: #a1ea80;
    color: #020202;
    cursor: pointer;
    border: 0;
    text-decoration: none;
}

#float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

#back-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99999999;
    width: 50px;
    height: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    background-color: #a1ea80;
    color: #020202;
    cursor: pointer;
    border: 0;
    border-radius: 30px;
    text-decoration: none;
}

#back-to-top:hover {
    background-color: #53c121;
}

/* back to top */

/* footer */

/* footer */

footer {
    display: block;
}

.footer-temp {
  font-size: 12pt;
  /*background: linear-gradient(to right, #62e148, #f0a900);*/
  background-image: url('../img/footer-web-3.jpg');
  background-position: center center;
  background-size: cover;
  /*background-repeat: no-repeat;*/
  padding: 2em 0;
  color:black;
}

.footer-temp span {
    color: black;
    font-size: 12pt;
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
}

.footer-temp h6 {
	color: black;
    font-size: 12pt;
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
    text-decoration-line: underline;
}

.footer-temp p {
	color: black;
    font-size: 10pt;
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
}

.footer-temp, a {
	color: black;
    font-size: 10pt;
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
}

.footer-temp td {
	color: black;
    font-size: 10pt;
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
}

hr {
	width: 100% !important;
	border: 2px solid black;
}

.icon-footer{
    height:30px;
    width:30px;
    font-size:30pt;
    font-weight:bold;
    padding:8px;
    margin:3px;
    text-align:center;
    color:black;
    background:transparent;
    border:1px solid black;
    border-radius:50%;
}

#icon-footer-fb:hover {
    background:#7099db;
}

#icon-footer-ig:hover {
    background:#d9144f;
}

#icon-footer-yt:hover {
    background:#e81c1c;
}


/* STYLE FOR SMARTPHONE */

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

	body {
		margin: 0;
		padding: 0;
		width: 100%;
		overflow-x: hidden;
	}
	
	/* carousel */
	
	#carousel-depan {
    	height: 55vh;
    	/*background-color: #e8e8e8;*/
    	background-image: url('../img/latar-belakang-carousel.png');
    	background-position: center center;
        background-size: cover;
    }
	
	
	.carousel-item {
        height: 50vh;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
    .carousel-item > img {
    	height: 50vh;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 30px;
      width: 30px;
      outline: white;
      background-size: 100%, 100%;
      border-radius: 15%;
      border: 1px solid white;
      background-image: none;
    }
    
    .carousel-control-next-icon:after
    {
      align-items: center;
      font-size: 10px;
      color: black;
    }
    
    .carousel-control-prev-icon:after {
    	align-items: center;
      	font-size: 10px;
      	color: black;
    }
    
    .carousel-control-prev-icon {
    	margin: auto;
    	padding: 7px;
    	font-size: 8pt;
    }
    
    .carousel-control-next-icon {
    	margin: auto;
    	padding: 7px;
    	font-size: 8pt;
    }
	
	
	/* end-carousel */
	
	/* text */
	
	.text-header {
    	margin-top: 10px;
    	font-family: gothic_cond;
    	font-weight: bolder;
    	font-size: 15pt;
    	text-align: center;
    	text-transform: uppercase;
    	text-decoration-line: underline;
    }
	
	/* text */

	#sambutan {
		height: 1050px;
		background-color: #fafcfb;
	}
	
	#survei {
		height: 10000px;
		background-color: #fafcfb;
	}


	#berita {
		height: 5200px;
		background-color: #fafcfb;
	}

	#link-terkait {
		height: 1200px;
		background-color: #fafcfb;
	}
	
	#berakhlak {
        width:280px; height:100px;
    }
    
    #halaman-berita {
    	height: 4700px;
    }
	
	#halaman-sambutan {
    	height: 1500px;
    }
    
    #halaman-perintah {
    	height: 1200px;
    }

	#halaman-detail {
		height: 2000px;
	}
	
	#halaman-sipbetul {
		height: 1250px;
	}

	#halaman-zona {
		height: 2000px;
	}

    #halaman-produk-hukum {
    	height: 2200px;
    }
    
    #halaman-digital-library {
    	height: 1750px;
    }
    
    #halaman-standar-pelayanan {
		height: 2000px;
	}

	.card-link {
		margin-bottom: 5px;
	}

	.card-link, .card-body {
		padding: 5px;
	}

	.card-link img {
		width: auto; height: 120px;
	}
	
	.card-link-layanan img {
		width: auto; height: 150px;
	}
	
	.card-link-struktur img {
		width: auto; height: 600px;
	}
	
	.card-link-pimpinan img {
		width: auto; height: 250px;
	}
	
	.card-terkait{
	    margin-top:20px;
	}

	/* detail-gambar */

	.detail-gambar {
	    height: 50vh;
	    min-height: 400px;
	    width: 330px;
	    background: no-repeat center center scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
	    text-align: center;
	    padding: 3px;
	    border-radius: 10px;
	}
	
	.detail-gambar-standar {
        height: 40vh;
        min-height: 350px;
        width: 300px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
        padding: 3px;
    }
    
    .detail-gambar-layanan {
	    height: 110vh;
	    min-height: 600px;
	    width: 320px;
	    background: no-repeat center center scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
	    text-align: center;
	    padding: 3px;
	}
	
	.card-img-pimpinan-front {
      width: 100%;
      height: 450px;
      border-top-left-radius: calc(0.25rem - 1px);
      border-top-right-radius: calc(0.25rem - 1px); 
    }
    
    .detail-gambar-perintah {
        height: 70vh;
        min-height: 500px;
        width: 400px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
        padding: 3px;
    }
    
    .detail-content-perintah {
        max-height: 650px;
    	overflow-x: scroll;
    	font-size: 12pt;
    	text-align: justify;
    	margin-top: 3px;
    	font-family: 'Roboto Mono', monospace;
    }
    
    #videokantor {
        width:353px;
        height:200px;
    }
    
    #back-to-top {
        position: fixed;
        bottom: 15px;
        right: 15px;
        z-index: 99999999;
        width: 50px;
        height: 50px;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        background-color: #a1ea80;
        color: #020202;
        cursor: pointer;
        border: 0;
        border-radius: 30px;
        text-decoration: none;
    }
    
    #back-to-top:hover {
        background-color: #53c121;
    }
    
    .footer-temp span {
        color: black;
        font-size: 8pt;
        font-weight: bold;
    }

    hr {
		width: 80% !important;
		border: 2px solid black;
	}

}