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

}

a{
	text-decoration: none;
	color: rgba(34, 54, 69, 7);
}

a:hover{

	color: #052c65;
	text-decoration: none;


}



body {
	background-color: #ecf0fa;
	font-family: ProximaNova, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.625;
	margin: 0;
	color: #5a5a5a;
	
}

.img-post{

	max-width: 500px;
	width: 100%;
	
}

 .main-container{

	margin-left: auto;
	margin-right: auto;
	/* padding-left: 5px;
	padding-right: 5px; */


}

.navbar-brand{
	color: blue;
	font-size: 2.5rem;
}

.navbar-toggler{

	background: #0088cc;
	border: none;
	padding: 10px 6px;
	outline: none;

}

.navbar-custom{
	background: #fff;
}



.navbar-toggler span{

	display: block;
	width: 22px;
	height: 2px;
	border: 1px;
	background: #f4f5f6;

}

.navbar-toggler span + span {
	margin-top: 4px;
	width: 18px;
	margin-left: 4px;
}


.navbar-toggler span + span + span {

	width: 10px;
	margin-left: 10px;

}



.navbar-expand-lg .navbar-nav .nav-link{
	
	position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link:hover{
	border-top: 4px solid #0088cc ;
}

.navbar-expand-lg .navbar-nav .nav-link.active{
	border-top: 4px solid #0088cc ;
	color: #0088cc;
}











/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
  
  
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
	margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
	bottom: 3rem;
	z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
	height: 32rem;
  }
  .carousel-item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
  }
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
	margin-bottom: 1.5rem;
	text-align: center;
  }
  .marketing h2 {
	font-weight: 400;
  }
  /* rtl:begin:ignore */
  .marketing .col-lg-4 p {
	margin-right: .75rem;
	margin-left: .75rem;
  }
  /* rtl:end:ignore */
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
	margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  .featurette-heading {
	font-weight: 300;
	line-height: 1;
	/* rtl:remove */
	letter-spacing: -.05rem;
  }
  
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
	/* Bump up size of carousel content */
	.carousel-caption p {
	  margin-bottom: 1.25rem;
	  font-size: 1.25rem;
	  line-height: 1.4;
	}
  
	.featurette-heading {
	  font-size: 50px;
	}
  }
  
  @media (min-width: 62em) {
	.featurette-heading {
	  margin-top: 7rem;
	}
  }
  






.card{
	border: none;
}

  .card-body{
	
	border: none;
	
  }



  .nav-bottom{
	color: #ffffff;
	border-left: 1px solid #f4f5f6;
	border-right: 1px solid #f4f5f6;
	border-bottom: 1px solid #f4f5f6;


  }

  .nav-bottom:hover{
	background-color: #337ab7;
	color: #ffffff;
	text-decoration: none;

  }

.navbar-menu{
	padding: 0px;
}



.container-menu{


	padding: 0px;

}




.blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}




.title-menu-1{

	font-weight: bold;
	font-size: 14px;
	color: #f4f5f6;


}

.title-menu-2{

	font-size: 13px;
	color: #f4f5f6;
	
}




.page-link{
	color: #052c65;
}


#custom-paging-next{
	color: #f9f9f9;
	background-color: #052c65;
}


#custom-paging-previous{
	color: #f9f9f9;
	background-color: #343a40;
}



.text-link-berita{

	color: #28a745;
	text-decoration: none;

}



.text-link-berita:hover{

	color: #1c6e2f;
	text-decoration: none;

}



.detail-berita{
	font-size: 13px;
}


.jumbotron{

	
	background-image: url('https://wallpaperaccess.com/full/2189936.jpg');
	background-size: cover;
	
}



.bg-blue{
	background-color: #052c65;
}
.bg-black{
	background-color: #1d1d1d;
}




.menu-home img{

height: 100px;
width: 100px;

}
.menu-home img:hover{

opacity: 50%;

}
.menu-home a{

	text-decoration: none;
	color: inherit;
	
}
.title-menu{
	font-size: 15px;
	line-height: 20px;
}





.zoom-effect {  
	position: relative;
	width: 100%;
	height: 200px;
	margin: 0 auto;
	overflow: hidden;  
  }
   
  .kotak {
	position: absolute;
	top: 0;
	left: 0;
	
  }
   
  .kotak img {
	-webkit-transition: 0.4s ease;
	transition: 0.4s ease;
	width: 700px;
  }
   
  .zoom-effect:hover .kotak img {
	-webkit-transform: scale(1.08);
	transform: scale(1.08);
  }



/* 
  .table-responsive{
	  display: table;
  } */



.lg-backdrop.in {
    opacity: 0.85;
}
.fixed-size.lg-outer .lg-inner {
  background-color: #FFF;
}
.fixed-size.lg-outer .lg-sub-html {
  position: absolute;
  text-align: left;
}
.fixed-size.lg-outer .lg-toolbar {
  background-color: transparent;
  height: 0;
}
.fixed-size.lg-outer .lg-toolbar .lg-icon {
  color: #FFF;
}
.fixed-size.lg-outer .lg-img-wrap {
  padding: 12px;
}


.wrapper {
	position: relative;
	overflow: hidden;
	height: 100%;
  }
  
  .wrapper:after {
	content: '';
	display: block;
	padding-top: 100%;
  }
  
  .wrapper img {
	width: auto;
	height: 100%;
	max-width: none;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
  }




  .card-list-berita:hover{
	  background-color: #f5f5f5;
  }


  .inner{
	  overflow: hidden;
  }

  .inner img{

	transition: all 1.5s ease;

  }
  .inner:hover img{
	transform: scale(1.5);
  }

  .resize{
	  height: 300px;
  }




  .img-pengaduan{
	  max-width: 400px;
	  max-height: 400px;
	  width: auto;
	  height: auto;
	  display: block;
  }


  .post-image img{
	max-width: 100%;
    height: auto !important;
  }

  .post-image table, td,th,tr{
	max-width: 100%;
    height: auto !important;
  }





  .message{

	display: flex;
	justify-content: center;
	align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
	width: 400px;
	height: 260px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px;
	border-radius: 20px;
    z-index: 1001;
	transition: all;
  }

  .message-content{
	font-size: medium;
	padding: 10px;
	text-align: center;
	position: relative;
  }

  .message-content  span{
	font-weight: bold;
	color: #1c6e2f;
  }
  
  .close{
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 24px;
	cursor: pointer;

  }

  .modal-background{
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
  }