/* responsive */
@media (min-width: 1320px){
  nav.navbar div.collapse div.footer-nav{
    display: none;
  }
  #kartu2{
    display: none;
  }
  /* .campaign .carousel-campaign{
    max-width: 1200px;
  } */
  /* .carousel-campaign .item img{
    height: 460px;
  } */
  #recentupdate main.main{
    max-width: 1200px;
  }
}
@media (min-width: 1280px) and (max-width: 1319px) {
  nav.navbar div.collapse div.footer-nav{
    display: none;
  }
  #kartu2{
    display: none;
  }
  #recentupdate main.main{
    max-width: 1000px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  
  nav.navbar{
    padding: 12px 28px;
  }
  .kartu {
    width: 410px;
    height: 200px;
  }
  nav.navbar div.collapse div.footer-nav{
    display: none;
  }
  #kartu2{
    display: none;
  }
  .campaign .carousel-campaign,
  #recentupdate main.main {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
  .carousel-campaign .item img{
    height: 340px;
  }
  

}

@media (min-width: 768px) and (max-width: 1023px) {
  
  nav.navbar{
    padding: 12px 28px;
  }
  ul.navbar-nav{
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid #d48d00;
    border-bottom: 1px solid #d48d00;
  }
  nav.navbar div.collapse div.footer-nav{
    display: block;
  }
  h2.section-title {
    font-size: 40px;
    max-width: 640px;
    margin: 0 auto 20px;
  }
  h3.descript {
    font-size: 28px;
    max-width: 640px;
    margin-bottom: 20px;
  }
  section#benefit {
    padding: 130px 0 20px;
  }
  nav.navbar div.collapse div.footer-nav{
    display: block;
    font-size: 13px;
    /* text-align: center; */
    padding-left: 10px;
    padding-right: 10px;
  }
  nav.navbar div.collapse div.footer-nav p{
    font-size: 13px;
  }
  nav.navbar div.collapse div.footer-nav a{
    font-size: 13px;
    text-decoration: underline;
  }
  nav.navbar div.collapse div.footer-nav .nav-socmed{
    /* text-align: center; */
    margin-left: -5px;
  }
  nav.navbar div.collapse div.footer-nav .nav-socmed img{
    width: 18px;
    height: 18px;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  #kartu2{
    display: none;
  }
  .carousel-achievment .owl-dots{
    display: block;
  }
  .carousel-achievment .owl-nav{
    display: none;
  }
  .carousel-achievment .owl-dots .owl-dot.active span, 
  .carousel-achievment .owl-dots .owl-dot:hover span {
    background: #E89B00 !important;
  }
  .carousel-achievment .item {
    border-left: 0px;
  }
  .cityline{
    overflow: hidden;
  }
  .cityline img{
    width: unset;
  }
  .kartu {
    width: 320px;
    height: 200px;
    position: relative;
    flex: 0 0 240px;
    margin-bottom: 0;
  }
  .benefit-container-desktop-parallax {
    padding: 40px 40px;
  }
  .campaign .carousel-campaign,
  #recentupdate main.main {
    width: calc(100% - 60px);
    max-width: 900px;
  }
  .carousel-campaign .item img{
    height: 280px;
  }
  section.campaign {
    padding: 80px 0 80px;
  }
  /* #recentupdate ul.ulrecent{
    max-width: 800px;
  } */
  ul.ulrecent li a.item-news div.descript-news h3 {
    font-size: 20px;
  }
  ul.ulrecent li a.item-news div.descript-news {
    padding-top: 0px;
  }
  /* .cards__card .news-desc{
    position: absolute;
  } */
  .card {
    width: 48.5%;
  }
  .navbar-nav .active>.nav-link::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 10px;
    background-color: #b17700;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    left: -8px;
    top: 50%;
  }
  
}

