body {
  overflow-x: hidden;
}

.parallax {
  /* The image used */
  background-image: url(../../../assets/gambar/b1.jpg);

  /* Set a specific height */
  min-height: 300px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.parallax label {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 70px;
  color: #fff;
}

.parallax1 {
  background-image: url("../../assets/gambar/background/bg-valve.jpg");
  min-height: 300px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  /*font-family: 'Dancing Script', cursive;*/
}

.parallax1 {
  text-align: center;
}

.parallax1 label {
  margin-top: 90px;
  font-size: 40px;
  color: #ff2134;
  font-weight: bold;
}

.parallax1 p {
  font-size: 30px;
  color: #fff;
}

.parallax2 {
  background-image: url("../../assets/gambar/background/bg-fitting.jpg");
  min-height: 300px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  /*-webkit-filter: grayscale(100%);*/
  /* Safari 6.0 - 9.0 */
  /*font-family: 'Dancing Script', cursive;*/
}

.parallax2 {
  text-align: center;
}

.parallax2 label {
  margin-top: 90px;
  font-size: 3vw;
  color: #ff2134;
  font-weight: bold;
}

.parallax2 p {
  font-size: 2vw;
  color: #fff;
}


.sliderCustomer img {
  width: 80%;
  text-align: center;
  margin: 10px;
  /*padding: 50px;*/
}

.slick-prev {
  margin-left: 40px;
  color: red;
  z-index: 100;
}

.slick-next {
  margin-right: 40px;
  color: red;
  z-index: 100;
}

.title h2 {
  font-size: 40px;
  margin: 20px;
}

.title h2 strong {
  color: #732024;
}

/*new*/
.ct img {
  width: 200px;

}

.ct a {

  text-align: center;
  text-decoration: none;
  color: #33322f;
}



.pr {
  width: 300px;
  margin: 15px;
  display: inline-block;

}

.pr:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

.pr img {
  width: 250px;
  height: auto;
  padding: 0;
  margin: 0;
}

.pr .pr-title {
  background-color: #732024;
  bottom: 0;
  padding: 5px;
  color: #fff;
}

#nm-sub {
  font-family: 'Raleway', sans-serif;

}

.menu-item {
  text-align: center;
}


.overlay {
  /* position: absolute;*/
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  overflow: hidden;
  width: 100%;
  /* height: 0;*/
  transition: .5s ease;
}

.ct:hover .overlay {
  height: 40px;
}

.ct:hover img {
  transform: scale(1.1);
  transition: 0.3s;
}

.ct label {
  font-size: 24px;
  color: #732024;
  font-weight: bold;

}

#content {
  padding: 40px;
  position: relative;
}

.pr-read {
  margin: 0 auto;
  height: auto;
  background-color: white;
  border-radius: 20px;
  display: inline-block;
}

#pr-img {
  text-align: center;
  padding: 40px;
}

#pr-img img {
  /*margin-top: 50px;*/
  width: 100%;
  height: auto;
  /*transform: scale(1.5);*/
}

.pr-read #pr-des {
  padding: 20px;

}

#pr-des span {
  display: block;
  width: 100%;
  /*or whatever width you want the effect of <hr>*/
  border-top: 1px solid #ccc;
  height: auto;
}

#pr-des #sub-cat {
  font-size: 1.5rem;
  color: #f4104b;
  font-family: 'Raleway', sans-serif;
}

#pr-des label,
#brand,
#class,
#material {
  font-size: 1rem;
}

#text {
  margin-right: 5px;
}

.errors-container{
  color: yellow !important;
  font-size: medium !important;
}

#text:after {
  content: "";
  /* This is necessary for the pseudo element to work. */
  display: block;
  /* This will put the pseudo element on its own line. */
  width: 100%;
  /* Change this to whatever width you want. */
  border-bottom: 1px solid #ff2134;
  /* This creates the border. Replace black with whatever color you want. */
}

.pr-des-cart label {
  font-weight: bold;
  color: #732024;
}


#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}



.sidebar-nav {
  position: absolute;
  top: 0;
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 0px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}

@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }

  #wrapper.toggled {
    padding-left: 0;
  }

  #sidebar-wrapper {
    width: 250px;
  }

  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }

  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }

  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}


#qty {
  width: 70px;
  padding: 10px;

}

/*.pagination .pg-item.active{
      padding: 10px;
      margin: 0;
      background-color: #732024;
      color: #fff;
      border-left: 1px solid #fff;
    }*/
