/* mobile table */
@media (min-width: 320px) and (max-width: 768px) {
  .hidecol  {
  display: none;
    }

}

/* Margin Nav Fixed responsive-----------------------------------------------------------------------------------------------------------*/

@media (min-width: 320px) and (max-width: 480px) {
  .margin-top-responsive  {
    margin-top: 20px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
  .margin-top-responsive   {
  margin-top: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .margin-top-responsive   {
  margin-top: 100px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .margin-top-responsive  {
  margin-top: 100px;
    }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .margin-top-responsive   {
  margin-top: 100px;
    }
}
@media (min-width: 1281px) {
  .margin-top-responsive   {
  margin-top: 140px;
    }
}




/* end MARGIN responsive-----------------------------------------------------------------------------------------------------------*/
/* Margin-COMPANY Nav Fixed responsive-----------------------------------------------------------------------------------------------------------*/

@media (min-width: 320px) and (max-width: 480px) {
  .margin-top-responsive-company  {
    margin-top: 20px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
  .margin-top-responsive-company   {
  margin-top: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .margin-top-responsive-company   {
  margin-top: 100px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .margin-top-responsive-company  {
  margin-top: 100px;
    }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .margin-top-responsive-company   {
  margin-top: 100px;
    }
}
@media (min-width: 1281px) {
  .margin-top-responsive-company   {
  margin-top: 120px;
    }
}
/* end MARGIN-COMPANY responsive-----------------------------------------------------------------------------------------------------------*/


@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
  .header-fixed .header-v6.header-fixed-shrink .navbar-brand img.shrink-logo {
    width: 100px;
}
.header-v6 .navbar-brand img.default-logo {
    width: 100px;
}

}

@media screen and (min-width: 1440px) {
  .header-v6 .navbar-brand img.default-logo {
      display: inherit;
      width: 150px;
  }
}







.button-nav{
    background-color: Transparent; /* Green */
    border: 1px solid;
    border-radius: 5px;
    border-color: #a33593;
    color: #a33593;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}
.button-nav:hover{
  background-color: #a33593;
  color:white;
  transition: 0.5s;
  top:2px;
  font-size: 14px;
  box-shadow: 5px 10px 18px #888888;
}
.button-center{
    background-color: #a33593; /* Green */
    border: 1px solid;
    border-radius: 2px;
    border-color: #a33593;
    color: white;
    padding: 15px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
}
.button-center:hover{
    background-color: #a33593;
    color:white;
    transition: 0.5s;
    top:2px;
}

@media (min-width: 320px) and (max-width: 480px) {

  .button-center{
  font-size: 12px;
  }

}

.button-center-bg-blue{
    background-color: #a33593;
    border: 1px solid;
    border-radius: 2px;
    border-color: #a33593;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}
.button-center-bg-blue:hover{
    background-color: #a33593;
    color:white;
    transition: 0.5s;
    top:2px;
    font-size: 20px;
}

.button-center-bg-blue-border{
    background-color:  white;
    border: 1px solid;
    border-radius: 2px;
    border-color:#a33593;
    color: purple;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
}
.button-center-bg-blue-border:hover{
    background-color: white;
    color:purple;
    transition: 0.5s;
    font-size: 26px;
}

.button-center-bg-product{
    background-color: white;
    border: 1px solid;
    border-radius: 5px;
    border-color:#686868;
    color: #686868;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin:10px;
}
.button-center-bg-product:hover{
    background-color: purple;
    color:white;
    transition: 0.5s;
    font-size: 12px;
}



.button-fixed-50{
  position:fixed;
  right: 0;
  top:40%;
    z-index: 999;
}

.button-fixed-50 li{
  width: 40px;
  height:40px;
  background-color: purple;
  text-align: 50px;
  color:white;
  list-style: none;
  left:50%;
  text-align:center; /* Horizontally centers text within line-wrapped elements */
  align-items: center;
  padding-top:10px;
  border-top: 1px solid black;
}

.button-fixed-50 li:hover {
  width: 40px;
  height:40px;
  background-color: black;
  color:white;
  text-align: 50px;
  color:white;
  list-style: none;
  left:50%;
  text-align:center; /* Horizontally centers text within line-wrapped elements */
  align-items: center;
  padding-top:10px;
  border-top: 1px solid black;
}

.button-fixed-50 a{
  text-decoration: none;
  color:white;
}

.button-fixed-bottom{
  position:fixed;
  right: 0;
  bottom:0;
  background-color: white;
  width: 100%;
  padding: 5px;
  z-index: 999;
}


.btn-purple-block {
    color: #fff;
    padding: 20px;
    background-color: purple;
    border-color: purple;
    font-size: 18px;
    font-weight: 700;
}
.btn-purple-block:hover {
    color: #fff;
    background-color: purple;
    border-color: purple;
}

.header-v6 .navbar-nav > li > a,
.header-v6 .navbar-nav > li > a:hover,
.header-v6 .navbar-nav > li > a:focus,
.header-v6 .navbar-nav > .active > a,
.header-v6 .navbar-nav > .active > a:hover,
.header-v6 .navbar-nav > .active > a:focus {
  color: black;
  font-weight: 600;
  background: none;
  font-size: 16px;
  padding-top: 25px;
  font-family: 'Dosis', sans-serif;
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
  .header-v6 .navbar-nav > li > a,
  .header-v6 .navbar-nav > li > a:hover,
  .header-v6 .navbar-nav > li > a:focus,
  .header-v6 .navbar-nav > .active > a,
  .header-v6 .navbar-nav > .active > a:hover,
  .header-v6 .navbar-nav > .active > a:focus {
    color: black;
    font-weight: 600;
    background: none;
    font-size: 12px;
    padding-top: 25px;
    font-family: 'Dosis', sans-serif;
  }
}

@media only screen and (min-device-width:1025px) and (max-device-width:1199px) {
  .header-v6 .navbar-nav > li > a,
  .header-v6 .navbar-nav > li > a:hover,
  .header-v6 .navbar-nav > li > a:focus,
  .header-v6 .navbar-nav > .active > a,
  .header-v6 .navbar-nav > .active > a:hover,
  .header-v6 .navbar-nav > .active > a:focus {
    color: black;
    font-weight: 600;
    background: none;
    font-size: 10px;
    padding-top: 25px;
    font-family: 'Dosis', sans-serif;
  }
}

.spesial-bg-tabel-btn{
  font-size:14px;
  font-weight:bold;
  background-color:#eae8e6;
}

.bg-color-black{
  background-color: black;
  color:white;
}
.bg-color-clean{
  background-color: white;
  color:black;
}
.bg-color-purple{
  background-color:#9b6bcc;
  color:white;
}

/* 14% = 100% (full-width row) divided by 7 */
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
/* 14% = 100% (full-width row) divided by 7 */
.header-v6 .dropdown-menu {
    border: none;
    padding: 15px 0;
    min-width: 230px;
    border-radius: 0;
    background: #fff;
    z-index: 9999 !important;
    border-top: solid 3px #a34f9d;
}
.header-v6 .dropdown-menu li a {
    color: #777;
  /*  font-size: 13px;*/
    font-size: 16px;
    font-weight: 400;
    padding: 6px 25px;
}

.header-v6 .dropdown-menu li a:hover {
    color: purple;
    font-weight: 400;
    padding: 6px 25px;
}
.header-v6 .shopping-cart .shopping-cart-open {
    right: 0;
    top: 94px;
    padding: 15px;
    display: none;
    min-width: 250px;
    background: #fff;
    position: absolute;
    border: 1px solid #e7e7e7;
    border-top: 2px solid #a33593;
}


.list{
  border-bottom: 2px solid purple;
}

a{
  color:purple;
  text-decoration:none;
}

a:hover{
  color:purple;
  text-decoration:none;
}



  .tab-v3 .nav-pills li a:hover, .tab-v3 .nav-pills li.active a {
      color: #fff;
      background: purple;
      border: solid 1px white;
      font-size:14px;
  }
  
  .tab-v3 .nav-pills li a {
    color: #777;
    font-size: 14px;
    padding: 4px 8px;
    margin-bottom: 3px;
    background: #fafafa;
    border: solid 1px #eee;
}


  ul.table-acoount li{
      color:black;
      padding: 20px;
      font-size: 16px;
  }

  .footer-v1 .footer {
    padding: 40px 0;
    background: #140015;
}
.footer-v1 .copyright {
    background: #160917;
    border-top: none;
    padding: 10px 0 5px;
}
.footer-v1 .footer h2 {
    color: #eee;
    font-size: 21px;
    font-weight: 600;
}

#tab-acount{
    width:100%;
    text-align:left;
    background-color:white;
    color:purple;
    border-bottom:1px solid purple;
    padding:10px;
    font-size:18px;
    border-radius: 10px;
    margin-bottom: 10px;

}
.purple-legal{
  color:purple;
  font-size: 20px;
  margin-top:40px;
  font-weight: 600;
}

.legal-jarak{
  padding:30px 0px;
  height:90px;
  border-top: 1px solid #e0e0e0;
  margin-bottom:10px;
  margin-top:10px;
  padding-left: 10px;
}

.btn-blue-tr {
    color: #2988ca;
    border: 1px solid #2988ca;
    background: transparent;
    font-weight: normal;
    padding: 8px 20px;
}
.btn-blue-tr:hover{
  background: purple;
  color:white;
}

.border{
  border: 1px solid #eee;
}


@media (min-width: 481px) and (max-width: 767px) {

  .trade{padding-top: 60px;}

}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  .trade{padding-top: 60px;}

}

.btn-legal {
  border-bottom: 2px solid black;
}
.btn-legal:hover{
  transition: 0.1s;
  border-top: 2px solid black;
  border-bottom: 0px solid black;
}
 a:visited{
  border-top: 2px solid black;
}





.pie {
    width: 300px;
    height: 300px;
    position: absolute;
    margin: auto;
}

.pie strong{
  color:black;
  font-size: 16px;
}
.pie .caption1{
  color:purple;
  position: absolute;
  top: 12px;
  left: 240px;
  white-space: nowrap;
}
.pie .caption2{
  color:green;
  position: absolute;
  top: 300px;
  left: 140px;
  white-space: nowrap;
}
.pie .caption3{
  color:blue;
  position: absolute;
  top: 12px;
  left: 0px;
  white-space: nowrap;
}

.acc-v1 .panel-heading {
  padding-top:10px;
  padding-bottom:10px;
  background-color:white;
}

.acc-v1 .panel-heading a {
    display: block;
    font-size: 20px;
    padding: 5px 15px;
    background: #fefefe;
}
.lists-v1 i {
    color: #fff;
    width: 25px;
    height: 25px;
    padding: 3px;
    font-size: 16px;
    margin-right: 10px;
    text-align: center;
    background: #72c02c;
    display: inline-block;
    border-radius: 50% !important;
}
.lists-vceklis i {
    color: purple;
    width: 25px;
    height: 25px;
    padding: 3px;
    font-size: 25px;
    margin-right:2px;
    text-align: center;
    display: inline-block;
}
#font-list{
  font-size: 20px;
  font-weight: 600;
}

.zero-button{
  background-color:purple;
  color:white;
  border:2px solid white;
  padding:20px;
  font-size: 20px;
  font-weight: 600;
}
.zero-button:hover{
  background-color:#a947a9;
  color:white;
  transition: 0.5s;
}

.sectiontop{
    margin: auto;
    position: relative;
    display: block;
    width: 300px;
    border-style: solid;
    border-width: 45px 150px 0px 150px;
    border-color: #fff transparent transparent transparent;
    z-index: 9;
}
.sectionbottom{
    margin: auto;
    position: relative;
    display: block;
    width: 300px;
    border-style: solid;
    border-width: 45px 150px 0px 150px;
    border-color: #eee transparent transparent transparent;
    z-index: 9;
}
.judul{
  font-size: 18px;
  color:purple;
  font-weight: 600;
  padding-bottom: 0px;
  padding-top: 20px;
  text-transform: uppercase;
}
.judul-n-p{
  font-size: 18px;
  color:purple;
  font-weight: 600;
  padding-bottom: 0px;
  text-transform: uppercase;
}
.judul-white{
  font-size: 18px;
  color:white;
  font-weight: 600;
  padding-bottom: 10px;
  padding-top: 10px;
}
.judul-white{
  font-weight:600;
  color:white;
  margin-top:80px;
  margin-bottom:40px;
  text-transform: uppercase;
}
.judul-besar{
  font-weight:600;
  color:purple;
  margin-top:5%;
  margin-bottom:5%;
  text-transform: uppercase;
}
.judul-besar-no-marginb{
  font-weight:600;
  color:purple;
  margin-top:80px;
  text-transform: uppercase;
}
.judul-besar-marginb-40{
  font-weight:600;
  color:purple;
  margin-bottom:35px;
  text-transform: uppercase;
}

@media (min-width: 425px) and (max-width: 767px) {

  .judul-besar-no-marginb{
    margin-top:10px;
  }
  
  }
  @media (min-width: 320px) and (max-width: 480px) {
  
    .judul-besar-no-marginb{
      margin-top:10px;
    }
  
}

.judul-besar-no-margin{
  font-weight:600;
  color:purple;
  text-transform: uppercase;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color:#b107b1;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    background: #800080;
    color:white;
}
.box{
  border: 1px solid purple;
  padding:20px;
  font-size: 16px;
}



	#myTable {
	  border-collapse: collapse;
	  width: 100%;
	  border: 1px solid #ddd;
	  font-size: 14px;
	}

	#myTable th{
	  text-align: center;
	  padding: 10px;
		background-color: purple;
		color:white;
    font-size: 14px;
	}

	#myTable td{
		text-align: center;
		padding: 5px;
		color:#352c2c;
	}

	#myTable tr {
	  border-bottom: 1px solid #ddd;
		background-color: white;
	}