@media (max-width: 767px){

  nav.navbar{
    padding: 12px 12px 12px 12px;
  }
  nav a.navbar-brand img.logo{
    width: 120px;
  }
  ul.navbar-nav{
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid #d48d00;
    border-bottom: 1px solid #d48d00;
  }
  .container-typing p {
    font-size: 22px !important;
    white-space: pre-line !important;
    line-height: 26px !important;
    margin-top: 100px !important;
    /* white-space: pre-wrap !important; */
  }
  ul.socmed li{
    width: 18px;
    height: 18px;
  }
  #particle-slider canvas.draw{
    margin-top: -20px !important;
    /* padding: 45px 0 0 45px;
    width: calc(100% - 45px); */
  }
  h2.section-title {
    font-size: 38px;
    letter-spacing: -2px;
    margin: 0 auto 12px;
  }
  h3.descript{
    font-size: 17px;
    line-height: 26px;
    padding: 0 20px;
    margin: 0 auto 0px;
    font-weight: 200;
  }
  section#benefit {
    padding: 100px 0 100px;
  }
  .kartu-wrap {
    margin: 6px;
  }
  .kartu {
    width: 360px;
    height: 200px;
    margin-bottom: 0;
  }
  .kartu-info {
    transform: translateY(40%);
    padding: 4px 20px;
    /* height: 193px; */
  }
  .kartu-info h1 {
    font-size: 24px;
  }
  
  .benefit-container-desktop-parallax{
    display: none;
  }
  .benefit-container-mobile-parallax {
    padding: 40px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
  }
  .carousel-achievment .owl-dots{
    display: block;
  }
  .carousel-achievment .owl-nav{
    display: none;
  }
  .carousel-achievment .owl-dots .owl-dot.active span, 
  .carousel-achievment .owl-dots .owl-dot:hover span {
    background: #E89B00 !important;
  }
  .carousel-achievment .item {
    border-left: 0px;
  }
  .cityline{
    overflow: hidden;
  }
  .cityline img{
    width: unset;
    height: 150px;
  }
  .campaign .carousel-campaign,
  #recentupdate main.main {
    width: calc(100% - 50px);
    margin: 0 auto;
  }
  .text-campaign{
    margin: 0 auto;
    width: calc(100% - 50px);
  }
  .carousel-campaign .item img{
    height: 100%;
  }
  section.campaign,
  section.campaign.bod {
    padding: 70px 0 70px;
  }
  ul.ulrecent li a.item-news {
    display: block !important;
  }
  ul.ulrecent img.img-news {
    height: 240px;
  }
  .cards__card .news-img{
    width: 100%;
    display: block;
    position: relative;
  }
  .cards__card .news-desc{
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
  }
  /* .cards__card .news-link {
    position: relative;
    margin: 0;
  } */
  .card {
    margin: 0 0 0 0;
    width: 100%;
  }
  .card {
    width: 100%;
  }
  .footer-1,
  .footer-2,
  .footer-3{
    margin: 0 auto;
    padding: 15px;
  }
  .footer-1{
    width: 100% !important;
  }
  .footer-2{
    width: 100% !important;
    margin: 0 auto;
    padding: 15px;
  }
  .footer-3{
    width: 50% !important;
    margin: 0 auto;
    padding: 15px;
  }
  #footer h3,
  #footer ul {
    padding-left: 0px;
  }
  #footer .container {
    padding: 40px 15px 0px;
  }
  .navbar-nav .active>.nav-link::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 10px;
    background-color: #6a4700;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    left: -8px;
    top: 50%;
  }
  .home-story .col-md-3{
    width: 50%;
  }
  .home-story .col-md-3 .card-home-story span {
    font-weight: 900;
    font-size: 30px;
  }
  .home-story .col-md-3 .card-home-story p {
    font-size: 12px;
  }
  .home-story .col-md-3 .card-home-story {
    width: 150px;
    height: 150px;
  }
  .home-story {
    max-width: 90% !important;
    margin: 60px 0 40px;
  }
  .home-story .col-md-3 {
    text-align: center;
    margin-bottom: 20px;
  }
  .button-readmore-to-white {
    margin-top: 20px;
  }
  section#recentupdate{
    padding: 20px 0 0;
  }
  .campaign .container-slider .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  section#group {
    padding: 80px 0 80px;
  }
  .container-slider.group {
    width: calc(100% - 50px);
    margin-top: 40px;
  }
  #group .container-slider .col-md-6 {
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  #group .container-slider .col-md-6 h4 {
    font-size: 18px;
  }
  #group .container-slider .col-md-6 p {
    font-weight: 200;
    font-size: 14px;
    display: flex;
  }
  .campaign img.award-mono{
    width: calc(100% - 40px);
    margin: 0 auto;
    display: block;
  }
  #dvm .wrapper {
		flex-direction: column;
	}
	#dvm .indicator {
		border-right: none;
    padding-bottom: 10px;
	}
  #dvm .content li.active {
    display: block;
    transform: unset;
    left: unset;
    top: unset;
    position: relative;
    transition: all .2s ease-in-out;
  }
  #dvm .indicator li {
    width: 50%;
    float: left;
    border-right: 0px solid transparent;
    border-bottom: 2px solid transparent;
    font-size: 32px;
    text-align: center;
    display: block;
  }
  #dvm .indicator li.active {
    border-right-color: unset;
    border-bottom-color: #e89b00;
  }
  #dvm .container-slider {
    padding: 0 20px;
  }
  #dvm .content li p {
    font-size: 17px;
    font-weight: 200;
    line-height: 26px;
    padding-left: 20px;
  }
  #dvm .content {
    padding: 0 0 24px;
    position: relative;
  }
  #dvm {
    padding-bottom: 30px;
  }
  #dvm .separate {
    height: 50px;
  }
  #group .container-slider .col-md-6 a h4 {
    font-size: 17px;
  }
  #dvm h3.descript {
    margin: 0 auto 20px;
  }
  .timeline-carousel {
    padding: 10px 6.9444% 40px 6.9444%;
  }
  #group .container-slider .col-md-6:last-child {
    margin-bottom: 40px;
  }
  #group .container-slider .row{
    margin: 0 -25px;
  }
  #awards .marquee .marquee_bg{
    height: 150px;
    padding: 6px;
  }
  #awards {
    padding: 40px 0 0 !important;
  }
  .text-campaign .button-readmore-to{
    text-align: center;
    margin-top: 30px;
  }
  #benefit .button-readmore-to {
    margin-top: 20px;
  }
  .timeline-carousel .slick-dots {
    padding-left: 0;
    bottom: -20px;
  }
  .timeline-carousel .slick-dots li {
    margin: 0 4px;
  }
  section.campaign.career_page {
    padding: 60px 0 40px;
  }
  .f-search input {
    width: calc(100% - 40px);
    height: 48px;
  }
  .f-search button {
    width: calc(100% - 40px);
  }
  section.career_page h3.descript {
    margin-bottom: 30px;
  }
  section.jobs_list h3 {
    font-size: 18px;
  }
  section.jobs_list h4 {
    font-size: 12px;
  }
  .jobs_list .info_available {
    padding: 0 25px;
  }
  .jobs_list .container.list .col-12 {
    padding: 6px 25px;
  }
  .jobs_list .card_list img.logo {
    height: 20px;
  }
  .jobs_list .info_company label {
    font-size: 11px;
  }
  .jobs_list h3.job_title {
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 10px;
    height: auto;
    max-height: 48px;
  }
  p.jobs_link {
    font-size: 11px;
    padding: 6px 20px;
  }
  .jobs_list .card_list {
    padding: 12px 16px;
  }
  section.pages .container label {
    font-size: 12px;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
    margin-left: 0;
  }
  section.pages .container nav.page_nav{
    width: 100%;
  }
  section.pages .container nav.page_nav ul.pagination{
    justify-content: center;
  }
  section.contact_message form label {
    font-size: 11px;
  }
  section.contact_message form input.form-control,
  section.contact_message form textarea.form-control {
    font-size: 12px;
    height: 40px;
  }
  section.contact_message form textarea.form-control {
    height: auto;
  }
  section.contact_message form button {
    height: 40px;
    padding: 0 28px;
    font-size: 12px;
    margin-right: 0;
  }
  .layer_black {
    padding: 60px 0 32px;
  }
  section.contact_page h2.section-title {
    line-height: 2.5rem;
    font-size: 32px;
  }
  section.contact_message form {
    margin: 32px auto;
  }
  section.maps .layer_maps {
    height: 260px;
  }
  section.maps a {
    font-size: 12px;
    padding: 10px 16px;
    width: 190px;
    text-align: center;
    bottom: 1%;
  }
  section.maps{
    /* background-image: url(../images/maps-mobile.png); */
  }
  section.contact_message h3.title_message {
    font-size: 18px;
    margin: 24px auto 0;
  }
  .pilar-dektop{
    display: none;
  }
  .pilar-mobile{
      display: block !important;
  }
  .desc-three .col-md-4:nth-child(1){
      text-align: center !important;
  }
  .desc-three .col-md-4:nth-child(2){
      text-align: center !important;
      padding: 8px;
  }
  .desc-three .col-md-4:nth-child(3){
      text-align: center !important;
      padding: 10px;
  }
  .desc-three .col-md-4{
      margin: 20px 0 !important;
      height: 75px;
  }
  .desc-three{
    margin: 30px auto;
  }
  section.csr {
    padding: 0 !important;
  }
  .desc-artikel .col-md-5 img{
      width: 100%;
  }
  section.sustain h2.section-title {
    line-height: 2.7rem;
  }
  section.csr h2,
  section.new_csr h2 {
    font-size: 32px;
    letter-spacing: -2px;
    line-height: 2.5rem;
  }
  section.pilarmob .carousel-campaign{
    width: calc(100% - 28px);
    margin: 0 auto;
  }
  section.pilarmob{
    padding: 30px 0;
  }
  section.new_csr .col-md-5,
  section.new_csr .col-md-7{
    padding-left: 0;
    padding-right: 0;
  }
  section.new_csr img.award-mono,
  section.new_csr .col-md-7 .text-campaign {
    width: 100%;
  }
  section.pilarmob .owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 5px 4px;
  }
  section.pilarmob .owl-dots .owl-dot.active span{
    width: 30px;
    transition: all .5s ease-out;
  }
  .slick-dots li button {
    width: 8px;
    height: 8px;
  }
  .career_page.details .jobs_title{
    margin: 28px auto 20px;
  }
  section.jobs_detail,
  .career_page.details .jobs_title{
    padding: 0 25px;
  }
  section.article_img {
    /* padding: 45px 21px 12px; */
    padding: 108px 0px 12px;
    /* last update new */
  }
  section.article_img .separate{
    display: none;
  }
  section.article_img .carousel-campaign .item img {
    /* height: 280px; */
    height: 320px;
  }
  section.article_img .owl-dots .owl-dot span {
    margin: 5px 4px;
    width: 8px;
    height: 8px;
  }
  section.article_description{
    padding: 0 23px;
  }
  section.article_description h1.title {
    font-size: 32px;
  }
  section.article_description a.link_back {
    font-size: 13px;
  } 
  section.article_description .article_info {
    display: block;
  }
  section.article_description .article_info .info_left{
    margin-bottom: 4px;
  }
  section.article_description ul.share_socmed {
    float: none;
    padding-left: 0;
    margin-top: 16px;
  }
  section.article_description .text {
    margin: 24px 2px 0;
    color: #3c3c3c;
    line-height: 26px;
    font-size: 14px;
    text-align: justify;
  }
  section.article_img .owl-carousel .owl-dots {
    margin-top: 12px;
  }
  section.article_description .article_info .article_category {
    margin-left: 0px;
  }
  section.article_description .article_info {
    font-size: 13px;
  }
  .owl-theme .owl-dots .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    margin: 5px 4px !important;
  }
  .owl-theme .owl-dots .owl-dot.active span{
    width: 30px !important;
  }
  section.contact_page {
    background-position-x: 50%;
    background-position-y: 0;
  }
  section.aboutus .layer_black {
    padding: 100px 0 84px;
  }
  section.aboutus {
    background-image: url(../images/background/about_mobile.jpg);
  }
  section.ourgroup {
    background-position-x: 50%;
    background-position-y: 0;
  }
  section.ourgroup .layer_black {
    padding: 100px 0 84px;
  }
  section.campaign h3.descript {
    margin-bottom: 20px;
  }
  section.new_csr .container-slider .row{
    margin-bottom: 0px;
  }
  section.campaign.bod img.img-dicky {
    padding: 0 15px;
  }
  section.campaign.bod .text-bod {
    padding: 24px 15px 0;
  }
  #group .container-slider .col-md-6 a {
    height: auto;
  }
  div.btn_more.more_white {
    margin-top: 30px;
  }
  .sector_list .sector_frame .img_cover_hide{
    display: none;
  }
  .sector_list .sector_frame h2.sector_title {
    font-size: 38px;
    margin-bottom: 0;
  }
  section.sector_list {
    padding: 20px 0;
  }
  .sector_list .sector_frame .sector_sparepart, .sector_list .sector_frame .sector_mining, .sector_list .sector_frame .sector_finance {
    padding-bottom: 50px;
  }
  .sector_list .sector_frame .row .item .link_caro .col-md-3 {
    margin-bottom: 15px;
  }
  .contact_message .modal .modal-content label {
    font-size: 46px;
    margin: 20px auto;
  }
  .breadcumb{
    display: none;
  }
  .contact_message .modal .modal-body img.icon_check {
    width: 120px;
  }
  section.article_img .owl-carousel .owl-stage-outer {
    border-radius: 0px;
  }
  .back_career .row{
    width: calc(100% - 15px);
    margin: 0 auto;
  }
  a.link_back {
    font-size: 13px;
  }
  a.link_back svg {
    width: 20px;
  }
  section.fillForm form.uploadForm {
    padding: 20px 20px;
    width: calc(100% - 40px);
    margin: 0 auto 16px;
  }


}


/* landscape mobile */
@media (max-width: 1000px) and (max-height: 666px) and (orientation: landscape){
  nav.navbar .navbar-collapse.show{
    /* height: calc(100% - 40px); */
    height: 252px;
    overflow: scroll;
  }
}
@media (max-height:440px){
  ul.socmed{
    display: none;
  }
}
@media (min-width: 768px){
  section.pilarmob{
    display: none;
  }
}



/* bouncing blobs */
@media (max-width: 1200px) {
  .bouncing-blobs-glass {
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
  }
}

@media (max-width: 500px) {
  .bouncing-blob {
    width: 24vw;
  }
  .bouncing-blob--white {
    width: 24vw;
  }
  .bouncing-blobs-glass {
    backdrop-filter: blur(90px);
    -webkit-backdrop-filter: blur(90px);
  }

}

/* bouncing blobs */