.brand-wrapper .row_brand .col-left,

    .brand-wrapper .row_brand .col-right
    
    {

        display: flex;

        flex-direction: column;

        justify-content: center;

    }

    .brand-wrapper .border-left {

        border-left: 2px solid black !important;
    } 

    .brand-wrapper .muri img {

        max-height: 75px;

    }

    .box-detail {

        display: flex;

        align-items: center;

        padding: 0.5rem 0.5rem;

        justify-content: center;

    }

    .box-detail img {

        max-height: 15px;

    }

    .canter-label {

        padding-right : 0px !important;

    }

    @media (min-width: 768px) {

        .box-font {

            font-size: 10px;

        }

        .box-detail {

            padding: 0.5rem 0.25rem;

        }

    }

    @media (max-width: 576px) {

        .box-detail {

            padding: 0.75rem 0.5rem;

            margin-bottom: 1rem;

        }

        .box-font {

            font-size: 2.8vw;

        }
    }

    @media (min-width: 1280px) {

        .box-font {

            font-size: 14px;

        }
    }

    @media (max-width: 768px) {

      .canter-product-logo {

        font-size: 24px !important;

      }

      /* resizing banner for mobile */

      .bigBanner {

        min-height: 21.5vh !important;

      }

      /* reduce empty space for mobile */

      section {

        min-height: auto !important;

      }


    }

    /* resize banner for Ipad devices */

    /* iPad Portrait */

    @media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation : portrait) {

      .bigBanner {

        min-height: 30vh !important;

      }

      section {

        min-height: auto !important;

      }

    }

    /* iPad Landscape */

    @media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: landscape) {

      .bigBanner {

        min-height: 60vh !important;

      }

      section {

        min-height: auto !important;

      }

    }

    /* Galaxy Fold Open Fold */

    @media only screen and (device-width: 717px) and (device-height: 512px) {

      .bigBanner {

        min-height: 55vh !important;

      }

    }


@font-face {

  font-family: mmc-regular;

  src: url(../../../../fonts/mmc-office-regular.ttf);

}

@font-face {

  font-family: mmc-bold;

  src: url(../../../../fonts/mmc-office-bold.ttf);

}

body,

html {

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  font-family: mmc-bold;

}

section {

  max-width: 100%;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

.active {

  color: rgb(223, 182, 2);

}

.activeRed {

  color: #ed0000;

}

.bg-black {

  background-color: #000;

}

.bg-red {

  background-color: #ed0000;

}

.bg-yellow {

  background-color: rgb(223, 182, 2);

}

.bigBanner {

  background-image: url('../../fusofighter-mobile.jpg');

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}

.bigBannerCaption {

  margin-top: 4vh;

}

.black {

  color: #000;

}

.btn-myPrimary {

  color: #212529;

  background-color: #efce39;

  border-color: #efce39;

}

.btn-myPrimary:hover {

  color: #fff;

  background-color: #efce39;

  border-color: #efce39;

}

.carCard {

  overflow-x: hidden;

}

.card-img-mobil {

  width: 65%;

}

.card {

  border: none;

  border-radius: 15px !important;

}

.card-mobile-app,

.card-header-mobile-app,

.card-footer-mobile-app {

  background-color: transparent;

}

.card-header-mobile-app {

  border-top: 3px solid #ed0000;

  border-bottom: none;

}

.copyright {

  margin-top: 1rem;

}

.cp {

  cursor: pointer;

}

.dark-yellow {

  color: #bb9800;

}

.footerLCV,

.footerCV {

  margin-top: 1rem;

}

#footer .btn-myPrimary {

  background-color: #ed0000;

  border-color: #ed0000;

}

.fs11 {

  font-size: 11px;

}

.fs12 {

  font-size: 12px;

}

@media (max-width: 768px) {
  .fs12-sm {
    font-size: 12px !important;
  }
  .fs11-sm {
    font-size: 11px !important;
  }
}

.fs14 {
  font-size: 14px;
}

.fs15 {
  font-size: 15px;
}

.fs17 {
  font-size: 17px;
}

.fs18 {
  font-size: 18px;
}

.fs19 {
  font-size: 19px;
}

.fs20 {

  font-size: 20px;

}

.fs26 {

  font-size: 26px;

}

.fs35 {

  font-size: 35px;

}

.fs38 {

  font-size: 38px;

}

.fs40 {

  font-size: 40px;

}

.fs50-scaled {

  font-size: 46px;

}

.gray {

  color: #bebebe;

}

.header {

  display: flex;

  align-items: center;

  height: 71px;

  max-width: 100%;

  border-bottom: 4px solid #efce39;

  padding-left: 10px;

  padding-right: 10px;

  transition: top ease-in-out 0.2s;

  background-color: #fff;

}

.inactiveHeader {

  top: -95px !important;

}

.karoseri {

  overflow-x: hidden;

}

.lh-1 {

  line-height: 1;

}

.listMobilFooter {

  text-align: center;

}

.logoFM {

  width: 45%;

}

.logoFUSO {

  width: 45px;

  margin-right: auto;

}

.logoSardana {

  width: 140px;

}

.logoMedsos {

  font-size: 22px;

}

.menu {

  z-index: 9999;

  width: 17rem;

  height: 100vh;

  margin-right: -17rem;

  background-color: #fff;

  margin-left: auto;

  transition: all 0.3s ease-in;

  position: fixed;

  top: 0;

  right: 0;

}

.menuActive {

  margin-right: 0;

}

.menuOverlay {

  z-index: 9999;

  overflow: hidden;

  height: 100vh;

  width: 100%;

  position: fixed;

  top: 0;

}

.menuSeparator {

  border-left: 5px solid #ed0000;

}

.menu a {

  /* color: #212529; */

  text-decoration: none;

  transition: all 0.2s;

}

