@font-face {

  font-family: mmc-bold;

  src: url(fonts/MMCOFFICE-Bold.ttf);

}



@font-face {

  font-family: mmc-regular;

  src: url(fonts/MMCOFFICE-Regular.ttf);

}



@font-face {

  font-family: mmc-medium;

  src: url(fonts/MMC-Medium.ttf);

}



* {

  padding: 0;

  margin: 0;

}



body {

  font-family: mmc-regular;

}



.f14 {

  font-size: 14px;

}



.mmc-medium {

  font-family: mmc-medium;

}



.fixed-body {

  position: fixed;

}



.mauto {

  margin: auto;

}



.display-none {

  display: none !important;

}



.font-mmc-bold {

  font-family: mmc-bold;

}



.wrapper {

  position: relative;

  overflow-x: hidden;

  background: black;

  color: white;

}



.fullsize-background {

  overflow: hidden;

  position: relative;

  height: 100vh;

}



.red {

  background-color: #333;

}



.green {

  background-color: #444;

}



.container-pause {

  background: rgba(255, 255, 255, 0.1);

  width: 2.5em;

  height: 2em;

  position: absolute;

  top: 10%;

  color: white;

  left: 5%;

  display: flex;

  cursor: pointer;

}



.container-pause:hover {

  background: rgba(255, 255, 255, 0.3);

}



.container-pause i {

  margin: auto;

}



/* Button Custom */

.button-book {

  display: flex;

  width: 200px;

  height: 50px;

  border: 2px solid white;

  background: linear-gradient(-60deg, #fff 50%, transparent 50%);

  cursor: pointer;

  background-size: 250% 100%;

  background-position: bottom left;

  transition: all 0.1s ease-out;

  text-decoration: none;

  margin: auto;

}



.button-book-black span,

.button-book span,

.button-test-drive span {

  color: white;

  margin: auto;

  letter-spacing: 2px;

}



.button-book-black:hover,

.button-book:hover,

.button-test-drive:hover {

  text-decoration: none;

  background-position: bottom right;

  color: #000;

}



.button-book-black:hover span,

.button-book:hover span,

.button-test-drive:hover span {

  color: black;

}



.button-book-black,

.button-test-drive {

  display: flex;

  width: 200px;

  height: 50px;

  border: 2px solid white;

  background: linear-gradient(-60deg, #fff 50%, black 50%);

  cursor: pointer;

  background-size: 250% 100%;

  background-position: bottom left;

  transition: all 0.1s ease-out;

  text-decoration: none;

}



.button-test-drive {

  margin: auto;

}



.button-book-black:hover,

.button-test-drive:hover {

  border: 2px solid black;

}



.bg-2 {

  display: flex;

  background-image: url(bg-vw.webp);

  position: relative;

}



.bg-2::after {

  content: '';

  display: block;

  background-image: linear-gradient(

    to left,

    rgb(0, 0, 0) 0%,

    rgba(0, 0, 0, 0) 60%

  );

  width: 100%;

  position: absolute;

  bottom: 0;

  height: 100%;

}



.container-bg-2 {

  margin: auto;

  transform: translateX(70%);

  text-align: center;

  color: white;

  position: relative;

  z-index: 1;

  line-height: 40px;

  letter-spacing: 1px;

}



.grey {

  color: #c8c7c7;

}



.bg-3 {

  margin: 80px auto;

  text-align: center;

  overflow-x: hidden;

}



.bg-3 .swiper-container .card {

  border-radius: 5px;

}



.bg-3 img {

  width: 100%;

}



.swiper-slide .card {

  width: 100%;

  height: 100%;

  overflow: hidden;

}



#popup,

#popupBrochure {

  position: fixed;

  z-index: 4;

  top: 50%;

  left: 50%;

  width: 45%;

  padding: 40px;

  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);

  background: #fff;

  visibility: hidden;

  opacity: 0;

  transition: 0.7s;

  transform: scaleX(-1) translate(-50%, -50%);

  -webkit-transform-origin: 0 0;

  -moz-transform-origin: 0 0;

  transform-origin: 0 0;

}



