.bold{

  font-weight: bold;

}



.normal{

  font-weight: normal !important;

}



.grey{

	color: #464F57;

}



.mt-3{

	margin-top: 3px;

}



.mt-20{

  margin-top: 20px;

}



.color-primary-blue{

  background-color: #16498B !important;

}



.main-header-top{

	border-bottom: 2px solid #0B66D2;

}



.mySlides {display: none}

img {vertical-align: middle;}



/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;



}



/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}



/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



/* Caption text */

.slidetext {

  color: #f2f2f2;

  font-size: 18px;

  padding: 8px 12px;

  position: absolute;

  bottom: 20px;

  width: 100%;

  text-align: center;

  background: #002C60;

  opacity: 0.8;

  height: 80px;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 10px;

  width: 10px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.activedot, .dot:hover {

  background-color: #AD7D25;

}



/* Fading animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



/* On smaller screens, decrease text size */

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

  .prev, .next,.text {font-size: 11px}

}



.informasi{

	margin-bottom: 20px !important;

}



.informasi li{

	margin-left: 15px;

}





.pr-0{

	padding-right: 0px;

}



.mb-10{

	margin-bottom: 10px;

}



.mb-20{

  margin-bottom: 20px;

}



.mt-8{

	margin-top: 8px;

}



.p-0{

	padding: 0 !important;

}



.p-10{

	padding: 10px !important;

}



.color-primary {

	color: #464F57 !important;

}



.color-secondary{

	color: #AD7D25 !important;

}



.text-primary-blue{

  color: #16498B !important;

}



.text-primary-blue{

  color: #16498B !important;

}





.img-gallery{

	width: 100%;

	margin-top: 10px;

}



.btn-default{

	font-weight: bold;

	border: 1px solid #16498B;

	border-radius: 20px;

	padding: 10px 20px 10px 20px;

}



.btn-default:hover{

	border: 1px solid #AD7D25;

}



.testi-head{

	padding: 0 !important;

}



.article-head{

  border: 1px solid #F2F3F5;

  padding: 20px;

}



.widget-blue{

	background: #16498B;

    padding: 25px;

    color: #FFF;

    font-weight: 200;

    font-size: 14px;

}



.widget-title-line{

  border-bottom: 2px solid #AFC2D4;

}



.widget-title-line:after {

  content: "";

  border-bottom: 4px solid #FFD557;

  width: 65px;

  display: block;

}



.brown-button{

  background-color: #FFD557;

  color: #464F57;

  padding: 7px 25px 7px 25px;

  font-weight: bold;

}



.nav-active{

  font-weight: bold;

}



.text-white{

  color: #FFF !important;

}



.fs-11{

  font-size: 11px !important;

}

.fs-12{

  font-size: 12px !important;

}

.fs-14{

    font-size: 14px !important;

}

.fs-16{

  font-size: 16px !important;

}

.fs-17{

  font-size: 17px !important;

}



.fs-18{

  font-size: 18px !important;

}



.fs-22{

  font-size: 22px !important;

}



.fs-24{

  font-size: 24px !important;

}



.cut-corner{

  position: relative;

}



.cut-corner:before{

  content: '';

  position: absolute;

  bottom: 0;

  right: 0;

  border-bottom: 50px solid white;

  border-left: 50px solid #16498B;

  width: 0;

}



.page-title-corner-cut{

    background-color: #16498B;

    padding: 10px;

    padding-left: 25px;

    font-size: 24px;

    color: #FFF;

    height: 60px;

}



.page-title-corner-cut:before{

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    border-bottom: 60px solid white;

    border-left: 70px solid #16498B;

    width: 0;



}



.sidebar{

  list-style: none;

  margin-right: 25px;

}



.active-breadcrumbs{

  color: #464F57;

}



.sidebar li{

  border-bottom: 1px solid #0D63C7;

  padding:10px;

}



