@charset "utf-8";
/*global*/
html { height: 100% !important;}
body {
	font: 1em / 1.4em 'Open Sans', Helvetica, Arial, sans-serif;
	
	height: 100% !important;background-color: #fff;}
/*boostrap-ovr*/
.navbar-light {background-color: #fff !important;}
.navbar {margin-right: 0px;padding: 0px; border-bottom: thin solid #F7F7F7;}
.navbar-shadow {box-shadow: 0px 2px 17px -3px rgba(58,91,143,0.72);
-webkit-box-shadow: 0px 2px 17px -3px rgba(58,91,143,0.72);
-moz-box-shadow: 0px 2px 17px -3px rgba(58,91,143,0.72);}
.btn {border-top-left-radius: 0px; border-bottom-left-radius: 0px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.fa-caret-right {margin-right: 5px;}
/*element*/
.logo-area {padding:15px !important;}
.logo-area-sarana {width: 200px;  padding: 20px 0px;}
.logo-area-sarana-scrolled {width: 160px;}
.title-area-sarana {padding: 10px 20px;margin-top: -66px;background-color: #fcfcfc;display: table; z-index: 1;position: relative; border-top-left-radius: 10px;border-top-right-radius: 10px;}
.banner-area-sarana {height: 80%; background-color: #fff; background-image: url("../images/og-pic.jpg");}

.intro-teaser-sarana {}
.sarana-wrapper {padding-top: 60px; padding-bottom: 60px;}
.section-wrapper-sarana {background: url("../images/sarana-Asset 5accent.png"); background-repeat: no-repeat;background-size: auto; background-position: left bottom; border-bottom: solid 10px #e7e7e7; background-color: #fcfcfc;}
.wrapper-notice {padding: 35px 35px; border: dashed thin #ccc;background-color: #fff; border-top-left-radius: 25px; border-bottom-left-radius: 25px;}
.section-wrapper-sarana2 {background: url("../images/accent-services.jpg"); background-size: cover;}
.section-wrapper-sarana3 {background: url("../images/accent-case.jpg"); background-size: cover;}
.post-wrapper-sarana {aspect-ratio: 16 / 9;background-color: #333; background-image: url("../images/sarana-Asset 6accent.png"); background-size: auto; background-repeat: no-repeat;background-position: left bottom; border-top-right-radius: 25px;border-bottom-right-radius: 25px;}
.post-content-sarana { 
	 padding: 20px; height: 100%; display: flex;
  justify-content: center;
  align-items: center;}
.post-wrapper-sarana:hover {background-color: #be1e2d; }
.section-footer {background: rgb(136,136,136);
background: linear-gradient(14deg, rgba(136,136,136,1) 20%, rgba(199,199,199,1) 54%, rgba(235,235,235,1) 100%);
    bottom: 0;
    z-index: -1;
}
.iso-footer-wrapper {width: 250px; margin-bottom: 20px;}
.footer-sarana-ul {list-style-type: none;}
.icon-services {margin-bottom: 15px;}
.sidebar-sarana {margin-top: -95px; position: sticky; top: 150px;}
.jejak-sarana {margin-bottom: 25px;}
.banner-area-sarana-inside {height: 60%; background-size: cover; background-repeat: no-repeat;  background-color: #fff;}
/*typo*/
.droid {font-family: droid-serif, serif;}
.p-intro {font-size: 20px;}
a.services-link:hover {font-weight: 600;text-decoration: none;  }
h3 {font-size: 22px !important;}
h4 {font-size: 19px; font-weight: 200;}
.title-banner  {font-size: 45px;font-weight: 800;}
/*color*/
.blue-sarana {color: #225894;}
.red-sarana {color: #be1e2d;}
.shiftnav-toggle-button {
  
  background: #fff !important;

}

.card-header {
  padding: 0px !important;

}
.card {
border: 0px !important;
}

@media (min-width: 1200px){
mobile {display: none;}
}

@media (min-width: 992px) and (max-width: 1199.98px){
desktop {display: none;}
.sarana-equal {-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}	
}

@media (min-width: 768px) and (max-width: 991.98px){
desktop {display: none;}
	.sarana-equal {-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}
}

@media (min-width: 576px) and (max-width: 767.98px){
desktop {display: none;}
	.sarana-equal {-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}
.footer-sarana-ul {margin-left: -40px;}
.post-wrapper-sarana {margin-bottom: 15px;}	
.wrapper-notice {margin-top: 35px;}	
.icon-wrapper-services {margin: 20px 0px;}
.iso-footer-wrapper {margin-top: 25px;}
.banner-area-sarana-inside {}
.title-banner  {font-size: 35px;font-weight: 800;}
	
.banner-area-sarana-inside {
  height: 60%;
 background-position: -100px 0px;
}	
	
}

@media (max-width: 575.98px){
desktop {display: none;}
	.sarana-equal {-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}
.banner-area-sarana-inside {
  height: 60%;
 background-position: -500px 0px;
}	
	.logo-area-sarana {width: 180px; padding-left: 15px;}	
	.logo-area-sarana-scrolled {width: 150px;}
	.banner-area-sarana {}	
	.section-title {font-size: 22px;}
	.title-area-sarana {margin-top: -54px;}
	.footer-sarana-ul {margin-left: -40px;}
	.post-wrapper-sarana {margin-bottom: 15px;}	
	.wrapper-notice {margin-top: 35px;}	
	.icon-wrapper-services {margin: 20px 0px;}
	.iso-footer-wrapper {margin-top: 25px;}
.banner-area-sarana-inside {}
	.title-banner  {font-size: 35px;font-weight: 800;}
}