.menu a:hover {

  color: #ed0000;

}

.mesin {

  display: flex;

  justify-content: center;

  width: 65%;

}

.mmc-bold {

  font-family: mmc-bold;

}

.mmc-regular {

  font-family: mmc-regular;

}

/* .mt-header {

  margin-top: 71px;

} */

.mt11 {

  margin-top: 11vh;

}

/* .mt-header {

  margin-top: 92px;

} */

.mt-header {

  margin-top: 85px;

}

@media (max-width: 700px) {
  .mt-header {
    margin-top: 55px !important;
  }
}

.noScroll {

  overflow: hidden;

}

.overlayBg {

  max-height: 100vh;

  background-color: rgba(0, 0, 0, 0.5);

}

.sideBarActive {

  display: flex !important;

}

.slick-next {

  right: 5px;

  opacity: 0.2;

  -moz-animation: slickNext 2s infinite;

  -webkit-animation: slickNext 2s infinite;

  animation: slickNext 2s infinite;

}

.slick-prev {

  left: 5px;

  opacity: 0.2;

  z-index: 2;

  -moz-animation: slickPrev 2s infinite;

  -webkit-animation: slickPrev 2s infinite;

  animation: slickPrev 2s infinite;

}

.slick-prev:before,

.slick-next:before {

  color: #000;

}

.spacer {

  margin-top: 5rem;

}

.white {

  color: #fff;

}

.w-30 {

  width: 30%;

}

.w-40 {

  width: 40%;

}

.w-60 {

  width: 60%;

}

.w-65 {

  width: 65%;

}

.yellow {

  color: #efce39;

}

#hoverableSidenav a {

  position: fixed;

  left: -50px;

  transition: 0.3s;

  padding: 5px;

  width: 120px;

  text-decoration: none;

  font-size: 17px;

  color: white;

  border-radius: 0 5px 0 0;

  display: flex;

  align-items: center;

  z-index: 10000;

}



#hoverableSidenav a:first-child {

  left: -50px;

  padding: 5px 0;

}



#hoverableSidenav a:nth-child(2),

#hoverableSidenav a:nth-child(4) {

  left: -80px;

  width: 150px;

  border-radius: 0;

}



#hoverableSidenav a:nth-child(3) {

  left: -100px;

  width: 170px;

  padding: 10px 5px;

  border-radius: 0;

}



#hoverableSidenav a:last-child {

  border-radius: 0 0 5px 0;

}



#hoverableSidenav i {

  font-size: 40px;

}



#hoverableSidenav a:first-child i {

  font-size: 50px;

}



#hoverableSidenav a:hover {

  left: 0; /* On mouse-over, make the elements appear as they should */

}



#hoverableSidenav a i {

  display: inline-block;

  margin: 0 15px;

}



/* The about link: 20px from the top with a green background */

#whatsapp {

  top: 36%;

  background-color: #4caf50;

}



#booking {

  top: 45.1%;

  background-color: #2196f3;

}



#brochure {

  top: 54%;

  background-color: #f44336;

}



#simulasi {

  top: 63%;

  background-color: #FFA500;

}

#dealer-lokasi {

  top: 72%;

  /* top: 64%; */

  background-color: #555;

}




#popupWhatsapp {

  color: black;

  font-family: mmc-regular;

  z-index: 20000;

}



.card-img-custom {

  filter: brightness(0.6);

}



.card-brochure {

  cursor: pointer;

}



#popupBrochure {

  z-index: 15000;

}



.media-mobile {

  display: none;

}



@media (min-width: 768px) {

  .bigBanner {

    background-image: url('../../fusofighter.png');

  }

  .bigBannerCaption {

    margin-top: 11vh;

  }

  .copyright {

    margin-top: 0.25rem;

  }

  .footerLCV,

  .footerCV {

    margin-top: 0;

  }

  .fs50-scaled {

    font-size: 50px;

  }

  .listMobilFooter {

    text-align: left;

  }

  .logoFighter {

    width: 20%;

  }

  .logoFM {

    width: 15%;

  }

  .logoFUSO {

    width: 50px;

  }

  .logoMobil {

    margin-left: 130px;

  }

  .logoSardana {

    width: 190px;

  }

  .logoMedsos {

    font-size: 32px;

  }

  .mesin {

    display: block;

    width: 100%;

  }

  .spacer {

    margin-top: 10rem;

  }

}

@media (min-width: 992px) {

  .bigBanner {

    min-height: calc(100vh - 92px);

    height: auto;

  }

}

@media (min-width: 1920px) {

  .menuOverlay .overlayBg .container {

    margin-right: 0;

  }

}

@media (max-width: 576px) {

  #hoverableSidenav {

    display: none;

  }



  .media-mobile {

    display: block;

    position: fixed;

    left: 0;

    bottom: 0;

    padding: 10px 20px 0;

    color: white;

    background: black;

    z-index: 1000;

  }



  .icon-media-mobile {

    border-radius: 15px 15px 0 0 !important;

    border-top: 4px solid rgb(187, 17, 7);

    border-bottom: none;

  }

}

@keyframes slickPrev {

  0%,

  20%,

  50%,

  80%,

  100% {

    transform: translateX(0);

  }

  40% {

    transform: translateX(-30px);

  }

  60% {

    transform: translateX(-15px);

  }

}

@keyframes slickNext {

  0%,

  20%,

  50%,

  80%,

  100% {

    transform: translateX(0);

  }

  40% {

    transform: translateX(30px);

  }

  60% {

    transform: translateX(15px);

  }

}

.red-barrrs {
  height: 5px;
  width: 45%;
  background-color: #ed0000;
}

/* to prevent some weird stylings at mozilla */
.swiper .swiper-slide {
  overflow: visible !important;
}