/*.pagination .pg-item{
  background-color: #fff;
  border: 1px solid #732024;
  padding: 10px;
  margin: 2px;
}*/
/*.pagging ul li a:hover{
  text-decoration: none;
}
.pagging ul li a{
  color: #732024;
}*/


.slide {
  height: auto;
}

.slide img {
  width: 100%;
  height: auto;
  background-image: red;
}

.text1 {
  padding: 50px;
  position: absolute;
  width: 100%;
  color: #fff;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  font-size: 4vw;
}

/*berita*/
.cont-berita {
  /* max-height: 500px;
  overflow: hidden; */
}

.cont-berita .card {
  padding: 10px;
  border: none;
  /*margin: 2px;*/
  /* height: 200px; */
}


.sliderBerita img {
  width: 200px;
  text-align: center;
  margin: 50px;
  padding: 20px;
}

#cardBerita label {
  font-size: 18px;
}

.face.face2 p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.face.face2 span {
  font-size: 10px;
  color: grey;
}

.face.face2 title {
  font-size: 1.2rem;
}

.card {
  border: none;

}

.face.face1 {
  transform: translateY(52px);
  transition: 0.5s;
}

.content h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.face.face2 a {
  color: gray;
  font-size: 14px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid gray;
}

.face.face2 a:hover {
  color: #fff;
  background-color: gray;
  text-decoration: none;
}

.face.face2 p {
  font-size: 12px;
  text-align: justify;
  margin-bottom: 30px;
}

/* .card:hover .face1{
    transform: translateY(0px);
    transition: 0.5s;*/
}

/*end berita*/

#dateNews {
  font-size: 10px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-product {
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 6rem;
  text-shadow: 2px 2px 4px #000000;
}

.card-img-top {
  width: 100%;
  height: 15vw;
  object-fit: cover;
}

#jdl-berita {
  color: #732024;
  font-size: 18px;
}

#newsText2 {
  display: inline-block;
  max-height: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#newsText {
  display: block;
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}

#newsText::before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

#newsText::after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

#cardBerita:hover {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  cursor: pointer;
  opacity: 0.9;
}

#cardBerita label:hover {
  cursor: pointer;
}

#cardBerita {
  /*margin: 10px;*/
  overflow: hidden;
}

#welcome .card {
  border: none;
}

#welcome .card img {
  width: 50px;
  height: auto;
  margin-left: 20px;
}

/*pagination CI*/
.pagination .pg-item a {
  background-color: #fff;
  border: 1px solid #732024;
  padding: 10px;
  margin: 1px;
}

.pagination .pg-item a:hover {
  background-color: #732024;
  color: #fff;
  padding: 10px;
}

.pagination .pg-item.active {
  background-color: #732024;
  color: #fff;
  padding: 10px;
}

/*end pagination CI*/

/*about page*/
.about {
  text-align: center;
  padding: 50px;
  background-image: url('../../assets/gambar/background/paradiseperkasa.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

.about-content {
  text-align: left;
  /*transform: rotateZ(5deg);*/
  height: auto;
  background-color: #fff;
  padding: 30px;

  font-family: 'Raleway', sans-serif;
  background-image: url('../../assets/icons/logo pt.jpg');

}

/*end about page*/

/*beranda page*/
/*.sliderCustomer{*/
/*    height: 250px;*/
/*  }*/

.title {
  margin-right: 25px;
}

.parallax2 {
  font-size: 2.5rem;
  color: #fff;
}

#dateNews {
  font-size: 10px;
}

/*end beranda page*/

/*cart page*/
h3 strong {
  color: #732024;
}

.alert {

  text-align: center;
  margin: 50px 30px;
}

.form-cart {
  border: none;
  border-bottom: 1px solid gray;
}

.form-cart:focus {
  box-shadow: none;
  border-bottom: 1px solid #732024;
}

/* #btn-send-cart{
      position: sticky;
      top: 90px;
      margin-right: 20px;
    }*/
/*end cart page*/

/*contact page*/
.contact {
  padding: 40px;
}

.content {
  /*border:2px solid #732024;*/
  padding: 0px;
  /*box-shadow: 0px 2px 5px rgba(0,0,0,0.5);*/
}

.content h1 {
  color: red;
  font-weight: bold;
}

.contact h4 {
  font-size: 28px;
  margin: 0;
  padding: 0;
}

/*end contact page*/

/*product read page*/
#table-nav ul li a {
  padding: 5px 7px;
  color: #dc3545;
  margin: 1px;
  border: 1px solid #dc3545;
}