.fulltext{
  font-size: 14px;

}

.row-centered {
  text-align:center;
}
.col-centered {
  display:inline-block;
  float:none;
}
.general-p-font{
    font-size: 16px;
    color: black;
    margin-top: 5px;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: justify;
}
.general-p-font-white p{
    font-size: 16px;
    color: white;
    margin-top: 5px;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: justify;
}
.general-p-font-center{
    font-size: 16px;
    color: black;
    margin-top: 5px;
    text-shadow: none;
    font-weight: 600;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: center;
    text-transform:uppercase;
}
.general-p-font-center-25{
  font-size: 25px;
  color: purple;
  margin-top: 5px;
  text-shadow: none;
  font-weight: 600;
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  text-transform:uppercase;
}
.general-p-font-left{
    font-size: 16px;
    color: black;
    margin-top: 5px;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: left;
}
.general-p-font-sm{
    font-size: 13px;
    color: #555;
    margin-bottom:10px;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: justify;
}
.general-p-font-sm-white p{
  color: white;
  font-size: 14px;
  margin-bottom:10px;
  text-shadow: none;
  font-weight: normal;
  font-family: "Open Sans", Arial, sans-serif;
  text-align: justify;
}
.general-p-font-sm-black p{
  color: black;
  font-size: 13px;
  margin-bottom:10px;
  text-shadow: none;
  font-weight: normal;
  font-family: "Open Sans", Arial, sans-serif;
  text-align: justify;
}

