/*==========================================
 GENERAL
==========================================*/
.text {font-family:'latoregular';font-weight:unset;}
#wrapper sup {top: -17px;font-family:'latobold' !important;font-size: 11px;}
#wrapper h1 sup {font-size: 2.9rem;font-family:'latoregular' !important;}
h1 {position: relative;}
@media (max-width:1081px) {
	#wrapper sup {top: -9px;}
}
@media (max-width:1025px) and (max-height:462px) and (orientation:landscape) {
	.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-60%); -ms-transform: translateX(-60%); -o-transform: translateX(-60%); transform: translateX(-60%);}
}
@media (max-width:865px) and (max-height:433px) and (orientation:landscape) {
	.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-63%); -ms-transform: translateX(-63%); -o-transform: translateX(-63%); transform: translateX(-63%);}
}
@media (max-width:852px) and (max-height:395px) and (orientation:landscape) {
		.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-66%);-ms-transform: translateX(-66%);-o-transform: translateX(-66%);transform: translateX(-66%);}
}
@media (max-width:849px) and (max-height:425px) and (orientation:landscape),
	   (max-width:847px) and (max-height:413px) and (orientation:landscape) {
	.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-67%); -ms-transform: translateX(-67%); -o-transform: translateX(-67%); transform: translateX(-67%);}
}
@media (max-width:830px) and (max-height:395px) and (orientation:landscape) {
	.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-68%); -ms-transform: translateX(-68%); -o-transform: translateX(-68%); transform: translateX(-68%);}
}
@media (max-width:785px) and (max-height:383px) and (orientation:landscape) {
	.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-67%); -ms-transform: translateX(-67%); -o-transform: translateX(-67%); transform: translateX(-67%);}
}
@media  (max-width:620px) {
	#wrapper sup {top:-10px}
	#wrapper h1 sup {font-size: 2.2rem;top:-10px}
}
@media (max-width:450px) {
	#wrapper sup {top: -10px;font-size:1rem}
	#wrapper h1 sup {font-size: 2.5rem;}
}
@media (max-width:425px) and (max-height:849px) and (orientation:portrait),
	   (max-width:413px) and (max-height:870px) and (orientation:portrait),
	   (max-width:432px) and (max-height:865px) and (orientation:portrait) {
	.allbanner .header_top .bg.old_ver img {-webkit-transform: translateX(-71%); -ms-transform: translateX(-71%); -o-transform: translateX(-71%); transform: translateX(-71%);}
}
@media (max-width:320px) {
	.header_subtext .hidden-lg.hidden-md.hidden-sm.visible-xs{display: none !important}
	#wrapper h1 sup {font-size: 2rem;}
}

#wrapper .header_subtext sup {
	top: -11px;
}

@media (max-width: 1300px) {
  #wrapper .header_subtext sup {
	top: -14px;
  }
}

@media (max-width: 991px) {
  #wrapper .header_subtext sup {
	top: -8px;
    font-size: 9px;
  }
}
.flx {
  display: flex;
  flex-flow: wrap;
}