#table-nav ul .active {
  font-weight: bold;
}

#productlist thead {
  color: #fff;
  font-size: 16px;
}

.search-form {
  width: 100%;
}

.search-form .form-control {
  border-color: #e6e7ed;
  border-radius: 0;
  box-shadow: none;
  font-weight: 400;
  height: 56px;
  margin-left: 20px,

}

#page-rows-form {
  padding-left: 20px;
}

#page-rows-form label {
  line-height: 40px;
  padding-right: 10px;
}

#page-rows-form select {
  background-clip: padding-box;
  border-color: #e6e7ed;
  border-radius: 0;
  box-shadow: none;
  font-weight: 400;
  height: 56px;
  margin: 0;
  outline: 0 none;
  padding: 13px;
}

/*end product read page*/
.info-sal a {
  text-decoration: none;
  color: #fff;
}

.info-sal a:hover {
  text-decoration: none;
  color: #fff;
}

.table td.fit,
.table th.fit {
  /* white-space: nowrap; */
  width: 1%;
}


td {
  /* word-wrap: break-word;min-width: 160px;max-width: 160px; */
}

.career-text ol {
  /* list-style-position: inside; */
  margin-left: 20px;
}

.career-text ul {
  margin-left: 20px;
}

/* 
span {
  display: block;
  word-wrap:break-word;
  white-space: normal;
} */

.sub-head {
  display: flex;
  /* flex-direction: row; */
}

.sub-head i {
  /* height: 46px; */
  padding: 5px;
}

.sub-head-text {
  /* height: 46px; */
  padding: 5px;
  margin: 0;
}

.f-alias::before {
  content: '/';
}

.f-alias {
  font-style: italic;
  font-size: xx-small;
}

.f-notes::before {
  content: '*';
}

.f-notes {
  font-style: italic;
  color: #f4104b;
  font-size: small;
}

/* 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;
}

.z-radio {
  margin: 0 auto;
}

input[type="radio"].zrad {
  display: none;
}

label.z-radio {
  padding: 5px 20px;
  background-color: grey;
  border: thin solid darkgrey;
  border-radius: 15px/45px;
  color: white;
  margin: 5px;
  display: inline-block;
}

input[type="radio"].zrad:checked+label.z-radio {
  background-color: #732024;
  cursor: default;
  color: #E6E6E6;
}

.z-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.separator-section {
  cursor: pointer;
  background-color: #732024;
  color: white;
  border-radius: 5px 20px 5px;
}

.separator-section>h3 {
  /* text-align: center; */
  margin-left: 10px;
}


.zq {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
  /* box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; */
  /* box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; */
  margin-right: 5px;
}