.general-p-font-lg{
    font-size: 20px;
    color: #555;
    margin-bottom:10px;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: justify;
}
.general-p-font-bold{
    font-size: 16px;
    color: #555;
    margin-bottom:10px;
    text-shadow: none;
    font-weight: 700;
    font-family: "Open Sans", Arial, sans-serif;
    text-align: justify;
}
.general-p-font-icon{
    font-size: 16px;
    color: black;
    margin-top: 5px;
    font-weight: 500;
    text-shadow: none;
    font-family: 'Dosis', sans-serif;
    text-align:center;
    line-height: 18px;
    margin-top:10px;
}

.general-p-font-icon p{
    font-size: 16px;
    color: black;
    margin-top: 5px;
    font-weight: 500;
    text-shadow: none;
    font-family: 'Dosis', sans-serif;
    text-align:center;
    line-height: 18px;
    margin-top:10px;
}

.bendera ul{
   display: inline-flex;
   list-style-type: none;
}
.bendera li{
  margin:0px 10px;
}
.bendera img{
  width: 150px;
}


.icon-bar-fix {
  position: fixed;
  bottom: -20px;
  z-index: 999;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar-fix a {
  display: block;
  text-align: center;
  padding: 15px;
  transition: all 0.3s ease;
  color: white;
  font-size: 18px;
}

.icon-bar-fix a:hover {
  background-color: #000;
}
.fix-purple-btn{
  background-color: #800080;
  color: white;
  padding: 0px 19px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  width: 100%;

}
.fix-purple-btn:hover{
  background-color:  #eee;
  color: #DC473A;
  padding: 0px 19px;
  border: none;
  cursor: pointer;
  width: 100%;

}
.fix-purple {
  background: #a9227e;
  color: white;
}

.fix-yellow {
  background: #edb126;
  color: white;
}

.fix-green {
  background: #2fbbaa;
  color: white;
}

@media (min-width: 1000px) {

  .displaymob {
  display: none;
}

}
.sexy_line {
    margin: 10px 0;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}
/*Readmore ------------------------- */
.lists{
  overflow:hidden;
}

.lists > .list-item{
  width:100%;
  margin-right:15px;
  margin-top:15px;
}
.elimore > a, .elimore_showonly > a{
  display:block;
  text-align:left;
  color:purple;
  border: 0;
  background-color: white;
  margin-top:10px;

}

/*Readmore ------------END------------- */
#link{
  color:white;
}
#link:hover{
  color:#efa5f7;
}
.service{
  color:blue;
  background-color:#fff0;
}
.service:hover{
  background-color: black;
}