#popup.active-popup,

#popupBrochure.active-popup {

  transform: scaleX(1) translate(-50%, -50%);

  visibility: visible;

  opacity: 1;

  transition: 0.7s;

}



@keyframes ZoomRotate {

  from {

    opacity: 0;

    transform: scale(0) rotate(0);

  }

  to {

    opacity: 1;

    transform: scale(1) rotate(720deg);

  }

}



.active {

  filter: blur(20px);

  position: relative;

  z-index: 3;

  pointer-events: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;

}



.header-pajero {

  opacity: 0;

  transform: translateX(600px);

  transition: 1s;

}



.translate-x {

  transform: translateX(0) !important;

  opacity: 1 !important;

}



.grey {

  transform: translateY(40px);

  opacity: 0;

  transition: 1s 1s;

}



.button-book-now,

.harga-pajero {

  opacity: 0;

  transform: translateY(40px);

  transition: 1s;

}



.translate-y-book {

  transform: translateY(0);

  opacity: 1;

}



.translate-y {

  transform: translateY(0) !important;

  opacity: 1 !important;

}



.bg-5 {

  overflow: hidden;

  position: relative;

}



.img-bg-5 {

  position: relative;

  width: 100%;

  margin-top: -100px;

  opacity: 0;

  transition: 3s;

}



.img-bg-5.fade-out {

  opacity: 1;

}



.container-bg-5 {

  position: absolute;

  top: 0;

  left: 0;

  margin-top: 80px;

  color: white;

  max-width: 400px;

  margin-left: 100px;

  opacity: 0;

  transform: translateY(40px);

  transition: 1s;

}



.container-bg-5 p {

  margin-bottom: 0 !important;

}



.specs {

  transform: translateX(-60px);

}



.e-brochure {

  transform: translateX(-55px);

}



.close {

  font-size: 1.5rem;

  cursor: pointer;

}



.slick-slide.container-outside {

  display: flex !important;

  align-items: center;

}



.bg-4 {

  margin-top: 80px;

}



.container-bg-4 {

  cursor: pointer;

}



.bg-4 .newsletter-container {

  overflow-x: hidden;

  opacity: 0;

  transform: translateX(120%);

  transition: 0.5s;

}



.container-bg-4 .img-features {

  width: 40%;

}



.container-bg-4 .container-inside {

  padding: 20px;

}



.newsletter-container {

  background: black;

  color: white;

  padding: 30px 0;

}



.newsletter {

  max-width: 1110px;

  margin: auto;

}



.copyright {

  position: absolute;

  bottom: 0;

  width: 100%;

  text-align: center;

  margin-bottom: 0.5rem;

}



/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



/* Firefox */

input[type='number'] {

  -moz-appearance: textfield;

}



.iframe-pajero-sport {

  width: 100%;

  height: 100vh;

}



.interior,

.exterior {

  transform: translateY(60px);

  opacity: 0;

  transition: 1s;

}



.label-features {

  transform: translateX(-300px);

  opacity: 0;

  transition: 1s;

}



.palet {

  border-radius: 50%;

  width: 40px;

  height: 40px;

  cursor: pointer;

  border: 1px solid #aaa;

}



.container-grid {

  width: 90%;

  margin: 50px auto;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 20px;

}



.container-grid .item {

  text-align: center;

  transform: translateY(-40px);

  opacity: 0;

  transition: 1s;

}



.container-grid .item img {

  width: 100%;

  cursor: pointer;

}



.container-grid .item .color img {

  width: 30px;

  height: 30px;

  margin-right: 5px;

}



.container-grid .item span {

  font-weight: bold;

}



.container-grid .item .color {

  display: flex;

  justify-content: center;

  margin-top: 0.5rem;

}



.container-grid .item .color span {

  margin-right: 10px;

}



.container-grid .item.muncul {

  opacity: 1;

  transform: translateY(0);

}



.container-varian {

  overflow-x: hidden;

}



.varian-line {

  width: 0;

  border-top: 2px solid rgba(255, 255, 255, 0.5);

  transition: 1s;

}



