/*
 Theme Name:   Aetra
 Theme URI:    http://toffeedev.com
 Description:  Aetra Child Themes
 Author:       Dwivy Andre & David Antonny
 Author URI:   http://toffeenet.com
 Template:     toffeecore
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-header, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
 Text Domain:  toffeecore-child
*/

.tp-bgimg.defaultimg {
    position: relative;
    top: 40px;
}

/*FONT TYPE*/

@font-face {
  font-family: 'Myriad';
  src: url('fonts/MyriadPro-Light.otf')  format('opentype'),
       url('fonts/MyriadPro-Light.woff')  format('woff'),
       url('fonts/MyriadPro-Light.woff2')  format('woff2'); 
  font-weight: 300;
  font-style: normal;
 }

@font-face {
  font-family: 'Myriad';
  src: url('fonts/MyriadPro-Regular.otf')  format('opentype'),
       url('fonts/MyriadPro-Regular.woff')  format('woff'),
       url('fonts/MyriadPro-Regular.woff2')  format('woff2'); 
  font-weight: 400;
  font-style: normal;
 }

 @font-face {
  font-family: 'Myriad';
  src: url('fonts/MyriadPro-Bold.otf')  format('opentype'),
       url('fonts/MyriadPro-Bold.woff')  format('woff'),
       url('fonts/MyriadPro-Bold.woff2')  format('woff2'); 
  font-weight: 700;
  font-style: normal;
 }

 /* --- BODY TYPOGRAPHY --- */

body {
  font-family: "Myriad", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: #454343;
  background-color: #fff;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
}

/* --- HEADING TYPOGRAPHY --- */

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0;
  font-family: "Myriad", sans-serif;
  font-weight: 700;
  color: #454343;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 25px;
}
h4 {
    font-size: 20px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 15px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: #898888;
}

a:hover {
  color: #000;
}

/* --- COLOR --- */

#main .tcore-btn-1 > button {
  border-color: #9f9f9b;
}

.primary-menu .menu > li:after,
#main .tcore-btn-1 > button:after {
  background-color: #9f9f9b;
}

.button a {
    padding: 10px 20px;
    border-radius:20px;
}

/* --- STYLING --- */

.primary-menu li {
  float: left;
  margin: 0 25px;
  padding: 0 5px;
}

.primary-menu li:first-child {
    margin-left: 0;
    padding-left: 0;
}

.primary-menu ul {
    border-top: solid 1px #e8e8e8;
}

.primary-menu ul li a {
    text-transform: capitalize;
    text-align: center;
    margin: 0;
    font-size: 15px;
    display: block;
    color: #000;
    transition: 0.3s all;
    position: relative;
    padding: 16px 0;
}


.primary-menu li a:before {
    content: '';
    height: 4px;
    width: 0%;
    background: #f66f01;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 0.2s all;
}

.primary-menu li:hover a:before {
    width: 100%;
}

.primary-menu li.current_page_item a:before {
    width: 100%;
}

.primary-menu .menu > li.current-menu-item > a {
    text-decoration: none;
    font-weight: 700;
    color: #002e9b;
}

/*--- HEADER -----*/

.tcore-page-banner {
    min-height: 500px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 0px;
    padding-top: 18%;
}

.tcore-page-banner > img {
    width: 100%;
    position: absolute;
    bottom: -2px;
}

.wrap-page-title:before {
    content:'';
    width: 200px;
    height: 7px;
    background: white;
    position: absolute;
    left: 42%;
    bottom: 0;
}

.tcore-page-banner:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #0a0a0a26;
    top: 0;
}

.wrap-page-title {
    width: 100%;
}

.wrap-page-title > h1,
.wrap-page-title > h3 {
    font-family:'Myriad';
    color: #000;
}

.wrap-page-title > h1 {
    font-size: 40px;
    text-align: center;
    color: #fff;
}

.wrap-page-title > h3 {
    font-size: 25px;
    text-align: center;
    color: #fff;
}