.shadow-iso {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.header-section {
  text-align: center;
}

.header-section>h2 {
  font-size: 2.5vw;
  text-align: center;
}

.z-important {
  font-style: italic;
  color: #f4104b;
  font-size: 1vw;
}

.select2-selection {
  height: 38px !important;
}

.select2-selection>span {
  margin-top: 5px;
}

.vendor-title {
  font-size: 1rem;
  color: black;
}

.vendor-text {
  color: black;
  font-size: 1rem;
  font-weight: 500;
}

.divide-section {
  display: flex;

}

.divide-section::before,
.divide-section::after {
  content: "";
  flex: 1;
}

.section-gradient {
  align-items: stretch;
  margin: 1em 0;
  height: 2em;
  line-height: 2em;
  color: white;
  background: #732024;
}

.section-gradient:before {
  background: linear-gradient(to right, white, #732024);
}

.section-gradient:after {
  background: linear-gradient(to left, white, #732024);
}

input::placeholder {
  text-shadow: none;
  font-size: 12px;
  font-weight: 100;
}

.lb-title {
  font-size: 1em;
  font-weight: 600;
  color: black;
}

.sec_fam label {
  min-height: 62px;
}

.just-validate-error-label {
  font-size: 14px;
}

.dataTables_filter {
  float: right;
}

.img-small {
  max-height: 250px;
  max-width: 250px;
}

@media only screen and (max-width: 1000px) {
  #title-keterangan {
    display: none;
  }

  .title-choose {
    display: none;
  }

  .title-question {}
}

.fa {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media print {

  header,
  footer,
  nav,
  aside {
    display: none;
  }

  #sidebar-wrapper,
  #navbar-wrapper {
    display: none;
  }

}

.select2 {
  width: 100% !important;
}

#zsecaddt,
#zsecques {
  display: none;
}


/* customcss */
.tabs {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  background: white;
  /* padding: 50px; */
  /* padding-bottom: 80px; */
  /* width: 70%; */
  /* height: 250px; */
  /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  border-radius: 5px; */
  /* min-width: 240px; */
}

.tabs input[name=zsec] {
  background-color: #dc3545;
  display: none;
}

.tabs ul li label {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 18px;
  color: #732024;
}

.tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.tabs ul li {
  box-sizing: border-box;
  flex: 1;
  width: 25%;
  padding: 0 10px;
  text-align: center;
}

.btn-paradise {
  /* background-color: #732024 !important; */
  background-color: rgba(115, 32, 36, 0.9) !important;
  color: white !important;
  border-color: #732024 !important;
}

.btn-paradise:hover {
  background-color: rgba(115, 32, 36, 1) !important;
}

.tabs ul li label {
  transition: all 0.3s ease-in-out;
  color: #929daf;
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tabs ul li label br {
  display: none;
}

.tabs ul li label svg {
  fill: #929daf;
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  transition: all 0.2s ease-in-out;
}

.tabs ul li label:hover,
.tabs ul li label:focus,
.tabs ul li label:active {
  outline: 0;
  color: #bec5cf;
}

.tabs ul li label:hover svg,
.tabs ul li label:focus svg,
.tabs ul li label:active svg {
  fill: #bec5cf;
}

.tabs .slider {
  position: relative;
  width: 34%;
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.tabs .slider .indicator {
  position: relative;
  width: 50px;
  max-width: 100%;
  margin: 0 auto;
  height: 4px;
  background: #732024;
  border-radius: 1px;
}

.tabs input[name=zsec]:nth-of-type(1):checked~ul>li:nth-child(1)>label {
  cursor: default;
  color: #732024;
}

.tabs input[name=zsec]:nth-of-type(1):checked~ul>li:nth-child(1)>label svg {
  fill: #732024;
}

@media (max-width: 600px) {
  .tabs input[name=zsec]:nth-of-type(1):checked~ul>li:nth-child(1)>label {
    background: rgba(0, 0, 0, 0.08);
  }
}

.tabs input[name=zsec]:nth-of-type(1):checked~.slider {
  transform: translateX(0%);
}

.tabs input[name=zsec]:nth-of-type(2):checked~ul>li:nth-child(2)>label {
  cursor: default;
  color: #732024;
}

.tabs input[name=zsec]:nth-of-type(2):checked~ul>li:nth-child(2)>label svg {
  fill: #732024;
}

@media (max-width: 600px) {
  .tabs input[name=zsec]:nth-of-type(2):checked~ul>li:nth-child(2)>label {
    background: rgba(0, 0, 0, 0.08);
  }
}

.tabs input[name=zsec]:nth-of-type(2):checked~.slider {
  transform: translateX(100%);
}

.tabs input[name=zsec]:nth-of-type(3):checked~ul>li:nth-child(3)>label {
  cursor: default;
  color: #732024;
}

.tabs input[name=zsec]:nth-of-type(3):checked~ul>li:nth-child(3)>label svg {
  fill: #732024;
}

.button-v {
  align-items: center;
  background-clip: padding-box;
  background-color: #732024;
  border: 1px solid transparent;
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.button-v:hover,
.button-v:focus {
  background-color: #9B2B30;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: #FAE105;
}

.button-v:hover {
  transform: translateY(-1px);
}

.button-v:active {
  background-color: #9B2B30;
  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .tabs input[name=zsec]:nth-of-type(3):checked~ul>li:nth-child(3)>label {
    background: rgba(0, 0, 0, 0.08);
  }
}

.tabs input[name=zsec]:nth-of-type(3):checked~.slider {
  transform: translateX(200%);
}

@media (max-width: 1000px) {
  .tabs ul li label {
    white-space: initial;
  }

  .tabs ul li label br {
    display: initial;
  }

  .tabs ul li label svg {
    height: 1.5em;
  }
}

@media (max-width: 600px) {
  .tabs ul li label {
    padding: 5px;
    border-radius: 5px;
  }

  .tabs ul li label span {
    display: none;
  }

  .tabs .slider {
    display: none;

  }

  /* endcustomcss */