.varian-line.full {

  width: 100%;

}



.varian {

  transform: translateX(calc(100% + 200px));

  transition: 1s;

}



.footer {

  color: white;

  overflow-x: hidden;

  background: black;

}



.footer a {

  color: white;

  text-decoration: none;

}



.footer a:hover {

  color: #00fdfd;

}



.footer ul {

  display: flex;

  justify-content: space-evenly;

  font-size: 20px;

  width: 82%;

  margin: auto;

}

.footer ul li {

  list-style: none;

}


.footer .tetap {

  font-size: 18px;

}



.swiper-container.swiper-container-interior,

.swiper-container.swiper-container-exterior {

  z-index: 0;

}



.lb-data .lb-caption {

  font-size: 20px;

}



.video-desktop {

  display: block;

}



.video-mobile {

  display: none;

}



.f20 {

  font-size: 20px;

}



.color-black {

  color: black;

}



.slick-dots li button::before,

.slick-dots li.slick-active button::before {

  color: white;

}



.slick-dots li button {

  background: transparent;

}



.container-review {

  /* background: linear-gradient(

    90deg,

    rgba(0, 0, 0, 0) 0%,

    rgba(0, 0, 0, 0.75) 100%

  ); */

  background: linear-gradient(to right, black, gray);

  padding: 50px;

}



.container-review .swiper-slide {

  width: 80%;

}



.container-review .swiper-slide:nth-child(2n) {

  width: 60%;

}



.container-review .swiper-slide:nth-child(3n) {

  width: 40%;

}



.swiper-button-prev-custom::after,

.swiper-button-next-custom::after {

  content: 'none';

}



.swiper-button-prev-custom,

.swiper-button-next-custom {

  height: 80px;

  width: 80px;

  background: rgba(0, 0, 0, 0.3);

  border-radius: 100%;

  transform: translateY(-50%);

}



.swiper-button-prev-custom:hover,

.swiper-button-next-custom:hover {

  background: rgba(0, 0, 0, 0.6);

}



.swiper-button-prev-custom::before {

  content: '<';

}



.swiper-button-next-custom::before {

  content: '>';

}



.swiper-button-prev-custom::before,

.swiper-button-next-custom::before {

  font-family: 'Poppins', sans-serif;

  font-size: 46px;

  color: #fff;

  text-align: center;

  display: table-cell;

  vertical-align: middle;

}



@media (min-width: 769px) {

  video {

    width: 100%;

  }



  .form-test-drive {

    width: 100%;

  }



  .popup-body {

    padding: 0 20px;

  }



  .iframe-pajero-sport {

    height: 500px;

  }

}



@media (min-width: 577px) and (max-width: 768px) {

  .bg-2 {

    background-repeat: no-repeat;

    background-size: 300%;

    background-position-x: -330px;

  }



  .bg-2::after {

    background-image: linear-gradient(

      to top,

      rgb(0, 0, 0) 0%,

      rgba(0, 0, 0, 0) 100%

    );

  }



  .container-bg-2 {

    transform: translateY(0);

    letter-spacing: 2px;

  }



  .grey {

    font-size: 0.9em;

  }



  .bg-3 .swiper-container {

    width: 95%;

  }



  .overlay {

    padding: 150px 40px;

  }



  #popup,

  #popupBrochure {

    width: 80%;

  }



  .container-bg-5 {

    color: white;

    max-width: 600px;

    margin-top: 500px;

  }



  .specs,

  .e-brochure {

    transform: translateX(0);

  }



  .img-bg-5 {

    margin-top: -50px;

    width: 100%;

  }



  .form-test-drive {

    width: 100%;

  }



  .popup-body {

    padding: 0 20px;

  }



  .slick-slide.container-outside {

    flex-direction: column;

  }



  .container-bg-4 .img-features {

    width: 80%;

  }



  .newsletter-container {

    padding: 30px;

  }



  .no-whatsapp {

    display: none;

  }



  .footer .tetap {

    margin-top: 20px;

  }



  .copyright {

    font-size: 16px;

  }



  .bg-5 {

    height: 1050px;

  }



  .video-desktop {

    width: 100%;

  }



  .video-mobile {

    display: none;

  }



  .container-pause {

    top: 5%;

  }



  .iframe-pajero-sport {

    height: 500px;

  }

}



