@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

.pakeiniaja{
	margin-left: 0px !important;
	padding-left: 10px !important;
}
ul {
  margin-left: -21px !important;
}
section, .seksi {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
}
a, a:hover, a:visited {
  color: inherit;
  text-decoration: none;
}
.form-group {
    margin-bottom: 0.5rem;
}.form p{
    margin-bottom: 0.5rem;
}
.mt20{ margin-top:20%;}
.kontak-kami a {
    padding: 10px 25px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: .1em;
    border-radius: 32px;
    background: #007bff;
    text-align: center;
}
.txt-produk{
	font-size:1.3rem;
}
.tittle_product{ margin-top: 10%; font-size: 2.3rem; display: none}
.btn-lg {
  padding: 0.5rem 2rem;
  font-size: 24px;
  border: 1px solid #fff;
  box-shadow: 0px 3px 1px rgba(16, 16, 16, 0.6);
}
#section1, #section1 .fp-slide, #section1 .fp-tableCell {
  height: auto !important;
}
@keyframes fadingout {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
.txshadow, .konfirmasibox label {
  text-shadow: 0px 3px 1px rgba(16, 16, 16, 0.6);
}
.playfadeout {
  animation-name: fadingout;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
html, body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0px;
  background-color: #f8f8f8;
  height: 100%;
	width: 100%;
  overflow-x: hidden;
}

.accordion {
	width: 100%;
}

.card-header {
	background-color: rgba(12, 77, 161, .8);
}
.card-body {
	background-color: rgba(12, 77, 161, .5);
}
.headerhome {
  display: none;
}
.isi-cerita, .isi-video, .isi-tnc, .mapbox, .thumbcmbox, .plus, .desc-produk {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  margin-bottom: 30px;
  font-size: 16px;
}
.isi-tnc {}
.rightbar {
  color: #fff;
  background-color: #f8f8f8;
  height: 100vh;
  display: block;
  position: relative;
}
.logosec {
  width: auto;
  height: auto;
  position: relative;
  display: block;
  margin: 0 auto;
  padding-top: 20px;
  margin-bottom: 50px;
}
.navmobile {
  display: none;
  width: 100%;
  height: auto;
  position: relative;
  background-color: #022C80;
}
.nav-link {
  font-size: 20px;
}
.navbar-light {
  color: #fff !important;
}
.mainmenu {
  width: 225px;
  height: auto;
  position: relative;
  display: block;
  font-size: 20px;
}
.headers {
  width: 100%;
  height: 211px;
  background: url('../images/bg-topbar_01.jpg') top left no-repeat;
  background-size: cover;
  position: relative;
  display: block;
  color: #fff;
  z-index: 2;
}
.menuhead {
  width: 100vw;
  height: auto;
  display: block;
  position: fixed;
  top: 0px;
  z-index: 99;
  color: #000;
}
.menu-utama {
  background: none;
  border: none;
}
.menu-utama a {
  font-size: 25px;
  font-weight: 800;
}
.div_logo {
  width: auto;
  height: auto;
  position: relative;
  display: block;
	text-align: left;
}
.mainmenu {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  font-size: 20px;
  margin: 0 auto;
  margin-top: 20px;
  font-weight: 600;
}
.mainmenu div {
  padding: 0 25px;
  color: #9A9A9A;
}
.mainmenu a:hover {
  color: #fff;
}
.slider_container {
  width: 100%;
  height: 920px;
  display: block;
  position: relative;
}
.tahuntx {
  padding: 10px 0;
  font-size: 20px;
  text-align: center;
  display: block;
}
.tahuntx a {
  color: #a8a8a8;
}
.tahuntx a span {
  margin: 0 10px;
}
.tahuntx > .active {
  color: #fff;
}
.articlebox {
  padding-top: 100px;
}
.vid-thumb {
  width: 100%;
  max-height: 178px;
  position: relative;
  display: block;
  background-color: #f8f8f8;
  margin-bottom: 20px;
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.vid-desc {
  width: 100%;
  max-height: 288px;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.carousel-item, .slider_container {
  height: 600px;
}
.carousel .carousel-item {
  background-size: contain;
}
.bgslide-02 {
  background: url('../images/bg-slider02.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-03 {
  background: url('../images/bg-slider03.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-04 {
  background: url('../images/bg-slider04.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-05 {
  background: url('../images/bg-slider01.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-06 {
  background: url('../images/bg-slider02.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-07 {
  background: url('../images/bg-slider03.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-08 {
  background: url('../images/bg-slider04.jpg') top center no-repeat;
  background-size: cover;
}
.bgslide-09 {
  background: url('../images/bg-slider04.jpg') top center no-repeat;
  background-size: cover;
}
.copyright {
  width: 100%;
  height: auto;
  padding: 10px;
  background-color: #032D81;
  font-size: 12px;
  text-align: center;
  color: #fff;
}
.peringatan {
  padding: 10px;
  height: auto;
  color: #000;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 12px;
  background-color: #fff;
}
.bg_detailcerita, .bg_produk, .bg_konfirmasi {
  background: url('../images/bg-slider02.jpg') top center no-repeat;
  background-size: cover;
  padding-top: 50px;
}
.bg_produk {
  background: #f8f8f8;
  color: #000;
}
.bg_konfirmasi {
  background: url('../images/bg-konfirmasi.jpg') top center no-repeat fixed;
  background-position: 0vw 0vh;
  background-size: cover;
  height: 80vh;
}
.bg_splash {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  background: url('../images/bg_splash.jpg') center no-repeat;
  /*background-position: 0vw -180px; */
  background-size: auto;
}
.bg-header-perjalanan {
	background: url('../images/bg-teen.jpg') center 20% no-repeat;
	background-size: cover;
}
.isicontent {
  height: 100vh;
  width: 100%;
  position: relative;
  display: block;
}
.konfirmasibox {
  font-size: 22px;
  margin-bottom: 30px;
}
.m1_input {
  margin: 0 0.5rem;
}
.forbiddenbox {
  height: 75vh;
}
/* MENU UTAMA */
.clipthumb01, .clipthumb02, .clipthumb03, .clipthumb04 {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  background: url('../images/clip01.jpg') 50% 20% no-repeat;
  background-size: cover;
  transform: scale(1);
  transition: all ease .5s;
}
.clipthumb02 {
  background: url('../images/clip02.jpg') top center no-repeat;
  background-position: 0px 50%;
  background-size: cover;
}
.clipthumb03 {
  background: url('../images/clip03.jpg') top center no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.clipthumb04 {
  background: url('../images/clip04.jpg')  right no-repeat;
  background-size: cover;
}
.clipthumb01:hover, .clipthumb02:hover, .clipthumb03:hover, .clipthumb04:hover {
  transform: scale(1.2);
  transition: all ease .5s;
}
.menutx01, .menutx02, .menutx03, .menutx04 {
  width: auto;
  height: auto;
  position: absolute;
  bottom: 5%;
  margin-left: 5%;
  font-size: 2rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  text-shadow: 1px 4px 0px #032D81;
  line-height: 40px;
}
.menutx02 {
  margin-left: 10%;
}
.menutx03 {
  margin-left: 10%;
}
.menutx04 {
  margin-left: 10%;
}
/* END MENU UTAMA */
.hubungi-kami {
	background: url('../images/bg_kontak.jpg') center no-repeat;
	background-size: cover;
	padding: 50px 0;
}
.suarabox {
  background: url('../images/bg-suara-konsumen.jpg') center no-repeat;
  background-size: cover;
  padding-top: 60px;
  font-size: 16px;
}
.form-group label {
  text-transform: uppercase;
}
.separates-border {
  width: 100%;
  height: 5px;
  position: relative;
  display: block;
  margin: 20px 0px;
  background-color: #032D81;


}
.card {
  background: rgba(255, 255, 255, .1)
}
.cmbox {
  width: auto;
  height: auto;
  position: relative;
  display: block;
  margin: 0 auto;
}
.thumbcmbox {
  margin-bottom: 0px;
  font-size: 14px;
}
.gedein {
  transform: scale(1.5);
  order: 1;
  z-index: 3;
  position: absolute;
  top: 0px;
}
.plus {
  position: absolute;
  right: 20px;
  top: 20px;
  margin: 0;
  z-index: 2;
  box-shadow: 0 0 0 0 #fff;
  text-align: right;
  display: inline-block;
}
.upscale {
  position: absolute;
  z-index: 11;
  top: 0px;
  left: 0px;
  margin: 0 auto;
  /*transform: scale(1.1);*/
  transition: all ease-out .2s;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .95);
  order: 1;
  text-align: center;
  color: #fff;
max-width: 100%;
}
.desc-produk {
  margin-bottom: 0px;
  margin-top: 20px;
  text-align: center;
}
.desc-rokok {
  display: none;
	font-size: 1.3rem;
}
.showup {
  display: block;
}
.tutup01{
  z-index: 2;
  width: auto;
  height: auto;
  position: absolute;
  padding-left: 10px;
  display: none;
  top: 20px;
  right: 20px;
} 
.tutup02, .tutup03, .tutup04 {
  z-index: 2;
  width: auto;
  height: auto;
  position: absolute;
  padding-left: 10px;
  display: none;
  top: 0px;
  right: 20px;
}
.ada {
  display: block !important;
}
.hilang {
  display: none;
}
/* FLEXING */
.flexbox {
  display: flex;
  width: 100%;
  height: auto;
  position: relative;
  flex-direction: column;
}
.fleximg {
	display: none;
}
.fleximg, .flxtxt {
  width: auto;
  height: auto;
  position: relative;
  margin: 0 50px;
}
.fleximg img:first-child:hover {
  transform: scale(1.05);
  transition: all ease-out .5s;
}
.flexrow {
  top: 40%;
  transform: translateY(-50%);
  flex-direction: row;
  justify-content: center;
}
.flexrow > .fleximg {
  order: 2;
}
.flexrow > .flxtxt {
  order: 1;
  text-align: left;
	width: 50%;
}
.custom-control-label::before, .custom-control-label::after {
  margin-top: .5rem;
}
.scrolldown {
  position: absolute;
  height: auto;
  width: 100vw;
  display: block;
  bottom: 50px;
  text-align: center;
}
.input_form {
  border: 5px solid #007bff !important;
}
.pwh {
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.pwh-popup {
  color: #fff;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  width: 100%;
  font-size: 50px;
  text-align: center;
  z-index: 99;
	display: none;
}
.pwh-02 {
  position: absolute;
  bottom: 0px;
  width: 100vw;
  display: block !important;
}
.pwh-popup img {
  max-width: 100%;
}
.owl-carousel {
  padding: 60px 0;
}
.kv-thumb {
  width: 100%;
  height: 150px;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 10px;
}

.kv-thumb img {
	height: 100%;
	margin: 0 auto;
}
.slick-center {
	width: 100%;
}


.slick-current .kv-thumb {
	visibility: hidden;
}
#slide-story {
	 margin-top: 150px;
}
#nav-story {
	margin-top: -280px;
}
.nav-thumb .slick-current img {
  border: 5px solid #fff;
	text-align: center;
}
.kv-image {
	margin: 0 auto;
	max-height: 360px;
}
#brandstory {
  height: 120vh;
  position: relative;
  display: block;
  padding: 120px 0 !important;
  margin-bottom: 100px;
}

.value-box-01A {
	background: url('../images/value-01.jpg') top center no-repeat;
	background-size: cover;
	height: 100vh;
}
.value-box-01B {
	background: url('../images/value-01B.jpg') top center no-repeat;
	background-size: cover;
	height: 100vh;
}
.value-box-02A {
	background: url('../images/value-02.jpg') top center no-repeat;
	background-size: cover;
	height: 100vh;
}
.value-box-02B {
	background: url('../images/value-02B.jpg') top center no-repeat;
	background-size: cover;
	height: 100vh;
}
.value-content {
	background-color: rgba(0,0,0,.5);
	border-radius: 10px;
	padding: 21px;
}
.age-icon {
	text-align: right;
}

.aktif {
	font-weight: bolder;
	color: #fff;
}
.noaktif {
	color:#e5e5e5!important;
}

.modal-backdrop.show {
	opacity: .3;
}

.modal-content.prod {
	background: none;
	line-height: 18px;
}
.modal-lg.prod {
	max-width: 90vw;
}

/* MEDIA QUERYES */
/* BREAK POINTS */
@media screen and (max-width: 1366px) {
  .menutx03, .menutx04 {
    margin-left: 15%;
    bottom: 20%;
  }
  .menutx01 {
    bottom: 10%;
  }
}
/*// Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.size_khu{ font-size :22px;}
.text-dark {
    color: #fff !important;
}
.mt20{ margin-top:0%;}
.desc-rokok {
   	font-size: 0.9rem;
	line-height: 21px;
}
.fleximg, .flxtxt {
  width: auto;
  height: auto;
  position: relative;
  margin: 0px;
}
.konfirmasibox {
  font-size: 18px;
  margin-bottom: 30px;
}
	.konfirmasibox h3{
		font-size :1.3rem;
	}
.custom-control-label::before, .custom-control-label::after {
    margin-top: 0rem;
}
.form-control-lg {
    height: calc(1.2em + 1rem + 2px);
    padding: 0.2rem 1rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 0.3rem;
    width: 100%;
    margin: 0 auto;
}
	 .kv-thumb {
		height: 50px;
		padding: 0 5px;
	}
	/* .kv-thumb img {
		width: 100%
	} */
	.age-icon {
		text-align: center;
	}
	#slide-story {
		display: block;
		margin-top: 100px;
	}
	#nav-story {
		margin-top: -70px;
	}
  .bg_splash {
    background-size: cover;
  }
  .pwh-02 {
    display: block !important;
	position: relative;
  }
  .pwh {
    display: none;
  }
  .peringatan {
    text-align: center;
  }
  .carousel-indicators {
    margin: 0;
    width: 100vw;
    justify-content: flex-start;
  }
  .tahuntx {
    display: none;
  }
  .headers {
    height: 130px;
  }
  .navmobile {
    display: block;
  }
  .mainmenu, .menuhead {
    display: none !important;
  }
  .vid-thumb {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .articlebox {
    padding-top: 20px;
  }
  .vid-desc {
    padding: 0 20px;
    height: auto;
    margin-bottom: 20px;
  }
  .slider_container {
    background-size: cover;
  }
  .carousel-item, .slider_container {
    height: 1500px;
  }
  .navmobile ul {
    margin-left: 0px !important;
  }
  .div_logo {
    text-align: center;
  }
  .sidebar {
    display: none;
  }
  .isicontent {
    height: auto;
  }
  .rightbar {
    height: auto;
    display: block;
  }
  .menutx01, .menutx02, .menutx03, .menutx04 {
    margin-left: 5%;
    font-size: 1.5rem;
    line-height: 25px;
  }
  .headerhome {
    display: block;
  }
  .flexrow {
    flex-direction: column;
    justify-content: center;
  }
  .flexrow > .fleximg {
    order: 2;
    width: 100%;
  }
  .fleximg img {width :70%!important}
  .flexrow > .flxtxt {
    order: 1;
    width: 100%;
    text-align: center!important;
	  padding: 10px;
  }
  .scrolldown {
    position: absolute;
    height: auto;
    width: 100vw !important;
    display: block;
    bottom: 35vh;
    margin: 0 auto;
  }
  .bg_konfirmasi {
    background-position: 0vw 0vh;
  }
.value-box-02B {
	background: url('../images/value-02B.jpg') top center no-repeat;
	background-size: 100%;
	height: 100vh;
}
	.pwh-popup {
		display: block;
}
} /* END MOBILE */
@media screen and (max-width: 320px) {
  .tahuntx {
    margin-bottom: 20px;
    display: block;
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    background-color: #444;
  }
}
.pwh-02 {
  display: none;
}
.bgslide-01 {
  padding: 0 10px;
}
.menuhead {
  display: none;
}
@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) {

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) {
	.bg_splash {
		background-size: cover;
	}
	.clipthumb04 {
		background-position: center;
	}
	.mainmenu {
		display: none !important;
	}
	.navmobile {
		display: block;
	}
	.navbar-nav .nav-link {
		padding-left: 25px;
	}
}
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	
}
/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {}
/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {}
/*// Extra large devices (large desktops, 1200px and up)*/
@media (height: 550px) and (width: 1280px ){
	.kv-image {
	margin: 0 auto;
    max-height: 330px;
	}
}