.newest-box{

  margin-top: 20px;

  background-color: #F3F9FE;

  padding: 30px;

  border-bottom: 7px solid #16498B;

}



.custom-nav-slick{

    padding-left: 10px;

    padding-right: 10px;

    background-color: #FFF;

    color: #849FB8;

    border: 1.5px solid #849FB8;

    margin-left: 10px;

}



.project-grid{

    margin-top: 20px;

}



.project-grid .inner{

  padding: 12px;

  border: 1px solid #ccc;

  height: 320px;

}



.project-item{

  margin-top: 30px;

}



.site-footer{

  border-top: 5px solid #E58C00;

}



.mega-menu, .mega-menu >ul {

  position: relative;

  /*background-color: #333;

  height: 50px;*/

}

.mega-menu >ul >li {

  display: inline-block;

  /*padding:15.5px 0;*/

  /*overflow: hidden;*/

}

.mega-menu >ul >li >a {

  padding:17px;

  color:#eee;

  text-decoration: none;

}

.mega-menu >ul >li:hover {

  background-color: #FFF;

  -webkit-transition:ease 0.3s;

}

.mega-menu .menu-detail {

  height: 0;

  visibility: hidden;

  opacity: 0;

  position: absolute;

  left: -250px;

}

.mega-menu >ul >li:hover >div.menu-detail {

  opacity: 1;

  height: 300px;

  visibility: visible;

  top:50px;

  /*right:0;*/

  left: -250px;

  z-index: 99;

  background-color: #FFF;

  color:#fff;

  -webkit-transition:height 1s;

  -moz-transition:height 1s;

  transition:height 1s;

  border-top:3px solid #3399dd;

  overflow: hidden;

}





.mega-menu >ul >li:hover >div.menu-detail .links ul {

  visibility: visible;



}





.menu-detail .section {

  padding:20px;

}

@media (min-width: 768px){

  .menu-detail.profile .section-1 {

    width:30%;

    float: left;

  }

  .menu-detail.profile .links {

    width:35%;

    float: left;

  }

  .menu-detail.profile .social-media {

    width:35%;

    float: left;

  }

  .menu-detail.categories .seo {

    width:33.33%;

    float: left;

  }

  .menu-detail.categories .copywrite {

    width:33.33%;

    float: left;

  }

  .menu-detail.categories .im {

    width:33.33%;

    float: left;

  }



}



.menu-detail .links ul {

    left: auto;

    top: auto;

    visibility: hidden;

    opacity: inherit;

    border: none;

    background: none;

    box-shadow: none;

    width: auto;

}



.menu-detail .links ul li {

  display: block;

}

.menu-detail .links ul li a{

  color:#3399dd;

  text-decoration: none;

  text-align: right;

}

.menu-detail .links ul li a:hover {

  color:#2c73cc;

}



.menu-detail .social-media ul li {

  display: block;

  margin-bottom: 5px;

}

.menu-detail .social-media ul li a{

  color:#fff;

  text-decoration: none;

  display: block;

  width: 100%;

  padding:7px 10px;

}

.social-media li.facebook {

  background-color: #48649f;

}

.social-media li.twitter {

  background-color: #3399dd;

}

.social-media li.googleplus {

  background-color: #cc3333;

}

.social-media li.linkedin {

  background-color: #2c73cc;

}

.social-media li.dribbble {

  background-color: #dd3355;

}





.menu-detail.categories .section h3 a{

  color:#fff;

}

.menu-detail.categories .section ul li {

  padding:10px 0;

  display: block;

}

.menu-detail.categories .section ul li a{

  color:#3399dd;

  text-decoration: none;

}

.menu-detail.categories .section ul li a:hover {

  color:#2c73cc;

}

.client-img{
  width: 100%; 
}

.inner{
  height: auto !important;
}

.content-text p{
  text-align: justify;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext { 
  visibility: hidden;
  width: 140px;
  font-size: 14px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.hover_underline:hover{
  text-decoration: underline;
}