@media (max-width: 576px) {

  .video-desktop {

    display: none;

  }



  .video-mobile {

    display: block;

    width: 100%;

  }



  .mt40 {

    margin-top: 40px;

  }



  .bg-2 {

    background-size: 400%;

    background-position-x: -200px;

  }



  .header-pajero {

    padding: 0 40px;

  }



  .bg-3 .swiper-container {

    width: 95%;

  }



  .overlay {

    padding: 150px 20px;

  }



  #popup,

  #popupBrochure {

    width: 80%;

    height: 80%;

    padding: 25px;

    overflow: hidden;

  }



  #popupBrochure {

    height: auto;

  }



  .container-bg-5 {

    max-width: 576px;

    margin: 250px auto;

  }



  .padding-mobile {

    padding: 0 20px;

  }



  .popup-body {

    overflow: auto;

    height: 90%;

  }



  .slick-slide.container-outside {

    flex-direction: column;

  }



  .container-bg-4 .img-features {

    width: 100%;

  }



  .berlangganan {

    text-align: center;

  }



  .newsletter-container {

    padding: 40px 20px;

    margin-top: 80px;

  }



  .palet {

    width: 30px;

    height: 30px;

  }



  .footer .tetap {

    margin-top: 20px;

  }



  .copyright {

    font-size: 12px;

  }



  .bg-5 {

    background: black;

    height: 900px;

  }



  .khusus {

    text-align: center;

  }



  .p10 {

    padding: 0 10px;

  }



  .mt-mb {

    margin-top: 30px;

  }



  .container-pause {

    top: 7%;

  }



  .container-bg-2 {

    transform: translateX(0);

  }



  .bg-2::after {

    background: rgba(0, 0, 0, 0.6);

  }



  .bg-2 .header-pajero,

  .bg-2 .harga-pajero {

    text-shadow: 1px 1px black;

  }



  .img-bg-5 {

    margin-top: -50px;

  }



  .specs,

  .e-brochure {

    transform: translateX(0);

  }



  .container-bg-4 .img-features {

    width: 90%;

  }



  .container-review {

    padding: 20px;

  }



  .iframe-pajero-sport {

    height: 300px;

  }



  .swiper-button-prev-custom,

  .swiper-button-next-custom {

    height: 60px;

    width: 60px;

  }



  .swiper-button-prev-custom::before,

  .swiper-button-next-custom::before {

    font-size: 28px;

  }

}

@media (max-width: 380px) {
  .swiper-container-interior {
    height: 280px;
  }
}

@media (min-width: 381px) and (max-width: 539px) {
  .swiper-container-interior {
    height: 320px
  }
}

@media (min-width: 540px) and (max-width: 698px) {
  .swiper-container-interior {
    height: 410px;
  }
}

@media (min-width: 700px) and (max-width: 767px) {
  .swiper-container-interior {
    height: 270px;
  }
}

@media (min-width: 768px) and (max-width: 800px) {
  .swiper-container-interior {
    height: 285px;
  }
}

@media (min-width: 801px) and (max-width: 819px) {
  .swiper-container-interior {
    height: 205px;
  }
}

@media (min-width: 820px) and (max-width: 900px) {
  .swiper-container-interior {
    height: 210px;
  }
}

@media (min-width: 901px) and (max-width: 1023px) {
  .swiper-container-interior {
    height: 230px;
  }
}

@media (min-width: 1024px) and (max-width: 1080px) {
  .swiper-container-interior {
    height: 260px;
  }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  .swiper-container-interior {
    height: 320px;
  }
}

@media (min-width: 1281px) and (max-width: 1439px) {
  .swiper-container-interior {
    height: 340px;
  }
}

@media (min-width: 1440px) {
  .swiper-container-interior {
    height: 360px;
  }
}