.header {
  transition: all 0.4s ease;
  width: 100%;
  padding: 0;
  position: relative;
  min-height: 100px;
}

#top {
  -webkit-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.28);
  -moz-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.28);
  box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.28);
  background:#fff;
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.mobile i {
    color: #202e75;
}

.sticky .sticky-header #top {
  position: fixed;
  background: #000;
  z-index: 99;
  padding: 0;
  width: 100%;
}

.admin-bar.sticky .sticky-header #top {
  top: 32px;
}


#top .row div.display-table {
  display: table;
  width: 100%;
}

#top .row div.display-table > div {
    float: none;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.wrap-top-menu .col-sm-12 {
    margin-bottom: -30px;
    position: relative;
    z-index: 1;
}

.alignleft {
    float: left;
    margin: 0 20px 20px 0;
    display: block;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
    display: block;
}

#branding {
  display: inline;
  margin: 10px 0;
}

.sticky #branding {
  height: 50px;
}

.sticky #branding img {
  height: auto;
  width: auto;
}

.top-bar {
    display: flex;
    min-height: 50px;
    align-items: center;
}

.top-bar ul li a {
    padding: 10px 0;
}

.top-bar span {
    
}

.top-bar ul > li > a > span:before {
    content: '';
    height: 100%;
    width: 1px;
    background: #a0a0a0;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
}

.top-bar ul > li:last-child > a > span:before {
    display:none;
}

.top-bar ul > li > a > span {
    padding: 0 10px;
    position: relative;
}

.top-bar ul > li:first-child > a > span {
    padding-left: 0;
}

.wpml-ls-current-language > a > span {
    color: #012e9a;
}

.top-bar ul {
    margin: 5px 0;
}

.top-bar .container > div:first-child {
    float: none;
}

.backtotop > a > i {
    color: #000;
}

.tcore-search input.search-field {
  top: 85px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    color: #fff;
    position: absolute;
    min-height: 50px;
    background: #00000054;
    bottom: 0;
    width: 100%;
}

.wrap-breadcrumbs > p {
    margin: 0;
}

p#breadcrumbs > span > span > a {
    margin-right:10px;
}

p#breadcrumbs > span > span > span {
    margin-left:10px;
}

span.breadcrumb_last {
    color: #fff;
    font-weight: 800;
}

.breadcrumbs a {
    color: #fff;
}

.home .breadcrumbs {
    display:none;
}

.search-form input {
    font-family: 'Myriad';
    font-weight: 400;
    font-size: 14px;
    color: #b3b3b3;
    background: #f3f3f3;
    border: none;
    box-shadow: none;
    padding: 10px 30px;
}

.search-form label {
    width:100%;
    margin: 10px 0;
    position: relative;
}

.search-form label:before {
    content: '\f002';
    font-family: FontAwesome;
    position:absolute;
    color: #a0a0a0;
    left: 10px;
    top: 4px;
}

input:focus, textarea:focus, select:focus {
    outline: 0;
}

.title-slider > h2 {
    font-size: 50px !important;
    color: #fff;
    font-weight: 700 !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.71);
    letter-spacing: -2px !important;
}

/*Back to Top*/
#buttonTop.show {
    opacity: 1;
    visibility: visible;
}

#buttonTop {
    opacity: 0;
}

.backtotop {
    padding: 0;
    bottom: 0;
    right: 10px;
}

.backtotop > a {
    background: #0583ba;
    padding: 1px 15px;
}

.backtotop > a > i {
    color: #fff;
    font-size:20px;
    vertical-align: middle;
}

/*Global Use*/
a {
    color: #000;
    transition: 0.2s all;
}

a:hover {
    color: #163aa2;
}

a:focus {
    outline: none;
    color: unset;
}

button:focus {
    outline: none;
}