.flx_item {
  min-width: 50%;
  max-width: 50%;
  flex: 2;
  margin-top: 40px;
}
@media (max-width: 767px) {
	.flx {
	  display: block;
  }

	.flx_item {
	  min-width: 0;
	  max-width: none;
	  flex: 2;
	  width: 100%;
	}
}
/*==========================================
 SECTION 1
==========================================*/
.section1 h3 {font-family: 'latobold';font-weight:unset;}
.section1, .section1 .upper_section {position: relative;background-repeat: no-repeat;background-size:cover;background-position:center 70%;}
.section1 .upper_section .container {position: relative;z-index: 2;}
.section1 .upper_section:after {content:'';position: absolute;top: 0;bottom: 0;right: 0;left: 0;background:rgba(255,255,255,0.9);z-index: 1;}
.section1 .generic-titles p {margin-bottom: 15px;}
.section1 .mid_image {max-width: 350px;text-align: center;margin: auto;margin-top: -80px;margin-bottom: 20px;position: relative;z-index: 3;}
.section1 .bg:after {content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: #ffffff; opacity: 0.5; z-index: 1;}
.section1 .bg img {-webkit-filter: grayscale(30%); filter: grayscale(30%); opacity: .2;}
.section1-content {
    background: rgba(255,255,255,0.9);
    padding: 3.5em 0;
}

@media(max-width: 991px) {
	.section1 .text:first-child {margin-bottom: 20px;}
}
@media(max-width: 767px) {
	.section1 .mid_image img.w-100p	{width: 70% !important}
}

/*==========================================
 SECTION 2
==========================================*/
.section2 .type {display: flex;}
.section2 .items {width: 33%; padding: 20px 10px; text-align: center; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.section2 .items:hover {box-shadow: 0px 13px 50px #00000021; }
.section2 .items:first-child + div {margin: 0 15px; }
.section2 .item {margin: 0 0 15px; }
.section2 .title {font-size: 20px; min-height: 56px; }
.section2 .item_wrap {padding: 10px 0; margin: 0 10px; }
.section2 .item_wrap {border-bottom: 1px solid #D2D2D2; position: relative; }
.section2 .item_wrap:last-child {border-bottom: none; }
.section2 .item_title {position: relative; display: inline-block; padding: 0 25px; }
.section2 .query {border: 1px solid #484848;color: #000;width: 17px;height: 17px;bottom: 3px;right: 0;border-radius: 50%;font-size: 13px;font-weight: 900;/* position: absolute; */line-height: normal;cursor: pointer;display: inline-block;margin-left: 10px;}
.section2 .item_text {z-index: -99; opacity: 0; position: absolute; background: #e5e5e5; top: 10px; left: 105%; padding: 10px; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 25%); font-size: 14px; width: 300px; text-align: left; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; }
.section2 .item_text:before {content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #e5e5e5 transparent transparent; position: absolute; left: -8px; top: 8px; }
.section2 .item_text.active {z-index: 2; opacity: 1; }
.section2 .icon {height: 45px; margin-bottom: 10px; }
.section2 .items:first-child .icon, .section2 .items:last-child .icon {padding-top: 5px; }

@media(max-width: 1710px) {
	.section2 .items:last-child .item_text {left: auto; right: 94%; }
	.section2 .items:last-child .item_text:before {border-width: 8px 0 8px 8px; border-color: transparent transparent transparent #e5e5e5; left: auto; right: -8px; }
}
@media(max-width: 1199px) {
	.section2 .item_wrap {margin: 0; }
}
@media(max-width: 991px) {
	.section2 .item_title {padding: 0; font-size: 16px; }
	.section2 .query {width: 12px; height: 12px; bottom: 8px; right: -14px; font-size: 8px; }
	.section2.section {padding-top: 40px; }
}
@media(max-width: 767px) {
	.section2 .type {display: block; }
	.section2 .items:first-child + div, .section2 .items {margin: 0 0 30px; width: 100%; padding: 20px 0; box-shadow: 0px 0px 10px #00000021; }
	.section2 .item_title {font-size: 18px; }
	.section2 .item_wrap {margin: 0 auto; max-width: 500px; }
	.section2 .query, .section2 .item_text {display: none; }
}
@media(max-width: 480px) {
	.section2 .item_wrap {margin: 0 auto; max-width: 263px; }
}

/*==========================================
 SECTION 3
==========================================*/
.section3 {background-repeat: no-repeat;background-size: 50% auto;background-position: left 50%;padding: 13rem 0;}
.section3 h2 {font-family:'latoregular';font-weight: unset;margin-bottom: 40px;color:#fff;}
.section3 h2 span {font-family:'latobold';font-weight:unset;color:#b3fbff;}
.section3 img {width: 50%; -webkit-box-shadow: 0 6px 50px 0 rgba(0,0,0,0.16); box-shadow: 0 6px 50px 0 rgba(0,0,0,0.16);}
.section3 .content {padding: 9rem 5rem;position: relative;/* width: 125%;margin-left: -25%;margin-top: 10%; */-webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
background: rgb(1,88,131);
background: -moz-linear-gradient(top,  rgba(1,88,131,1) 1%, rgba(17,149,187,1) 100%);
background: -webkit-linear-gradient(top,  rgba(1,88,131,1) 1%,rgba(17,149,187,1) 100%);
background: linear-gradient(to bottom,  rgba(1,88,131,1) 1%,rgba(17,149,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#015883', endColorstr='#1195bb',GradientType=0 );
}
.section3 .content .list ul {columns: 2; list-style: none; padding-left: 0; margin-bottom: 0;}
.section3 .list li {margin-bottom:10px;color:#fff;}
.section3 .list li:before {content:'';width: 18px;height: 16px;display: inline-block;margin-right: 12px;}

@media (max-width:1537px) and (max-height:755px) and (orientation:landscape),
	   (max-width:1537px) and (max-height:723px) and (orientation:landscape),
	   (max-width:1367px) and (max-height:658px) and (orientation:landscape),
	   (max-width:1367px) and (max-height:1025px) and (orientation:landscape),
	   (max-width:1284px) and (max-height:735px) and (orientation:landscape){
	.section3 {padding:6rem 0;}
	.section3 .content {padding:5rem;}
}
@media (max-width:1281px) and (max-height:1025px) and (orientation:landscape) {
	.section3 {padding:4rem 0;}
	.section3 .content {padding:6rem 5rem;}
}
@media (max-width:1025px) and (max-height:1367px) and (orientation:portrait),
	   (max-width:1195px) and (max-height:835px) and (orientation:landscape) {
	.section3 {padding: 4rem 0;}
	.section3 h2 {margin-bottom: 20px}
	.section3 .content{padding: 4rem}
	.section3 .list li {margin-bottom: 10px;position: relative;padding-left: 25px;line-height: 1.2;}
	.section3 .list li:before {position: absolute;left: 0;top: 3px;}
}
@media (max-width:1025px) and (max-height:769px) and (orientation:landscape) {
	.section3 .content {padding:3rem;}
	.section3 h2 {margin-bottom: 20px;font-size: 3rem;}
	.section3 .list li {margin-bottom: 10px;position: relative;padding-left: 25px;line-height: 1.2;}
	.section3 .list li:before {position: absolute;left: 0;top: 3px;}
}
@media (max-width:987px) and (max-height:456px) and (orientation:landscape),
	   (max-width:977px) and (max-height:610px) and (orientation:landscape),
	   (max-width:835px) and (max-height:1195px) and (orientation:portrait),
	   (max-width:835px) and (max-height:1281px) and (orientation:portrait) {
	.section3 h2 {margin-bottom: 40px;color:#fff;}
	.section3 h2 span.cerulean {color:#3fcaeb;}
	.section3.section {padding: 0;}
	.section3 .content {position: relative;background-size:cover;background-position:center center;padding: 10% 4rem;}
	.section3 .content:before {content:'';position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;background:#005883;opacity: 0.5;z-index: 0}
	.section3 .content * {z-index: 1;position: relative}
	.section3 .list li {color:#fff;}
	.section3 .col-md-8.col-md-offset-4.col-sm-12 {width: 100%}
}
@media (max-width:987px) and (max-height:456px) and (orientation:landscape),
	   (max-width:977px) and (max-height:611px) and (orientation:landscape),
	   (max-width:835px) and (orientation:portrait),
	   (max-width:768px) {
	.section3 {background:none!important;padding:0;}
}
@media (max-width:481px) and (max-height:855px) and (orientation:portrait),
	   (max-width:462px) and (max-height:1025px) and (orientation:portrait),
	   (max-width:425px) and (max-height:849px) and (orientation:portrait),
	   (max-width:413px) and (max-height:870px) and (orientation:portrait),
	   (max-width:432px) and (max-height:865px) and (orientation:portrait),
	   (max-width:481px) and (max-height:321px) and (orientation:landscape) {
	.section3 h2 {margin-bottom: 20px}
	.section3 .content .list ul {columns:1;}
	.section3 .content {background-position:70% ​top;}
	.section3 h2 span.cerulean {display: block}
}
	.section3 .list li:before {background-image:url(<?php the_field('check_icon') ?>);}
	@media (max-width:987px) and (max-height:456px) and (orientation:landscape),
		   (max-width:977px) and (max-height:611px) and (orientation:landscape),
		   (max-width:835px) and (orientation:portrait),
		   (max-width:768px) {
		.section3 .content {background-image:url(<?php the_field('background_section3') ?>)}
		.section3 .list li:before {background-image:url(<?php the_field('check_icon_mobile') ?>);}
	}

/**
* --------------------------------------------------------------------------
* FREE APP BUILDER STYLE 2
* --------------------------------------------------------------------------
*/
.free-app-builder-style2 {
	background: rgb(17,149,187);
	background: -webkit-linear-gradient(rgba(17,149,187,1) 0%, rgba(1,88,131,1) 100%);
	background: -o-linear-gradient(rgba(17,149,187,1) 0%, rgba(1,88,131,1) 100%);
	background: linear-gradient(rgba(17,149,187,1) 0%, rgba(1,88,131,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1195bb', endColorstr='#015883',GradientType=0 );
	padding-top: 4rem;
}
.free-app-builder-style2 .generic-titles {margin: 0 auto 1rem !important;}
.free-app-builder-style2 .generic-titles h2, .free-app-builder-style2 .generic-titles p {color: #fff; margin-bottom: 25px;}
.free-app-builder-style2 img {width: 100%;}
/*.free-app-builder-style2 .generic-titles a.btn {font-size: 16px; line-height: 1; touch-action: unset; white-space: unset; user-select: unset; outline: 0 none; font-weight: 400; text-align: center; cursor: pointer;}*/
.free-app-builder-style2 .generic-titles a.btn {touch-action: unset; white-space: unset; user-select: unset; outline: 0 none;}
@media (max-width:768px) {
	.free-app-builder-style2 .generic-titles {margin: 0 auto 4rem!important;}
}
@media (max-width: 767px) {
	/*.free-app-builder-style2 .generic-titles a {font-size: 2rem !important; padding: 10px 45px !important;}*/
	.free-app-builder-style2 img {width: 100%;}
}
@media (max-width: 700px) {
	section.free-app-builder-style2.section {padding-top: 5rem !important;}
}
@media (max-width: 450px) {
	/*.free-app-builder-style2 .generic-titles a {font-size: 2rem !important; padding: 8px 30px !important;}*/
}

/*==========================================
 TESTIMONIALS
==========================================*/
section.success_stories.section {padding-top: 0 !important;}
.story_wrap a {display: none;}
.inner_story {padding-bottom: 25px;}

/*=====================================================
 TEMPORARY TANGGAL YUNG BADGE SA GITNA NG FIRST SECTION
=======================================================*/
.temp_tanggal_badge_sa_gitna .mid_image {display: none;}
.temp_tanggal_badge_sa_gitna.section1 .upper_section.pb-50 {padding-bottom: 0 !important;}
.temp_tanggal_badge_sa_gitna.section1 .lower_section {padding-top: 20px;}
.lower_section .generic-titles {max-width: 100%;}

/*==========================================
 RIGHT BG LEFT CONTENT
==========================================*/
.rightbg_leftcontent.section {padding: 100px 0}
.rightbg_leftcontent .titles-design2 h3, .rightbg_leftcontent .titles-design2 p {color: #fff;}
.rightbg_leftcontent .titles-design2 h3:after {border-color: #fff;}
.rightbg_leftcontent {background-position:center right;}
@media (max-width: 3441px) {
	.rightbg_leftcontent {background-position: 10% 20%;}
}
@media (max-width:1139px) and (max-height:712px) and (orientation:landscape) {
	.rightbg_leftcontent {background-position: 70% center;}
}
@media (max-width:1113px) and (max-height:835px) and (orientation:landscape),
	   (max-width:1081px) and (max-height:811px) and (orientation:landscape),
	   (max-width:1195px) and (max-height:835px) and (orientation:landscape),
	   (max-width:1025px) and (max-height:1367px) and (orientation:portrait) {
	.rightbg_leftcontent {background-position: 70% center;}
}
@media (max-width: 1090px) {
	.rightbg_leftcontent {background-position: 40% 20%;}
}
@media (max-width:1025px) and (max-height:769px) and (orientation:landscape) {
	.rightbg_leftcontent {background-position: 77% center;}
}
@media (max-width: 1025px) {
	.rightbg_leftcontent.section {padding: 80px 0}
}
@media (max-width: 991px) {
	.rightbg_leftcontent.bg-centercenter {background-position: 50% center !important;}
}
@media (max-width: 767px) {
	.rightbg_leftcontent.section {padding: 30px 0}
}

/*==========================================
 SIDE BY SIDE CONTENT
==========================================*/
.title_desc_sidebyside {display: none;}
.title_desc_sidebyside + .sidebyside .section {padding: 0;}
.title_desc_sidebyside + .sidebyside .section:first-child {padding-top: 60px;}
.title_desc_sidebyside + .sidebyside .section:last-child {padding-bottom: 60px;}
.title_desc_sidebyside + .sidebyside .section .generic-titles h2:after {content: '';border-top: 2px solid #007eaa;width: 43px;height: 1px;display: block;margin-top: 20px;}
@media (max-width: 991px) {
	.sidebyside > section .flex {
		flex-direction: column-reverse !important;
	}
	.title_desc_sidebyside + .sidebyside .section {padding: 30px 0;}
}

.fullimgbg_coloredbgcontent .text-left.pl-20.pr-20.pb-50 {
	padding:100px 5vw !important;
}