/*-------ANIMASI naik turun-----------------*/
img.vert-move {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 2s infinite  alternate;
}
img.vert-move {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 2s infinite  alternate;
}
@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
/*-------ANIMASI naik turun-----------------*/
img.vert-move-home {
  -webkit-animation: mover-home 3s infinite  alternate;
  animation: mover-home 3s infinite  alternate;
}
img.vert-move-home {
  -webkit-animation: mover-home 3s infinite  alternate;
  animation: mover-home 3s infinite  alternate;
}
@-webkit-keyframes mover-home {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
@keyframes mover-home {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}


.mg-b-10{
  margin-bottom: 10px;
}
.mg-b-20{
  margin-bottom: 20px;
}
.mg-b-30{
  margin-bottom: 30px;
}
.mg-b-40{
  margin-bottom: 40px;
}
.mg-b-40{
  margin-bottom: 50px;
}
.livechat{
	bottom:10px;
	left:10px;
  position:fixed;
  z-index: 99;
}
#coos{ 
  font-size: 10px;
  position: relative;
  z-index: 33;
  top: -22px;
  left: 20px;
  margin-left: -90px;
  background-color:purple;
  color:white;
  padding:2px 10px;
  border-radius: 5px;
}
#coos:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 5px solid purple;
  border-right: 5px solid transparent;
  border-top: 5px solid purple;
  border-bottom: 5px solid transparent;
  right: 40px;
  bottom: -8px;
}

#borderrightp{
  border-right:1px solid purple;
}

.btn-nav-l{
  border:1px solid purple; 
  color:purple; 
  padding-left:25px; 
  padding-right:25px; 
}
.btn-nav-r{
  background-color:purple;
  color: white; 
  padding-left:20px; 
  padding-right:20px;
}
@media (min-width: 320px) and (max-width: 768px) {
  .btn-nav-l{
    border:1px solid purple; 
  color:purple;
    padding-left:20px; 
  padding-right:20px;
  padding-top:10px; 
padding-bottom:10px;
text-align: center;
  }
  .btn-nav-r{
    background-color:purple;
  color: white;
    padding-left:20px; 
    padding-right:20px;
    padding-top:10px; 
  padding-bottom:10px;
  text-align: center;
  }
}