.section_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section_page {
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

.title-section {
    position: relative;
    color: #163aa2;
    text-align: center;
    margin: 30px 0;
    padding-bottom: 30px;
    text-transform: capitalize;
}

.title-section:after {
    content: '';
    width: 100px;
    height: 5px;
    position: absolute;
    background: #f67004;
    left: 17.2em;
    bottom: 0;
}

.title-section-white {
    position: relative;
    color: #fff;
    text-align: center;
    margin: 30px 0;
    padding-bottom: 30px;
    text-transform: capitalize;
}

.title-section-white:before {
    content: '';
    width: 100px;
    height: 5px;
    position: absolute;
    background: #fff;
    left: 17.2em;
    bottom: 0;
}

.title-column {
    padding: 20px 0;
    margin: 30px 0;
    position: relative;
    color: #153aa2;
}

.title-column:after {
    content: '';
    width: 100px;
    height: 5px;
    position: absolute;
    background: #f66f02;
    left: 0;
    bottom: 0px;
}

.title-column-white {
    position: relative;
    color: #fff;
    text-align: center;
    margin: 30px 0;
    padding-bottom: 30px;
    text-transform: capitalize;
}

.title-column-white:before {
    content: '';
    width: 100px;
    height: 5px;
    position: absolute;
    background: #fff;
    left: 40%;
    bottom: 0;
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: 1;
}

.text-white {
    color: #fff;
}

.text-blue {
    color: #1639a2;
}

.title-slider {
    color: #fff;
}

.shape-section-left:before {
    content: '';
    width: 70%;
    height: 170px;
    background: #f6f6f6;
    position: absolute;
    left: 0;
    top: 0px;
}

.shape-section-right:before {
    content: '';
    width: 70%;
    height: 170px;
    background: #f6f6f6;
    position: absolute;
    right: 0;
    top: 0px;
}

/*Footer*/
#footer {
  background: #fff;
    color: #000;
    padding: 0px;
    width: 100%;
}

#footer a {
    color: #000;
}

#footer .row {
    display: flex;
    align-items: center;
    min-height: 45px;
}

.above-footer {
    position: relative;
}

.copyright-wrap {
    padding: 20px 0;
    font-size: 16px;
    border-top: solid 1px #e8e8e8;
    color: #acacac;
}

.above-footer.section_page {
    min-height: 300px;
}

.wrap-widget,
.wrap-widget a {
    font-size: 15px;
    color: #acacac;
}

.widget-title {
    font-weight: 700;
    color: #000;
    margin: 0;
    padding: 35px 0;
}

.wrap-logo-footer {
    margin-bottom: 20px;
}

.wrap-widget {
    min-height: 300px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0;
}

.widget .menu li {
    float: none;
}

.widget .menu li a {
    padding-left:0;
}

.wrap-widget a:hover {
    color: #0483ba;
}

ul.widget-contact {
    margin: 0;
    padding: 0px;
    list-style-type: none;
}

ul.widget-contact > li {
    padding-left: 30px;
    padding-top: 10px;
    position: relative;
    display: block;
}

ul.widget-contact > li.icon-phone:before {
    content:'\f095';
    font-family:'FontAwesome';
    position: absolute;
    left: 0;
}

ul.widget-contact > li.icon-email:before {
    content:'\f0e0';
    font-family:'FontAwesome';
    position: absolute;
    left: 0;
}

ul.widget-contact > li.icon-address:before {
    content:'\f041';
    font-family:'FontAwesome';
    position: absolute;
    left: 0;
}

.widget .menu li a {
    padding-left:0;
}

ul#menu-page-menu-en,
ul#menu-page-menu-id {
    margin: 20px 0;
    columns: 2;
}

ul#menu-legal-menu-en,
ul#menu-legal-menu-id {
    margin: 20px 0;
}

ul.social-media li a {
    margin: 0 10px;
}

.copyright-wrap p {
    margin: 0;
}

.logo-brand-footer {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.logo-brand-footer > img {
    height: 60px;
    width: 60px;
    margin-right: 20px;
}

/*Gravity Form*/
.gform_wrapper label.gfield_label {
    display: none !important;
}

.gform_wrapper ul > li {
    margin: 20px 0;
}

.gform_wrapper input[type=text],
.gform_wrapper textarea {
    border: none;
    padding: 10px 20px !important;
    border-radius: 30px;
    font-family: 'Myriad' !important;
    font-weight: 400;
    box-shadow: 0px 0px 10px 6px rgba(163, 163, 163, 0.11);
}

.gform_wrapper .gform_footer {
    text-align:right;
}

.gform_wrapper .gform_footer input.button, 
.gform_wrapper .gform_footer input[type=submit], 
.gform_wrapper .gform_page_footer input.button, 
.gform_wrapper .gform_page_footer input[type=submit] {
    border: 1px solid #004a9f;
    background: none;
    color: #004a9f;
    border-radius: 20px;
    padding: 5px 20px;
}

/*Transition*/
.sweep-to-top {
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: color 1000ms;
  transition: color 1000ms;
}
.sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #034ea2;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition: 300ms ease-out;
  transition: 300ms ease-out;
}
.sweep-to-top:hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/*Button*/
.btn-blue {
    padding: 10px 20px;
    border: 1px solid #052d9c;
    border-radius: 20px;
    text-transform: uppercase;
    color: #052d9c;  
}

.btn-blue:hover {
    background: #052d9c;
    color: #ffffff;  
}

.btn-white {
    font-size: 18px !important;
    padding: 10px 50px !important;
    border: 1px solid #fff;
    border-radius: 30px;
    text-transform: uppercase;
    color: #fff;
}

.btn-white:hover {
    background: #fff;
    color: #052d9c;  
}

/*Search ID*/
.search-id {
    background: #fff;
    padding: 30px 0;
    width: 600px;
    text-align: center;
    margin: -5% auto;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}

.search-id label {
    padding-right: 20px;
    margin: 0;
    color: #1439a2;
    text-transform: capitalize;
    font-size: 18px;
}

#parallax {
    background-attachment: fixed;
}

.wrap-logo-branding {
    padding: 20px 20px 10px 20px;
}

.search-id input {
    background: #f3f3f3;
    border:none;
    padding: 19.5px;
    width: 50%;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.10);
}

#form-tagihan {
    height: 65px;
    position: relative;
}

#form-tagihan input {
    height: 100%;
    position: relative;
    vertical-align: middle;
}

.search-id button {
    padding: 0 30px;
    border: none;
    position: relative;
    background:#f66f02;
    margin-left: -20px;
    border-radius: 0px 10px 10px 0px;
    font-size: 25px;
    height: 100%;
    vertical-align: middle;
    color: #fff;
}

/*Homepage*/
.wrap-berita-acara {
    padding: 20px 0;
}

.item-berita-acara {
    padding: 20px 20px 25px 20px;
    transition: 0.3s all;
    min-height: 400px;
}

.item-berita-acara:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07), 0 3px 6px rgba(0, 0, 0, 0.04);
}

.btn-read-more {
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 800;
    color: #173aa2
}

.btn-read-more > i {
    margin-left: 10px;
}

.text-berita-acara {
    height: 130px;
}

.title-berita-acara {
    font-weight: 800;
    color: #173aa2;
    font-size:23px;
    margin-top: 0px;
    display: block;
    margin-bottom: 10px;
}

.text-berita-acara > p {
    margin: 10px 0;
    color: #aaaaaa;
}

.img-berita-acara img {
	height: 200px;
	width: 100%;
	object-fit: cover;
}

/*About*/
.section-about-melayani.section_page {
    min-height: 800px;
}

.about-melayani:before {
    content: '';
    width: 55%;
    height: 170px;
    background: #f6f6f6;
    position: absolute;
    left: 0;
    top: 35px;
}

.section_page.visi-misi {
    min-height: 700px;
}

.visi-misi:before {
    content:'';
    width: 30%;
    height: 150px;
    background: #f6f6f6;
    position:absolute;
    left:0;
    top: 0;
}

.visi-misi:after {
    content:'';
    width: 40%;
    height: 200px;
    background: #f6f6f6;
    position:absolute;
    right:0;
    bottom: 50px;
}
.img-visi {
    position: relative;
    z-index: 1;
}

.item-nilai {
    width: 200px;
    text-align: center;
    margin: 0 auto;
    padding: 30px 0;
}

.item-nilai > img {
    height: 70px;
}

.wrap-nilai-perusahaan {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*Kontak*/
.section_page.hubungi_kami {
    min-height: 600px;
}

.list-hubungi-kami {
    font-size: 18px;
}

.hubungi_kami:before {
    content: '';
    width: 45%;
    height: 350px;
    background: #f6f6f6;
    position: absolute;
    top: 20%;
    right: 0;
}

.wrap-list-icon-kontak {
    width: 350px;
    margin: 0 auto;
}

/*FAQ*/
.faq-item {
    padding: 30px 0;
    border-bottom: 2px solid #f1f1f1;
}

.faq-item:last-child {
    border:none;
}

.wrap-faq-item > div {
    position: relative;
}

.wrap-text-faq {
    width: 80%;
    margin: 30px auto;
    padding: 30px;
    border-radius: 20px;
}

.wrap-text-faq > p {
    margin: 0;
}

.faq-question > div {
    background: #f1f1f1;
}

.faq-question:before {
    content:url(http://beta.toffeetest.com/aetra/wp-content/uploads/2019/05/icon-ask.png);
    position: absolute;
    right: 0;
}

.faq-answer > div {
    box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
    border-color: rgba(223,225,229,0);
}

.faq-answer:before {
    content: url(http://beta.toffeetest.com/aetra/wp-content/uploads/2019/05/icon-answer.png);
    position: absolute;
    left: 0;
}

/*Berita*/
.wrap-berita {
    padding: 30px 0;
}

.item-berita-wide {
    padding: 20px 20px 25px 20px;
}

.img-wide-berita {
    min-height: 350px;
    background-size: cover;
    background-position: center;
    padding: 30px;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.img-wide-berita:before {
    content: '';
    height: 100%;
    width: 100%;
    background: #00000040;
    position: absolute;
    left: 0;
    bottom: 0;
}

.text-berita-wide {
    position: relative;
}

.item-berita-wide .title-berita-acara {
    color: #fff;
}

.item-berita-wide .btn-read-more {
    color: #fff;
}

.paged-2 .wrap-berita .row > div:first-child {
    display: none;
}

/*Pagination*/
.page-numbers {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #a3a3a3;
    color: #a3a3a3;
    border-radius: 3px;
    font-weight: 800;
}

.page-numbers.current {
    background: #1739a2;
    color: #fff;
}

.page-numbers:hover {
    background: #1739a2;
    color: #fff;
}

/*Single Berita*/
.content-post {
    padding: 20px 30px;
    margin: 30px 0;
}

.related-news {
    margin: 30px 0;
}

.wrap-sidebar-blog {
    position: relative;
}

.wrap-sidebar-blog:before {
    content:'';
    width: 2px;
    height: 100%;
    background: #f3f3f3;
    position: absolute;
    right: -30px;
    top: 25px;
}

.single-post .wrap-page-title:before {
    display: none;
}

.essc-share {
    font-weight: 800;
    font-size: 18px;
}

/*Karir*/
.wrap-button-karir .btn-blue {
    margin: 0 auto;
    text-align: center;
    border-radius: 50px;
    font-size: 20px;
    padding: 10px 50px;
}

.item-karir.section_page {
    min-height: 140px;
    width: 950px;
    margin: 0 auto;
    background: #f6f6f6;
    padding: 30px;
}

.item-karir .title-column {
    margin: 15px 0;
}

.popup-karir .ult_modal-header {
    background: #00aeef;
    border: none;
}

.popup-karir .ult_modal-header > h3 {
    display: block;
    text-align: center;
    color: #fff;
}

.popup-karir .ult_modal-body {
    padding-top: 20px;
    padding-bottom: 50px;
    position: relative;
}

.popup-karir .gform_wrapper .gform_footer {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0;
}

.popup-karir .gform_wrapper .gform_footer input[type=submit] {
    border: none;
    display: block;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    background: #002e9b;
    border-radius: unset;
    color: #fff;
    padding: 10px 0;
}

.wrap-button-karir button {
    padding: 10px 50px;
    border-radius: 30px;
    background: transparent !important;
    color: #163aa2 !important;
    border: 1px solid #163aa2 !important;
}

/*Info Pelanggan*/
.shape-pelanggan-left:before {
    content: '';
    width: 70%;
    height: 160px;
    background: #f6f6f6;
    position: absolute;
    left: 0;
    top: 35px;
}

.shape-pelanggan-right:before {
    content: '';
    width: 70%;
    height: 160px;
    background: #f6f6f6;
    position: absolute;
    right: 0;
    top: 0px;
}

.section_tagihan.section_page {
    min-height: 450px;
    color: #fff;
}

.border-right:before {
    content:'';
    width: 1px;
    height: 100%;
    background: #fff;
    position: absolute;
    right: -25px;
}

.section_tagihan .search-id {
    width: 500px;
    margin: 0 auto;
}

.search-tagihan {
    text-align: center;
    padding: 20px 0;
}

.search-tagihan input {
    background: #f3f3f3;
    border: none;
    padding: 20px;
    width: 50%;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.10);
    color: #454343;
}

.search-tagihan button {
    padding: 0 30px;
    border: none;
    background: #f66f02;
    margin-left: -20px;
    border-radius: 0px 10px 10px 0px;
    font-size: 25px;
    height: 100%;
    position: relative;
    z-index: 99;
    vertical-align: middle;
    color: #fff;
}

#btncheck {
    padding: 20px;
    border: none;
    position: relative;
    background: #f66f02;
    margin-left: -20px;
    border-radius: 0px 10px 10px 0px;
    font-size: 25px;
    height: 100%;
    vertical-align: middle;
    color: #fff;
}

.result .search-id {
  margin: 0 auto;
}

.section-kebocoran.section_page {
    min-height: 400px;
    color: #fff;
}

.item-kantor-pelayanan h3 {
    margin-top: 0;
    color: #173aa2;
}

.item-kantor {
    padding: 0;
    list-style-type: none;
    columns: 2;
    margin: 0;
}

.item-kantor > li {
    margin-bottom: 20px;
    color: #a6a6a6;
}

.title-kantor {
    font-weight: 800;
    color: #908d8d;
}


.item-kantor-pelayanan {
	margin: 40px 0px;
    padding: 20px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}

.item-kantor-pelayanan:last-child {
    border: unset;
}

.item-kantor-pelayanan:before {
    content:'';
    width: 61%;
    height: 160px;
    background: #f6f6f6;
    position: absolute;
    left:0;
    top: 0;
}

/*Milestone*/
.date-milestone > p {
    margin: 0;
}

.text-milestone > p {
    margin: 0;
}

.item-milestone {
    min-height: 400px;
    display: flex;
    position: relative;
}

.item-milestone:before {
    content:'';
    height: 20px;
    width: 20px;
    background: #1639a2;
    border-radius: 50%;
    position: absolute;
    left: 21%;
}

.item-milestone:after {
    content:'';
    height: 15px;
    width: 15px;
    background: #1639a2;
    border-radius: 50%;
    position: absolute;
    left: 22%;
    top: 50%;
}

.owl-item:nth-child(even) .item-milestone:before {
    top: 80%;
}

.owl-item:nth-child(even) .text-milestone:before {
    top: 50%;
    height:30%;
}

.owl-item:nth-child(even) .item-milestone > div {
    padding-top: 58%;
}

.text-milestone {
    width: 230px;
    margin: 0 auto;
    position: relative;
    font-size: 14px;
}

.text-milestone:before {
    content: '';
    height: 50%;
    width: 2px;
    background: #1639a266;
    position:absolute;
    left: -10%;
    top: 15px;
}

.date-milestone {
    width: 75px;
}

.date-milestone > p:first-child {
    font-size: 20px;
    font-weight: 800;
}

.slider-milestone .owl-stage {
    position: relative;
}

.slider-milestone .owl-stage:before {
    content: '';
    height:2px;
    width: 100%;
    background: #1639a2;
    position: absolute;
    top: 52%;    
}

.slider-milestone .owl-nav {
    position: absolute;
    width: 100%;
    top: 48%;
}

.slider-milestone .owl-nav > button {
    position: absolute;
}

.slider-milestone .owl-nav > button > i {
    color: #ffffff;
    font-size: 20px;
    padding: 10px 13px;
    background:#1639a2;
    vertical-align: middle;
    border-radius: 50%;
}

.slider-milestone .owl-nav > button > i:hover {
    background: #1639a257;
}

.slider-milestone .owl-nav .owl-next {
    right: -5%;
}

.slider-milestone .owl-nav .owl-prev {
    left: -5%;
}

.slider-milestone .owl-nav .owl-prev.disabled > i,
.slider-milestone .owl-nav .owl-next.disabled > i {
    background: #1639a257;
}

/*Infrastruktur*/
.item-gallery {
    padding: 15px;
}

.img-gallery > a > img {
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.5);
}

.text-gallery {
    margin: 20px 0;
    padding: 0 10px;
    text-align: center;
    font-weight: 800;
    font-size: 17px;
    color: #dcdcdc;
}

.text-gallery > p {
    margin: 0;
}

.slider-gallery .owl-nav {
    position: absolute;
    width: 100%;
    top: 35%;
}

.slider-gallery .owl-nav > button {
    position: absolute;
}

.slider-gallery .owl-nav > button > i {
    color: #ffffff;
    font-size: 20px;
    padding: 10px 13px;
    background:#1639a2;
    vertical-align: middle;
    border-radius: 50%;
}

.slider-gallery .owl-nav > button > i:hover {
    background: #1639a257;
}

.slider-gallery .owl-nav .owl-next {
    right: -5%;
}

.slider-gallery .owl-nav .owl-prev {
    left: -5%;
}

.slider-gallery .owl-nav .owl-prev.disabled > i,
.slider-gallery .owl-nav .owl-next.disabled > i {
    background: #1639a257;
}

/*Page Result*/
.wrap-result {
    max-width: 750px;
    margin: 0 auto;
}

.wrap-search-pelanggan {
    margin: 30px 0;
}

.table-customer tbody tr > td:first-child {
    width: 250px;
    font-weight: 600;
    text-transform: uppercase;
}

.table-customer tbody tr > td {
    padding: 10px 15px;
}

.table-customer tbody tr:nth-child(even) {
    background: #337ab757;
}

.wrap-result .panel-heading {
    font-weight: 700;
    text-transform: uppercase;
}

.table-billing {
    color: #000;
    margin: 0;
}

.table-billing tbody tr > td {
    text-align: left;
    border: none;
    width: 50%;
    font-weight: 600;
}

.table-billing tbody tr > td:first-child {
    text-transform: uppercase;
}

.alert-air {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #f47814;
    text-transform: capitalize;
}

/* --- RESPONSIVE --- */
@media only screen and (max-width: 992px) {

}

/* Small devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {

	.title-section:after {
		left: 43%;
	}

	.img-berita-acara {
	    max-height: unset;
	}

	.wrap-widget {
	    display: block;
	}

	.widget .menu {
	    float: none;
	}

	.wrap-widget > div:last-child {
	    text-align: center;
	}

	.wrap-page-title:before {
	    left: 37%;
	    bottom: -15px;
	}

	.tcore-page-banner {
	    min-height: 350px;
	}

	.about-melayani:before {
	    height: 120px;
	}

	.title-section-white:before {
	    left: 43%;
	}

	.shape-pelanggan-left:before {
	    height: 100px;
	}

	.item-kantor-pelayanan:before {
	    width: 50%;
	}

	.slider-gallery .owl-nav .owl-next {
		right: 0;
	}

	.slider-gallery .owl-nav .owl-prev {
		left: 0;
	}

	.wrap-breadcrumbs > p {
	    text-align: center;
	}

	.item-karir.section_page {
	    width: unset;
	}

  .item-milestone:before {
      left: 20%;
  }

  .item-milestone:after {
      left: 20.5%;
  }

}

@media only screen and (max-width: 480px) {
	.tp-bgimg.defaultimg {
	    position: relative;
	    top: 28px;
	}

	.item-berita-wide {
		padding: 0;
		margin-bottom: 35px;
	}
	
	h1.title-slider {
		white-space: normal !important;
		width: 340px;
		font-size: 30px !important;
	}

  .tcore-page-banner {
      min-height: 500px;
      padding-top: 65%;
  }

  .wrap-page-title:before {
      left: 85px;
      bottom: -20px;
  }

    .hide-mobile {
        display: none;
    }
    
    .section_center {
        display: block;
    }

    .search-id {
        width: 100%;
        min-height: 180px;
    }

    .search-id label {
        margin: 10px 0;
        padding: 0;
    }

    .search-id input {
        width: 70%;
        padding: 5px 10px;
    }

    .search-id button {
        padding: 5px 10px;
    }

    .wrap-widget {
        display: block;
    }

    #footer .row {
        display:block;
        text-align: center;
    }

    .wrap-social-media {
        float: none !Important;
    }

    .backtotop {
        bottom: 100px;
    }

    .widget-title {
        padding: 10px 0;
    }

    ul#menu-footer-menu,
    ul#menu-legal-menu {
        float: none;
    }

    .wrap-widget > div:last-child {
        text-align: center;
    }

    .title-section:after {
        left: 100px;
		bottom: 10px;
    }
	
	.title-section {
		margin-bottom: 10px !important;
	}

    .title-section-white:before {
        left: 100px;
    }

    .section_page {
        padding: 30px 0;
    }

    .hubungi_kami:before {
        top: unset;
        bottom: 5%;
        height: 250px;
        width: 95%;
    }

    .about-melayani:before {
        height: 150px;
    }

    .faq-question:before {
        right: -30px;
        transform: scale(0.5);
    }

    .faq-answer:before {
        left: -35px;
        transform: scale(0.5);
    }

    .content-blog-wrap > div {
        display: flex;
        flex-flow: column-reverse;
    }

    .related-news {
        padding: 0;
    }

    .item-berita-acara {
        padding: 0;
    }

    .content-post {
        padding: 0;
    }

    .item-karir.section_page {
	    width: unset;
	}

	.item-milestone {
	    display: block;
	    position:relative;
	    min-height:unset;
	}

	.text-milestone {
	    width: unset;
	    padding: 20px 0;
	    margin: 10px 0;
	    text-align: center;
	}

	.date-milestone {
	    text-align: center;
	}

	.text-milestone:before {
	    display: none;
	}

	.item-milestone:after {
	    display:none;
	}

	.slider-milestone .owl-stage:before {
	    top: 23%;
	}

	.item-milestone:before {
	    top:22%;
	    left: 45%;
	    display: none;
	}

	.owl-item:nth-child(even) .item-milestone > div {
	    padding: unset;
	}

	.slider-milestone .owl-nav {
	    position: unset;
	    text-align: center;
	}
	
	.slider-gallery .owl-nav .owl-prev {
		position: absolute;
		left: 0;
	}
	
	.slider-gallery .owl-nav .owl-next {
		position: absolute;
		right: 0;
	}	

	.slider-milestone .owl-nav button,
	.slider-gallery .owl-nav button {
	    position: unset;
	}

	.slider-milestone .owl-nav button > i:hover,
	.slider-gallery .owl-nav button > i:hover {
	    background: #1639a2;
	}

	.wrap-breadcrumbs > p {
	    text-align: center;
	}
    
}

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

}